/* ===========================================================================
   iGEA Comanda PWA — Design system
   Optimizado para tablet ≥8" (horizontal) y celular (vertical).
   Sin dependencias externas: la PWA instala y su cascarón funciona offline.
   =========================================================================== */
:root{
  --azul:#2563eb; --azul-d:#1d4ed8; --azul-dd:#1e3a8a;
  --tinta:#0f172a; --gris:#475569; --gris2:#94a3b8; --linea:#e2e8f0;
  --fondo:#eef2f7; --panel:#ffffff;
  --ok:#16a34a; --ok-d:#15803d; --warn:#f59e0b; --warn-d:#d97706;
  --dang:#e11d48; --dang-d:#be123c; --viol:#7c3aed; --naranja:#ea580c;
  --r:16px; --r-sm:10px; --r-lg:22px;
  --sombra:0 2px 10px rgba(15,23,42,.06); --sombra-h:0 10px 30px rgba(15,23,42,.14);
  --safe-b:env(safe-area-inset-bottom,0px);
  --rol:#2563eb;              /* acento del rol activo (lo pisa data-role) */
}
:root[data-role="MOZO"]      { --rol:#2563eb; }
:root[data-role="BAR"]       { --rol:#7c3aed; }
:root[data-role="COCINA"]    { --rol:#ea580c; }
:root[data-role="CAJA"]      { --rol:#16a34a; }
:root[data-role="SUPERVISOR"]{ --rol:#0ea5e9; }
:root[data-role="ADMIN"]     { --rol:#4f46e5; }

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--fondo); color:var(--tinta); font-size:15px; line-height:1.35;
  -webkit-user-select:none; user-select:none; overflow-x:hidden;
}
input,select,textarea,button{ font-family:inherit; font-size:16px; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.01em; }
a{ color:var(--azul-d); text-decoration:none; }
.hidden{ display:none !important; }
.grow{ flex:1 1 auto; }
.muted{ color:var(--gris2); }
.center{ text-align:center; }

/* ---------- Botones ---------- */
.btn{
  border:none; border-radius:var(--r-sm); padding:12px 18px; font-size:15px; font-weight:700;
  cursor:pointer; color:#fff; background:var(--gris); display:inline-flex; align-items:center;
  justify-content:center; gap:8px; min-height:48px; transition:transform .07s, filter .15s, box-shadow .15s;
}
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn.block{ width:100%; }
.btn.lg{ min-height:56px; font-size:17px; border-radius:var(--r); }
.btn.sm{ min-height:38px; padding:7px 12px; font-size:13px; border-radius:8px; }
.btn-primary{ background:linear-gradient(135deg,var(--azul),var(--azul-d)); box-shadow:0 4px 14px rgba(37,99,235,.35); }
.btn-rol{ background:linear-gradient(135deg,var(--rol),color-mix(in srgb,var(--rol) 70%, #000 30%)); box-shadow:0 4px 14px color-mix(in srgb,var(--rol) 45%, transparent); }
.btn-ok{ background:linear-gradient(135deg,var(--ok),var(--ok-d)); box-shadow:0 4px 14px rgba(22,163,74,.32); }
.btn-warn{ background:linear-gradient(135deg,var(--warn),var(--warn-d)); }
.btn-dang{ background:linear-gradient(135deg,var(--dang),var(--dang-d)); }
.btn-ghost{ background:#fff; color:var(--gris); border:1px solid var(--linea); box-shadow:none; }
.btn-ghost:hover{ background:#f8fafc; }
.btn-soft{ background:#eaf1fe; color:var(--azul-d); box-shadow:none; }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px;
  padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:linear-gradient(135deg,var(--rol),color-mix(in srgb,var(--rol) 65%, #0b1220));
  color:#fff; box-shadow:0 2px 14px rgba(15,23,42,.2);
}
.topbar .brand{ font-size:17px; font-weight:900; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.topbar .brand .pro{ background:#fde68a; color:#7c2d12; font-size:10px; font-weight:900; padding:2px 7px; border-radius:7px; }
.chip{
  display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.16);
  padding:7px 12px; border-radius:20px; font-size:13px; font-weight:600; max-width:46vw;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chip.tap{ cursor:pointer; border:1px solid rgba(255,255,255,.35); }
.chip.tap:active{ background:rgba(255,255,255,.3); }
.chip .rolbadge{ font-size:11px; font-weight:900; text-transform:uppercase; }

/* ---------- Layout ---------- */
.app{ min-height:100%; display:flex; flex-direction:column; }
.view{ flex:1 1 auto; padding:14px; padding-bottom:calc(84px + var(--safe-b)); max-width:1180px; margin:0 auto; width:100%; }
.viewhead{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.viewhead h2{ font-size:20px; }
.viewhead .sub{ color:var(--gris2); font-size:13px; }
.section-title{ margin:18px 4px 10px; color:var(--gris); font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }

/* ---------- Bottom nav (rol) ---------- */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:35; display:flex; justify-content:space-around;
  background:#fff; border-top:1px solid var(--linea); padding:6px 6px calc(6px + var(--safe-b));
  box-shadow:0 -4px 20px rgba(15,23,42,.06);
}
.bottomnav button{
  flex:1; background:none; border:none; color:var(--gris2); font-size:11px; font-weight:700;
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px; cursor:pointer; border-radius:10px;
}
.bottomnav button .ico{ font-size:22px; line-height:1; }
.bottomnav button.on{ color:var(--rol); }
.bottomnav button.on .ico{ transform:translateY(-1px); }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap:12px; }
.grid-mesas{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.grid-cat{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.grid-prod{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.grid-kds{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.card{ background:var(--panel); border-radius:var(--r); box-shadow:var(--sombra); }

/* Mesa */
.mesa{
  position:relative; overflow:hidden; padding:16px 14px; cursor:pointer; border:2px solid transparent;
  transition:transform .1s, box-shadow .15s; border-radius:var(--r); background:#fff; box-shadow:var(--sombra);
}
.mesa:active{ transform:scale(.98); }
.mesa::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:#cbd5e1; }
.mesa.libre::before{ background:var(--ok); }
.mesa.ocupada::before{ background:var(--dang); }
.mesa.ajena::before{ background:var(--warn); }
.mesa .num{ font-size:26px; font-weight:900; color:var(--tinta); }
.mesa .est{ font-size:12px; font-weight:700; color:var(--gris); margin-top:4px; }
.mesa .mozo{ margin-top:8px; font-size:11px; font-weight:700; color:var(--gris); background:#f1f5f9; padding:3px 8px;
  border-radius:8px; display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mesa.ajena .mozo{ background:#fef3c7; color:#92400e; }
.mesa .tot{ position:absolute; right:10px; top:12px; font-size:13px; font-weight:900; color:var(--azul-d); }
.mesa .lock{ position:absolute; right:10px; bottom:10px; font-size:14px; opacity:.7; }

/* Categoria / producto */
.cat{ padding:18px 12px; text-align:center; cursor:pointer; font-weight:800; color:var(--tinta);
  background:#fff; border-radius:var(--r); box-shadow:var(--sombra); border:none; transition:transform .1s; }
.cat:active{ transform:scale(.98); }
.cat .emoji{ font-size:26px; display:block; margin-bottom:6px; }
.prod{ padding:14px 12px; text-align:left; cursor:pointer; background:#fff; border-radius:var(--r);
  box-shadow:var(--sombra); border:none; transition:transform .1s; display:flex; flex-direction:column; gap:6px; min-height:92px; }
.prod:active{ transform:scale(.98); }
.prod .nom{ font-size:14px; font-weight:800; color:var(--tinta); }
.prod .meta{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.prod .precio{ color:var(--azul-d); font-weight:900; font-size:16px; }
.prod .area-tag{ font-size:10px; font-weight:800; text-transform:uppercase; padding:2px 7px; border-radius:6px;
  background:#f1f5f9; color:var(--gris); }

/* ---------- Pedido (panel lateral / inferior) ---------- */
.pedido-panel{ background:#fff; border-radius:var(--r); box-shadow:var(--sombra); padding:14px; }
.pedido-line{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--linea); }
.pedido-line:last-child{ border-bottom:none; }
.pedido-line .pl-info{ flex:1; min-width:0; cursor:pointer; }
.pedido-line .pl-nom{ font-weight:700; font-size:14px; }
.pedido-line .pl-obs{ color:var(--naranja); font-size:12px; }
.pedido-line .pl-sent{ display:inline-block; font-size:10px; font-weight:800; color:var(--ok-d); background:#dcfce7; padding:1px 6px; border-radius:6px; margin-left:6px; }
.pedido-line .pl-qty{ font-weight:900; color:var(--azul-d); }
.pedido-line .pl-sub{ font-weight:800; min-width:70px; text-align:right; }
.pedido-total{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding-top:12px;
  border-top:2px solid var(--linea); font-size:20px; font-weight:900; color:var(--azul-dd); }
.empty{ text-align:center; color:var(--gris2); padding:26px 10px; }

/* stepper cantidad */
.stepper{ display:flex; align-items:center; gap:12px; }
.stepper button{ width:52px; height:52px; border-radius:14px; border:none; background:#eaf1fe; color:var(--azul-d);
  font-size:24px; font-weight:900; cursor:pointer; }
.stepper input{ width:84px; text-align:center; font-size:22px; font-weight:900; padding:10px; border:1px solid var(--linea);
  border-radius:12px; background:#f8fafc; }

/* ---------- KDS ---------- */
.kds-col-wrap{ display:grid; grid-template-columns:1fr; gap:14px; }
.kds-card{ background:#fff; border-radius:var(--r); box-shadow:var(--sombra); overflow:hidden; border-left:8px solid var(--gris2);
  display:flex; flex-direction:column; }
.kds-card.e0{ border-left-color:var(--gris2); }        /* enviado */
.kds-card.e1{ border-left-color:var(--warn); }          /* preparación */
.kds-card.e2{ border-left-color:var(--ok); }            /* listo */
.kds-card.tarde{ animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:var(--sombra);} 50%{ box-shadow:0 0 0 4px rgba(225,29,72,.25);} }
.kds-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:#f8fafc; }
.kds-head .mesa-n{ font-size:20px; font-weight:900; }
.kds-head .tiempo{ font-size:13px; font-weight:800; padding:3px 9px; border-radius:20px; background:#dcfce7; color:var(--ok-d); }
.kds-head .tiempo.medio{ background:#fef3c7; color:var(--warn-d); }
.kds-head .tiempo.tarde{ background:#ffe4e6; color:var(--dang-d); }
.kds-body{ padding:6px 14px 12px; }
.kds-item{ display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px dashed var(--linea); }
.kds-item:last-child{ border-bottom:none; }
.kds-item .q{ font-size:20px; font-weight:900; color:var(--tinta); min-width:34px; }
.kds-item .n{ flex:1; font-weight:700; }
.kds-item .o{ color:var(--naranja); font-size:13px; font-weight:600; }
.kds-item.done{ opacity:.4; text-decoration:line-through; }
.kds-foot{ display:flex; gap:8px; padding:10px 14px; border-top:1px solid var(--linea); }

/* ---------- Recojo (mozo) ---------- */
.recojo-banner{ background:linear-gradient(135deg,#dcfce7,#bbf7d0); border:1px solid #86efac; color:#14532d;
  border-radius:var(--r); padding:12px 14px; margin-bottom:12px; font-weight:800; display:flex; align-items:center; gap:8px; }

/* ---------- Tarjetas info ---------- */
.banner{ border-radius:var(--r); padding:12px 14px; margin-bottom:12px; font-size:14px; font-weight:600; }
.banner.info{ background:#e0f2fe; color:#075985; border-left:5px solid #0ea5e9; }
.banner.warn{ background:#fef3c7; color:#92400e; border-left:5px solid var(--warn); }
.banner.lock{ background:#fee2e2; color:#991b1b; border-left:5px solid var(--dang); }

/* ---------- Modal ---------- */
.modal-back{ position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:200; display:flex; align-items:center;
  justify-content:center; padding:16px; opacity:0; pointer-events:none; transition:opacity .18s; }
.modal-back.open{ opacity:1; pointer-events:auto; }
.modal{ background:#fff; border-radius:var(--r-lg); width:100%; max-width:460px; max-height:90vh; overflow-y:auto;
  box-shadow:var(--sombra-h); transform:translateY(12px) scale(.98); transition:transform .18s; }
.modal-back.open .modal{ transform:none; }
.modal-head{ padding:18px 20px 6px; }
.modal-head h3{ font-size:18px; color:var(--azul-dd); }
.modal-body{ padding:10px 20px; }
.modal-foot{ padding:14px 20px 20px; display:flex; gap:10px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--gris); margin-bottom:6px; }
.field input,.field select,.field textarea{ width:100%; padding:13px; border:1px solid var(--linea); border-radius:12px;
  background:#f8fafc; outline:none; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--azul); background:#fff; }
.field textarea{ resize:vertical; min-height:70px; }

/* ---------- Toast ---------- */
#toasts{ position:fixed; left:0; right:0; bottom:calc(90px + var(--safe-b)); z-index:300; display:flex; flex-direction:column;
  align-items:center; gap:8px; pointer-events:none; }
.toast{ background:var(--tinta); color:#fff; padding:12px 18px; border-radius:14px; font-weight:700; font-size:14px;
  box-shadow:var(--sombra-h); max-width:90vw; animation:toastin .25s; display:flex; align-items:center; gap:8px; }
.toast.ok{ background:var(--ok-d); } .toast.err{ background:var(--dang-d); } .toast.warn{ background:var(--warn-d); }
@keyframes toastin{ from{ transform:translateY(14px); opacity:0; } }

/* ---------- Loader ---------- */
#loader{ position:fixed; inset:0; background:rgba(255,255,255,.72); z-index:400; display:none; align-items:center; justify-content:center; }
#loader.on{ display:flex; }
.spin{ width:52px; height:52px; border:5px solid #dbe4f0; border-top-color:var(--rol); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Login ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:radial-gradient(1200px 500px at 50% -10%, #dbeafe, transparent), linear-gradient(160deg,#1e3a8a,#0f172a); }
.login-card{ background:#fff; border-radius:24px; box-shadow:0 24px 60px rgba(2,6,23,.5); width:100%; max-width:420px;
  padding:30px 26px calc(26px + var(--safe-b)); }
.login-logo{ text-align:center; margin-bottom:18px; }
.login-logo .mark{ font-size:44px; }
.login-logo h1{ font-size:24px; margin-top:6px; }
.login-logo h1 .pro{ background:#fde68a; color:#7c2d12; font-size:12px; font-weight:900; padding:2px 8px; border-radius:8px; vertical-align:middle; }
.login-logo p{ color:var(--gris2); font-size:13px; margin:4px 0 0; }
.login-card .field input{ font-size:16px; padding:15px; }
.rolegrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:6px; }
.rolepill{ text-align:center; font-size:11px; font-weight:800; padding:8px 4px; border-radius:10px; background:#f1f5f9; color:var(--gris); }

/* ---------- Responsive: tablet horizontal → pedido en 2 columnas ---------- */
@media (min-width:900px){
  .pedido-layout{ display:grid; grid-template-columns:1fr 360px; gap:16px; align-items:start; }
  .pedido-layout .pedido-panel{ position:sticky; top:74px; }
  .bottomnav{ max-width:1180px; left:50%; transform:translateX(-50%); border-radius:18px 18px 0 0; }
  .kds-col-wrap.cols{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .chip{ max-width:38vw; }
  .grid-mesas{ grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); }
  .grid-prod{ grid-template-columns:repeat(auto-fill,minmax(46%,1fr)); }
}

/* ---------- Dark (opcional, para KDS de cocina en ambiente oscuro) ---------- */
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"]{ --fondo:#0b1220; --panel:#111a2b; --tinta:#e8eefc; --gris:#a9b6cc; --linea:#22304a; }
}