/* Sistema de diseño Carmen — azul índigo + estados semánticos. Reutilizable por camarero/KDS/panel. */
:root {
  /* Marca / acción (índigo) */
  --brand-900: #1e3a8a;
  --brand-700: #1d4ed8;
  --brand-500: #3b82f6;
  --brand-400: #60a5fa;
  --brand-300: #93c5fd;
  --brand-100: #dbeafe;
  /* Estados semánticos */
  --ok: #15803d;        --ok-bg: #ecfdf3;   --ok-border: #86efac;
  --warn: #c2410c;      --warn-bg: #fff7ed; --warn-border: #fdba74;
  --danger: #b91c1c;    --danger-bg: #fef2f2;
  /* Neutros */
  --bg: #f4f5f7; --surface: #fff; --text: #1f2937; --muted: #64748b; --border: #e2e8f0;
  /* Forma / espaciado */
  --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --tap: 44px;
  --shadow-up: 0 -4px 16px rgba(0,0,0,.10);
  --shadow-card: 0 4px 16px rgba(0,0,0,.06);
  /* Atribución de camarero — paleta (8 tonos, evita verde/ámbar/rojo semánticos) */
  --wc-0: #0d9488; /* teal      */
  --wc-1: #7c3aed; /* violeta   */
  --wc-2: #2563eb; /* azul      */
  --wc-3: #db2777; /* rosa      */
  --wc-4: #9333ea; /* púrpura   */
  --wc-5: #0891b2; /* cian      */
  --wc-6: #4f46e5; /* índigo    */
  --wc-7: #be185d; /* magenta   */
}
* { box-sizing: border-box; }
/* El atributo `hidden` debe ganar a las reglas de componente que fijan display (flex). */
[hidden] { display: none !important; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; background: var(--bg); color: var(--text); }
h1,h2,h3 { margin: 0 0 var(--s-3); }

/* Botones */
.btn { min-height: var(--tap); cursor: pointer; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: 10px 14px; font-size: 16px; }
.btn-primary { background: var(--brand-700); color: #fff; border-color: var(--brand-700); font-weight: 700; }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ok { background: var(--ok); color: #fff; border-color: var(--ok); font-weight: 700; }

/* Chips (selector de carta) */
.chip { min-height: var(--tap); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 12px; font-size: 15px; cursor: pointer; }
.chip--sel { background: var(--brand-700); color: #fff; border-color: var(--brand-700); }

/* Banda activa / resuelta del selector de carta (camarero + panel). La elegida (.chip--sel) gana siempre. */
.chips.step-active .chip:not(.chip--sel) { background: var(--brand-100); border-color: var(--brand-300); }
.chips.step-active .chip:not(.chip--sel):hover { background: var(--brand-300); }
.chips.step-done .chip:not(.chip--sel) { background: var(--bg); color: var(--text); }
.chips.step-done .chip:not(.chip--sel):hover { background: var(--border); }

/* Fichas de mesa/zona */
.tile { min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.tile--libre { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }
.tile--ocupada { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.tile--sel { border-color: var(--brand-700); color: var(--brand-700); }

/* Control segmentado */
.segmented { display: flex; background: var(--brand-100); border-radius: var(--r-md); padding: 3px; gap: 3px; }
.seg-btn { flex: 1; min-height: var(--tap); border: 0; background: transparent; border-radius: var(--r-sm); color: var(--muted); font-weight: 700; font-size: 15px; }
.seg-btn.is-on { background: var(--surface); color: var(--brand-700); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* Carril de pasos */
.steprail { display: flex; gap: 6px; }
.step { flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 6px 2px; border-radius: 7px; background: var(--bg); color: #94a3b8; }
.step.is-cur { background: var(--brand-100); color: var(--brand-700); }
.step.is-done { background: var(--ok-bg); color: var(--ok); }

/* Hoja inferior / barras fijas */
.sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-up); padding: var(--s-3); z-index: 30; }
.sheet .grab { width: 38px; height: 4px; background: #cbd5e1; border-radius: 999px; margin: 0 auto var(--s-3); }
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--shadow-up); padding: var(--s-2) var(--s-3); z-index: 20; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--brand-900); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 600; z-index: 40; opacity: 0; transition: opacity .2s; }
.toast.is-show { opacity: 1; }

/* ── Atribución de camarero por ronda (chip color + iniciales) ───────────── */
.wchip {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  font-size: .72em;
  font-weight: 700;
  line-height: 1;
  padding: .15em .45em;
  border-radius: 999px;
  color: #fff;
  background: var(--wc-0);
  letter-spacing: .02em;
}
.wchip--0 { background: var(--wc-0); }
.wchip--1 { background: var(--wc-1); }
.wchip--2 { background: var(--wc-2); }
.wchip--3 { background: var(--wc-3); }
.wchip--4 { background: var(--wc-4); }
.wchip--5 { background: var(--wc-5); }
.wchip--6 { background: var(--wc-6); }
.wchip--7 { background: var(--wc-7); }
.wchip--panel { background: #6b7280; }   /* gris neutro: creada desde el panel */
.wchip--neutral {                         /* /cuenta: nombre sin color de equipo */
  background: transparent;
  color: var(--muted, #6b7280);
  border: 1px solid var(--border, #d1d5db);
  font-weight: 600;
}
.wchip--cliente { background: var(--brand-100); color: var(--brand-700); border: 1px solid var(--brand-300); } /* autopedido del cliente */

.badge-especial {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-700);
  vertical-align: middle;
}