/* ── TRAZA · UI de cocina ────────────────────────────────────────
   Guantes mojados, pantalla sucia, prisa. Fondo CLARO (las cocinas
   están sobreiluminadas), objetivos ≥64 px, cero hover, cero drag. */
:root{
  --bg:#F0F2F5; --panel:#FFFFFF; --ink:#14171C; --muted:#5A6068;
  --ok:#1E7A3C; --warn:#C77700; --stop:#C22B1E; --acc:#0E5FD6;
  --tap:72px; --gap:12px;
  /* superficies: borde fino + sombra en dos capas en vez de marco negro */
  --linea:#D6DBE2; --frio:#0B7285; --warn-fuerte:#9C5A00;
  --sombra:0 1px 2px rgba(20,23,28,.06),0 3px 10px rgba(20,23,28,.06);
  --sombra-baja:0 1px 1px rgba(20,23,28,.08);
  --radio:14px; --rapido:120ms; --suave:cubic-bezier(0,0,.2,1);
  font-size:18px;
}
/* IBM Plex Sans (OFL 1.1, vendor/plex): legible a distancia, cifras claras; sin CDN, precacheada por el SW */
@font-face{font-family:"Plex";src:url(/vendor/plex/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(/vendor/plex/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex";src:url(/vendor/plex/ibm-plex-sans-latin-700-normal.woff2) format("woff2");font-weight:700 800;font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font-family:inherit}   /* los controles no heredan la letra por defecto */
/* lo de dentro de un botón (icono, textos) no se lleva el toque: los manejadores leen data-* del propio botón */
button *{pointer-events:none}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Plex",system-ui,-apple-system,"Segoe UI",sans-serif;
  user-select:none;overscroll-behavior:none}

/* barra permanente: quién soy, si hay red, cuánto queda por sincronizar */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;
  background:var(--ink);color:#fff;padding:10px 14px;font-size:15px}
.bar .sp{flex:1}
.pill{border-radius:999px;padding:4px 12px;font-weight:700;font-size:14px}
.pill.on{background:var(--ok)} .pill.off{background:var(--warn)}
/* conmutador de idioma CA | ES: dos botones, el activo en claro; toque de 44 px */
.idioma{display:inline-flex;border:1px solid rgba(255,255,255,.35);border-radius:999px;overflow:hidden}
.idioma button{min-width:52px;min-height:44px;padding:0 12px;border:0;background:transparent;color:#fff;
  font-weight:700;font-size:15px;letter-spacing:.06em;opacity:.75;transition:background var(--rapido) var(--suave)}
.idioma button.activo{background:#fff;color:var(--ink);opacity:1}

main{padding:var(--gap);max-width:900px;margin:0 auto}
h1{font-size:26px;margin:6px 0 14px}

/* un botón es un botón: grande, con estado y con sonido */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tap);width:100%;margin-bottom:var(--gap);
  border:1px solid #9AA2AD;background:var(--panel);color:var(--ink);box-shadow:var(--sombra-baja);
  font-size:21px;font-weight:700;border-radius:12px;cursor:pointer;
  transition:transform var(--rapido) var(--suave)}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.stop{background:var(--stop);border-color:var(--stop);color:#fff}
.btn:focus-visible{outline:4px solid var(--acc);outline-offset:3px}

/* ── menú: panel de instrumentos ──────────────────────────────────
   Tres grupos con color propio (elaborar = azul, cámara = petróleo, autocontrol = verde).
   Mosaico = superficie blanca, pastilla con icono, título y línea de qué hay dentro.
   Rellenos solo lo que manda: las dos tareas diarias y los avisos cuando los hay. */
.menu-cab{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin:10px 2px 22px}
.menu-cab h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.015em}
.menu-cab .fecha{color:var(--muted);font-size:16px;font-weight:600}
.menu-cab .fecha::first-letter{text-transform:uppercase}
.grupo{--g:var(--acc);margin-bottom:26px}
.grupo.g_camara{--g:var(--frio)}
.grupo.g_control{--g:var(--ok)}
.grupo h2{display:flex;align-items:center;gap:10px;margin:0 0 12px 2px;font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.grupo h2::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--g)}
.mosaicos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mosaicos.dos{grid-template-columns:repeat(2,1fr)}
@media (max-width:520px){
  .mosaicos{grid-template-columns:repeat(2,1fr)}
  .mosaicos:not(.dos) > :last-child:nth-child(odd){grid-column:span 2}   /* sin huérfanos a media fila */
  .mosaicos.dos{grid-template-columns:1fr}
}
.btn.mosaico{position:relative;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:18px;
  min-height:156px;margin:0;padding:18px 18px 16px;text-align:left;line-height:1.2;
  background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);
  touch-action:manipulation;transition:transform var(--rapido) var(--suave),box-shadow var(--rapido) var(--suave)}
.btn.mosaico:active{transform:translateY(1px) scale(.99);box-shadow:var(--sombra-baja)}
.chip{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;color:var(--g);
  background:#E9EFF8;background:color-mix(in srgb,var(--g) 11%,#fff)}
.ico{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.txt{display:flex;flex-direction:column;gap:4px}
.tit{font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.sub{font-size:15px;font-weight:400;line-height:1.3;color:var(--muted)}
/* las dos tareas de cada día: rellenas */
.btn.mosaico.primary{background:linear-gradient(155deg,#1B6FE6 0%,#0B54C2 100%);border-color:#0B54C2;
  box-shadow:0 1px 2px rgba(11,84,194,.25),0 6px 16px rgba(11,84,194,.22)}
.btn.mosaico.primary .chip{background:rgba(255,255,255,.16);color:#fff}
.btn.mosaico.primary .tit{color:#fff}
.btn.mosaico.primary .sub{color:rgba(255,255,255,.9)}
/* trazabilidad: acceso de urgencia, marcado sin gritar */
.btn.mosaico.urgente{--g:var(--stop);border-color:#E7B3AD;box-shadow:inset 4px 0 0 var(--stop),var(--sombra)}
.btn.mosaico.urgente .tit{color:var(--stop)}
/* estados: pendientes en ámbar, avisos en rojo relleno */
.btn.mosaico.pendiente{--g:var(--warn-fuerte);border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn),var(--sombra)}
.btn.mosaico.alerta{background:var(--stop);border-color:var(--stop);box-shadow:0 1px 2px rgba(194,43,30,.25),0 6px 16px rgba(194,43,30,.22)}
.btn.mosaico.alerta .chip{background:rgba(255,255,255,.16);color:#fff}
.btn.mosaico.alerta .tit{color:#fff}
.btn.mosaico.alerta .sub{color:rgba(255,255,255,.92)}
.cuenta{position:absolute;top:14px;right:14px;min-width:36px;height:36px;padding:0 10px;border-radius:999px;
  display:grid;place-items:center;background:var(--warn-fuerte);color:#fff;font-size:19px;font-weight:700;
  font-variant-numeric:tabular-nums}
.btn.mosaico.alerta .cuenta{background:#fff;color:var(--stop)}
/* volver / cerrar sesión: secundario por tamaño, no por contraste. Transparente sobre --bg con
   borde --linea no se distinguía del fondo con la pantalla sucia o en ángulo. */
.btn.salir-menu{margin-top:4px;min-height:64px;background:var(--panel);border:2px solid #9AA2AD;
  color:var(--ink);font-size:18px;font-weight:700;box-shadow:var(--sombra)}
.btn.salir-menu .ico{width:22px;height:22px}
@media (prefers-reduced-motion:no-preference){
  .menu .grupo,.eleccion .grupo,.camara .grupo{animation:entra .32s var(--suave) both}
  .grupo:nth-of-type(2){animation-delay:60ms}
  .grupo:nth-of-type(3){animation-delay:120ms}
  .grupo:nth-of-type(n+4){animation-delay:160ms}
  @keyframes entra{from{opacity:0;transform:translateY(6px)}}
}

/* ── listas de elección (elegir): mismos mosaicos, más bajos, sin pastilla si no hay icono ── */
.eleccion h1{margin:10px 2px 20px;font-size:28px;letter-spacing:-.01em}
.btn.mosaico.opcion{min-height:104px;justify-content:center;gap:14px}
.btn.mosaico.opcion:has(.chip){justify-content:flex-start}
.mosaicos.dos .btn.mosaico.opcion{min-height:120px}
.chip.marca{width:auto;min-width:52px;padding:0 10px;font-size:15px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.btn.mosaico.opcion .tit{font-size:20px}

/* ── cámara: tarjetas por urgencia de caducidad (FEFO) ── */
.camara h1{margin:10px 2px 6px;font-size:28px;letter-spacing:-.01em}
.camara .lema{margin:0 2px 22px;color:var(--muted);font-size:16px}
.grupo.tramo-0{--g:var(--stop)} .grupo.tramo-1{--g:var(--warn)}
.grupo.tramo-2{--g:var(--ok)} .grupo.tramo-3{--g:#8A919B}
.grupo h2 .n{margin-left:2px;padding:1px 9px;border-radius:999px;background:#E2E6EC;color:var(--ink);
  letter-spacing:0;font-variant-numeric:tabular-nums}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tarjeta-lote{display:flex;flex-direction:column;gap:6px;padding:16px 16px 14px;background:var(--panel);
  border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra)}
.tarjeta-lote .cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tarjeta-lote .tit{font-size:19px;line-height:1.25}
.tarjeta-lote .fefo{flex:none;padding:3px 11px;border-radius:999px;font-size:15px;font-weight:700;
  background:#EEF1F4;background:color-mix(in srgb,currentColor 11%,#fff)}
.tarjeta-lote .sub{font-size:15px;font-variant-numeric:tabular-nums}
/* Lo que queda: el dato que se busca en la cámara, legible a un brazo de distancia. */
.tarjeta-lote .queda{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:6px;margin:2px 0 0}
.tarjeta-lote .queda .cifra{font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tarjeta-lote .queda .uni{font-size:24px;font-weight:600;line-height:1.1}
.tarjeta-lote .queda .etq{font-size:15px;margin-left:4px}
/* Una cantidad dentro de un rótulo en versalitas: el símbolo de unidad conserva su caja (g, kg, ml). */
.cant{text-transform:none;letter-spacing:normal;font-variant-numeric:tabular-nums}
.tarjeta-lote .marcas{display:flex;flex-wrap:wrap;gap:6px}
.tarjeta-lote .acciones{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:10px}
.tarjeta-lote .mini{margin:0;min-width:0;min-height:56px;border:1px solid #AEB5BF;border-radius:10px;
  font-size:17px;font-weight:600;color:var(--ink);touch-action:manipulation}
.tarjeta-lote .mini:active{background:#EEF1F4}
.tarjeta-lote.t0{border-color:#E7B3AD;box-shadow:inset 4px 0 0 var(--stop),var(--sombra)}
/* ── listas de pantalla (líneas, ingredientes, pasos, controles, traza, avisos): tarjetas en cuadrícula ──
   Texto y estado arriba; los botones bajan a una fila propia a lo ancho (::after rompe la línea). */
.lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:6px}
.lista li{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;min-height:0;
  padding:14px 16px;background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);font-size:18px;line-height:1.3}
.lista li > span:first-of-type{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
.lista li:has(> button)::after{content:"";flex-basis:100%;order:1;height:0}
.lista li > button{order:2;flex:1 1 0;margin:0;min-width:0}
.lista li > .mini{min-height:54px;border:1px solid #AEB5BF;border-radius:10px;font-weight:600}
.lista li > .mini.primary{border-color:var(--acc)}
.lista li > .fefo{margin-left:0;font-size:15px;padding:3px 11px;border-radius:999px;
  background:#EEF1F4;background:color-mix(in srgb,currentColor 11%,#fff)}
.lista li > span.k{font-size:13px}
.lista li.k,.lista li.sem{grid-column:1/-1;justify-content:center;box-shadow:none;border-style:dashed;color:var(--muted)}
.lista .foto-mini{flex:none}
/* pasos y controles del lote: van en orden, se numeran */
#pasos,#pcc{counter-reset:paso}
#pasos li::before,#pcc li::before{counter-increment:paso;content:counter(paso);order:-1;flex:none;
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#E9EFF8;color:var(--acc);
  font-size:15px;font-weight:700}
/* encabezados de sección dentro de una pantalla, como los de los grupos del menú */
h3{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;letter-spacing:.1em;font-size:13px;margin:24px 2px 12px}
h3::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--acc)}
h3 small.k{letter-spacing:.04em;font-weight:400;text-transform:none;font-size:13px}
/* acciones de una pantalla: en fila, no apiladas */
.acciones-pantalla{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0 6px}
.acciones-pantalla .btn{margin:0}
.acciones-pantalla .ico{width:26px;height:26px}
/* estado de un proceso (cronómetro retomado): pastilla + desde qué hora */
.estado-proc{margin:8px 0 0;color:var(--muted);font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.estado-pill{padding:2px 10px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.estado-pill.en-proceso{background:#FBF0DC;color:var(--warn-fuerte)}
/* mosaico de un proceso en marcha: pastilla con punto que late + barra de avance con franjas que se mueven.
   Verde en plazo, ámbar los últimos 30 min, rojo fuera de plazo. Con "reducir movimiento" se queda quieto. */
.btn.mosaico.en-marcha{border-color:#A9CBF3;overflow:hidden;padding-bottom:24px}
.pill-estado{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:7px;padding:4px 11px;
  border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#E3F1E7;color:var(--ok)}
.pill-estado.warn{background:#FBF0DC;color:var(--warn-fuerte)}
.pill-estado.stop{background:#FBE4E2;color:var(--stop)}
.pill-estado .punto{width:9px;height:9px;border-radius:50%;background:currentColor;animation:late 1.4s ease-in-out infinite}
@keyframes late{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}
.barra-proc{position:absolute;left:0;right:0;bottom:0;height:9px;background:#E6EAF0}
.barra-proc > span{display:block;height:100%;background-color:var(--ok);transition:width .6s var(--suave);
  background-image:linear-gradient(45deg,rgba(255,255,255,.38) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.38) 50%,rgba(255,255,255,.38) 75%,transparent 75%);
  background-size:18px 18px;animation:avanza .9s linear infinite}
.barra-proc.warn > span{background-color:var(--warn)}
.barra-proc.stop > span{background-color:var(--stop)}
@keyframes avanza{from{background-position:0 0}to{background-position:18px 0}}
.vacio{padding:28px;text-align:center;color:var(--muted);background:var(--panel);border:1px dashed var(--linea);border-radius:var(--radio)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.card{background:var(--panel);border:1px solid #D3D7DE;border-radius:10px;padding:14px;margin-bottom:var(--gap)}
.k{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.v{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}

/* teclado numérico: nunca teclado alfanumérico en cocina */
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.numpad button{min-height:var(--tap);font-size:28px;font-weight:700;
  border:2px solid #C7CCD4;background:#fff;border-radius:10px}
.display{font-size:52px;font-weight:800;text-align:right;padding:12px 16px;
  background:#fff;border:2px solid var(--ink);border-radius:10px;margin-bottom:var(--gap);
  font-variant-numeric:tabular-nums}

/* teclado de códigos (lotes, albaranes): alfabeto cerrado A–Z 0–9 - / . y nunca el
   teclado del sistema. 7 columnas de letras: en 800 px salen teclas de ~100 × 72. */
.display.codigo{text-align:left;font-family:ui-monospace,Consolas,monospace;letter-spacing:.04em;
  overflow-wrap:anywhere;line-height:1.15;min-height:calc(52px * 1.15 + 28px)}
.display.codigo.vacio{font-family:inherit;font-size:22px;font-weight:600;letter-spacing:0;color:var(--muted);
  display:flex;align-items:center}
.teclado-codigo{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:10px}
.teclado-codigo.n123{grid-template-columns:repeat(3,1fr)}
.fila-codigo{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:var(--gap)}
.teclado-codigo button,.fila-codigo button{min-height:var(--tap);font-size:28px;font-weight:700;color:var(--ink);
  border:2px solid #C7CCD4;background:#fff;border-radius:10px;touch-action:manipulation}
.teclado-codigo button:active,.fila-codigo button:active{background:#EEF1F4}
.fila-codigo .modo{background:var(--ink);color:#fff;border-color:var(--ink);font-size:22px}
.fila-codigo .modo:active{background:#3A4049}
.fila-codigo .peq{font-size:17px}
.btn.ok[aria-disabled="true"]{opacity:.45}

/* semáforo: color + FORMA + texto (nunca sólo color) */
.sem{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;padding:12px;border-radius:10px}
.sem.ok{background:#E4F3E8;color:var(--ok);border:2px solid var(--ok)}
.sem.warn{background:#FBF0DC;color:var(--warn);border:2px solid var(--warn)}
.sem.stop{background:#FBE4E2;color:var(--stop);border:2px solid var(--stop)}
/* Retirada sin notificar a la autoridad: en texto además de en color (guantes, prisa, daltonismo). */
.pendiente-autoridad{color:var(--stop);font-weight:800}

/* vista previa de etiquetas: el iframe va a tamaño real y se escala desde app.js */
.previa-marco{overflow:hidden;background:#DADDE2;border-radius:8px;margin-top:8px}
.previa-marco iframe{display:block;border:0;background:#fff;transform-origin:0 0}

/* cronómetro de abatimiento: legible a 3 metros */
.crono{font-size:96px;font-weight:900;text-align:center;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;margin:20px 0}
.crono.aviso{color:var(--warn)}
.crono.alarma{color:var(--stop)}
/* antesala del abatimiento: el botón que pone el reloj en marcha, el más grande de la pantalla */
.btn.iniciar-crono{min-height:112px;font-size:26px;margin-top:var(--gap)}

.lista{list-style:none;padding:0}
.lista .fefo{font-weight:800}
.dias-0{color:var(--stop)} .dias-1{color:var(--warn)} .dias-n{color:var(--ok)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── añadidos de las pantallas P2–P7 ───────────────────────────── */
h3{text-transform:uppercase;color:var(--muted);font-weight:700}
.mini{min-height:52px;min-width:96px;margin-left:auto;border:2px solid var(--ink);
  background:#fff;border-radius:8px;font-size:16px;font-weight:700;padding:0 12px}
.mini.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.tagmini{background:var(--ink);color:#fff;font-size:12px;padding:2px 8px;border-radius:999px;
  letter-spacing:.04em;text-transform:uppercase}
.lista small.k{font-weight:400}
.card p{margin:10px 0 0;font-size:16px}
.card .v + p{margin-top:6px}

/* Aviso flotante: legible sin tener que mirar fijo. */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:16px 22px;border-radius:10px;
  font-size:18px;font-weight:700;z-index:50;max-width:92vw;text-align:center;
  box-shadow:0 8px 28px rgba(0,0,0,.28)}
.toast.stop{background:var(--stop)} .toast.warn{background:var(--warn)}

/* Lote con código provisional (S009): chip ámbar junto al código. */
.prov{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 10px;border-radius:999px;
  background:#FBF0DC;color:var(--warn);border:2px solid var(--warn);font-size:14px;font-weight:800;
  letter-spacing:.02em}

/* Fotos del catálogo: miniatura en las listas y vista a pantalla completa. */
.foto-mini{width:56px;height:56px;flex:0 0 56px;object-fit:cover;border-radius:8px;
  background:#E6E9EE;cursor:pointer}
.foto-mini.sin-foto{cursor:default}
.lote-cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lote-cab h1{min-width:0}
.foto-mini.foto-plato{width:96px;height:96px;flex-basis:96px;border-radius:10px}
.foto-vista{position:fixed;inset:0;z-index:40;background:rgba(10,12,16,.94);
  display:flex;flex-direction:column;padding:12px}
.foto-vista-cab{display:flex;align-items:center;gap:12px;color:#fff;font-size:19px;font-weight:700;
  margin-bottom:12px}
.foto-vista img{flex:1;min-height:0;width:100%;object-fit:contain}
video{margin-bottom:var(--gap)}

/* Login: cada operario con su foto (o sus iniciales) en un círculo a la izquierda. */
.btn.op-login{justify-content:flex-start;gap:16px;padding:8px 16px;text-align:left}
.op-login .op-avatar{position:relative;flex:0 0 56px;width:56px;height:56px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.22);
  border:2px solid rgba(255,255,255,.7);color:#fff;font-size:20px;font-weight:800}
.op-login .op-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.op-login .op-nombre{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ── guiado por el diagrama de flujo (skill guiado-proceso) ──────────
   Una sola cosa grande: la tarjeta "Ahora toca" con un único botón; debajo,
   las entradas y el diagrama como un raíl: verde lo hecho, azul lo de ahora,
   gris lo de después. */
.btn[hidden]{display:none}
.ahora{position:relative;margin:4px 0 8px;padding:18px 18px 22px;background:var(--panel);
  border:1px solid #A9CBF3;border-radius:var(--radio);box-shadow:inset 5px 0 0 var(--acc),var(--sombra);overflow:hidden}
.ahora-etapa{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.ahora-cuerpo{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.ahora .chip{--g:var(--acc);flex:none;width:60px;height:60px;border-radius:14px}
.ahora .chip .ico{width:32px;height:32px}
.ahora-titulo{font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.01em;overflow-wrap:anywhere}
.ahora-sub{margin-top:4px;font-size:16px;color:var(--muted)}
.ahora-aviso{margin:-4px 0 14px;padding:10px 12px;border-radius:10px;font-size:16px;font-weight:600;
  background:#FBF0DC;color:var(--warn-fuerte);border:1px solid #EBC889}
.ahora .btn{margin-bottom:10px}
.ahora .btn.primary{min-height:80px;font-size:22px}
.ahora .btn .ico{width:28px;height:28px}
.ahora-barra{position:absolute;left:0;right:0;bottom:0;height:6px;background:#E6EAF0}
.ahora-barra i{display:block;height:100%;background:var(--ok);transition:width .4s var(--suave)}
.ahora.fin{border-color:#A8D5B5;box-shadow:inset 5px 0 0 var(--ok),var(--sombra)}
.ahora.fin .ahora-etapa{color:var(--ok)}
.ahora.fin .chip{--g:var(--ok)}
@media (prefers-reduced-motion:no-preference){ .ahora{animation:entra .28s var(--suave) both} }

/* entradas: la que falta por recibir, marcada en ámbar */
#ing li.falta{border-color:#EBC889;box-shadow:inset 4px 0 0 var(--warn),var(--sombra)}

/* el diagrama: una columna, cada paso pegado al siguiente como un raíl */
.lista.mapa{display:flex;flex-direction:column;gap:0}
.lista.mapa li{border-radius:0;box-shadow:none;margin-top:-1px}
.lista.mapa li:first-child{border-radius:var(--radio) var(--radio) 0 0;margin-top:0}
.lista.mapa li:last-child{border-radius:0 0 var(--radio) var(--radio)}
#pasos.mapa li.hecho::before{content:"\2713";background:#E3F1E7;color:var(--ok)}
.lista.mapa li.ahora-paso{position:relative;z-index:1;border-color:#A9CBF3;background:#F3F7FE;box-shadow:inset 5px 0 0 var(--acc)}
#pasos.mapa li.ahora-paso::before{background:var(--acc);color:#fff}
.lista.mapa li.ahora-paso > span:first-of-type{font-weight:700}
.lista.mapa li.despues > span:first-of-type{color:var(--muted)}
#pasos.mapa li.despues::before{background:#EEF1F4;color:var(--muted)}
.lista.mapa small.quien{color:var(--ok);font-weight:600}
.pill-ahora{padding:3px 11px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:var(--acc);color:#fff}

/* "En marcha": el código del lote debajo del paso en el que va */
.btn.mosaico .sub2{font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums;opacity:.8}

/* ── Marca del establecimiento ─────────────────────────────────────
   Solo en el login (logo, nombre, lema y los botones de operario en su color)
   y un icono pequeño en la barra. Las pantallas de tarea no cambian: --acc,
   ok/warn/stop siguen siendo los de cocina. Las tintas --marca-sobre-* las
   calcula js/marca.js por contraste (texto sobre dorado: oscuro). */
.bar-logo{width:32px;height:32px;border-radius:8px;object-fit:cover;flex:none;background:#fff}
.login-marca{display:flex;flex-direction:column;align-items:center;gap:8px;margin:6px 0 22px;padding:20px 16px 18px;
  background:var(--marca-fondo);color:var(--marca-sobre-fondo);border:1px solid var(--linea);
  border-bottom:4px solid var(--marca-2);border-radius:var(--radio);box-shadow:var(--sombra);text-align:center}
.login-logo{display:block;width:min(240px,62vw);height:auto;max-height:240px;object-fit:contain}
.login-nombre{font-size:36px;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.login-lema{margin:0;font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.con-marca .login .btn.primary.op-login{background:var(--marca-1);border-color:var(--marca-1);color:var(--marca-sobre-1)}
.con-marca .login .op-login .op-avatar{border-color:var(--marca-2);color:inherit}
.pie-traza{margin:20px 0 6px;text-align:center;font-size:13px;color:var(--muted);letter-spacing:.02em}