/*
 * EL ESTILO DEL SITIO PÚBLICO. Un archivo, servido por este mismo origen.
 *
 * Sin fuentes remotas, sin `@import` y sin nada de terceros: la política de
 * contenido es `style-src 'self'` y `font-src` ni siquiera está abierto, así
 * que una fuente de Google no se cargaría — y no está, que es lo que importa.
 * La tipografía es la del sistema, que además es la que mejor se lee en cada
 * dispositivo y la única que no cuesta una petición a otro dominio.
 *
 * Esto es PROVISIONAL, como el texto: el aspecto definitivo es una decisión de
 * producto que nadie ha tomado. Lo que hay aquí sólo pretende que la pantalla
 * sea legible, que el botón se pueda tocar con el pulgar y que nada dependa de
 * un color para entenderse.
 */

:root {
  color-scheme: light dark;
  --fondo: #f5f5f4;
  --tarjeta: #ffffff;
  --texto: #1c1917;
  --apagado: #57534e;
  --borde: #d6d3d1;
  --acento: #1d4ed8;
  --acento-texto: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #1c1917;
    --tarjeta: #292524;
    --texto: #f5f5f4;
    --apagado: #a8a29e;
    --borde: #44403c;
    --acento: #3b82f6;
    --acento-texto: #0c0a09;
  }
}

* {
  box-sizing: border-box;
}

/*
 * `hidden` TIENE QUE OCULTAR. Esta regla no es defensiva: es OBLIGATORIA, y
 * está aquí porque su ausencia produjo un defecto real que ninguna prueba sin
 * navegador podía ver.
 *
 * ─── QUÉ PASA SIN ELLA ─────────────────────────────────────────────────────
 *
 * El atributo `hidden` no oculta por sí mismo: oculta porque la hoja de estilo
 * del NAVEGADOR trae `[hidden] { display: none }`, y esa regla tiene la
 * especificidad más baja que existe. En cuanto una hoja de estilo de autor fija
 * `display` sobre el mismo elemento —aquí `.boton { display: block }`— GANA, y
 * el elemento se pinta aunque su propiedad `hidden` valga `true`.
 *
 * Medido en Chromium contra este mismo sitio: con el estado en
 * ERROR_CONFIGURACION, `document.getElementById("principal").hidden` devolvía
 * `true` y el botón «Activar avisos» estaba EN PANTALLA. Es exactamente lo que
 * §13 existe para impedir —un botón que promete algo que no va a pasar— y es
 * invisible para cualquier prueba que consulte la propiedad en vez de mirar lo
 * pintado.
 *
 * `!important` porque la regla tiene que ganarle a CUALQUIER `display` que se
 * escriba después en este archivo, incluido el que alguien añada mañana sin
 * acordarse de esto.
 */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

.tarjeta {
  width: 100%;
  max-width: 26rem;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
  padding: 1.75rem;
}

.titulo {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.mensaje {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
}

.detalle {
  margin: 0 0 1rem;
  color: var(--apagado);
  font-size: 0.9375rem;
}

.detalle:empty {
  margin: 0;
}

/*
 * EL ÁREA DE TOQUE. 44 px de alto mínimo no es una cifra estética: es el tamaño
 * por debajo del cual un pulgar falla, y este botón se toca de pie, en la calle
 * y con una mano.
 */
.boton {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  margin-top: 0.75rem;
  padding: 0.625rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: var(--acento);
  color: var(--acento-texto);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.boton[disabled] {
  opacity: 0.6;
  cursor: default;
}

.boton.secundario {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde);
  font-weight: 400;
}

.advertencia {
  margin: 0.5rem 0 0;
  color: var(--apagado);
  font-size: 0.8125rem;
}