/*
 * Pantalla de cocina (KDS) — 2026-09-26.
 *
 * Tres reglas que la separan del resto del sistema, y las tres son del oficio, no de estética:
 *
 * 1. **Se lee de lejos.** El cocinero está a metro y medio y con las manos ocupadas: 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 que se pueda tocar mide al menos 44 px y tiene su estado visible SIN pasar el mouse.
 * 3. **El color dice el tiempo.** Verde, ámbar y rojo no son decoración: son los umbrales de la
 *    estación. Y nunca van solos — llevan el reloj al lado, porque un daltónico también cocina.
 */

.co-pantalla {
    --co-fondo:   #12161d;
    --co-tarjeta: #1c222c;
    --co-borde:   #2c3542;
    --co-texto:   #eef2f7;
    --co-suave:   #97a3b4;

    /* Los tres tiempos. El ámbar y el rojo son los del tema, subidos de luminancia para que
       aguanten el fondo oscuro: medidos contra `--co-tarjeta` dan 8,2:1 y 6,4:1. */
    --co-ok:      #2fc770;
    --co-aviso:   #ffb547;
    --co-alarma:  #ff5c5c;

    /* ⚠ `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);
}

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

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

.co-marca { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; }
.co-marca i { font-size: 24px; color: var(--co-ok); }

.co-estaciones { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }

/* ⚠ `flex: 1 1 auto` + `min-width: 0` en el grupo del medio: sin el `min-width` los botones de
   la derecha se empujan fuera de la barra en cuanto hay cuatro estaciones —un hijo de flex se
   niega a encogerse por debajo de su contenido—. */
.co-derecha { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.co-chip,
.co-estaciones button {
    min-height: 44px;                   /* el mínimo táctil; acá no se negocia */
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--co-borde);
    border-radius: 8px;
    background: var(--co-tarjeta);
    color: var(--co-texto);
    font-size: 15px;
    cursor: pointer;
}

.co-chip[aria-pressed="true"],
.co-estaciones button.co-activa {
    background: var(--co-ok);
    border-color: var(--co-ok);
    color: #06210f;
    font-weight: 600;
}

/* ⚠ El estado apagado no puede ser «lo mismo pero sin color»: se marca también con opacidad,
   porque sobre un televisor barato la diferencia de tono sola no se ve. */
.co-chip[aria-pressed="false"] { opacity: .65; }

.co-reloj { font-size: 14px; color: var(--co-suave); font-variant-numeric: tabular-nums; }

.co-salir {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; color: var(--co-suave); text-decoration: none;
    border: 1px solid var(--co-borde);
}

/* ── El consolidado ──────────────────────────────────────────────────────────────────────── */

.co-todoeldia {
    display: flex; flex-wrap: wrap; gap: 10px;
    padding: 12px 16px;
    background: #0d1116;
    border-bottom: 1px solid var(--co-borde);
}
.co-todoeldia span {
    padding: 6px 12px; border-radius: 999px;
    background: var(--co-tarjeta); border: 1px solid var(--co-borde);
    font-size: 16px;
}
.co-todoeldia b { color: var(--co-aviso); }

/* ── El tablero ──────────────────────────────────────────────────────────────────────────── */

.co-tablero {
    display: grid;
    /* Columnas que se acomodan solas: en una tableta caben dos, en un televisor seis. */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    padding: 14px 16px 24px;
    align-items: start;
}

.co-comanda {
    background: var(--co-tarjeta);
    border: 1px solid var(--co-borde);
    /* La franja de color va a la IZQUIERDA y ancha: es lo que se ve de lejos. */
    border-left: 8px solid var(--co-ok);
    border-radius: 10px;
    overflow: hidden;
}
.co-comanda.co-t-aviso  { border-left-color: var(--co-aviso); }
.co-comanda.co-t-alarma { border-left-color: var(--co-alarma); }

/* Una comanda completa se apaga: ya no es trabajo pendiente, es trabajo por entregar. */
.co-comanda.co-lista { border-left-color: var(--co-ok); background: #16251c; }

.co-cab { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px 8px; }
.co-num { font-size: 26px; font-weight: 700; line-height: 1; }
.co-mesa { font-size: 18px; font-weight: 600; flex: 1 1 auto; min-width: 0;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-tiempo { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.co-t-aviso  .co-tiempo { color: var(--co-aviso); }
.co-t-alarma .co-tiempo { color: var(--co-alarma); }

.co-sub { padding: 0 14px 8px; font-size: 13px; color: var(--co-suave); }

/* La nota de la comanda. Las alergias se sacan aparte, abajo. */
.co-nota {
    margin: 0 14px 10px; padding: 8px 10px;
    background: #2a2416; border-left: 3px solid var(--co-aviso);
    border-radius: 6px; font-size: 15px;
}

/* ⚠ Una alergia NO es una nota más: va en rojo, en mayúscula y con ícono. Es la única cosa de
   esta pantalla que puede mandar a alguien al hospital. */
.co-alergia {
    margin: 0 14px 10px; padding: 8px 10px;
    background: #3a1b1b; border-left: 3px solid var(--co-alarma);
    border-radius: 6px; font-size: 16px; font-weight: 700;
    color: #ffd4d4; text-transform: uppercase;
}

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

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

.co-cant {
    min-width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; background: #2b3442; font-weight: 700; font-size: 16px;
}
.co-plato { flex: 1 1 auto; min-width: 0; font-size: 17px; line-height: 1.25; }
.co-plato small { display: block; color: var(--co-aviso); font-size: 14px; }

.co-btn {
    min-width: 92px; min-height: 44px;
    border: 0; border-radius: 8px;
    font-size: 15px; font-weight: 600; cursor: pointer;
}
.co-btn-empezar { background: #33404f; color: var(--co-texto); }
.co-btn-listo   { background: var(--co-aviso); color: #2b1c00; }
.co-btn-hecho   { background: transparent; color: var(--co-ok); border: 1px solid var(--co-ok); }

.co-linea.co-hecha .co-plato { text-decoration: line-through; color: var(--co-suave); }
.co-linea.co-cancelada .co-plato { text-decoration: line-through; color: var(--co-alarma); }
.co-linea.co-cancelada .co-cant { background: #3a1b1b; color: var(--co-alarma); }

.co-pie { padding: 10px 14px 14px; }
.co-pie button {
    width: 100%; min-height: 52px;
    border: 0; border-radius: 8px;
    background: var(--co-ok); color: #06210f;
    font-size: 17px; font-weight: 700; cursor: pointer;
}

.co-vacio { text-align: center; color: var(--co-suave); font-size: 20px; padding: 60px 20px; }
.co-vacio i { font-size: 52px; opacity: .5; }

/* ── Teléfono ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .co-tablero { grid-template-columns: 1fr; padding: 10px; }
    /* El rótulo de los chips estorba cuando el ancho es el problema; el ícono se queda. */
    .co-chip-txt { display: none; }
    .co-chip { padding: 0 12px; }
}

/* ⚠ Al imprimir, el `@media` de teléfono se aplicaría igual (una hoja A4 mide ~794 px): acá no
   hay nada que imprimir, así que la pantalla se oculta entera y se evita el papel gastado. */
@media print {
    .co-pantalla { display: none; }
}

/* ── Comanda cancelada ──────────────────────────────────────────────────────────────────────
   ⚠ Se queda en el tablero a propósito hasta que alguien la retire. Y grita: si se pareciera a
     las demás, el cocinero le pasaría por encima y seguiría preparándola. */

.co-comanda.co-anulada {
    border-left-color: var(--co-alarma);
    background: #2a1717;
    /* Dos parpadeos al entrar y se queda quieta: una tarjeta que late para siempre se vuelve
       parte del paisaje y deja de avisar. */
    animation: co-anulada-entra 0.5s ease-in-out 2;
}

@keyframes co-anulada-entra {
    0%, 100% { background: #2a1717; }
    50%      { background: #4a1f1f; }
}

.co-cancelada {
    margin: 0 14px 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--co-alarma);
    color: #2b0000;
    border-radius: 6px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* El plato tachado y apagado: se ve QUÉ era, y que ya no va. */
.co-linea.co-cancelada-linea .co-plato {
    text-decoration: line-through;
    color: var(--co-suave);
}
.co-linea.co-cancelada-linea .co-cant {
    background: #3a1b1b;
    color: var(--co-alarma);
}

.co-btn-quitar {
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--co-alarma);
    border-radius: 8px;
    background: transparent;
    color: var(--co-alarma);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

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

/* ── Una nota tachada ───────────────────────────────────────────────────────────────────────
   ⚠ Se SIGUE mostrando. Si el cocinero ya había empezado por esa nota, la línea tachada con su
     hora es su respaldo: dice que se pidió y cuándo se retiró (Mario, 2026-09-27). Borrarla sería
     quitarle justamente eso. */
.co-nota.co-nota-anulada {
    background: transparent;
    border-left-color: var(--co-borde);
    color: var(--co-suave);
}

/* ⚠ El tachado va en el SPAN del texto, no en el párrafo: `text-decoration` se propaga a los
   hijos y no se puede quitar desde adentro, así que puesta en el `<p>` la hora salía tachada
   también. Y la hora explica el tachado, no es parte de lo que se retiró. */
.co-tachado {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.co-nota-anulada small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    opacity: .85;
}