/* ============================================================
   Portal de Compras — Grupo Dietrich
   Estilo sobrio: azul corporativo + grises; color solo con sentido
   (ámbar = requiere acción, verde = ok, rojo = problema).
   ============================================================ */
:root{
  --brand:#3D414D; --brand2:#3F5C98; --brand-soft:#EAEEF6; --brand-line:#C6D0E6; --lav:#A8AFC5; --slate2:#686F86;
  --bg:#F4F5F7; --card:#fff; --line:#E1E4EA; --line2:#EEF0F3;
  --txt:#1B2430; --mut:#667085; --mut2:#8A94A6;
  --ok:#2C7552; --ok-b:#E8F2EC; --warn:#946312; --warn-b:#F8F0DD; --err:#B0352D; --err-b:#F8E8E6;
  --idle:#566074; --idle-b:#EDEFF3;
  --r:8px; --sh:0 1px 2px rgba(16,24,40,.05);
  --side-w:232px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px/1.5 "DM Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-weight:400;background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}
h1,h2,.brand b,.kpi .val,.login .aside h1{font-family:"Urbanist","DM Sans","Segoe UI",system-ui,sans-serif}
h1,h2{font-weight:700}
a{color:var(--brand2);text-decoration:none}
em{font-style:normal}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
input,select,textarea{font:inherit;color:inherit}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#C5CBD6;border-radius:9px}::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--brand2);outline-offset:1px}
.hide{display:none!important}
svg.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.side{background:var(--brand);color:#D5D9E4;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;border-bottom:1px solid rgba(255,255,255,.1)}
.brand .wm{height:26px;width:auto;display:block}
.brand .mg{display:none;width:30px;height:30px}
.brand span{display:block;margin-top:4px;font-size:11px;color:#A8AFC5;letter-spacing:.04em}
.modsw{margin:12px 12px 2px;display:flex;flex-direction:column;gap:2px;padding:3px;background:rgba(255,255,255,.07);border-radius:8px}
.modsw button{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;color:#C6CAD8;font-size:12.8px;text-align:left}
.modsw button:hover{background:rgba(255,255,255,.08);color:#fff}
.modsw button.on{background:#fff;color:var(--brand);font-weight:650}
.navgrp{padding:14px 18px 4px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#8F96AE;font-weight:700}
.nav{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:1px 10px;border-radius:7px;font-size:13.3px;color:#CDD1DD;cursor:pointer;border-left:3px solid transparent;width:calc(100% - 20px);text-align:left}
.nav:hover{background:rgba(255,255,255,.07);color:#fff}
.nav.on{background:rgba(255,255,255,.11);color:#fff;font-weight:600;border-left-color:var(--lav)}
.nav .pill{margin-left:auto;background:#fff;color:var(--brand);font-size:10.5px;font-weight:700;padding:0 7px;border-radius:20px;line-height:17px}
.nav .pill.alert{background:#E8C26A;color:#3F2F00}
.sidefoot{margin:auto 12px 0;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.07);font-size:11.5px;color:#B9BDCB;line-height:1.45}
.sidefoot b{color:#fff;font-weight:600}
.main{display:flex;flex-direction:column;min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:10px 24px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.search{flex:1;max-width:400px;position:relative}
.search input{width:100%;padding:8px 12px 8px 33px;border:1px solid var(--line);border-radius:8px;background:#F8F9FB;outline:0}
.search input:focus{border-color:var(--brand2);background:#fff}
.search .ic{position:absolute;left:10px;top:9px;color:var(--mut)}
.top .sp{flex:1}
.iconbtn{position:relative;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--mut);border:1px solid var(--line);background:#fff}
.iconbtn:hover{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft)}
.iconbtn .dot{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:20px;background:var(--err);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.modebadge{font-size:11.5px;font-weight:600;color:var(--warn);background:var(--warn-b);border-radius:20px;padding:3px 10px;white-space:nowrap}
.userbtn{display:flex;align-items:center;gap:9px;padding:3px 10px 3px 3px;border-radius:30px;border:1px solid var(--line);background:#fff}
.userbtn:hover{background:var(--brand-soft)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:none}
.userbtn .nm{font-size:12.8px;font-weight:600;line-height:1.1}.userbtn .rl{font-size:11px;color:var(--mut);line-height:1.1}
.page{padding:22px 26px 60px;flex:1;max-width:1500px;width:100%}
.phead{display:flex;align-items:flex-end;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.phead h1{font-size:21px}.phead p{margin:3px 0 0;color:var(--mut);font-size:13px;max-width:70ch}
.phead .sp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(16,24,40,.16);z-index:60;overflow:hidden}
.menu .mi{display:flex;gap:9px;align-items:center;width:100%;padding:9px 13px;font-size:13px;text-align:left}
.menu .mi:hover{background:var(--brand-soft)}
.menu hr{border:0;border-top:1px solid var(--line2);margin:0}
.ntf{width:360px;max-height:430px;overflow:auto}
.ntf .it{display:block;width:100%;text-align:left;padding:10px 14px;border-bottom:1px solid var(--line2);font-size:12.8px;line-height:1.4}
.ntf .it:hover{background:var(--brand-soft)}.ntf .it.un{background:#F6F8FC}.ntf .it.un:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand2);margin-right:7px}
.ntf .it small{display:block;color:var(--mut);font-size:11.3px}

/* ---------- botones ---------- */
.btn{padding:8px 14px;border-radius:7px;background:var(--brand);color:#fff;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--brand);white-space:nowrap}
.btn:hover{background:var(--brand2);border-color:var(--brand2)}
.btn.gh{background:#fff;color:var(--txt);border-color:var(--line)}.btn.gh:hover{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}
.btn.ok{background:var(--ok);border-color:var(--ok)}.btn.ok:hover{background:#246345;border-color:#246345}
.btn.err{background:#fff;color:var(--err);border-color:#E6C4C0}.btn.err:hover{background:var(--err-b)}
.btn.sm{padding:5px 10px;font-size:12.3px}.btn.lg{padding:11px 20px;font-size:14px}.btn.block{width:100%;justify-content:center}
.btn:disabled,.btn.dis{opacity:.45;cursor:not-allowed;pointer-events:none}
.lnk{color:var(--brand2);font-weight:600;font-size:12.5px}.lnk:hover{text-decoration:underline}

/* ---------- cards / kpis ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card .ch{padding:12px 16px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:10px}
.card .ch h3{font-size:14px}.card .ch .sp{margin-left:auto;font-size:12.3px;color:var(--mut);display:flex;gap:8px;align-items:center}
.card .cb{padding:16px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.g12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.gside{grid-template-columns:minmax(0,1fr) 340px}
.mb{margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;box-shadow:var(--sh);position:relative}
.kpi .lbl{font-size:11.8px;color:var(--mut);font-weight:600}
.kpi .val{font-size:25px;font-weight:700;letter-spacing:-.02em;margin-top:5px;line-height:1.05;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:11.8px;color:var(--mut);margin-top:5px}
.kpi.w .val{color:var(--warn)}.kpi.e .val{color:var(--err)}.kpi.g .val{color:var(--ok)}
.kpi.clk{cursor:pointer}.kpi.clk:hover{border-color:var(--brand-line);background:#FBFCFE}

/* ---------- chips / tags ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;font-size:11.6px;font-weight:600;white-space:nowrap}
.chip:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.chip.big{padding:4px 12px;font-size:12.5px}.chip.nb:before{display:none}
.t-idle{background:var(--idle-b);color:var(--idle)}.t-wait{background:var(--warn-b);color:var(--warn)}.t-prog{background:var(--brand-soft);color:var(--brand2)}
.t-done{background:var(--ok-b);color:var(--ok)}.t-stop{background:var(--err-b);color:var(--err)}
.tag{display:inline-block;padding:1px 8px;border-radius:5px;background:var(--idle-b);color:var(--idle);font-size:11.3px;font-weight:600;white-space:nowrap}
.tag.b{background:var(--brand-soft);color:var(--brand2)}.tag.g{background:var(--ok-b);color:var(--ok)}.tag.w{background:var(--warn-b);color:var(--warn)}.tag.r{background:var(--err-b);color:var(--err)}
.sla{font-size:10.8px;font-weight:700;padding:1px 6px;border-radius:5px}
.sla.ok{background:var(--idle-b);color:var(--idle)}.sla.w{background:var(--warn-b);color:var(--warn)}.sla.e{background:var(--err-b);color:var(--err)}
.sync{display:inline-flex;align-items:center;gap:5px;font-size:11.3px;font-weight:600;color:var(--mut)}
.sync i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}.sync.p i{background:#E0A526;animation:pul 1.4s infinite}.sync.e i{background:var(--err)}
@keyframes pul{50%{opacity:.35}}

/* ---------- tablas ---------- */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:700;padding:9px 12px;border-bottom:1px solid var(--line);background:#FAFBFC;white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--line2);font-size:13px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tr.clk{cursor:pointer}tr.clk:hover{background:#F7F9FC}
.num{text-align:right;font-variant-numeric:tabular-nums}.mono{font-variant-numeric:tabular-nums}
.pid{font-weight:700;color:var(--brand2);font-variant-numeric:tabular-nums;white-space:nowrap}
.tiny{font-size:11.7px;color:var(--mut)}.ell{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.two{display:flex;flex-direction:column;line-height:1.3}.two small{color:var(--mut);font-size:11.5px}
.flex{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.spc{margin-left:auto}
.icb{width:26px;height:26px;border-radius:6px;display:inline-grid;place-items:center;color:var(--mut)}.icb:hover{background:var(--brand-soft);color:var(--brand2)}.icb.del:hover{background:var(--err-b);color:var(--err)}

/* ---------- filtros / tabs ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line2)}
.filters select,.filters input{padding:6px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:12.8px;outline:0}
.filters select:focus,.filters input:focus{border-color:var(--brand2)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 12px;overflow-x:auto}
.tabs button{padding:11px 13px;font-size:13px;color:var(--mut);border-bottom:2px solid transparent;white-space:nowrap;font-weight:550;margin-bottom:-1px}
.tabs button:hover{color:var(--txt)}.tabs button.on{color:var(--brand);border-color:var(--brand);font-weight:650}
.tabs button .n{background:var(--idle-b);border-radius:20px;padding:0 6px;font-size:10.8px;margin-left:5px;color:var(--idle)}
.tabs button.on .n{background:var(--brand-soft);color:var(--brand2)}

/* ---------- kanban ---------- */
.kb{display:flex;gap:10px;overflow-x:auto;padding-bottom:14px;align-items:flex-start}
.col{flex:0 0 262px;background:#E8EAEF;border-radius:10px;padding:8px;max-height:calc(100vh - 210px);display:flex;flex-direction:column}
.col.over{background:#DADEEA;outline:2px dashed var(--brand2)}.col.ro{background:#EFF0F3}
.colh{display:flex;align-items:center;gap:7px;padding:3px 5px 2px;font-size:12.3px;font-weight:700}
.colh .n{margin-left:auto;background:#fff;border-radius:20px;padding:0 8px;font-size:11px;color:var(--mut);font-weight:600}
.colm{padding:0 5px 8px;font-size:11px;color:var(--mut)}
.colbody{overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding:2px}
.tk{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 10px;box-shadow:var(--sh);cursor:grab}
.tk:hover{border-color:var(--brand-line)}.tk.drag{opacity:.4}.tk.ro{cursor:pointer}
.tk .idr{display:flex;align-items:center;gap:6px;font-size:11.3px;color:var(--mut);font-weight:700}
.tk .ttl{font-size:12.8px;font-weight:600;margin:4px 0 6px;line-height:1.35}
.tk .foot{display:flex;align-items:center;gap:6px;margin-top:7px;padding-top:6px;border-top:1px solid var(--line2)}
.tk .amt{margin-left:auto;font-weight:700;font-size:12.2px;font-variant-numeric:tabular-nums}
.ava{width:21px;height:21px;border-radius:50%;background:var(--brand-soft);color:var(--brand2);display:grid;place-items:center;font-size:9.4px;font-weight:800;flex:none}
.ava.b{width:30px;height:30px;font-size:11px}

/* ---------- barras / medidores ---------- */
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:minmax(110px,175px) minmax(0,1fr) 92px;align-items:center;gap:10px;font-size:12.3px}
.bar .tr{height:8px;background:var(--line2);border-radius:6px;overflow:hidden;position:relative}
.bar .fl{height:100%;border-radius:6px;background:var(--brand2)}.bar .fl.c{background:var(--lav)}.bar .fl.o{background:var(--err)}
.bar b{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
.meter{height:8px;background:var(--line2);border-radius:6px;overflow:hidden;display:flex}
.meter i{display:block;height:100%}.meter .u{background:var(--brand2)}.meter .c{background:var(--lav)}.meter.over .u{background:var(--err)}.meter.warn .u{background:#C9922A}
.legend{display:flex;gap:14px;font-size:11.8px;color:var(--mut);flex-wrap:wrap}.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.spark{display:flex;align-items:flex-end;gap:6px;height:130px;padding-top:6px}
.spark div{flex:1;background:var(--lav);border-radius:3px 3px 0 0;position:relative;min-height:3px}.spark div:last-child{background:var(--brand2)}
.spark div span{position:absolute;bottom:-19px;left:-4px;right:-4px;text-align:center;font-size:9.8px;color:var(--mut);white-space:nowrap}
.spark div b{position:absolute;top:-16px;left:-8px;right:-8px;text-align:center;font-size:9.8px;color:var(--mut);font-weight:600}

/* ---------- avance (stepper punteado) ---------- */
.stp{display:flex;align-items:flex-start;padding:6px 0 2px}
.stp .s{flex:1;text-align:center;position:relative;font-size:11px;color:var(--mut);padding-top:26px;line-height:1.25}
.stp .s:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #CFD3DE;z-index:2}
.stp .s:after{content:"";position:absolute;top:8px;left:50%;width:100%;height:2px;background:#E1E5EC;z-index:1}
.stp .s:last-child:after{display:none}
.stp .s.dn{color:#3D4859}.stp .s.dn:before{background:var(--brand2);border-color:var(--brand2);content:"✓";color:#fff;font-size:10px;display:grid;place-items:center;line-height:1}.stp .s.dn:after{background:var(--brand2)}
.stp .s.now{color:var(--brand);font-weight:700}.stp .s.now:before{background:#fff;border-color:var(--brand2);border-width:5px}
.stp .s.ko:before{background:var(--err);border-color:var(--err);content:"✕";color:#fff;font-size:9.5px;display:grid;place-items:center;line-height:1}.stp .s.ko{color:var(--err);font-weight:700}
.stp.mini .s{font-size:0;padding-top:13px}.stp.mini .s:before{width:11px;height:11px;font-size:7px!important;border-width:2px}.stp.mini .s.now:before{border-width:3px}.stp.mini .s:after{top:5px}

/* ruta de autorización (cajas) */
.route{display:flex;flex-wrap:wrap;gap:0}
.rs{flex:1 1 150px;min-width:140px;padding:9px 12px;border:1px solid var(--line);background:#FAFBFC;margin-left:-1px}
.rs:first-child{border-radius:8px 0 0 8px;margin-left:0}.rs:last-child{border-radius:0 8px 8px 0}.rs:only-child{border-radius:8px}
.rs .n{font-size:10.5px;font-weight:700;color:var(--mut);letter-spacing:.06em}.rs .t{font-weight:650;font-size:12.8px;line-height:1.25}.rs .w{font-size:11.6px;color:var(--mut)}
.route.v{flex-direction:column}.route.v .rs{margin-left:0;margin-top:-1px;border-radius:0;flex:none}.route.v .rs:first-child{margin-top:0;border-radius:8px 8px 0 0}.route.v .rs:last-child{border-radius:0 0 8px 8px}
.rs.done{background:var(--ok-b);border-color:#BBD9C8}.rs.done .t,.rs.done .n{color:var(--ok)}
.rs.act{background:var(--warn-b);border-color:#E6D4A4;box-shadow:inset 3px 0 0 #C9922A}.rs.act .t,.rs.act .n{color:var(--warn)}
.rs.bad{background:var(--err-b);border-color:#E6C4C0}.rs.bad .t{color:var(--err)}

/* ---------- tarjeta de pedido (solicitante) ---------- */
.sc{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;cursor:pointer}
.sc:hover{border-color:var(--brand-line);box-shadow:0 4px 14px rgba(31,56,100,.08)}
.sc .h{display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.sc .ttl{font-size:14.5px;font-weight:640;margin-bottom:2px}.sc .mt{font-size:12px;color:var(--mut);margin-bottom:10px}
.sc .last{margin-top:10px;padding:8px 10px;background:#F7F8FA;border-radius:7px;font-size:12.2px;display:flex;gap:8px;align-items:flex-start}
.sc.act{border-left:3px solid #C9922A}

/* ---------- drawer / modal ---------- */
.ovl{position:fixed;inset:0;background:rgba(16,24,40,.4);z-index:80;opacity:0;pointer-events:none;transition:.18s}.ovl.on{opacity:1;pointer-events:auto}
.dw{position:fixed;top:0;right:0;bottom:0;width:min(720px,96vw);background:#fff;z-index:90;transform:translateX(102%);transition:.24s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 36px rgba(16,24,40,.16)}
.dw.on{transform:none}
.dwh{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px}
.dwb{overflow-y:auto;flex:1;padding:16px 20px 36px}
.dwf{padding:11px 20px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;background:#FAFBFC;flex-wrap:wrap}
.mdl{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(16,24,40,.45)}
.mdl .box{background:#fff;border-radius:10px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.mdl .mh{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}.mdl .mh h2{font-size:16px}
.mdl .mb2{padding:18px 20px;overflow:auto;display:grid;gap:14px}
.mdl .mf{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:#FAFBFC;border-radius:0 0 10px 10px}
.kv{display:grid;grid-template-columns:128px 1fr;gap:6px 12px;font-size:13px;margin:0}
.kv dt{color:var(--mut);font-size:12.2px}.kv dd{margin:0;font-weight:530}
.sec{margin-top:20px}.sec>h4{font-size:11.3px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);margin-bottom:9px;display:flex;align-items:center;gap:8px}
.sec>h4 .sp{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500}
.tl{position:relative;padding-left:22px}.tl:before{content:"";position:absolute;left:6px;top:5px;bottom:8px;width:2px;background:var(--line)}
.tl .ev{position:relative;padding-bottom:12px}.tl .ev:before{content:"";position:absolute;left:-21px;top:4px;width:11px;height:11px;border-radius:50%;background:#fff;border:2.5px solid var(--brand2)}
.tl .ev.neg:before{border-color:var(--err)}.tl .ev.fut:before{border-color:#CBD2DE;border-style:dashed}
.tl .ev .t{font-size:13px;font-weight:600}.tl .ev .d{font-size:11.7px;color:var(--mut)}.tl .ev .nt{font-size:12.6px;color:#3D4859;margin-top:2px}
.cmt{background:#F8F9FB;border:1px solid var(--line);border-radius:9px;padding:9px 12px;margin-bottom:7px;font-size:12.8px}
.cmt.me{background:var(--brand-soft);border-color:var(--brand-line)}
.cmt .h{display:flex;gap:8px;align-items:center;margin-bottom:3px;flex-wrap:wrap}.cmt .h b{font-size:12.3px}.cmt .h span{font-size:11.2px;color:var(--mut)}
.cbox{display:flex;gap:8px;margin-top:8px}.cbox input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:8px}
.quo{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.quo .q{border:1.5px solid var(--line);border-radius:10px;padding:12px;position:relative;background:#fff}
.quo .q.win{border-color:var(--ok);background:#F7FBF9}.quo .q.sel{border-color:var(--brand2);box-shadow:0 0 0 2px var(--brand-soft)}.quo .q.off{opacity:.55}
.quo .q .n{font-weight:650;font-size:13px}.quo .q .p{font-size:18px;font-weight:700;margin:5px 0 1px;font-variant-numeric:tabular-nums}
.quo .q .best{position:absolute;top:-9px;right:9px;background:var(--ok);color:#fff;font-size:9.8px;font-weight:700;padding:2px 8px;border-radius:20px}
.quo .q ul{list-style:none;margin:8px 0 0;padding:0;font-size:12.2px;line-height:1.8;color:#3D4859}

/* ---------- formularios ---------- */
.frm{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px}.frm.f3{grid-template-columns:repeat(3,1fr)}
.f{display:flex;flex-direction:column;gap:4px;min-width:0}.f.full{grid-column:1/-1}
.f label{font-size:12.2px;font-weight:600;color:#38414F}.f label i{color:var(--err);font-style:normal}
.f input,.f select,.f textarea{padding:8px 10px;border:1px solid var(--line);border-radius:7px;outline:0;background:#fff;width:100%}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--brand2);box-shadow:0 0 0 3px rgba(63,92,152,.15)}
.f input[disabled],.f select[disabled]{background:#F3F4F6;color:var(--mut)}
.f .hint{font-size:11.5px;color:var(--mut)}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}.chk input{width:auto}
.multi{display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--line);border-radius:7px;padding:7px}
.multi label{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:20px;padding:2px 10px;font-size:12.2px;cursor:pointer;background:#FAFBFC}
.multi label:has(input:checked){background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}
.multi input{width:auto;margin:0}
.note{background:var(--brand-soft);border-left:3px solid var(--brand2);border-radius:6px;padding:10px 13px;font-size:12.8px;color:#2C3A52}
.note.w{background:var(--warn-b);border-color:#C9922A;color:#5C4208}.note.g{background:var(--ok-b);border-color:var(--ok);color:#1F5A3E}.note.e{background:var(--err-b);border-color:var(--err);color:#7E2620}
.note b{font-weight:650}
.drop{border:1.5px dashed #C3CBD9;border-radius:9px;padding:16px;text-align:center;color:var(--mut);font-size:12.6px;background:#FBFCFD;cursor:pointer}
.drop.over{background:var(--brand-soft);border-color:var(--brand2)}
.files{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.file{display:flex;align-items:center;gap:9px;padding:6px 10px;border:1px solid var(--line);border-radius:7px;font-size:12.6px;background:#fff}
.file .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw{position:relative;width:36px;height:20px;background:#C7CDD8;border-radius:20px;flex:none;cursor:pointer}
.sw.on{background:var(--ok)}.sw:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}.sw.on:after{left:18px}
.rowl{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2)}.rowl:last-child{border:0}
.rowl .tx{flex:1;min-width:0}.rowl .tx b{font-size:13px;display:block}.rowl .tx span{font-size:11.9px;color:var(--mut)}
.alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:8px;margin-bottom:7px;font-size:12.6px;background:var(--idle-b)}
.alert.e{background:var(--err-b)}.alert.w{background:var(--warn-b)}.alert.g{background:var(--ok-b)}.alert.i{background:var(--brand-soft)}.alert b{display:block;font-size:12.9px}
.alert .ic{margin-top:2px;color:var(--mut)}
.empty{text-align:center;padding:42px 20px;color:var(--mut)}.empty .ic{width:30px;height:30px;opacity:.4;margin-bottom:8px}
.hr{border:0;border-top:1px solid var(--line2);margin:14px 0}

/* grilla de ítems (editor) */
.items{width:100%}.items th{background:#FAFBFC}.items td{padding:6px 7px;vertical-align:top}
.items input,.items select{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:12.8px;min-width:0}
.items input:focus,.items select:focus{border-color:var(--brand2);outline:0}
.items .calc{text-align:right;font-weight:600;white-space:nowrap;padding-top:12px}
.items .sub{font-size:11px;color:var(--mut);margin-top:3px}
.items input.num{text-align:right}
.totals{display:flex;justify-content:flex-end;flex-wrap:wrap;margin-top:10px}
.totals>div{display:flex;flex-direction:column;gap:1px;padding:6px 16px;border-left:1px solid var(--line2);text-align:right;min-width:120px}.totals>div:first-child{border-left:0}
.totals span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:700}.totals b{font-size:14px;font-variant-numeric:tabular-nums}
.totals .tot b{font-size:18px;color:var(--brand)}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff}
.login .aside{background:#3D414D url(../assets/fondo-d.png) left center/cover no-repeat;color:#E4E6EE;padding:48px 52px 48px 52px;display:flex;flex-direction:column;justify-content:center;gap:24px}
.login .aside .wm{height:34px;width:auto;align-self:flex-start;margin-bottom:6px}
.login .aside h1{font-size:32px;line-height:1.12;max-width:15ch;color:#fff;font-weight:700}.login .aside p{margin:0;color:#B9BDCB;max-width:46ch}
.login .steps{display:flex;flex-direction:column;gap:1px}.login .steps div{padding:10px 14px;background:rgba(255,255,255,.07);border-left:2px solid var(--lav);font-size:13.3px}.login .steps b{color:#fff}
.login .form{display:grid;place-items:center;padding:36px 24px;background:#fff}
.login .box .wm{height:30px;width:auto;align-self:flex-start}
.login .box{width:100%;max-width:390px;display:flex;flex-direction:column;gap:15px}
.login .box h2{font-size:22px}.login .box .s{color:var(--mut);font-size:13.5px;margin-top:3px}
.demo{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.demo .t{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:700}
.demo button{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 10px;text-align:left;font-size:13px;width:100%}
.demo button:hover{border-color:var(--brand-line);background:var(--brand-soft)}.demo small{display:block;color:var(--mut);font-size:11.5px;line-height:1.2}

/* ---------- toast ---------- */
.toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#1B2430;color:#fff;padding:10px 16px;border-radius:9px;font-size:13px;box-shadow:0 8px 26px rgba(0,0,0,.25);max-width:80vw;text-align:center;animation:tin .2s}
.toast.ok{background:#245F43}.toast.err{background:#9C2E27}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}

@media(max-width:1180px){.g5,.g6{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.gside,.g21,.g12{grid-template-columns:minmax(0,1fr)}}
@media(max-width:920px){
  .app{grid-template-columns:60px minmax(0,1fr)}.brand .wm,.brand span,.nav em,.navgrp,.sidefoot,.modsw button em{display:none}.brand .mg{display:block}.nav{justify-content:center;padding:9px 0;margin:1px 6px;width:calc(100% - 12px)}.nav .pill{position:absolute;margin:-14px 0 0 18px}
  .brand{padding:14px 12px}.modsw{margin:8px 6px}.modsw button{justify-content:center}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}.frm,.frm.f3{grid-template-columns:1fr}.login{grid-template-columns:1fr}.login .aside{display:none}
  .page{padding:16px 14px 50px}.top{padding:10px 14px}.userbtn .t2,.modebadge{display:none}
}

/* layouts de pantallas de Compras */
.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:start}
.lst{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 170px);overflow:auto;padding:8px}
.li{display:block;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.li:hover{border-color:var(--brand-line)}.li.on{border-color:var(--brand2);background:var(--brand-soft)}
.li .a{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mut);font-weight:700}.li .b{font-size:13px;font-weight:600;margin:3px 0 2px;line-height:1.3}
details.msgs{margin-top:4px}details.msgs summary{cursor:pointer;font-size:11.8px;color:var(--brand2);font-weight:600}
.msg{font-size:12.2px;padding:5px 9px;border-radius:7px;margin-top:4px;background:#F4F6F9}.msg.p{background:var(--brand-soft)}.msg small{color:var(--mut)}
@media(max-width:1180px){.split{grid-template-columns:minmax(0,1fr)}.lst{max-height:260px}}

/* lectura de cotizaciones con IA */
.steps3{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.steps3 div{flex:1 1 180px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-size:12.6px;color:var(--mut);background:#FAFBFC;display:flex;align-items:center;gap:8px}
.steps3 b{width:20px;height:20px;border-radius:50%;background:var(--line);color:#fff;display:grid;place-items:center;font-size:11px;flex:none}
.steps3 .on{border-color:var(--brand2);color:var(--brand);background:var(--brand-soft);font-weight:650}.steps3 .on b{background:var(--brand2)}
.steps3 .dn{color:var(--txt)}.steps3 .dn b{background:var(--ok)}
.cmp{margin-top:8px;padding:8px 10px;border-radius:7px;font-size:12.4px;line-height:1.4}.cmp b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.cmp ul{margin:0;padding-left:16px}.cmp li{margin:1px 0}
.cmp.pos{background:var(--ok-b)}.cmp.pos b{color:var(--ok)}.cmp.neg{background:var(--err-b)}.cmp.neg b{color:var(--err)}.cmp.rsk{background:var(--warn-b)}.cmp.rsk b{color:var(--warn)}
.btn .ic{width:15px;height:15px}

/* sugerencias del campo "¿Qué necesitás?" */
.cb-list{position:fixed;z-index:120;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(16,24,40,.18);max-height:340px;overflow:auto}
.cb-h{padding:7px 12px 3px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:700}
.cb-it{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:8px 12px;border-bottom:1px solid var(--line2);font-size:12.9px}
.cb-it:last-child{border-bottom:0}.cb-it:hover,.cb-it.on{background:var(--brand-soft)}
.cb-new{background:#FAFBFC;color:var(--brand2)}.cb-new b{color:var(--txt)}
.items td .sub{min-height:16px}