/* Pensado para una tablet amurada a la pared, operarios con guantes.
   Todo lo que sigue prioriza: legible de lejos, tocable con guantes, sin scroll. */

:root {
  --bg: #101418;
  --panel: #1a2029;
  --panel-alto: #232b36;
  --borde: #2f3947;
  --texto: #f2f5f8;
  --texto-tenue: #9aa7b6;
  --acento: #2e9e5b;
  --acento-alto: #37b76a;
  --alerta: #c4562f;

  /* Estado, no accion: el semaforo de la planilla, el tambo ya cargado, el dia que
     no es hoy. El verde es el mismo de --acento-alto a proposito. En una tablet que
     se lee a dos metros, dos verdes casi iguales son dos cosas que decodificar; y
     de los candidatos es el que mas contrasta contra --panel-alto (5.5:1).
     El rojo del semaforo es --alerta, que ya estaba. */
  --bien: #37b76a;
  --aviso: #c9a227;
  --aviso-fondo: #5c4a1a;
  --aviso-texto: #ffe9a3;

  /* Azul: la unica accion que no es "agregar". Entrada es --acento, salida es esto.
     Que no compartan color es el punto; con guantes y de lejos, el color llega
     antes que la palabra. */
  --salida: #2f6ea8;
  --salida-alto: #3d86c6;

  /* Los chips de estado de maduracion: fondo teñido oscuro + texto claro del mismo
     tono. Son mas apagados que --aviso-fondo a proposito: el chip informa, el boton
     de fecha interrumpe. */
  --chip-bien-fondo: #1d4d30;  --chip-bien-texto: #6fce90;
  --chip-mal-fondo: #5a2a18;   --chip-mal-texto: #f0a184;
  --chip-aviso-fondo: #3a3320; --chip-aviso-texto: #e8d49a; --chip-aviso-borde: #5c5030;

  --radio: 14px;
  --toque-min: 96px; /* alto minimo de cualquier cosa tocable, con guantes */
}

* { box-sizing: border-box; }

/* El [hidden] del navegador es solo display:none sin !important, asi que cualquier
   regla de clase con display:flex o display:grid lo anula sin avisar. Como aca se
   esconde y se muestra todo por hidden, tiene que ganar siempre. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* regla dura: en la tablet no se scrollea nunca */
}

body {
  background: var(--bg);
  color: var(--texto);
  font: 500 18px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------ estructura */

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  gap: 14px;
}

header {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
}

h1 {
  font-size: 20px;
  margin: 0;
  letter-spacing: 0.3px;
}

.migas {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  font-size: 22px;
  font-weight: 700;
  color: var(--texto-tenue);
  min-width: 0;
}

.miga { color: var(--texto); }
.miga-sep { color: var(--borde); }

.paso { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
#paso-listo { justify-content: center; }
.paso[hidden] { display: none; }

.pregunta {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
}

/* ------------------------------------------------------------ botones */

.opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  align-content: start;
  overflow-y: auto; /* si hay 40 operarios, este es el unico lugar que puede scrollear */
}

.opcion {
  min-height: var(--toque-min);
  padding: 18px 20px;
  /* Longhands y no el atajo `font`: `inherit` NO vale como familia dentro de `font`, asi
     que `font: 700 26px/1.2 inherit` era una declaracion INVALIDA y el navegador la
     descartaba entera. Resultado: los botones de todas las tablets venian con la
     tipografia por defecto, 13,3 px, en pantallas pensadas para leerse con guantes.
     Solo se notaba abajo de 620 px, donde un media query valido los corregia. */
  font-family: inherit; font-size: 26px; font-weight: 700; line-height: 1.2;
  color: var(--texto);
  background: var(--panel-alto);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
  transition: transform 0.06s ease, background 0.12s ease;
}

.opcion:active {
  transform: scale(0.97);
  background: var(--acento);
  border-color: var(--acento-alto);
}

.btn-txt {
  min-height: 56px;
  padding: 12px 22px;
  font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1;
  color: var(--texto-tenue);
  background: transparent;
  border: 2px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
}

.btn-txt:active { background: var(--panel-alto); }

/* ------------------------------------------------------------ confirmacion */

.confirmacion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 20px;
  background: var(--acento);
  border-radius: var(--radio);
  text-align: center;
}

.confirmacion .tilde { font-size: 56px; line-height: 1; }
.confirmacion .titulo { font-size: 30px; font-weight: 800; letter-spacing: 0.5px; }
.confirmacion .hora { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; }
.confirmacion .detalle { font-size: 18px; opacity: 0.9; }

/* Es el unico boton de correccion del sistema: tiene que ser facil de acertar
   con guantes y a la primera. */
.btn-deshacer {
  /* Sin margin-top propio: el contenedor .acciones-confirmacion ya lo pone, y tenerlo
     acá también lo bajaba unos píxeles respecto de SEGUIR. Los dos botones tienen que
     quedar al ras, que a un metro de distancia es lo que se nota. */
  min-height: 88px;
  padding: 0 44px;
  font-family: inherit; font-size: 26px; font-weight: 800; line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  cursor: pointer;
}

/* ------------------------------------------------------------ historial */

/* El "← Inicio" de una tablet compartida. Se distingue de "Cambiar" porque hace algo
   distinto: Cambiar se queda en el sector, Inicio se va de él. */
.btn-txt.inicio { border-color: var(--acento-alto); color: var(--texto); }

/* ------------------------------------------------------------ recepción */
/* La franja de contexto del paso de tambo: de qué día se está cargando y qué fue lo
   último que entró. Las dos cosas existen para que nadie cargue dos veces el mismo
   tambo ni se saltee uno después de ir a mover una canilla. */

.franja-recepcion {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.btn-fecha {
  min-height: 56px;
  padding: 0 22px;
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  color: var(--texto);
  background: var(--panel-alto);
  border: 2px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}

/* Cargando para OTRO día, el botón grita. Una tablet que quedó con la fecha del sábado
   y nadie lo nota mete toda la semana en el día equivocado: es el error caro de esta
   pantalla, y tiene que ser imposible no verlo. */
.btn-fecha.otro-dia {
  background: var(--aviso-fondo);
  border-color: var(--aviso);
  color: var(--aviso-texto);
}

.ultimo {
  font-size: 18px;
  color: var(--texto-tenue);
  line-height: 1.3;
}

.ultimo strong { color: var(--texto); font-weight: 800; }

/* El tambo que ya se cargó hoy queda marcado en su propio botón: es lo que evita
   cargarlo dos veces sin tener que recordar nada. */
.opcion .ya-cargado {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--bien);
}

/* El calendario del paso de fecha. Secundario a propósito: separado por una línea y más
   abajo, para que los botones de los últimos días sigan siendo lo primero que se ve. */
.otra-fecha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--borde);
  flex-shrink: 0;
}

.otra-fecha label {
  font-size: 19px;
  font-weight: 700;
  color: var(--texto-tenue);
}

/* Alto de botón: se toca con el dedo igual que todo lo demás. */
.otra-fecha input[type='date'] {
  min-height: 62px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  color: var(--texto);
  background: var(--panel-alto);
  border: 2px solid var(--borde);
  border-radius: 10px;
  /* El icono del selector viene oscuro sobre fondo oscuro y no se ve. */
  color-scheme: dark;
}

.otra-fecha .nota-limite {
  font-size: 15px;
  color: var(--texto-tenue);
  flex-basis: 100%;
}

/* ------------------------------------------------------------ planilla de recepción */
/* Dos columnas de tambos y no una: con 15 en una sola columna cada fila queda en ~39 px,
   demasiado chico hasta con mouse. Partido en dos, van a ~72 px y entra todo sin scroll,
   que es el punto de la planilla —ver el conjunto—. */

.planilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  align-content: start;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Columnas FIJAS y no flex: con flex, la fila que tiene dos entregas corre el "+" a otra
   posición que la que no tiene ninguna, y la planilla se lee despareja. Acá todas las
   filas tienen la misma grilla, así que las celdas quedan una abajo de la otra como en
   una tabla. `--entregas` lo pone el JS según el día: normalmente 2. */
.fila-tambo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(var(--entregas, 2), 96px);
  align-items: stretch;
  gap: 8px;
  min-height: 66px;
}

.fila-tambo .quien {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 12px;
  background: var(--panel);
  border: 2px solid var(--borde);
  border-radius: 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--texto);
}

.fila-tambo .numero {
  font-size: 16px;
  font-weight: 800;
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.fila-tambo .nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El semáforo.
   Verde = cargado. Rojo = se esperaba y falta. Gris = este tambo no entrega siempre, así
   que su ausencia no es una alarma. Sin esa tercera categoría habría seis rojos todos los
   días en una jornada normal, y un rojo que siempre está no avisa de nada. */
.fila-tambo .luz {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--borde);
}

.fila-tambo.cargado .luz { background: var(--bien); }
.fila-tambo.falta .luz { background: var(--alerta); }
.fila-tambo.cargado .quien { border-color: var(--bien); }

/* Cada entrega del día es una celda. La segunda sólo aparece cuando hay una primera:
   los datos dicen que una segunda entrega pasa como mucho una vez por día. */
.celda {
  background: var(--panel-alto);
  border: 2px solid var(--borde);
  border-radius: 10px;
  color: var(--texto);
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  padding: 0 6px;
}

.celda:active { transform: scale(0.96); }
.celda.llena { background: color-mix(in srgb, var(--bien) 18%, var(--panel-alto)); border-color: var(--bien); }
.celda.sumar { font-size: 26px; color: var(--texto-tenue); font-weight: 400; }
/* Los lugares que sobran de la grilla no son botones: se dejan vacíos para que el "+"
   sea siempre uno solo por fila, el de la entrega que sigue. */
.celda.hueco { visibility: hidden; }
.celda small { display: block; font-size: 12px; font-weight: 600; color: var(--texto-tenue); margin-top: 2px; }
/* La entrega con observación se marca: es lo que hay que mirar antes de liquidar. */
.celda.observada { border-color: var(--aviso); }

.pie-planilla {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  flex-shrink: 0;
}

/* Litros y temperatura en la misma pantalla, un solo teclado. El campo activo se
   resalta, y con el numpad se pasa de uno al otro con Enter. */
.dos-campos { display: flex; gap: 16px; }

.campo {
  min-width: 190px;
  padding: 10px 20px;
  background: var(--panel);
  border: 2px solid var(--borde);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}

.campo.activo { border-color: var(--acento-alto); background: var(--panel-alto); }
.campo .valor { display: block; font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--texto); }
.campo .valor.vacio { color: var(--borde); }
.campo .unidad { display: block; font-size: 13px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 1px; }

/* ------------------------------------------------------------ observación */
/* Botones propios y no .btn-seguir: ese está pensado para el fondo VERDE de la
   confirmación (texto blanco sobre un velo claro) y acá el fondo es el panel oscuro,
   donde queda casi invisible. Ya pasó una vez con el "No fue un pallet completo". */

.acciones-observacion { display: flex; gap: 14px; align-items: center; margin-top: 18px; flex-wrap: wrap; }

.btn-obs {
  min-height: 78px;
  padding: 0 34px;
  font-family: inherit; font-size: 22px; font-weight: 800; line-height: 1;
  color: var(--texto);
  background: var(--panel-alto);
  border: 2px solid var(--borde);
  border-radius: 12px;
  cursor: pointer;
}

.btn-obs:active { transform: scale(0.97); }
.btn-obs.principal { background: var(--acento); border-color: var(--acento-alto); }
.btn-obs.suave { color: var(--texto-tenue); font-weight: 700; font-size: 19px; }
.btn-obs:disabled { opacity: 0.35; cursor: default; }

/* ------------------------------------------------------------ teclado de letras */
/* Teclas más chicas que las numéricas a propósito: son 30 y tienen que entrar sin
   scroll. Igual quedan sobre los 44 px que hacen falta para no errar con el dedo. */

.teclado-letras { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.fila-teclas { display: flex; gap: 7px; justify-content: center; width: 100%; }

.tecla-letra {
  flex: 1;
  min-width: 0;
  max-width: 86px;
  min-height: 62px;
  font-family: inherit; font-size: 25px; font-weight: 700; line-height: 1;
  color: var(--texto);
  background: var(--panel-alto);
  border: 2px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
}

.tecla-letra:active { transform: scale(0.95); background: var(--acento); }
.tecla-letra.ancha { max-width: none; flex: 4; font-size: 17px; letter-spacing: 1px; }
.tecla-letra.borrar { flex: 1.4; max-width: 120px; font-size: 24px; color: var(--texto-tenue); }

/* Las procedencias ocasionales ya conocidas, arriba del teclado.
   Una sola fila de alto: abajo va el teclado, que es lo que de verdad necesita el
   espacio. Si hay mas, scrollean. No se achican por debajo de --toque-min aunque
   entrarian mas: tocar una de estas ELIGE EL TAMBO al que despues hay que pagarle,
   no es un atajo decorativo. */
/* Lo que se va escribiendo. Alto fijo para que el teclado no salte al pasar de renglón. */
.nota-valor {
  min-height: 64px;
  width: 100%;
  background: var(--panel);
  border: 2px solid var(--borde);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 23px;
  line-height: 1.3;
  color: var(--texto);
  word-break: break-word;
}

.nota-valor.vacio { color: var(--texto-tenue); font-style: italic; }

/* ------------------------------------------------------------ totales del día */
/* Lo que reemplaza al cartón colgado: cuántos pallets lleva y de qué.
   Va siempre visible, a diferencia del historial, y por eso tiene que ser BAJO — cada
   píxel que ocupa se lo saca a los botones, que son lo que el operario viene a tocar.
   Una franja de dos renglones alcanza para orientarse sin competir. */

.totales {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 10px 16px;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}

.totales-cifras {
  display: flex;
  gap: 18px;
  align-items: baseline;
  font-size: 14px;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.totales-cifras strong {
  font-size: 26px;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* El desglose por marca+producto. Se muestran SOLO las combinaciones con producción:
   3 marcas × 3 leches son 9 casillas posibles y en un día normal se usan tres. Llenar la
   pantalla de ceros haría ilegible justo lo que sí pasó. */
.desglose {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

.desglose .chip-total {
  display: flex;
  align-items: baseline;
  gap: 7px;
  background: var(--panel-alto);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 16px;
  color: var(--texto-tenue);
  white-space: nowrap;
}

.desglose .chip-total b {
  font-size: 19px;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.desglose .vacio-total {
  font-size: 15px;
  color: var(--texto-tenue);
  font-style: italic;
}

.historial {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 16px;
  max-height: 34vh;
  overflow-y: auto;
  flex-shrink: 0;
}

.historial-titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.historial-titulo strong { font-size: 26px; color: var(--texto); }

.fila {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--borde);
  font-size: 18px;
  align-items: center;
}

.fila .h { font-variant-numeric: tabular-nums; color: var(--texto-tenue); min-width: 58px; }
.fila .q { flex: 1; font-weight: 600; }
.fila .op { color: var(--texto-tenue); font-size: 16px; }
.fila.pendiente .h::after { content: ' ⏳'; }
.fila.anulada { opacity: 0.4; text-decoration: line-through; }

/* ------------------------------------------------------------ estado de red */

.estado {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  background: var(--panel-alto);
  color: var(--texto-tenue);
  white-space: nowrap;
}

.punto { width: 11px; height: 11px; border-radius: 50%; background: var(--acento); }
.estado.sin-red { background: var(--alerta); color: #fff; }
.estado.sin-red .punto { background: #fff; }

/* ------------------------------------------------------------ pantallas angostas */
/* Las tablets de planta son de 1280 de ancho y nada de esto las toca. Esto es para
   cuando alguien entra desde el celular: ver lo que se cargó, o registrar algo estando
   lejos de la tablet amurada.

   El problema concreto: `.migas` tiene flex:1 y min-width:0, asi que en 390 px se
   comprime a 20 px y el texto se derrama por debajo de "Cambiar" y del indicador de red.
   No es que se corte: queda ilegible encima de los dos controles.

   La solucion es bajarlo entero a su propia linea en vez de recortarlo. Las migas dicen
   que se eligio hasta ahora, y truncarlas con puntos suspensivos borraria justo lo que
   uno mira para saber donde esta parado. */
@media (max-width: 780px) {
  header { flex-wrap: wrap; gap: 8px 12px; }
  h1 { font-size: 17px; }
  /* El titulo se queda arriba con los dos controles; las migas pasan a la segunda fila,
     donde tienen el ancho completo y pueden wrappear tranquilas. */
  #btn-reiniciar { margin-left: auto; }
  .migas {
    order: 4;
    flex: none;
    flex-basis: 100%;
    flex-wrap: wrap;
    font-size: 16px;
    gap: 6px;
    line-height: 1.3;
  }
}

@media (max-width: 620px) {
  .opciones { grid-template-columns: 1fr 1fr; }
  .opcion { font-size: 21px; min-height: 84px; }
  .pregunta { font-size: 21px; }
}

/* ------------------------------------------------------------ agrupado de quesos */
/* 17 tipos de queso no entran como una grilla plana legible: se agrupan por familia
   para que el quesero encuentre el suyo sin leer los 17. */

.grupo { margin-bottom: 6px; }

.grupo-titulo {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--texto-tenue);
  margin: 4px 0 8px;
}

.grupo .opciones { margin-bottom: 14px; }

.opcion.chica { min-height: 78px; font-size: 21px; padding: 12px 14px; }

/* ------------------------------------------------------------ teclado numerico */
/* El rinde cambia todos los dias (117 / 120 / 124), asi que la cantidad se tipea.
   Es el unico numero que se carga a mano en todo el sistema. */

.contador {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--panel);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 20px;
}

.contador .valor {
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  min-height: 72px;
}

.contador .valor.vacio { color: var(--borde); }
.contador .unidad { font-size: 15px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 1px; }

.teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}

.tecla {
  min-height: 82px;
  font-family: inherit; font-size: 34px; font-weight: 800; line-height: 1;
  color: var(--texto);
  background: var(--panel-alto);
  border: 2px solid var(--borde);
  border-radius: 12px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.tecla:active { transform: scale(0.96); background: var(--acento); }
.tecla.borrar { font-size: 26px; color: var(--texto-tenue); }
.tecla.ok { background: var(--acento); border-color: var(--acento-alto); font-size: 24px; }
.tecla.ok:disabled { opacity: 0.35; background: var(--panel-alto); border-color: var(--borde); cursor: default; }

.centrado { display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; flex: 1; min-height: 0; }

/* ------------------------------------------------------------ tarjetas de tina */
/* El saladero no elige "una tina" de una lista pelada: elige mirando cuanto hace
   que esa tina espera, que es el dato del control de pH. */

.tarjeta-tina {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: var(--toque-min);
  padding: 14px 20px;
  text-align: left;
  background: var(--panel-alto);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}

.tarjeta-tina:active { transform: scale(0.99); background: var(--acento); }
.tarjeta-tina .queso { font-size: 25px; font-weight: 700; flex: 1; }
.tarjeta-tina .cant { font-size: 25px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tarjeta-tina .meta { font-size: 15px; color: var(--texto-tenue); text-align: right; min-width: 120px; }
.tarjeta-tina .meta strong { display: block; font-size: 20px; color: var(--texto); font-weight: 700; }

/* Cuanto mas espera una tina, mas visible se vuelve. */
.tarjeta-tina.demorada { border-color: var(--alerta); }
.tarjeta-tina.demorada .meta strong { color: var(--alerta); }

.columna { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; flex: 1; min-height: 0; }

.aviso { padding: 28px; text-align: center; color: var(--texto-tenue); font-size: 19px; }

/* ------------------------------------------------------------ entrada / salida */

.opcion.grande { min-height: 150px; font-size: 34px; }
.opcion.entrada:active { background: var(--acento); }
.opcion.salida:active { background: var(--salida); border-color: var(--salida-alto); }

/* Si aun asi algo desborda, que se note: el borde inferior se desvanece en vez de
   cortar en seco, que es lo que hace pensar que no hay nada mas abajo. */
.desvanece {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}

/* ------------------------------------------------------------ pedidos */

.opcion.nuevo { min-height: 78px; font-size: 21px; flex: none; margin-top: 4px; }

/* Tarjeta de pedido en la lista */
.tarjeta-pedido {
  display: flex; align-items: center; gap: 16px; width: 100%;
  min-height: var(--toque-min); padding: 14px 20px; text-align: left;
  background: var(--panel-alto); border: 2px solid var(--borde);
  border-radius: var(--radio); color: var(--texto); font: inherit; cursor: pointer;
}
.tarjeta-pedido:active { transform: scale(0.99); background: var(--acento); }
.tarjeta-pedido .cliente { font-size: 25px; font-weight: 700; flex: 1; }
.tarjeta-pedido .meta { font-size: 15px; color: var(--texto-tenue); text-align: right; min-width: 130px; }
.tarjeta-pedido .meta strong { display: block; font-size: 20px; color: var(--texto); font-weight: 700; }
.tarjeta-pedido.en-curso { border-color: var(--acento); }

.chip {
  font-size: 12px; text-transform: uppercase; letter-spacing: .7px;
  padding: 3px 9px; border-radius: 20px; background: var(--borde); color: var(--texto-tenue);
}
.chip.armando { background: var(--acento); color: #fff; }

/* Linea de pedido: queso + progreso de pesaje */
.linea {
  display: flex; align-items: center; gap: 16px; width: 100%;
  min-height: 86px; padding: 12px 20px; text-align: left;
  background: var(--panel-alto); border: 2px solid var(--borde);
  border-radius: var(--radio); color: var(--texto); font: inherit; cursor: pointer;
}
.linea:active { transform: scale(0.99); }
.linea .queso { font-size: 23px; font-weight: 700; flex: 1; }
.linea .progreso { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }
.linea .kilos { font-size: 15px; color: var(--texto-tenue); min-width: 92px; text-align: right; }
.linea.completa { border-color: var(--acento); }
.linea.completa .progreso { color: var(--acento-alto); }
/* Si se entregan mas o menos piezas de las pedidas, se ve. No se bloquea: en la
   camara puede haber 2 cuando pidieron 3, y eso es informacion, no un error. */
.linea.difiere { border-color: var(--alerta); }
.linea.difiere .progreso { color: var(--alerta); }

/* Pie con el total del pedido */
.pie-total {
  display: flex; align-items: center; gap: 22px; flex: none;
  padding: 14px 20px; background: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--radio);
}
.pie-dato { display: flex; flex-direction: column; }
.pie-dato span { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pie-dato small { font-size: 12px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .8px; }
.pie-dato.destacado span { font-size: 38px; color: var(--acento-alto); }

.btn-cerrar {
  margin-left: auto; min-height: 72px; padding: 0 32px;
  font-family: inherit; font-size: 21px; font-weight: 800; line-height: 1; color: #fff;
  background: var(--acento); border: 2px solid var(--acento-alto);
  border-radius: 12px; cursor: pointer;
}
.btn-cerrar:disabled { opacity: .35; background: var(--panel-alto); border-color: var(--borde); color: var(--texto-tenue); cursor: default; }

/* Pantalla de pesaje: teclado a la izquierda, piezas ya pesadas a la derecha */
.pesaje { display: flex; gap: 18px; flex: 1; min-height: 0; }
.pesaje-izq { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.pesaje-der {
  width: 290px; flex: none; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px 14px; min-height: 0;
}
@media (max-width: 860px) { .pesaje-der { display: none; } }

.balanza .valor { font-size: 64px; }
.balanza .valor.cero { color: var(--borde); }

.pesadas-titulo { font-size: 14px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .8px; }
.pesadas-titulo strong { font-size: 22px; color: var(--texto); }
.pesadas { flex: 1; overflow-y: auto; margin: 8px 0; min-height: 0; }
.pesada {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--borde); font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.pesada .i { color: var(--texto-tenue); font-size: 14px; min-width: 26px; }
.pesada .kg { flex: 1; font-weight: 600; }
.pesada button {
  background: transparent; border: 1px solid var(--borde); color: var(--texto-tenue);
  border-radius: 8px; min-height: 40px; min-width: 44px; font-size: 17px; cursor: pointer;
}
.pesadas-total {
  font-size: 25px; font-weight: 800; font-variant-numeric: tabular-nums;
  border-top: 2px solid var(--borde); padding-top: 9px; text-align: right;
}

.tecla.agregar { background: var(--acento); border-color: var(--acento-alto); font-size: 21px; }
.tecla.agregar:disabled { opacity: .35; background: var(--panel-alto); border-color: var(--borde); cursor: default; }

/* ------------------------------------------------------------ maduración */
/* Cuatro estados, no dos: un queso no pasa de "no apto" a "apto" de golpe.
   El color va acompañado SIEMPRE de la palabra, nunca solo: a cinco metros y con
   luz de planta, el color se pierde antes que el texto. */

.estado-chip {
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .9px;
  padding: 4px 11px; border-radius: 20px; white-space: nowrap;
}
.estado-falta  { background: var(--borde);  color: var(--texto-tenue); }
.estado-apto   { background: var(--chip-bien-fondo); color: var(--chip-bien-texto); }
.estado-optimo { background: var(--acento); color: #fff; }
.estado-pasado { background: var(--chip-mal-fondo); color: var(--chip-mal-texto); }
.estado-sin_dato { background: var(--chip-aviso-fondo); color: var(--chip-aviso-texto); }

.tarjeta-tina.optimo { border-color: var(--acento); }
.tarjeta-tina.pasado { border-color: var(--alerta); }

.tarjeta-tina .dias {
  font-size: 15px; color: var(--texto-tenue); text-align: right; min-width: 118px;
}
.tarjeta-tina .dias strong { display: block; font-size: 21px; color: var(--texto); font-weight: 700; }

.resumen-camara {
  display: flex; gap: 10px; flex-wrap: wrap; flex: none; margin-bottom: 4px;
}
.resumen-camara div {
  flex: 1; min-width: 110px; background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; padding: 9px 13px;
}
.resumen-camara .n { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; }
.resumen-camara .t { font-size: 12px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .7px; }

.aviso-provisorio {
  flex: none; background: var(--chip-aviso-fondo); color: var(--chip-aviso-texto); border: 1px solid var(--chip-aviso-borde);
  border-radius: 10px; padding: 10px 15px; font-size: 15px; line-height: 1.4;
}

/* ------------------------------------------------------------ confirmación */
/* Un operario no puede quedar 60 segundos mirando una pantalla antes de registrar
   lo siguiente. El DESHACER sigue disponible ese minuto, pero SEGUIR corta la espera. */

.acciones-confirmacion { display: flex; gap: 14px; align-items: center; margin-top: 16px; }

.btn-seguir {
  min-height: 88px; padding: 0 44px;
  font-family: inherit; font-size: 26px; font-weight: 800; line-height: 1; color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px; cursor: pointer;
}
.btn-seguir:active { background: rgba(255, 255, 255, 0.3); }

/* ------------------------------------------------------------ pallet incompleto */
/* Los litros equivalentes, debajo del numero que se esta tecleando. Es la misma idea
   que en la pantalla de envases: ver el resultado ANTES de guardar es lo que hace que
   alguien note que puso 200 donde iba 20, cuando todavia se puede arreglar. */
.equivale {
  min-height: 22px;
  font-size: 16px;
  font-weight: 600;
  color: var(--texto-tenue);
  text-align: center;
}

/* Salida discreta a proposito: la usa una minoria de los pallets y no puede competir
   visualmente con DESHACER y SEGUIR, que son lo que se toca siempre. */
/* Va sobre el VERDE de la confirmación, no sobre el panel oscuro: con --texto-tenue
   —un gris azulado pensado para fondo oscuro— quedaba casi ilegible. Blanco atenuado,
   como DESHACER y SEGUIR, que están al lado sobre el mismo verde.
   Sigue siendo discreto: lo usa una minoría de los pallets y no puede competir con los
   dos botones que se tocan siempre. */
.btn-ajustar {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  font: 600 16px system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radio);
}
.btn-ajustar:active { background: rgba(0, 0, 0, 0.3); }

/* En el paso del teclado el fondo SÍ es el oscuro de siempre, así que ahí el mismo
   botón necesita el tratamiento contrario. */
.acciones-ajuste .btn-ajustar {
  color: var(--texto);
  background: var(--panel-alto);
  border-color: var(--borde);
}
.acciones-ajuste .btn-ajustar:active { background: var(--panel); }

.acciones-ajuste {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}
.acciones-ajuste .btn-ajustar { margin-top: 0; }