/* Stock PRO — estilo PRO de Lo Tienes Que Saber
   Layout: barra lateral en PC, barra inferior en celular; encabezado azul noche con franja naranja */
:root{
  --navy:#1B1F3B; --navy-2:#262B52; --orange:#FF6B35; --orange-ink:#C2410C;
  --bg:#F5F6FA; --surface:#FFFFFF; --card:#F3F4F6; --line:#E3E5EC;
  --fg:#1F2433; --muted:#6B7085;
  --in-bg:#FFF8E1; --in-fg:#1E3A8A; --in-line:#F1DFA6;
  --ok-bg:#E8F5EE; --ok-fg:#166534;
  --bad-bg:#FDECEC; --bad-fg:#B42318;
  --warn-bg:#FFF1E8; --warn-fg:#B54708;
  --gray-bg:#EEF0F4; --gray-fg:#4B5068;
  --shadow:0 1px 2px rgba(27,31,59,.06),0 4px 14px rgba(27,31,59,.06);
  --font:Calibri,Carlito,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#12142A; --surface:#1A1D38; --card:#20244A; --line:#2E3360;
  --fg:#E8EAF5; --muted:#9CA1C2;
  --in-bg:#2A2716; --in-fg:#C7D7FF; --in-line:#4A4220;
  --ok-bg:#12301F; --ok-fg:#7BDCA0; --bad-bg:#3A1717; --bad-fg:#FF9B91;
  --warn-bg:#3A2614; --warn-fg:#FFB27A; --gray-bg:#262A4E; --gray-fg:#C3C7E0;
  --orange-ink:#FF8A5C; --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12142A; --surface:#1A1D38; --card:#20244A; --line:#2E3360;
  --fg:#E8EAF5; --muted:#9CA1C2;
  --in-bg:#2A2716; --in-fg:#C7D7FF; --in-line:#4A4220;
  --ok-bg:#12301F; --ok-fg:#7BDCA0; --bad-bg:#3A1717; --bad-fg:#FF9B91;
  --warn-bg:#3A2614; --warn-fg:#FFB27A; --gray-bg:#262A4E; --gray-fg:#C3C7E0;
  --orange-ink:#FF8A5C; --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.4;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ---------- Estructura ---------- */
.shell{display:flex;min-height:100%}
.side{display:none}
.main{flex:1;min-width:0;display:flex;flex-direction:column;padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
.top{background:var(--navy);color:#fff;padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:14px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  border-bottom:5px solid var(--orange);display:flex;align-items:center;gap:12px}
.top h1{font-size:1.45rem;font-weight:700;letter-spacing:.2px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .sub{font-size:.8rem;opacity:.75;letter-spacing:.6px;text-transform:uppercase}
.top .back{background:transparent;border:0;color:#fff;font-size:1.5rem;padding:4px 8px;cursor:pointer;border-radius:8px}
.top .back:hover{background:rgba(255,255,255,.1)}
.content{padding-block:18px 28px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  width:100%;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:18px}

.bottom{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--navy);display:grid;grid-template-columns:repeat(5,1fr);
  padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);border-top:3px solid var(--orange)}
.bottom a{color:#C9CCE3;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 9px;font-size:.72rem}
.bottom a svg{width:22px;height:22px}
.bottom a.on{color:#fff}
.bottom a.on svg{color:var(--orange)}

@media (min-width:900px){
  .side{display:flex;flex-direction:column;align-self:flex-start;width:232px;flex:none;background:var(--navy);color:#fff;position:sticky;top:0;height:100vh;padding:20px 12px;gap:4px}
  .side .brand{padding:6px 10px 18px;border-bottom:3px solid var(--orange);margin-bottom:12px}
  .side .brand b{display:block;font-size:1.3rem}
  .side .brand span{font-size:.75rem;opacity:.7;letter-spacing:.6px;text-transform:uppercase}
  .side a{color:#C9CCE3;text-decoration:none;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px}
  .side a svg{width:20px;height:20px}
  .side a:hover{background:var(--navy-2);color:#fff}
  .side a.on{background:var(--navy-2);color:#fff;box-shadow:inset 3px 0 0 var(--orange)}
  .side .foot{margin-top:auto;font-size:.75rem;opacity:.6;padding:10px}
  .bottom{display:none}
  .main{padding-bottom:0}
}

/* ---------- Componentes ---------- */
.section{display:flex;flex-direction:column;gap:10px}
.section>h2{font-size:1.05rem;color:var(--fg);display:flex;align-items:center;gap:8px}
.section>h2::before{content:"";width:4px;height:18px;background:var(--orange);border-radius:2px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.panel.pad{padding:16px}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:700px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi{background:var(--card);border-radius:var(--r);padding:14px 14px 12px;border-bottom:4px solid var(--orange);display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi .l{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.kpi .v{font-size:1.9rem;font-weight:700;color:var(--fg);line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi .s{font-size:.8rem;color:var(--muted)}
.kpi.alert{border-bottom-color:var(--bad-fg)}
.kpi.alert .v{color:var(--bad-fg)}

.menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.menu{grid-template-columns:repeat(4,minmax(0,1fr))}}
.menu button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;font-weight:700}
.menu button svg{width:24px;height:24px;color:var(--orange)}
.menu button.main-cta{background:var(--orange);border-color:var(--orange);color:#fff}
.menu button.main-cta svg{color:#fff}
.menu button:hover{border-color:var(--orange)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--fg);
  padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:700;min-height:42px;text-decoration:none;white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn:hover{border-color:var(--navy)}
.btn.pri{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.pri:hover{filter:brightness(.95)}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.ok{background:#16A34A;border-color:#16A34A;color:#fff}
.btn.wa{background:#1FA855;border-color:#1FA855;color:#fff}
.btn.danger{color:var(--bad-fg);border-color:var(--bad-fg);background:transparent}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 10px;min-height:34px;font-size:.88rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btns{display:flex;flex-wrap:wrap;gap:8px}

.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.pill.borrador{background:var(--gray-bg);color:var(--gray-fg)}
.pill.confirmado{background:var(--ok-bg);color:var(--ok-fg)}
.pill.anulado{background:var(--bad-bg);color:var(--bad-fg)}
.pill.sync{background:rgba(255,255,255,.14);color:#fff}

label.f{display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--muted);font-weight:700;min-width:0}
.in,select.in,textarea.in{background:var(--in-bg);color:var(--in-fg);border:1px solid var(--in-line);border-radius:8px;padding:10px 11px;width:100%;min-height:44px;font-size:1rem;font-weight:400}
textarea.in{min-height:70px;resize:vertical}
.in:focus{outline:2px solid var(--orange);outline-offset:0;border-color:var(--orange)}
.in.ro,.in[readonly]{background:var(--card);color:var(--fg);border-color:var(--line)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3 .wide{grid-column:1/-1}}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar .search{flex:1;min-width:180px}
.chip{border:1px solid var(--line);background:var(--surface);padding:7px 12px;border-radius:999px;cursor:pointer;font-weight:700;font-size:.85rem;color:var(--muted)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* Artículos */
.arts{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.art{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.art.low{border-left:4px solid var(--bad-fg)}
.art .h{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.art .h b{font-size:1.08rem;overflow-wrap:anywhere}
.art .cat{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.art .price{font-weight:700;color:var(--orange-ink);white-space:nowrap}
.colors{display:flex;flex-wrap:wrap;gap:6px}
.cl{display:inline-flex;gap:6px;align-items:center;background:var(--card);border-radius:6px;padding:4px 8px;font-size:.85rem}
.cl b{font-variant-numeric:tabular-nums}
.cl.low{background:var(--bad-bg);color:var(--bad-fg)}
.art .tot{font-size:.85rem;color:var(--muted)}
.art .tot b{color:var(--fg)}

/* Listas */
.list{display:flex;flex-direction:column}
.row{display:flex;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line);cursor:pointer;background:transparent;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left}
.row:first-child{border-top:0}
.row:hover{background:var(--card)}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .d{font-size:.82rem;color:var(--muted)}
.row .amt{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.row.static{cursor:default}
.row.static:hover{background:transparent}
.qty-pos{color:var(--ok-fg);font-weight:700}
.qty-neg{color:var(--bad-fg);font-weight:700}
.nro{font-family:Consolas,"Courier New",monospace;font-size:.85rem;color:var(--muted)}
.empty{padding:26px 16px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--fg);margin-bottom:4px}

/* Presupuesto */
.thead{display:grid;grid-template-columns:minmax(0,1fr) 92px 112px 116px 40px;gap:8px;padding:10px 14px;background:var(--navy);color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:3px solid var(--orange);border-radius:var(--r) var(--r) 0 0}
.item{display:grid;grid-template-columns:minmax(0,1fr) 92px 112px 116px 40px;gap:8px;padding:10px 14px;align-items:center;border-top:1px solid var(--line)}
.item .n b{display:block;overflow-wrap:anywhere}
.item .n span{font-size:.82rem;color:var(--muted)}
.item .sub{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.item .in{min-height:38px;padding:7px 8px;text-align:right}
.item .warn{grid-column:1/-1;font-size:.8rem;color:var(--warn-fg);background:var(--warn-bg);padding:4px 8px;border-radius:6px}
.x{border:0;background:transparent;color:var(--muted);font-size:1.2rem;cursor:pointer;border-radius:6px;padding:4px}
.x:hover{color:var(--bad-fg);background:var(--bad-bg)}
@media (max-width:640px){
  .thead{display:none}
  .item{grid-template-columns:1fr 1fr 40px;row-gap:8px}
  .item .n{grid-column:1/3}
  .item .x{grid-column:3;grid-row:1}
  .item .sub{grid-column:1/-1;text-align:right}
  .item .lbl{display:block;font-size:.72rem;color:var(--muted);font-weight:700;margin-bottom:2px}
}
@media (min-width:641px){.item .lbl{display:none}}
.totals{display:flex;flex-direction:column;gap:8px;padding:14px}
.totals .tr{display:flex;justify-content:space-between;gap:12px;align-items:center;font-variant-numeric:tabular-nums}
.totals .tr .in{width:120px;text-align:right;min-height:38px;padding:7px 8px}
.grand{background:var(--ok-bg);color:var(--ok-fg);border-radius:var(--r);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.grand span{font-weight:700;letter-spacing:.6px;text-transform:uppercase;font-size:.85rem}
.grand b{font-size:1.8rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-align:right}
.adder{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end}
@media (max-width:760px){.adder{grid-template-columns:1fr 1fr}.adder .span2{grid-column:1/-1}.adder .btn{grid-column:1/-1}}
.hint{font-size:.82rem;color:var(--muted)}
.hint.bad{color:var(--bad-fg);font-weight:700}
.hint.ok{color:var(--ok-fg);font-weight:700}
.notice{padding:10px 12px;border-radius:8px;font-size:.9rem}
.notice.warn{background:var(--warn-bg);color:var(--warn-fg)}
.notice.ok{background:var(--ok-bg);color:var(--ok-fg)}
.notice.bad{background:var(--bad-bg);color:var(--bad-fg)}
.notice.info{background:var(--card);color:var(--fg)}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(10,12,30,.55);z-index:50;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:640px){.modal-bg{align-items:center;padding:20px}}
.modal{background:var(--surface);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:14px 14px 0 0;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom,0px)}
@media (min-width:640px){.modal{border-radius:14px}}
.modal .mh{background:var(--navy);color:#fff;padding:14px 16px;border-bottom:4px solid var(--orange);display:flex;justify-content:space-between;align-items:center;gap:10px;position:sticky;top:0;z-index:1}
.modal .mh h3{font-size:1.1rem}
.modal .mh .x{color:#fff}
.modal .mb{padding:16px;display:flex;flex-direction:column;gap:12px}
.modal .mf{padding:12px 16px 16px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;border-top:1px solid var(--line)}
.crow{display:grid;grid-template-columns:minmax(0,1fr) 110px 36px;gap:8px;align-items:center}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;padding:10px;background:var(--surface);cursor:pointer;font-weight:700;color:var(--muted)}
.seg button.on.in-b{background:var(--ok-bg);color:var(--ok-fg)}
.seg button.on.out-b{background:var(--bad-bg);color:var(--bad-fg)}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100% - 32px)}
#toast div{background:var(--navy);color:#fff;padding:10px 16px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.25);font-weight:700;border-left:4px solid var(--orange);font-size:.92rem}
#toast div.bad{border-left-color:#F04438}

/* Login */
.auth{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--navy);
  padding-block:24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.auth .box{background:var(--surface);border-radius:16px;width:100%;max-width:400px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.auth .bh{background:var(--navy);color:#fff;padding:26px 22px 20px;border-bottom:5px solid var(--orange);display:flex;gap:14px;align-items:center}
.auth .bh img{width:56px;height:56px;border-radius:12px}
.auth .bh b{font-size:1.5rem;display:block}
.auth .bh span{font-size:.78rem;opacity:.75;letter-spacing:.6px;text-transform:uppercase}
.auth .bb{padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px}
.auth .sep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.8rem}
.auth .sep::before,.auth .sep::after{content:"";flex:1;height:1px;background:var(--line)}
.link{background:none;border:0;color:var(--orange-ink);font-weight:700;cursor:pointer;padding:4px;text-decoration:underline}
.loading{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:var(--navy);color:#fff}
.spin{width:38px;height:38px;border:4px solid rgba(255,255,255,.2);border-top-color:var(--orange);border-radius:50%;animation:sp 0.9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:3s}}

/* Impresión del presupuesto */
#print-area{display:none}
@media print{
  body.printing #app,body.printing #modal-root,body.printing #toast{display:none!important}
  body.printing #print-area{display:block}
  body{background:#fff;color:#111}
  @page{margin:14mm}
}
.pr{font-family:var(--font);color:#111;font-size:12pt}
.pr .ph{background:#1B1F3B;color:#fff;padding:16px 18px;border-bottom:6px solid #FF6B35;display:flex;justify-content:space-between;gap:12px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pr .ph h1{font-size:20pt}
.pr .meta{display:flex;justify-content:space-between;padding:12px 2px;gap:12px}
.pr table{width:100%;border-collapse:collapse;margin-top:6px}
.pr th{background:#1B1F3B;color:#fff;text-align:left;padding:7px 8px;border-bottom:3px solid #FF6B35;font-size:10pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pr td{padding:7px 8px;border-bottom:1px solid #ddd}
.pr td.r,.pr th.r{text-align:right}
.pr .tt{margin-left:auto;width:280px;margin-top:10px}
.pr .tt div{display:flex;justify-content:space-between;padding:4px 2px}
.pr .tt .g{background:#E8F5EE;color:#166534;font-weight:700;font-size:14pt;padding:8px 10px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pr .foot{margin-top:24px;font-size:10pt;color:#555;border-top:1px solid #ddd;padding-top:8px}

/* Instalar como app */
.install-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--warn-bg);border:1px solid var(--orange);border-radius:var(--r);padding:12px 14px}
.install-card .ic-t{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.install-card .ic-t b{color:var(--fg)}
.install-card .ic-t span{font-size:.85rem;color:var(--muted)}
.install-card .btn{flex:none}
.auth .install-card{flex-direction:column;align-items:stretch;text-align:left}
.auth .install-card .btn{width:100%}
.steps-list{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.steps-list li{padding-left:4px;line-height:1.45}
.steps-list li::marker{color:var(--orange-ink);font-weight:700}

/* Cuenta 1 / Cuenta 2 */
.cuentas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kpi.c2{border-bottom-color:var(--warn-fg)}
.kpi .v.money{font-size:1.35rem}
.pills{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap;margin-top:2px}
.pill.c1{background:var(--card);color:var(--muted)}
.pill.c2{background:var(--warn-bg);color:var(--warn-fg)}
.cuenta-sel{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.seg2{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg2 button{border:0;background:var(--surface);padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:1px;color:var(--muted);text-align:left}
.seg2 button+button{border-left:1px solid var(--line)}
.seg2 button b{font-size:1rem;color:var(--fg)}
.seg2 button span{font-size:.8rem}
.seg2 button.on.c1{background:var(--ok-bg);color:var(--ok-fg);box-shadow:inset 0 -3px 0 var(--ok-fg)}
.seg2 button.on.c1 b{color:var(--ok-fg)}
.seg2 button.on.c2{background:var(--warn-bg);color:var(--warn-fg);box-shadow:inset 0 -3px 0 var(--warn-fg)}
.seg2 button.on.c2 b{color:var(--warn-fg)}

/* Listas de precios, precios y voz */
.art .listas{font-size:.82rem;color:var(--muted)}
.art .listas b{color:var(--fg)}
.seg3{grid-template-columns:repeat(3,1fr)}
.seg2 button.on.lst{background:var(--in-bg);color:var(--in-fg);box-shadow:inset 0 -3px 0 var(--orange)}
.seg2 button.on.lst b{color:var(--in-fg)}
.seg2 button:disabled{cursor:default}
.sep-o{text-align:center;color:var(--muted);font-size:.82rem}
.ptable{border:1px solid var(--line);border-radius:10px;overflow:auto;max-height:46vh}
.ptable .ph,.ptable .pr2{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:8px;padding:8px 12px;align-items:center}
.ptable .ph{background:var(--navy);color:#fff;font-size:.74rem;text-transform:uppercase;letter-spacing:.4px;border-bottom:3px solid var(--orange);position:sticky;top:0}
.ptable .ph span:not(:first-child),.ptable .pr2 > :not(:first-child){text-align:right}
.ptable .pr2{border-top:1px solid var(--line);font-size:.9rem}
.ptable .pr2 b{color:var(--ok-fg)}
.ptable .more{display:block;color:var(--muted);text-align:center}
.mic-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0 2px}
.mic{width:84px;height:84px;border-radius:50%;border:0;background:var(--orange);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(255,107,53,.35)}
.mic svg{width:38px;height:38px}
.mic.on{background:#E5484D;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}50%{box-shadow:0 0 0 16px rgba(229,72,77,0)}}
@media (prefers-reduced-motion:reduce){.mic.on{animation:none}}
.mic-st{font-size:.9rem;color:var(--muted);text-align:center;max-width:360px}
.ci{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ci-h,.ci-r{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr) 130px 36px;gap:8px;padding:8px 10px;align-items:center}
.ci-h{background:var(--navy);color:#fff;font-size:.74rem;text-transform:uppercase;letter-spacing:.4px;border-bottom:3px solid var(--orange)}
.ci-r{border-top:1px solid var(--line)}
.ci-r .in{min-height:40px;padding:8px}
.ci-q{display:flex;align-items:center;gap:6px}
.ci-q span{font-size:.82rem;color:var(--muted);min-width:24px}
.ci-tag{grid-column:1/-1}
.tag{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:999px}
.tag.new{background:var(--ok-bg);color:var(--ok-fg)}
.tag.warn{background:var(--warn-bg);color:var(--warn-fg)}
.tag.bad{background:var(--bad-bg);color:var(--bad-fg)}
@media (max-width:640px){
  .ci-h{display:none}
  .ci-r{grid-template-columns:1fr 1fr 36px}
  .ci-r .ci-a{grid-column:1/3}
  .ci-r .ci-x{grid-column:3;grid-row:1}
  .ci-r .ci-c{grid-column:1}
  .ci-r .ci-q{grid-column:2/4}
  .ptable .ph,.ptable .pr2{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));font-size:.8rem;padding:8px}
}

/* Prueba gratis */
.pill.sync.trial{background:var(--orange);color:#fff}
.trial-card{display:flex;gap:12px;align-items:center;background:var(--in-bg);border:1px solid var(--in-line);border-left:5px solid var(--orange);border-radius:var(--r);padding:12px 14px}
.trial-card .ic-t{display:flex;flex-direction:column;gap:2px}
.trial-card .ic-t b{color:var(--fg)}
.trial-card .ic-t span{font-size:.88rem;color:var(--muted)}
.trial-card .ic-t span b{color:var(--fg)}

/* ---------- Moda: talle × color ---------- */
.tg-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:8px}
.tgrid{border-collapse:collapse;width:100%;font-size:.85rem;font-variant-numeric:tabular-nums}
.tgrid th,.tgrid td{padding:6px 8px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.tgrid thead th{background:var(--navy);color:#fff;font-weight:700;font-size:.78rem}
.tgrid tbody th{text-align:left;font-weight:700;background:var(--card);position:sticky;left:0;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.tgrid tr:last-child th,.tgrid tr:last-child td{border-bottom:0}
.tgrid td.t,.tgrid th.t{font-weight:700;background:var(--card);color:var(--fg)}
.tgrid thead th.t{background:var(--navy-2);color:#fff}
.tgrid td.zero{background:var(--bad-bg);color:var(--bad-fg);font-weight:700}
.tgrid td.low{background:var(--warn-bg,#FFF4E5);color:var(--warn-fg,#B45309);font-weight:700}
.tgrid td.na{color:var(--muted)}
.art .agot{color:var(--bad-fg);font-weight:700}
.art .nocat{color:var(--orange-ink);text-transform:none;letter-spacing:0}
.tipo-art{display:grid;gap:10px}
.tipo{display:flex;flex-direction:column;gap:4px;text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px;cursor:pointer;color:var(--fg)}
.tipo b{font-size:1.02rem}.tipo span{color:var(--muted);font-size:.88rem}
.tipo:hover,.tipo:focus-visible{border-color:var(--orange)}
.gedit{display:flex;flex-direction:column;gap:6px;overflow-x:auto;padding-bottom:4px}
.gc-h,.gc-row{display:grid;grid-template-columns:minmax(92px,1.2fr) auto 28px;gap:6px;align-items:start}
.gc-h>:first-child,.gc-row>:first-child{position:sticky;left:0;z-index:1;background:var(--surface)}
.gc-h{font-size:.75rem;color:var(--muted);font-weight:700}
.gc-h{grid-template-columns:minmax(92px,1.2fr) repeat(var(--nt),52px) 28px}
.gc-qs{display:grid;grid-template-columns:repeat(var(--nt),52px);gap:6px}
.gc-row .x{width:28px;height:40px}
.gc-h span:not(:first-child){text-align:center}
.gc-q{padding:8px 4px!important;text-align:center;min-width:0}
.gc-q.bad{border-color:var(--bad-fg);background:var(--bad-bg)}
.gc-l{font-weight:700;padding-top:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-cell{display:flex;flex-direction:column;gap:2px}
.gc-cell small{font-size:.68rem;color:var(--muted);text-align:center}
.foto-row{display:flex;gap:14px;align-items:center;background:var(--card);border-radius:var(--r);padding:10px}
.foto-prev{width:84px;height:84px;border-radius:8px;background:var(--surface);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none;overflow:hidden}
.foto-prev svg{width:28px;height:28px}.foto-prev img{width:100%;height:100%;object-fit:cover}
.chk{display:flex;gap:8px;align-items:center;font-size:.9rem;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--orange)}
.pk{display:flex;flex-wrap:wrap;gap:8px}
.pkb{border:1.5px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:700;color:var(--fg);display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:52px}
.pkb small{font-size:.7rem;color:var(--muted);font-weight:400}
.pkb.on{border-color:var(--orange);background:#FFF1EB;color:var(--orange-ink)}
.pkb.off{opacity:.45}
.pkb.tl.off{text-decoration:line-through;cursor:not-allowed}
.vr-add{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.vr-pr{font-weight:700;color:var(--orange-ink)}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.stepper button{border:0;background:var(--card);width:40px;height:42px;font-size:1.2rem;font-weight:700;cursor:pointer;color:var(--fg)}
.stepper input{width:64px;border:0!important;border-radius:0!important;text-align:center}
#vr-t .row{gap:10px}
#vr-t .grand{margin:0;border-radius:0}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .pkb.on{background:#3A2418}}
:root[data-theme=dark] .pkb.on{background:#3A2418}

/* ---------- Ventas PRO: pagos, clientes, reportes ---------- */
.bottom{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
.bottom a span{white-space:nowrap;font-size:.68rem}
.pagos{display:flex;flex-direction:column;gap:10px}
.pkb.fiado.on{border-color:var(--warn-fg);background:var(--warn-bg);color:var(--warn-fg)}
.pg-ef{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.pg-ef .f{max-width:180px}
.pg-vuelto{font-weight:700;color:var(--ok-fg);padding-bottom:12px}
.pg-vuelto.bad{color:var(--bad-fg)}
.pg-rows{display:flex;flex-direction:column;gap:8px}
.pg-r{display:grid;grid-template-columns:1fr 130px 32px;gap:8px;align-items:center}
.pg-rest{font-weight:700;text-align:right;padding-right:6px}
.link{background:none;border:0;color:var(--orange-ink);font-weight:700;cursor:pointer;padding:4px 0;text-align:left;font-size:.9rem}
.bars{display:flex;flex-direction:column;gap:9px}
.bar-r{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;gap:10px;align-items:center;font-size:.88rem}
.bar-r .bl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-r .bt{height:12px;background:var(--card);border-radius:6px;overflow:hidden}
.bar-r .bf{display:block;height:100%;background:var(--orange);border-radius:6px}
.bar-r .bf.warn{background:var(--warn-fg)}.bar-r .bf.ok{background:var(--ok-fg)}.bar-r .bf.gray{background:var(--muted)}
.bar-r .bv{white-space:nowrap;text-align:right}
.bar-r .bv small{font-weight:400;color:var(--muted);margin-left:2px}
.caja-top{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:10px}
.caja-top>div{display:flex;flex-direction:column}
.caja-top .l{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.caja-top b{font-size:1.5rem}
.caja-top .s{font-size:.8rem;color:var(--muted)}
.caja-m{display:flex;flex-wrap:wrap;gap:8px}
.cm{background:var(--card);border-radius:8px;padding:6px 10px;font-size:.85rem}
.cm.fi{background:var(--warn-bg);color:var(--warn-fg)}
@media (max-width:520px){.bar-r{grid-template-columns:minmax(80px,34%) 1fr auto;font-size:.82rem}.pg-r{grid-template-columns:1fr 110px 32px}}
.bars.stack .bar-r{grid-template-columns:1fr auto;row-gap:4px}
.bars.stack .bl{grid-column:1/-1;white-space:normal;font-weight:700}
.bars.stack .bt{grid-column:1}
.cards.mini3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.mini3 .v{font-size:1.05rem!important;overflow-wrap:anywhere}
@media (max-width:520px){.cards.mini3{gap:8px}.cards.mini3 .kpi{padding:10px}}

/* ---------- Telas: rollos, ficha, muestrario ---------- */
.sw{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.18);vertical-align:-2px;margin-right:6px;flex:none}
.cl .sw{margin-right:2px}
.ficha-t{font-size:.84rem;color:var(--muted)}
.pill.warn{background:var(--warn-bg);color:var(--warn-fg)}
.ficha{display:flex;flex-direction:column;gap:10px;background:var(--card);border-radius:var(--r);padding:12px}
.esc{display:flex;flex-direction:column;gap:6px}
.esc-r{display:grid;grid-template-columns:auto 80px auto auto 1fr;gap:8px;align-items:center;font-size:.88rem;color:var(--muted)}
.rl-g{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.rl-h{display:flex;align-items:center;gap:8px}
.rl-h .hint{margin-left:auto}
.rl-r{display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:8px}
.rl-r .t{font-weight:700}.rl-r .d{font-size:.8rem;color:var(--muted)}
.rl-bar{display:block;height:6px;background:var(--card);border-radius:4px;margin-top:5px;overflow:hidden;max-width:260px}
.rl-bar span{display:block;height:100%;background:var(--orange)}
@media (max-width:520px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.esc-r{grid-template-columns:auto 64px auto auto 1fr;gap:6px}}

/* Proveedores */
.seg4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg4 button{border:0;border-right:1px solid var(--line);background:var(--surface);padding:9px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:1px;color:var(--muted);text-align:left;min-width:0}
.seg4 button:last-child{border-right:0}
.seg4 button b{font-size:.88rem;color:var(--fg)}.seg4 button span{font-size:.72rem}
.seg4 button.on{background:var(--navy);color:#C9CCE3}.seg4 button.on b{color:#fff}
@media (max-width:560px){.seg4{grid-template-columns:1fr 1fr}.seg4 button:nth-child(2){border-right:0}.seg4 button:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.cp-box{display:flex;flex-direction:column;gap:8px}
.cp-h,.cp-r{display:grid;grid-template-columns:minmax(0,1fr) 80px 120px 32px;gap:8px;align-items:center}
.cp-h{font-size:.76rem;color:var(--muted);font-weight:700}
#cp-items{display:flex;flex-direction:column;gap:8px}
@media (max-width:560px){.cp-h{display:none}.cp-r{grid-template-columns:1fr 1fr 32px}.cp-r [data-k=desc]{grid-column:1/-1}}
.in.big{font-size:1.25rem;min-height:52px}

/* v1.8 rubro general (sin colores) */
.seg.rub button.on{background:var(--navy);color:#fff;box-shadow:inset 0 -3px 0 var(--orange)}
.ci.gen .ci-h,.ci.gen .ci-r{grid-template-columns:minmax(0,2fr) 130px 36px}
.ci.gen .ci-h span:nth-child(2),.ci.gen .ci-c{display:none}
@media (max-width:640px){.ci.gen .ci-r{grid-template-columns:1fr 36px}.ci.gen .ci-r .ci-a{grid-column:1}.ci.gen .ci-r .ci-x{grid-column:2;grid-row:1}.ci.gen .ci-r .ci-q{grid-column:1/3}}

/* v1.8.1 caja con pagos a proveedores */
.cm.out{background:var(--bad-bg);color:var(--bad-fg)}
.cm.pos{background:var(--ok-bg);color:var(--ok-fg)}
.caja-top b.neg,.kpi .v.neg{color:var(--bad-fg)}
.caja-net{padding-left:16px;border-left:3px solid var(--orange)}
.neto-m{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px}
.neto-m .l{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.bar-r .bf.bad{background:var(--bad-fg)}

/* v1.9 buscador (combo) + código + gastos */
.combo{position:relative;display:block}
.combo-in{width:100%}
.combo-l{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(15,18,40,.18);max-height:290px;overflow:auto;padding:4px}
.combo-i{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:7px;cursor:pointer;color:var(--fg);font:inherit;font-size:.92rem}
.combo-i small{color:var(--muted);font-size:.78rem}
.combo-i.on,.combo-i:hover{background:var(--card)}
.combo-i.on{box-shadow:inset 3px 0 0 var(--orange)}
.combo-i mark{background:rgba(255,107,53,.22);color:inherit;border-radius:3px;padding:0 1px}
.combo-e{padding:10px;color:var(--muted);font-size:.88rem}
.cod{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--card);border-radius:4px;padding:0 5px;color:var(--fg);font-weight:700}
.ci-r .combo{min-width:0}
.f{position:relative}
