:root{
  --bg:#f6f5f1; --surface:#fff; --surface-2:#efece5; --surface-3:#e7e3da;
  --ink:#1d2023; --ink-soft:#54585d; --ink-faint:#8a8e93;
  --line:#e2ddd2; --line-strong:#cfc9bc;
  --crg:#0f766e; --crg-bg:#dcece9; --crg-line:#a9d3cd;
  --gar:#b45309; --gar-bg:#f6e7d2; --gar-line:#e6c79a;
  --good:#15794f; --good-bg:#dcefe4; --warn:#b06a00; --warn-bg:#f6ead1; --bad:#b42318; --bad-bg:#f6ded9;
  --shadow:0 1px 2px rgba(25,25,20,.05), 0 6px 18px -8px rgba(25,25,20,.12);
  --serif:"IBM Plex Serif",Georgia,serif; --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#15171a; --surface:#1e2125; --surface-2:#262a2f; --surface-3:#2f343a;
  --ink:#ecebe5; --ink-soft:#a9adb3; --ink-faint:#72767c; --line:#31363c; --line-strong:#3f454c;
  --crg:#3fd0be; --crg-bg:#0f302d; --crg-line:#1c4b46; --gar:#e79a45; --gar-bg:#3a2913; --gar-line:#553d1e;
  --good:#4cc98c; --good-bg:#123024; --warn:#e0a340; --warn-bg:#33280f; --bad:#f2857b; --bad-bg:#3a1c19;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 22px -10px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --bg:#15171a; --surface:#1e2125; --surface-2:#262a2f; --surface-3:#2f343a;
  --ink:#ecebe5; --ink-soft:#a9adb3; --ink-faint:#72767c; --line:#31363c; --line-strong:#3f454c;
  --crg:#3fd0be; --crg-bg:#0f302d; --crg-line:#1c4b46; --gar:#e79a45; --gar-bg:#3a2913; --gar-line:#553d1e;
  --good:#4cc98c; --good-bg:#123024; --warn:#e0a340; --warn-bg:#33280f; --bad:#f2857b; --bad-bg:#3a1c19;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 22px -10px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased;}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.btn{font-family:var(--sans); font-size:14px; font-weight:600; border-radius:9px; padding:9px 16px; border:1px solid transparent; cursor:pointer; transition:.12s;}
.btn-primary{background:var(--crg); color:#fff;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-primary:disabled{opacity:.55; cursor:default;}
.btn-ghost{background:var(--surface); color:var(--ink-soft); border-color:var(--line);}
.btn-ghost:hover{background:var(--surface-2); color:var(--ink);}
.brand{font-family:var(--serif); font-weight:600; font-size:19px; display:flex; align-items:center; gap:9px;}
.brand-mark{color:var(--crg); font-size:22px;}

/* ---------- LOGIN ---------- */
.login{min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px;}
.login-card{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:32px 30px; width:100%; max-width:380px;}
.login .brand{font-size:22px; margin-bottom:4px;}
.login-sub{color:var(--ink-soft); font-size:14px; margin:0 0 22px;}
.login-form{display:flex; flex-direction:column; gap:9px;}
.login-form label{font-size:12px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint);}
.login-form input{font-family:var(--sans); font-size:16px; padding:11px 13px; border:1px solid var(--line-strong); border-radius:10px; background:var(--bg); color:var(--ink); width:100%;}
.login-form input:focus{outline:2px solid var(--crg); outline-offset:1px; border-color:transparent;}
.login-form .btn{margin-top:6px;}
.code-input{font-family:var(--mono); font-size:26px; letter-spacing:12px; text-align:center;}
.login-hint{font-size:13px; color:var(--ink-soft); margin:4px 0 0;}
.login-hint a{color:var(--crg); text-decoration:none;}
.login-msg{margin:14px 0 0; font-size:13.5px; padding:9px 12px; border-radius:9px; background:var(--bad-bg); color:var(--bad);}
.login-msg.ok{background:var(--good-bg); color:var(--good);}
.login-foot{font-size:12px; color:var(--ink-faint); text-align:center; max-width:340px;}

/* ---------- TOPBAR ---------- */
.topbar{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--surface) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.topbar-in{max-width:1280px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.topbar-right{display:flex; align-items:center; gap:10px;}
.user-pill{font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); padding:5px 10px; border-radius:999px;}
.wrap{max-width:1280px; margin:0 auto; padding:20px;}

/* ---------- FILTERS ---------- */
.filters{display:flex; flex-wrap:wrap; gap:12px 14px; align-items:flex-end; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:16px 18px;}
.filters .f{display:flex; flex-direction:column; gap:5px;}
.filters label{font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);}
.filters input,.filters select{font-family:var(--sans); font-size:13.5px; padding:7px 9px; border:1px solid var(--line-strong); border-radius:8px; background:var(--bg); color:var(--ink); min-width:120px;}
.filters input:focus,.filters select:focus{outline:2px solid var(--crg); outline-offset:1px; border-color:transparent;}
.f-actions{display:flex; gap:8px; margin-left:auto;}

/* ---------- KPIs ---------- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px;}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:16px 18px; position:relative; overflow:hidden;}
.kpi .k-lbl{font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);}
.kpi .k-val{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; font-size:clamp(22px,3vw,29px); margin-top:6px; letter-spacing:-.01em;}
.kpi .k-sub{font-size:12.5px; color:var(--ink-soft); margin-top:4px;}
.kpi.accent-crg{border-left:3px solid var(--crg);} .kpi.accent-gar{border-left:3px solid var(--gar);}
.k-val.good{color:var(--good);} .k-val.warn{color:var(--warn);} .k-val.bad{color:var(--bad);}
.chip{display:inline-block; font-family:var(--mono); font-size:11px; padding:2px 7px; border-radius:6px; margin-right:6px;}
.chip-crg{color:var(--crg); background:var(--crg-bg);} .chip-gar{color:var(--gar); background:var(--gar-bg);}

/* ---------- TABLE ---------- */
.tablecard{margin-top:16px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden;}
.tbar{display:flex; align-items:baseline; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line);}
.tbar-ttl{font-weight:600; font-size:15px;}
.tbar-meta{font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); margin-left:auto;}
.scroll{overflow-x:auto; cursor:grab;}
.scroll.dragging{cursor:grabbing;}
.scroll.dragging *{cursor:grabbing !important; user-select:none;}
table{border-collapse:collapse; width:100%; font-size:12.5px; min-width:720px;}
thead th{position:sticky; top:0; z-index:2; background:var(--surface-2); font-size:10.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint); text-align:right; padding:9px 11px; border-bottom:1px solid var(--line-strong); white-space:nowrap;}
thead th.txt{text-align:left;}
tbody td{padding:7px 11px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap;}
tbody td.txt{text-align:left; color:var(--ink);}
/* columna de producto congelada a la izquierda */
th.sticky, td.sticky{position:sticky; left:0; z-index:3; max-width:240px; overflow:hidden; text-overflow:ellipsis;}
thead th.sticky{z-index:4; background:var(--surface-2);}
tbody td.sticky{background:var(--surface); box-shadow:1px 0 0 var(--line-strong);}
tbody tr:hover td.sticky{background:color-mix(in srgb,var(--crg-bg) 60%, var(--surface));}
td.sticky .p-sku{font-weight:600; color:var(--ink);}
td.sticky .p-art{color:var(--ink-soft);}
td.sticky .p-none{color:var(--warn); font-style:italic;}
tbody td.calc{cursor:help; text-decoration:underline dotted color-mix(in srgb,var(--ink-faint) 60%, transparent); text-underline-offset:3px;}
tbody td.calc:hover{background:var(--surface-2);}
tbody tr:hover{background:color-mix(in srgb,var(--crg-bg) 30%, transparent);}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.tag{font-family:var(--mono); font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:5px;}
.tag.crg{color:var(--crg); background:var(--crg-bg);} .tag.gar{color:var(--gar); background:var(--gar-bg);}
.tag.fc{color:var(--ink-soft); background:var(--surface-3);}
.tag.nc-t{color:var(--bad); background:var(--bad-bg);}
.tag.nd-t{color:var(--warn); background:var(--warn-bg);}
.roi.good{color:var(--good); font-weight:600;} .roi.warn{color:var(--warn); font-weight:600;} .roi.bad{color:var(--bad); font-weight:600;}
tbody td.zero{color:var(--ink-faint);}
.nc{opacity:.72; font-style:italic;}
.pager{display:flex; align-items:center; justify-content:center; gap:16px; padding:13px; border-top:1px solid var(--line);}
.pager-lbl{font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);}
.hint-hover{font-size:12.5px; color:var(--ink-soft); padding:0 18px 15px; margin:8px 0 0;}

/* ---------- TOOLTIP (colores fijos, legibles en cualquier tema) ---------- */
.tip{position:fixed; z-index:60; max-width:360px; background:#20242a; color:#eef0f2; border:1px solid #3a4048; border-radius:10px; padding:11px 13px; box-shadow:0 12px 34px -8px rgba(0,0,0,.55); font-size:12.5px; line-height:1.6; pointer-events:none;}
.tip .tip-ttl{font-weight:700; margin-bottom:5px; font-family:var(--sans); color:#fff;}
.tip .tip-f{font-family:var(--mono); font-size:11.5px; color:#c3c8ce; white-space:normal;}
.tip .tip-res{margin-top:6px; font-family:var(--mono); font-weight:600; color:#5fe3cd;}
.tip b{color:#fff;}

@media (max-width:900px){ .kpis{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .filters .f{flex:1 1 44%;} .f-actions{margin-left:0; width:100%;} }