/* =====================================================================
   Santo Pekdo — sala, comanda y cocina (Fase 4)
   Se carga despues de app.css
   ===================================================================== */

/* --- Estructura general --------------------------------------------- */

.app {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top));
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
}

.barra__titulo   { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.barra__titulo strong { font-size: 19px; }
.barra__titulo span   { font-size: 13px; color: var(--texto-suave); }
.barra__acciones { display: flex; align-items: center; gap: 8px; }

.barra__usuario {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--color-usuario);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.barra__total { font-size: 20px; font-weight: 700; }

.barra__cola {
    font-size: 13px;
    color: var(--texto-suave);
}
.barra__cola--activa { color: var(--estado-aviso); font-weight: 600; }

/* Como va el turno: mesas abiertas y dinero sin cobrar. Mismo peso visual
   que la cola del horno — es informacion de fondo, no una alerta. */
.barra__turno {
    font-size: 13px;
    color: var(--texto-suave);
}

/* --- Buscador de la comanda ------------------------------------------ */

.buscador {
    position: relative;
    padding: 8px 10px 0;
}

.buscador input {
    width: 100%;
    min-height: 46px;
    padding: 0 40px 0 12px;
    background: var(--superficie);
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto);
    font: inherit;
    font-size: 16px;   /* 16 o menos hace que iOS haga zoom al enfocar */
}
.buscador input:focus { border-color: var(--marca); outline: none; }

.buscador__limpiar {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 40px;
    height: 46px;
    background: none;
    border: none;
    color: var(--texto-suave);
    font-size: 16px;
    cursor: pointer;
}

/* Los destacados: misma forma que el resto de categorias para no inventar
   un control nuevo, con la estrella como unica diferencia. */
/* La pestaña de "los de siempre" es solo la estrella, sin rótulo: en una
   fila que comparten todas las categorías, cada palabra empuja a las
   últimas fuera de la pantalla. Un punto más grande porque ya no lleva
   texto al lado que la explique. */
.categoria--destacada { color: var(--marca-pizza); font-size: 18px; }
.categoria--destacada.categoria--activa { color: #fff; }

.boton-icono {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    border-radius: var(--radio);
    color: var(--texto);
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
}
.boton-icono:active { background: var(--superficie-alta); }

.en-linea { display: inline; }

.conexion {
    padding: 8px 12px;
    background: var(--estado-aviso);
    color: #000;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.cargando, .vacio {
    padding: 40px 20px;
    color: var(--texto-suave);
    text-align: center;
}

/* --- Sala ------------------------------------------------------------ */

.sala { flex: 1; padding: 12px 12px 96px; }

.bloque { margin-bottom: 22px; }

.bloque__titulo {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--texto-suave);
}

/* El titulo de zona es un BOTON: pliega y despliega sus mesas. Quien lleva
   solo la terraza no tiene por que bajar por las quince del salon cada vez
   que quiere abrir una cuenta.

   Alto de dedo (44 px) y a todo lo ancho: se pulsa de pie, con la bandeja en
   la otra mano, y fallar el toque abre una mesa que no era. */
.bloque__titulo--plegable {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    text-align: left;
    cursor: pointer;
}
.bloque__titulo--plegable:active { opacity: .6; }

.bloque__flecha {
    display: inline-block;
    width: 14px;
    font-size: 15px;
    line-height: 1;
}

/* Plegada, este contador es lo unico que queda a la vista: sin el habria que
   desplegar la zona solo para saber si hay algo dentro. */
.bloque__cuantas {
    margin-left: auto;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    opacity: .75;
}

.cuentas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.cuenta {
    display: block;
    padding: 12px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-left: 5px solid var(--estado-neutro);
    border-radius: var(--radio);
    color: var(--texto);
    text-decoration: none;
}

.cuenta__cab   { display: flex; justify-content: space-between; align-items: baseline; }
.cuenta__num   { font-size: 21px; font-weight: 800; }
.cuenta__mesas { font-size: 14px; color: var(--texto-suave); }
.cuenta__estado{ margin: 4px 0; font-size: 13px; }
.cuenta__pie   { display: flex; justify-content: space-between; align-items: baseline; }
.cuenta__total { font-size: 17px; font-weight: 700; }
.cuenta__min   { font-size: 12px; color: var(--texto-suave); }
.cuenta__avisos{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

.pin {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.pin--aviso  { background: var(--estado-aviso); color: #000; }
.pin--listo  { background: var(--estado-ok); color: #fff; }
.pin--bloqueo{ background: var(--estado-critico); color: #fff; }
.pin--llamada{ background: var(--marca-pizza); color: #000; }

/* Cocina esta llamando por esta cuenta. Se ve con el movil en la mano y a
   media luz: el pin solo no basta, la tarjeta entera tiene que cantar.
   Solo se marcan las cuentas propias del camarero. */
.cuenta--llamada {
    border-color: var(--marca-pizza);
    border-left-color: var(--marca-pizza);
    animation: llamada 1.4s ease-in-out infinite;
}

@keyframes llamada {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232,163,61,.55); }
    50%      { box-shadow: 0 0 0 6px rgba(232,163,61,0); }
}

/* Estados: color MAS icono, para no depender solo del color */
.estado--abierta  { border-left-color: var(--estado-neutro); }
.estado--cocina   { border-left-color: var(--estado-aviso); }
.estado--servida  { border-left-color: var(--estado-ok); }
.estado--pagar    { border-left-color: var(--marca-pizza); }
.estado--cobro    { border-left-color: var(--estado-critico); }

.mesas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.mesa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 72px;
    padding: 8px 4px;
    background: var(--superficie);
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.mesa__codigo { font-size: 19px; font-weight: 700; }
.mesa__num    { font-size: 12px; color: var(--texto-suave); }
.mesa__total  { font-size: 13px; font-weight: 600; }

.mesa--libre    { border-style: dashed; color: var(--texto-suave); }
.mesa--ocupada  { border-color: var(--estado-aviso); }
.mesa--elegida  {
    border-style: solid;
    border-color: var(--marca);
    background: var(--marca);
    color: #fff;
}
.mesa:active { transform: scale(0.96); }

/* --- Barra de acciones flotante -------------------------------------- */

.acciones-flotantes {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--superficie);
    border-top: 1px solid var(--borde);
}

.acciones-flotantes span { flex: 1; font-weight: 600; }
.acciones-flotantes .boton { width: auto; flex: 1; }

/* --- Comanda ---------------------------------------------------------- */

.comanda { flex: 1; display: flex; flex-direction: column; padding-bottom: 88px; }

/* La pantalla de comanda va partida en dos, y ninguna mitad se va nunca.
   Antes scrolleaba la pagina entera: al bajar por la carta a buscar un
   producto, la comanda salia por arriba y el camarero dejaba de ver lo que
   llevaba pedido justo mientras el cliente se lo estaba diciendo.
   Ahora el alto del cuerpo lo fija la ventana y cada mitad lleva su propio
   scroll, asi que la cabecera (mesa y total) y los botones de abajo estan
   siempre donde el pulgar los espera.
   Acotado a .app--comanda porque .app la comparten sala, cocina y cobro,
   que siguen con el scroll normal de pagina. */
.app--comanda {
    height: 100vh;      /* respaldo para navegadores sin dvh */
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;  /* sin rebote de pagina al llegar al final de un panel */
    /* Instalada como aplicacion (manifest standalone + viewport-fit=cover +
       barra de estado translucida) la pagina se dibuja POR DEBAJO de la barra
       de estado, pero 100dvh sigue midiendo la pantalla entera: el reparto
       sobresalia por abajo justo lo que mide esa barra. En el navegador no se
       notaba porque la pagina se desplaza; aqui el cuerpo no se desplaza, asi
       que lo que sobresalia -el pie con "enviar a cocina" y "va a pagar"- se
       quedaba fuera y sin forma de llegar a el. Reservar el hueco arriba lo
       devuelve a su sitio; en el navegador el inset vale 0 y no cambia nada. */
    padding-top: env(safe-area-inset-top);
}

.app--comanda .comanda {
    min-height: 0;      /* sin esto, un hijo con scroll estira el flex y desborda */
    padding-bottom: 0;  /* el pie ya no flota: no hay hueco que reservar */
}

.aviso-bloqueo {
    padding: 12px;
    background: var(--estado-critico);
    color: #fff;
    font-weight: 600;
    text-align: center;
}

.comanda__lineas {
    padding: 8px 12px;
    border-bottom: 1px solid var(--borde);
}

/* La comanda no puede empujar la carta fuera de la pantalla: con quince
   lineas el camarero se quedaba sin botones que tocar y tenia que recorrer
   toda la pagina para pedir la siguiente cerveza.
   Crece con lo pedido hasta la mitad de la pantalla; a partir de ahi
   scrollea ella sola y la carta conserva su sitio. Con dos lineas no roba
   espacio a los productos.
   OJO: la clase `.comanda__lineas` la comparten esta pantalla y las tarjetas
   del KDS, mas abajo en este mismo fichero, y aquella gana por ir despues.
   Por eso esta regla se acota al <main> del camarero. */
main.comanda > .comanda__lineas {
    flex: 0 1 auto;
    max-height: 50%;
    padding: 8px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.linea {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--borde);
}
.linea:last-child { border-bottom: none; }

/* Menos · cantidad · mas. El bloque va entero a la izquierda de la linea,
   donde antes estaba solo el numero, para repetir un producto sin volver a
   buscarlo en la carta. */
.linea__pasos {
    display: flex;
    align-items: center;
    gap: 2px;
}

.linea__cant {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    border-radius: var(--radio);
    background: var(--superficie-alta);
    font-weight: 700;
}

.linea__paso {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto);
    font: inherit;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}
.linea__paso:active { background: var(--marca); border-color: var(--marca); color: #fff; }

/* En lo que ya esta en cocina el menos no vale: quitar comida hecha pasa
   por la ✕, que pide motivo. Se apaga en vez de esconderse para que el
   hueco no baile entre una linea enviada y la de al lado. */
.linea__paso[disabled] {
    opacity: .22;
    cursor: default;
}
.linea__txt    { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.linea__nombre { font-weight: 600; }
.linea__det    { font-size: 13px; color: var(--texto-suave); }
.linea__estado { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; }
.linea__imp    { font-weight: 700; }
.linea__quitar {
    width: 36px; height: 36px;
    background: none;
    border: none;
    color: var(--texto-suave);
    font-size: 17px;
    cursor: pointer;
}

/* El lapiz corrige; la equis quita. Va mas apagado que la equis a proposito:
   corregir es lo habitual, pero la equis es la que tiene que verse primero
   cuando hay prisa. */
.linea__editar {
    width: 34px; height: 36px;
    background: none;
    border: none;
    color: var(--texto-suave);
    font-size: 15px;
    opacity: .65;
    cursor: pointer;
}
.linea__editar:hover { opacity: 1; }

.linea--lista .linea__nombre { color: var(--estado-ok); }
.linea--anulada { opacity: .4; text-decoration: line-through; }

/* Invitada: sigue en la lista porque el producto salio de cocina, pero el
   importe se tacha para que se vea de un golpe que esa no se cobra. */
.linea--invitada .linea__imp {
    text-decoration: line-through;
    opacity: .5;
}

/* Deshacer el envio. Amarillo de aviso y no rojo: no es destructivo —las
   lineas se quedan— pero tampoco es una accion cualquiera. */
.boton--deshacer {
    background: var(--estado-aviso);
    color: #fff;
    border-color: transparent;
}

/* Separa la invitacion del resto del modal: es lo unico ahi dentro que
   quita dinero, y no debe quedar al lado de "guardar" como una opcion mas. */
.modal__aparte {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--borde);
}

/* Lo que ya salio pierde contraste. Lo unico que tiene que destacar es lo
   que el camarero esta tecleando ahora mismo, con el cliente delante. */
.linea--en_preparacion { opacity: .72; }
.linea--lista,
.linea--servida        { opacity: .5; }

.comanda__carta { flex: 1; }

/* La otra mitad: se queda con lo que sobre y scrollea por dentro */
.app--comanda .comanda__carta {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* El pie deja de flotar sobre el contenido: pasa a ser la ultima fila del
   reparto. Fijo lo esta igual, porque el cuerpo ya no se desplaza.
   `flex-shrink: 0` en el pie y en la barra no es adorno: si falta sitio, el
   que se encoge tiene que ser el panel de la carta -que ya scrollea por
   dentro- y nunca las dos filas con las que se comanda y se cobra. */
.app--comanda .acciones-flotantes { position: static; flex-shrink: 0; }
.app--comanda .barra           { flex-shrink: 0; }

.categorias {
    position: sticky;
    top: 58px;
    z-index: 10;
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    background: var(--fondo);
    scrollbar-width: none;
}
.categorias::-webkit-scrollbar { display: none; }

/* Las categorias se pegan al borde de SU panel, no al de la pagina: aqui
   ya no hay scroll de pagina contra el que descontar la altura de la barra. */
.app--comanda .categorias { top: 0; }

.categoria {
    flex-shrink: 0;
    min-height: 42px;
    padding: 0 16px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 999px;
    color: var(--texto);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.categoria--activa { background: var(--marca); border-color: var(--marca); color: #fff; }

.productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    padding: 0 12px 12px;
}

.producto {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 76px;
    padding: 10px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.producto:active { background: var(--superficie-alta); transform: scale(0.98); }

/* Miniatura. Va a la derecha y no ocupa hueco propio: el nombre y el precio
   siguen exactamente donde estaban, para no reaprender la carta de memoria.
   Un producto sin imagen mantiene el boton tal cual estaba. */
.producto--con-foto { padding-right: 62px; }

.producto__foto {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 6px;
    pointer-events: none;
}

/* Los bocadillos se piden POR NUMERO: el numero manda */
.producto__codigo {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--marca);
}
.producto__nombre { flex: 1; font-weight: 600; font-size: 15px; }
.producto__precio { font-size: 14px; color: var(--texto-suave); }

/* --- La carta, solo para mirarla ---------------------------------------

   Es /sala/carta: la misma rejilla de productos, pero sin comandar. Como
   aqui no hay prisa —se estudia la carta antes del servicio— cada producto
   puede permitirse ensenar lo que lleva sin tener que abrir la ficha. */

.comanda__carta--sola { padding-top: 12px; }

.producto--ficha { min-height: 64px; }

.producto__desc {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.35;
    color: var(--texto-suave);
}

/* Precio y puesto, uno al lado del otro. Lo que se pregunta de un producto
   que no se conoce es cuanto vale y quien lo hace. */
.ficha-datos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 12px 0 4px;
}
.ficha-datos > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: var(--superficie-alta);
    border-radius: var(--radio);
}
.ficha-datos span   { font-size: 12px; color: var(--texto-suave); }
.ficha-datos strong { font-size: 16px; }

.ficha-titulo {
    margin: 16px 0 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--texto-suave);
}

/* Las opciones se listan en texto y no como botones: aqui no se elige nada,
   solo se mira que admite el producto. */
.ficha-opciones {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}
.producto__prov {
    position: absolute;
    top: 6px; right: 8px;
    color: var(--estado-aviso);
    font-weight: 700;
}

/* --- Anadido rapido ----------------------------------------------------
   Los productos sin modificadores entran de un toque. El borde marcado los
   distingue de los que abren ficha, para que el camarero sepa antes de
   pulsar si le va a saltar un modal o no. */
.producto--rapido {
    border-color: var(--marca);
    border-left-width: 3px;
}

/* Destello al tocar: confirma el toque aunque el envio vaya despues */
.producto--tocado {
    background: var(--superficie-alta);
    transform: scale(0.96);
}

/* Cuantas unidades se han acumulado y aun no han salido */
.producto__contador {
    position: absolute;
    top: 6px; right: 8px;
    min-width: 22px;
    padding: 1px 6px;
    background: var(--marca);
    border-radius: 11px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}
.producto__contador[hidden] { display: none; }

/* --- Modales ---------------------------------------------------------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0,0,0,.65);
}

.modal__caja {
    width: 100%;
    max-width: 440px;
    padding: 20px;
    background: var(--superficie);
    border-radius: 14px;
}
.modal__caja--alta { max-height: 86dvh; overflow-y: auto; }
.modal__caja h2    { margin: 0 0 4px; font-size: 20px; }
.modal__desc       { margin: 0 0 12px; color: var(--texto-suave); font-size: 14px; }
.modal__pie        { display: flex; gap: 10px; margin-top: 16px; }
.modal__pie .boton { flex: 1; }

.alergenos { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.alergeno {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--superficie-alta);
    font-size: 11px;
    text-transform: uppercase;
}

.cantidad { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 16px 0; }
.cantidad__boton {
    width: 52px; height: 52px;
    background: var(--superficie-alta);
    border: none;
    border-radius: 50%;
    color: var(--texto);
    font-size: 26px;
    cursor: pointer;
}
.cantidad__valor { min-width: 44px; font-size: 28px; font-weight: 700; text-align: center; }

.grupo-mod h3 { margin: 14px 0 6px; font-size: 14px; color: var(--texto-suave); }
.grupo-mod em { font-weight: 400; }
.opciones     { display: flex; flex-wrap: wrap; gap: 6px; }

.opcion {
    min-height: 42px;
    padding: 0 14px;
    background: var(--superficie-alta);
    border: 1px solid var(--borde);
    border-radius: 999px;
    color: var(--texto);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.opcion--activa { background: var(--marca); border-color: var(--marca); color: #fff; }

.campo--casilla { display: flex; align-items: center; gap: 10px; }
.campo--casilla input { width: 24px; height: 24px; }
.campo--casilla span  { margin: 0; }

.chivato {
    position: fixed;
    left: 50%;
    bottom: 96px;
    z-index: 60;
    transform: translateX(-50%);
    padding: 12px 20px;
    background: var(--estado-ok);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
}

/* Lo que NO se puede perder de vista: el envio a cocina.
   Mas grande, mas alto en la pantalla y con sombra, porque el aviso normal
   se lo comia el servicio — se pulsa enviar y ya se esta mirando a la mesa
   siguiente. Ancho casi completo: a un metro de distancia el tamano es lo
   unico que se nota. */
.chivato--exito {
    bottom: 50%;
    width: min(86vw, 420px);
    padding: 20px 24px;
    border-radius: var(--radio);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .45);
    font-size: 22px;
    font-weight: 800;
    text-align: center;
}

/* --- Cocina (KDS) ----------------------------------------------------- */

/* El fondo del KDS es un punto mas oscuro que el resto de la aplicacion: se
   mira desde metro y medio y las tarjetas tienen que despegar del fondo.
   Antes estaba escrito a fuego (#0d0d0d) y la pantalla se quedaba negra
   aunque el aparato estuviera en claro; ahora se deriva del tema, asi que
   la tablet de cocina puede ponerse en claro si le da el sol de la puerta. */
.app--kds   { background: var(--kds-fondo); }
.barra--kds { background: var(--kds-barra); }

:root {
    --kds-fondo: #0d0d0d;
    --kds-barra: #1a1a1a;
}

@media (prefers-color-scheme: light) {
    :root {
        --kds-fondo: #E8E8E8;
        --kds-barra: #DCDCDC;
    }
}

:root[data-tema="claro"] {
    --kds-fondo: #E8E8E8;
    --kds-barra: #DCDCDC;
}

:root[data-tema="oscuro"] {
    --kds-fondo: #0d0d0d;
    --kds-barra: #1a1a1a;
}

.conmutador { display: flex; gap: 6px; flex: 1; }

.conmutador__boton {
    position: relative;
    flex: 1;
    min-height: 48px;
    background: var(--superficie);
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto-suave);
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}
.conmutador__boton--activo {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}

/* Lo que espera en el OTRO puesto. El pizzero mira Horno toda la noche;
   sin esto no se entera de que la plancha tiene faena hasta que alguien
   se lo dice. */
.conmutador__punto {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--estado-aviso);
    color: #000;
    font-size: 13px;
    font-weight: 800;
    line-height: 22px;
}
.conmutador__punto[hidden] { display: none; }

.kds {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    align-content: start;
    padding: 12px;
}

.comanda:not(.comanda__lineas) {
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border: 3px solid var(--borde);
    border-radius: 12px;
    overflow: hidden;
}

/* EL CONTORNO DICE EN QUE PUNTO ESTA LA COMANDA, no cuanto lleva esperando.
   Es lo primero que mira el cocinero desde el otro lado de la cocina, y con
   veinte tarjetas en pantalla lo urgente es saber cual no ha empezado nadie.
   El tiempo se dice en el numero de minutos, aqui abajo. */
.comanda--espera { border-color: var(--estado-ok); }                 /* verde: sin tocar */
.comanda--curso  { border-color: var(--estado-aviso); }              /* amarillo: en marcha */
.comanda--lista  { border-color: var(--borde); opacity: .45; }       /* hecha: se apaga */

/* Se ha pasado de tiempo: llama la atencion sin robarle el contorno al
   estado. NO usa el rojo de marca, que se confundiria con el logotipo. */
.comanda--tarde { animation: latido 1.6s ease-in-out infinite; }

@keyframes latido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(216,27,96,.5); }
    50%      { box-shadow: 0 0 0 7px rgba(216,27,96,0); }
}

.comanda__cab {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 12px;
    background: var(--superficie-alta);
}
.comanda__num   { font-size: 24px; font-weight: 800; }
.comanda__donde { flex: 1; font-size: 15px; font-weight: 600; }
.comanda__min   { font-size: 19px; font-weight: 700; }

/* El reloj lo recalcula el cliente cada 15 s: no espera al servidor */
.tiempo--ambar { color: var(--estado-aviso); }
.tiempo--rojo  { color: var(--estado-critico); }

.comanda__pase {
    padding: 4px 12px;
    background: var(--marca-pizza);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.comanda__lineas { list-style: none; margin: 0; padding: 0; flex: 1; }

.plato {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--borde);
    cursor: pointer;
}
.plato:last-child { border-bottom: none; }
.plato:active     { background: var(--superficie-alta); }

.plato__cant {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--superficie-alta);
    font-size: 19px;
    font-weight: 800;
}
.plato__txt    { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plato__nombre { font-size: 18px; font-weight: 700; line-height: 1.2; }
.plato__mod    { font-size: 14px; color: var(--texto-suave); }

/* La nota tiene que verse SI O SI: "sin cebolla" mal leido es un plato devuelto */
.plato__nota {
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--estado-aviso);
    color: #000;
    font-size: 15px;
    font-weight: 700;
}
.plato__llevar {
    font-size: 12px;
    font-weight: 800;
    color: var(--marca-pizza);
    letter-spacing: .5px;
}
.plato__marca { font-size: 22px; color: var(--estado-ok); }

.plato--listo               { opacity: .4; }
.plato--listo .plato__nombre{ text-decoration: line-through; }

.comanda__pie {
    display: flex;
    /* Con tres botones —empezar, avisar, imprimir— en una tarjeta estrecha
       no siempre caben en una fila. Antes que apretarlos hasta partirles el
       texto, que el que sobre baje a la siguiente. */
    flex-wrap: wrap;
    gap: 1px;
    background: var(--borde);
    border-top: 1px solid var(--borde);
}

.comanda__accion {
    flex: 1 1 auto;
    min-width: 92px;
    min-height: 46px;
    background: var(--superficie-alta);
    border: none;
    color: var(--texto-suave);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.comanda__accion:active        { background: var(--marca); color: #fff; }
.comanda__accion[hidden]       { display: none; }
.comanda__accion--hecha        { color: var(--estado-ok); }

.comanda__completa {
    min-height: 52px;
    background: var(--superficie-alta);
    border: none;
    border-top: 1px solid var(--borde);
    color: var(--texto);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.comanda__completa:active { background: var(--marca); color: #fff; }

/* En la tablet de cocina, todo mas grande: se mira de lejos */
@media (min-width: 900px) {
    .app--kds { font-size: 18px; }
    .kds { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
    .plato__nombre { font-size: 20px; }
}

/* --- Tamano de letra del KDS, elegido en la propia pantalla -------------
   Se escala TODO con em, no solo el nombre del plato: si crece la letra y
   no crece la tarjeta, el texto se sale o se corta. Y las tarjetas se
   ensanchan a la vez, o en "enorme" caben dos palabras por linea.

   El multiplicador va en el body y no en .app--kds para que alcance
   tambien a los modales, que cuelgan fuera. */
body.kds--normal .app--kds { font-size: 18px; }
body.kds--grande .app--kds { font-size: 22px; }
body.kds--enorme .app--kds { font-size: 27px; }

body.kds--grande .plato__nombre,
body.kds--enorme .plato__nombre { font-size: 1.15em; }

body.kds--grande .kds { grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); }
body.kds--enorme .kds { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }

/* Y la cabecera de la tarjeta: el numero de mesa y los minutos son lo
   segundo que se mira desde lejos, justo despues del nombre del plato. */
body.kds--grande .comanda__num,
body.kds--enorme .comanda__num { font-size: 1.35em; }

body.kds--grande .comanda__min,
body.kds--enorme .comanda__min { font-size: 1.1em; }