:root{
  --accent:#0c6b45; --accent-dark:#085236; --accent-soft:#e3f2ea;
  --bg:#f2f5f3; --card:#ffffff; --text:#1c2b24; --muted:#67756e; --border:#dce4df;
  --danger:#c0392b; --warn:#b7791f; --blue:#1f6fb7; --purple:#7a4fb0;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* Los elementos con [hidden] SIEMPRE ocultos, aunque su clase ponga display */
[hidden]{display:none!important}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:15px;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;cursor:pointer}
a{color:var(--accent);text-decoration:none}
.mt{margin-top:14px}
.hidden{display:none!important}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--accent);color:#fff;padding:10px 14px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.topbar-left strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-user{font-size:12px;opacity:.85;white-space:nowrap}
.topbar-links{display:flex;gap:4px;white-space:nowrap}
.topbar-links a{color:#fff;opacity:.9;font-size:13px;padding:6px 8px;border-radius:8px}
.topbar-links a:hover{background:rgba(255,255,255,.15);opacity:1}
.back-link{color:#fff!important;font-size:14px;background:rgba(255,255,255,.15);padding:4px 8px;border-radius:8px}

/* ---------- login ---------- */
.login-body{display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:28px 24px;width:100%;max-width:380px;box-shadow:0 8px 30px rgba(0,0,0,.08);text-align:center}
.login-logo{font-size:48px}
.login-card h1{font-size:20px;margin:6px 0 2px}
.login-sub{color:var(--muted);font-size:13px;margin-bottom:18px}
.login-card form{text-align:left}
.login-card label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
.login-card input{width:100%;padding:11px;border:1px solid var(--border);border-radius:10px;font-size:15px}
.alert{background:#fdecea;color:var(--danger);border:1px solid #f5c6c0;border-radius:10px;padding:8px 12px;font-size:13px;margin-bottom:10px}

/* ---------- botones / inputs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;background:#e8ece9;color:var(--text)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-block{width:100%}
.btn-lg{padding:14px;font-size:17px}
.btn-sm{padding:7px 12px;font-size:13px}
.inp{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:15px;background:#fff}
.chk{display:flex!important;align-items:center;gap:8px;font-size:14px!important;color:var(--text)!important}
.msg-ok{color:var(--accent);font-size:13px;margin-top:8px}
.vacio{color:var(--muted);text-align:center;padding:22px 10px;font-size:14px}

/* ---------- TPV ---------- */
.pos-body{padding-bottom:90px}
.pos-tools{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:8px 10px 0}
.pos-tools .seg{flex-wrap:nowrap}
#btnComandas{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--card)}
.pos-main{padding:0 0 80px}
.vista{min-height:60vh}
.grid-mesas{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:8px;padding:10px}
.mesa{background:var(--card);border:2px solid var(--border);border-radius:14px;padding:14px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:96px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.mesa.ocupada{border-color:var(--warn);background:#fdf6e9}
.mesa:active{transform:scale(.96)}
.mesa-nombre{font-size:16px;font-weight:800}
.mesa-cap{font-size:11px;color:var(--muted)}
.mesa-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.mesa-libre .mesa-badge{background:var(--accent-soft);color:var(--accent)}
.mesa-ocupada .mesa-badge{background:#f6e3c3;color:var(--warn)}
.comanda-info{background:var(--accent-soft);border-radius:10px;padding:8px 12px;margin:0 16px 8px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.comanda-info b{color:var(--accent)}
.comanda-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.comanda-row:last-child{border-bottom:none}
.cr-info{flex:1;min-width:140px;font-size:14px}
.cr-sub{font-size:12px;color:var(--muted)}
.cr-total{font-size:15px;font-weight:800;color:var(--accent);white-space:nowrap}
.cr-acc{display:flex;gap:6px}
.danger{color:var(--danger)!important}
.cart-sec-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:8px 16px 0}
.cart-items{flex:1;overflow-y:auto;padding:4px 16px}
.c-item.ro{opacity:.75}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#1c2b24;color:#fff;padding:10px 18px;border-radius:12px;font-size:14px;font-weight:600;z-index:80;box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:90vw;text-align:center}
.chips{display:flex;gap:6px;overflow-x:auto;padding:10px 10px 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:8px 15px;border-radius:999px;background:var(--card);border:1px solid var(--border);font-size:14px;font-weight:600;color:var(--text)}
.chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.grid-productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;padding:8px 10px}
.prod{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 8px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;min-height:86px;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:transform .06s}
.prod:active{transform:scale(.96);background:var(--accent-soft)}
.prod-nombre{font-size:13px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-precio{font-size:14px;font-weight:800;color:var(--accent)}
.prod-emoji{font-size:22px}

/* barra carrito (móvil) */
.cart-bar{position:fixed;left:10px;right:10px;bottom:10px;z-index:45;background:var(--accent);color:#fff;border:none;border-radius:14px;padding:13px 16px;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.cart-bar[hidden]{display:none!important}
.cart-bar-total{margin-left:auto;font-size:17px}
.cart-bar-go{background:#fff;color:var(--accent);padding:7px 12px;border-radius:10px;font-size:13px}

/* panel carrito */
.cart-panel{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);border-radius:18px 18px 0 0;max-height:75vh;display:flex;flex-direction:column;transform:translateY(110%);transition:transform .22s ease;box-shadow:0 -6px 24px rgba(0,0,0,.2)}
.cart-panel.open{transform:none}
.cart-head{display:flex;align-items:center;gap:10px;padding:14px 16px 8px}
.cart-head h3{font-size:16px;margin-right:auto}
.cart-items{flex:1;overflow-y:auto;padding:4px 16px}
.c-item{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--border)}
.c-item .c-nom{flex:1;font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-item .c-pu{font-size:12px;color:var(--muted)}
.c-item .c-imp{font-size:14px;font-weight:700;min-width:74px;text-align:right}
.qty{display:flex;align-items:center;gap:2px}
.qty button{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:#fff;font-size:15px;font-weight:700}
.qty span{min-width:24px;text-align:center;font-weight:700}
.c-del{background:none;border:none;color:var(--danger);font-size:16px;padding:4px}
.cart-totals{padding:10px 16px;border-top:1px solid var(--border)}
.t-row{display:flex;justify-content:space-between;padding:3px 0;font-size:14px;color:var(--muted)}
.t-row-total{font-size:17px;font-weight:800;color:var(--text);border-top:1px solid var(--border);margin-top:4px;padding-top:6px}
.cart-panel .btn{margin:0 16px 18px}

@media(min-width:1024px){
  .cart-panel{left:auto;right:16px;bottom:70px;width:390px;max-height:82vh;border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.28)}
}

/* ---------- modales / hojas ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--card);width:100%;max-width:560px;border-radius:18px 18px 0 0;padding:20px 18px;max-height:92vh;overflow-y:auto}
.sheet h3{font-size:17px;margin-bottom:12px}
@media(min-width:768px){.modal{align-items:center}.sheet{border-radius:18px}}
.sheet-actions{display:flex;gap:8px;margin-top:16px}
.sheet-actions .btn{flex:1}
.lbl{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:14px 0 6px}
.sheet input[type=number],.sheet input[type=text],.sheet input:not([type=checkbox]){width:100%;padding:11px;border:1px solid var(--border);border-radius:10px;font-size:16px;background:#fff}

/* segmentos */
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg-btn{padding:9px 13px;border-radius:10px;border:1px solid var(--border);background:#fff;font-size:14px;font-weight:600;color:var(--text)}
.seg-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* cobro */
.pay-rows{background:var(--bg);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--muted)}
.quick-cash{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.quick-cash button{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;font-size:14px;font-weight:600}
.quick-cash button.exacto{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.cambio{color:var(--accent);font-weight:800;font-size:16px}

/* ---------- ticket / recibo ---------- */
.receipt{width:72mm;margin:0 auto;background:#fff;padding:12px 10px;font-family:'Courier New',monospace;font-size:12px;line-height:1.45;color:#000}
.r-head{text-align:center;font-weight:700;margin-bottom:6px}
.r-head span{display:block;font-weight:400;font-size:11px}
.r-meta{border-top:1px dashed #999;border-bottom:1px dashed #999;padding:4px 0;margin:6px 0;font-size:11px}
.r-meta span{display:block}
.r-item{display:flex;gap:4px}
.r-nom{flex:1}
.r-pu{width:52px;text-align:right;color:#444}
.r-imp{width:62px;text-align:right;font-weight:700}
.r-totals{border-top:1px dashed #999;margin-top:6px;padding-top:4px}
.r-notas{margin-top:6px;border-top:1px dashed #999;padding-top:4px}
.ticket-actions{display:flex;gap:8px;justify-content:center;padding:14px;max-width:560px;margin:0 auto}
.ticket-actions .btn{flex:1;max-width:220px}
@media print{
  @page{size:80mm auto;margin:0}
  body.printing *{visibility:hidden!important}
  body.printing .receipt,body.printing .receipt *{visibility:visible!important}
  body.printing .receipt{position:absolute;left:0;top:0;width:72mm}
  body.printing .topbar,body.printing .cart-bar,body.printing .sheet-actions,
  body.printing .ticket-actions{display:none!important}
}

/* ---------- tabs admin ---------- */
.tabs{display:flex;gap:4px;overflow-x:auto;background:#fff;border-bottom:1px solid var(--border);padding:6px 8px;position:sticky;top:52px;z-index:25}
.tab{padding:9px 16px;border:none;background:none;font-size:14px;font-weight:600;color:var(--muted);border-radius:10px;white-space:nowrap}
.tab.active{background:var(--accent-soft);color:var(--accent)}
.admin-main{padding:14px;max-width:1080px;margin:0 auto}
.tabsec{display:none}
.tabsec.active{display:block}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.sec-head h3{font-size:16px}
.sec-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sec-tools .inp{width:auto;min-width:130px;padding:8px 10px}

/* ---------- tablas ---------- */
.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:480px}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:9px 10px;border-bottom:1px solid var(--border);background:var(--bg)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl .acc{display:flex;gap:6px;justify-content:flex-end}
.tbl .acc button{background:none;border:none;color:var(--accent);font-size:13px;font-weight:600;padding:3px 6px;border-radius:6px}
.tbl .acc button.danger{color:var(--danger)}
.tbl .acc button:hover{background:var(--bg)}
.td-acc{text-align:right}
.money{font-weight:700;white-space:nowrap}
.totales td{background:var(--accent-soft)!important;font-weight:800;border-top:2px solid var(--accent)}
.pag{display:flex;gap:6px;justify-content:center;align-items:center;padding:12px 0;flex-wrap:wrap}
.pag button{padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:#fff;font-size:13px;font-weight:600}
.pag button.cur{background:var(--accent);color:#fff;border-color:var(--accent)}
.pag span{font-size:13px;color:var(--muted)}

/* badges */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.badge-ok{background:var(--accent-soft);color:var(--accent)}
.badge-off{background:#eceeec;color:#8a938e}
.badge-admin{background:#2d3436;color:#fff}
.badge-cajero{background:var(--accent-soft);color:var(--accent)}
.badge-visor{background:#e8e4f2;color:var(--purple)}
.badge-warn{background:#f6e3c3;color:var(--warn)}
.f-efectivo{background:var(--accent-soft);color:var(--accent)}
.f-tarjeta{background:#e3effb;color:var(--blue)}
.f-transferencia{background:#efe7f8;color:var(--purple)}
.f-otros{background:#eceeec;color:#8a938e}

/* ---------- KPIs / desglose ---------- */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:13px 8px;text-align:center}
.kpi-num{font-size:17px;font-weight:800;display:block;color:var(--accent);white-space:nowrap}
.kpi-lbl{font-size:11px;color:var(--muted)}
.desglose{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.dg{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 14px;font-size:13px;color:var(--muted);flex:1;min-width:110px;text-align:center}
.dg b{display:block;font-size:15px;color:var(--text)}
.dg-total{background:var(--accent);border-color:var(--accent);color:#d8efe4}
.dg-total b{color:#fff}

/* ---------- config ---------- */
.cfg-form{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;max-width:520px}
.cfg-form label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:12px 0 4px}
.cfg-form .inp{margin-top:4px}

/* modal genérico (admin) */
#genBody label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:10px 0 4px}
#genBody input,#genBody select{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;font-size:15px;background:#fff}
#genBody .chk{display:flex;align-items:center;gap:8px;color:var(--text)!important;font-weight:500!important}
#genBody .chk input{width:auto}