/* Etapa 2 de la transformacion (2026-10-25): rediseño de cocina. Solo reglas de esta pantalla.
 *
 * Tablero de cocina: se lee a un metro. Tickets ordenados por espera (el orden lo manda el
 * servidor y NUNCA se mueve solo), el tiempo es lo grande, el plato y la cantidad mas grandes
 * todavia. La urgencia escala por FORMA ademas de color: nada (menos de 10 min), borde grueso + punto
 * + «Va tarde» (10 a 19), banda con trama + triangulo + «Muy tarde» (20 o mas).
 * Un solo encabezado: la banda de la app ya dice «Cocina» y la marca; la franja de la pantalla
 * solo carga lo que es de cocina (el contador y los botones). Con el rol `cocina` no hay banda de
 * la app, y ahi la franja vuelve a llevar la marca. */

/* ---- Franja: un solo encabezado ---- */
body:not(.rol-cocina) .cocina__marca{ display:none; }
.cocina__franja{
  position:static; gap:var(--sp-2) var(--sp-3); padding:var(--sp-3) var(--sp-3) var(--sp-2);
  background:transparent; border-bottom:0;
}
body.rol-cocina .cocina__franja{ position:sticky; background:var(--surface); border-bottom:1px solid var(--line); }
.cocina__pendientes{
  flex:1 1 100%; min-width:0; font-family:var(--font-marca); font-size:22px; line-height:1.15; color:var(--ink-2);
}
.cocina__pendientes b{ font-size:44px; font-weight:600; color:var(--ink); line-height:1; margin-right:2px; }
.cocina__comandas{ font-family:var(--font-sis); font-size:15px; color:var(--ink-3); }
.cocina__pendientes--sin-red{ font-family:var(--font-sis); font-size:16px; font-weight:700; }
.cocina__pendientes--sin-red::before{ content:'▲ '; }
.cocina__acciones{ display:flex; gap:var(--sp-2); flex-wrap:wrap; width:100%; }
.cocina__btn{ min-height:48px; padding:0 var(--sp-4); font-size:15px; flex:1 1 0; }
.cocina__acusar{ width:100%; margin:0; }
.cocina__sin-acusar{
  display:inline-block; padding:6px 12px; border:2px solid var(--marca-accion); border-radius:var(--r-pill);
  color:var(--marca-ink); background:var(--marca-tenue); font-size:15px; font-weight:700;
}
.cocina__sin-acusar::before{ content:'● '; }

/* ---- Cuerpo y grilla ---- */
.cocina__cuerpo{ padding:var(--sp-2) var(--sp-3) 120px; }
.cocina__grilla{ grid-template-columns:1fr; gap:var(--sp-4); }
.comanda--primera{ grid-column:auto; }
@media (min-width:700px){
  .cocina__grilla{ grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); }
}
@media (min-width:1000px){
  .cocina__cuerpo{ padding:var(--sp-3) var(--sp-5) 48px; }
  .cocina__franja{ padding:var(--sp-3) var(--sp-5) var(--sp-2); flex-wrap:nowrap; align-items:flex-end; }
  .cocina__pendientes{ flex:1 1 auto; }
  .cocina__acciones{ width:auto; flex-wrap:nowrap; }
  .cocina__btn{ flex:0 0 auto; }
  .cocina__acusar{ width:auto; }
}

/* ---- El ticket ---- */
.comanda{
  border-radius:var(--r-md); border:1px solid var(--line-fuerte); box-shadow:none;
  border-left:8px solid var(--line-fuerte);
}
.comanda--ambar{ border-color:var(--flaco-ink); border-left:12px solid var(--flaco-ink); }
.comanda--rojo{ border-color:var(--neg); border-left:12px solid var(--neg); }
.comanda__cab{
  padding:var(--sp-3) var(--sp-4) var(--sp-2);
  display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:var(--sp-3); row-gap:2px;
}
.comanda__rotulo{ grid-column:1; grid-row:1; margin:0; font-family:var(--font-marca); font-size:30px; font-weight:600; line-height:1.1; }
.comanda__canal{ font-family:var(--font-sis); font-size:12px; }
.comanda__reloj{ grid-column:2; grid-row:1 / span 2; text-align:right; display:flex; flex-direction:column; align-items:flex-end; }
.comanda__hora{ grid-column:1; grid-row:2; font-size:13px; color:var(--ink-3); }
.comanda__tiempo{ font-size:56px; font-weight:600; line-height:1; }
.comanda__tiempo small{ font-size:16px; }
.comanda--primera .comanda__tiempo{ font-size:56px; }
.comanda__urg{ min-height:1.2em; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.comanda--ambar .comanda__urg{ color:var(--flaco-ink); }
.comanda--rojo .comanda__urg{ color:var(--neg); }
.comanda--ambar .comanda__cab{ background:color-mix(in srgb, var(--flaco) 14%, transparent); }
.comanda--rojo .comanda__cab{ border-top:0; }
.comanda--ambar .comanda__tiempo::before,
.comanda--rojo .comanda__tiempo::before{ font-size:.4em; }

/* Platos: cantidad y producto enormes; todo el renglon se toca (ya era asi). */
.comanda__lineas{ padding:var(--sp-2) var(--sp-2) 0; }
.comanda__linea{
  min-height:64px; font-size:28px; line-height:1.15; font-weight:600; gap:var(--sp-3);
  border:1px solid var(--line); background:var(--paper); padding:var(--sp-2) var(--sp-3);
}
.comanda__linea::after{
  content:''; flex:0 0 32px; width:32px; height:32px; margin-left:auto; border-radius:50%;
  border:3px solid var(--line-fuerte); box-sizing:border-box; align-self:center; order:3;
}
.comanda__prod{ flex:1; min-width:0; overflow-wrap:anywhere; }
.comanda__cant{
  font-size:36px; line-height:1; min-width:1.5em; flex:0 0 auto; color:var(--ink); text-align:center;
  padding:2px 4px; border-radius:var(--r-sm); background:var(--paper-2);
}
.comanda__cant::before{ content:'×'; font-size:.55em; font-weight:600; color:var(--ink-3); margin-right:1px; }
.comanda__linea--lista{ background:transparent; border-style:dashed; font-weight:500; }
.comanda__linea--lista .comanda__cant::before{ content:'×'; color:var(--ink-3); display:inline; }
.comanda__linea--lista::after{
  content:'✓'; background:var(--pos); border-color:var(--pos); color:var(--paper);
  font-size:20px; font-weight:800; line-height:26px; text-align:center; text-decoration:none;
}
.comanda__linea--lista .comanda__cant{ background:transparent; }
.comanda__nota{ font-size:18px; margin-top:4px; }
.comanda__nota-orden{ margin:var(--sp-2) var(--sp-2) 0; font-size:18px; border-left-width:6px; }

/* Pasos de la comanda: acuse y «ya lo estoy haciendo» lado a lado, 48 px. */
.comanda__pasos{ display:flex; gap:var(--sp-2); flex-wrap:wrap; padding:0 var(--sp-2); margin-top:var(--sp-2); }
.comanda__pasos > *{ flex:1 1 140px; margin:0; }
.comanda__recibida, .comanda__proceso{ min-height:48px; padding:0 var(--sp-3); font-size:16px; width:auto; }
.comanda__estado{
  min-height:48px; display:flex; align-items:center; justify-content:center; gap:6px;
  border:2px solid var(--pos); border-radius:var(--radio); color:var(--pos);
}
.comanda__estado::before{ content:'●'; font-size:.7em; }
.comanda__entregado{ margin:var(--sp-2); min-height:64px; font-size:22px; border-radius:var(--r-sm); }
.comanda__entregado small{ font-size:18px; }
.comanda--sin-acusar .comanda__cab{ box-shadow:inset 0 -4px 0 var(--marca-accion); }

/* Que el foco por teclado se vea en los renglones (la mesada puede tener un teclado). */
.comanda__linea:focus-visible, .comanda__entregado:focus-visible, .cocina__btn:focus-visible{
  outline:3px solid var(--marca-accion); outline-offset:2px;
}

/* ---- Estado vacio: Todo despachado ---- */
.cocina__vacio{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); text-align:center;
  padding:var(--sp-9) var(--sp-4); color:var(--ink-2); font-family:var(--font-sis); font-size:16px;
}
.cocina__vacio-sello{
  width:88px; height:88px; border-radius:50%; display:grid; place-items:center;
  font-size:48px; font-weight:800; color:var(--marca-ink); background:var(--marca-tenue);
  border:3px solid var(--marca-accion);
}
.cocina__vacio-titulo{ margin:0; font-family:var(--font-marca); font-size:44px; font-weight:600; line-height:1.1; color:var(--ink); }
.cocina__vacio-ultimo{ margin:0; max-width:34ch; font-size:18px; line-height:1.4; color:var(--ink-2); }
.cocina__vacio-ultimo b{ color:var(--ink); }
.cocina__vacio-aviso{ margin:0; max-width:36ch; font-size:16px; font-weight:700; color:var(--neg); }
.cocina__vacio-aviso::before{ content:'▲ '; }
.cocina__vacio--viejo .cocina__vacio-sello{ border-style:dashed; color:var(--neg); background:transparent; border-color:var(--neg); }
.cocina__vacio--viejo .cocina__vacio-sello{ font-size:0; }
.cocina__vacio--viejo .cocina__vacio-sello::before{ content:'?'; font-size:48px; }
.cocina__vacio--viejo .cocina__vacio-ultimo{ display:none; }

/* Tira de deshacer: arriba del menu inferior en celular. */
.cocina__deshacer{ bottom:84px; }
@media (min-width:1000px){ .cocina__deshacer{ bottom:0; } }
body.rol-cocina .cocina__deshacer{ bottom:0; }
.cocina__tira{ font-size:16px; }
.cocina__btn--tira{ min-height:48px; flex:0 0 auto; }

@media (prefers-reduced-motion: reduce){
  .cocina__pendientes--late, .comanda--nueva{ animation:none; }
}

/* [hidden] no esconde contra una clase con display propio: «Recibida» solo existe en la comanda
   que nadie reconocio todavia, y antes se veia SIEMPRE en todas. */
.comanda__recibida[hidden], .cocina__acusar[hidden], .cocina__deshacer[hidden]{ display:none !important; }

/* Fase 6.88: la estacion elegida se nota en el boton, para que nadie crea que ve todo cuando no. */
.cocina__btn--activo{ border-color:var(--marca); color:var(--marca); font-weight:700; }