/*
 * 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;
}

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

.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;
}

/*
 * ═══ LA INSTALACIÓN (SITIO 02) ══════════════════════════════════════════════
 *
 * Los pasos de iPhone van numerados porque el ORDEN es la instrucción. La
 * invitación de Android es una tarjeta DEBAJO de «Activar avisos», con un
 * botón con borde y un «Ahora no» discreto: instalar es una comodidad y no
 * puede competir con activar. Los dos siguen siendo áreas de toque de 44 px.
 */
.pasos {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
}

.pasos li + li {
  margin-top: 0.375rem;
}

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

.instalar {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
}

.instalar-texto {
  margin: 0 0 0.5rem;
  color: var(--apagado);
  font-size: 0.9375rem;
}

.instalar-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.instalar-acciones .boton {
  flex: 1 1 8rem;
  width: auto;
  margin-top: 0.25rem;
}

.boton.discreto {
  background: transparent;
  color: var(--apagado);
  border-color: transparent;
  font-weight: 400;
}

/*
 * ═══ LA IDENTIDAD DEL NEGOCIO ═══════════════════════════════════════════════
 *
 * Todo lo de abajo sólo se aplica cuando `arranque.js` ha puesto la clase
 * `con-identidad` en la raíz, es decir, cuando el negocio del QR tiene una
 * identidad pública cargada. Sin ella, la página es la de arriba.
 *
 * LOS COLORES NO ESTÁN AQUÍ. Son del negocio y llegan por la red: el arranque
 * los escribe como propiedades de la raíz —`--acento`, `--acento-texto` y, si
 * hay un color con el que se pueda escribir, `--titulo`— después de comprobar
 * que son `#rrggbb` y de calcular qué texto se lee encima. Esta hoja sólo dice
 * DÓNDE se usan.
 *
 * SUPERFICIE BLANCA, SIEMPRE. Con identidad la página deja de seguir el modo
 * oscuro del sistema: un logo se diseña para un fondo, y el contraste del
 * texto se calculó contra el blanco.
 */
:root.con-identidad {
  color-scheme: light;
  --fondo: #f5f5f4;
  --tarjeta: #ffffff;
  --texto: #1c1917;
  --apagado: #57534e;
  --borde: #d6d3d1;
}

/* El filete: el color del negocio, sin texto encima. */
.con-identidad .tarjeta {
  border-top: 0.375rem solid var(--acento);
}

.con-identidad .titulo {
  text-align: center;
  font-size: 1.5rem;
  color: var(--titulo, var(--texto));
}

/*
 * MIENTRAS SE PREGUNTA DE QUIÉN ES EL QR no se esconde nada (M-3): el título
 * genérico se ve desde el primer instante y, si la respuesta trae un negocio,
 * cambia cuando llega. Con la frontera lenta o caída, lo que se ve es la
 * página de siempre, no un hueco.
 */

.logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 17rem);
  max-height: 9rem;
  margin: 0 auto 1rem;
}

.sucursal {
  margin: 0 0 0.125rem;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--titulo, var(--texto));
}

.direccion {
  margin: 0 0 1rem;
  text-align: center;
  color: var(--apagado);
  font-size: 0.9375rem;
}

/* Sin dirección, el hueco de debajo de la sucursal lo pone ella. */
.sucursal:not([hidden]) + .direccion[hidden] + .presentacion {
  margin-top: 0.875rem;
}

/* El listado de sucursales y la lista de negocios: informativos, separados del resto. */
.sucursales,
.negocios {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
}

.lista-sucursales,
.lista-negocios {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sucursal-listada {
  padding: 0.5rem 0 0.5rem 0.75rem;
  border-left: 0.1875rem solid transparent;
}

/* La sucursal por la que se entró: un filete del color del negocio, no una palabra. */
.sucursal-listada.actual {
  border-left-color: var(--acento);
}

.sucursal-listada-nombre {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}

.sucursal-listada-direccion {
  display: block;
  color: var(--apagado);
  font-size: 0.8125rem;
}

.lista-negocios li + li {
  margin-top: 0.5rem;
}

/* Cada negocio es un área de toque entera, como el botón: 44 px de alto mínimo. */
.negocio-enlace {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  /* Blanco también en modo oscuro: un logo se diseña para un fondo claro. */
  background: #ffffff;
  color: #1c1917;
  font-weight: 600;
  text-decoration: none;
}

/*
 * EL NOMBRE SE LEE SIEMPRE (M-4): el logo acompaña, acotado a menos de la
 * mitad del ancho y sin estirarse ni encogerse, y el nombre se queda con el
 * resto, partiéndose si hace falta en vez de desbordar. En móvil y en
 * escritorio.
 */
.negocio-logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: 40%;
  max-height: 2.25rem;
}

.negocio-nombre {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/*
 * ═══ LOS INTERRUPTORES POR SUCURSAL (0042) ═════════════════════════════════
 *
 * Una fila por sucursal pública: el nombre a la izquierda y, a la derecha, un
 * botón con `role="switch"` cuyo estado lo dice `aria-checked` Y su texto
 * —«Activo» / «En pausa»—: nada depende de un color para entenderse. Cada
 * interruptor es un área de toque entera —44 px de alto mínimo, como el botón
 * principal— porque se toca de pie y con una mano. Con identidad, el estado
 * activo lleva el color del negocio; sin ella, el acento de siempre.
 */
.preferencias {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
}

.lista-preferencias {
  margin: 0;
  padding: 0;
  list-style: none;
}

.preferencia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.375rem 0;
}

.preferencia + .preferencia {
  border-top: 1px solid var(--borde);
}

.preferencia-nombre {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.interruptor {
  flex: 0 0 auto;
  min-height: 2.75rem;
  min-width: 6.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: transparent;
  color: var(--apagado);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.interruptor[aria-checked="true"] {
  background: var(--acento);
  color: var(--acento-texto);
  border-color: transparent;
}

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

/* «Avisos de X en pausa en este dispositivo», o el motivo de un cambio que no se pudo hacer. */
.preferencias-estado {
  margin: 0.75rem 0 0;
  color: var(--apagado);
  font-size: 0.9375rem;
}

/* La nota de privacidad: separada del resto y en letra pequeña, pero legible. */
.privacidad {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
  color: var(--apagado);
  font-size: 0.8125rem;
}

.subtitulo {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.lista {
  margin: 0;
  padding-left: 1.125rem;
}

.lista li + li {
  margin-top: 0.25rem;
}