:root {
  /* La misma version que el meta del index.html. Sirve para que la app pueda
     comprobar que el CSS que llego es el que le toca, y no uno viejo que el
     navegador tenia guardado. Lo cambia el script de publicar. */
  --version: "20260913-1107";
}

/* ===========================================================================
   pantallas.css  -  Lo que le faltaba al diseño para las pantallas nuevas.

   Va aparte de estilos.css a propósito: estilos.css es el armazón (papel,
   tinta, tablas, barra) y aquí están solo las piezas nuevas. Si un día hay que
   volver atrás, se borra este archivo y la app sigue viéndose bien.

   Se respeta el mismo lenguaje: papel de contaduría, verde de cocina para el
   armazón, achiote para la acción, y nada en lo que haya que tocar por debajo
   de --alto-toque.
   =========================================================================== */

/* --------------------------------------------------------------------- */
/*  Piezas del esqueleto                                                   */
/* --------------------------------------------------------------------- */

/* Para quien navega con el teclado: el primer tabulador salta el menú. */
.salto-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--marca);
  color: #fff;
  padding: var(--e2) var(--e4);
  border-radius: 0 0 var(--radio) 0;
  font-family: var(--display);
  font-weight: 600;
}
.salto-al-contenido:focus { left: 0; }

/* El mes y el año que miran todos los informes. Siempre a la vista. */
.periodo {
  display: flex;
  gap: var(--e2);
  align-items: center;
  flex: none;
}
.periodo select {
  min-height: 40px;
  padding: 0 var(--e2);
  border-radius: var(--radio);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
}
.periodo select option { color: var(--tinta); background: #fff; }

.cargando {
  color: var(--tinta-suave);
  font-family: var(--dato);
  padding: var(--e6) 0;
}

/* Los botones de descargar/imprimir de los informes. */
.acciones { flex-wrap: wrap; gap: var(--e2); margin: var(--e3) 0 var(--e5); }

/* Una fila apagada: la persona o el plato que está inactivo. */
/* Una fila apagada se ve desvaida, pero con COLOR y no con opacity.

   Con opacity se desvanece la fila entera y los hijos no pueden salirse: el
   aviso de "esto sigue contando" salia medio borrado y tachado, o sea, como
   si fuera lo que ya no aplica -- justo al reves de lo que dice. */
.apagada { color: var(--tinta-suave); }
.apagada strong { text-decoration: line-through; color: var(--tinta-suave); }

/* El aviso es lo unico de esa fila que hay que leer: ni tachado ni desvaido. */
.apagada .nota { color: var(--tinta-media); }
.apagada .nota strong { text-decoration: none; color: var(--tinta); }

/* Lista de avisos del importador. */
.avisos {
  margin: var(--e2) 0 0;
  padding-left: var(--e5);
  font-size: var(--t-sm);
  color: var(--tinta-media);
  max-height: 340px;
  overflow-y: auto;
}
.avisos li { margin-bottom: var(--e1); }

/* --------------------------------------------------------------------- */
/*  Ajustes: las tarjetas que llevan a las otras pantallas                 */
/* --------------------------------------------------------------------- */

.tarjetas-ajustes { align-items: stretch; }

.tarjeta-enlace {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
  border: 1px solid var(--borde);
}
.tarjeta-enlace:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
  border-color: var(--marca);
}
.tarjeta-enlace h2 { color: var(--marca); margin-bottom: var(--e2); }
.tarjeta-enlace p { color: var(--tinta-media); margin-bottom: var(--e2); }

.etiqueta.pendiente {
  background: var(--amarillo-claro);
  color: #7a4f00;
  border: 1px solid #e2c37a;
}

/* --------------------------------------------------------------------- */
/*  Renglones y pantallas con problemas                                    */
/* --------------------------------------------------------------------- */

.con-problemas { border-left: 5px solid var(--rojo); }
.con-problemas h1, .con-problemas h2 { color: var(--rojo); }
.con-problemas pre {
  background: var(--papel-raya);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e3);
  overflow-x: auto;
  font-size: var(--t-xs);
  font-family: var(--dato);
  white-space: pre-wrap;
  word-break: break-word;
}

.problema {
  border-top: 1px solid var(--borde);
  padding-top: var(--e4);
  margin-top: var(--e4);
}
.problema h3 { color: var(--rojo); font-size: var(--t-md); margin-bottom: var(--e1); }

/* --------------------------------------------------------------------- */
/*  Revisar nombres                                                        */
/* --------------------------------------------------------------------- */

.aviso-arreglable { border-left: 5px solid var(--amarillo); }
.aviso-arreglable h2 { color: #7a4f00; }

/* El "antes" y el "después" de un nombre sucio. Se muestran entre comillas
   para que se vean los espacios que sobran, que si no son invisibles. */
.muestra-mal, .muestra-bien {
  font-family: var(--dato);
  font-size: var(--t-sm);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: pre;
}
.muestra-mal { background: var(--rojo-claro); color: #7d1a10; }
.muestra-bien { background: var(--verde-claro); color: var(--verde-hondo); }

.grupo-nombres { border-left: 5px solid var(--azul); }

.razon {
  font-family: var(--dato);
  font-size: var(--t-sm);
  color: var(--tinta-media);
}

/* Qué tan seguros estamos de que son la misma persona. */
.sello {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.seguro-alto  { background: var(--verde-claro);   color: var(--verde-hondo); }
.seguro-medio { background: var(--azul-claro);    color: #123f57; }
.seguro-bajo  { background: var(--amarillo-claro); color: #7a4f00; }

/* La fila donde ella marca cuál es el nombre bueno. Toda la fila es tocable. */
.grupo-nombres tbody tr { cursor: pointer; }
.grupo-nombres input[type="radio"] {
  width: 22px;
  height: 22px;
  min-height: auto;
  accent-color: var(--marca);
  cursor: pointer;
}
.nombre-opcion {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  cursor: pointer;
  min-height: var(--alto-toque);
  font-weight: inherit;
}
.etiqueta.sugerida {
  background: var(--azul-claro);
  color: var(--azul-hondo);
  border: 1px solid var(--borde-fuerte);
}

/* --------------------------------------------------------------------- */
/*  "¿Es la misma persona?" — la ventana que evita el duplicado            */
/* --------------------------------------------------------------------- */

.opciones-parecidas {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin-top: var(--e3);
}

.opcion-parecida {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  width: 100%;
  min-height: var(--alto-toque);
  padding: var(--e3) var(--e4);
  border: 2px solid var(--borde);
  border-radius: var(--radio-g);
  background: var(--papel);
  cursor: pointer;
  font-family: var(--cuerpo);
}
.opcion-parecida:hover {
  border-color: var(--marca);
  background: var(--marca-claro);
}
.opcion-parecida strong {
  font-family: var(--display);
  font-size: var(--t-md);
  color: var(--tinta);
}
.opcion-parecida small {
  color: var(--tinta-suave);
  font-size: var(--t-sm);
}
/* La de "es otra persona" se ve distinta: es la decisión menos frecuente. */
.opcion-parecida.es-otra {
  border-style: dashed;
  margin-top: var(--e2);
}
.opcion-parecida.es-otra:hover {
  border-color: var(--marca);
  background: var(--marca-claro);
}

/* --------------------------------------------------------------------- */
/*  Catálogo: los precios editables ahí mismo                              */
/* --------------------------------------------------------------------- */

input.precio {
  width: 100%;
  min-width: 90px;
  min-height: 40px;
  text-align: right;
  font-family: var(--dato);
  font-size: var(--t-sm);
  padding: 0 var(--e2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--papel-hueso);
}
input.precio:focus { background: #fff; border-color: var(--marca); }
/* Un plato sin precio entra en $ 0 a la cuenta de cobro. Se tiene que ver. */
input.precio.falta {
  background: var(--rojo-claro);
  border-color: var(--rojo);
}
input.precio.falta::placeholder { color: #7d1a10; opacity: 1; }

/* --------------------------------------------------------------------- */
/*  Compartir con las empresas                                            */
/* --------------------------------------------------------------------- */

.garantia { border-left: 5px solid var(--marca); background: var(--papel-hueso); }
.garantia h2 { color: var(--marca-hondo); }

.empresa-compartir h3 {
  font-size: var(--t-md);
  margin-top: var(--e5);
  margin-bottom: var(--e1);
  color: var(--marca-hondo);
}

/* La vista previa del archivo, tal como lo va a ver el supervisor. */
.vista-previa {
  width: 100%;
  height: 55vh;
  min-height: 320px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: #fff;
  margin-top: var(--e3);
}

/* --------------------------------------------------------------------- */
/*  Celular                                                                */
/* --------------------------------------------------------------------- */

@media (max-width: 720px) {
  .periodo { order: 2; margin-left: auto; }
  .vista-previa { height: 45vh; }
  .opcion-parecida { padding: var(--e4); }
  /* En la tabla de precios, que no se aplaste el nombre del plato. */
  input.precio { min-width: 74px; }
}

@media print {
  .periodo, .salto-al-contenido, .vista-previa { display: none !important; }
}

/* --------------------------------------------------------------------- */
/*  La lista de personal de la empresa                                     */
/* --------------------------------------------------------------------- */

.tarjeta-personal { border-left: 5px solid var(--marca); }
.tarjeta-personal h2 { color: var(--marca-hondo); }

/* El documento se muestra siempre cortado: solo los ultimos numeros. */
.documento-corto {
  font-family: var(--dato);
  font-size: var(--t-sm);
  background: var(--azul-claro);
  color: var(--azul-hondo);
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}

/* Cuando el documento lo prueba, no es una opinion: es un hecho. */
.seguro-probado {
  background: var(--marca-hondo);
  color: #fff;
}

.fusiones-halladas {
  border-top: 1px solid var(--borde);
  margin-top: var(--e4);
  padding-top: var(--e4);
}
.fusiones-halladas h4 { color: var(--marca-hondo); margin-bottom: var(--e2); }

.fusion {
  background: var(--papel-hueso);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--marca);
  border-radius: var(--radio);
  padding: var(--e3);
  margin-bottom: var(--e3);
}
.fusion p { margin-bottom: var(--e2); }
.fusion ul { margin: 0; padding-left: var(--e5); }
.fusion li { margin-bottom: 2px; }

/* --------------------------------------------------------------------- */
/*  Pantalla "Como se usa": el manual metido dentro de la app             */
/* --------------------------------------------------------------------- */

/* Un enlace que se ve como boton, para "Abrirla aparte". */
.boton-enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--alto-toque);
  padding: 0 var(--e4);
  border-radius: var(--radio);
  border: 1px solid var(--borde-fuerte);
  background: var(--papel);
  color: var(--tinta);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
}
.boton-enlace:hover { border-color: var(--marca); background: var(--marca-claro); }

.manual-adentro {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  padding: var(--e5) var(--e6);
  box-shadow: var(--sombra);
  max-width: 760px;
}
/* El manual trae sus propios tamanos; aca solo lo encuadramos. */
.manual-adentro > :first-child { margin-top: 0; }
.manual-adentro > :last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .manual-adentro { padding: var(--e4); }
}

@media print {
  /* Al imprimir esta pantalla queremos el manual solo, sin marco. */
  .manual-adentro { border: none; box-shadow: none; padding: 0; max-width: none; }
}

/* --------------------------------------------------------------------- */
/*  El numerito del menu: lo que esta esperando decision                   */
/* --------------------------------------------------------------------- */

.menu a { gap: var(--e2); }
.contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font-family: var(--dato);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1;
}
/* En la pagina donde ya esta parada, el numerito no tiene que gritar. */
.menu a[aria-current="page"] .contador { background: var(--marca); }

/* --------------------------------------------------------------------- */
/*  "Posibles errores": una tarjeta por cosa que hay que decidir           */
/* --------------------------------------------------------------------- */

.suelto { border-left: 5px solid var(--amarillo); }
.suelto h3 { font-size: var(--t-md); }
.suelto-persona { border-left-color: var(--azul); }
.suelto-plato { border-left-color: var(--amarillo); }

/* Los tres botones, siempre en el mismo orden y con el mismo peso visual,
   para que la decision se vuelva costumbre y no haya que leerla cada vez. */
.decision { margin-top: var(--e4); flex-wrap: wrap; gap: var(--e2); }
.decision .suave {
  color: var(--tinta-suave);
  border-color: transparent;
  margin-left: auto;
}
.decision .suave:hover { background: var(--papel-raya); border-color: var(--borde); }

/* Aqui la opcion es una etiqueta con boton redondo adentro, no un boton. */
label.opcion-parecida {
  flex-direction: row;
  align-items: center;
  gap: var(--e3);
}
label.opcion-parecida input[type="radio"] {
  width: 21px;
  height: 21px;
  min-height: auto;
  flex: none;
  accent-color: var(--marca);
}
label.opcion-parecida span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* La que es casi segura se marca, para que solo tenga que confirmar. */
label.opcion-parecida.obvia {
  border-color: var(--marca);
  background: var(--marca-claro);
}

/* Plata que sube o que baja al unir dos platos. */
.sube { color: var(--rojo); font-weight: 700; }
.baja { color: var(--verde); font-weight: 700; }

.etiqueta.malo {
  background: var(--rojo-claro);
  color: var(--rojo);
  border: 1px solid #e8bfc5;
}

@media (max-width: 720px) {
  .decision .suave { margin-left: 0; }
}

/* --------------------------------------------------------------------- */
/*  Atajos de registro: lo que evita tener que escribir                    */
/* --------------------------------------------------------------------- */

.atajos {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin: var(--e3) 0 var(--e4);
}

/* "Lo de siempre": el boton mas usado de la app. Grande a proposito. */
.lo-de-siempre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: var(--e3) var(--e4);
  text-align: left;
}
.lo-de-siempre strong { font-size: var(--t-md); }
.lo-de-siempre small { font-weight: 400; opacity: 0.9; font-family: var(--dato); font-size: var(--t-xs); }

.atajo-porque {
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  margin-top: -2px;
}

/* Los platos mas pedidos, como fichas de un toque. */
.fichas-platos { flex-wrap: wrap; gap: var(--e2); }
.ficha-plato {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-height: var(--alto-toque);
  padding: var(--e2) var(--e3);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--papel-hueso);
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  line-height: 1.25;
  text-align: left;
}
.ficha-plato:hover { background: var(--marca-claro); border-color: var(--marca); }
.ficha-plato small {
  font-family: var(--dato);
  font-weight: 400;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
}
.ficha-plato:hover small { color: var(--marca); }

/* La tarjeta de "los mismos de ayer". */
.tarjeta-ayer {
  border-left: 5px solid var(--azul);
  background: var(--azul-suave);
  margin-bottom: var(--e4);
}
.tarjeta-ayer h3 { font-size: var(--t-md); color: var(--azul-hondo); }
.tarjeta-ayer p { margin: 0; }

@media (max-width: 720px) {
  /* En el celular las fichas ocupan toda la fila de a dos. */
  .ficha-plato { flex: 1 1 calc(50% - var(--e2)); }
  .tarjeta-ayer .entre { flex-direction: column; align-items: stretch; gap: var(--e3); }
}

/* Borrar se ve distinto sin gritar: es raro, pero no es peligroso porque la
   app no deja borrar nada que tenga historia. */
.peligro-suave { color: var(--rojo); }
.peligro-suave:hover { background: var(--rojo-claro); border-color: var(--rojo); }

/* ===========================================================================
   ARREGLOS DE CAJAS CORRIDAS
   ===========================================================================

   El sintoma: en el celular la pagina se corria 297 px por el lado en la
   pantalla de Revisar, y el culpable era un nombre de plato largo
   ("COMBO COSTILLA PAISA CON PAPAS").

   La causa es una regla de flexbox que sorprende a todo el mundo: un hijo
   flex NO se encoge por debajo del ancho de su contenido, porque su
   min-width vale "auto" y no cero. Entonces un texto largo, en vez de
   partirse, empuja la caja; y la caja empuja la pagina.

   El arreglo son dos lineas: min-width: 0 para dejarlo encogerse, y
   overflow-wrap para que el texto se parta cuando ya no cabe.
   =========================================================================== */

.opcion-parecida,
.lo-de-siempre,
.ficha-plato,
.suelto .fila,
.grupo-nombres .fila,
.tarjeta-ayer .entre,
.encabezado-pantalla,
.comanda-cabeza {
  min-width: 0;
}

label.opcion-parecida span,
.opcion-parecida strong,
.opcion-parecida small,
.lo-de-siempre strong,
.lo-de-siempre small,
.ficha-plato span,
.suelto h3,
.fusion li {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Los nombres de personas y platos son lo mas largo de la app. */
.suelto h3,
.nombre-opcion strong,
.fusion strong {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   Un apunte al lado de un titulo NO es una nota.

   .nota es un bloque con borde y fondo, pensado para explicar algo. Yo la
   estaba usando para poner "6 renglones - 5 dias - $ 66.000" al lado de un
   nombre, y quedaba como una cajita flotando, corrida a la derecha.
   Esto es lo mismo pero sin caja: texto y ya.
   --------------------------------------------------------------------- */

.apunte-suelto {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e2);
  font-family: var(--dato);
  font-size: var(--t-sm);
  color: var(--tinta-suave);
  border: none;
  background: none;
  padding: 0;
  min-width: 0;
}

/* ---------------------------------------------------------------------
   En el celular, todo lo que se toca tiene que ser tocable
   --------------------------------------------------------------------- */

@media (max-width: 720px) {
  /* .chico esta pensado para el raton, que apunta fino. El dedo no. */
  .chico { min-height: var(--alto-toque); font-size: var(--t-base); }

  /* Los botones de una fila de tabla, uno al lado del otro, se aprietan
     tanto que se toca el que no es. Mejor que ocupen su espacio. */
  td .fila { gap: var(--e2); }
  td .fila button { flex: 1 1 auto; }

  /* Los precios editables del catalogo tambien se tocan. */
  input.precio { min-height: var(--alto-toque); }

  /* Las casillas y los botones redondos, mas grandes. */
  input[type="checkbox"],
  input[type="radio"] { width: 24px; height: 24px; }
}

/* Cero no es un estado "informativo", es un pendiente. Que se vea asi. */
.seguro-ninguno {
  background: var(--papel-raya);
  color: var(--tinta-suave);
  border: 1px solid var(--borde);
}

/* ===========================================================================
   MOVIMIENTO
   ===========================================================================

   La regla: se anima lo que ayuda a ENTENDER que paso, nunca por adorno.

   Un boton que responde al tocarlo dice "si te oi". Una pantalla que entra
   suave dice "esto es nuevo, mira aca". Un mensaje que se desliza dice "esto
   acaba de pasar". Todo lo demas -- rebotes, giros, cosas que aparecen solas --
   distrae a alguien que esta contando almuerzos a las 6 de la manana.

   Todo dura entre 120 y 260 ms. Mas rapido no se ve; mas lento estorba.
   Y todo se apaga si el sistema pide menos movimiento (ver el final).
   =========================================================================== */

:root {
  --suave: 160ms cubic-bezier(0.2, 0, 0.2, 1);
  --suave-lento: 260ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* --- Lo que se toca responde ---------------------------------------- */

button, .boton, .boton-enlace, .ficha-plato, .opcion-parecida, .menu a {
  transition:
    background-color var(--suave),
    border-color var(--suave),
    color var(--suave),
    box-shadow var(--suave),
    transform 90ms ease-out;
}

/* Al apretar, el boton se hunde un pelito. Es el acuse de recibo. */
button:active, .boton:active, .ficha-plato:active, .opcion-parecida:active {
  transform: translateY(1px);
}

.principal:hover, .lo-de-siempre:hover {
  box-shadow: 0 2px 10px rgba(124, 53, 104, 0.28);
}

.ficha-plato:hover { transform: translateY(-1px); }

/* --- La pantalla que entra ------------------------------------------- */

@keyframes entrar {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Se anima el contenido, no el marco: si se animara toda la pagina, el menu
   de arriba parpadearia en cada clic y eso marea. */
.hoja > * {
  animation: entrar var(--suave-lento) both;
}

/* Las tarjetas de una lista entran una detras de otra, muy poquito, para que
   se lea como una lista y no como un golpe. Solo las primeras: si fueran
   todas, la ultima de 300 filas entraria medio minuto despues. */
.hoja > *:nth-child(2) { animation-delay: 30ms; }
.hoja > *:nth-child(3) { animation-delay: 60ms; }
.hoja > *:nth-child(4) { animation-delay: 90ms; }
.hoja > *:nth-child(5) { animation-delay: 110ms; }

/* --- Los mensajes de la esquina --------------------------------------- */

@keyframes entrar-mensaje {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.mensaje {
  animation: entrar-mensaje var(--suave) both;
  cursor: pointer; /* se pueden quitar tocandolos, si estorban */
}
.mensaje:hover { filter: brightness(1.08); }

/* --- Las ventanas ----------------------------------------------------- */

@keyframes abrir-ventana {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
dialog[open] { animation: abrir-ventana var(--suave-lento) both; }
dialog::backdrop { animation: aparecer var(--suave) both; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* --- Las tarjetas ----------------------------------------------------- */

.tarjeta { transition: box-shadow var(--suave), border-color var(--suave); }

/* La lista del buscador, que aparece y desaparece mucho. */
.buscador-lista { transition: opacity var(--suave); }
.buscador-lista li { transition: background-color 110ms ease-out; }

/* El numerito del menu, cuando aparece algo nuevo por revisar. */
.contador { transition: background-color var(--suave), transform var(--suave); }

/* --- Si el sistema pide menos movimiento, se apaga TODO ---------------
   No es un detalle de accesibilidad y ya: hay gente a la que el movimiento
   en pantalla le produce mareo de verdad. Si lo pidio, se respeta. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  button:active, .ficha-plato:hover { transform: none; }
}

/* ---------------------------------------------------------------------
   Un parrafo de texto NO es una caja flex

   .nota es display:flex, pensada para "icono + texto". Pero cuando se usa
   como parrafo con varios pedazos adentro ("Ojo: tampoco esta catalogado
   <strong>PORCION COSTILLAS</strong>, <strong>COSTILLAS</strong>...") cada
   pedazo se vuelve un item flex, y los items flex NO se acomodan en varias
   lineas como hace el texto normal: se ponen todos en fila y empujan.

   Eso corria la pagina 297 px en el celular. Un parrafo es prosa: bloque.
   --------------------------------------------------------------------- */

p.nota {
  display: block;
  overflow-wrap: anywhere;
}
p.nota strong { display: inline; }

/* En la tabla de grupos el circulito esta solo en su celda, sin etiqueta
   alrededor, asi que ahi el circulito SI es lo que se toca. */
@media (max-width: 720px) {
  .grupo-nombres input[type="radio"],
  .grupo-nombres tbody input[type="radio"] {
    width: 28px;
    height: 28px;
  }
  .grupo-nombres td:first-child { padding: var(--e3) var(--e2); }
}

/* ===========================================================================
   CAPAS
   ===========================================================================

   Al animar la entrada de cada bloque toque transform, y en CSS un elemento
   con transform crea una CAPA nueva. Una capa nueva encierra a sus hijos: el
   z-index de adentro ya no puede pasar por encima de los bloques de afuera.

   Resultado: la lista de nombres del buscador quedaba debajo de las cifras y
   de las comandas. No se podia ni leer ni tocar. Los efectos bonitos no
   pueden costar eso.

   El arreglo es decir explicitamente cual bloque va encima.
   =========================================================================== */

.caja-captura {
  position: relative;
  z-index: 20;
  margin-bottom: var(--e5);
}

.buscador-lista { z-index: 60; }

/* ===========================================================================
   HEADER DE DOS PISOS
   ===========================================================================

   Arriba: donde estoy parado (marca, que mes miro, si esta guardado).
   Abajo:  a donde puedo ir (el menu).

   Se reescriben aqui las reglas de la barra vieja en vez de tocar
   estilos.css, para que si algo sale mal se borre este bloque y vuelva lo
   de antes sin buscar nada.
   =========================================================================== */

.barra { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16); }

.barra-piso {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: 0 var(--e5);
}

/* Piso de arriba: mas oscuro, mas bajito. Es informacion, no navegacion. */
.barra-piso-alto {
  min-height: 52px;
  background: transparent;
}

/* Piso de abajo: un tono mas claro, para que se lea como una barra aparte. */
.barra-piso-bajo {
  min-height: 46px;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}
.barra-piso-bajo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.055);
  pointer-events: none;
}

/* Que el fondo del piso de abajo llegue de lado a lado y no solo al centro. */
.barra { position: sticky; top: 0; z-index: 40; }
.barra::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46px;
  background: rgba(255, 255, 255, 0.055);
  pointer-events: none;
  z-index: 0;
}
.barra-piso-bajo::before { display: none; }
.barra-piso { position: relative; z-index: 1; }

.marca { margin-right: auto; }

/* El mes y el estado, juntos a la derecha. */
.periodo { margin-left: 0; }
.guardado { margin-left: 0; }

/* El menu, en una sola fila. Si no cabe, se desliza. */
.menu {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 2px;
  padding: 0;
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  flex: none;
  min-height: 46px;
  border-radius: 0;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0 var(--e4);
  font-size: var(--t-sm);
}
.menu a:hover { background: rgba(255, 255, 255, 0.07); }

/* La pagina donde esta parada se marca con una linea abajo, como una pestana.
   Es mas sobrio que una pastilla de color y se lee igual de rapido. */
.menu a[aria-current="page"] {
  background: transparent;
  color: #fff;
  border-bottom-color: var(--azul-claro);
}

@media (max-width: 900px) {
  .barra-piso { padding: 0 var(--e3); gap: var(--e3); }
  .marca span { display: none; }
}

@media (max-width: 720px) {
  .barra-piso-alto { min-height: 48px; }
  .periodo select { min-height: 36px; }
}

/* ===========================================================================
   CALMAR
   ===========================================================================

   La app tenia demasiadas cajas: cada cifra con su borde y su sombra, cada
   nota con su borde de 5 px, cada tarjeta con su sombra. Todo gritaba al
   tiempo, y cuando todo grita nada resalta.

   La idea aqui es quitar, no agregar. El contenido pone el color; el marco
   se calla.
   =========================================================================== */

/* --- Las cifras: sin sombra y con borde fino ------------------------- */

.cifra {
  box-shadow: none;
  border-color: var(--borde);
  background: var(--papel);
}
.cifra dt {
  text-transform: none;      /* las mayusculas sostenidas cansan de leer */
  letter-spacing: 0;
  font-size: var(--t-sm);
  color: var(--tinta-suave);
  font-weight: 500;
}
/* La destacada es la unica que se pinta. Por eso destaca. */
.cifra.destacada { box-shadow: var(--sombra); }

/* --- Las tarjetas: sombra apenas insinuada ---------------------------- */

.tarjeta {
  box-shadow: 0 1px 2px rgba(59, 27, 52, 0.05);
  border: 1px solid var(--borde);
}

/* --- Las notas: el borde de 5 px era un grito --------------------------- */

.nota {
  border-left-width: 3px;
  background: var(--papel-hueso);
  font-size: var(--t-sm);
}
.nota.bien, .nota.malo, .nota.ojo { border-left-width: 3px; }

/* Las barras de color de las tarjetas, mas discretas. */
.suelto, .grupo-nombres, .tarjeta-personal, .garantia,
.aviso-arreglable, .con-problemas, .tarjeta-ayer {
  border-left-width: 3px;
}

/* --- El titulo de cada pantalla ---------------------------------------- */

/* La rayita de colores debajo del titulo era decoracion pura. Una linea fina
   de lado a lado ordena igual y no compite con el contenido. */
.encabezado-pantalla::after {
  background: var(--borde);
  height: 1px;
}

/* --- Las tablas: encabezado mas liviano --------------------------------- */

thead th {
  font-size: var(--t-xs);
  letter-spacing: 0.03em;
  font-weight: 600;
}

/* --- Los sellos y etiquetas, sin tanto peso ----------------------------- */

.sello { font-weight: 600; letter-spacing: 0.02em; }
.etiqueta { font-weight: 500; }

/* --- Espacio para respirar ---------------------------------------------- */

.hoja > h2 { margin-top: var(--e6); margin-bottom: var(--e3); }
.hoja > section + section { margin-top: var(--e4); }

/* ---------------------------------------------------------------------
   El piso de arriba en pantallas angostas

   Marca + mes + ano + "Guardado" no caben en 390 px: se pasaban 26.
   En vez de dejar que se caiga a otra linea (que fue justo lo que hacia
   feo el header viejo), se encoge lo que se puede encoger.
   --------------------------------------------------------------------- */

@media (max-width: 720px) {
  .barra-piso-alto { gap: var(--e2); }

  .marca { font-size: var(--t-base); min-width: 0; }

  .periodo { gap: 4px; min-width: 0; }
  .periodo select {
    min-height: 34px;
    font-size: var(--t-xs);
    padding: 0 4px;
    min-width: 0;
  }
}

@media (max-width: 560px) {
  /* Aqui ya no cabe la palabra: queda el punto de color, que es lo que
     ella mira de reojo. El texto sigue ahi para quien use lector de
     pantalla, solo que no se dibuja. */
  .guardado { font-size: 0; gap: 0; }
  .guardado::before { width: 11px; height: 11px; }
}

/* ---------------------------------------------------------------------
   Los botones secundarios tienen que VERSE

   .plano era transparente hasta pasarle el mouse por encima. En el
   computador uno lo descubre sin querer; en el celular no hay mouse que
   pasar, asi que "No, es otra persona" parecia un texto y nadie lo iba a
   tocar. Un boton que no se ve como boton no existe.

   Queda con borde suave: se ve que es tocable, sin competirle al principal.
   --------------------------------------------------------------------- */

.plano {
  border-color: var(--borde-fuerte);
  background: var(--papel);
  padding: 0 var(--e4);
  color: var(--tinta);
}
.plano:hover {
  background: var(--marca-claro);
  border-color: var(--marca);
  color: var(--marca-oscuro);
}

/* "Dejelo asi" si se queda discreto: es la salida, no una accion. */
.decision .suave, .plano.suave {
  border-color: transparent;
  background: transparent;
  color: var(--tinta-suave);
}
.decision .suave:hover, .plano.suave:hover {
  background: var(--papel-raya);
  border-color: var(--borde);
  color: var(--tinta);
}

/* Las tarjetas de Ajustes, en rejilla y con aire. */
.tarjetas-ajustes { gap: var(--e4); }
.tarjetas-ajustes .tarjeta-enlace { display: flex; flex-direction: column; }
.tarjetas-ajustes .tarjeta-enlace p { flex: 1 1 auto; }

/* Una etiqueta se ajusta a su texto. En una tarjeta flex, por defecto se
   estira de lado a lado y parece una barra de resaltado. */
.tarjetas-ajustes .tarjeta-enlace { align-items: flex-start; }
.tarjetas-ajustes .tarjeta-enlace p,
.tarjetas-ajustes .tarjeta-enlace h2 { align-self: stretch; }
.etiqueta { display: inline-block; }

/* El aviso de "te llego una mezcla de versiones". Va arriba de todo, porque
   si la pagina se ve rota es lo primero que hay que leer. */
.aviso-version {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--amarillo-claro);
  border-bottom: 2px solid var(--amarillo);
  color: #6b4708;
  font-size: var(--t-sm);
}

/* ---------------------------------------------------------------------
   La barra del dia y la empresa: alinear por ARRIBA

   Estaba con align-items: flex-end, que alinea por abajo. El campo "Dia"
   tiene tres renglones (etiqueta, casilla, y el "martes 25 de agosto" de
   ayuda) y el de "Empresa" solo dos. Alineando por abajo, el corto se
   empuja hacia abajo y los dos quedan desnivelados.

   En un formulario lo que tiene que quedar a la misma altura son las
   ETIQUETAS y las CASILLAS. El texto de ayuda cuelga debajo del que lo
   tenga, y eso se ve bien. Por eso: por arriba.
   --------------------------------------------------------------------- */

.mando { align-items: flex-start; }

/* Que el texto de ayuda no mueva nada al aparecer o desaparecer: siempre
   ocupa su renglon, tenga texto o no. */
.mando .campo > small {
  min-height: 1.2em;
  display: block;
}

/* ---------------------------------------------------------------------
   Un campo no tiene que ser tan ancho como la pantalla

   .mando .campo tenia "flex: 1 1 230px", o sea "crece para llenar". Con dos
   campos se ve bien, pero en Cocina hay uno solo y se comia los 1300 px de
   ancho: una casilla de fecha gigante para escribir ocho numeros.

   Un campo debe medir lo que necesita su contenido, no lo que sobre.
   --------------------------------------------------------------------- */

/* Crecen para repartirse la fila, pero con tope: sin el tope, un solo campo
   se comia los 1300 px de ancho; sin el crecer, con cuatro campos el ultimo
   se caia solo a una segunda fila y se veia desbalanceado. */
.mando .campo {
  flex: 1 1 210px;
  max-width: 380px;
}

/* ===========================================================================
   BLOQUE A - El indicador del menu que se desliza
   =========================================================================== */

.menu { position: relative; }

.indicador-nav {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;              /* mide 1 px y se estira con scaleX */
  height: 3px;
  background: var(--azul-claro);
  border-radius: 2px 2px 0 0;
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 220ms cubic-bezier(0.2, 0, 0, 1),
    opacity 150ms ease-out;
}

/* Ya no hace falta la linea de cada pestana: ahora la pone el indicador. */
.menu a[aria-current="page"] { border-bottom-color: transparent; }

/* ===========================================================================
   BLOQUE B - El header que se encoge al bajar
   =========================================================================== */

/* El centinela: existe pero no ocupa ni se ve. */
#tope-pagina { position: absolute; top: 0; height: 8px; width: 1px; }

.barra {
  transition:
    box-shadow 200ms ease-out,
    background-color 200ms ease-out;
}
.barra.encogida {
  box-shadow: 0 4px 16px rgba(24, 10, 21, 0.28);
}

/* Como se encoge el header, y por que NO con scaleY.
   ------------------------------------------------------------------------
   El primer intento fue "transform: scaleY(0.86)", para respetar la regla de
   animar solo transform. Salio mal: scaleY no encoge la caja, APLASTA todo lo
   que hay adentro. Las letras quedaban chatas, como una foto estirada.

   La regla de "solo transform" existe para no obligar al navegador a
   recalcular la posicion de TODA la pagina en cada cuadro. Aqui se anima el
   min-height de UN elemento que ademas esta fijo arriba y no empuja a nadie:
   el costo es cero y el texto no se deforma.

   Una regla se sigue por lo que evita, no porque si. Cuando seguirla al pie
   de la letra produce algo peor de lo que evita, no era la regla que tocaba.
   ------------------------------------------------------------------------ */

.barra-piso-alto {
  transition: min-height 200ms cubic-bezier(0.2, 0, 0, 1);
}
.barra.encogida .barra-piso-alto { min-height: 40px; }

/* La ciudad se desvanece: es lo unico que sobra cuando falta espacio. */
.marca span { transition: opacity 180ms ease-out, max-width 200ms ease-out; }
.barra.encogida .marca span { opacity: 0; max-width: 0; overflow: hidden; }

/* ===========================================================================
   BLOQUE C - Tablas
   =========================================================================== */

:root {
  /* Alto de los dos pisos del header. Lo necesitan el encabezado pegajoso de
     las tablas y los anclajes del manual, para no quedar tapados. */
  --alto-header: 98px;
}

/* El encabezado pegajoso, DENTRO del contenedor de la tabla.
   ------------------------------------------------------------------------
   Primero le puse "top: var(--alto-header)" para que se pegara bajo la barra
   de arriba. Salio mal, y la razon es una regla que sorprende:

     position:sticky no se pega a la VENTANA, se pega al contenedor que tenga
     scroll mas cercano.

   Y .marco-tabla tiene overflow-x:auto (para poder deslizar las tablas
   anchas en el celular), asi que ESE es su contenedor. El encabezado se
   quedaba flotando 98 px adentro de la tabla, tapando sus propias filas.

   El arreglo correcto es el que pedia la idea original: que la tabla tenga su
   propia altura y su propio scroll, y el encabezado se pegue arriba de ELLA.
   Asi ademas la fila de TOTAL se puede quedar abajo, que es justo lo que uno
   quiere mirando una cuenta larga.
   ------------------------------------------------------------------------ */

.marco-tabla {
  max-height: 72vh;
  overflow: auto;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* La fila de TOTAL se queda abajo mientras la tabla siga a la vista, y se ve
   distinta: es la unica fila que no es un dato, es una conclusion. */
tfoot td, tfoot th {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--papel-hueso);
  border-top: 2px solid var(--marca);
  font-weight: 700;
}

/* Al pasar por encima, la fila se marca. Ayuda a seguir el renglon con la
   vista en tablas anchas, que es donde uno se salta de fila sin querer. */
tbody tr { transition: background-color 120ms ease-out; }

/* Las filas entran escalonadas, pero SOLO las primeras 15. Si se animaran
   las 300 de la lista de personas, la ultima entraria diez segundos despues
   y la pantalla se sentiria lenta en vez de viva. */
@keyframes entrar-fila {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
tbody tr:nth-child(-n + 15) {
  animation: entrar-fila 200ms cubic-bezier(0.2, 0, 0, 1) both;
}
tbody tr:nth-child(1)  { animation-delay: 0ms; }
tbody tr:nth-child(2)  { animation-delay: 20ms; }
tbody tr:nth-child(3)  { animation-delay: 40ms; }
tbody tr:nth-child(4)  { animation-delay: 60ms; }
tbody tr:nth-child(5)  { animation-delay: 80ms; }
tbody tr:nth-child(6)  { animation-delay: 100ms; }
tbody tr:nth-child(7)  { animation-delay: 120ms; }
tbody tr:nth-child(8)  { animation-delay: 140ms; }
tbody tr:nth-child(9)  { animation-delay: 160ms; }
tbody tr:nth-child(10) { animation-delay: 180ms; }
tbody tr:nth-child(n + 11):nth-child(-n + 15) { animation-delay: 200ms; }

/* ===========================================================================
   BLOQUE F - Orden visual
   =========================================================================== */

/* Todo lo de una pantalla mide lo mismo de ancho. Antes la barra de filtros
   era mucho mas ancha que las tarjetas y se veia como si fueran dos paginas
   distintas pegadas. */
.hoja > .mando,
.hoja > .tarjeta,
.hoja > .marco-tabla,
.hoja > .cifras,
.hoja > .vacio,
.hoja > .rejilla {
  max-width: 100%;
}

/* La barra de filtros, en una fila compacta. Ocupaba el alto de una tarjeta
   entera para tener dos casillas. */
.mando {
  padding: var(--e3) var(--e4);
  gap: var(--e3) var(--e5);
  align-items: flex-start;
}
.mando input, .mando select {
  font-size: var(--t-md);
  min-height: 44px;
}
.mando .campo > label { font-size: var(--t-xs); }
.mando .campo > small { font-size: var(--t-xs); }

@media print {
  /* En papel no hay movimiento ni profundidad: solo tinta. */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
  }
  thead th, tfoot td, tfoot th { position: static !important; }
  .indicador-nav, .aviso-version { display: none !important; }
}

/* ===========================================================================
   BLOQUE D - Controles
   =========================================================================== */

button, .boton, .boton-enlace {
  transition:
    transform 120ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 150ms ease-out,
    background-color 150ms ease-out,
    border-color 150ms ease-out,
    color 150ms ease-out;
}
button:hover:not(:disabled), .boton-enlace:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(59, 27, 52, 0.14);
}
button:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: none;
  transition-duration: 60ms;
}

/* El anillo de foco crece en vez de aparecer de golpe. Es para quien navega
   con el teclado: ver de donde vino el foco es la mitad del asunto. */
:focus-visible {
  transition: outline-offset 120ms cubic-bezier(0.2, 0, 0, 1);
  outline-offset: 3px;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

/* --- El boton que trabaja ---------------------------------------------- */

.rueda {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  flex: none;
  animation: girar 620ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.trabajando { cursor: progress; opacity: 0.85; }
.trabajando .rueda { display: inline-block; }

button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ===========================================================================
   BLOQUE E - Ventanas
   =========================================================================== */

@keyframes abrir-ventana {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}
dialog[open] {
  animation: abrir-ventana 200ms cubic-bezier(0.2, 0, 0, 1) both;
}
/* El fondo oscuro entra por su cuenta: si entrara pegado a la ventana, se
   veria como un bloque solo y no como una capa detras. */
dialog::backdrop {
  animation: aparecer 260ms ease-out both;
  background: rgba(24, 10, 21, 0.42);
}

/* Salir siempre mas rapido que entrar: al abrir uno quiere ver que llego;
   al cerrar ya decidio y lo que quiere es que se quite. */
dialog.cerrando { animation: cerrar-ventana 150ms ease-out both; }
@keyframes cerrar-ventana {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(0.98); }
}

/* ===========================================================================
   BLOQUE G - Scroll
   ===========================================================================

   Suave para lo que hace la persona (los anclajes del manual, el teclado,
   "ir arriba"). Instantaneo para lo que hace la app al cambiar de pantalla:
   eso se hace diez veces al dia y animarlo se siente lento. Lo instantaneo
   se pide desde el JS con scrollTo({ behavior: "instant" }).
   =========================================================================== */

html { scroll-behavior: smooth; }

/* Los anclajes del manual quedaban debajo del header pegajoso: uno hacia
   clic en "Si algo sale mal" y el titulo quedaba tapado. */
[id] { scroll-margin-top: calc(var(--alto-header) + var(--e4)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Un guion suelto en una celda vacia, sin caja. */
.nota-suelta { color: var(--tinta-suave); }

/* ---------------------------------------------------------------------
   Las tarjetas de Revisar: primero QUE pasa, despues la pregunta
   --------------------------------------------------------------------- */

.que-pasa {
  font-size: var(--t-md);
  line-height: 1.45;
  margin-bottom: var(--e2);
}
.que-pasa .cinta { vertical-align: middle; }

.la-pregunta {
  font-family: var(--display);
  font-weight: 600;
  margin: var(--e4) 0 var(--e2);
}

/* Un boton con un nombre largo adentro tiene que poder partirse. Sin esto,
   "Agregar COMBO DE CERDO AGRIDULCE..." empujaba la pagina 60 px en el
   celular. Los botones no parten el texto solos. */
.decision button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  padding-top: var(--e2);
  padding-bottom: var(--e2);
  height: auto;
  min-height: var(--alto-toque);
}

/* La fecha de la cuenta de cobro, alineada a la derecha como en cualquier
   documento formal. */
.fecha-cuenta {
  text-align: right;
  font-family: var(--dato);
  font-size: var(--t-sm);
  color: var(--tinta-media);
  margin: 0 0 var(--e4);
}

/* El logo al lado del nombre.
   Va en blanco con transparencia (ver tests/sacar-logo.html) porque el JPG
   original trae fondo rojo, y ese rojo NO es el de la barra: puesto tal cual
   se veria un parche cuadrado de otro tono. */
.marca-logo {
  height: 34px;
  width: auto;
  flex: none;
  transition: height 200ms cubic-bezier(0.2, 0, 0, 1);
}
.barra.encogida .marca-logo { height: 26px; }

/* El logo en la cuenta de cobro. Es el unico sitio donde se ve al tamaño
   para el que fue hecho, y es el papel que llega al cliente. */
.logo-documento {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 8px;
  margin: 0 auto var(--e3);
}

@media print {
  /* En papel el logo tiene que salir SI o SI, aunque el navegador venga
     configurado para no imprimir fondos ni imagenes de color. */
  .logo-documento {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---------------------------------------------------------------------
   El header, con el rojo vivo del logo

   El piso de arriba lleva el rojo exacto del logo (#e02d29). El del menu va
   un tono mas oscuro, y no es capricho: ese rojo con texto blanco da 4.59 de
   contraste y el minimo comodo es 4.5. Para la marca (letra grande) alcanza
   de sobra; para los enlaces del menu (letra chica) queda muy justo.

   Un color de marca se respeta, pero no a costa de que ella no lea el menu.
   --------------------------------------------------------------------- */

.barra { background: var(--marca-viva); }
.barra::after { background: rgba(0, 0, 0, 0.13); }
.menu a { --_color: #ffe9e7; }
.menu a:hover { background: rgba(0, 0, 0, 0.13); }
.barra.encogida { box-shadow: 0 4px 16px rgba(120, 20, 14, 0.32); }

/* ===========================================================================
   La comanda abierta: DOS NIVELES QUE SE VEN
   ===========================================================================

   El problema real: las dos casillas (nombre de la persona y plato) se veian
   identicas, y ella terminaba escribiendo el plato donde va el nombre.

   Eso no es descuido suyo. Si dos cosas que hacen cosas distintas se ven
   igual, tarde o temprano se confunden. La culpa es del diseño.

   El arreglo: la comanda deja de ser "otra casilla mas" en la misma tarjeta
   blanca y se vuelve una caja aparte, con fondo beige y metida hacia adentro,
   con el nombre de la persona arriba. Se ve de un vistazo que son dos niveles.
   =========================================================================== */

.comanda-abierta {
  margin-top: var(--e4);
  margin-left: var(--e4);
  padding: var(--e4);
  background: var(--beige-claro);
  border: 1px solid var(--beige);
  border-left: 5px solid var(--marca);
  border-radius: var(--radio-g);
}

.comanda-abierta-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-bottom: var(--e3);
}

/* "Pedido de" arriba del nombre: dice de quien es esta caja, sin leer nada mas. */
.comanda-abierta-rotulo {
  display: block;
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.comanda-abierta-cabeza h4 { font-size: var(--t-lg); }
/* La casilla de platos, con borde de otro color que la del nombre. */
.comanda-abierta .buscador input {
  border-color: var(--marca);
  background: var(--papel);
}
.comanda-abierta .buscador input:focus {
  border-color: var(--marca-oscuro);
  box-shadow: 0 0 0 3px var(--marca-claro);
}

.comanda-abierta-vacia {
  margin: var(--e3) 0 0;
  color: var(--tinta-suave);
  font-size: var(--t-sm);
}

/* Y la del nombre, en azul, para que NUNCA se parezcan. */
.caja-captura > .campo .buscador input,
.caja-captura > .campo input[type="text"] {
  border-color: var(--azul);
}
.caja-captura > .campo .buscador input:focus {
  border-color: var(--azul-hondo);
  box-shadow: 0 0 0 3px var(--azul-claro);
}

@media (max-width: 720px) {
  .comanda-abierta { margin-left: 0; padding: var(--e3); }
}

/* ---------------------------------------------------------------------
   Las notas de los platos
   --------------------------------------------------------------------- */

/* En la comanda: la nota puesta se ve, la que falta se insinua. */
.nota-renglon {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 8px;
  min-height: auto;
  border: 1px solid var(--amarillo);
  border-radius: 999px;
  background: var(--amarillo-claro);
  color: #6b4708;
  font-size: var(--t-xs);
  font-family: var(--cuerpo);
  cursor: pointer;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}
.nota-renglon:hover { background: #f7e4b8; transform: none; }

/* La misma nota, pero dentro de la tarjeta ya anotada.
   Se ve igual que la pastilla de la vista abierta -- es la misma cosa, tiene
   que reconocerse igual -- pero aquí no se toca: la tarjeta se mira, y para
   cambiar algo se abre con "Abrir".
   La letra NO baja a --t-xs como en la vista abierta: esta tarjeta es la que
   se fotografía y se manda por WhatsApp, y ahí todo llega encogido. */
/* El renglón con el nombre de la persona en la cuenta de cobro.
   Va en beige y en negrilla, como el papelito de una comanda: separa un
   trabajador del siguiente en una lista que puede ser de sesenta. */
.renglon-persona td {
  background: var(--beige-claro);
  font-family: var(--display);
  font-weight: 700;
  border-top: 2px solid var(--borde-fuerte);
}

/* Lo que pidió una persona, debajo de su nombre en Consumo por persona.
   Va en gris y más chiquito que el nombre: el nombre es lo que ella busca y
   esto es lo que confirma. Se parte en varios renglones si hace falta -- un
   nombre puede llevar seis platos distintos y la columna no puede estirarse. */
.que-pidio {
  margin-top: 3px;
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--tinta-media);
  overflow-wrap: anywhere;
}

.nota-en-comanda {
  /* block + fit-content, no inline-block: inline-block se le mete AL LADO del
     plato cuando cabe, y entonces "COCA COLA 1.5" y su nota se pelean el
     ancho de la casilla. La nota siempre debajo, y del ancho de lo que diga. */
  display: block;
  width: fit-content;
  margin-top: 3px;
  padding: 2px 8px;
  border: 1px solid var(--amarillo);
  border-radius: 999px;
  background: var(--amarillo-claro);
  color: #6b4708;
  font-size: var(--t-sm);
  line-height: 1.35;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.agregar-nota {
  margin-top: 2px;
  padding: 0 var(--e2);
  min-height: auto;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  border-color: transparent;
  background: transparent;
}
.agregar-nota:hover {
  color: var(--marca);
  background: var(--marca-claro);
  border-color: transparent;
  transform: none;
}

/* En Cocina: la seccion aparte, en ambar, porque es un "ojo con esto". */
.notas-cocina { border-left: 5px solid var(--amarillo); margin-top: var(--e5); }
.notas-cocina h2 { color: #6b4708; }
.texto-nota { color: #6b4708; }

@media print {
  /* En el papel de la cocina las notas van si o si. */
  .notas-cocina { border-left: 3px solid #000 !important; }
}

/* La barra que aparece al marcar personas para unir. */
.barra-unir {
  position: sticky;
  top: var(--alto-header);
  z-index: 15;
  border-left: 5px solid var(--marca);
  background: var(--marca-claro);
  margin-bottom: var(--e3);
}
.barra-unir p { margin: 2px 0 0; }

/* ---------------------------------------------------------------------------
   CÓMO SE PAGA CADA PLATO
   El caso normal (a crédito) no lleva marca: de veinte platos del día,
   diecinueve son normales. Si todos gritaran su estado, el que de verdad es
   distinto no se notaría. Solo se pintan las excepciones.
   --------------------------------------------------------------------------- */
.marca-cobro {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-top: 2px;
}
.marca-cobro.contado { background: #dcefe4; color: #145a3c; }
.marca-cobro.cortesia { background: var(--beige); color: var(--tinta-suave); }

/* El que esta puesto se ve puesto, tambien el normal.

   Faltaba el de "a credito" -- el caso de todos los dias -- asi que en el
   control de la persona no se marcaba ninguno y no habia forma de saber cual
   estaba. Es discreto a proposito: es lo normal, no una excepcion. */
button.marcado-empresa { background: var(--papel-hueso); border-color: var(--tinta-media); font-weight: 700; }
button.marcado-contado { background: #dcefe4; border-color: #9ccbb2; color: #145a3c; }
button.marcado-cortesia { background: var(--beige); color: var(--tinta-suave); }

.comanda-platos li.pagado .comanda-valor { color: #145a3c; font-weight: 700; }

/* Las tres opciones, cada una con su explicación. Se escoge una vez y se
   entiende: nada de un botón que cambia de significado cada vez que se toca. */
.lista-cobro { display: grid; gap: var(--e2); }
.opcion-cobro {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--e3);
  border: 2px solid var(--borde);
  border-radius: var(--r2);
  background: var(--papel);
  cursor: pointer;
}
.opcion-cobro:hover { border-color: var(--marca); background: var(--marca-claro); }
.opcion-cobro.puesta { border-color: var(--marca); background: var(--marca-claro); }
.opcion-cobro strong { display: block; font-size: var(--t-md); margin-bottom: 2px; }
.opcion-cobro span { display: block; font-size: var(--t-sm); color: var(--tinta-suave); font-weight: 400; }

/* El reparto del día cuando hubo pagos en efectivo. Va aparte del total
   grande a propósito: uno es plata que va a llegar, el otro es plata que
   tiene que estar en el cajón ahora mismo. */
.caja-del-dia {
  background: var(--papel-contable);
  border: 1px solid var(--beige);
  border-radius: var(--r2);
  padding: var(--e3);
  margin-bottom: var(--e4);
}
.caja-del-dia .cifras { margin: 0 0 var(--e2); }
.caja-del-dia .nota { margin: 0; }

/* ---------------------------------------------------------------------------
   CATÁLOGO
   Antes había una casilla de precio por empresa: cuatro columnas estrechas
   más tres botones no cabían, así que "Borrar" se caía a un segundo renglón
   y la tabla se veía rota. Con un solo precio sobra espacio.
   --------------------------------------------------------------------------- */
.acciones-fila { display: flex; gap: var(--e1); flex-wrap: nowrap; justify-content: flex-end; }
.acciones-fila button { white-space: nowrap; }

input.precio {
  width: 10ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
input.precio.disparejo { border-color: var(--amarillo, #9c6a06); background: #fbeed4; }

/* El detalle por empresa solo aparece cuando de verdad no coinciden. */
.precios-disparejos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e3);
  align-items: center;
  margin-top: var(--e2);
  font-size: var(--t-xs);
  color: var(--tinta-suave);
}
.precio-empresa em { font-style: normal; font-weight: 700; color: var(--tinta); }

.caja-aviso {
  border-radius: 0 var(--r2) var(--r2) 0;
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
}
.caja-aviso.ojo { background: #fbeed4; border-left: 5px solid #9c6a06; }
.caja-aviso p { margin: 0 0 var(--e2); }
.caja-aviso p:last-child { margin-bottom: 0; }
.lista-disparejos { margin: 0 0 var(--e2); padding-left: var(--e4); }
.lista-disparejos li { margin-bottom: 2px; font-size: var(--t-sm); }
.lista-disparejos button { font-weight: 700; text-decoration: underline; }

/* El ancho de las columnas del catálogo.
   Sin esto, la columna del plato se estira y el precio queda a media pantalla
   de distancia del nombre: para leer "ALMUERZO ... 12000" toca cruzar un hueco
   vacío con los ojos. Con el precio pegado al nombre se lee de un golpe. */
/* La primera columna es la casilla de marcar: lo más angosta que se pueda.
   Si no se le dice, el navegador le reparte parte del ancho sobrante y el
   nombre del plato termina arrancando en la mitad de la hoja. */
.tabla-catalogo th:nth-child(1), .tabla-catalogo td:nth-child(1) { width: 1%; white-space: nowrap; }
.tabla-catalogo th:nth-child(2), .tabla-catalogo td:nth-child(2) { width: 42%; }
.tabla-catalogo th:nth-child(3), .tabla-catalogo td:nth-child(3) { width: 1%; white-space: nowrap; }
.tabla-catalogo th:nth-child(4), .tabla-catalogo td:nth-child(4) { width: auto; }

/* El signo de pesos, al lado de la casilla: adentro no se puede, porque una
   casilla de número no deja poner texto. */
.campo-precio { display: inline-flex; align-items: center; gap: 4px; }
.campo-precio .signo { color: var(--tinta-suave); font-weight: 700; }

/* ---------------------------------------------------------------------
/*  Cuánto vendí
/*
/*  Los tres números de todos los días -- hoy, esta semana, este mes --
/*  van ARRIBA de los controles y no debajo, y sin que haya que elegir
/*  nada. Ella no explora: lo que hay que buscar, para ella no existe.
/*  Debajo quedan los controles, para cuando la pregunta es otra.
/* --------------------------------------------------------------------- */

.ventas-rapidas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e4);
  margin-bottom: var(--e5);
}

.venta-rapida {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--marca);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra);
  padding: var(--e4);
}

.venta-rapida h3 {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--tinta-media);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* El número de platos es el titular de la tarjeta: es la respuesta a la
   pregunta que ella hace en voz alta. La plata va debajo y más discreta. */
.venta-rapida-platos {
  margin: var(--e2) 0 0;
  font-family: var(--dato);
  font-size: var(--t-sm);
  color: var(--tinta-media);
}
.venta-rapida-platos strong {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--tinta);
  line-height: 1;
  margin-right: 0.25rem;
}

.venta-rapida-plata {
  margin: var(--e2) 0 0;
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--marca-hondo);
}

.venta-rapida-pie {
  margin: var(--e2) 0 0;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
}

/* Los atajos del rango: van dentro del mando, en su propia columna. */
.atajos-rango { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* El aviso de "esto no es lo que usted cree que está mirando".

   No es un error, así que no va en rojo; pero tampoco puede ser un renglón
   más de texto, porque justamente sirve para que no lea agosto creyendo que
   es septiembre. Amarillo, con su borde, como los otros avisos de la app. */
.aviso-ojo {
  background: #fff8e6;
  border: 1px solid var(--amarillo);
  border-left: 5px solid var(--amarillo);
  border-radius: var(--r2);
  padding: var(--e3);
  margin: 0 0 var(--e4);
  font-size: var(--t-sm);
}

/* ---------------------------------------------------------------------
/*  Resumen del día: el día de un vistazo
/*
/*  Esta pantalla arrancaba de una con las tarjetas de cada persona. Para
/*  saber cómo había ido el día tocaba bajar por cuarenta y seis papelitos
/*  sumando de memoria -- o imprimir, que era lo que se quería evitar.
/*  Ahora arriba va el día entero en una tabla, y debajo cada empresa con
/*  su gente, también en tabla. Las tarjetas se quedan en el PDF, que es
/*  el que se recorta y se reparte.
/* --------------------------------------------------------------------- */

/* El bloque del día completo se distingue del de cada empresa: es el
   resumen, no una de las hojas. */
.resumen-general { border-top: 3px solid var(--marca); }

/* La celda de la empresa: la cinta de color y, debajo y chiquita, la razón
   social. Chiquita a propósito -- tres de las cuatro empresas comparten la
   misma razón social, así que la seña útil es la cinta. */
.celda-empresa { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.celda-empresa-razon {
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  line-height: 1.2;
}

/* El numerito de la fila: para contar, no para leer. */
td.numero-fila {
  font-family: var(--dato);
  font-size: var(--t-sm);
  color: var(--tinta-suave);
  width: 1%;
  white-space: nowrap;
}

/* La plata de cada renglón, un poco más marcada: es lo que se busca. */
td.plata-fila { font-weight: 600; }

/* Lo que pidió cada persona, dentro de su celda.

   Cada plato es un bloque suyo, con su cantidad, su marca de cobro y su
   nota. Separarlos con comas no servía: con una nota de por medio no se
   sabía dónde acababa un plato y empezaba el otro. */
.pedido-celda { line-height: 1.5; }
.pedido-item {
  display: inline-block;
  margin-right: var(--e3);
  white-space: normal;
}
.pedido-item .cant { font-weight: 700; font-family: var(--dato); }
.pedido-item .marca-cobro { margin-left: 4px; vertical-align: middle; }

/* La nota va DEBAJO de su plato y en cursiva: es del plato, no otro plato. */
.nota-pedido {
  display: block;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  line-height: 1.25;
}

/* ---------------------------------------------------------------------
/*  "Cómo paga" esta persona
/*
/*  Antes solo se podía marcar plato por plato. Si alguien pedía tres
/*  cosas y pagaba de una, eran tres toques a las seis de la mañana -- y
/*  el tercero se olvidaba. Ese plato olvidado se le cobraba a la empresa
/*  algo que la persona ya había pagado: cobrado dos veces, en silencio.
/*
/*  Los tres botones van A LA VISTA y no dentro de una ventana: una forma
/*  de cobro escondida detrás de un botón es una que nunca se usa.
/* --------------------------------------------------------------------- */

.como-paga {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: var(--e3) 0 0;
}

.como-paga-rotulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--tinta-media);
}

/* Que estén mezclados es un caso de verdad -- el almuerzo lo paga la
   empresa y la gaseosa la paga él --, así que se dice en vez de escoger
   una por cuenta propia. */
.como-paga-mezclado {
  flex-basis: 100%;
  font-size: var(--t-xs);
  color: var(--amarillo);
}

/* ---------------------------------------------------------------------
/*  La portada: "¿qué va a hacer?"
/*
/*  El menú de arriba es una tira de nombres sueltos y ya va por doce. Con
/*  las compras encima se vuelve una lista de veinte palabras donde hay
/*  que adivinar cuál sirve. Aquí las cosas están agrupadas por para-qué-
/*  sirven y cada una dice qué hace, que es lo que el menú no puede decir.
/* --------------------------------------------------------------------- */

.grupo-inicio { margin-bottom: var(--e6); }

.grupo-inicio-titulo {
  border-left: 5px solid var(--marca);
  padding-left: var(--e3);
  margin-bottom: var(--e4);
}
.grupo-inicio-titulo h2 { margin: 0; }
.grupo-inicio-titulo p {
  margin: 2px 0 0;
  font-size: var(--t-sm);
  color: var(--tinta-media);
}

.grupo-inicio-botones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--e3);
}

/* Botones grandes y con su explicación: el nombre solo ("Cuadre") no dice
   para qué sirve, y hasta ahora tocaba abrirlo a ver qué era. */
.boton-inicio {
  display: block;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--marca);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra);
  padding: var(--e4);
  text-decoration: none;
  color: inherit;
}
.boton-inicio:hover { border-color: var(--marca); background: var(--papel-hueso); }
.boton-inicio strong {
  display: block;
  font-family: var(--display);
  font-size: var(--t-lg);
  color: var(--marca-hondo);
  line-height: 1.2;
}
.boton-inicio span {
  display: block;
  margin-top: var(--e1);
  font-size: var(--t-sm);
  color: var(--tinta-media);
  line-height: 1.3;
}

/* ---------------------------------------------------------------------
/*  Los dos mundos de la portada
/*
/*  El negocio son dos cosas al revés una de la otra: lo que se vende y lo
/*  que se compra. Van en la misma app -- dos sitios serían dos respaldos
/*  y dos versiones -- pero cada uno con su menú, para que el de arriba
/*  vuelva a ser corto.
/*
/*  Cada mundo muestra lo que tiene adentro y no solo su nombre: un botón
/*  que dice "Proveedores" y nada más la obliga a entrar a ver qué hay, y
/*  si no le suena, no entra.
/* --------------------------------------------------------------------- */

.mundos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--e5);
  margin-bottom: var(--e6);
}

.mundo {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-top: 5px solid var(--marca);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.mundo-entrar {
  display: block;
  padding: var(--e5) var(--e4) var(--e4);
  text-decoration: none;
  color: inherit;
  background: var(--papel-hueso);
  border-bottom: 1px solid var(--borde);
}
.mundo-entrar:hover { background: var(--beige); }
.mundo-entrar h2 {
  margin: 0;
  font-size: 2rem;
  color: var(--marca-hondo);
  line-height: 1.1;
}
.mundo-entrar p {
  margin: var(--e2) 0 0;
  font-size: var(--t-sm);
  color: var(--tinta-media);
  line-height: 1.35;
}

.mundo-dentro {
  display: grid;
  gap: var(--e2);
  padding: var(--e3);
}
.mundo-dentro .boton-inicio {
  border-left-width: 3px;
  padding: var(--e3);
  box-shadow: none;
}
.mundo-dentro .boton-inicio strong { font-size: var(--t-base, 1rem); }