/* JR Ventas · estilos de la aplicación · Version 1.0 */
:root{
  --navy:#0B2447;--blue:#1A5FB4;--cyan:#22A7E0;--steel:#8A97A5;--pale:#BFD4EA;
  --bg:#E3E6EA;--surface:#FFFFFF;--surface-2:#F5F6F8;--line:#D3D8DE;--line-2:#E6E9ED;
  --ink:#16202B;--ink-2:#46505C;--ink-3:#6F7985;
  --pri:var(--navy);--acc:var(--blue);--acc-soft:#E4EDF9;
  --pos:#177A4F;--pos-soft:#E1F3EA;--neg:#B8392A;--neg-soft:#FBE7E4;--warn:#8F5A00;--warn-soft:#FCF0D9;
  --side:#FFFFFF;--wa:#25D366;
  --shadow:0 1px 2px rgba(11,36,71,.06),0 12px 32px -18px rgba(11,36,71,.35);
  --fd:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fb:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#1E2227;--surface:#2A2F35;--surface-2:#32383F;--line:#414850;--line-2:#383E45;
  --ink:#E6EDF5;--ink-2:#B9C5D3;--ink-3:#8E9CAD;
  --pri:#2A6AC6;--acc:#6AA6EE;--acc-soft:#16325C;
  --pos:#4CC38A;--pos-soft:#0F3326;--neg:#F08A7A;--neg-soft:#3B1C19;--warn:#E7B458;--warn-soft:#382A10;
  --side:#121A26;color-scheme:dark;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -18px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--fb);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--acc)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
img{max-width:100%}
.hide{display:none!important}
.mono{font-family:var(--fm);font-size:.93em}
.num{text-align:right;white-space:nowrap}
.muted{color:var(--ink-3)}
.small{font-size:12.5px}
.nowrap{white-space:nowrap}
.pos-t{color:var(--pos)}.neg-t{color:var(--neg)}.warn-t{color:var(--warn)}
h1,h2,h3,h4{font-family:var(--fd);letter-spacing:-.02em;margin:0}

/* ---------- acceso ---------- */
.auth{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.auth-art{background:var(--navy);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-art .lg{background:#fff;border-radius:14px;padding:10px 16px;display:inline-flex;align-self:flex-start}
.auth-art .lg img{height:70px}
.auth-art h1{font-size:clamp(28px,3.2vw,40px);font-weight:700;line-height:1.1;margin:28px 0 12px;max-width:16ch}
.auth-art h1 span{color:var(--cyan)}
.auth-art p{color:var(--pale);max-width:44ch;font-size:15.5px}
.auth-art ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;color:#DCE7F4}
.auth-art li{display:flex;gap:10px;align-items:center}
.auth-art li::before{content:"";width:10px;height:10px;background:var(--cyan);border-radius:2px;flex:none}
.auth-art .pixs i{position:absolute;width:30px;height:30px;border-radius:4px;background:var(--cyan);opacity:.12}
.auth-form{display:flex;align-items:center;justify-content:center;padding:32px 20px;background:var(--surface)}
.auth-box{width:min(460px,100%)}
.auth-box h2{font-size:26px;margin-bottom:4px}
.auth-box .sub{color:var(--ink-3);margin:0 0 22px}
.auth-tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:10px;padding:4px;margin-bottom:22px}
.auth-tabs button{flex:1;border:0;background:transparent;border-radius:8px;padding:9px;font-weight:600;color:var(--ink-2);cursor:pointer}
.auth-tabs button.on{background:var(--surface);color:var(--navy);box-shadow:0 1px 3px rgba(0,0,0,.08)}
:root[data-theme="dark"] .auth-tabs button.on{color:var(--ink)}
.auth-box .f{margin-bottom:14px}
.auth-box .btn.pri{width:100%;height:46px;font-size:15px}
.auth-alt{text-align:center;margin-top:16px;color:var(--ink-3);font-size:13.5px}
.auth-demo{margin-top:22px;border:1px dashed var(--line);border-radius:12px;padding:14px;display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.auth-demo .f{flex:1;min-width:180px;margin:0}
.steps-ind{display:flex;gap:6px;margin-bottom:18px}
.steps-ind i{flex:1;height:4px;border-radius:4px;background:var(--line)}
.steps-ind i.on{background:var(--blue)}
.rubros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
.rubros label{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;font-weight:500;font-size:13.5px}
.rubros input{accent-color:var(--blue)}
.rubros label:has(input:checked){border-color:var(--blue);background:var(--acc-soft);color:var(--acc)}
.plan-pick{display:grid;gap:8px;margin-bottom:14px}
.plan-pick label{border:1.5px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;display:flex;gap:10px;align-items:center}
.plan-pick label:has(input:checked){border-color:var(--blue);background:var(--acc-soft)}
.plan-pick b{font-family:var(--fd)}
.plan-pick span{margin-left:auto;font-weight:600;color:var(--acc)}

/* ---------- estructura ---------- */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);height:100%}
.side{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.brand{padding:16px 16px 12px;border-bottom:1px solid var(--line-2);text-align:center}
.brand .plate{border-radius:10px;display:flex;align-items:center;justify-content:center;padding:4px}
:root[data-theme="dark"] .brand .plate{background:#EEF2F6;padding:8px}
.brand img{max-height:78px;width:auto}
.brand .emp{margin-top:8px;font:600 13.5px var(--fd);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .pl{font-size:11.5px;color:var(--ink-3)}
.brand .pl b{color:var(--acc)}
nav.nav{padding:8px 10px 16px;flex:1}
.nav-g{font-size:11.5px;color:var(--ink-3);padding:12px 12px 4px;font-weight:500}
.nav-i{display:flex;align-items:center;gap:11px;padding:7px 12px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-weight:500;position:relative;cursor:pointer}
.nav-i svg{width:17px;height:17px;flex:none;stroke:currentColor}
.nav-i:hover{background:var(--surface-2);color:var(--ink)}
.nav-i.on{background:var(--acc-soft);color:var(--acc)}
.nav-i.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--cyan)}
.nav-i .cnt{margin-left:auto;font-size:11px;background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:0 7px;font-weight:600}
.side-foot{padding:12px 14px;border-top:1px solid var(--line-2);display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:600 13px var(--fd);flex:none}
.side-foot .who{font-size:12.5px;line-height:1.3;min-width:0;flex:1}
.side-foot .who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;width:34px;height:34px;display:inline-grid;place-items:center;cursor:pointer;color:var(--ink-2);flex:none}
.icon-btn:hover{border-color:var(--acc);color:var(--acc)}
.icon-btn svg{width:16px;height:16px;stroke:currentColor}
.main{min-width:0;overflow-y:auto;height:100%;position:relative}
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px;padding:8px 24px;min-height:54px}
.menu-btn{display:none}
.net{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3)}
.net i{width:8px;height:8px;border-radius:50%;background:#2FB67A}
.net.off i{background:#E0A63A}
.top-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.chip{font-size:12.5px;color:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;background:var(--surface);white-space:nowrap}
.demo-bar{background:var(--warn-soft);color:var(--warn);font-size:12.5px;padding:7px 24px;border-bottom:1px solid var(--line-2);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.demo-bar b{font-weight:600}
.view{padding:22px 24px 90px;max-width:1400px}
.scrim{display:none}

/* ---------- encabezado de página ---------- */
.ph{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.ph h1{font-size:23px;line-height:1.2;font-weight:600}
.ph-sub{margin:3px 0 0;color:var(--ink-3);max-width:75ch}
.ph-act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn svg{width:15px;height:15px;stroke:currentColor;flex:none}
.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.pri:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.acc{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.acc:hover{filter:brightness(1.08);color:#fff}
.btn.ok{background:var(--pos);border-color:var(--pos);color:#fff}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#05331a}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--acc)}
.btn.danger{color:var(--neg)}
.btn.danger:hover{border-color:var(--neg);color:#fff;background:var(--neg)}
.btn.sm{height:30px;padding:0 10px;font-size:13px}
.btn.lg{height:46px;font-size:15px;padding:0 18px}
.btn[disabled]{opacity:.5;pointer-events:none}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;padding:3px;background:var(--surface);gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;border-radius:6px;padding:5px 12px;cursor:pointer;color:var(--ink-2);font-weight:500}
.seg button.on{background:var(--pri);color:#fff}

/* ---------- superficies ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:0}
.panel-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.panel-h h2{font-size:15px;font-weight:600}
.panel-h .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.panel-b{padding:14px 16px}
.grid2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px}
.grid2e{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stack{display:grid;gap:16px}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px}
.strip .cell{padding:13px 16px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);margin:0 -1px -1px 0}
.strip .k{font-size:12.5px;color:var(--ink-3)}
.strip .v{font-family:var(--fd);font-size:20px;font-weight:600;margin-top:2px;white-space:nowrap}
.strip .d{font-size:12px;color:var(--ink-3);margin-top:1px}
.band{position:relative;overflow:hidden;background:var(--navy);color:#fff;border-radius:14px;padding:22px 24px;margin-bottom:16px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.band h1{font-size:23px;font-weight:600}
.band p{margin:4px 0 0;color:var(--pale)}
.band .r{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}
.band .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.band .btn:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.band .btn.cy{background:var(--cyan);border-color:var(--cyan);color:#05223d;font-weight:600}
.band .px{position:absolute;right:16px;top:-6px;opacity:.25;pointer-events:none}
.band .px i{position:absolute;width:20px;height:20px;border-radius:3px;background:var(--cyan)}
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.quick button{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px;display:flex;gap:10px;align-items:center;cursor:pointer;text-align:left;font-weight:600;color:var(--ink)}
.quick button:hover{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
.quick svg{width:22px;height:22px;stroke:var(--acc);flex:none}
.meter{height:8px;border-radius:8px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line-2)}
.meter i{display:block;height:100%;background:var(--blue);border-radius:8px}
.meter.w i{background:#E0A63A}.meter.b i{background:var(--neg)}
.alerts{display:grid;gap:8px}
.alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:13.5px;cursor:pointer;border:1px solid transparent}
.alert:hover{border-color:var(--acc)}
.alert i{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:var(--steel)}
.alert.b i{background:var(--neg)}.alert.w i{background:#E0A63A}.alert.ok i{background:#2FB67A}

/* ---------- tablas ---------- */
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
.t th{font-weight:500;color:var(--ink-3);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap;font-size:12.5px}
.t td{padding:8px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tbody tr.click{cursor:pointer}
.t tbody tr.click:hover td{background:var(--surface-2)}
.t tfoot td{font-weight:600;border-top:1px solid var(--line);background:var(--surface-2)}
.t td.act{text-align:right;white-space:nowrap}
.t td.act .btn{margin-left:4px}
.empty{padding:36px 20px;text-align:center;color:var(--ink-3)}
.empty b{display:block;color:var(--ink);font-family:var(--fd);font-weight:600;font-size:15px;margin-bottom:4px}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;border-radius:20px;padding:2px 9px;white-space:nowrap;background:var(--surface-2);color:var(--ink-2)}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.ok{background:var(--pos-soft);color:var(--pos)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.bad{background:var(--neg-soft);color:var(--neg)}
.tag.info{background:var(--acc-soft);color:var(--acc)}
.dt{display:inline-block;font-size:11px;font-weight:600;border-radius:4px;padding:1px 6px;margin-right:6px;background:var(--acc-soft);color:var(--acc)}
.dt.B{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.dt.NV{background:#EFE9FB;color:#5B3BA8}
.dt.NC,.dt.ND{background:var(--warn-soft);color:var(--warn)}
.dt.T{background:#E3F4F1;color:#0E7065}
.lock{font-size:11px;background:var(--warn-soft);color:var(--warn);border-radius:6px;padding:1px 6px;margin-left:6px;font-weight:600}

/* ---------- formularios ---------- */
.fg{display:grid;gap:12px 14px;grid-template-columns:repeat(12,minmax(0,1fr))}
.f{display:flex;flex-direction:column;gap:5px;grid-column:span 3;min-width:0}
.f.s2{grid-column:span 2}.f.s4{grid-column:span 4}.f.s5{grid-column:span 5}.f.s6{grid-column:span 6}.f.s8{grid-column:span 8}.f.s9{grid-column:span 9}.f.s12{grid-column:span 12}
.f > label,.lbl{font-size:12.5px;color:var(--ink-2);font-weight:500}
.in,select.in,textarea.in{height:36px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:0 10px;width:100%;min-width:0}
textarea.in{height:auto;min-height:70px;padding:8px 10px;resize:vertical}
.in:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.in[readonly]{background:var(--surface-2);color:var(--ink-2)}
.in.bad{border-color:var(--neg)}
.hint{font-size:12px;color:var(--ink-3)}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px}
.check input{width:16px;height:16px;accent-color:var(--acc)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toolbar .in{width:auto}
.toolbar .grow{flex:1;min-width:200px}
.search{position:relative}
.search svg{position:absolute;left:10px;top:50%;width:15px;height:15px;transform:translateY(-50%);stroke:var(--ink-3)}
.search .in{padding-left:32px}
.note{border-left:3px solid var(--cyan);background:var(--acc-soft);padding:10px 14px;border-radius:0 8px 8px 0;font-size:13px;color:var(--ink-2)}
.note.warn{border-color:#E0A63A;background:var(--warn-soft)}
.note.bad{border-color:var(--neg);background:var(--neg-soft)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:9px 14px;font-weight:500;color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--acc);border-bottom-color:var(--acc)}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.switch input{appearance:none;width:38px;height:22px;border-radius:22px;background:var(--line);position:relative;cursor:pointer;transition:.2s;flex:none;margin:0}
.switch input::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked{background:var(--blue)}
.switch input:checked::after{left:19px}

/* ---------- caja (POS) ---------- */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.pos-l{min-width:0}
.pos-bar{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.pos-bar .scan{flex:1;min-width:220px}
.cats{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px}
.cats button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 13px;cursor:pointer;white-space:nowrap;font-weight:500;color:var(--ink-2)}
.cats button.on{background:var(--pri);border-color:var(--pri);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pcard{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:3px;min-height:96px;transition:border-color .15s,background .15s}
.pcard:hover{border-color:var(--acc);background:var(--acc-soft)}
.pcard b{font-weight:600;font-size:13.5px;line-height:1.3}
.pcard .pr{font:600 15px var(--fd);color:var(--acc);margin-top:auto}
.pcard small{font-size:11.5px;color:var(--ink-3)}
.pcard small.bad{color:var(--neg)}
.pcard.out{opacity:.55}
.cart{position:sticky;top:70px;display:flex;flex-direction:column;max-height:calc(100vh - 90px)}
.cart .panel-b{overflow:auto;flex:1;min-height:120px;padding:8px 12px}
.ci{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.ci:last-child{border-bottom:0}
.ci .n{font-weight:500;font-size:13.5px}
.ci .s{font-size:11.5px;color:var(--ink-3)}
.ci .q{display:flex;align-items:center;gap:4px}
.ci .q button{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:var(--surface);cursor:pointer;line-height:1}
.ci .q input{width:52px;height:26px;text-align:center;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.ci .tot{font-weight:600;text-align:right}
.ci .x{border:0;background:transparent;color:var(--ink-3);cursor:pointer;font-size:12px;padding:0}
.ci .x:hover{color:var(--neg)}
.cart-f{border-top:1px solid var(--line-2);padding:12px 14px;display:grid;gap:8px}
.cart-f .row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2)}
.cart-f .big{font:700 24px var(--fd);color:var(--ink);display:flex;justify-content:space-between;align-items:baseline}
.doc-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.doc-pick button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 4px;cursor:pointer;font-weight:500;font-size:13px}
.doc-pick button.on{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
.doc-pick button[disabled]{opacity:.45;cursor:not-allowed}
.cart-mob{display:none}
.mob-only{display:none!important}
.paylines{display:grid;gap:8px}
.payline{display:grid;grid-template-columns:150px minmax(0,1fr) 34px;gap:8px}
.pay-quick{display:flex;gap:6px;flex-wrap:wrap}
.pay-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.pay-sum div{background:var(--surface-2);border-radius:10px;padding:10px;text-align:center;font-size:12.5px;color:var(--ink-3)}
.pay-sum b{display:block;font:700 18px var(--fd);color:var(--ink)}
.den{display:grid;grid-template-columns:1fr 90px 110px;gap:8px 12px;align-items:center}
.den input{text-align:center}
.den .m{text-align:right;font-family:var(--fm)}
.blind{filter:blur(7px);user-select:none}

/* mesas */
.mesas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mesa{border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:16px;cursor:pointer;min-height:110px;display:flex;flex-direction:column;gap:4px;text-align:left}
.mesa:hover{border-color:var(--acc)}
.mesa b{font:600 17px var(--fd)}
.mesa.oc{border-color:#E0A63A;background:var(--warn-soft)}
.mesa .t{margin-top:auto;font:600 15px var(--fd);color:var(--acc)}

/* ---------- comprobante impreso ---------- */
.docv{display:flex;justify-content:center;background:var(--surface-2);padding:16px;border-radius:10px;overflow:auto}
.paper{background:#fff;color:#111;box-shadow:var(--shadow);border:1px solid #ddd}
.paper.t80{width:302px;padding:14px 12px;font:11.5px/1.45 var(--fm)}
.paper.a4{width:760px;padding:34px 38px;font:12.5px/1.5 var(--fb)}
.paper .c{text-align:center}
.paper hr{border:0;border-top:1px dashed #999;margin:7px 0}
.paper .r{display:flex;justify-content:space-between;gap:8px}
.paper .lg{max-height:70px;margin:0 auto 6px;display:block}
.paper table{width:100%;border-collapse:collapse}
.paper.a4 .hd{display:grid;grid-template-columns:1fr 250px;gap:20px;align-items:start;margin-bottom:18px}
.paper.a4 .hd .lg{margin:0 0 8px;max-height:80px}
.paper.a4 .box{border:2px solid #0B2447;border-radius:8px;text-align:center;padding:12px;font-weight:600}
.paper.a4 .box div:first-child{font-size:14px}
.paper.a4 .box .n{font-family:var(--fm);font-size:15px;margin-top:4px}
.paper.a4 .meta{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 20px;border:1px solid #ddd;border-radius:6px;padding:10px 12px;margin-bottom:12px}
.paper.a4 th{background:#0B2447;color:#fff;font-weight:500;padding:6px 8px;text-align:left;font-size:12px}
.paper.a4 td{padding:6px 8px;border-bottom:1px solid #e5e5e5}
.paper.a4 .n2{text-align:right}
.paper.a4 .ft{display:grid;grid-template-columns:1fr 240px;gap:20px;margin-top:12px}
.paper.a4 .tt div{display:flex;justify-content:space-between;padding:3px 0}
.paper.a4 .tt .g{border-top:2px solid #0B2447;font-weight:700;font-size:14px;margin-top:4px;padding-top:6px}
.paper .qr{display:flex;justify-content:center;margin-top:8px}
.paper .qr svg{width:110px;height:110px}
.paper .demo{color:#B8392A;font-weight:600;text-align:center;font-size:10.5px;margin-top:6px;letter-spacing:.03em}
.paper .store{font-size:10.5px;color:#555;text-align:center;margin-top:4px}

/* ---------- modal ---------- */
.modal-wrap{position:fixed;inset:0;z-index:70;background:rgba(7,17,31,.55);display:flex;align-items:flex-start;justify-content:center;padding:40px 14px 24px;overflow-y:auto}
.modal{background:var(--surface);border-radius:14px;width:min(620px,100%);box-shadow:var(--shadow);border:1px solid var(--line)}
.modal.w{width:min(880px,100%)}
.modal.xw{width:min(1040px,100%)}
.modal.s{width:min(440px,100%)}
.modal-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.modal-h h3{font-size:17px;font-weight:600}
.modal-h .icon-btn{margin-left:auto}
.modal-b{padding:16px 18px}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line-2);flex-wrap:wrap}
#toasts{position:fixed;right:18px;bottom:18px;z-index:90;display:grid;gap:8px;pointer-events:none}
.toast{background:var(--navy);color:#fff;padding:10px 14px;border-radius:10px;box-shadow:var(--shadow);font-size:13.5px;max-width:340px;animation:tin .25s}
.toast.ok{background:#14613F}.toast.bad{background:#9B2E22}.toast.warn{background:#7A4D00}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}

/* ---------- pagos ---------- */
.pm{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:14px}
.pm button{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 8px;cursor:pointer;font-weight:600;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:4px}
.pm button.on{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
.pm .lg{height:22px;display:flex;align-items:center;font:800 13px var(--fd);letter-spacing:-.02em}
.sumbox{background:var(--surface-2);border-radius:10px;padding:12px 14px;display:grid;gap:4px;margin-bottom:14px}
.sumbox div{display:flex;justify-content:space-between}
.sumbox .g{font:700 18px var(--fd);border-top:1px solid var(--line);padding-top:6px;margin-top:4px}
.card-prev{background:linear-gradient(135deg,#0B2447,#1A5FB4);color:#fff;border-radius:14px;padding:18px;font-family:var(--fm);margin-bottom:14px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.card-prev .nu{font-size:18px;letter-spacing:.08em}
.yape-qr{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.yape-qr .q{background:#fff;border-radius:12px;padding:10px;border:1px solid var(--line)}
.yape-qr .q svg{width:150px;height:150px;display:block}
.plans-app{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.plan-c{border:1.5px solid var(--line);border-radius:14px;padding:16px;background:var(--surface);display:flex;flex-direction:column;gap:6px}
.plan-c.cur{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,167,224,.2)}
.plan-c h3{font-size:17px}
.plan-c .p{font:700 24px var(--fd)}
.plan-c ul{list-style:none;padding:0;margin:4px 0 10px;display:grid;gap:4px;font-size:13px;color:var(--ink-2);flex:1}

/* ---------- asistente ---------- */
.bot-fab{position:fixed;right:18px;bottom:18px;z-index:55;display:flex;align-items:center;gap:10px;border:0;background:transparent;cursor:pointer;padding:0}
.bot-fab .tip{background:var(--surface);color:var(--navy);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font:600 13px var(--fd);box-shadow:var(--shadow)}
:root[data-theme="dark"] .bot-fab .tip{color:var(--ink)}
.bot-fab svg{width:58px;height:58px;filter:drop-shadow(0 8px 16px rgba(11,36,71,.35))}
.bot-fab svg .eye{animation:blink 4s infinite;transform-origin:center;transform-box:fill-box}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.bot-pn{position:fixed;right:18px;bottom:88px;z-index:56;width:min(390px,calc(100vw - 24px));height:min(560px,calc(100vh - 120px));background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.bot-h{background:var(--navy);color:#fff;display:flex;gap:10px;align-items:center;padding:12px 14px}
.bot-h svg{width:38px;height:38px}
.bot-h b{display:block;font-family:var(--fd)}
.bot-h span{font-size:12px;color:var(--pale)}
.bot-h .icon-btn{margin-left:auto;background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.bot-b{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--surface-2)}
.bm{max-width:88%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.5;background:var(--surface);border:1px solid var(--line-2)}
.bm.me{margin-left:auto;background:var(--acc);color:#fff;border-color:var(--acc)}
.bm ul{margin:4px 0;padding-left:18px}
.bot-chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--line-2)}
.bot-chips button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 10px;font-size:12.5px;cursor:pointer}
.bot-chips button:hover{border-color:var(--acc);color:var(--acc)}
.bot-in{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line-2)}
.bot-q{font-size:11.5px;color:var(--ink-3);padding:0 12px 8px}

/* gráfico */
.bars{display:flex;align-items:flex-end;gap:6px;height:170px;padding-top:10px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;min-width:0}
.bars .b i{display:block;width:100%;background:var(--blue);border-radius:5px 5px 0 0;min-height:2px;opacity:.85}
.bars .b:last-child i{background:var(--cyan);opacity:1}
.bars .b span{font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.hbar{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:6px 10px;align-items:center;font-size:13px}
.hbar .tr{height:8px;background:var(--surface-2);border-radius:6px;overflow:hidden;grid-column:1/-1;margin-bottom:6px}
.hbar .tr i{display:block;height:100%;background:var(--blue)}

/* foto factura */
.photo-drop{border:2px dashed var(--line);border-radius:12px;padding:26px;text-align:center;cursor:pointer;background:var(--surface-2)}
.photo-drop:hover{border-color:var(--acc)}
.photo-prev{position:relative;border-radius:10px;overflow:hidden;max-height:260px;display:flex;justify-content:center;background:#111}
.photo-prev img{max-height:260px;object-fit:contain}
.photo-prev .sl{position:absolute;left:0;right:0;height:3px;background:var(--cyan);box-shadow:0 0 14px 4px rgba(34,167,224,.6);animation:sl 1.6s ease-in-out infinite}
@keyframes sl{0%{top:0}100%{top:100%}}

/* impresión */
#printArea{display:none}
@media print{
  body *{visibility:hidden!important}
  #printArea,#printArea *{visibility:visible!important}
  #printArea{display:block!important;position:absolute;left:0;top:0;width:100%}
  #printArea .paper{box-shadow:none;border:0;margin:0 auto}
  @page{margin:8mm}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){.pos{grid-template-columns:minmax(0,1fr) 330px}.quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:270px;z-index:65;transform:translateX(-100%);transition:transform .25s}
  .side.open{transform:none;box-shadow:var(--shadow)}
  .scrim.on{display:block;position:fixed;inset:0;background:rgba(7,17,31,.45);z-index:64}
  .menu-btn{display:inline-grid}
  .grid2,.grid2e,.grid3{grid-template-columns:1fr}
  .pos{grid-template-columns:1fr}
  .cart{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:82vh;z-index:58;border-radius:16px 16px 0 0;transform:translateY(110%);transition:transform .25s;box-shadow:0 -10px 30px rgba(0,0,0,.25)}
  .cart.open{transform:none}
  .mob-only{display:inline-grid!important}
  .cart-mob{display:flex;position:fixed;left:12px;right:84px;bottom:14px;z-index:57;height:52px;border-radius:12px;background:var(--navy);color:#fff;border:0;align-items:center;justify-content:space-between;padding:0 16px;font:600 15px var(--fd);box-shadow:var(--shadow);cursor:pointer}
  .auth{grid-template-columns:1fr}
  .auth-art{padding:24px}
  .auth-art ul,.auth-art p{display:none}
  .auth-art h1{margin:16px 0 0;font-size:24px}
  .view{padding:16px 14px 100px}
  .top{padding:8px 14px}
  .demo-bar{padding:7px 14px}
}
@media (max-width:640px){
  .f,.f.s2,.f.s4,.f.s5,.f.s6,.f.s8,.f.s9{grid-column:span 12}
  .f.h6{grid-column:span 6}
  .quick{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .paper.a4{width:100%;padding:18px}
  .paper.a4 .hd,.paper.a4 .ft,.paper.a4 .meta{grid-template-columns:1fr}
  .payline{grid-template-columns:1fr 1fr 34px}
  .rubros{grid-template-columns:1fr}
  .bot-fab .tip{display:none}
  #toasts{left:12px;right:12px;top:12px;bottom:auto}
  .toast{max-width:none}
  .top .chip.hm{display:none}
  .t td,.t th{padding:7px 8px}
  .den{grid-template-columns:1fr 70px 90px}
}