/* Pantalla de cocina. Pensada para pantalla fija horizontal, pero sin romper
   en movil. Solo tokens de css/styles.css. El estado nunca se distingue solo
   por color: cada umbral trae su texto y su borde. */

.coc { max-width: none; }
.coc-error {
  margin: var(--sp-1) 0; padding: var(--sp-2);
  border: 1px solid var(--danger); border-radius: var(--radius-sm); color: var(--danger);
}

/* Sin paginacion oculta: si no cabe se comprime, no se esconde. */
.coc-cola {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-items: start;
}
.coc-comanda {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1);
}
.coc-comanda.umbral-dentro { border-left-color: var(--ok); }
.coc-comanda.umbral-cerca { border-left-color: var(--warn); border-color: var(--warn); }
.coc-comanda.umbral-pasado { border-left-color: var(--danger); border-color: var(--danger); border-left-width: 8px; }

.coc-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.coc-mesa { font-weight: 700; font-size: var(--fs-3); }
.coc-tiempo { font-size: var(--fs-0); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.coc-reloj { text-align: right; }
.coc-min { display: block; font-size: var(--fs-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.coc-umbral { display: block; font-size: var(--fs-0); text-transform: uppercase; letter-spacing: 0.06em; }
.umbral-dentro .coc-umbral { color: var(--ok); }
.umbral-cerca .coc-umbral { color: var(--warn); }
.umbral-pasado .coc-umbral { color: var(--danger); font-weight: 700; }

.coc-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--fs-0); color: var(--text-dim);
  border-bottom: 1px solid var(--border); padding-bottom: var(--sp-1);
}
.coc-lineas { list-style: none; margin: 0; padding: 0; }
.coc-linea {
  display: grid; grid-template-columns: auto 1fr; gap: 0 var(--sp-1);
  padding: 4px 0; border-bottom: 1px solid var(--border);
}
.coc-cant { font-weight: 700; font-variant-numeric: tabular-nums; }
.coc-nm { font-weight: 600; }
.coc-mods, .coc-nota { grid-column: 2; font-size: var(--fs-0); }
.coc-mods { color: var(--text-dim); }
.coc-nota { color: var(--gold); }
.coc-linea.linea-en_preparacion .coc-nm { color: var(--warn); }
.coc-linea.linea-lista .coc-nm { color: var(--ok); }

.coc-pie { display: flex; gap: var(--sp-1); justify-content: flex-end; margin-top: auto; padding-top: var(--sp-1); }

@media (max-width: 640px) {
  .coc-cola { grid-template-columns: 1fr; }
  .coc-mesa, .coc-min { font-size: var(--fs-2); }
}