/* La cocina se mira de lejos, con las manos ocupadas y a veces con grasa en la
   pantalla. Todo grande, mucho contraste, cero adornos. Va oscuro a propósito:
   suele haber una pantalla encendida toda la noche frente a alguien. */

.cocina {
  background: #0D1210;
  color: #ECF3EF;
  min-height: 100dvh;
}

.barra-cocina {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 14px clamp(16px, 3vw, 28px);
  background: #121A17; border-bottom: 1px solid #1F2C27;
}
.barra-cocina h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; }
.cuantos { font-size: 14px; color: #8CA298; }
.latido {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ok);
  animation: latir 2.4s ease-in-out infinite;
}
.latido.frio { background: #EE7C70; animation: none; }
@keyframes latir { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .latido { animation: none; } }
.reloj { margin-left: auto; font-size: 17px; color: #8CA298; }

.comandas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px; padding: 18px clamp(16px, 3vw, 28px) 60px;
  align-content: start;
}

.comanda {
  background: #16201C; border: 1px solid #24322C; border-left: 6px solid #7BA5F0;
  border-radius: 12px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.comanda.nueva { border-left-color: #E0A33A; background: #1E1B12; }
.comanda.vieja { border-left-color: #EE7C70; }

.comanda .arriba { display: flex; align-items: baseline; gap: 10px; }
.comanda .mesa { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8CA298; }
.comanda .comensal-n {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px;
  border-radius: 50%; background: #24322C; color: #ECF3EF;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
}
.comanda .crono {
  margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 700; color: #8CA298;
}
.comanda.vieja .crono { color: #EE7C70; }

.comanda .plato { font-size: 26px; font-weight: 700; line-height: 1.15; }
.comanda .cant {
  display: inline-grid; place-items: center; min-width: 34px; height: 34px;
  border-radius: 8px; background: #ECF3EF; color: #0D1210;
  font-family: var(--font-mono); font-size: 19px; margin-right: 8px;
  vertical-align: middle;
}
.comanda .quien { font-size: 13.5px; color: #8CA298; }
.comanda .notas { font-size: 14px; color: #E0A33A; }

.comanda button {
  border: 0; border-radius: 10px; padding: 14px;
  font-size: 16px; font-weight: 700; margin-top: 4px;
}
.comanda .aceptar { background: #E0A33A; color: #1A1305; }
/* "Listo" es un ESTADO, no la marca: sale servido, y eso significa lo mismo en
   todos los restaurantes. Por eso lleva --ok y no el acento del tema. */
.comanda .listo { background: var(--ok); color: var(--ok-tinta); }
.comanda button:disabled { opacity: .5; }

.cargando, .vacio-cocina {
  grid-column: 1 / -1; text-align: center; color: #8CA298;
  padding: 80px 20px; font-size: 17px;
}

.sin-entrar {
  position: fixed; inset: 0; background: #0D1210; display: grid; place-items: center;
  text-align: center; padding: 24px; z-index: 50;
}
.sin-entrar h2 { font-size: 22px; margin: 0 0 8px; }
.sin-entrar p { color: #8CA298; margin: 0 0 20px; }
.btn-grande {
  display: inline-block; background: var(--pacento); color: var(--pacento-tinta);
  padding: 14px 26px; border-radius: 11px; font-weight: 700; text-decoration: none;
}