/* 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, se quita el `{{ marca.firma() }}` de las dos plantillas de
   `publico/` y no hay que tocar nada mas. */
.firma { justify-content: center; margin-top: 2.5rem; gap: .4rem; }
.firma .simbolo { width: 20px; height: 20px; }
.firma .marca-nombre { font-size: .85rem; }
.firma .suave { font-size: .85rem; }

/* --- 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; }
.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; }
.pastilla {
  background: var(--fondo);
  border-radius: 999px;
  padding: .1rem .6rem;
  font-size: .85rem;
  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;
}

.local-ficha.suspendido { opacity: .6; }
.local-cabeza { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.local-cabeza h2 { margin: 0; }
.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 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; }

@media print {
  /* Fuera todo lo que no es el cartel: sale un A4 limpio. */
  .sin-imprimir, .barra { display: none !important; }
  body { background: var(--papel-impreso); }
  .contenido { padding: 0; max-width: none; }
  .cartel-hoja {
    border: 0;
    padding: 0;
    /* Centrado en el folio, y a un tamano que se lea desde la cola. */
    margin: 6vh auto;
    max-width: 16cm;
  }
  .cartel-titulo { font-size: 34pt; }
  .cartel-reclamo { font-size: 20pt; }
  .cartel-qr svg { max-width: 12cm; }
  .cartel-pasos { font-size: 14pt; }
}