/* Hoja de estilos unica de la lista de espera. Sin frameworks.
 *
 * Dos pantallas muy distintas comparten fichero:
 *
 *  .cartel  -> lo que ve el cliente al escanear. Movil, de pie, en la calle,
 *              a veces con sol de cara. Todo grande y muy poco en pantalla.
 *  .panel   -> lo que mira el local. Movil tambien, pero con una bandeja en
 *              la otra mano: botones grandes y separados, y nada que se
 *              pueda pulsar sin querer.
 */

/* --- La paleta -----------------------------------------------------------
 *
 * LOS NEUTROS Y LOS SEMANTICOS SON LOS DE LA CASA, y estan escritos igual en
 * reservas y en la plataforma de turnos. Lo unico que cambia de una a otra es
 * `--primario`. Asi las tres se reconocen como el mismo fabricante sin que
 * nadie confunda una con otra: el 90% es identico y el acento las separa.
 *
 *   reservas -> naranja  #B25600   (sobre fondo oscuro #FF9A3D)
 *   turnos   -> turquesa #146A78   (sobre fondo oscuro #3FBBD0)
 *   espera   -> ciruela  #7C3577   (sobre fondo oscuro #E08FD8)   <- esta
 *
 * EL ACENTO TIENE QUE VALER PARA DOS COSAS A LA VEZ, y por eso no es un tono
 * cualquiera: rellena el boton de «Sentar» -con letra blanca encima- y ademas
 * se usa COMO letra en `button.enlace`. Aclararlo mejora una y estropea la
 * otra. Este da 7.98:1 con el blanco encima y 7.20:1 como texto sobre el
 * fondo. `pruebas/prueba_estilo.py` lo mide y falla si alguien afina un tono y
 * rompe la otra direccion.
 *
 * POR QUE CIRUELA Y NO OTRO. En esta pantalla el verde, el ambar y el rojo ya
 * significan cosas -«sentado», «lleva mucho esperando», «se ha ido»- asi que
 * el color de la marca tenia que caer lejos de los tres o competiria con el
 * estado. Antes era un verde (#1f6f54), justo el tono que aqui quiere decir
 * otra cosa.
 */
:root {
  /* Los neutros. Tono 203, el del azul claro de la marca: el gris no es plano,
     tira discretamente a azul, igual que el fondo de disertic.com. */
  --fondo: #EFF4F7;
  --tarjeta: #FFFFFF;
  --tinta: #0F1C23;
  --suave: #4A5D66;
  --linea: #DCE7EC;

  /* El acento de esta plataforma. */
  --primario: #7C3577;
  --primario-tinta: #FFFFFF;
  /* El hover OSCURECE. Aclarando se pierde el blanco de encima. */
  --primario-vivo: #632A5F;

  /* EL CIRUELA PARA FONDO OSCURO. Hoy no lo pinta ninguna pantalla de aqui:
     esta plataforma va clara siempre. Esta escrito igualmente porque YA SE
     USA FUERA -el favicon de `marca/colas/favicon.svg`, que el navegador
     pinta sobre negro cuando el sistema va en modo oscuro-, y ahi el #7C3577
     se apaga: 2.21:1 sobre el fondo oscuro de la casa.

     El tono se eligio como los de las otras dos: sube en claridad hasta
     quedar a la altura del naranja de reservas y del turquesa de turnos, y
     sirve para los DOS papeles, que es la regla de esta casa. Sobre el fondo
     oscuro comun (#101A20) da 7.63:1 como letra, y 7.64:1 de relleno con la
     tinta casi negra encima.

     El dia que haya una pantalla oscura -un cartel de barra, un panel de
     noche- este es el tono, y no uno inventado en el momento. */
  --primario-oscuro: #E08FD8;

  /* EL GRIS DEL NOMBRE DE LA MARCA. No es un neutro de la interfaz: es el que
     manda la hoja de marca para la palabra «colas» al lado del simbolo, y es
     el mismo en las tres plataformas («reservas» y «fichajes» lo llevan
     igual). Por eso no se apaña con `--tinta`: si algun dia la interfaz
     cambia de tinta, el logotipo NO tiene que seguirla. Solo se usa ahi. */
  --marca-gris: #4D4D4D;

  /* «Llamar» es la accion de al lado, no la principal: va en el azul pizarra
     de Disertic, que aqui hace de estructura. Antes era un azul cualquiera. */
  --llamada: #365261;

  /* Los semanticos. Aqui el color ES el significado. */
  --ambar: #A85200;
  --peligro: #A4231C;

  /* Tintes: fondos suaves. No llevan letra de su color encima salvo donde se
     dice, y ahi esta medido. */
  --aviso-fondo: #FFF3E2;
  --aviso-borde: #E8C08A;
  --peligro-fondo: #FBEAE8;
  --peligro-borde: #E7B7B2;
  /* El boton gris: el de «no ahora». Mas oscuro que la linea para que se vea
     que es un boton y no un hueco. */
  --gris-boton: #DEE8ED;

  /* Quien lleva mucho rato esperando. Es un aviso, no un error: nadie ha hecho
     nada mal, solo hay que mirarlo. */
  --espera-larga: #FFF4E6;
  --espera-larga-borde: #E8B978;

  /* EL PAPEL DEL CARTEL, y es blanco puro a proposito. No es el `--tarjeta` de
     la pantalla aunque hoy valgan lo mismo: esto se imprime, y el blanco de un
     A4 es el de la hoja, no el de ningun tema. Si manana el fondo de las
     tarjetas se tiñe un poco, el cartel no tiene que seguirlo. */
  --papel-impreso: #FFFFFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.45;
  /* En un movil apaisado en la barra, el area segura del notch. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1 { font-size: 1.4rem; margin: 0 0 .6rem; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
a { color: var(--primario); }
code {
  background: var(--fondo);
  padding: .1em .35em;
  border-radius: 4px;
  font-size: .85em;
  overflow-wrap: anywhere;
}

.contenido { padding: 1rem; max-width: 720px; margin: 0 auto; }
.suave { color: var(--suave); font-size: .88em; }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- La marca ------------------------------------------------------------
 *
 * El simbolo va INCRUSTADO en la pagina (`app/plantillas.py` lo lee de
 * `static/marca/icono.svg`) y esta pintado con `currentColor`: no lleva
 * color dentro, lo coge del `color` de quien lo contiene. Aqui se le da el
 * acento por defecto, y asi el mismo dibujo vale en blanco el dia que haya
 * una pantalla oscura con solo cambiarle el `color` al contenedor.
 *
 * Los tamaños no son tres caprichos: 24 en la barra -al lado del nombre del
 * local, sin robarle sitio-, 40 en las dos puertas -es lo primero que se ve
 * al abrir- y 20 en la firma del pie de la pantalla del cliente, que tiene
 * que estar y no llamar la atencion.
 *
 * DE 20 NO BAJA. Es la regla de la hoja de marca: por debajo se cae el aro
 * interior y los tres puntos se juntan en una mancha. Para eso esta el
 * favicon, que es OTRO dibujo -sin aro interior y con el trazo mas gordo- y
 * que va enlazado en el `<head>`, no aqui.
 */
.simbolo {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--primario);
}

.marca { display: flex; align-items: center; gap: .45rem; margin: 0; }
.marca-nombre {
  font-weight: 600;
  /* La palabra va en minusculas y algo apretada, como en la hoja de marca. */
  letter-spacing: -.01em;
  color: var(--marca-gris);
}

/* En grande, la marca NO se centra por su cuenta: se alinea con lo que tenga
   debajo. En una tarjeta el titulo va a la izquierda y el logo tambien; en la
   pantalla del PIN, que va centrada entera, se centra el (regla de abajo). */
.marca.grande { margin-bottom: 1.1rem; }
.marca.grande .simbolo { width: 40px; height: 40px; }
.marca.grande .marca-nombre { font-size: 1.5rem; }
.acceso .marca.grande { justify-content: center; }

/* La firma del pie. Va en la pantalla del CLIENTE, que es la del restaurante
   y no la nuestra: pequeña, centrada y al final del todo. Si algun local no
   la quiere, la quita el mismo en ajustes (`Local.mostrar_firma`). */
.firma { justify-content: center; margin-top: 2.5rem; gap: .4rem; }
.firma .simbolo { width: 20px; height: 20px; }
.firma .marca-nombre { font-size: .85rem; }
/* La segunda linea de la firma: la casa, enlazada a su web. En gris y no en
   el acento, para no competir con el restaurante; el subrayado es lo que
   dice que se puede pulsar, que el color solo no basta. */
.firma-casa { margin: .3rem 0 0; text-align: center; font-size: .85rem; }
.firma-casa a { color: var(--suave); text-underline-offset: 2px; }

/* --- Piezas comunes ------------------------------------------------------ */

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
}
.tarjeta.estrecha { max-width: 430px; margin: 3rem auto; }

.flash {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  border-radius: 10px;
  padding: .7rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
}
.error {
  background: var(--peligro-fondo);
  border: 1px solid var(--peligro-borde);
  border-radius: 10px;
  padding: .7rem 1rem;
  margin-bottom: 1rem;
  color: var(--peligro);
}
.aviso-suave {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  border-radius: 10px;
  padding: .7rem .9rem;
  margin: .9rem 0;
  font-size: .92rem;
}

label { display: block; margin: 0 0 .9rem; }
label.corta { max-width: 22rem; }
input, select, textarea {
  display: block;
  margin-top: .3rem;
  padding: .6rem .6rem;
  border: 1px solid var(--linea);
  border-radius: 8px;
  /* 16px como minimo: por debajo, iOS hace zoom al enfocar el campo y
     descoloca la pagina entera. */
  font: inherit;
  font-size: 16px;
  width: 100%;
  background: var(--tarjeta);
  color: var(--tinta);
}
textarea { resize: vertical; }
input[type="radio"], input[type="checkbox"] { width: auto; display: inline-block; }
.opcional { color: var(--suave); font-weight: 400; font-size: .85em; }
.ayuda { display: block; color: var(--suave); font-size: .82rem; margin-top: .25rem; }

button, .boton {
  font: inherit;
  padding: .7rem 1.1rem;
  border: 0;
  border-radius: 8px;
  background: var(--primario);
  color: var(--primario-tinta);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  /* Nada por debajo de esto: es el minimo con el que un pulgar acierta. */
  min-height: 44px;
}
button.principal, .boton.principal { width: 100%; font-size: 1.05rem; font-weight: 600; }
button.gris, .boton.gris { background: var(--gris-boton); color: var(--tinta); }
button.quitar, .boton.quitar {
  background: var(--peligro-fondo); color: var(--peligro);
}
button.enlace {
  background: none; color: var(--primario); padding: .2rem 0;
  text-decoration: underline; min-height: 0;
}
.linea { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; }
.linea input { flex: 1 1 12rem; margin-top: 0; }

/* =========================================================================
   EL CARTEL: lo que ve el cliente
   ========================================================================= */

body.cartel { background: var(--tarjeta); }

.hoja {
  max-width: 460px;
  margin: 0 auto;
  padding: 1.6rem 1.2rem 3rem;
}
.hoja .local {
  margin: 0 0 1.4rem;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .01em;
}

/* El numero de la cola. Es lo unico que esta persona ha venido a ver. */
.puesto { text-align: center; margin: 1.5rem 0 1.2rem; }
.puesto .etiqueta {
  margin: 0; color: var(--suave); font-size: .95rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.puesto .numero {
  margin: .1rem 0 .3rem;
  font-size: 5.5rem;
  line-height: 1;
  font-weight: 700;
  color: var(--primario);
  font-variant-numeric: tabular-nums;
}
.puesto .pie { margin: 0; font-size: 1.05rem; }

.aviso-mesa {
  background: var(--primario);
  color: var(--primario-tinta);
  border-radius: 14px;
  padding: 1.6rem 1.2rem;
  text-align: center;
  margin: 1.5rem 0;
}
.aviso-mesa .grande { font-size: 1.8rem; font-weight: 700; margin: 0 0 .5rem; }
.aviso-mesa p { margin: 0; }

.cerrada { text-align: center; margin: 2rem 0; }
.cerrada .grande { font-size: 1.35rem; font-weight: 700; margin: 0 0 .6rem; }

.cuantos {
  background: var(--fondo);
  border-radius: 10px;
  padding: .8rem 1rem;
  margin: 0 0 1.2rem;
  text-align: center;
  font-size: 1.05rem;
}

.resumen {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem .9rem;
  margin: 1.4rem 0;
  padding: .9rem 1rem;
  background: var(--fondo);
  border-radius: 10px;
  font-size: .92rem;
}
.resumen dt { color: var(--suave); }
.resumen dd { margin: 0; overflow-wrap: anywhere; }

.hoja .nota { color: var(--suave); font-size: .88rem; margin: 1.2rem 0 0; }
/* Debajo del numero, el aviso de que el orden depende de las mesas libres.
   Mas pequeño que la nota normal: explica el numero, no compite con el. */
.puesto .nota { font-size: .8rem; margin-top: .8rem; }
.irse { margin-top: 1.6rem; text-align: center; }
.apuntarse button { margin-top: .4rem; }

/* =========================================================================
   EL PANEL: lo que mira el local
   ========================================================================= */

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  background: var(--tarjeta);
  border-bottom: 1px solid var(--linea);
  padding: .7rem 1rem;
  position: sticky;
  top: 0;
  z-index: 5;
}
/* El simbolo y el nombre del local van juntos y a la izquierda; el boton de
   la derecha se queda donde estaba. `min-width: 0` para que un nombre largo
   se recorte en vez de empujar al boton fuera de la pantalla. */
.barra-quien { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.barra-local strong { display: block; }
.barra-local .suave { display: block; }

.interruptor button { min-height: 40px; padding: .5rem .9rem; }
button.apagar { background: var(--peligro-fondo); color: var(--peligro); }
button.encender { background: var(--primario); }

.cinta-cerrada {
  background: var(--peligro-fondo);
  color: var(--peligro);
  padding: .6rem 1rem;
  text-align: center;
  font-size: .92rem;
}

.vacio {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--suave);
}
.vacio .grande { font-size: 1.2rem; color: var(--tinta); margin: 0 0 .4rem; }

/* --- La ficha de cada grupo ---------------------------------------------- */

.ficha {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: .9rem 1rem;
  margin: 0 0 .8rem;
}
/* Media hora esperando ya es alguien a quien hay que ir a ver. */
.ficha.lleva-rato {
  background: var(--espera-larga);
  border-color: var(--espera-larga-borde);
}

.ficha-cabeza { display: flex; align-items: center; gap: .8rem; }
.ficha .puesto {
  flex: 0 0 auto;
  margin: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--primario);
  color: var(--primario-tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ficha .quien { min-width: 0; }
.ficha .nombre {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.ficha .datos { margin: .15rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; }
/* Los comensales de cada ficha. Mas grande que el resto de datos desde el
   25/9/2026: es lo que se busca con la mirada al quedar libre una mesa -«¿a
   quien le cabe una de dos?»- y a .85rem se perdia al lado del nombre. */
.pastilla {
  background: var(--fondo);
  border-radius: 999px;
  padding: .15rem .7rem;
  font-size: 1.05rem;
  font-weight: 600;
}
.ficha .espera { color: var(--suave); font-size: .88rem; align-self: center; }
.ficha.lleva-rato .espera { color: var(--ambar); font-weight: 600; }

.marca-aviso { margin: .6rem 0 0; font-size: .85rem; color: var(--suave); }
.marca-aviso.fallido { color: var(--peligro); font-weight: 600; }
.nota-ficha {
  margin: .6rem 0 0;
  font-size: .9rem;
  background: var(--fondo);
  border-radius: 8px;
  padding: .4rem .6rem;
}

/* Los tres botones. En fila si caben, y a lo ancho si no: nunca apretados
   unos contra otros, que es como se sienta a quien no era. */
.acciones {
  display: flex;
  gap: .5rem;
  margin-top: .8rem;
  flex-wrap: wrap;
}
.acciones form { flex: 1 1 8rem; }
.acciones .boton, .acciones button { width: 100%; }
.acciones .llamar { flex: 1 1 8rem; background: var(--llamada); }
.acciones .avisar { background: var(--gris-boton); color: var(--tinta); }
/* A lo ancho SIEMPRE, tenga la ficha uno, dos o ningun boton mas: el gesto
   que se repite todo el servicio no puede cambiar de sitio segun la ficha. */
.acciones .caja-sentar { flex: 1 1 100%; }
.acciones .sentar { background: var(--primario); font-weight: 600; font-size: 1.05rem; }

.mas { margin-top: .6rem; }
.mas summary {
  cursor: pointer;
  color: var(--suave);
  font-size: .88rem;
  padding: .3rem 0;
}
.mas-dentro { padding-top: .5rem; border-top: 1px solid var(--linea); }
.mas-dentro p { margin: .2rem 0; overflow-wrap: anywhere; }
.mas-dentro form { margin-top: .6rem; }

.deshacer { margin: 0; }

.pie-panel {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 1.5rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
  font-size: .92rem;
}
.pie-panel form { margin: 0; }

/* --- La pantalla del PIN -------------------------------------------------- */

body.terminal { background: var(--fondo); }
.acceso { max-width: 320px; margin: 2.5rem auto; text-align: center; padding: 0 1rem; }
.acceso .local { font-weight: 700; margin: 0 0 .3rem; }
.acceso h1 { margin: 0 0 .2rem; }
.acceso input[type="password"] {
  text-align: center;
  font-size: 1.8rem;
  letter-spacing: .5rem;
  padding: .5rem;
  margin: 1rem 0;
}
.teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.teclado button {
  font-size: 1.4rem;
  padding: .9rem 0;
  background: var(--tarjeta);
  color: var(--tinta);
  border: 1px solid var(--linea);
  min-height: 58px;
}
.teclado button.gris { background: var(--gris-boton); }
.teclado button.verde { background: var(--primario); color: var(--primario-tinta); }

/* --- Ajustes -------------------------------------------------------------- */

table.campos { width: 100%; border-collapse: collapse; margin: .5rem 0 0; }
table.campos th, table.campos td {
  padding: .55rem .3rem;
  border-bottom: 1px solid var(--linea);
  text-align: center;
}
table.campos thead th { font-size: .8rem; color: var(--suave); font-weight: 600; }
table.campos tbody th {
  text-align: left;
  font-weight: 600;
  /* La primera columna manda: el resto son tres radios que caben en poco. */
  width: 46%;
}
table.campos tbody th .suave { display: block; font-weight: 400; }
.opcion { margin: 0; }
.opcion input { margin: 0; transform: scale(1.35); }

.previa {
  margin-top: 1rem;
  padding: .8rem 1rem;
  background: var(--fondo);
  border-radius: 10px;
}
.previa-asunto { font-weight: 700; margin: .2rem 0 .5rem; }
.previa-cuerpo {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
  font-size: .9rem;
  color: var(--tinta);
}

/* --- /central ------------------------------------------------------------- */

.entrega { border-color: var(--primario); }
.entrega-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem .9rem;
  margin: .8rem 0 0;
  font-size: .9rem;
}
.entrega-datos dt { color: var(--suave); }
.entrega-datos dd { margin: 0; overflow-wrap: anywhere; }
.entrega-datos dd.pin {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .25rem;
  font-variant-numeric: tabular-nums;
}

/* El PIN de un local de antes del 26/9/2026, que solo tiene hash: una raya
   en gris, que no parezca un PIN que no abre. */
.entrega-datos dd.pin.desconocido { color: var(--suave); letter-spacing: 0; }

/* Los grupos del listado: cada distribuidor con sus locales debajo. */
.grupo-distribuidor { font-size: 1.15rem; margin: 1.8rem 0 .7rem; }
.grupo-distribuidor .suave { font-weight: 400; }
.grupo-vacio { margin: 0 0 1rem; }

.local-ficha.suspendido { opacity: .6; }
.local-cabeza { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
/* El nombre del local es h3 desde que los distribuidores son los h2, pero se
   ve igual que cuando era h2: la jerarquia es para los lectores de pantalla. */
.local-cabeza h3 { margin: 0; font-size: 1.1rem; }
.conteo { margin: 0; text-align: right; white-space: nowrap; }
.conteo strong { font-size: 1.6rem; display: block; font-variant-numeric: tabular-nums; }
.acciones-local { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; align-items: center; }
.acciones-local form { margin: 0; }
.acciones-local .mas { flex-basis: 100%; margin-top: .2rem; }
/* El desplegable del distribuidor, en la misma fila que los botones. */
.colgar { display: flex; gap: .4rem; align-items: center; }
.colgar select { width: auto; margin: 0; }

/* Bajo el nombre de cada distribuidor, su acceso a /plataforma. */
.acceso-distribuidor {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: -.3rem 0 .9rem;
}
.acceso-distribuidor p { margin: 0; flex-basis: 100%; }
.acceso-distribuidor form { margin: 0; }
.acceso-distribuidor .linea { flex: 1 1 100%; }

/* La contraseña recien generada: se enseña una vez y hay que copiarla bien. */
.entrega-datos dd.clave-entregada {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .05rem;
}

/* Los enlaces de la barra del area del distribuidor: Mi cuenta y Salir. */
.barra-enlaces { display: flex; gap: 1rem; align-items: center; }
.barra-enlaces form { margin: 0; }

/* =========================================================================
   EL CARTEL IMPRESO
   ========================================================================= */

.cartel-hoja {
  background: var(--papel-impreso);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  margin: 1rem 0;
}
.cartel-titulo { font-size: 1.6rem; font-weight: 700; margin: 0 0 .3rem; }
.cartel-reclamo { font-size: 1.15rem; margin: 0 0 1.2rem; }
.cartel-qr svg { width: 100%; max-width: 320px; height: auto; }
.cartel-pasos { margin: 1.2rem 0 .6rem; font-size: 1rem; }
.cartel-direccion { color: var(--suave); font-size: .8rem; overflow-wrap: anywhere; margin: 0; }

/* La segunda copia del cartel solo existe para la impresora. */
@media screen {
  .cartel-copia { display: none; }
}

/* A4 vertical, el que sale por defecto en cualquier navegador. Margen de
   pagina A CERO a proposito: el navegador imprime en el margen la direccion
   de la pagina, y la del cartel del panel es /p/<clave secreta>/cartel, que
   acabaria pegada en el cristal. Sin margen no hay donde ponerla; el aire
   alrededor lo da el relleno de .contenido. */
@page { size: A4; margin: 0; }

@media print {
  /* Fuera todo lo que no es el cartel. */
  .sin-imprimir, .barra { display: none !important; }
  body { background: var(--papel-impreso); margin: 0; }
  .contenido { padding: 7mm; max-width: none; margin: 0; }
  /* DOS CARTELES POR A4, uno encima de otro, para cortar la hoja por la
     mitad: un folio entero por cartel era demasiado grande (27/9/2026).
     (297 - 2 x 7) / 2 = 141,5 mm por mitad; 141 para no rozar una segunda
     hoja. En cada mitad el QR a un lado y los textos al otro: asi cabe a
     13 cm, y uno encima de otro se quedaria en 9-10. MEDIDO el 27/9/2026: a
     13 cm se lee mejor que el QR antiguo a hoja entera sin reflejos y con
     camara antigua; con un brillo encima, peor, asi que el plastico mate
     importa mas que nunca. */
  .cartel-hoja {
    display: grid;
    grid-template-columns: 13cm 1fr;
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: 6mm;
    align-items: center;
    box-sizing: border-box;
    height: 141mm;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    text-align: left;
    break-inside: avoid;
  }
  /* La linea por donde se corta. */
  .cartel-hoja + .cartel-hoja { border-top: 1px dashed var(--suave); }
  .cartel-qr { grid-column: 1; grid-row: 1 / -1; }
  .cartel-qr svg { display: block; width: 13cm; max-width: none; }
  .cartel-titulo { grid-column: 2; grid-row: 2; font-size: 24pt; text-wrap: balance; }
  .cartel-reclamo { grid-column: 2; grid-row: 3; font-size: 15pt; text-wrap: balance; }
  .cartel-pasos { grid-column: 2; grid-row: 4; font-size: 11pt; text-wrap: pretty; }
  .cartel-direccion { grid-column: 2; grid-row: 5; font-size: 8pt; }
}