/* ====== Reset & Base ====== */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#1a1a2e;font-size:14px;line-height:1.55;background:#f7f8fa}
.hidden{display:none!important}
input,button,select,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}

/* ====== Login ====== */
#v-login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef2ff,#f0f9ff);padding:20px}
.l-card{width:100%;max-width:400px;background:#fff;border-radius:14px;padding:42px 32px;box-shadow:0 4px 24px rgba(0,0,0,.08)}
.l-card h1{font-size:24px;font-weight:700;margin-bottom:6px;color:#1a1a2e;text-align:center}
.l-card .sub{font-size:14px;color:#71717a;margin-bottom:28px;text-align:center}
.fg{margin-bottom:16px}
.fg label{display:block;font-size:13px;font-weight:600;color:#4a4a5a;margin-bottom:6px}
.fg input,.fg select,.fg textarea{width:100%;height:42px;padding:0 14px;border:1.5px solid #e5e7eb;border-radius:8px;outline:none;font-size:14px;transition:border .15s,box-shadow .15s;background:#fafafa}
.fg textarea{height:auto;padding:10px 14px;resize:vertical;min-height:60px}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:#5b5fc7;box-shadow:0 0 0 3px rgba(91,95,199,.1);background:#fff}
.fg input::placeholder{color:#b0b0ba}
.l-btn{width:100%;height:46px;background:#5b5fc7;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;transition:background .15s;margin-top:6px}
.l-btn:hover{background:#4a4eb8}
.l-btn:disabled{background:#a5a8e0;cursor:wait}
.l-err{margin-top:14px;padding:10px 14px;background:#fff0f0;color:#d32f2f;font-size:13px;border-radius:8px;border:1px solid #ffdada}

/* ====== App layout ====== */
.app{display:flex;min-height:100vh}

/* Sidebar */
.sb{width:240px;background:#fff;border-right:1px solid #eaeaea;display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh}
.sb-brand{padding:24px 20px 20px;font-size:16px;font-weight:700;color:#1a1a2e}
.sb-brand .em{color:#5b5fc7}
.sb-nav{padding:0 10px;flex:1;overflow-y:auto}
.sb-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:13.5px;color:#71717a;font-weight:500;margin-bottom:2px;transition:all .12s}
.sb-nav a svg{width:18px;height:18px;stroke-width:1.7;flex-shrink:0}
.sb-nav a:hover{background:#f4f4f5;color:#3f3f46}
.sb-nav a.on{background:#eff1fe;color:#5b5fc7;font-weight:600}
.sb-ft{padding:16px;border-top:1px solid #eaeaea}
.sb-user{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sb-av{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#5b5fc7,#7c7fea);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.sb-nm{font-size:13px;font-weight:600;color:#1a1a2e}
.sb-rl{font-size:10px;font-weight:700;color:#5b5fc7;background:#eff1fe;padding:2px 7px;border-radius:4px;margin-left:6px}
.sb-out{width:100%;height:34px;border:1px solid #eaeaea;border-radius:8px;background:#fff;color:#71717a;font-size:12.5px;font-weight:500;transition:all .12s}
.sb-out:hover{border-color:#fca5a5;background:#fef2f2;color:#dc2626}

/* Main */
.mn{flex:1;display:flex;flex-direction:column;min-width:0}
.tb{height:54px;padding:0 24px;background:#fff;border-bottom:1px solid #eaeaea;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:5}
.tb h1{font-size:16px;font-weight:700;color:#1a1a2e}
.tb .menu-btn{display:none;background:transparent;border:none;font-size:24px;color:#1a1a2e;padding:6px}
.pg{display:none;padding:24px;flex:1}
.pg.on{display:block}

/* ====== Buttons ====== */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 16px;border-radius:8px;font-size:13px;font-weight:600;border:none;transition:all .12s;white-space:nowrap}
.bt-p{background:#5b5fc7;color:#fff}.bt-p:hover{background:#4a4eb8}
.bt-o{background:#fff;color:#3f3f46;border:1.5px solid #e5e7eb}.bt-o:hover{background:#f4f4f5;border-color:#cbd5e1}
.bt-d{background:#fff;color:#dc2626;border:1.5px solid #fecaca}.bt-d:hover{background:#fef2f2}
.bt-g{background:#10b981;color:#fff}.bt-g:hover{background:#059669}
.bt-w{background:#f59e0b;color:#fff}.bt-w:hover{background:#d97706}
.bt-s{height:32px;padding:0 12px;font-size:12px}
.bt-xs{height:28px;padding:0 10px;font-size:11.5px;border-radius:6px}
.bt-full{width:100%}
.bt[disabled]{opacity:.5;cursor:not-allowed}
.bt .sp{display:inline-block;width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ====== Section header ====== */
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.sh h2{font-size:13px;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.5px}

/* ====== KPI ====== */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid #eaeaea;border-radius:10px;padding:20px}
.kpi .kl{font-size:12px;color:#9ca3af;font-weight:500;margin-bottom:8px;text-transform:uppercase;letter-spacing:.4px}
.kpi .kv{font-size:24px;font-weight:700;letter-spacing:-.5px;color:#1a1a2e}
.kpi .ks{font-size:12px;color:#b0b0ba;margin-top:4px}

/* ====== Panel ====== */
.pn-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pn{background:#fff;border:1px solid #eaeaea;border-radius:10px;padding:20px}
.pn h3{font-size:13px;font-weight:600;margin-bottom:12px;color:#3f3f46}
.pn-r{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f4f4f5;font-size:13px}
.pn-r:last-child{border:none}
.pn-r .n{color:#3f3f46;font-weight:500}
.pn-r .v{color:#10b981;font-weight:600}
.pn-e{color:#b0b0ba;font-size:13px;text-align:center;padding:20px 0}

/* ====== Tags ====== */
.tag{display:inline-block;padding:3px 9px;border-radius:5px;font-size:11px;font-weight:700;letter-spacing:.3px}
.tag-g{background:#dcfce7;color:#15803d}
.tag-m{background:#f3f4f6;color:#52525b}
.tag-w{background:#fef3c7;color:#a16207}
.tag-r{background:#fee2e2;color:#b91c1c}

/* ====== Mesas grid ====== */
#tg{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.tc{position:relative;background:#fff;border:1.5px solid #eaeaea;border-radius:12px;padding:24px 16px;text-align:center;cursor:pointer;transition:all .15s}
.tc:hover{border-color:#5b5fc7;transform:translateY(-2px);box-shadow:0 4px 12px rgba(91,95,199,.12)}
.tc.busy{border-color:#fde68a;background:#fffbeb}
.tc h3{font-size:15px;font-weight:700;margin-bottom:10px}
.tc .ts{font-size:12px;color:#71717a;display:flex;align-items:center;gap:6px;justify-content:center}
.tc .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.tc .dot.g{background:#10b981}
.tc .dot.r{background:#f59e0b}
.tc .ot{margin-top:8px;font-size:12px;color:#5b5fc7;font-weight:600}
.tc .ta{position:absolute;top:6px;right:6px;display:none;gap:3px}
.tc:hover .ta{display:flex}
.tc .ta button{width:24px;height:24px;border-radius:5px;border:none;background:rgba(255,255,255,.92);color:#71717a;font-size:11px}
.tc .ta button:hover{background:#fff;color:#3f3f46}
.tc .ta .dl:hover{color:#dc2626}

/* ====== Pedido ====== */
.pw{display:grid;grid-template-columns:1fr 380px;gap:18px;height:calc(100vh - 102px)}
.pl{background:#fff;border:1px solid #eaeaea;border-radius:10px;padding:18px;overflow-y:auto;display:flex;flex-direction:column}
.pl h2{font-size:14px;font-weight:700;margin-bottom:14px}
.cat-tabs{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;padding-bottom:4px}
.cat-tabs button{flex-shrink:0;height:32px;padding:0 14px;border:1px solid #e5e7eb;background:#fff;border-radius:6px;font-size:12.5px;font-weight:600;color:#52525b}
.cat-tabs button.on{background:#5b5fc7;color:#fff;border-color:#5b5fc7}
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;overflow-y:auto;flex:1}
.ci{position:relative;background:#fff;border:1.5px solid #e5e7eb;border-radius:8px;padding:12px;cursor:pointer;transition:all .15s}
.ci:hover{border-color:#5b5fc7;background:#fafbff}
.ci.so{opacity:.5;cursor:not-allowed}
.ci.so::after{content:'AGOTADO';position:absolute;top:6px;right:6px;background:#dc2626;color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px}
.ci h4{font-size:13px;font-weight:600;margin-bottom:6px;color:#1a1a2e;line-height:1.3}
.ci .cp{font-size:13px;color:#5b5fc7;font-weight:700}

.pp{background:#fff;border:1px solid #eaeaea;border-radius:10px;display:flex;flex-direction:column;overflow:hidden}
.pp-h{padding:16px 18px;border-bottom:1px solid #eaeaea;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pp-h h2{font-size:15px;font-weight:700}
.pi-wrap{flex:1;overflow-y:auto;padding:10px 18px}
.pi{display:grid;grid-template-columns:1fr auto auto auto;align-items:start;gap:8px;padding:12px 0;border-bottom:1px solid #f4f4f5}
.pi:last-child{border:none}
.pi .inf h4{font-size:13.5px;font-weight:600;margin-bottom:2px}
.pi .inf small{color:#9ca3af;font-size:11.5px}
.pi .inf .nt{display:block;color:#5b5fc7;font-size:11px;font-style:italic;margin-top:3px}
.pi .cts{display:flex;align-items:center;gap:5px}
.pi .qb{width:24px;height:24px;border-radius:5px;border:1px solid #e5e7eb;background:#fff;color:#3f3f46;font-size:13px;font-weight:700}
.pi .qb:hover{background:#5b5fc7;color:#fff;border-color:#5b5fc7}
.pi .qt{min-width:24px;text-align:center;font-weight:700;font-size:13px}
.pi .st{font-weight:700;color:#1a1a2e;font-size:13px;align-self:center}
.pi .rm{background:transparent;border:none;color:#a1a1aa;padding:0 4px;align-self:center}
.pi .rm:hover{color:#dc2626}
.pi .nt-btn{background:transparent;border:none;color:#a1a1aa;font-size:12px;padding:0;margin-top:2px;text-align:left}
.pi .nt-btn:hover{color:#5b5fc7}
.pi.kit-PENDING{}
.pi.kit-READY{background:linear-gradient(90deg,rgba(254,243,199,.5),transparent)}
.pi.kit-SERVED{opacity:.55}
.pe{color:#b0b0ba;font-size:13px;text-align:center;padding:30px 0}

.pf{padding:14px 18px;border-top:1px solid #eaeaea;background:#fafafa}
.pf .row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:#52525b}
.pf .row.tt{font-size:16px;padding:8px 0;border-top:1px solid #e5e7eb;margin-top:6px;color:#1a1a2e;font-weight:700}
.pb{display:flex;gap:8px;margin-top:12px}
.pb .bt{flex:1}

/* ====== Tablas data ====== */
.dt{width:100%;background:#fff;border:1px solid #eaeaea;border-radius:10px;overflow:hidden;border-collapse:collapse}
.dt th,.dt td{padding:11px 14px;text-align:left;border-bottom:1px solid #f4f4f5;font-size:13px}
.dt th{background:#fafafa;font-weight:600;color:#71717a;font-size:11.5px;text-transform:uppercase;letter-spacing:.3px}
.dt tr:last-child td{border:none}
.dt .ac{text-align:right;white-space:nowrap}
.dt .ac .bt{margin-left:4px}

/* ====== Reportes ====== */
.rbar{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
.rbar input,.rbar select{height:36px;padding:0 12px;border:1.5px solid #e5e7eb;border-radius:7px;outline:none;background:#fff}
.rbar input:focus,.rbar select:focus{border-color:#5b5fc7}
.r-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.r-card{background:#fff;border:1px solid #eaeaea;border-radius:10px;padding:18px}
.r-card h3{font-size:13px;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.4px;margin-bottom:14px}
.bar-row{display:grid;grid-template-columns:120px 1fr 80px;align-items:center;gap:10px;margin-bottom:8px;font-size:12.5px}
.bar-row .bar-bg{height:8px;background:#f4f4f5;border-radius:4px;overflow:hidden}
.bar-row .bar-fl{height:100%;background:linear-gradient(90deg,#5b5fc7,#7c7fea);border-radius:4px}
.bar-row .v{text-align:right;font-weight:600;color:#1a1a2e}

/* ====== Cuenta / Print ====== */
.bc{max-width:480px;margin:0 auto;background:#fff;border:1px solid #eaeaea;border-radius:12px;padding:32px;font-family:'Courier New',monospace}
.bc h2{font-size:22px;font-weight:700;text-align:center;margin-bottom:6px;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.bc .bm{text-align:center;font-size:12px;color:#71717a;margin-bottom:20px;border-bottom:1px dashed #cbd5e1;padding-bottom:14px}
.bc .br{display:flex;justify-content:space-between;padding:5px 0;font-size:13px}
.bc .br .nt{display:block;font-size:11px;color:#71717a;font-style:italic;margin-top:2px}
.bc .sec{border-top:1px dashed #cbd5e1;margin-top:12px;padding-top:10px}
.bc .sec .br{color:#52525b;font-size:12.5px}
.bc .btl{display:flex;justify-content:space-between;align-items:center;border-top:2px solid #1a1a2e;margin-top:14px;padding-top:14px;font-size:18px;font-weight:700}
.bc .btl .v{color:#10b981;font-size:22px}
.bc .py{margin-top:10px;text-align:center;font-size:12px;color:#71717a;padding:8px;background:#f9fafb;border-radius:6px}
.bc-actions{display:flex;gap:10px;margin-top:20px;max-width:480px;margin-left:auto;margin-right:auto}
.bc-actions .bt{flex:1}

/* ====== Kitchen ====== */
.kt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.kt-card{background:#fff;border:1.5px solid #e5e7eb;border-left:5px solid #f59e0b;border-radius:10px;padding:14px 16px}
.kt-card.r{border-left-color:#10b981}
.kt-card .kt-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.kt-card h4{font-size:15px;font-weight:700}
.kt-card .kt-tbl{font-size:11px;color:#71717a;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.kt-card .qy{font-size:12.5px;color:#3f3f46;margin-bottom:4px}
.kt-card .nt{font-size:12px;color:#a16207;font-style:italic;background:#fef3c7;padding:6px 9px;border-radius:5px;margin:6px 0}
.kt-card .kt-act{margin-top:10px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#a1a1aa}
.kt-empty{color:#b0b0ba;text-align:center;padding:60px 0;font-size:14px}

/* ====== Modal ====== */
.mo{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.mb{background:#fff;border-radius:12px;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;animation:in .2s}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mh{padding:18px 22px;border-bottom:1px solid #eaeaea;display:flex;justify-content:space-between;align-items:center}
.mh h3{font-size:15px;font-weight:700}
.mx{background:transparent;border:none;font-size:22px;color:#a1a1aa;line-height:1}
.mx:hover{color:#3f3f46}
.md{padding:22px}

/* ====== Pay options ====== */
.pay-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.pay-opt{height:48px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;font-weight:600;color:#3f3f46;transition:all .12s;font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px}
.pay-opt:hover{border-color:#cbd5e1}
.pay-opt.on{background:#eff1fe;border-color:#5b5fc7;color:#5b5fc7}
.tip-opts{display:flex;gap:6px;margin-bottom:14px}
.tip-opts button{flex:1;height:38px;border:1.5px solid #e5e7eb;border-radius:7px;background:#fff;font-weight:600;color:#3f3f46;font-size:12.5px}
.tip-opts button.on{background:#10b981;border-color:#10b981;color:#fff}

/* ====== Toast ====== */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:#1a1a2e;color:#fff;padding:12px 22px;border-radius:8px;font-size:13.5px;font-weight:500;box-shadow:0 6px 20px rgba(0,0,0,.18);transition:transform .25s;z-index:200;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{background:#dc2626}

/* ====== Empty ====== */
.empty{padding:60px 0;text-align:center;color:#b0b0ba;font-size:14px}

/* ====== Responsive ====== */
@media (max-width:1024px){
    .pw{grid-template-columns:1fr 320px}
    .kpi-row{grid-template-columns:repeat(2,1fr)}
    .pn-grid,.r-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
    .sb{position:fixed;left:-100%;top:0;height:100vh;z-index:50;transition:left .25s;box-shadow:4px 0 16px rgba(0,0,0,.15)}
    .sb.open{left:0}
    .sb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:49;display:none}
    .sb-backdrop.show{display:block}
    .tb .menu-btn{display:block}
    .pw{grid-template-columns:1fr;height:auto}
    .pl{max-height:48vh}
    .pi-wrap{max-height:300px}
    .pg{padding:16px}
    #tg{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
    .tc{padding:18px 12px}
    .pay-opts{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
    .kpi-row{grid-template-columns:1fr 1fr}
    .kpi{padding:14px}
    .kpi .kv{font-size:20px}
    .cg{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

/* ====== Print ====== */
@media print{
    body{background:#fff}
    .sb,.tb,.bc-actions,.toast,.mo{display:none!important}
    .pg{padding:0}
    .bc{border:none;box-shadow:none;max-width:300px}
}