/* =====================================================================
   SKZO · KDS — Tema oscuro + Swimlanes (K2)
   ---------------------------------------------------------------------
   RESTYLE-ONLY. Este archivo se carga DESPUÉS del <style> inline del
   kds.html, así que GANA por orden de cascada sin que toques una sola
   línea de JS, socket, ni handlers.

   Qué hace:
     1. Voltea los tickets de blancos (tema claro) a oscuros (Noir) —
        el cambio de mayor impacto visual.
     2. Alinea TODO a BRAND.md (Lime héroe, Amethyst, Warm, Fuchsia;
        Silver Mist para texto secundario). Retira el amarillo no-marca.
     3. Convierte el grid plano en 3 SWIMLANES por estado, derivados de
        las clases que el ticket YA tiene en el DOM:
          POR HACER       → .ticket.cash-pending   (cocina no debe empezar)
          EN PREPARACIÓN  → .ticket (activo normal)
          LISTOS          → .ticket.ready-collect

   IMPORTANTE: las cabeceras de carril (POR HACER / EN PREPARACIÓN /
   LISTOS) son un bloque de markup ESTÁTICO que se añade arriba del grid
   (ver INTEGRATION.md §3). No hay lógica nueva: el CSS reparte cada
   ticket a su columna según su clase.
   ===================================================================== */

/* ── 0 · Re-mapeo de tokens fuera de marca ─────────────────────────
   El :root inline declara --skz-yellow:#ffd54f, que NO existe en
   BRAND.md. Como este archivo carga después, su :root gana. Lo
   reapuntamos a Warm Orange (acento de marca) para no inventar color.
   El resto de tokens ya eran correctos; los re-declaramos por claridad. */
:root {
  --skz-purple:     #BF5FFF;   /* Amethyst Neon */
  --skz-neon-green: #C4FF4D;   /* Cyber Lime — héroe */
  --skz-orange:     #FE8B32;   /* Warm Orange */
  --skz-pink:       #FF2E9A;   /* Neon Fuchsia */
  --skz-red:        #FF2E9A;   /* alias urgente → Fuchsia */
  --skz-yellow:     #FE8B32;   /* era #ffd54f (no-marca) → Warm Orange */
  --skz-bg:         #1A1A1A;   /* Noir Void */
  --skz-black:      #1A1A1A;

  /* nuevos para el restyle oscuro */
  --skz-silver:     #D9D9D9;   /* Silver Mist — texto secundario */
  --skz-surface:    rgba(255,255,255,0.030);
  --skz-surface-2:  rgba(255,255,255,0.055);
  --skz-hairline:   rgba(255,255,255,0.10);
}

/* ── 1 · SWIMLANES: el grid pasa de auto-fill a 3 columnas fijas ───
   Cada ticket se ancla a su columna por clase. Stacking vertical por
   columna vía auto-flow dense (rellena huecos, mantiene orden de
   inserción = más nuevo arriba, igual que hoy). */
#kds-grid {
  grid-template-columns: repeat(3, minmax(300px, 1fr)) !important;
  grid-auto-rows: min-content;
  grid-auto-flow: row dense;
  align-items: start;
  gap: 14px !important;
  column-gap: 18px !important;
}

/* Reparto por estado — la especificidad (.ticket.x = 0,2,0) gana a
   (.ticket = 0,1,0), así que el orden de estas reglas no importa. */
.ticket                { grid-column: 2; }   /* EN PREPARACIÓN (default) */
.ticket.cash-pending   { grid-column: 1; }   /* POR HACER (espera pago)  */
.ticket.ready-collect  { grid-column: 3; }   /* LISTOS                    */

/* El empty-state ocupa las 3 columnas, como antes. */
.empty-state { grid-column: 1 / -1 !important; color: rgba(217,217,217,0.45) !important; }

/* ── 2 · Cabeceras de carril (markup estático, ver INTEGRATION §3) ─ */
.lane-headers {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  column-gap: 18px;
  padding-right: 4px;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.lane-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 11px;
  background: var(--skz-surface);
  border: 1px solid var(--skz-hairline);
  font-family: 'Roboto Mono', monospace;
}
.lane-head .lh-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0;
}
.lane-head .lh-name {
  font-size: 0.82rem; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase;
}
.lane-head .lh-sub {
  margin-left: auto;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 1px;
  color: rgba(217,217,217,0.5);
}
.lane-head.lh-todo   { border-color: rgba(254,139,50,0.45); }
.lane-head.lh-todo   .lh-dot  { background: var(--skz-orange); box-shadow: 0 0 8px var(--skz-orange); }
.lane-head.lh-todo   .lh-name { color: var(--skz-orange); }
.lane-head.lh-prep   { border-color: rgba(191,95,255,0.45); }
.lane-head.lh-prep   .lh-dot  { background: var(--skz-purple); box-shadow: 0 0 8px var(--skz-purple); }
.lane-head.lh-prep   .lh-name { color: var(--skz-purple); }
.lane-head.lh-done   { border-color: rgba(196,255,77,0.5); }
.lane-head.lh-done   .lh-dot  { background: var(--skz-neon-green); box-shadow: 0 0 8px var(--skz-neon-green); }
.lane-head.lh-done   .lh-name { color: var(--skz-neon-green); }

/* ── 3 · TICKET: blanco → oscuro (el cambio de mayor impacto) ────── */
.ticket {
  background: var(--skz-surface) !important;
  backdrop-filter: blur(8px);
  border: 1px solid var(--skz-hairline) !important;
  /* línea superior fina de color = estado del carril, sin badges extra */
  border-top: 3px solid var(--skz-purple) !important;
  color: var(--skz-silver);
}
.ticket.cash-pending  { border-top-color: var(--skz-orange) !important; }
.ticket.ready-collect { border-top-color: var(--skz-neon-green) !important; }

/* Encabezado del ticket */
.ticket-header { border-bottom: 1px solid var(--skz-hairline) !important; }
.order-id { color: #fff !important; }
.order-code { color: rgba(217,217,217,0.42) !important; }
.ticket-time { color: var(--skz-purple) !important; }
.ticket.urgent .ticket-time,
.ticket.urgent .order-id { color: var(--skz-pink) !important; }
.ticket-total { color: rgba(217,217,217,0.65) !important; }

/* Lista de items: chips claros → chips oscuros */
.items-list li {
  background: var(--skz-surface-2) !important;
  color: #fff !important;
}
.items-list li .item-name { color: #fff !important; font-weight: 600; }
.items-list li .item-price { color: rgba(217,217,217,0.5) !important; }

/* Barritas de categoría (4px) — colores de marca, un poco más vivas
   sobre fondo oscuro */
.cat-nucleo  { background: var(--skz-purple) !important; }
.cat-carga   { background: var(--skz-orange) !important; }
.cat-upgrade { background: var(--skz-neon-green) !important; }
.cat-upsell  { background: var(--skz-pink) !important; }

/* Item anulado en fondo oscuro */
.items-list li.item-voided .item-name,
.items-list li.item-voided .item-price { color: rgba(217,217,217,0.5) !important; }
.items-list li .voided-note { color: var(--skz-pink) !important; }

/* ── 4 · Botones (sin cambiar su función) ─────────────────────────
   El botón LISTA ya es noir-on-lime; en fondo oscuro lo invertimos a
   lime sólido para que sea el CTA hero del ticket. */
.btn-ready {
  background: var(--skz-neon-green) !important;
  color: #1a1a1a !important;
  border-color: var(--skz-neon-green) !important;
}
.btn-ready:hover {
  background: #fff !important;
  color: #1a1a1a !important;
  box-shadow: 0 0 20px rgba(196,255,77,0.5) !important;
}
.btn-pdf {
  background: rgba(191,95,255,0.12) !important;
  color: var(--skz-purple) !important;
  border-color: rgba(191,95,255,0.35) !important;
}
.btn-remake {
  background: rgba(255,46,154,0.10) !important;
  color: var(--skz-pink) !important;
  border-color: rgba(255,46,154,0.32) !important;
}

/* ── 5 · Empty-state y modal de históricas en oscuro ya estaban OK;
   solo afinamos el texto del empty-state para que se lea en Noir. */
.empty-state h3 { color: rgba(217,217,217,0.7); }
.empty-state p  { color: rgba(217,217,217,0.45); }

/* ── 6 · Responsivo: el KDS vive en pantalla amplia/tablet landscape.
   Bajo 920px las 3 columnas no caben; volvemos al flujo original de
   una sola corriente (auto-fill) y ocultamos las cabeceras de carril
   para no mentir sobre la estructura. */
@media (max-width: 920px) {
  #kds-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  }
  .ticket, .ticket.cash-pending, .ticket.ready-collect { grid-column: auto; }
  .lane-headers { display: none; }
}