:root{
  --bg:#0b1220; --sidebar:#0d1526; --panel:#121d33; --panel2:#0e1830; --line:#223048;
  --txt:#e8eef7; --muted:#8a99b2; --acc:#4f8ef7; --acc2:#38bdf8; --acc-rgb:79,142,247;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
  --r:14px; --shadow:0 8px 28px rgba(0,0,0,.28);
  --topbar-h:56px; --estado-h:34px;
}
body.light{
  --bg:#eef2f8; --sidebar:#ffffff; --panel:#ffffff; --panel2:#f3f6fb; --line:#dde4ef;
  --txt:#1a2434; --muted:#5d6b80; --shadow:0 6px 20px rgba(20,40,80,.10);
}
body.light .topbar{background:rgba(255,255,255,.92)}
body.light .nav-item{color:#42506a}
body.light .nav-item.active{color:#1d4ed8}
body.light .bubble-d{color:#42506a}
body.light .chip-x{color:#1d4ed8}
body.light .login-wrap{background:radial-gradient(1000px 500px at 50% -5%,#dbe6fb,transparent),#eef2f8}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--txt);font:14px/1.55 "Segoe UI",system-ui,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}.muted{color:var(--muted)}.spacer{flex:1}
button{cursor:pointer;border:0;border-radius:9px;background:var(--acc);color:#04122b;font-weight:600;padding:.55rem .95rem;font:inherit;font-weight:600}
button:hover{filter:brightness(1.08)}
button.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
button.ghost:hover{color:var(--txt);border-color:var(--acc)}
input,select{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:.5rem .65rem;font:inherit}
input:focus,select:focus{outline:none;border-color:var(--acc)}
label{display:flex;flex-direction:column;gap:.28rem;font-size:.78rem;color:var(--muted)}
.err{color:var(--bad);min-height:1.2em;font-size:.85rem}
h2{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.pos{color:var(--ok);font-weight:700}.neg{color:var(--bad);font-weight:700}

/* LOGIN */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1000px 500px at 50% -5%,#15233f,transparent),var(--bg)}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:2.2rem;width:350px;display:flex;flex-direction:column;gap:.9rem;box-shadow:var(--shadow);text-align:center}
.login-logo{max-height:74px;align-self:center;object-fit:contain;margin-bottom:.2rem}
.login-card label{text-align:left}
.brand-name{font-size:1.5rem;font-weight:800;letter-spacing:.06em;color:var(--txt)}
.brand-sub2{color:var(--muted);font-size:.82rem}
.login-foot{color:var(--muted);font-size:.72rem;margin-top:.3rem}
.link-forgot{color:var(--acc);font-size:.82rem;text-decoration:none;margin-top:-.2rem}
.link-forgot:hover{text-decoration:underline}
.pass-wrap{position:relative;display:flex}
.pass-wrap input{flex:1;width:100%;padding-right:2.3rem}
.eye-btn{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);background:transparent;border:0;padding:.2rem .3rem;font-size:1.05rem;line-height:1;cursor:pointer;color:var(--muted)}
.eye-btn:hover{filter:none;color:var(--txt)}

/* APP SHELL */
.app{display:flex;min-height:100vh}
.sidebar{width:236px;flex:0 0 236px;background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;gap:4px;height:100vh;position:sticky;top:0;overflow:auto}
.brand{display:flex;align-items:center;gap:.6rem;padding:.2rem .4rem 1rem}
.brand-logo{height:38px;object-fit:contain}
.sidebar .brand-name{font-size:1rem;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.sidebar .brand-sub2{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em}
.nav{display:flex;flex-direction:column;gap:1px}
.nav-group{margin-bottom:.1rem}
.nav-sec{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:0;color:var(--muted);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:.55rem .55rem .4rem;cursor:pointer;border-radius:8px}
.nav-sec:hover{color:var(--txt);background:rgba(255,255,255,.03)}
.nav-chev{font-size:.62rem;transition:transform .18s ease;opacity:.7}
.nav-group.collapsed .nav-chev{transform:rotate(-90deg)}
.nav-group.collapsed .nav-body{display:none}
.nav-body{display:flex;flex-direction:column;gap:2px;padding-left:.2rem}
.nav-subsec{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--grp,var(--muted));opacity:.85;padding:.5rem .7rem .15rem;margin-top:.1rem}
/* sub-secciones PLEGABLES (Ventas, Droguerías): el subtítulo es botón y abre/cierra sus items */
.nav-subgroup{display:flex;flex-direction:column;gap:2px}
.nav-subsec-btn{display:flex;width:100%;justify-content:space-between;align-items:center;background:none;border:none;cursor:pointer;text-align:left}
.nav-subgroup.collapsed .nav-subsec-btn .nav-chev{transform:rotate(-90deg)}
.nav-subgroup.collapsed>.nav-item{display:none}
/* cada categoría con su color: borde izquierdo + título de su color (para ver dónde empieza/termina) */
.nav-group{border-left:3px solid var(--grp,transparent);border-radius:0 9px 9px 0;padding-left:6px;margin-bottom:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--grp) 7%,transparent),transparent 60%)}
.nav-sec{color:var(--grp,var(--muted))}
.nav-sec .nav-chev{color:var(--grp,var(--muted));opacity:.8}
.tot-row td{font-weight:700;border-top:2px solid var(--line);background:rgba(127,127,127,.07)}
.nav-item{background:transparent;color:#b9c5d8;font-weight:500;text-align:left;border-radius:9px;padding:.5rem .7rem;position:relative;width:100%}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--txt)}
.nav-item.active{background:rgba(79,142,247,.14);color:#cfe0ff}
.nav-item.active::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:3px;background:var(--acc)}
.nav-group.has-active>.nav-sec{background:rgba(var(--acc-rgb),.07);color:var(--txt);border-left:2px solid var(--acc);padding-left:calc(.55rem - 2px)}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1rem;padding:.85rem 1.4rem;background:rgba(13,21,38,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.page-title{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.user{display:flex;align-items:center;gap:.7rem}.user span{font-size:.82rem;color:var(--muted)}
.user-chip{display:none;font-size:.7rem;font-weight:700;background:var(--acc);color:#04122b;border-radius:4px;padding:1px 6px;letter-spacing:.03em}
.view{padding:1.4rem;overflow:auto;flex:1}
.estado-bar{padding:.5rem 1.4rem;font-size:.82rem;font-weight:600;border-bottom:1px solid var(--line)}
.estado-bar.ok{background:rgba(34,197,94,.14);color:#86efac}
.estado-bar.warn{background:rgba(251,191,36,.15);color:#fcd34d}
.estado-bar.err{background:rgba(248,113,113,.16);color:#fca5a5}
.estado-bar.estado-chips{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;background:var(--panel2);white-space:normal;overflow:visible}
.est-chip{padding:.16rem .6rem;border-radius:999px;font-size:.74rem;font-weight:700;white-space:nowrap}
.est-ok{background:rgba(52,211,153,.16);color:var(--ok)}
.est-warn{background:rgba(251,191,36,.18);color:var(--warn)}
.est-err{background:rgba(248,113,113,.16);color:var(--bad)}
.prod-thumb{width:42px;height:42px;object-fit:contain;border-radius:6px;background:#fff;border:1px solid var(--line);vertical-align:middle}
.prod-thumb.is-logo{opacity:.3;padding:5px;background:transparent;border-color:transparent;pointer-events:none}
.prod-thumb.zoomable{cursor:zoom-in;transition:transform .12s}
.prod-thumb.zoomable:hover{transform:scale(1.15);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.foto-zoom{position:fixed;inset:0;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;z-index:9999;cursor:zoom-out}
.foto-zoom img{max-width:82vw;max-height:82vh;border-radius:14px;background:#fff;padding:14px;box-shadow:0 10px 50px rgba(0,0,0,.6)}
.sidebar-user{display:none}
.side-foot{margin-top:auto;padding:.85rem .55rem .4rem;font-size:.65rem;color:var(--muted);line-height:1.6;border-top:1px solid var(--line)}
.side-foot a,.login-foot a{color:var(--acc);text-decoration:none}
.side-foot a:hover,.login-foot a:hover{text-decoration:underline}

/* PANELS */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem;margin-bottom:1.2rem;box-shadow:var(--shadow);min-width:0;max-width:100%}
.panel.sub{background:var(--panel2)}
.panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.4rem;flex-wrap:wrap}
.panel>h2{margin-bottom:.2rem}
.controls{display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap;margin:.7rem 0}
.controls>label{margin:0;min-width:120px}
.controls>label:has(>button){min-width:auto;margin-left:auto}
.controls input,.controls select,.controls button,.controls .ms-btn,.controls .ac>input{height:38px;min-height:38px}
.controls button{display:inline-flex;align-items:center;justify-content:center}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.85rem;margin:.3rem 0 1.1rem}
.kpi{background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:.85rem 1rem;display:flex;flex-direction:column;gap:.25rem}
.kpi-l{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.kpi-sub{font-size:.6rem;opacity:.7;letter-spacing:.04em;text-transform:none;margin-top:-1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.kpi-v{font-size:1.55rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere}
.kpi-d{align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.74rem;font-weight:700;padding:.12rem .5rem;border-radius:999px;background:rgba(148,163,184,.12)}
.kpi-d.pos{color:var(--ok);background:rgba(52,211,153,.12)}
.kpi-d.neg{color:var(--bad);background:rgba(248,113,113,.12)}

/* TABLAS */
table{width:100%;border-collapse:collapse;font-size:.88rem}
/* columnas CENTRADAS en todo PSIA (pedido 2026-07-10); la primera (nombres) queda a la izquierda */
th,td{padding:.5rem .65rem;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
td:first-child{white-space:normal;min-width:90px;max-width:280px}
th{color:var(--muted);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;background:var(--panel)}
th.sortable{cursor:pointer;user-select:none}th.sortable:hover{color:var(--txt)}
tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
.mc{display:flex;flex-direction:column;align-items:flex-end;gap:.08rem;line-height:1.12}
.mc-v{font-weight:600}
.mc-var{font-size:.68rem;font-weight:600;display:flex;gap:.5rem;opacity:.92}
.mc-var .pos,.mc-var .neg{font-weight:700}
.mc-var i{font-style:normal;opacity:.55;font-weight:500}
tbody tr:hover{background:rgba(79,142,247,.07)}
tr.clickable{cursor:pointer}
tbody tr.row-hl{background:rgba(251,191,36,.12)}
tbody tr.row-hl:hover{background:rgba(251,191,36,.20)}
.barcell{position:relative;padding:.18rem .45rem;border-radius:6px;overflow:hidden;text-align:center}
.barcell::before{content:"";position:absolute;inset:0 0 0 auto;width:var(--w);background:linear-gradient(90deg,rgba(79,142,247,.08),rgba(79,142,247,.32));border-radius:6px}
.barcell span{position:relative;z-index:1}
.tag{padding:.12rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700}
.sev-alta{background:rgba(248,113,113,.16);color:var(--bad)}.sev-media{background:rgba(251,191,36,.16);color:var(--warn)}.sev-baja{background:rgba(56,189,248,.16);color:var(--acc2)}
.tag.prob-quiebre{background:rgba(248,113,113,.16);color:#f87171}.tag.prob-clavado{background:rgba(56,189,248,.16);color:#38bdf8}.tag.prob-sobrestock{background:rgba(167,139,250,.18);color:#a78bfa}.tag.prob-normal{background:rgba(120,140,170,.15);color:var(--muted)}
.barrido{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;margin-bottom:.9rem}
.barrido-h{font-weight:700;font-size:.92rem;margin-bottom:.2rem}
.pbar{height:13px;background:var(--line);border-radius:7px;overflow:hidden;margin:.35rem 0}
.pbar-f{height:100%;background:linear-gradient(90deg,var(--acc),var(--ok));border-radius:7px;transition:width .4s ease;min-width:2px}

/* GRÁFICOS */
.chart-card{background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:1rem;margin-bottom:1.1rem}
.chart-holder{position:relative;width:100%}.chart-holder canvas{position:absolute;inset:0}
.card-t{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.6rem}
.resumen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.95rem;margin:.3rem 0 1.1rem}
.resumen-grid .chart-card{margin-bottom:0}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:1rem}
/* donas fallback */
.dona-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.dona{width:108px;height:108px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 14px var(--panel2)}
.dona-leg{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem}.leg-item{display:flex;align-items:center;gap:.45rem}
.dot{width:11px;height:11px;border-radius:3px;display:inline-block}
.alert-n{font-size:2.7rem;font-weight:800;color:var(--bad);line-height:1}

/* SALUD / HIGHLIGHTS */
.health{display:inline-block;padding:.45rem 1rem;border-radius:999px;font-weight:700;margin:.1rem 0 .7rem}
.health.link{cursor:pointer;border:0}.health.link:hover{filter:brightness(1.12)}
.btn-spin{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.btn-spin circle{stroke:currentColor;stroke-width:3;fill:none;opacity:.85;stroke-linecap:round;stroke-dasharray:46;stroke-dashoffset:34;transform-origin:center;animation:btnspin .7s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}
button:disabled{opacity:.6;cursor:default;filter:none}
.loading-state{display:flex;align-items:center;gap:.6rem;color:var(--muted);padding:1rem 0}

/* indicador de scroll horizontal en tablas */
.table-scroll{position:relative}
.table-scroll.has-x::after{content:"";position:absolute;right:0;top:0;bottom:0;width:34px;pointer-events:none;background:linear-gradient(to right,transparent,var(--panel) 88%)}
.panel.sub .table-scroll.has-x::after,.card .table-scroll.has-x::after{background:linear-gradient(to right,transparent,var(--panel2) 88%)}
.health-ok{background:rgba(52,211,153,.13);color:var(--ok);border:1px solid rgba(52,211,153,.3)}
.health-warn{background:rgba(251,191,36,.13);color:var(--warn);border:1px solid rgba(251,191,36,.3)}
.health-bad{background:rgba(248,113,113,.13);color:var(--bad);border:1px solid rgba(248,113,113,.3)}
.highlights{margin:.2rem 0 1.1rem;padding-left:1.1rem}.highlights li{margin:.25rem 0}
.detalle{margin-top:.6rem}.detalle summary{cursor:pointer;padding:.35rem 0;color:var(--muted)}

/* BURBUJAS (alertas accionables) */
.bubbles{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:.9rem;margin:.5rem 0 1.2rem}
.bubble{background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:14px;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.35rem}
.bubble.repo{border-left-color:var(--warn)}
.bubble.comprar{border-left-color:var(--bad)}
.bubble.ok{border-left-color:var(--ok)}
.bubble-t{font-weight:700;font-size:.98rem}
.bubble-d{font-size:.85rem;color:#c4d0e2}
.bubble-stats{display:flex;gap:.8rem;flex-wrap:wrap;font-size:.8rem;margin-top:.2rem}
.bubble-stats b{color:var(--txt)}
.chip{align-self:flex-start;font-size:.74rem;font-weight:700;padding:.18rem .6rem;border-radius:999px;margin-top:.3rem}
.chip.repo{background:rgba(251,191,36,.16);color:var(--warn)}
.chip.comprar{background:rgba(248,113,113,.16);color:var(--bad)}

/* CHAT */
.chat-log{display:flex;flex-direction:column;gap:.6rem;margin:.6rem 0;max-height:50vh;overflow:auto}
.msg{padding:.6rem .85rem;border-radius:12px;max-width:85%;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.user{align-self:flex-end;background:var(--acc);color:#04122b}
.msg.bot{align-self:flex-start;background:var(--panel2);border:1px solid var(--line)}
.msg.sys{align-self:center;color:var(--muted);font-size:.8rem}
.chat-in{display:flex;gap:.5rem}.chat-in input{flex:1;min-width:0}
.chat-in button{white-space:nowrap;flex-shrink:0}
.trace{font-size:.72rem;color:var(--muted);margin-top:.3rem}
.chat-imgs{display:flex;flex-wrap:wrap;gap:.6rem;margin:.55rem 0 .2rem}
.chat-img{width:92px;display:flex;flex-direction:column;gap:.25rem;align-items:center;text-align:center;font-size:.66rem;color:var(--muted)}
.chat-img img{width:92px;height:92px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:8px}

/* POWER BI */
.pbi-frame{position:relative;width:100%;aspect-ratio:1140/541;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:.6rem}
.pbi-frame iframe{position:absolute;inset:0;width:100%;height:100%}

/* autocompletado laboratorio */
.ac{position:relative;display:inline-block;min-width:240px}
.ac>input{width:100%}
.ac-menu{display:none;position:absolute;top:108%;left:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.3rem;flex-direction:column;gap:.12rem;min-width:280px;max-height:300px;overflow:auto;z-index:30;box-shadow:var(--shadow)}
.ac-menu.open{display:flex}
.ac-menu button{text-align:left;background:transparent;color:var(--txt);border-radius:7px;padding:.4rem .55rem;font-weight:500}
.ac-menu button:hover{background:var(--panel2)}
.ac-wrap{display:flex;flex-direction:column;gap:.4rem}
.chips-box{display:flex;flex-wrap:wrap;gap:.3rem}
.chip-x{background:rgba(79,142,247,.16);color:#cfe0ff;border-radius:999px;padding:.18rem .6rem;font-size:.78rem;font-weight:600}
.chip-x b{cursor:pointer;color:var(--muted)}
.chip-x b:hover{color:var(--bad)}
/* multiselect (sucursal) */
.ms{position:relative;display:inline-block}
.ms-btn{min-width:185px;text-align:left}
.ms-menu{display:none;position:absolute;top:108%;left:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.4rem;flex-direction:column;gap:.08rem;min-width:230px;max-height:330px;overflow:auto;z-index:30;box-shadow:var(--shadow)}
.ms-menu.open{display:flex}
.ms-item{flex-direction:row;align-items:center;gap:.45rem;color:var(--txt);font-size:.85rem;padding:.28rem .4rem;border-radius:6px;cursor:pointer}
.ms-item:hover{background:var(--panel2)}

/* responsive */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* barra de scroll horizontal SIEMPRE visible y agarrable (no solo en mobile) */
.table-wrap{scrollbar-width:thin;scrollbar-color:var(--acc) var(--panel2);padding-bottom:2px}
.table-wrap::-webkit-scrollbar{height:10px}
.table-wrap::-webkit-scrollbar-track{background:var(--panel2);border-radius:5px}
.table-wrap::-webkit-scrollbar-thumb{background:var(--acc);border-radius:5px;border:2px solid var(--panel2)}
/* nada dentro del área de contenido puede empujar la página a lo ancho:
   lo ancho scrollea ADENTRO de su tabla/panel */
.view>*{max-width:100%;min-width:0}
.menu-btn{display:none;font-size:1.2rem;padding:.3rem .6rem}
.nav-ovl{display:none}
.bottom-nav{display:none}

@media(max-width:1100px){
  .user span{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

@media(max-width:860px){
  /* el menú va ABAJO (barra inferior), no arriba */
  .menu-btn{display:none}
  .topbar #btn-theme{display:none}   /* el toggle de tema ahora vive en la barra inferior */
  .view{padding-bottom:74px}
  .bn-img{width:24px;height:24px;object-fit:contain;border-radius:5px}
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--sidebar);border-top:1px solid var(--line);justify-content:space-around;align-items:stretch;box-shadow:0 -4px 16px rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom,0)}
  .bn-item{flex:1;background:transparent;border:0;border-radius:0;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:600;padding:.45rem 0;min-height:56px}
  .bn-item:hover{color:var(--txt)}
  .bn-ico{font-size:1.25rem;line-height:1}
  .bn-lbl{font-size:.6rem;letter-spacing:.02em}
  .bn-item.active{color:var(--acc)}
  .bn-menu{color:var(--txt)}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:250px;transform:translateX(-100%);transition:transform .22s ease;z-index:60;box-shadow:0 0 40px rgba(0,0,0,.55)}
  body.nav-open .sidebar{transform:none}
  body.nav-open .nav-ovl{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
  .main{width:100%;min-width:0}
  .view{padding:.9rem}
  .topbar{padding:.65rem .8rem;gap:.55rem}
  .page-title{font-size:1.05rem}
  .user span{display:none}
  .panel{padding:.9rem;border-radius:11px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem}
  .kpi-v{font-size:1.25rem}
  .resumen-grid{grid-template-columns:1fr}
  .bubbles{grid-template-columns:1fr}
  .controls{gap:.5rem}
  .controls label,.controls input,.controls select{font-size:.85rem}
  .ms-btn{min-width:150px}
  .ac{min-width:180px}
  .login-card{width:92vw;max-width:360px}
  table{font-size:.82rem}
  th,td{padding:.4rem .5rem}
  .estado-bar{padding:.45rem .8rem;font-size:.76rem}
  .ms-menu,.ac-menu{max-width:calc(100vw - 36px)}
  .prod-thumb{width:34px;height:34px}
  h2{font-size:.98rem}
  .user-chip{display:inline-block}
  .mc-var{font-size:.66rem;white-space:nowrap;gap:.35rem}
  /* Asistente IA: el panel entra justo en pantalla; log flexible, input+botones a la vista (sin scrollear) */
  .panel.chat{display:flex;flex-direction:column;height:calc(100svh - 190px);margin-bottom:0}
  .panel.chat>.muted{display:none}            /* descripción larga: la ocultamos para ganar alto */
  .panel.chat .chat-log{flex:1;min-height:120px;max-height:none;margin:.4rem 0 .6rem}
  .panel.chat .chat-in{flex-wrap:wrap;gap:.5rem}
  .panel.chat .chat-in input{flex:1 1 100%;min-height:44px}
  .panel.chat .chat-in button{flex:1 1 0;min-height:44px}

  /* TOPBAR: ☰(44x44) | Título | spacer | 🌙 — "Cerrar sesión" se va al sidebar */
  .menu-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .topbar #btn-logout{display:none}
  /* ESTADO BAR en una línea (texto completo en title) */
  /* el chip largo "Actualizado HOY …" debe envolver, no desbordar la página */
  .estado-bar.estado-chips{max-width:100%;overflow:hidden}
  .est-chip{white-space:normal;word-break:break-word;line-height:1.25;max-width:100%}
  /* sidebar: usuario + cerrar sesión al pie */
  .sidebar-user{display:flex;flex-direction:column;gap:.5rem;margin-top:auto;padding:.85rem .4rem .2rem;border-top:1px solid var(--line)}
  .sidebar-user .su-name{font-size:.78rem;color:var(--muted)}
  .sidebar-user button{width:100%;min-height:44px}
  .side-foot{margin-top:.4rem}

  /* TABLAS: barra de scroll visible */
  .table-wrap::-webkit-scrollbar{height:6px}
  .table-wrap::-webkit-scrollbar-track{background:var(--panel2);border-radius:3px}
  .table-wrap::-webkit-scrollbar-thumb{background:var(--acc);border-radius:3px}
  .table-wrap{scrollbar-width:thin;scrollbar-color:var(--acc) var(--panel2)}
}
/* ^ FIN del media mobile (antes quedaba abierto y los estilos de escritorio de la
   matriz caían adentro: en pantallas grandes la matriz desbordaba la página) */

/* ===== MATRIZ DE CATEGORÍAS (estilo Power BI) ===== */
.matrix-cat .cat-layout{display:flex;gap:1rem;align-items:flex-start}
.cat-side{flex:0 0 212px;display:flex;flex-direction:column;gap:.65rem;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:.85rem .8rem;position:sticky;top:calc(var(--topbar-h) + 8px)}
.cat-side-t{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:.1rem}
/* cada filtro: etiqueta arriba, control 100% ancho */
.cat-side .cat-f{margin:0;min-width:0;width:100%;display:flex;flex-direction:column;gap:.28rem;font-size:.74rem;color:var(--muted)}
.cat-side .cat-f>input,.cat-side .cat-f>select,.cat-side .cat-f>.ms,.cat-side .cat-f .ms-btn{width:100%;box-sizing:border-box}
/* Fecha: Desde/Hasta apilados, no de costado (no entran en 212px) */
.cat-side .cat-f>.controls{margin:0;gap:.4rem;flex-direction:column;align-items:stretch}
.cat-side .cat-f>.controls>label{min-width:0;width:100%}
.cat-side .cat-f>.controls input{width:100%}
.cat-side>button{margin-top:.1rem;width:100%}
.cat-main{flex:1;min-width:0;max-width:100%}
/* el scroll horizontal queda CONTENIDO en la tabla, no empuja la página */
.matrix-cat,.matrix-cat .cat-layout,.cat-matrix-host,.matrix-cat .table-scroll{min-width:0;max-width:100%}
.matrix-cat .table-wrap{overflow-x:auto;max-width:100%}
.cat-topbar{display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:.7rem;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem}
.cat-topbar .cat-f{margin:0;font-size:.74rem;color:var(--muted);display:flex;flex-direction:column;gap:.28rem}
.cat-topbar .cat-f>input,.cat-topbar .cat-f>select{min-width:160px}
.cat-topbar>button{margin-left:auto}
.cat-matrix-host{min-height:80px}
.csv-btn{margin-bottom:.6rem}

table.matrix{font-size:.84rem}
table.matrix th{font-size:.66rem;white-space:nowrap}
table.matrix th.act{color:var(--txt)}
/* primera columna (categoría/subcat) fija al hacer scroll horizontal · CENTRADA (nombres + encabezado) */
table.matrix td.cat-name{position:sticky;left:0;z-index:1;text-align:center;white-space:nowrap;max-width:none;background:var(--panel);box-shadow:1px 0 0 var(--line)}
table.matrix th:first-child{position:sticky;left:0;top:0;z-index:3;text-align:center;white-space:nowrap;max-width:none;background:var(--panel);box-shadow:1px 0 0 var(--line)}
table.matrix tbody tr:nth-child(even) td.cat-name{background:var(--panel)}
table.matrix td.cat-name.sub{padding-left:1.9rem;color:var(--muted)}
table.matrix td.cat-name .nm{font-weight:600}
table.matrix td.cat-name.sub .nm{font-weight:500}
.caret{display:inline-block;width:1.2rem;height:1.2rem;line-height:1.2rem;text-align:center;cursor:pointer;color:var(--acc);transition:transform .15s ease;user-select:none;font-size:.8rem}
.caret.open{transform:rotate(90deg)}
tr.cat-row>td{border-bottom:1px solid var(--line)}
tr.sub-row{background:rgba(255,255,255,.02)}
tr.sub-row:hover{background:rgba(79,142,247,.08)}
tr.sub-row:hover td.cat-name{background:#16203a}
body.light tr.sub-row:hover td.cat-name{background:#eaf0fb}
tr.tot-row td{font-weight:800;border-top:2px solid var(--line);border-bottom:none;background:rgba(79,142,247,.06)}
tr.tot-row td.cat-name{background:#101a30}
body.light tr.tot-row td.cat-name{background:#eef3fc}
tr.tot-row td.cat-name .nm{font-weight:800}
.pesocell{position:relative;display:flex;justify-content:flex-end;align-items:center;gap:.4rem;padding-right:.1rem}
.pesocell span{position:absolute;left:0;right:auto;height:.32rem;bottom:-.1rem;width:var(--w,0%);max-width:100%;background:linear-gradient(90deg,rgba(var(--acc-rgb),.35),rgba(var(--acc-rgb),.7));border-radius:3px}

/* ---- MOBILE matriz ---- */
@media(max-width:860px){
  .matrix-cat .cat-layout{flex-direction:column;gap:.7rem}
  .cat-side{flex:1 1 auto;width:100%;position:static;max-height:none;overflow:visible;flex-direction:row;flex-wrap:wrap;gap:.6rem .7rem}
  .cat-side-t{flex:1 1 100%;margin:0}
  .cat-side .cat-f{flex:1 1 150px;width:auto}
  .cat-side .cat-f>.controls{flex-direction:row}            /* Desde/Hasta vuelven de costado, hay ancho */
  .cat-side .cat-f>.controls>label{flex:1 1 0}
  .cat-side>button{width:auto;flex:0 0 auto;align-self:flex-end}
  .cat-topbar{gap:.5rem .7rem}
  .cat-topbar .cat-f{flex:1 1 150px}
  .cat-topbar .cat-f>input,.cat-topbar .cat-f>select{min-width:0;width:100%}
  .cat-topbar>button{margin-left:0;flex:1 1 100%}
  table.matrix{font-size:.8rem}
  table.matrix th,table.matrix td{padding:.42rem .5rem}
  table.matrix td.cat-name.sub{padding-left:1.4rem}
  /* columna fija acotada: el nombre puede envolver y no acapara el ancho */
  table.matrix td.cat-name,table.matrix th:first-child{max-width:44vw;white-space:normal;word-break:break-word}
}
@media(max-width:560px){
  .cat-side .cat-f{flex:1 1 100%}
  .cat-side>button{width:100%}
}
@media(max-width:860px){
  th,td{font-size:max(.78rem,11px)}
  .mc-var{font-size:max(.66rem,10px)}
  /* columnas ocultables en mobile (ej. Comparar) */
  .hide-m{display:none}

  /* FILTROS: botón de acción a fila completa y táctil */
  .controls>label:has(>button){width:100%;margin-left:0;margin-top:.2rem}
  .controls>label:has(>button) button{width:100%;min-height:44px}
  /* presets (Comparar) como chips con scroll horizontal */
  .preset-btns{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:none}
  .preset-btns::-webkit-scrollbar{display:none}
  .preset-btns button{white-space:nowrap;flex-shrink:0}

  /* banner "mes en curso" compacto */
  .mes-parcial-full{display:none}.mes-parcial-short{display:inline}
  /* donas: leyenda abajo para que entren los % */
  .dona-leg{font-size:.8rem}
}
.mes-parcial-short{display:none}

/* --- 2FA: ventana modal (verificación en 2 pasos) --- */
.twofa-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(6,12,24,.66);backdrop-filter:blur(3px)}
/* overflow-x hidden + wrap forzado: la clave manual y el enlace de vinculación son textos
   largos sin espacios y hacían scrollear el modal para el costado (fix 2026-07-14) */
.twofa-box{position:relative;width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 20px;text-align:center;max-height:92vh;overflow-y:auto;overflow-x:hidden}
.twofa-box *{max-width:100%;overflow-wrap:anywhere;box-sizing:border-box}
.twofa-x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;line-height:1;padding:4px}
.twofa-head{font-size:17px;font-weight:800;color:var(--txt);margin:2px 0 14px}
.twofa-step{font-size:13px;color:var(--txt);line-height:1.5;text-align:left;margin:12px 0 6px;display:flex;align-items:flex-start;gap:8px}
.twofa-num{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--acc);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.twofa-stores{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:4px 0 4px}
.twofa-stores a{flex:1;min-width:130px;text-decoration:none;font-size:12.5px;font-weight:600;color:var(--acc);border:1px solid var(--line);border-radius:9px;padding:8px 6px;background:var(--panel2)}
.twofa-ask{font-size:13.5px;color:var(--txt);line-height:1.5;margin:4px 0 10px}
.twofa-link{display:block;text-decoration:none;font-size:14px;font-weight:700;color:#fff;background:var(--acc);border-radius:10px;padding:11px 10px;margin:8px 0}
.twofa-or{font-size:11.5px;color:var(--muted);margin:8px 0 4px;line-height:1.4}
.twofa-qr{display:block;width:170px;height:170px;margin:4px auto;background:#fff;border-radius:8px;padding:6px}
.twofa-manual{font-size:11.5px;color:var(--muted);margin:8px 0 2px;line-height:1.5}
.twofa-manual code{display:block;margin-top:4px;font-size:12px;letter-spacing:.06em;color:var(--txt);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px 8px;word-break:break-all;white-space:normal}
#codigo{width:100%;letter-spacing:.4em;text-align:center;font-size:22px;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);margin-top:6px}
.remember{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin:12px 2px;cursor:pointer;text-align:left}
.remember input{width:16px;height:16px;accent-color:var(--acc);flex:0 0 auto}
.twofa-confirm{width:100%;padding:12px;border:0;border-radius:10px;background:var(--acc);color:#fff;font-size:15px;font-weight:700;cursor:pointer;margin-top:4px}
.twofa-confirm:disabled{opacity:.6;cursor:default}

/* sugerencias de producto (Caso movimientos) */
.sug-wrap{position:relative;display:inline-block}
.sug-box{position:absolute;top:calc(100% + 4px);left:0;z-index:60;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);max-height:280px;overflow:auto;min-width:320px;max-width:480px}
.sug-it{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);color:var(--txt);padding:.45rem .6rem;cursor:pointer;font:inherit}
.sug-it:last-child{border-bottom:0}
.sug-it:hover{background:var(--panel2)}

/* Sub-pestañas de secciones (drill-down, ej módulo Contable BTB) */
.subtab-nav{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .8rem;border-bottom:1px solid var(--border,#2a2f3a);padding-bottom:.5rem}
.subtab-btn{background:transparent;border:1px solid var(--border,#2a2f3a);color:inherit;padding:.35rem .8rem;border-radius:999px;cursor:pointer;font-size:.85rem;opacity:.75}
.subtab-btn:hover{opacity:1}
.subtab-btn.active{background:var(--accent,#2e7d46);border-color:var(--accent,#2e7d46);color:#fff;opacity:1;font-weight:600}

/* Impresión en la misma página (mobile-friendly): imprime solo #print-area */
#print-area{display:none}
@media print{
  body.printing > *:not(#print-area){display:none !important}
  #print-area{display:block !important}
  #print-area .rec{max-width:none}
}

/* -- Cinta del dolar (solo ADMIN, 2026-08-03) - estilo ticker El Cronista, fuente DolarAPI -- */
#ticker-dolar{display:flex;align-items:center;gap:.5rem;height:26px;overflow:hidden;
  background:var(--panel2);border-bottom:1px solid var(--line);padding:0 .6rem;font-size:12.5px}
#ticker-dolar .tkd-tag{color:var(--acc);font-weight:800;letter-spacing:.5px;white-space:nowrap;font-size:11px}
#ticker-dolar .tkd-pista{flex:1;overflow:hidden;white-space:nowrap;color:var(--txt)}
#ticker-dolar .tkd-tramo{display:inline-block;padding-right:3rem}
#ticker-dolar .tkd-pista.tkd-anda .tkd-tramo{animation:tkd-correr 40s linear infinite}
#ticker-dolar:hover .tkd-tramo{animation-play-state:paused}
#ticker-dolar b{color:var(--muted);font-weight:700;font-size:11px}
#ticker-dolar .tkd-sep{margin:0 .8rem;color:var(--line)}
#ticker-dolar .tkd-sube{color:var(--ok);font-weight:700}
#ticker-dolar .tkd-baja{color:var(--bad);font-weight:700}
#ticker-dolar .tkd-igual{color:var(--muted)}
#ticker-dolar .tkd-fuente{margin-left:2rem;color:var(--muted);font-size:10.5px}
@keyframes tkd-correr{from{transform:translateX(0)}to{transform:translateX(-100%)}}