:root{
  --bg:#eef0f3; --panel:#ffffff; --panel-2:#f7f8fa; --line:#dfe3e8; --line-2:#c9cfd7;
  --ink:#141a22; --ink-2:#4a5562; --ink-3:#7b8794;
  --side:#11161d; --side-2:#1a212b; --side-ink:#c5ccd6; --side-ink-2:#7f8a98;
  --accent:#f59e0b; --accent-ink:#1b1300;
  --in:#15803d; --in-bg:#dcfce7; --out:#c2261d; --out-bg:#fee2e2; --blue:#1d4ed8; --blue-bg:#dbeafe;
  --st-none:#c2261d; --st-none-bg:#fde4e2;
  --st-low:#c2570c; --st-low-bg:#ffedd5;
  --st-prod:#a16207; --st-prod-bg:#fef3c7;
  --st-ok:#15803d; --st-ok-bg:#dcfce7;
  --radius:8px; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue)}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.muted{color:var(--ink-3)}
.hidden{display:none!important}

/* Layout */
.layout{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.side{background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;border-bottom:1px solid #232b36}
.brand-mark{width:30px;height:30px;border-radius:6px;background:#0b0f14;display:grid;place-items:center;border:1px solid #2a3340}
.brand b{display:block;color:#fff;font-size:14px;letter-spacing:.02em}
.brand small{color:var(--side-ink-2);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.nav{padding:10px 8px;display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;color:var(--side-ink);text-decoration:none;font-weight:500}
.nav a:hover{background:var(--side-2);color:#fff}
.nav a.active{background:var(--side-2);color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.nav .sep{margin:12px 12px 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--side-ink-2)}
.nav .count{margin-left:auto;font:600 11px var(--mono);background:#3b1d1a;color:#fca5a5;padding:1px 7px;border-radius:10px}
.nav svg{width:17px;height:17px;flex:none;opacity:.85}
.side-foot{padding:12px 14px;border-top:1px solid #232b36;font-size:12px}
.side-foot .who{color:#fff;font-weight:600}
.side-foot .role{color:var(--accent);font:600 10.5px var(--mono);letter-spacing:.06em}
.side-foot button{margin-top:8px;background:none;border:1px solid #2f3a47;color:var(--side-ink);padding:5px 10px;border-radius:5px;cursor:pointer;width:100%}
.side-foot button:hover{border-color:var(--side-ink-2)}
.live{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--side-ink-2);margin-top:6px}
.live i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.live.off i{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.2)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:rgba(238,240,243,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:12px 24px;display:flex;gap:12px;align-items:center}
.topbar h1{font-size:18px;margin:0;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.search{position:relative;flex:1;max-width:520px;margin-left:auto}
.search input{width:100%;padding:9px 12px 9px 36px;border:1px solid var(--line-2);border-radius:7px;background:#fff}
.search input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3);z-index:1;pointer-events:none}
.search kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%)}
kbd{font:500 10.5px var(--mono);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--ink-3);background:#fff}
.content{padding:20px 24px 48px;display:flex;flex-direction:column;gap:18px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:7px;border:1px solid var(--line-2);background:#fff;cursor:pointer;font-weight:600;white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sm{padding:4px 9px;font-size:12.5px;border-radius:5px}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.in{background:var(--in);border-color:var(--in);color:#fff}
.btn.out{background:var(--out);border-color:var(--out);color:#fff}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:#e5e8ec}
.btn.danger{color:var(--out);border-color:#f3b4af}
.big-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.big{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:10px;border:0;cursor:pointer;color:#fff;text-align:left;box-shadow:var(--shadow);transition:transform .08s}
.big:active{transform:translateY(1px)}
.big .sym{font:700 30px/1 var(--mono);width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.16)}
.big b{display:block;font-size:17px;letter-spacing:.03em}
.big small{opacity:.85;font-size:12px}
.big kbd{margin-left:auto;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#fff}
.big.in{background:linear-gradient(135deg,#16803c,#12672f)}
.big.out{background:linear-gradient(135deg,#c8281e,#a11f17)}
.big.blue{background:linear-gradient(135deg,#1f52d6,#183fae)}

/* Tarjetas KPI */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden;cursor:default}
.kpi[data-go]{cursor:pointer}
.kpi[data-go]:hover{border-color:var(--line-2)}
.kpi .lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:600}
.kpi .val{font:600 28px/1.15 var(--mono);margin-top:6px;letter-spacing:-.02em}
.kpi .sub{font-size:12px;color:var(--ink-3);margin-top:2px}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-2)}
.kpi.none::before{background:var(--st-none)} .kpi.none .val{color:var(--st-none)}
.kpi.low::before{background:var(--st-low)} .kpi.low .val{color:var(--st-low)}
.kpi.prod::before{background:var(--st-prod)}
.kpi.ok::before{background:var(--st-ok)}

/* Paneles */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.panel-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-h h2{font-size:14.5px;margin:0;font-weight:700}
.panel-h .sp{flex:1}
.panel-b{padding:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* Filtros */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line-2);background:#fff;border-radius:20px;padding:4px 11px;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.chip .n{font:600 11px var(--mono);color:var(--ink-3)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.on .n{color:#cbd5e1}
.chip .dot{width:8px;height:8px;border-radius:50%}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.filters label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.input,.filters input,.filters select{padding:7px 10px;border:1px solid var(--line-2);border-radius:6px;background:#fff;min-width:0}
.input:focus,.filters input:focus,.filters select:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}

/* Tablas */
.tbl-wrap{overflow:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{position:sticky;top:0;background:var(--panel-2);text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);font-weight:700;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
.tbl th.sortable{cursor:pointer}
.tbl th.sortable:hover{color:var(--ink)}
.tbl th .arr{font-size:9px;margin-left:3px;color:var(--accent)}
.tbl th.num{text-align:right}
.tbl td{padding:8px 12px;border-bottom:1px solid #edf0f3;vertical-align:middle}
.tbl tbody tr:hover{background:#fafbfc}
.tbl tr.click{cursor:pointer}
.tbl td.code{font:600 13px var(--mono);white-space:nowrap}
.tbl td.zero{color:#b6bec8}
.tbl td.hl{font-weight:700}
.tbl tr.voided td{text-decoration:line-through;color:var(--ink-3)}
.tbl .empty{padding:36px;text-align:center;color:var(--ink-3)}
.pager{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.pager .sp{flex:1}
.pager select{padding:3px 6px;border:1px solid var(--line-2);border-radius:5px;background:#fff}

/* Estados */
.badge{display:inline-flex;align-items:center;gap:6px;font:700 10.5px var(--sans);letter-spacing:.05em;padding:3px 8px;border-radius:4px;white-space:nowrap;text-transform:uppercase}
.badge::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.none{color:var(--st-none);background:var(--st-none-bg)}
.badge.low{color:var(--st-low);background:var(--st-low-bg)}
.badge.prod{color:var(--st-prod);background:var(--st-prod-bg)}
.badge.ok{color:var(--st-ok);background:var(--st-ok-bg)}
.badge.plain::before{display:none}
.badge.t-INGRESO,.badge.t-PRODUCCIÓN{color:var(--in);background:var(--in-bg)}
.badge.t-EGRESO{color:var(--out);background:var(--out-bg)}
.badge.t-AJUSTE{color:#6d28d9;background:#ede9fe}
.badge.t-PEDIDO{color:var(--blue);background:var(--blue-bg)}
.badge.o-PENDIENTE{color:#a16207;background:#fef3c7}
.badge.o-EN-PRODUCCIÓN{color:var(--blue);background:var(--blue-bg)}
.badge.o-LISTO{color:#0e7490;background:#cffafe}
.badge.o-ENTREGADO{color:var(--in);background:var(--in-bg)}
.badge.o-CANCELADO{color:var(--ink-3);background:#eef0f3}
.delta-pos{color:var(--in);font-weight:700}
.delta-neg{color:var(--out);font-weight:700}
select.status-sel{border:1px solid var(--line-2);border-radius:5px;padding:3px 6px;font-size:12px;font-weight:600;background:#fff}

/* Alertas */
.alert-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
.alert-col .panel-h{border-top:3px solid}
.alert-col.none .panel-h{border-top-color:var(--st-none)}
.alert-col.low .panel-h{border-top-color:var(--st-low)}
.alert-col.prod .panel-h{border-top-color:var(--st-prod)}
.alert-col.ok .panel-h{border-top-color:var(--st-ok)}
.alert-list{max-height:62vh;overflow:auto}
.alert-item{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;padding:9px 14px;border-bottom:1px solid #eef0f3;cursor:pointer;align-items:center}
.alert-item:hover{background:#fafbfc}
.alert-item .c{font:600 13px var(--mono)}
.alert-item .d{grid-column:1/3;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alert-item .q{grid-row:1/3;grid-column:3;text-align:right;font:600 13px var(--mono)}
.alert-item .q small{display:block;font:400 11px var(--sans);color:var(--ink-3)}
.mini-alerts{display:flex;flex-direction:column}

/* Modal */
.modal-back{position:fixed;inset:0;background:rgba(10,14,20,.45);display:grid;place-items:start center;padding:6vh 16px;z-index:100;overflow:auto;animation:fade .12s}
.modal{background:#fff;border-radius:12px;width:min(560px,100%);box-shadow:0 20px 50px rgba(0,0,0,.25);overflow:hidden}
.modal.wide{width:min(960px,100%)}
.modal-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-h h3{margin:0;font-size:16px}
.modal-h .x{margin-left:auto}
.modal-h.in{background:var(--in);color:#fff;border:0}
.modal-h.out{background:var(--out);color:#fff;border:0}
.modal-h.blue{background:var(--blue);color:#fff;border:0}
.modal-h.in .x,.modal-h.out .x,.modal-h.blue .x{color:#fff}
.modal-b{padding:18px}
.modal-f{display:flex;gap:10px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line);background:var(--panel-2)}
@keyframes fade{from{opacity:0}to{opacity:1}}

.form{display:grid;gap:12px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:4px}
.field>span{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
.field input,.field select,.field textarea{padding:9px 11px;border:1px solid var(--line-2);border-radius:7px;background:#fff;width:100%}
.field input.big-in{font:600 22px var(--mono);padding:10px 12px;letter-spacing:.02em}
.field textarea{min-height:64px;resize:vertical}
.field .hint{font-size:12px;color:var(--ink-3)}
.err{background:var(--out-bg);color:var(--out);border:1px solid #f5b5b0;padding:9px 12px;border-radius:7px;font-weight:600}
.okbox{background:var(--in-bg);color:#14532d;border:1px solid #9be3b4;padding:12px 14px;border-radius:8px}
.okbox b{display:block;font-size:15px;margin-bottom:6px}
.okbox .g{display:grid;grid-template-columns:auto auto;gap:2px 16px;font-size:13px;width:max-content}
.okbox .g span:nth-child(odd){color:#2f6b44}
.okbox .g span:nth-child(even){font:600 13px var(--mono)}

/* Autocompletar de código */
.ac{position:relative}
.ac-list{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid var(--line-2);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.15);max-height:320px;overflow:auto;z-index:150}
.ac-item{display:grid;grid-template-columns:96px 1fr auto;gap:10px;padding:8px 12px;cursor:pointer;align-items:center;border-bottom:1px solid #f0f2f4}
.ac-item:last-child{border-bottom:0}
.ac-item.sel,.ac-item:hover{background:#fff7e6}
.ac-item .c{font:600 13px var(--mono)}
.ac-item .d{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-item .s{font:500 12px var(--mono);color:var(--ink-3)}
.ac-empty{padding:12px;color:var(--ink-3);font-size:13px}
.prodcard{display:grid;grid-template-columns:1fr auto;gap:4px 16px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.prodcard .c{font:700 18px var(--mono)}
.prodcard .d{color:var(--ink-2);font-weight:500}
.prodcard .stock{grid-row:1/3;grid-column:2;text-align:right}
.prodcard .stock b{display:block;font:700 30px/1 var(--mono)}
.prodcard .stock small{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.prodcard .meta{grid-column:1/3;display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-3);border-top:1px dashed var(--line-2);padding-top:6px;margin-top:4px}
.prodcard .meta b{color:var(--ink);font-family:var(--mono)}
.calc{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:2px}
.calc div{background:#fff;border:1px solid var(--line);border-radius:7px;padding:8px 10px}
.calc small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700}
.calc b{font:700 20px var(--mono)}

/* Drawer de producto */
.drawer-back{position:fixed;inset:0;background:rgba(10,14,20,.35);z-index:90;animation:fade .12s}
.drawer{position:fixed;right:0;top:0;bottom:0;width:min(560px,100%);background:#fff;z-index:91;box-shadow:-10px 0 40px rgba(0,0,0,.2);display:flex;flex-direction:column;animation:slide .16s ease-out}
@keyframes slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.drawer-h{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:start}
.drawer-h .c{font:700 22px var(--mono)}
.drawer-b{padding:16px 18px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:16px}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kv div{border:1px solid var(--line);border-radius:7px;padding:8px 10px}
.kv small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700}
.kv b{font:700 19px var(--mono)}
.sec-t{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:700;margin:0 0 6px}

/* Toasts */
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:200}
.toast{background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;box-shadow:0 10px 25px rgba(0,0,0,.25);font-weight:500;max-width:380px;animation:fade .15s}
.toast.err{background:var(--out)}
.toast.ok{background:var(--in)}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;background:var(--side);padding:16px}
.login-card{background:#fff;border-radius:12px;padding:28px;width:min(380px,100%);box-shadow:0 30px 60px rgba(0,0,0,.4)}
.login-card h1{margin:12px 0 4px;font-size:20px}
.login-card p{margin:0 0 18px;color:var(--ink-3)}

/* Global search dropdown */
.gs-list{position:absolute;left:0;right:0;top:100%;margin-top:6px}

.note{background:#fffbeb;border:1px solid #fde68a;color:#78350f;padding:10px 14px;border-radius:8px;font-size:13px}
.note b{color:#5c2a06}
.steps{display:flex;flex-direction:column;gap:10px}
.import-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.import-stat div{border:1px solid var(--line);border-radius:8px;padding:12px}
.import-stat b{display:block;font:700 26px var(--mono)}
.import-stat small{color:var(--ink-3)}
.drop{border:2px dashed var(--line-2);border-radius:10px;padding:34px;text-align:center;background:var(--panel-2);cursor:pointer}
.drop:hover,.drop.over{border-color:var(--accent);background:#fffbeb}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer}
.switch input{width:18px;height:18px}

@media (max-width:1280px){.kpis{grid-template-columns:repeat(3,1fr)}.alert-cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .side{position:static;height:auto}
  .nav{flex-direction:row;overflow-x:auto;padding:6px}
  .nav .sep,.side-foot{display:none}
  .big-actions,.grid2,.import-stat{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .topbar{flex-wrap:wrap;padding:10px 16px}
  .content{padding:16px}
  .alert-cols{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
}
@media print{.side,.topbar,.btn{display:none!important}.layout{display:block}}

/* Licencia */
.licbar{margin:12px 24px 0;padding:9px 14px;border-radius:8px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;font-size:13px}
.licbar a{color:inherit;font-weight:600}
.licbar.warn{background:#fff7ed;border-color:#fed7aa;color:#7c2d12}
.licbar.off{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}
body.readonly .big{filter:grayscale(.8);opacity:.55}
@media (max-width:900px){.licbar{margin:10px 16px 0}}
.field>span.hint{text-transform:none;font-weight:400;letter-spacing:0;font-size:12px;color:var(--ink-3)}

/* Pedido con varias líneas */
.oplines{display:flex;flex-direction:column;gap:6px}
.opline{display:grid;grid-template-columns:150px 100px 1fr auto;gap:8px;align-items:center}
.opline .input{width:100%;padding:8px 10px;font-size:15px}
.opinfo{font-size:12.5px;line-height:1.3;min-width:0}
@media (max-width:700px){.opline{grid-template-columns:1fr 90px auto}.opinfo{grid-column:1/-1}}