/*
 * Pantalla de cocina (KDS) — 2026-09-26, rediseñada el 2026-10-08.
 *
 * Las reglas son del OFICIO, no de estética. Salen de la escena de uso: una pantalla encendida
 * doce horas, mirada a metro y medio o más, de reojo, por alguien con las manos ocupadas.
 *
 * 1. **Se lee de lejos.** Tipografía grande, alto contraste, y nada de gris sobre gris.
 * 2. **Nada depende de `:hover`.** Se toca con el dorso del dedo sobre una pantalla con grasa:
 *    todo lo tocable mide 48 px o más y su estado se ve SIN pasar el mouse.
 * 3. **El color dice el tiempo.** Verde, ámbar y rojo son los umbrales de la estación, no
 *    decoración. Y nunca van solos: llevan el reloj y la palabra al lado, porque un daltónico
 *    también cocina y porque un color sin nombre hay que aprenderlo.
 * 4. **El tiempo es el dato principal.** Es lo que decide qué se cocina ahora, así que es el
 *    número más grande de la tarjeta. Antes era el más chico.
 */

.co-pantalla {
    --co-fondo:   #0f1319;
    --co-tarjeta: #1b212b;
    --co-honda:   #151a22;          /* un escalón más honda que la tarjeta: listas y campos */
    --co-borde:   #2c3542;
    --co-texto:   #eef2f7;
    --co-suave:   #97a3b4;

    /* Los tres tiempos. Medidos contra `--co-tarjeta`: 8,2:1 y 6,4:1 — por encima del 4,5:1
       que pide el texto normal, que acá es el piso y no la meta. */
    --co-ok:      #2fc770;
    --co-aviso:   #ffb547;
    --co-alarma:  #ff5c5c;

    /* ⚠ El AZUL de «en preparación» (Mario, 2026-10-08). Antes ese estado no tenía color: la
       cabecera quedaba gris, igual que el fondo de la tarjeta, y una comanda recién entrada se
       leía como «sin estado» en vez de como «esta va bien de tiempo». Con los cuatro colores,
       la fila de cabeceras cuenta sola cómo va la cocina de un vistazo.
       ⚠ Azul y no otro: es el único tono que no compite con el semáforo —verde, ámbar, rojo
       ya significan tiempo— y que por costumbre se lee como «en curso», no como aviso. */
    --co-prep:    #4da3ff;

    /* ⚠ El texto que va ENCIMA de esos colores es oscuro, no blanco: sobre el ámbar, el blanco
       da 1,9:1 y es ilegible a dos metros. Este tono da 9:1 contra los tres. */
    --co-sobre:   #10141a;

    /* ⚠ `personalizados.css` tiene un `body { display: grid; place-items: center }` GLOBAL, y
       esta pantalla no usa ese layout. Hay que deshacer las DOS cosas, no solo el `display`:
       `place-items: center` deja `justify-items: center`, y Chrome ya honra la alineación
       también en contenedores de BLOQUE, así que cada hijo se encoge a su contenido y se centra
       igual. Medido a 1280 px con solo `display: block`: la barra ocupaba 949 px y el tablero
       440, con las comandas en UNA columna y media pantalla vacía. No es cosmético: es la
       diferencia entre ver tres comandas y ver doce. */
    display: block;
    place-items: stretch;

    margin: 0;
    min-height: 100dvh;                 /* ⚠ `dvh` y no `vh`: en el teléfono la barra del
                                           navegador se come lo que `vh` promete. */
    background: var(--co-fondo);
    color: var(--co-texto);

    /* ⚠ Los dígitos de ANCHO FIJO son obligatorios acá, no un gusto: el reloj de cada comanda
       se repinta cada segundo y con cifras de ancho variable el número entero baila de lado a
       lado. En una pantalla que se mira de reojo, ese temblor es lo único que se nota. */
    font-variant-numeric: tabular-nums;
}

/* Las superficies del navegador también son parte del diseño. */
.co-pantalla ::selection { background: var(--co-ok); color: var(--co-sobre); }
.co-pantalla :focus-visible { outline: 3px solid var(--co-ok); outline-offset: 3px; }
.co-pantalla * { scrollbar-width: thin; scrollbar-color: var(--co-borde) transparent; }
.co-pantalla *::-webkit-scrollbar { width: 10px; height: 10px; }
.co-pantalla *::-webkit-scrollbar-thumb { background: var(--co-borde); border-radius: 6px; }
.co-pantalla *::-webkit-scrollbar-track { background: transparent; }

/* ── La barra ────────────────────────────────────────────────────────────────────────────── */

.co-barra {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: #0a0d12;
    border-bottom: 1px solid var(--co-borde);
}

.co-marca { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.co-marca i { font-size: 28px; color: var(--co-ok); }

.co-estaciones { display: flex; gap: 8px; flex-wrap: wrap; }

.co-estaciones button {
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid var(--co-borde);
    border-radius: 10px;
    background: var(--co-tarjeta);
    color: var(--co-texto);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

.co-estaciones .co-activa { background: var(--co-ok); border-color: var(--co-ok); color: var(--co-sobre); }

/* El contador de pendientes: la respuesta a «¿cuánto falta?» sin contar tarjetas. */
.co-contador {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-left: auto;
    color: var(--co-suave);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.co-contador strong { font-size: 34px; font-weight: 700; color: var(--co-texto); letter-spacing: -.02em; }

.co-derecha { display: flex; align-items: center; gap: 10px; }

.co-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--co-borde);
    border-radius: 10px;
    background: var(--co-tarjeta);
    color: var(--co-suave);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.co-chip[aria-pressed="true"] { color: var(--co-ok); border-color: var(--co-ok); }
.co-chip i { font-size: 20px; }

.co-hora { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }

/* El pulso de «sigo vivo»: una pantalla de pared congelada se ve igual que una al día. */
/* El pulso de «sigo vivo». ⚠ Es un PUNTO y no una segunda hora: junto al reloj grande, otra
   hora en chiquito —y en formato de 12 horas— se leía como si dijera algo distinto. */
.co-latido { font-size: 13px; color: var(--co-suave); text-align: right; }
.co-vivo   { color: var(--co-ok); font-size: 18px; line-height: 1; }
.co-caido  { color: var(--co-alarma); font-weight: 700; }

.co-salir {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--co-borde);
    border-radius: 10px;
    color: var(--co-suave);
    font-size: 22px;
    text-decoration: none;
}

/* ── El cuerpo: tablero + la columna de lo que falta ─────────────────────────────────────── */

.co-cuerpo {
    display: grid;
    grid-template-columns: 1fr 320px;
    align-items: start;
    gap: 16px;
    padding: 16px 20px 24px;
}

/* ⚠ Las tres piezas van a una CELDA FIJA, no al flujo automático del grid. El tablero y el
   cartel de «Todo al día» comparten la celda de la izquierda —nunca se ven los dos a la vez,
   porque el cartel sale justo cuando no hay comandas— y la columna de pendientes se queda
   SIEMPRE en la de la derecha.

   Sin esto, el cartel de vacío ocupaba las dos columnas (`grid-column: 1 / -1`) y empujaba la
   columna de pendientes a una segunda fila, a todo lo ancho: medido el 2026-10-08 con el
   tablero vacío, 1064 px de ancho y pegada abajo, que es como la reportó Mario. El caso vacío
   es justamente el que no se mira al construir, y en esta pantalla es el estado normal entre
   servicios. */
.co-tablero    { grid-column: 1; grid-row: 1; }
.co-vacio      { grid-column: 1; grid-row: 1; }
.co-pendientes { grid-column: 2; grid-row: 1; }

/* ⚠ Columnas con `columns` y no un grid: las comandas tienen alturas muy distintas —una de dos
   líneas y otra de nueve— y un grid deja huecos del alto de la tarjeta más alta de cada fila.
   Con columnas de texto se apilan sin aire muerto, que en una pantalla de pared es la
   diferencia entre ver ocho comandas y ver cinco. */
.co-tablero {
    /* ⚠ `min-width: 0` en un grid item con columnas adentro. El valor por defecto es `auto`,
       que significa «no te encojas por debajo de tu contenido»: con una tarjeta ancha el
       tablero empujaba el grid y aparecía desplazamiento lateral en toda la pantalla. */
    min-width: 0;

    /* ⚠ 320 y no 360: con el botón de línea convertido en ícono la tarjeta dejó de necesitar
       ancho, y a 1440 px la diferencia es entre DOS columnas de 530 —media tarjeta de aire a la
       derecha de cada plato— y TRES de 343. En el televisor de 1920 para el que está pensada
       la pantalla, cuatro. Medido, no estimado. */
    columns: 320px;
    column-gap: 16px;
}

.co-comanda {
    break-inside: avoid;
    margin: 0 0 16px;
    border: 1px solid var(--co-borde);
    border-radius: 14px;
    background: var(--co-tarjeta);
    overflow: hidden;
    /* Sombra con desplazamiento y desenfoque: apoya la tarjeta sobre el fondo en vez de
       rodearla de un halo. */
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

/* ⚠ Una comanda que ENTRA se anuncia. Es el único movimiento de la pantalla, y existe porque
   en una cocina nadie está mirando el monitor cuando llega el pedido: la tarjeta crece desde
   su sitio con una salida exponencial, que es lo que el ojo periférico detecta.

   ⚠ SOLO con `.co-nueva`, que el JS le pone únicamente a las que llegaron en ese ciclo. Sin
   esa condición se animaban TODAS en cada refresco —el tablero se rehace entero— y el efecto
   dejaba de ser un aviso para convertirse en un parpadeo cada pocos segundos; que es
   exactamente lo que Mario reportó el 2026-10-08. Un movimiento que ocurre siempre no avisa
   de nada. */
@keyframes co-entra {
    from { transform: scale(.96); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.co-nueva { animation: co-entra .28s cubic-bezier(.16, 1, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
    .co-nueva { animation: none; }
}

/* ── La cabecera: el color ES el estado, y lleva su palabra ──────────────────────────────── */

/* ⚠ Cabecera SÓLIDA y no un borde lateral de color. El filito de 4 px se ve a medio metro y
   desaparece a dos: en la pared la tarjeta tiene que decir su urgencia con un bloque de color
   del ancho entero. */
.co-cab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--co-prep);
    color: var(--co-sobre);
}

.co-num   { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.co-rotulo { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.co-tiempo { margin-left: auto; font-size: 30px; font-weight: 800; letter-spacing: -.03em; }

/* Los tres tonos. El texto va oscuro encima: ver `--co-sobre`. */
.co-t-aviso  .co-cab { background: var(--co-aviso);  color: var(--co-sobre); }
.co-t-alarma .co-cab { background: var(--co-alarma); color: var(--co-sobre); }
.co-lista    .co-cab { background: var(--co-ok);     color: var(--co-sobre); }

/* ⚠ Y la alarma además LATE. El rojo quieto se vuelve parte del paisaje cuando hay tres
   tarjetas rojas a la vez; lo que no se vuelve paisaje es el cambio. */
@keyframes co-urge { 50% { background: #ff7a7a; } }
.co-t-alarma .co-cab { animation: co-urge 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .co-t-alarma .co-cab { animation: none; }
}

/* La fila de quién y dónde. */
.co-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--co-borde);
    font-size: 15px;
    color: var(--co-suave);
}

/* ⚠ `nowrap` en los tres: al entrar el distintivo «2.ª de 4», «Mesa 4» se partía en dos
   renglones y el nombre del mesero en otros dos, y la fila pasaba de 20 px a 48. Lo que puede
   ceder es el NOMBRE DEL MESERO —se recorta con puntos suspensivos— porque es el dato menos
   urgente de la tarjeta: la mesa y el puesto no se pueden recortar sin perder su sentido. */
.co-mesa { font-size: 19px; font-weight: 700; color: var(--co-texto); white-space: nowrap; }

.co-mesero {
    margin-left: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-sub > span:not(.co-mesa):not(.co-mesero) { white-space: nowrap; }

/* ── Avisos ──────────────────────────────────────────────────────────────────────────────── */

.co-alergia, .co-nota {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 14px 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.3;
}

/* ⚠ La alergia va en ROJO LLENO y en mayúsculas. Es lo único de la pantalla que puede mandar a
   alguien al hospital, y se lee antes que el plato. */
.co-alergia {
    background: var(--co-alarma);
    color: var(--co-sobre);
    font-weight: 700;
    text-transform: uppercase;
}

.co-nota { background: var(--co-honda); color: var(--co-texto); border: 1px solid var(--co-borde); }
.co-nota-anulada { opacity: .45; text-decoration: line-through; }
.co-alergia i, .co-nota i { font-size: 20px; flex: 0 0 auto; }

/* ── Las líneas ──────────────────────────────────────────────────────────────────────────── */

.co-lineas { list-style: none; margin: 10px 0 0; padding: 0; }

.co-linea {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--co-borde);
}

.co-linea:first-child { border-top: 0; }

/* La cantidad en su cuadro: es lo que se lee primero de una línea. */
.co-cant {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 8px;
    border-radius: 10px;
    background: var(--co-honda);
    font-size: 21px;
    font-weight: 800;
}

.co-plato { flex: 1 1 auto; min-width: 0; font-size: 19px; font-weight: 600; line-height: 1.25; }

/* El modificador NO es un renglón más: es lo que distingue este plato del de al lado. */
.co-plato small {
    display: block;
    margin-top: 3px;
    font-size: 15px;
    font-weight: 700;
    color: var(--co-aviso);
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Una línea hecha se apaga y se tacha: sigue ahí —el cocinero cuenta contra la comanda— pero
   deja de pedir atención. */
.co-hecha { opacity: .45; }
.co-hecha .co-plato { text-decoration: line-through; }

.co-tachado { text-decoration: line-through; }
.co-cancelada-linea { opacity: .5; text-decoration: line-through; }

/* ── Botones ─────────────────────────────────────────────────────────────────────────────── */

/* ⚠ CUADRADO de 48 px y con ícono, no un botón con palabra. En una columna de 340 px, un
   «Empezar» al lado partía el nombre del plato en dos renglones —«Hamburguesa / Bistro»— y lo
   que hay que leer de un vistazo pasaba a ocupar el doble. 48 px es la medida del dedo. */
.co-btn {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--co-borde);
    border-radius: 10px;
    background: var(--co-honda);
    color: var(--co-texto);
    font-size: 24px;
    cursor: pointer;
}

.co-btn:disabled { opacity: .5; cursor: progress; }
.co-btn-empezar { border-color: var(--co-borde); }
.co-btn-hecho   { background: var(--co-ok); border-color: var(--co-ok); color: var(--co-sobre); }
.co-btn-listo   { background: transparent; border-color: var(--co-ok); color: var(--co-ok); }

.co-pie { padding: 12px 14px 14px; }

.co-pie button {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 12px;
    background: var(--co-ok);
    color: var(--co-sobre);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
}

.co-btn-quitar { background: var(--co-borde) !important; color: var(--co-texto) !important; }

/* ── Cancelada ───────────────────────────────────────────────────────────────────────────── */

/* ⚠ Una comanda cancelada NO desaparece sola: se queda gritando hasta que alguien toque
   «Quitar». Si se fuera sola sería indistinguible de una que nunca se mandó, y el cocinero
   seguiría preparando algo que ya nadie va a pagar. */
.co-anulada { opacity: .9; border-color: var(--co-alarma); }
.co-anulada .co-cab { background: var(--co-alarma); color: var(--co-sobre); }

.co-cancelada {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 14px 0;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--co-alarma);
}

/* ── La columna de lo que falta ──────────────────────────────────────────────────────────── */

.co-pendientes {
    position: sticky;
    top: 88px;
    border: 1px solid var(--co-borde);
    border-radius: 14px;
    background: var(--co-tarjeta);
    overflow: hidden;
}

.co-pend-titulo {
    margin: 0;
    padding: 12px 16px;
    background: var(--co-honda);
    border-bottom: 1px solid var(--co-borde);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--co-suave);
}

.co-pend-lista { max-height: calc(100dvh - 160px); overflow-y: auto; }

.co-pend-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--co-borde);
    font-size: 17px;
    font-weight: 600;
}

.co-pend-fila:first-child { border-top: 0; }
.co-pend-fila span { flex: 1 1 auto; min-width: 0; }

.co-pend-fila small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--co-aviso);
    text-transform: uppercase;
}

.co-pend-fila strong {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border-radius: 9px;
    background: var(--co-honda);
    font-size: 19px;
    font-weight: 800;
}

.co-pend-vacio { padding: 16px; color: var(--co-suave); font-size: 15px; }

/* ── Sin nada que hacer ──────────────────────────────────────────────────────────────────── */

.co-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 80px 20px;
    color: var(--co-suave);
    text-align: center;
}

.co-vacio i { font-size: 56px; color: var(--co-borde); }
.co-vacio span { font-size: 26px; font-weight: 700; color: var(--co-texto); }
.co-vacio small { font-size: 16px; }

/* ── Pantallas angostas ──────────────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    /* El ancho es para las comandas: lo que falta se va al fondo, de corrido. */
    .co-cuerpo { grid-template-columns: 1fr; }
    /* ⚠ Y se sueltan las celdas fijas de arriba, o la columna de pendientes se quedaría en una
       segunda columna que ya no existe. */
    .co-tablero, .co-vacio { grid-column: 1; grid-row: 1; }
    .co-pendientes { grid-column: 1; grid-row: 2; }
    .co-pendientes { position: static; }
    .co-pend-lista { max-height: none; display: flex; flex-wrap: wrap; }
    .co-pend-fila { flex: 1 1 240px; border-top: 0; border-left: 1px solid var(--co-borde); }
}

@media (max-width: 720px) {
    .co-barra { gap: 10px; padding: 10px 12px; }
    .co-contador { margin-left: 0; }
    .co-hora { font-size: 24px; }
    .co-chip-txt { display: none; }
    .co-cuerpo { padding: 12px; }
    .co-tablero { columns: 1; }
}

/* ── «2.ª de 5»: esta mesa tiene más comandas en cocina ──────────────────────────────────
   ⚠ Pegado a la mesa y no en la cabecera: la pregunta que contesta —«¿falta algo más de esta
     mesa?»— se hace mirando la mesa, no el número de comanda. Y en un tono propio, sin tocar
     el semáforo: no habla de tiempo, habla de reparto. */
.co-puesto {
    flex: 0 0 auto;
    padding: 3px 9px;
    border: 1px solid var(--co-prep);
    border-radius: 999px;
    color: var(--co-prep);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}