/* ═══════════════════════════════════════════
   VARIABLES Y RESET
═══════════════════════════════════════════ */
:root{
  --gold:#F0B429;--gold2:#c8911e;--goldbg:rgba(240,180,41,.08);
  --bg:#0d0d0d;--bg2:#161616;--bg3:#1f1f1f;--bg4:#282828;
  --b1:#2a2a2a;--b2:#333;--b3:#3a3a3a;
  --tx:#f0f0f0;--tx2:#999;--tx3:#555;
  --green:#22c55e;--red:#ef4444;--blue:#3b82f6;--orange:#f59e0b;
  --r:8px;--r2:12px;
  --sh:0 8px 32px rgba(0,0,0,.65);
  --hdr:52px;
  --dash:54px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--tx);font-size:14px}
input,select,textarea{outline:none;font-family:inherit}
button{cursor:pointer;font-family:inherit}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--b3);border-radius:4px}
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:var(--r);font-size:13px;font-weight:600;border:none;transition:all .14s;white-space:nowrap;cursor:pointer}
.btn-gold{background:var(--gold);color:#000}.btn-gold:hover{background:var(--gold2)}
.btn-ghost{background:transparent;color:var(--tx2);border:1px solid var(--b2)}.btn-ghost:hover{background:var(--bg3);color:var(--tx)}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{opacity:.87}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{opacity:.87}
.btn-orange{background:var(--orange);color:#000}.btn-orange:hover{opacity:.87}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{opacity:.87}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-xs{padding:3px 8px;font-size:11px}
.btn-w{width:100%}
.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;background:var(--bg4);border:1px solid var(--b2);color:var(--tx2);font-size:14px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .14s}
.btn-icon:hover{background:var(--gold);color:#000;border-color:var(--gold)}

/* ── FORM ── */
.field{margin-bottom:13px}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--tx2);margin-bottom:5px}
.inp{width:100%;background:var(--bg3);border:1px solid var(--b2);border-radius:var(--r);padding:10px 12px;color:var(--tx);font-size:14px;transition:border-color .14s}
.inp:focus{border-color:var(--gold)}
.inp::placeholder{color:var(--tx3)}
.inp-row{display:flex;gap:8px}
.inp-row .field{flex:1}

/* ── BADGE ── */
.badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.bg-gold{background:rgba(240,180,41,.15);color:var(--gold)}
.bg-green{background:rgba(34,197,94,.12);color:var(--green)}
.bg-red{background:rgba(239,68,68,.12);color:var(--red)}
.bg-blue{background:rgba(59,130,246,.12);color:var(--blue)}

/* ═══════════════════════════════════════════
   LOADING SCREEN
═══════════════════════════════════════════ */
#loading{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.94);flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
}
#loading.on{display:flex}
.ld-logo img{height:56px}
.ld-spin{width:36px;height:36px;border:3px solid var(--b2);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}
.ld-msg{color:var(--tx2);font-size:13px;font-weight:600}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════ */
#loginScreen{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  background:radial-gradient(ellipse at 50% -10%,#1d1500 0%,var(--bg) 65%);
}
.lbox{
  width:370px;max-width:94vw;
  background:var(--bg2);border:1px solid var(--b2);border-radius:20px;
  padding:40px 34px;box-shadow:0 0 80px rgba(240,180,41,.06),var(--sh);
}
.l-logo{text-align:center;margin-bottom:26px}
.l-logo img{max-width:170px}
.l-sub{text-align:center;color:var(--tx2);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:28px}
.l-err{color:var(--red);font-size:12px;display:none;padding:8px 12px;background:rgba(239,68,68,.08);border-radius:6px;border:1px solid rgba(239,68,68,.2);margin-bottom:12px}

/* ═══════════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════════ */
#app{display:none;height:100vh;flex-direction:column}

/* ── HEADER ── */
.hdr{
  height:var(--hdr);background:var(--bg2);border-bottom:1px solid var(--b1);
  display:flex;align-items:center;gap:10px;padding:0 12px;flex-shrink:0;z-index:60;
}
.h-logo img{height:30px}
.h-sep{width:1px;height:20px;background:var(--b2);flex-shrink:0}
.ptoggle{display:flex;background:var(--bg3);border:1px solid var(--b2);border-radius:6px;overflow:hidden}
.ptoggle button{padding:5px 13px;font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;background:transparent;border:none;color:var(--tx2);transition:all .14s}
.ptoggle button.on{background:var(--gold);color:#000}
.h-sp{flex:1}
.h-clk{font-size:12px;font-weight:700;font-family:monospace;color:var(--tx2)}
.h-sync{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--tx3)}
.h-sync .dot{width:6px;height:6px;border-radius:50%;background:var(--tx3);flex-shrink:0}
.h-sync .dot.on{background:var(--green)}
.h-sync .dot.spin2{background:var(--gold);animation:pulse .7s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}

/* ── DASHBOARD STRIP ── */
.dash-wrapper{
  position:relative;height:var(--dash);background:var(--bg2);border-bottom:1px solid var(--b1);
  display:flex;align-items:stretch;flex-shrink:0;overflow:hidden;
}
.dash{
  width:100%;display:flex;align-items:stretch;flex-shrink:0;overflow:hidden;
}
.dash-lock{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.4);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  color:var(--tx2);font-weight:700;font-size:14px;cursor:pointer;
  transition:all .3s ease;pointer-events:auto;z-index:10;
}
.dash{filter:blur(6px);transition:filter .3s ease}
.dash-cell{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:0 18px;border-right:1px solid var(--b1);
}
.dash-cell:last-child{border-right:none}
.dc-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--tx2);margin-bottom:2px}
.dc-val{font-size:20px;font-weight:900;line-height:1}
.dc-val.gold{color:var(--gold)}
.dc-val.green{color:var(--green)}
.dc-val.blue{color:var(--blue)}

/* ── BODY ── */
.app-body{display:flex;flex:1;overflow:hidden}

/* ── SIDEBAR ── */
.sdb{width:52px;background:var(--bg2);border-right:1px solid var(--b1);display:flex;flex-direction:column;align-items:center;padding:6px 0;gap:2px;flex-shrink:0}
.sb{width:40px;height:44px;border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;background:transparent;border:none;color:var(--tx3);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;transition:all .14s}
.sb svg{width:17px;height:17px}
.sb:hover{background:var(--bg3);color:var(--tx2)}
.sb.on{background:var(--goldbg);color:var(--gold)}
.sb-sp{flex:1}

/* ── VIEWS ── */
.view{display:none;flex:1;overflow:hidden}
.view.on{display:flex}

/* ═══════════════════════════════════════════
   POS VIEW
═══════════════════════════════════════════ */
#posView{flex-direction:column}

.pos-tabs{
  height:36px;background:var(--bg2);border-bottom:1px solid var(--b1);
  display:flex;align-items:center;padding:0 10px;gap:4px;flex-shrink:0;overflow-x:auto;
}
.pos-tabs::-webkit-scrollbar{height:0}
.tab{display:flex;align-items:center;gap:4px;padding:4px 11px;background:var(--bg3);border:1px solid var(--b2);border-radius:5px;font-size:11px;font-weight:700;cursor:pointer;color:var(--tx2);white-space:nowrap;transition:all .14s}
.tab.on{background:var(--gold);color:#000;border-color:var(--gold)}
.tab .cx{opacity:.5;line-height:1;font-size:13px}
.tab .cx:hover{opacity:1}
.newtab{width:24px;height:24px;border-radius:5px;background:var(--bg3);border:1px solid var(--b2);color:var(--tx2);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.newtab:hover{background:var(--gold);color:#000;border-color:var(--gold)}

.pos-body{display:flex;flex:1;overflow:hidden}

/* Products panel */
.ppanel{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:9px;gap:7px}
.psearch{
  background:var(--bg3);border:1px solid var(--b2);border-radius:var(--r);
  padding:8px 12px;color:var(--tx);font-size:13px;width:100%;
}
.psearch:focus{border-color:var(--gold)}
.psearch::placeholder{color:var(--tx3)}
.cats{display:flex;gap:5px;overflow-x:auto;flex-shrink:0}
.cats::-webkit-scrollbar{height:0}
.cpill{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;background:var(--bg3);border:1px solid var(--b2);color:var(--tx2);cursor:pointer;white-space:nowrap;transition:all .14s}
.cpill.on{background:var(--gold);color:#000;border-color:var(--gold)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:6px;overflow-y:auto;flex:1}
.pc{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r);padding:8px 9px;cursor:pointer;transition:all .14s;display:flex;flex-direction:column;gap:3px}
.pc:hover{border-color:var(--gold);background:var(--bg3)}
.pc.oos{opacity:.28;pointer-events:none}
.pc-id{font-size:9px;color:var(--tx3);font-family:monospace}
.pc-nm{font-size:11px;font-weight:700;line-height:1.3}
.pc-dt{font-size:10px;color:var(--tx2)}
.pc-pr{font-size:14px;font-weight:900;color:var(--gold);margin-top:auto;padding-top:3px}
.pc-st{font-size:10px;color:var(--tx3)}
.pc-st.low{color:var(--orange)}
.pc-st.oos{color:var(--red)}
.pc-img{width:100%;height:110px;background:var(--bg3);border-radius:4px;margin-bottom:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.pc-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* Cart */
.cart{width:336px;background:var(--bg2);border-left:1px solid var(--b1);display:flex;flex-direction:column;flex-shrink:0}
.cart-top{padding:8px 11px;border-bottom:1px solid var(--b1);display:flex;gap:6px;align-items:center}
.ccust{flex:1;background:var(--bg3);border:1px solid var(--b2);border-radius:var(--r);padding:7px 10px;color:var(--tx);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.ccust:hover{border-color:var(--gold)}
.citems{flex:1;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:4px}
.cempty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--tx3);font-size:12px;flex-direction:column;gap:7px}
.ci{background:var(--bg3);border:1px solid var(--b1);border-radius:var(--r);padding:7px 8px;display:flex;gap:7px;align-items:flex-start}
.ci-inf{flex:1;min-width:0}
.ci-nm{font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-row{display:flex;align-items:center;gap:4px;margin-top:4px}
.qinp{width:32px;text-align:center;background:var(--bg4);border:1px solid var(--b2);border-radius:4px;color:var(--tx);font-size:12px;padding:3px}
.pinp{width:72px;text-align:right;background:var(--bg4);border:1px solid var(--b2);border-radius:4px;color:var(--gold);font-size:12px;font-weight:700;padding:3px 5px}
.ci-rt{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.ci-sub{font-size:12px;font-weight:700}
.ci-del{background:none;border:none;color:var(--tx3);font-size:13px;cursor:pointer}
.ci-del:hover{color:var(--red)}

.cart-iva{
  padding:8px 12px;background:rgba(240,180,41,.04);
  border-top:1px dashed var(--b2);font-size:11px;
}
.iva-row{display:flex;justify-content:space-between;color:var(--tx2);margin-bottom:2px}
.iva-row span:last-child{font-weight:600}

.cart-foot{border-top:1px solid var(--b1);padding:10px 12px}
.tot-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.tot-lbl{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--tx2)}
.tot-val{font-size:26px;font-weight:900;color:var(--gold)}
.cart-btns{display:flex;gap:6px}
.cart-btns2{display:flex;gap:6px;margin-bottom:7px}

/* ═══════════════════════════════════════════
   OTHER VIEWS
═══════════════════════════════════════════ */
.vwrap{flex:1;overflow-y:auto;padding:18px}
.vtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.vtitle{font-size:18px;font-weight:800}
.tbl-wrap{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden}
table{width:100%;border-collapse:collapse}
th{background:var(--bg3);padding:9px 12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--tx2);text-align:left;border-bottom:1px solid var(--b1)}
td{padding:9px 12px;font-size:13px;border-bottom:1px solid var(--b1)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg3)}

.cfg-sec{margin-bottom:20px}
.cfg-ttl{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--gold);margin-bottom:11px;padding-bottom:7px;border-bottom:1px solid var(--b1)}
.cfg-2{display:grid;grid-template-columns:1fr 1fr;gap:11px}

/* ═══════════════════════════════════════════
   MODALS
═══════════════════════════════════════════ */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.84);display:none;align-items:center;justify-content:center;z-index:1000;padding:12px}
.ov.on{display:flex}
.modal{background:var(--bg2);border:1px solid var(--b2);border-radius:16px;width:100%;max-height:93vh;overflow-y:auto;box-shadow:var(--sh)}
.mhdr{padding:17px 21px 13px;border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between}
.mtit{font-size:16px;font-weight:800}
.mclose{background:none;border:none;color:var(--tx2);font-size:18px;cursor:pointer}
.mclose:hover{color:var(--tx)}
.mbody{padding:17px 21px}
.mfoot{padding:12px 21px 17px;border-top:1px solid var(--b1);display:flex;gap:7px;justify-content:flex-end}

/* Payment modal */
.pay-tot{font-size:36px;font-weight:900;color:var(--gold);margin-bottom:16px}
.pmethods{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
.pm{padding:13px 6px;border-radius:var(--r);border:2px solid var(--b2);background:var(--bg3);cursor:pointer;text-align:center;transition:all .14s;font-size:12px;font-weight:700}
.pm.on{border-color:var(--gold);background:var(--goldbg);color:var(--gold)}
.pm span{display:block;font-size:20px;margin-bottom:5px}
.chg-box{background:var(--bg3);border:1px solid var(--b2);border-radius:var(--r);padding:13px}
.chg-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;font-size:13px}
.chg-row:last-child{margin-bottom:0;padding-top:7px;border-top:1px solid var(--b1);font-size:15px;font-weight:800}
.chg-v{font-weight:700;color:var(--gold)}

/* Admin password modal */
.admin-warn{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:var(--r);padding:12px;font-size:12px;color:var(--red);margin-bottom:14px}

/* Customer picker */
.cpitem{padding:9px 11px;background:var(--bg3);border:1px solid var(--b1);border-radius:var(--r);cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.cpitem:hover{border-color:var(--gold)}
.cpi-nm{font-weight:700;font-size:13px}
.cpi-ph{font-size:11px;color:var(--tx2)}

/* Cierre modal */
.cs-block{background:var(--bg3);border:1px solid var(--b1);border-radius:var(--r);padding:14px;margin-bottom:12px}
.cs-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--b1);font-size:13px}
.cs-row:last-child{border-bottom:none}
.cs-efe{font-size:28px;font-weight:900;color:var(--green);text-align:center;padding:10px 0}
.cs-efe-lbl{text-align:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--tx2);margin-bottom:6px}

/* ═══════════════════════════════════════════
   THERMAL RECEIPT (80mm)
═══════════════════════════════════════════ */
#printArea{display:none}
@media print{
  body *{visibility:hidden}
  #printArea,#printArea *{visibility:visible}
  #printArea{position:fixed;top:0;left:0;width:72mm;background:#fff;color:#000}
  @page{size:80mm auto;margin:3mm 4mm}
}
.rcpt{width:72mm;font-family:'Courier New',monospace;font-size:9.5pt;color:#000;background:#fff}
.rh{text-align:center;margin-bottom:2.5mm}
.rh img{width:46mm;height:auto;display:block;margin:0 auto 2mm}
.rh-nm{font-size:10.5pt;font-weight:bold}
.rh-sub{font-size:8pt}
.rhr{border:none;border-top:1px dashed #000;margin:1.5mm 0}
.rrow{display:flex;justify-content:space-between;margin-bottom:.8mm;font-size:9pt}
.ritem{margin-bottom:1.5mm}
.ri-nm{font-size:9pt;font-weight:bold}
.ri-ln{display:flex;justify-content:space-between;font-size:8.5pt}
.rtot{font-size:11pt;font-weight:bold}
.rtks{text-align:center;font-size:8pt;margin-top:2.5mm}
.riva{font-size:8pt;color:#444}
.riva-row{display:flex;justify-content:space-between}

/* ═══════════════════════════════════════════
   NOTIFICATIONS
═══════════════════════════════════════════ */
#notifs{position:fixed;top:calc(var(--hdr) + var(--dash) + 6px);right:12px;z-index:9998;display:flex;flex-direction:column;gap:5px;pointer-events:none}
.notif{padding:9px 13px;border-radius:var(--r);font-size:12px;font-weight:700;background:var(--bg2);border:1px solid var(--b2);box-shadow:var(--sh);animation:slideIn .22s ease;pointer-events:all}
.notif.ok{border-color:var(--green);color:var(--green)}
.notif.err{border-color:var(--red);color:var(--red)}
.notif.info{border-color:var(--gold);color:var(--gold)}
@keyframes slideIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}