:root{--bg:#f5f3f6;--card:#fff;--ink:#111827;--mute:#6b7280;--line:#e5e7eb;--pri:#d62d20;--pri-d:#b3201a;--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--blue:#2563eb;--dark:#2b1233;--r:12px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);overscroll-behavior:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0 0 .5em}h2{font-size:1.15rem}h3{font-size:1rem}
.hide{display:none!important}.mute{color:var(--mute)}.right{text-align:right}.center{text-align:center}.bold{font-weight:700}
.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}
.row{display:flex;gap:8px;align-items:center}.row.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.between{justify-content:space-between}
.gap{margin-top:12px}

/* Shell */
#shell{display:flex;flex-direction:column;height:100dvh}
#top{background:var(--dark);color:#fff;display:flex;align-items:center;gap:10px;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top))}
#top .brand{font-weight:700;white-space:nowrap}
#ptitle{display:none}
#top .sp{flex:1}
#top .who{font-size:.85rem;opacity:.85;white-space:nowrap}
#dot{width:10px;height:10px;border-radius:50%;background:var(--bad)}#dot.on{background:#4ade80}
#view{flex:1;overflow:auto;padding:12px;-webkit-overflow-scrolling:touch}
#nav{display:flex;background:#fff;border-top:1px solid var(--line);overflow-x:auto;padding-bottom:env(safe-area-inset-bottom)}
#nav .logo,#nav .sec{display:none}
#nav button{flex:1;min-width:66px;border:0;background:none;padding:7px 4px;font-size:.7rem;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:2px}
#nav button svg{width:23px;height:23px;display:block}
#nav button.on{color:var(--pri);font-weight:700;box-shadow:inset 0 3px 0 var(--pri)}
@media(min-width:900px){
  #shell{display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"nav top" "nav view"}
  #top{grid-area:top;background:#fff;color:var(--ink);border-bottom:1px solid var(--line);padding:12px 28px}
  #top .brand{display:none}
  #ptitle{display:block;font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
  #top .who{opacity:1;color:var(--mute)}
  #nav{grid-area:nav;flex-direction:column;background:#25102c;border:0;padding:18px 12px;gap:3px;overflow:auto}
  #nav .logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:1.05rem;padding:4px 10px 18px}
  #nav .logo i{width:34px;height:34px;border-radius:10px;background:var(--pri);display:grid;place-items:center;font-style:normal;font-size:1.1rem;flex:none}
  #nav .logo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #nav .sec{display:block;color:#6b7488;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:14px 12px 4px}
  #nav button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 12px;border-radius:10px;color:#aab3c7;font-size:.93rem;font-weight:500;min-width:0;box-shadow:none}
  #nav button svg{width:19px;height:19px}
  #nav button:hover{background:#38193f;color:#fff}
  #nav button.on{background:var(--pri);color:#fff;font-weight:600;box-shadow:none}
  #view{grid-area:view;padding:24px 28px}
  body:not(.is-pos) #view>*{max-width:1180px;margin-left:auto;margin-right:auto}
}

/* Controles */
.btn{color:var(--ink);border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 14px;min-height:44px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:active{transform:scale(.97)}.btn[disabled]{opacity:.5;pointer-events:none}
.btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}.btn.primary:active{background:var(--pri-d)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.danger{background:#fff;border-color:var(--bad);color:var(--bad)}
.btn.dark{background:var(--dark);border-color:var(--dark);color:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:var(--blue)}
.btn.sm{min-height:34px;padding:5px 10px;font-size:.85rem;border-radius:8px}
.btn.lg{min-height:54px;font-size:1.1rem}
.btn.block{width:100%}
input,select,textarea{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;min-height:44px;background:#fff}
input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:var(--pri)}
label.f{display:block;margin-top:10px;font-size:.85rem;color:var(--mute);font-weight:600}label.f input,label.f select,label.f textarea{margin-top:4px;color:var(--ink);font-weight:400}
label.chk{display:flex;align-items:center;gap:8px;margin-top:12px;font-weight:600}
.card{background:var(--card);border-radius:var(--r);padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.card+.card{margin-top:12px}
.grid{display:grid;gap:10px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.g4{grid-template-columns:repeat(4,1fr)}.cols2{grid-template-columns:1fr 1fr}}
.stat{background:var(--card);border-radius:var(--r);padding:12px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.stat small{display:block;color:var(--mute);font-size:.78rem}.stat b{font-size:1.35rem}
.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:99px;background:#e5e7eb;color:#374151}
.badge.ok{background:#dcfce7;color:#166534}.badge.warn{background:#fef3c7;color:#92400e}.badge.bad{background:#fee2e2;color:#991b1b}.badge.blue{background:#dbeafe;color:#1e40af}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px}
.tabs button{border:0;background:#e5e7eb;border-radius:99px;padding:8px 14px;white-space:nowrap;font-weight:600;min-height:38px}
.tabs button.on{background:var(--dark);color:#fff}body.kds .tabs button.on{background:var(--pri)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{font-size:.75rem;text-transform:uppercase;color:var(--mute);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.click{cursor:pointer}tr.click:hover{background:#f9fafb}
.scroll-x{overflow-x:auto}
.list>.item{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.list>.item:last-child{border:0}
.empty{padding:30px;text-align:center;color:var(--mute)}

/* Login */
.login{max-width:420px;margin:0 auto;padding:20px 14px}
.login h1{text-align:center;margin:20px 0}
.users{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.users .btn{min-height:70px;flex-direction:column}
.pin-dots{display:flex;justify-content:center;gap:12px;margin:16px 0;height:22px}
.pin-dots i{width:16px;height:16px;border-radius:50%;background:#d1d5db}.pin-dots i.on{background:var(--pri)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pad .btn{min-height:62px;font-size:1.5rem}

/* Modal */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.md{background:#fff;width:100%;max-width:560px;max-height:92dvh;border-radius:18px 18px 0 0;display:flex;flex-direction:column;animation:up .15s ease-out}
.md.wide{max-width:820px}
@media(min-width:700px){.ov{align-items:center}.md{border-radius:18px}}
.md>h2{padding:14px 16px 0;margin:0}.md .mb{padding:8px 16px;overflow:auto;flex:1}.md .mf{padding:12px 16px;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--line);padding-bottom:max(12px,env(safe-area-inset-bottom))}
.md .mf .btn{flex:1}
@keyframes up{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
#toasts{position:fixed;top:10px;left:0;right:0;z-index:99;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{background:var(--dark);color:#fff;padding:10px 16px;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.3);max-width:92vw;font-weight:600}
.toast.bad{background:var(--bad)}.toast.ok{background:var(--ok)}.toast.warn{background:var(--warn)}

/* POS */
.mesas{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:10px}
.mesa{border:2px solid var(--ok);background:#fff;border-radius:14px;padding:10px 6px;min-height:92px;text-align:center;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:2px}
.mesa b{font-size:1.05rem}.mesa.busy{border-color:var(--warn);background:#fff7ed}.mesa.ready{border-color:var(--blue);background:#eff6ff;animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(37,99,235,.25)}}
.pos{display:flex;flex-direction:column;gap:10px;min-height:100%}.pos-bar{margin-top:auto}
.pos-head{display:flex;gap:8px;align-items:center;position:sticky;top:-12px;background:var(--bg);padding:6px 0;z-index:5}
.cats{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.cats button{border:0;background:#e5e7eb;border-radius:99px;padding:9px 16px;font-weight:700;white-space:nowrap;min-height:40px}
.cats button.on{background:var(--pri);color:#fff}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.prod{border:0;background:#fff;border-radius:12px;padding:10px 8px;min-height:84px;box-shadow:0 1px 2px rgba(0,0,0,.08);text-align:center;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.prod:active{background:#fee2e0}.prod b{font-size:.95rem;line-height:1.15}.prod small{color:var(--pri);font-weight:700;font-size:.95rem}
.prod.out{opacity:.45}.prod .q{position:absolute;top:4px;right:6px;font-size:.68rem;font-weight:700;color:var(--warn)}
.prod .n{position:absolute;top:-6px;left:-6px;background:var(--pri);color:#fff;border-radius:99px;min-width:24px;height:24px;font-size:.8rem;display:grid;place-items:center;font-weight:700}
.cart{background:#fff;border-radius:var(--r);padding:10px}
.line{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}.line:last-child{border:0}
.line .nm{flex:1;min-width:0}.line .nm small{display:block;color:var(--mute)}
.qty{display:flex;align-items:center;gap:4px}.qty button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:1.2rem;font-weight:700}.qty span{min-width:24px;text-align:center;font-weight:700}
.pos-bar{position:sticky;bottom:-12px;background:var(--bg);padding:8px 0 4px;display:flex;gap:8px;z-index:5}
.pos-bar .btn{flex:1}
.pos-cols{display:flex;flex-direction:column;gap:10px}
@media(min-width:900px){.pos-cols{flex-direction:row;align-items:flex-start}.pos-cols .left{flex:1}.pos-cols .right-col{width:380px;position:sticky;top:0}}
.total-big{font-size:2rem;font-weight:800}
.pay-row{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center;margin-top:8px}
.change{font-size:1.6rem;font-weight:800;text-align:center;padding:10px;border-radius:12px;margin-top:10px;background:#f3f4f6}
.change.ok{background:#dcfce7;color:#166534}.change.bad{background:#fee2e2;color:#991b1b}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.chips button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 12px;min-height:36px}

/* Cocina */
body.kds{background:#111827}body.kds #view{background:#111827}
.kds-bar{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.kds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;align-items:start}
.tk{background:#fff;border-radius:12px;overflow:hidden;border-top:8px solid var(--ok)}
.tk.w{border-color:var(--warn)}.tk.late{border-color:var(--bad)}.tk.done{opacity:.6;border-color:#9ca3af}
.tk .h{padding:8px 12px;display:flex;justify-content:space-between;align-items:baseline;background:#f9fafb}
.tk .h b{font-size:1.3rem}.tk .it{padding:8px 12px;border-top:1px solid var(--line);font-size:1.15rem}
.tk .it b{font-size:1.4rem;margin-right:4px}.tk .it.x{text-decoration:line-through;color:var(--bad)}.tk .it em{display:block;color:var(--bad);font-style:normal;font-weight:700;font-size:.95rem}
.tk .f{padding:8px;display:flex;gap:6px}.tk .f .btn{flex:1}

/* Reportes */
.bar{height:8px;background:var(--pri);border-radius:4px;min-width:2px}
.hours{display:flex;align-items:flex-end;gap:4px;height:90px}.hours div{flex:1;background:var(--pri);border-radius:3px 3px 0 0;min-height:2px;position:relative}.hours small{position:absolute;bottom:-16px;left:0;right:0;text-align:center;font-size:.6rem;color:var(--mute)}

/* Impresión por navegador (ticket 80mm) */
#print-area{display:none}
@media print{
  body>*:not(#print-area){display:none!important}
  #print-area{display:block!important;width:72mm;margin:0;font:12px/1.3 "Courier New",monospace;color:#000}
  #print-area h3{text-align:center;margin:0 0 4px;font-size:15px}#print-area .c{text-align:center}
  #print-area .r{display:flex;justify-content:space-between;gap:6px}#print-area hr{border:0;border-top:1px dashed #000;margin:4px 0}
  @page{margin:2mm}body{background:#fff}
}

/* ===== Diseño de administración (v2): solo estilos, sin costo en memoria ===== */
:root{--bg:#f4f5f8;--ink:#1a2030;--mute:#667085;--line:#e7e9ef;--r:14px;--sh:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.05)}
*{scrollbar-width:thin;scrollbar-color:#c9ced8 transparent}
body{-webkit-font-smoothing:antialiased}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,#nav button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(214,45,32,.22)}
input,select,textarea{border-color:#d5d9e2;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(214,45,32,.14);outline:none}
.card,.stat{border:1px solid var(--line);box-shadow:var(--sh)}
.card{padding:18px}.card+.card{margin-top:14px}
.card>h3:first-child,.card>.row:first-child>h3{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:.9em}
.stat{padding:14px 16px}
.stat small:first-child{text-transform:uppercase;letter-spacing:.05em;font-size:.68rem;font-weight:700;color:var(--mute)}
.stat b{font-size:1.55rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:2px 0}
.badge{padding:3px 9px;font-size:.7rem;letter-spacing:.01em}
.tabs{background:#e9ecf2;padding:4px;border-radius:12px;width:max-content;max-width:100%;gap:2px}
.tabs button{background:transparent;color:var(--mute);border-radius:9px;min-height:36px;padding:6px 14px}
.tabs button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.12)}
body.kds .tabs{background:#1f2937}body.kds .tabs button{color:#9ca3af}body.kds .tabs button.on{background:var(--pri);color:#fff}
table{border-collapse:separate;border-spacing:0}
th{background:#f8f9fb;font-size:.68rem;letter-spacing:.06em;padding:9px 10px;border-bottom:1px solid var(--line)}
th:first-child{border-radius:8px 0 0 8px}th:last-child{border-radius:0 8px 8px 0}
td{padding:11px 10px;font-variant-numeric:tabular-nums}
tr:last-child>td{border-bottom:0}
@media(hover:hover){tr.click:hover{background:#fff4f3}.btn:not(.primary):not(.ok):not(.danger):not(.dark):not(.ghost):hover{background:#f6f7fa;border-color:#d5d9e2}.btn.primary:hover{background:var(--pri-d)}.btn.danger:hover{background:#fef2f2}.mesa:hover,.prod:hover{box-shadow:0 2px 8px rgba(16,24,40,.12)}}
.empty{border:1px dashed #d5d9e2;border-radius:12px;background:#fafbfc;margin:6px 0}
.ov{background:rgba(15,20,35,.55)}
.md{box-shadow:0 20px 50px rgba(15,20,35,.3)}
@media(min-width:700px){.md{border-radius:20px}}
.md>h2{font-size:1.2rem;padding:20px 20px 4px;letter-spacing:-.01em}.md .mb{padding:10px 20px 16px}.md .mf{background:#fafbfc;border-radius:0 0 20px 20px}
.bar{background:linear-gradient(90deg,#f2715f,var(--pri));height:10px;border-radius:6px}
.hours div{background:linear-gradient(0deg,var(--pri),#f2715f)}
.change{border:1px solid transparent}.change.ok{border-color:#bbf7d0}.change.bad{border-color:#fecaca}
.toast{border-radius:12px;box-shadow:0 8px 24px rgba(15,20,35,.28)}

/* Inicio de sesión */
body.login-bg{background:radial-gradient(120% 90% at 50% 0%,#4a1c58 0%,#1d0b24 72%)}
body.login-bg .login{background:#fff;border-radius:22px;margin:7vh auto 0;padding:26px 20px 22px;box-shadow:0 24px 60px rgba(0,0,0,.45);max-width:400px}
.login h1{font-size:1.45rem;letter-spacing:-.01em}
.users .btn{border-radius:14px;box-shadow:var(--sh)}
.pad .btn{border-radius:16px;background:#f6f7fa;border-color:transparent}.pad .btn:active{background:#eceef3}
.pin-dots i{width:14px;height:14px}

/* Panel de inicio */
.hello{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.hello h2{font-size:1.5rem;letter-spacing:-.02em;margin:0}.hello p{margin:2px 0 0;color:var(--mute)}
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kpi{display:flex;gap:12px;align-items:center}
.kpi .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:#fdecea;color:var(--pri)}
.kpi .ico.g{background:#e8f8ee;color:var(--ok)}.kpi .ico.b{background:#e9f0ff;color:var(--blue)}.kpi .ico.r{background:#fdecec;color:var(--bad)}
.kpi svg,.qa svg{width:21px;height:21px}
.kpi small{display:block}.kpi b{display:block;font-size:1.4rem;letter-spacing:-.02em;line-height:1.15}
.dash{display:grid;gap:14px;grid-template-columns:1fr;margin-top:14px}
@media(min-width:900px){.dash{grid-template-columns:1fr 1fr}}
.dash .card{margin:0}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px}
.mini a{display:block;text-align:center;padding:10px 4px;border-radius:10px;border:1.5px solid #bbf0cb;background:#f2fcf5;font-size:.82rem;font-weight:600;color:#166534;text-decoration:none}
.mini a.busy{border-color:#fed7aa;background:#fff7ed;color:#9a3412}.mini a small{display:block;font-weight:500}
.lrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.lrow:last-child{border:0}
a.lrow{color:inherit;text-decoration:none}
.qa-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:14px}
.qa{display:flex;gap:10px;align-items:center;padding:14px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);font-weight:600;cursor:pointer;color:var(--ink)}
.qa svg{color:var(--pri)}
@media(hover:hover){.qa:hover{border-color:#f0b0a9;background:#fffafa}}
.prod{padding-top:18px}

/* ===== Gráficas del panel (CSS puro) ===== */
.span2{grid-column:1/-1}
.bars{display:flex;gap:8px;align-items:flex-end;height:170px;padding-top:6px}
.bc{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.bb{width:100%;max-width:46px;border-radius:7px 7px 0 0;background:#f4c4bd;min-height:3px}
.bb.hl{background:var(--pri)}
.bv{font-size:.68rem;color:var(--mute);font-weight:600;margin-bottom:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.bl{font-size:.72rem;color:var(--mute);margin-top:6px}.bl.hl{color:var(--ink);font-weight:700}
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donut{width:128px;height:128px;border-radius:50%;position:relative;flex:none}
.donut::after{content:"";position:absolute;inset:26px;background:var(--card);border-radius:50%}
.donut span{position:absolute;inset:0;display:grid;place-items:center;z-index:1;font-weight:800;font-size:.95rem;text-align:center;line-height:1.1}
.legend{flex:1;min-width:150px}
.legend div{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.9rem}
.legend i{width:10px;height:10px;border-radius:3px;flex:none}.legend b{margin-left:auto;font-variant-numeric:tabular-nums}

/* ===== Modo oscuro ===== */
body.dark{--bg:#0f131c;--card:#181e2b;--ink:#e8ebf2;--mute:#98a2b5;--line:#273044;--sh:0 1px 2px rgba(0,0,0,.4);background:#0f131c;color:#e8ebf2;color-scheme:dark}
body.dark #view{background:#0f131c}
body.dark #nav{background:var(--card);border-color:var(--line)}
@media(min-width:900px){body.dark #nav{background:#160a1b}body.dark #top{background:var(--card);border-color:var(--line)}}
body.dark .btn{background:#212a3b;border-color:#2e384d;color:var(--ink)}
body.dark .btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}
body.dark .btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
body.dark .btn.dark{background:#2e384d;border-color:#2e384d;color:#fff}
body.dark .btn.danger{background:transparent;border-color:#a33;color:#ff8a8a}
body.dark .btn.ghost{background:transparent;border-color:transparent;color:#7fb0ff}
body.dark input,body.dark select,body.dark textarea{background:#131925;border-color:#2e384d;color:var(--ink)}
body.dark ::placeholder{color:#6b7488}
body.dark .badge{background:#2a3347;color:#cbd2e0}
body.dark .badge.ok{background:#12351f;color:#7ee2a0}body.dark .badge.warn{background:#3a2c0d;color:#f6c76a}
body.dark .badge.bad{background:#3d1717;color:#ff9b9b}body.dark .badge.blue{background:#15284a;color:#8db8ff}
body.dark .tabs{background:#131925}body.dark .tabs button.on{background:#2a3347;color:#fff}
body.dark th{background:#1d2535}
body.dark tr.click:hover{background:#1f2a3d}
body.dark .empty{background:#131925;border-color:#2e384d}
body.dark .md{background:var(--card)}body.dark .md .mf{background:#131925}
body.dark .ov{background:rgba(0,0,0,.7)}
body.dark .mesa{background:var(--card)}body.dark .mesa.busy{background:#2b1f14}body.dark .mesa.ready{background:#14223c}
body.dark .cats button:not(.on),body.dark .qty button,body.dark .chips button{background:#212a3b;color:var(--ink);border-color:#2e384d}
body.dark .prod,body.dark .cart,body.dark .qa{background:var(--card);color:var(--ink)}
body.dark .prod:active{background:#2b1f14}
body.dark .pos-head,body.dark .pos-bar{background:#0f131c}
body.dark .change{background:#1d2535}body.dark .change.ok{background:#10301d;color:#7ee2a0;border-color:#1c5a35}body.dark .change.bad{background:#3a1616;color:#ff9b9b;border-color:#6b2424}
body.dark .kpi .ico{background:#3a2314}body.dark .kpi .ico.g{background:#12351f}body.dark .kpi .ico.b{background:#15284a}body.dark .kpi .ico.r{background:#3d1717}
body.dark .mini a{background:#10301d;border-color:#1c5a35;color:#7ee2a0}body.dark .mini a.busy{background:#3a2314;border-color:#6b3a1c;color:#fdba74}
body.dark .card[style*="background"],body.dark .stat[style*="background"]{background:#1d2535!important}
body.dark .bb{background:#6e2b27}body.dark .bb.hl{background:var(--pri)}
body.dark .pad .btn{background:#212a3b}body.dark .pin-dots i{background:#3a4458}body.dark .pin-dots i.on{background:var(--pri)}
body.dark.login-bg .login{background:var(--card)}
body.dark hr{border-color:var(--line)}
body.dark .toast{background:#2a3347}
@media(hover:hover){body.dark .btn:not(.primary):not(.ok):not(.danger):not(.dark):not(.ghost):hover{background:#2a3347}body.dark .qa:hover{background:#1f2a3d}}

/* ===== Marca El Churrasco ===== */
:root{--gold:#f6c915;--plum:#2b1233}
.login .brand-logo{display:block;margin:0 auto 4px;width:250px;max-width:82%;height:auto}
#nav .logo i{background:transparent;padding:0}#nav .logo i img{width:34px;height:34px;border-radius:10px;display:block}
#nav button.on{box-shadow:inset 3px 0 0 var(--gold)}
@media(min-width:900px){#nav button.on{box-shadow:inset 3px 0 0 var(--gold)}}
.tabs button.on{box-shadow:0 1px 3px rgba(16,24,40,.12),inset 0 -2px 0 var(--gold)}
.hello h2{font-family:Impact,"Arial Narrow Bold","Arial Black",sans-serif;font-weight:400;letter-spacing:.01em;font-size:1.7rem}
.logo-prev{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.logo-prev img{height:80px;max-width:220px;object-fit:contain;background:#f5f3f6;border-radius:12px;padding:6px}

/* ===== Barras de la comanda (más limpias en escritorio) ===== */
@media(min-width:900px){
  .pos-head{top:0;margin:-8px 0 0;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh)}
  .pos-bar{bottom:0;padding:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 -2px 10px rgba(16,24,40,.06)}
  .pos{gap:14px}
  .pos-cols .right-col{top:84px}
}
body.dark .pos-head,body.dark .pos-bar{background:var(--card)}

/* ===== Pantalla Cobrar ===== */
.cb-cols{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:900px){.cb-cols{grid-template-columns:minmax(0,1fr) 400px;align-items:start}.cb-detail{position:sticky;top:0}}
.cb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.cb-card{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:3px;box-shadow:var(--sh)}
.cb-card.rdy{border-color:#93b4ff}
.cb-card.sel{border-color:var(--pri);box-shadow:0 0 0 3px rgba(214,45,32,.16)}
.cb-total{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cb-grand{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 12px;padding-top:12px;border-top:2px dashed var(--line)}
.cb-grand span{color:var(--mute);font-weight:600}.cb-grand b{font-size:2.1rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
@media(hover:hover){.cb-card:hover{border-color:#f0b0a9}}
body.dark .cb-card.rdy{border-color:#3b5fa8}
.pos-cols .left{min-width:0}.pos-cols{min-width:0}.pos{min-width:0}