@import url("fuentes.css");

/* ===========================================================================
   ARROZ PAISA  -  Control de almuerzos

   La idea del diseño: esto es un LIBRO DE CUENTAS, no una página de internet.
   El fondo es el verde pálido del papel de contaduría de toda la vida, las
   tarjetas son papel blanco, los números van en máquina de escribir y cada
   persona que come aparece como una COMANDA: un papelito arrancado de un
   talonario. Así se ve de una que una persona = una factura, que es lo que
   ella tiene que poder cuadrar con el trabajador.

   Un solo tema, claro y de alto contraste, a propósito: esto se usa en una
   cocina a las 6 de la mañana y en pantallas de todos los tamaños.
   =========================================================================== */

:root {
  /* Los colores del restaurante: rojo, blanco y beige.
     Salen del logo, no de la imaginacion. */

  /* Beige y blanco: el papel */
  --papel-contable: #f5eee2;   /* el fondo de toda la pagina */
  --papel: #ffffff;            /* las tarjetas, que asi resaltan */
  --papel-raya: #fbf6ed;       /* las filas de en medio de las tablas */
  --papel-hueso: #fdfaf4;
  --beige: #e9dcc6;            /* el arco del logo */
  --beige-claro: #f2e8d8;

  /* Tinta: negro con una gota de tierra, para que no pelee con el beige */
  --tinta: #241b18;
  --tinta-media: #574b45;
  --tinta-suave: #85756e;

  /* Rojo de la marca: la barra, los encabezados, los botones que hacen algo.
     --marca-viva es el rojo EXACTO del logo, medido de la imagen: #e02d29.
     Con texto blanco da 4.59 de contraste, y el minimo para leer comodo es
     4.5. O sea que pasa, pero raspando: por eso va en la barra de arriba
     (texto grande) y no en el menu (texto chico), que lleva un tono mas
     oscuro para que se lea bien. */
  --marca-viva: #e02d29;
  --marca-hondo: #c02219;
  --marca: #d92b22;
  --marca-oscuro: #b4231b;
  --marca-claro: #fbe6e3;

  /* Azul de apoyo: la pagina donde esta parada, la fila del mouse. Hace falta
     un color que NO sea rojo para lo que solo acompania; si todo fuera rojo,
     nada resaltaria. */
  --azul-claro: #dde9f4;
  --azul-suave: #eff4fa;
  --azul: #35678f;
  --azul-hondo: #204461;

  /* Senales. Aqui esta el problema mas dificil de esta paleta: la marca es
     ROJA, y el rojo tambien es el color de "algo esta mal". Si fueran el
     mismo rojo, un error se veria igual que un boton normal.
     Por eso el rojo de alerta es mucho mas oscuro y menos naranja que el de
     la marca, y ademas los errores siempre llevan fondo y barra al lado: se
     reconocen por peso, no solo por color. */
  --verde: #1f7a4c;
  --verde-claro: #dcefe4;
  --verde-hondo: #145636;
  --rojo: #8b1a12;
  --rojo-claro: #fbe0dc;
  --amarillo: #9c6a06;
  --amarillo-claro: #fbeed4;

  --borde: #e5dccc;
  --borde-fuerte: #c9b99f;

  /* Tipografía */
  --display: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --cuerpo: "Asap", "Segoe UI", system-ui, sans-serif;
  --dato: "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  --t-xs: 0.78rem;
  --t-sm: 0.88rem;
  --t-base: 1rem;
  --t-md: 1.12rem;
  --t-lg: 1.35rem;
  --t-xl: 1.7rem;
  --t-2xl: 2.2rem;
  --t-3xl: 3rem;

  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;

  --radio: 5px;
  --radio-g: 8px;
  --sombra: 0 1px 2px rgba(18, 60, 41, 0.07), 0 2px 10px rgba(18, 60, 41, 0.05);
  --sombra-alta: 0 6px 26px rgba(18, 60, 41, 0.16);

  --alto-toque: 48px; /* nada en lo que haya que hacer clic baja de aquí */
}

/* --------------------------------------------------------------------- */
/*  Base                                                                   */
/* --------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel-contable);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }
p { margin: 0 0 var(--e3); }
a { color: var(--marca); }

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 3px;
}

.oculto { display: none !important; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------- */
/*  Barra de arriba                                                        */
/* --------------------------------------------------------------------- */

.barra {
  background: var(--marca-hondo);
  color: #f6ecf3;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.13);
}

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

.marca {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
}
.marca span {
  font-family: var(--dato);
  font-size: var(--t-xs);
  font-weight: 400;
  color: #bb9db2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.menu {
  display: flex;
  gap: var(--e1);
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.menu a {
  --_color: #d9c3d3;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--e3);
  border-radius: var(--radio);
  color: var(--_color);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s;
}
.menu a:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.menu a[aria-current="page"] {
  background: var(--azul-claro);
  color: var(--marca-hondo);
  border-color: #b9cfe6;
}

/* El semáforo de guardado. Que ella pueda mirar y quedarse tranquila. */
.guardado {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-sm);
  font-family: var(--dato);
  color: #c6aec0;
  white-space: nowrap;
}
.guardado::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #6fca9c;
  flex: none;
}
.guardado[data-estado="guardando"]::before { background: var(--amarillo); }
.guardado[data-estado="problema"] { color: #ffbcb4; }
.guardado[data-estado="problema"]::before { background: #ff6a58; }

/* --------------------------------------------------------------------- */
/*  Cuerpo de la página                                                    */
/* --------------------------------------------------------------------- */

.hoja {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--e5) var(--e4) var(--e7);
}

.encabezado-pantalla {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-bottom: var(--e5);
}
.encabezado-pantalla p {
  margin: var(--e1) 0 0;
  color: var(--tinta-media);
  max-width: 62ch;
}

/* El renglón verde que separa: el hilo del papel de contaduría */
.encabezado-pantalla::after {
  content: "";
  flex: 1 0 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--marca) 0 90px, var(--borde) 90px);
  margin-top: var(--e3);
}

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra);
  padding: var(--e4);
}
.tarjeta > h3, .tarjeta > h2 { margin-bottom: var(--e3); }

.rejilla { display: grid; gap: var(--e4); }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.fila { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: flex-end; }
.crece { flex: 1 1 200px; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); flex-wrap: wrap; }

/* --------------------------------------------------------------------- */
/*  Campos                                                                 */
/* --------------------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.campo > label,
.etiqueta {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--tinta-media);
  letter-spacing: 0.01em;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  font-family: var(--cuerpo);
  font-size: var(--t-md);
  color: var(--tinta);
  background: var(--papel);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 0.6rem 0.7rem;
  min-height: var(--alto-toque);
  width: 100%;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:hover, select:hover { border-color: var(--marca); }
input:focus, select:focus, textarea:focus {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--azul-claro);
  outline: none;
}
input[type="number"] { font-family: var(--dato); text-align: right; }
input[aria-invalid="true"] { border-color: var(--rojo); background: var(--rojo-claro); }

/* La fecha y la empresa se eligen UNA vez y mandan sobre toda la pantalla:
   por eso son las más grandes de todas. */
.mando {
  display: flex;
  gap: var(--e4);
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-left: 5px solid var(--marca);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra);
  padding: var(--e4);
  margin-bottom: var(--e5);
}
.mando .campo { flex: 1 1 230px; }
.mando input, .mando select {
  font-size: var(--t-lg);
  font-family: var(--display);
  font-weight: 600;
  min-height: 56px;
}

/* --------------------------------------------------------------------- */
/*  Botones                                                                */
/* --------------------------------------------------------------------- */

button, .boton {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-base);
  min-height: var(--alto-toque);
  padding: 0 var(--e4);
  border-radius: var(--radio);
  border: 1.5px solid var(--borde-fuerte);
  background: var(--papel);
  color: var(--tinta);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
  white-space: nowrap;
}
button:hover, .boton:hover { background: var(--papel-raya); border-color: var(--marca); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.principal {
  background: var(--marca);
  border-color: var(--marca-oscuro);
  color: #fff;
}
.principal:hover { background: var(--marca-oscuro); border-color: var(--marca-oscuro); }

.verde { background: var(--verde); border-color: var(--verde-hondo); color: #fff; }
.verde:hover { background: var(--verde-hondo); border-color: var(--verde-hondo); }

.peligro { color: var(--rojo); border-color: #e2b4ae; }
.peligro:hover { background: var(--rojo-claro); border-color: var(--rojo); }

.plano { border-color: transparent; background: transparent; padding: 0 var(--e2); }
.plano:hover { background: var(--marca-claro); border-color: transparent; }

.chico { min-height: 36px; font-size: var(--t-sm); padding: 0 var(--e3); }

/* --------------------------------------------------------------------- */
/*  El nombre que se toca para ver el historial                            */
/*                                                                         */
/*  Va como un ENLACE -- rojo de la marca y subrayado -- y no como los      */
/*  demas botones.                                                         */
/*                                                                         */
/*  No es capricho. Un boton de verdad (.plano) lleva borde y fondo a       */
/*  proposito, porque uno que no se ve como boton nadie lo toca en un       */
/*  celular; pero una tabla de 268 nombres con una cajita en cada uno se    */
/*  lee como un formulario lleno de casillas para escribir, que es          */
/*  exactamente lo que no es. Un enlace resuelve las dos cosas: se ve que   */
/*  se puede tocar (tiene color y raya, no es texto pelado) y no le mete    */
/*  una caja a cada renglon.                                               */
/*                                                                         */
/*  El nombre SI se parte en dos renglones si hace falta: los botones no    */
/*  lo hacen, y "MARIA FERNANDA VILLALOBOS" saca la columna de la hoja.     */
/* --------------------------------------------------------------------- */
.nombre-historial {
  border: 0;
  background: none;
  padding: var(--e2) 0;
  min-height: 0;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  font-size: inherit;
  color: var(--marca);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nombre-historial:hover,
.nombre-historial:focus-visible {
  color: var(--marca-oscuro);
  background: none;
  transform: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------- */
/*  Tablas: rayadas como el papel de contaduría                            */
/* --------------------------------------------------------------------- */

.marco-tabla {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  background: var(--papel);
  box-shadow: var(--sombra);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-base);
}

thead th {
  background: var(--marca-hondo);
  color: #f6ecf3;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.7rem var(--e3);
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}
thead th.n { text-align: right; }

tbody td {
  padding: 0.6rem var(--e3);
  border-top: 1px solid var(--borde);
  vertical-align: top;
}
tbody tr:nth-child(even) { background: var(--papel-raya); }
tbody tr:hover { background: var(--azul-suave); }

td.n, th.n { text-align: right; }
.plata, td.n, .num {
  font-family: var(--dato);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La cantidad, en negrilla en toda la app y en los PDF.

   No es un número más de la fila: es el que se lee para saber cuántos platos
   hay que preparar y cuántos se le entregaron a la persona. Iba con el mismo
   peso que el precio unitario y que el total, y en una tabla de veinte platos
   había que ir siguiendo la columna con el dedo. */
.cant, td.cant, .comanda-cant { font-weight: 700; }

tfoot td {
  border-top: 2.5px solid var(--marca-hondo);
  padding: 0.7rem var(--e3);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-md);
  background: var(--papel-hueso);
}
tfoot td.n { font-family: var(--dato); }

.vacio {
  padding: var(--e6) var(--e4);
  text-align: center;
  color: var(--tinta-suave);
  background: var(--papel);
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: var(--radio-g);
}
.vacio strong { display: block; font-family: var(--display); font-size: var(--t-md); color: var(--tinta-media); margin-bottom: var(--e1); }

/* --------------------------------------------------------------------- */
/*  LA COMANDA  -  el papelito del talonario. La pieza del diseño.         */
/* --------------------------------------------------------------------- */

/* --------------------------------------------------------------------- */
/*  Las comandas ya anotadas
/*
/*  Aquí la letra es más grande que en el resto de la app, a propósito.
/*  Quien usa esto no ve bien de cerca, y esta lista es la que más se mira:
/*  se repasa a cada rato durante el día para saber quién ya pidió. Además de
/*  aquí salen los pantallazos que se le mandan a la gente, y en un celular
/*  todo llega encogido.
/*
/*  Las tarjetas se ensancharon un poco junto con la letra. Si no, el nombre
/*  largo se parte en dos renglones y se gana en tamaño lo que se pierde en
/*  poder leerlo de un golpe.
/* --------------------------------------------------------------------- */

.comandas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--e4);
}

.comanda {
  --cinta: var(--marca);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--cinta);
  border-radius: 3px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  animation: llega 0.22s ease-out;
}

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

.comanda-cabeza {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  padding: var(--e3) var(--e3) var(--e2);
  /* El troquel del talonario */
  border-bottom: 2px dashed var(--borde);
}

/* El numerito se queda chiquito: es para contar, no para leer. Si creciera
   con lo demás le quitaría sitio al nombre, que es lo que hay que ver. */
.comanda-numero {
  font-family: var(--dato);
  font-weight: 600;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  background: var(--papel-raya);
  border: 1px solid var(--borde);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
  flex: none;
  margin-top: 0.15rem;
}

.comanda-nombre {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.comanda-platos { list-style: none; margin: 0; padding: var(--e2) var(--e3); flex: 1 1 auto; }
.comanda-platos li {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto auto;
  gap: 0.4rem;
  align-items: baseline;
  padding: 0.32rem 0;
  font-size: var(--t-base);
}
.comanda-platos li + li { border-top: 1px dotted var(--borde); }
/* La empresa, en la tarjeta, más grande que en el resto de la app.

   Estas tarjetas se imprimen y se recortan, y el papelito se lo lee gente que
   no ve bien de lejos. En una tabla la cinta es una etiqueta y puede ser
   chiquita; aquí es la seña que dice de dónde salió el papel. */
.comanda-cabeza .cinta {
  font-size: var(--t-sm);
  padding: 0.22rem 0.6rem;
  letter-spacing: 0.08em;
}

/* La cantidad NO lleva color propio: hereda el del renglón.

   Tenía color gris fijo, y como el gris se lo ponía encima al negro, el
   "font-weight: 700" no se notaba: quedaba un 1x gris claro y gordo, que se
   lee igual de flojo que uno delgado -- y en fotocopia, peor. Heredando, en un
   pedido normal sale de tinta negra y en uno de cortesía o ya pagado sale
   apagado, que es justo lo que se quiere decir en cada caso. */
.comanda-cant { font-family: var(--dato); }
.comanda-plato { overflow-wrap: anywhere; }
.comanda-valor { font-family: var(--dato); font-variant-numeric: tabular-nums; }
.comanda-platos .gratis { color: var(--tinta-suave); font-style: italic; }

.comanda-pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border-top: 2px dashed var(--borde);
  background: var(--papel-hueso);
}
.comanda-total { font-family: var(--dato); font-weight: 600; font-size: var(--t-lg); }

.comanda[data-revisar="si"] { border-color: var(--rojo); background: #fffaf9; }

/* --------------------------------------------------------------------- */
/*  El título de la lista del día                                          */
/*                                                                         */
/*  Esta pantalla se fotografía: el pantallazo se le manda a los           */
/*  trabajadores para que vean lo que se anotó. Por eso la sede va del      */
/*  tamaño de un título y no de una cintica -- en la foto tiene que leerse  */
/*  de lejos, y quien la recibe no siempre ve de cerca.                     */
/* --------------------------------------------------------------------- */

.titulo-lista {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-bottom: var(--e4);
  padding-left: var(--e3);
  /* El mismo color que la cinta de las comandas de esta empresa. */
  border-left: 6px solid var(--cinta, var(--marca));
}

/* Sin esto, un nombre largo no puede encogerse y saca la fila de la hoja. */
.titulo-lista-quien { min-width: 0; }

.titulo-lista-arriba {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinta-media);
}
.titulo-lista-sede {
  margin: 0;
  /*
    Grande de verdad, pero sin romper nada.

    El pantallazo se ve en un celular, donde todo llega encogido: por eso en
    pantalla ancha se va hasta 3rem. Y como no puede reventar la fila cuando
    ella abre la app en el celular, el tamaño lo pone clamp() -- crece con el
    ancho de la pantalla y nunca se sale de esos dos topes.
  */
  font-size: clamp(var(--t-xl), 5vw, var(--t-3xl));
  line-height: 1.05;
  color: var(--marca-hondo);
  overflow-wrap: anywhere; /* un código largo se parte, no empuja la fila */
}
.titulo-lista-pie {
  margin: var(--e1) 0 0;
  /* También se lee en la foto: dice de qué empresa y de qué día es. */
  font-size: var(--t-base);
  color: var(--tinta-media);
}
.titulo-lista-cuenta {
  font-size: var(--t-lg);
  font-weight: 600;
}

/* --------------------------------------------------------------------- */
/*  Cifras grandes                                                         */
/* --------------------------------------------------------------------- */

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e3); }

.cifra {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  padding: var(--e3) var(--e4);
  box-shadow: var(--sombra);
}
.cifra dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--tinta-media);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cifra dd {
  margin: 0.15rem 0 0;
  font-family: var(--dato);
  font-weight: 600;
  font-size: var(--t-xl);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
/* El "Q1"/"Q2" que sale al lado de una cifra solo el día en que hay gente en
   las dos quincenas a la vez (el 14: MGP ya cerró, las demás no). */
.marca-quincena {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--tinta-suave);
  margin-left: 0.35rem;
}

/* Una casilla con su letrero al lado, del alto de los demás campos de la
   barra de arriba, para que la fila no quede coja. El letrero es parte de la
   etiqueta: se puede tocar el texto y no solo el cuadrito, que en un celular
   es la diferencia entre marcarlo y no atinarle. */
.casilla {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--tinta);
}
.casilla input { width: 18px; height: 18px; flex: none; }

/* Ver cifra() en componentes.js: una cifra de plata se achica antes que
   partirse en dos renglones. */
.cifra dd.plata-cifra { white-space: nowrap; overflow-wrap: normal; }
.cifra dd.plata-cifra.apretada { font-size: var(--t-md); }

.cifra.destacada { background: var(--marca-hondo); border-color: var(--marca-hondo); }
.cifra.destacada dt { color: #9dc9b0; }
.cifra.destacada dd { color: #fff; }

/* --------------------------------------------------------------------- */
/*  Cintas de empresa                                                      */
/* --------------------------------------------------------------------- */

.cinta {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border-radius: 3px;
  color: #fff;
  background: var(--marca);
  white-space: nowrap;
}

/* --------------------------------------------------------------------- */
/*  Avisos                                                                 */
/* --------------------------------------------------------------------- */

.nota {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  padding: var(--e3) var(--e4);
  border-radius: var(--radio-g);
  border: 1px solid var(--borde);
  border-left: 5px solid var(--tinta-suave);
  background: var(--papel);
  margin-bottom: var(--e4);
}
.nota strong { font-family: var(--display); display: block; }
.nota p { margin: 0.15rem 0 0; font-size: var(--t-sm); color: var(--tinta-media); }
.nota .acciones { margin-left: auto; display: flex; gap: var(--e2); flex-wrap: wrap; }

.nota.malo { border-left-color: var(--rojo); background: var(--rojo-claro); border-color: #e8c4bf; }

/* --------------------------------------------------------------------- */
/*  Lista de cosas por arreglar, cada una con su boton al lado             */
/*                                                                         */
/*  El aviso dejo de ser solo un aviso: cada plato sin precio trae al lado */
/*  el boton para ponerselo. Por eso el nombre y el boton van en la misma  */
/*  linea, y el detalle (quienes y que dias) debajo y mas chiquito: lo que */
/*  ella busca es el plato, y el detalle es para confirmar que es ese.     */
/* --------------------------------------------------------------------- */
.lista-arreglable {
  list-style: none;
  margin: var(--e3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.lista-arreglable li {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  padding: var(--e2) 0;
  border-top: 1px solid #e8c4bf;
}
.lista-arreglable .quien { flex: 1 1 14rem; min-width: 0; }
.lista-arreglable .apunte {
  font-size: var(--t-sm);
  color: var(--tinta-media);
  overflow-wrap: anywhere;
}
.nota.ojo { border-left-color: var(--amarillo); background: var(--amarillo-claro); border-color: #ecd9ac; }
.nota.bien { border-left-color: var(--verde); background: var(--verde-claro); border-color: #b9d9c7; }
.nota.dato { border-left-color: var(--azul); background: var(--azul-claro); border-color: #b9d5e3; }

/* Los mensajitos que salen y se van */
.mensajes {
  position: fixed;
  right: var(--e4);
  bottom: var(--e4);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  max-width: min(420px, calc(100vw - 2rem));
}
.mensaje {
  background: var(--marca-hondo);
  color: #fff;
  padding: var(--e3) var(--e4);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra-alta);
  font-size: var(--t-sm);
  animation: entra 0.2s ease-out;
}
.mensaje.malo { background: var(--rojo); }
.mensaje.ojo { background: var(--amarillo); }
@keyframes entra { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------- */
/*  Buscador con lista (personas y platos)                                 */
/* --------------------------------------------------------------------- */

.buscador { position: relative; }

.buscador-lista {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--papel);
  border: 1.5px solid var(--marca);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  max-height: 320px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.2rem;
}
.buscador-lista li {
  padding: 0.55rem 0.6rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: var(--t-base);
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  align-items: center;
}
.buscador-lista li[aria-selected="true"] { background: var(--marca-hondo); color: #fff; }
.buscador-lista li[aria-selected="true"] .apunte { color: #a9d3bc; }
.buscador-lista li:hover { background: var(--azul-suave); }
.buscador-lista li[aria-selected="true"]:hover { background: var(--marca-hondo); }
.buscador-lista .apunte { font-family: var(--dato); font-size: var(--t-xs); color: var(--tinta-suave); }
.buscador-lista .crear { color: var(--marca); font-weight: 600; font-family: var(--display); }
.buscador-lista li[aria-selected="true"].crear { background: var(--marca); color: #fff; }

/* --------------------------------------------------------------------- */
/*  Ventanas                                                               */
/* --------------------------------------------------------------------- */

dialog {
  border: 1px solid var(--borde-fuerte);
  border-top: 5px solid var(--marca);
  border-radius: var(--radio-g);
  padding: 0;
  max-width: min(560px, calc(100vw - 2rem));
  width: 100%;
  box-shadow: var(--sombra-alta);
  color: var(--tinta);
  background: var(--papel);
}
dialog::backdrop { background: rgba(18, 60, 41, 0.42); }

/*
  Una ventana nunca puede quedar más alta que la pantalla.

  El historial de alguien que lleva medio año comiendo trae sesenta renglones,
  y sin esto el botón de "Cerrar" queda por debajo del borde de abajo: la
  ventana no se puede cerrar y la app parece trabada.

  El [open] no es adorno. Sin él, este display:flex le ganaría al display:none
  que el navegador le pone a las ventanas cerradas, y estarían TODAS a la
  vista, apiladas al final de la página.
*/
dialog[open] {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
}

/* El cuerpo es lo único que se mueve; el pie se queda quieto. */
.ventana-cuerpo { overflow-y: auto; flex: 1 1 auto; }

/*
  La × de cerrar, arriba a la derecha.

  Antes la única salida era el botón del final, y en una ventana larga ese
  botón quedaba a diecisiete días de scroll de distancia. La × está siempre
  donde uno la busca, se vea lo que se vea de la ventana.
*/
.cerrar-x {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  min-height: 40px;
  width: 40px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--tinta-suave);
  font-size: 1.6rem;
  line-height: 1;
}
.cerrar-x:hover, .cerrar-x:focus-visible {
  background: var(--marca-claro);
  border-color: transparent;
  color: var(--marca-oscuro);
  transform: none;
}
/* Que un título largo no se meta debajo de la ×. */
.ventana-cuerpo h3 { padding-right: 2.4rem; }

/*
  Dentro de una ventana, la tabla NO lleva su propia barra.

  .marco-tabla usa overflow-x para que una tabla ancha se pueda correr de
  lado. Pero en CSS, poner overflow-x en auto obliga al overflow-y a dejar de
  ser visible, asi que la caja tambien scrollea para arriba y para abajo -- y
  en el historial quedaban DOS barras, una dentro de la otra, y ninguna movia
  lo que uno esperaba. Aqui la tabla se deja crecer y la que corre es la
  ventana, que es la que se ve.
*/
dialog .marco-tabla { overflow: visible; }

/*
  Y el TOTAL tampoco se queda pegado abajo.

  La fila de total es "sticky" para que no se pierda de vista mientras uno
  recorre una tabla larga. Eso funciona cuando la tabla es la que scrollea;
  aqui la que scrollea es la ventana, asi que el total se quedaba clavado en
  la mitad, tapando los renglones que uno estaba leyendo. En una ventana el
  total va donde termina la lista, que es donde uno lo va a buscar.
*/
dialog tfoot td, dialog tfoot th { position: static; }
.ventana-cuerpo { padding: var(--e5); display: flex; flex-direction: column; gap: var(--e4); }
.ventana-pie {
  display: flex;
  gap: var(--e3);
  justify-content: flex-end;
  flex-wrap: wrap;
  flex: none;
  padding: var(--e3) var(--e5);
  border-top: 1px solid var(--borde);
  background: var(--papel-raya);
}

/* --------------------------------------------------------------------- */
/*  Estados del cuadre                                                     */
/* --------------------------------------------------------------------- */

tr[data-estado="cuadra"] td:first-child { box-shadow: inset 4px 0 0 var(--verde); }
tr[data-estado="no-cuadra"] { background: var(--rojo-claro) !important; }
tr[data-estado="no-cuadra"] td:first-child { box-shadow: inset 4px 0 0 var(--rojo); }
tr[data-estado="no-cuadra"] .diferencia { color: var(--rojo); font-weight: 700; }
tr[data-estado="cuadra"] .diferencia { color: var(--verde); }

/* --------------------------------------------------------------------- */
/*  Documento para imprimir (cuenta de cobro y resúmenes)                   */
/* --------------------------------------------------------------------- */

.documento {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra);
  padding: var(--e6);
  max-width: 820px;
  margin: 0 auto;
}
.documento h2 {
  font-size: var(--t-xl);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: var(--e3);
  border-bottom: 3px solid var(--marca-hondo);
  margin-bottom: var(--e4);
}
.documento .partes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e4); margin-bottom: var(--e5); }
.documento .parte { border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e3); }
.documento .parte h4 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); margin-bottom: var(--e1); }
.documento .parte .nombre { font-family: var(--display); font-weight: 700; font-size: var(--t-md); }
.documento .parte .nit { font-family: var(--dato); font-size: var(--t-sm); color: var(--tinta-media); }
.documento .cierre { margin-top: var(--e6); display: flex; justify-content: space-between; gap: var(--e5); flex-wrap: wrap; }
.documento .firma { flex: 1 1 240px; border-top: 1.5px solid var(--tinta); padding-top: var(--e2); font-size: var(--t-sm); text-align: center; margin-top: var(--e7); }

/* --------------------------------------------------------------------- */
/*  Pantallas chiquitas                                                    */
/* --------------------------------------------------------------------- */

@media (max-width: 720px) {
  body { font-size: 16px; }
  .hoja { padding: var(--e4) var(--e3) var(--e7); }
  .barra-fila { padding: var(--e2) var(--e3); gap: var(--e2); }
  .menu { order: 3; flex: 1 0 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .menu a { flex: none; }
  .guardado { margin-left: auto; }
  .mando { padding: var(--e3); gap: var(--e3); }
  .mando .campo { flex: 1 1 100%; }
  .comandas { grid-template-columns: 1fr; }
  .documento { padding: var(--e4); }
  .mensajes { left: var(--e3); right: var(--e3); bottom: var(--e3); max-width: none; }
  table { font-size: var(--t-sm); }
  tbody td, thead th { padding: 0.5rem var(--e2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------- */
/*  Impresión                                                              */
/* --------------------------------------------------------------------- */

@media print {
  @page { margin: 1.4cm; }
  body { background: #fff; font-size: 11pt; }
  .barra, .mensajes, .no-imprimir, .mando, .encabezado-pantalla .acciones { display: none !important; }
  .hoja { padding: 0; max-width: none; }
  .tarjeta, .marco-tabla, .documento { box-shadow: none; border: none; padding: 0; }
  .documento { max-width: none; }
  thead th { background: #a81e17 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tbody tr:nth-child(even) { background: #f8f2f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tbody tr:hover { background: transparent !important; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  thead { display: table-header-group; }
  .comanda { page-break-inside: avoid; }

  /* Cada empresa arranca en su propia hoja.
     Es la misma regla que ya cumple el PDF. Sin esto, al imprimir la pantalla
     con "Todas las empresas" los pedidos de MGP y el título de AGRO caían en
     la misma hoja, y esa hoja no se le puede mandar a ninguna de las dos. */
  .documento.aparte + .documento.aparte { break-before: page; page-break-before: always; }

  /* La cinta de la empresa, en papel, con letra negra y recuadro.

     En pantalla es letra blanca sobre el color de la empresa. Al imprimir, el
     navegador BOTA los fondos si no le dicen lo contrario -- y la casilla de
     "gráficos de fondo" viene apagada de fábrica --, así que la cinta salía
     con letra blanca sobre papel blanco: la tarjeta recortada llegaba a la
     fábrica sin decir de qué fábrica era, que es justo lo que se quería
     evitar. Con letra negra sale siempre, con fondos o sin ellos. */
  .cinta {
    background: transparent !important;
    color: #000 !important;
    border: 1.5px solid #000;
    font-size: var(--t-sm);
  }
}