:root{--bg:#f7f8fa;--card:#fff;--ink:#1f2933;--mute:#6b7785;--line:#e4e8ee;--head:#1f3a5f;--hover:#f1f5fb;--open:#f8fafd;--ok:#16794a;--okbg:#e2f5ea;--warn:#9a5b00;--warnbg:#fff1d6;--bad:#b3261e;--badbg:#fde8e6;--info:#1b5fa8;--infobg:#e3eefb;--chip:#eef2f7;--t1:#1b5fa8;--t1bg:#e3eefb;--t2:#6a3fa0;--t2bg:#efe6fa}
:root[data-theme=dark]{--bg:#12171d;--card:#1a212a;--ink:#e8edf2;--mute:#94a1b0;--line:#2a3441;--head:#0f2540;--hover:#202a36;--open:#161d26;--ok:#62d696;--okbg:#14301f;--warn:#f0b254;--warnbg:#38280f;--bad:#f28b82;--badbg:#3b1c1a;--info:#7db4f0;--infobg:#142a44;--chip:#232d3a;--t1:#7db4f0;--t1bg:#142a44;--t2:#c6a3f0;--t2bg:#2c1f40}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 system-ui,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:1280px;margin:0 auto;padding:20px 16px 40px}
h1{margin:0;font-size:22px}
.sub{color:var(--mute);margin:2px 0 14px;font-size:13px}
.kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 14px;min-width:110px}
.kpi b{display:block;font-size:20px}.kpi span{color:var(--mute);font-size:12px}
.tabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.tab{border:0;background:none;color:var(--mute);padding:9px 16px;cursor:pointer;font-size:14px;border-bottom:2px solid transparent;font-weight:600}
.tab.on{color:var(--head);border-color:var(--head)}
:root[data-theme=dark] .tab.on,:root[data-hc] .tab.on{color:var(--ink);border-color:var(--ink)}
.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.bar input[type=search]{flex:1;min-width:220px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-size:14px}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:6px 12px;border-radius:99px;cursor:pointer;font-size:13px}
.pill.on{background:var(--head);color:#fff;border-color:var(--head)}
.pill b{font-weight:600;opacity:.75;margin-left:4px}
.lbl{color:var(--mute);font-size:12px;margin-right:2px}
.box{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:auto}
table{width:100%;border-collapse:collapse;min-width:860px}
th{position:sticky;top:0;background:var(--head);color:#fff;text-align:left;font-weight:600;font-size:12px;letter-spacing:.03em;text-transform:uppercase;padding:11px 12px;white-space:nowrap;z-index:1}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.r{cursor:pointer}
tr.r:hover td{background:var(--hover)}
tr.r.open td{background:var(--open)}
.arrow{display:inline-block;width:18px;color:var(--mute);transition:transform .15s}
tr.open .arrow{transform:rotate(90deg)}
.name{font-weight:600}
.mono{font-family:Consolas,monospace;font-size:13px}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.b-ok{background:var(--okbg);color:var(--ok)}.b-warn{background:var(--warnbg);color:var(--warn)}.b-bad{background:var(--badbg);color:var(--bad)}.b-info{background:var(--infobg);color:var(--info)}
.cnt{color:var(--mute);font-size:12px}
.more{color:var(--mute);font-size:12px}
tr.d td{background:var(--open);padding:0}
.det{padding:14px 16px 16px 36px}
.alert{background:var(--warnbg);color:var(--warn);border-radius:8px;padding:8px 12px;font-size:13px;margin-bottom:8px}
.cnote{color:var(--mute);font-size:13px;margin-bottom:10px}
.svc{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.svh{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;margin-bottom:6px}
.svh .mono{font-weight:600}
.svh .k{color:var(--mute);font-size:12px;margin-right:3px}
.svn{color:var(--mute);font-size:12.5px;margin-bottom:6px}
.dtools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 6px}
.dtools input{padding:5px 9px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font-size:13px;min-width:160px}
.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:4px 10px;border-radius:6px;cursor:pointer;font-size:12.5px}
.btn:hover{background:var(--hover)}
.dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px}
.did{display:flex;gap:6px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:3px 8px;min-width:0}
.did .mono{font-weight:600}
.did .l{color:var(--mute);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.did .tg{margin-left:auto}
.rng{grid-column:1/-1;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:5px 10px}
.rng>.rh{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rng .rtoggle{cursor:pointer;font-weight:600}
.rng .dl{margin-top:8px;max-height:340px;overflow:auto}
.tag{display:inline-block;border-radius:99px;padding:1px 9px;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;border:1px dashed var(--line);color:var(--mute);background:transparent}
.tag.t-c{background:var(--t1bg);color:var(--t1);border:1px solid transparent}
.tag.t-g{background:var(--t2bg);color:var(--t2);border:1px solid transparent}
.tag.t-x{background:var(--chip);color:var(--ink);border:1px solid var(--line)}
.menu{position:fixed;z-index:50;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.25);padding:4px;min-width:210px}
.menu button{display:block;width:100%;text-align:left;border:0;background:none;color:var(--ink);padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px}
.menu button:hover{background:var(--hover)}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.hide{display:none}
.foot{color:var(--mute);font-size:12.5px;margin-top:10px}
.pg{display:flex;gap:10px;align-items:center;padding:10px 12px;color:var(--mute);font-size:13px}
@media(max-width:700px){.det{padding-left:12px}}
/* ---- mejoras visuales ---- */
:root{--c-n2p:#0e8f7e;--c-conv:#d9652b;--c-anu:#c2307a;--c-cla:#d12f2f;--c-tel:#2c6fd1;--c-oth:#6b7785;--s-act:#16794a;--s-ver:#d89614;--s-imp:#1b5fa8;--s-baja:#b3261e}
:root[data-theme=dark]{--c-n2p:#3ccfb8;--c-conv:#f59a64;--c-anu:#f07ab3;--c-cla:#f27d7d;--c-tel:#7db4f0;--c-oth:#94a1b0;--s-act:#62d696;--s-ver:#f0b254;--s-imp:#7db4f0;--s-baja:#f28b82}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi{position:relative;overflow:hidden;padding:10px 14px 10px 18px}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ka,var(--head))}
.kpi .ic{position:absolute;right:10px;top:8px;font-size:20px;opacity:.35}
.kpi.wide{grid-column:span 2;min-width:260px}
.tbar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--chip);margin:7px 0 5px}
.tbar i{display:block;height:100%}
.leg{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--mute)}
.leg span:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--lc);margin-right:4px;vertical-align:-1px}
.tools{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.tools .bar{margin-bottom:8px}.tools .bar:last-child{margin-bottom:0}
.lbl{min-width:58px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.pill i.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--dc)}
tbody tr.r td:first-child{box-shadow:inset 5px 0 0 var(--sc,transparent)}
tbody tr:nth-child(4n+3) td{background-image:linear-gradient(rgba(127,127,127,.04),rgba(127,127,127,.04))}
.av{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;margin-right:9px;font-size:12px;font-weight:700;color:#fff;vertical-align:middle;background:var(--ac,#667)}
.nm{display:inline-block;vertical-align:middle;max-width:calc(100% - 64px)}
.warnb{display:inline-block;background:var(--warnbg);color:var(--warn);border-radius:6px;padding:0 6px;font-size:11.5px;font-weight:700;margin-left:6px;vertical-align:middle}
.pv{display:inline-block;border-radius:6px;padding:1px 8px;font-size:12px;font-weight:600;margin:1px 3px 1px 0;white-space:nowrap;color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,transparent);border:1px solid color-mix(in srgb,var(--pc) 35%,transparent)}
.p-n2p{--pc:var(--c-n2p)}.p-conv{--pc:var(--c-conv)}.p-anu{--pc:var(--c-anu)}.p-cla{--pc:var(--c-cla)}.p-tel{--pc:var(--c-tel)}.p-oth{--pc:var(--c-oth)}
.cb{display:flex;align-items:center;gap:8px;min-width:90px}
.cb b{min-width:30px;font-variant-numeric:tabular-nums}
.cb .bg{flex:1;height:6px;border-radius:99px;background:var(--chip);overflow:hidden}
.cb .bg i{display:block;height:100%;background:var(--info);border-radius:99px}
.dc{display:flex;align-items:center;gap:8px;white-space:nowrap}
.dc b{min-width:26px;font-variant-numeric:tabular-nums}
.mini{display:flex;gap:3px}
.mini span{font-size:10.5px;font-weight:700;border-radius:99px;padding:0 6px;line-height:16px}
.mini .m-g{background:var(--t2bg);color:var(--t2)}.mini .m-c{background:var(--t1bg);color:var(--t1)}.mini .m-n{background:var(--chip);color:var(--mute)}
.sa-chip{display:inline-block;font-family:Consolas,monospace;font-size:12.5px;background:var(--chip);border-radius:6px;padding:1px 7px}
.det{border-left:4px solid var(--sc,var(--line));margin-left:0}
.alert{border-left:4px solid var(--warn);display:flex;gap:8px}
.cnote{border-left:4px solid var(--info);background:var(--infobg);color:var(--ink);border-radius:0 8px 8px 0;padding:7px 12px}
.svc{border-left:5px solid var(--pc,var(--line));padding:0;overflow:hidden}
.svh{background:color-mix(in srgb,var(--pc,#888) 8%,var(--card));padding:8px 12px;margin:0;border-bottom:1px solid var(--line);gap:8px 14px}
.svb{padding:8px 12px 10px}
.svh .k{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 1px}
.svh>span{display:block}
.svh .mono{font-size:13px}
.nbadge{display:inline-block;min-width:26px;text-align:center;border-radius:99px;padding:0 8px;font-weight:700;background:var(--infobg);color:var(--info)}
.svn{border-left:3px solid var(--line);padding-left:9px}
.did{border-left:4px solid var(--line);transition:background .1s}
.did:hover{background:var(--hover)}
.did.tc-c{border-left-color:var(--t1);background:color-mix(in srgb,var(--t1) 7%,var(--bg))}
.did.tc-g{border-left-color:var(--t2);background:color-mix(in srgb,var(--t2) 7%,var(--bg))}
.did.tc-x{border-left-color:var(--ok)}
.tkm{font-size:10px;font-weight:700;color:var(--t2);border:1px solid var(--t2);border-radius:4px;padding:0 4px;line-height:14px}
.rng{border-left:4px solid var(--info)}
.rng .rtoggle{color:var(--info)}
.tag:hover{filter:brightness(.95);box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 12%,transparent)}
.tab{font-size:14.5px}
.tab .n{display:inline-block;margin-left:6px;background:var(--chip);color:var(--mute);border-radius:99px;padding:0 8px;font-size:12px}
.tab.on .n{background:var(--head);color:#fff}
.stk{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--sc);margin-right:6px}
.empty{padding:28px;text-align:center;color:var(--mute)}
/* ---- administración ---- */
.ad{display:none!important}
body.admin .ad{display:inline-flex!important}
body.admin td.ad,body.admin th.ad{display:table-cell!important}
body.admin div.ad{display:flex!important}
.admbar{align-items:center;flex-wrap:wrap;gap:8px 12px;background:var(--warnbg);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);border-left:6px solid var(--warn);border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:13px}
.admbar .sp{flex:1}
.admbar .btn{color:var(--ink)}
.btn.adm.on{background:var(--warn);color:#fff;border-color:var(--warn)}
.btn.pri{background:var(--head);color:#fff;border-color:var(--head)}
.btn.danger{color:var(--bad)}
.ib{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:6px;cursor:pointer;min-width:28px;height:26px;font-size:13px;padding:0 6px}
.ib:hover{background:var(--hover)}
.ract{white-space:nowrap}
.actbar{gap:8px;margin-bottom:10px;flex-wrap:wrap}
.sact{margin-left:auto;gap:6px;align-items:center}
.dact{margin-left:4px;gap:3px}
.dact .ib{height:20px;min-width:22px;font-size:11px;padding:0 4px}
dialog{border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);padding:0;width:min(560px,94vw);max-height:92vh;box-shadow:0 12px 48px rgba(0,0,0,.4)}
dialog.wide{width:min(780px,94vw)}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog form{padding:18px 20px;display:flex;flex-direction:column;gap:12px;max-height:92vh;overflow:auto}
dialog h3{margin:0;font-size:17px}
.dbody{display:flex;flex-direction:column;gap:12px}
dialog .dact{display:flex!important;justify-content:flex-end;gap:8px;margin:0;position:sticky;bottom:-18px;background:var(--card);padding:10px 0 2px}
.f{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.f input,.f select,.f textarea{font:14px system-ui,"Segoe UI",sans-serif;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:8px 10px;width:100%}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--info);outline-offset:-1px}
.f textarea.mono{font-family:Consolas,monospace;font-size:13px}
.f small{text-transform:none;letter-spacing:0;font-weight:400;font-size:12px}
.f code{background:var(--chip);border-radius:4px;padding:0 4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.grid2{grid-template-columns:1fr}}
.sel{display:flex;align-items:center;gap:8px}.sel select{flex:1}
.trow{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.trow .tn{flex:1;font:14px system-ui;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:7px 10px}
.trow .tcl{width:42px;height:34px;border:1px solid var(--line);border-radius:7px;background:none;padding:2px}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--head);color:#fff;padding:9px 18px;border-radius:99px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:100}
#toast.on{opacity:1;transform:translate(-50%,0)}
.tag.t-x{color:var(--tc,var(--ok));background:color-mix(in srgb,var(--tc,var(--ok)) 15%,transparent);border:1px solid color-mix(in srgb,var(--tc,var(--ok)) 40%,transparent)}
.did.tc-x{border-left-color:var(--tc,var(--ok));background:color-mix(in srgb,var(--tc,var(--ok)) 7%,var(--bg))}

/* ---- sesión / servidor ---- */
.userbar{position:absolute;right:16px;top:20px;display:flex;gap:10px;align-items:center;font-size:13px;color:var(--mute)}
.userbar.hide,.ov.hide{display:none}
.ov{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:200}
.ov form{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 26px;width:min(360px,92vw);display:flex;flex-direction:column;gap:12px;box-shadow:0 12px 48px rgba(0,0,0,.2)}
.ov h2{margin:0;font-size:20px}
.lerr{color:var(--bad);font-size:13px;min-height:18px}
.hist{display:flex;flex-direction:column;max-height:60vh;overflow:auto}
.hist .hr{display:grid;grid-template-columns:140px 90px 120px 1fr;gap:8px;padding:5px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.hist .act{color:var(--info);font-weight:600}
@media(max-width:700px){.userbar{position:static;margin-bottom:8px}.hist .hr{grid-template-columns:1fr}}
body.viewer .tag{cursor:default}

/* ================= v3: barra lateral, buscador, filtros, paginación ================= */
.app{display:flex;min-height:100vh;align-items:flex-start}
.wrap{flex:1;min-width:0;max-width:1400px;margin:0;padding:22px 24px 40px}
.side{position:sticky;top:0;align-self:flex-start;width:230px;flex:none;height:100vh;overflow:auto;background:var(--card);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:20px}
.brand{display:flex;flex-direction:column;font-size:18px;line-height:1.25;padding:0 6px}
.brand small{color:var(--mute);font-size:12px;font-weight:400}
.sec{display:flex;flex-direction:column;gap:4px}
.sec.hide{display:none}
.sec h6{margin:0 0 6px 6px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.sb{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid transparent;background:none;color:var(--ink);padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13.5px;font-family:inherit}
.sb:hover{background:var(--hover)}
.sb.hide{display:none}
.sb.adm.on{background:var(--warn);color:#fff}
.subs{flex-direction:column;gap:2px;margin:4px 0 0 10px;padding-left:8px;border-left:3px solid var(--warn)}
.side .user{margin-top:auto;border-top:1px solid var(--line);padding-top:12px}
#who{font-size:12.5px;color:var(--mute);word-break:break-word;padding:0 6px}

.hero{position:relative;margin:4px 0 12px}
.hero input{width:100%;height:58px;font:17px/1 system-ui,"Segoe UI",sans-serif;padding:0 70px 0 56px;border:2px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);box-shadow:0 3px 14px rgba(0,0,0,.07);transition:border-color .15s,box-shadow .15s}
.hero input::placeholder{color:var(--mute)}
.hero input:focus{outline:none;border-color:var(--info);box-shadow:0 0 0 4px color-mix(in srgb,var(--info) 18%,transparent)}
.hero .si{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:21px;opacity:.65;pointer-events:none}
.hero kbd{position:absolute;right:18px;top:50%;transform:translateY(-50%);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:2px 9px;font:12px Consolas,monospace;color:var(--mute);background:var(--bg);pointer-events:none}
.hero input:focus~kbd{display:none}

.frow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.frow .sp{flex:1}
.frow .lbl{min-width:0}
.rc{color:var(--mute);font-size:13px;font-weight:600}
.dd{position:relative}
.ddb{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:8px 12px;font:600 13.5px system-ui,"Segoe UI",sans-serif;cursor:pointer}
.ddb:hover{background:var(--hover)}
.ddb.has{border-color:var(--info);background:var(--infobg);color:var(--info)}
.ddn{background:var(--info);color:#fff;border-radius:99px;padding:0 7px;font-size:11.5px;line-height:18px}
.car{opacity:.6;font-size:11px}
.dd.open .ddb{border-color:var(--info)}
.ddm{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:270px;max-height:360px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.22);padding:6px}
.dd.open .ddm{display:block}
.ddo{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;cursor:pointer;font-size:13.5px}
.ddo:hover{background:var(--hover)}
.ddo input{accent-color:var(--info);width:15px;height:15px;margin:0}
.ddo span{flex:1}
.ddo b{color:var(--mute);font-weight:600;font-size:12px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dc,var(--mute));flex:none}
.ddf{border-top:1px solid var(--line);margin-top:4px;padding:8px 4px 2px;display:flex;justify-content:flex-end}
.fchip{display:inline-flex;align-items:center;gap:7px;background:var(--chip);border:1px solid var(--line);border-radius:99px;padding:3px 6px 3px 10px;font-size:12.5px}
.fchip button{border:0;background:none;color:var(--mute);cursor:pointer;font-size:11px;padding:0 3px}
.fchip button:hover{color:var(--bad)}

.pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 14px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
.pager .sp{flex:1}
.pager b{color:var(--ink)}
.pgs{display:inline-flex;align-items:center;gap:6px}
.pgs select{padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-size:13px}
.pgn{display:flex;gap:4px;align-items:center}
.pgn .btn{min-width:34px}
.pgn .btn:disabled{opacity:.4;cursor:default}
.pgn .dots{padding:0 4px}

/* cliente con más protagonismo; números planos */
tr.r>td{font-size:13.5px}
td.cl{padding-top:14px;padding-bottom:14px}
.name{font-size:16.5px;font-weight:700;letter-spacing:.005em}
.av{width:34px;height:34px;font-size:13px;border-radius:9px}
.nm{max-width:calc(100% - 82px)}
.num{font-variant-numeric:tabular-nums;font-weight:600}
.cl2{font-size:14.5px;font-weight:600}
.cl2 .av{margin-right:8px}
.admbar{margin-top:0}

.ddm.right{left:auto;right:0}
.ddo .ck{width:15px;color:var(--info);font-weight:700;flex:none}
.ddsep{border-top:1px solid var(--line);margin:4px 0}
.ddo[data-sk],.ddo[data-sd]{user-select:none}


/* ================= v4: alto contraste (colores sobrios) y gestión de usuarios ================= */
:root{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
/* alto contraste · claro */
:root[data-hc]{--bg:#ffffff;--card:#ffffff;--ink:#000000;--mute:#2b2b2b;--line:#1f1f1f;--head:#0b2a55;--hover:#e6edf8;--open:#f3f5f9;--ok:#0b5a2a;--okbg:#d8f0e2;--warn:#6b3a00;--warnbg:#ffe9c2;--bad:#8a0f0f;--badbg:#fadada;--info:#0b3d8f;--infobg:#dbe7fa;--chip:#ebedf0;--t1:#0b3d8f;--t1bg:#dbe7fa;--t2:#4a1d8a;--t2bg:#e9defa;--c-n2p:#05665a;--c-conv:#9c3b00;--c-anu:#94195a;--c-cla:#9e1111;--c-tel:#0b3d8f;--c-oth:#2b2b2b;--s-act:#0b5a2a;--s-ver:#7a5200;--s-imp:#0b3d8f;--s-baja:#8a0f0f}
/* alto contraste · oscuro */
:root[data-hc][data-theme=dark]{--bg:#000000;--card:#0c0c0c;--ink:#ffffff;--mute:#d4d4d4;--line:#a0a0a0;--head:#16325c;--hover:#1c2533;--open:#111111;--ok:#86e8ae;--okbg:#0d2a1a;--warn:#ffcb70;--warnbg:#2e2000;--bad:#ffa39c;--badbg:#3a0f0d;--info:#9ccbff;--infobg:#0f2440;--chip:#1c1c1c;--t1:#9ccbff;--t1bg:#0f2440;--t2:#d6bbff;--t2bg:#25163d;--c-n2p:#5fe0cc;--c-conv:#ffab78;--c-anu:#ff93c4;--c-cla:#ff9a9a;--c-tel:#9ccbff;--c-oth:#d4d4d4;--s-act:#86e8ae;--s-ver:#ffcb70;--s-imp:#9ccbff;--s-baja:#ffa39c}
:root[data-hc] .box,:root[data-hc] .svc,:root[data-hc] .did,:root[data-hc] .kpi,:root[data-hc] .side,:root[data-hc] .ddb,:root[data-hc] .ddm,:root[data-hc] .btn,:root[data-hc] .ib,:root[data-hc] .rng,:root[data-hc] .tools,:root[data-hc] .fchip,:root[data-hc] dialog,:root[data-hc] .hero input,:root[data-hc] .pgs select,:root[data-hc] .f input,:root[data-hc] .f select,:root[data-hc] .f textarea{border-width:2px;border-color:var(--line)}
:root[data-hc] td,:root[data-hc] .pager,:root[data-hc] .svh{border-color:var(--line)}
:root[data-hc] .tag,:root[data-hc] .pv,:root[data-hc] .badge,:root[data-hc] .warnb,:root[data-hc] .tkm{border:1.5px solid currentColor;font-weight:700}
:root[data-hc] .cnt,:root[data-hc] .more,:root[data-hc] .sub,:root[data-hc] .svn,:root[data-hc] .sec h6{color:var(--mute)}
:root[data-hc] .alert,:root[data-hc] .cnote{border-left-width:6px;color:var(--ink)}
:root[data-hc] .av{filter:brightness(.78) saturate(.9)}
:root[data-hc][data-theme=dark] .av{filter:none}
:root[data-hc] tr.r:hover td{outline:2px solid var(--line);outline-offset:-2px}
:root[data-hc] a{text-decoration:underline}
:root[data-hc] :focus-visible{outline:3px solid var(--ink);outline-offset:2px}
:root :focus-visible{outline:2px solid var(--info);outline-offset:1px}
.hero input:focus-visible,.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{outline:none}
.sb.on{background:var(--infobg);color:var(--info);font-weight:700}
:root[data-hc] .sb.on{background:var(--ink);color:var(--card)}
:root[data-hc] .sb:hover{outline:2px solid var(--line);outline-offset:-2px}

/* gestión de usuarios */
.utab{width:100%;border-collapse:collapse;min-width:0;margin-bottom:14px}
.utab th{position:static}
.utab td{padding:8px 10px}
.utab tr.off td{opacity:.55}
.usel,.psel{padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--ink);font-size:13px}
.uact{white-space:nowrap;text-align:right}
.uact .ib{margin-left:4px}
.unew{display:grid;grid-template-columns:1.2fr 150px 1.2fr auto;gap:10px;align-items:end;border-top:1px solid var(--line);padding-top:14px}
@media(max-width:700px){.unew{grid-template-columns:1fr}}
.unote{background:var(--okbg);color:var(--ink);border-left:5px solid var(--ok);padding:9px 12px;border-radius:0 8px 8px 0;margin-bottom:12px;font-size:13.5px}
.unote code{font:600 14px Consolas,monospace;background:var(--card);border:1px solid var(--line);border-radius:5px;padding:1px 7px;user-select:all}
.uhelp{font-size:12.5px;color:var(--mute);margin:-6px 0 12px}

/* apariencia desplegable */
.sb .car{margin-left:auto;opacity:.6;font-size:11px;transition:transform .15s}
.sb[aria-expanded=true] .car{transform:rotate(180deg)}
.thcur{color:var(--mute);font-weight:400;font-size:12.5px}
.thlist{display:flex;flex-direction:column;gap:2px;margin:2px 0 4px 10px;padding-left:8px;border-left:3px solid var(--info)}
.thlist.hide{display:none}
.thlist .sb .ck{margin-left:auto;font-weight:700}
.thmain{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.thmain small.thcur{display:block;font-size:11.5px}

/* barra lateral plegable */
.side{transition:width .18s ease}
.sb .ic{width:22px;text-align:center;flex:none}
.brandrow{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.sb.tgl{width:auto;flex:none;padding:6px 10px;font-weight:700;border:1px solid var(--line);background:var(--card)}
.brand b{display:flex;align-items:center;gap:6px}
@media(min-width:1024px){
html.sidecol .side{width:var(--side-rail);padding:20px 8px}
html.sidecol .side .tx,html.sidecol .side h6,html.sidecol .side .brand small,html.sidecol .side .car,html.sidecol .side .thlist .ck,html.sidecol .side #who{display:none!important}
html.sidecol .side .brandrow{flex-direction:column;align-items:center;gap:10px}
html.sidecol .side .brand b{font-size:20px}
html.sidecol .side .sb{justify-content:center;padding:10px 0;gap:0}
html.sidecol .side .sb.tgl{width:100%}
html.sidecol .side .subs,html.sidecol .side .thlist{margin-left:0;padding-left:0;border-left:0}
html.sidecol .side .sec+.sec,html.sidecol .side .sec.user{border-top:1px solid var(--line);padding-top:10px}
html.sidecol .side .sec.user{padding-top:12px}
}


/* =====================================================================
   v5 · RESPONSIVE GLOBAL · hover · permisos por módulo
   Propiedades globales (custom properties + clamp/min/max + dvh) y
   container queries sobre las tablas para adaptarse al ancho real disponible.
   ===================================================================== */
:root{
 --gutter:clamp(12px,2.4vw,32px);
 --fs:clamp(13px,.18vw + 12.4px,15.5px);
 --fs-sm:clamp(11.5px,.1vw + 11.2px,13px);
 --fs-name:clamp(15px,.45vw + 13px,18px);
 --fs-h1:clamp(19px,1.1vw + 15px,28px);
 --side-w:clamp(210px,15vw,264px);
 --side-rail:66px;
 --radius:clamp(8px,.5vw + 6px,14px);
 --pad:clamp(8px,.55vw + 6px,14px);
 --content-max:1760px;
 --tap:42px;
 --lift:0 8px 22px rgba(15,30,50,.14);
 --lift-sm:0 4px 12px rgba(15,30,50,.12);
}
:root[data-theme=dark]{--lift:0 8px 22px rgba(0,0,0,.55);--lift-sm:0 4px 12px rgba(0,0,0,.5)}
@media(min-width:1800px){:root{--content-max:2000px}}
html{-webkit-text-size-adjust:100%}
body{font-size:var(--fs)}
img,svg,video{max-width:100%}
h1{font-size:var(--fs-h1);line-height:1.2}
.sub{font-size:var(--fs-sm)}
.app{min-height:100dvh}
.wrap{max-width:var(--content-max);margin-inline:auto;padding:clamp(14px,1.6vw,26px) var(--gutter) calc(40px + env(safe-area-inset-bottom))}
.side{width:var(--side-w);height:100dvh}
.box{container:tbl/inline-size;border-radius:var(--radius)}
table{min-width:0}
th,td{padding:var(--pad) calc(var(--pad)*1.15)}
.kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:var(--pad)}
.kpi{border-radius:var(--radius)}
.kpi b{font-size:clamp(18px,.9vw + 13px,24px)}
.hero input{height:clamp(46px,2.4vw + 28px,60px);font-size:clamp(15px,.45vw + 13px,18px);border-radius:calc(var(--radius) + 3px);padding-left:clamp(44px,3vw + 22px,56px)}
.hero .si{left:clamp(14px,1.2vw + 6px,20px)}
.frow{gap:var(--pad)}
.ddm{max-width:calc(100vw - 2*var(--gutter))}
.name{font-size:var(--fs-name)}
tr.r>td{font-size:var(--fs)}
.cnt,.more{font-size:var(--fs-sm)}
.pager{font-size:var(--fs-sm)}
.tabs{overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tab{white-space:nowrap}
.det{padding:var(--pad) var(--pad) var(--pad) clamp(10px,2.4vw,36px)}
.dl{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.sa-chip{word-break:break-all}
#toast{bottom:calc(24px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);text-align:center}

/* barra superior y menú lateral deslizante (tablet / móvil) */
.topbar{display:none;position:sticky;top:0;z-index:40;align-items:center;gap:12px;padding:8px var(--gutter);padding-top:calc(8px + env(safe-area-inset-top));background:var(--card);border-bottom:1px solid var(--line);font-size:17px}
.menu-btn{width:var(--tap);height:var(--tap);border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;font-size:20px;cursor:pointer}
.menu-btn:hover{background:var(--hover)}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:65}
.sb.tgl.close{display:none}
@media(max-width:1023px){
 .topbar{display:flex}
 .app{display:block}
 .side{position:fixed;left:0;top:0;bottom:0;height:100dvh;width:min(86vw,300px);transform:translateX(-104%);transition:transform .22s ease;z-index:70;padding-top:calc(20px + env(safe-area-inset-top))}
 body.sideopen .side{transform:none;box-shadow:0 0 40px rgba(0,0,0,.4)}
 .scrim{display:block}
 body.sideopen .scrim{opacity:1;pointer-events:auto}
 body.sideopen{overflow:hidden}
 .sb.tgl:not(.close){display:none}
 .sb.tgl.close{display:inline-flex}
 .userbar{position:static}
}

/* tablas → tarjetas cuando el contenedor es angosto (no depende del viewport) */
@container tbl (max-width:820px){
 table,tbody{display:block;width:100%}
 thead{display:none}
 #tb tr.r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;padding:12px 14px 12px 20px;border-bottom:1px solid var(--line);box-shadow:inset 5px 0 0 var(--sc,transparent);background:var(--card)}
 #tb tr.r.open{background:var(--open)}
 #tb tr.r>td,#tbd tr>td{display:block;padding:0;border:0;background:none!important;box-shadow:none!important}
 #tb tr.r>td.cl{grid-column:1/-1}
 #tb tr.r>td.ract{grid-column:1/-1;text-align:right}
 #tb tr:not(.r):not(.d){display:block}
 #tb tr.d:not(.hide){display:block;border-bottom:1px solid var(--line)}
 #tb tr.d>td{display:block;padding:0;border:0}
 td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin-bottom:2px}
 #tbd tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;padding:12px 14px;border-bottom:1px solid var(--line)}
 #tbd td.dn{grid-column:1/-1;font-size:1.2em}
 #tbd td[data-l="Cliente"],#tbd td[data-l="Detalle"]{grid-column:1/-1}
 #tbd td.cnt:empty{display:none}
 td.empty{grid-column:1/-1;display:block}
 .nm{max-width:calc(100% - 96px)}
}
@container tbl (max-width:700px){
 .sact{flex-basis:100%;margin-left:0;justify-content:flex-end}
 .det{border-left-width:3px}
 .dtools input{flex:1;min-width:0}
 .pager .sp{display:none}
}
@container tbl (max-width:520px){
 .did{flex-wrap:wrap}
 .did .l{white-space:normal}
 .svh{gap:8px 14px}
}
@container tbl (max-width:340px){
 #tb tr.r,#tbd tr{grid-template-columns:1fr}
}

/* móvil: diálogos a pantalla completa, menús tipo hoja inferior */
@media(max-width:700px){
 dialog,dialog.wide{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0}
 dialog form{max-height:none;min-height:100%;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
 dialog .dact,.pfoot{bottom:calc(-16px - env(safe-area-inset-bottom))}
 .ddm,.ddm.right{position:fixed;left:8px;right:8px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom));max-height:62dvh;min-width:0;max-width:none;z-index:80}
 .hero kbd{display:none}
 .frow>.dd,.frow #filters>.dd{flex:1 1 auto}
 .ddb{width:100%;justify-content:space-between}
 .pager{justify-content:center}
 .grid2{grid-template-columns:1fr}
 .utab,.utab tbody,.utab tr,.utab td{display:block;width:100%}
 .utab thead{display:none}
 .utab tr{border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:8px}
 .utab td{padding:4px 2px;border:0}
 .utab td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
 .uact{text-align:left}
}
@media(hover:none),(max-width:700px){.hero kbd{display:none}}
@media(pointer:coarse){
 .btn,.ib,.ddb,.sb,.tab,.pgn .btn,.pgs select,.usel,.psel,.pill{min-height:var(--tap)}
 .ib{min-width:var(--tap)}
 .dact .ib{height:34px;min-width:36px}
 .ddo{padding:12px 10px}
 .tag{padding:4px 11px}
 .tab{padding:12px 16px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* usuarios: matriz de permisos por módulo */
.uscroll{overflow-x:auto}
.unew{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.phead{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.presets{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0 12px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:var(--pad)}
.pgrp{border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px 10px;margin:0;min-width:0}
.pgrp legend{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mute);padding:0 6px}
.prow{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:8px;cursor:pointer}
.prow:hover{background:var(--hover)}
.prow input{margin-top:3px;width:17px;height:17px;accent-color:var(--info);flex:none}
.prow small{display:block;color:var(--mute);font-size:12px;line-height:1.35;margin-top:1px}
.pfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;position:sticky;bottom:-18px;background:var(--card);padding:10px 0 2px;border-top:1px solid var(--line)}

/* efecto hover en todos los recuadros */
.kpi,.svc,.did,.rng,.alert,.cnote,.svn,.admbar,.pgrp,.unote,.fchip,.box,.tools,.uhelp,.menu,.det,.dd .ddb,.pv,.badge,.sa-chip,.nbadge,.warnb,.tkm,.leg span,.tbar{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease,filter .16s ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .kpi:hover,.svc:hover,.alert:hover,.cnote:hover,.admbar:hover,.pgrp:hover,.unote:hover,.uhelp:hover{transform:translateY(-2px);box-shadow:var(--lift)}
 .did:hover,.rng:hover,.fchip:hover,.svn:hover{transform:translateY(-1px);box-shadow:var(--lift-sm);border-color:color-mix(in srgb,var(--info) 55%,var(--line))}
 .pv:hover,.badge:hover,.sa-chip:hover,.nbadge:hover,.warnb:hover,.tkm:hover{transform:translateY(-1px);filter:brightness(.95)}
}
.box:hover,.tools:hover{box-shadow:0 4px 18px rgba(15,30,50,.09);border-color:color-mix(in srgb,var(--info) 35%,var(--line))}
.det:hover{background:color-mix(in srgb,var(--info) 3.5%,var(--open))}
.kpi:hover{border-color:color-mix(in srgb,var(--ka,var(--info)) 55%,var(--line))}
.svc:hover{border-color:color-mix(in srgb,var(--pc,var(--info)) 60%,var(--line))}
:root[data-hc] .kpi:hover,:root[data-hc] .svc:hover,:root[data-hc] .did:hover,:root[data-hc] .rng:hover,:root[data-hc] .box:hover,:root[data-hc] .alert:hover,:root[data-hc] .cnote:hover,:root[data-hc] .pgrp:hover,:root[data-hc] .fchip:hover{outline:2px solid var(--ink);outline-offset:1px}

/* permisos: ocultar controles según los módulos habilitados (debe ir al final) */
body:not(.p-clients-create) [data-perm="clients.create"],
body:not(.p-clients-edit) [data-perm="clients.edit"],
body:not(.p-clients-delete) [data-perm="clients.delete"],
body:not(.p-services-edit) [data-perm="services.edit"],
body:not(.p-dids-edit) [data-perm="dids.edit"],
body:not(.p-tags-assign) [data-perm="tags.assign"],
body:not(.p-tags-manage) [data-perm="tags.manage"],
body:not(.p-audit-view) [data-perm="audit.view"],
body:not(.p-data-backup) [data-perm="data.backup"],
body:not(.isadmin) [data-admin],
body:not(.canedit) #adm,
body .subs.nosub{display:none!important}
body:not(.p-tags-assign) .tag{cursor:default}
body:not(.p-tags-assign) .tag.none{display:none}


/* ===== barra de navegación con aspecto propio por tema ===== */
:root{--nav-bg:linear-gradient(180deg,#27507f 0%,#1d3d66 52%,#162f50 100%);--nav-ink:#eef3fb;--nav-mute:#aebfd8;--nav-line:rgba(255,255,255,.16);--nav-hover:rgba(255,255,255,.13);--nav-active-bg:#ffffff;--nav-active:#1d3d66;--nav-accent:#8cc0f5;--nav-shadow:2px 0 16px rgba(15,30,50,.22)}
:root[data-theme=dark]{--nav-bg:linear-gradient(180deg,#1b3250 0%,#122239 52%,#0c1829 100%);--nav-ink:#e9f0fa;--nav-mute:#9db2cf;--nav-line:rgba(255,255,255,.13);--nav-hover:rgba(255,255,255,.1);--nav-active-bg:#e6effa;--nav-active:#14305a;--nav-accent:#8cc0f5;--nav-shadow:2px 0 18px rgba(0,0,0,.55)}
:root[data-hc][data-theme=dark]{--nav-bg:linear-gradient(180deg,#0b2447 0%,#06142b 55%,#010409 100%);--nav-ink:#ffffff;--nav-mute:#dbe6f5;--nav-line:#ffffff;--nav-hover:#1b3a66;--nav-active-bg:#ffffff;--nav-active:#000000;--nav-accent:#9ccbff;--nav-shadow:none}
.side,.topbar{background:var(--nav-bg);color:var(--nav-ink);border-color:var(--nav-line)}
.side{box-shadow:var(--nav-shadow);border-right:1px solid var(--nav-line)}
.topbar{border-bottom:1px solid var(--nav-line)}
.side .sb,.menu-btn{color:var(--nav-ink)}
.side .sb{transition:background-color .15s,transform .15s,color .15s}
.side .sb:hover{background:var(--nav-hover)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.side .sb:hover{transform:translateX(3px)}}
html.sidecol .side .sb:hover{transform:none}
.side .sb.on{background:var(--nav-active-bg);color:var(--nav-active)}
.side .sb.adm.on{background:var(--warn);color:#fff}
.side .sec h6,.side .brand small,.side #who,.side .thcur{color:var(--nav-mute)}
.side .brand b{color:var(--nav-ink)}
.side .brand .ic{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--nav-accent) 55%,transparent))}
.side .sec+.sec,.side .sec.user{border-color:var(--nav-line)}
.side .thlist{border-left-color:var(--nav-accent)}
.side .sb.tgl{background:var(--nav-hover);border-color:var(--nav-line);color:var(--nav-ink)}
.menu-btn{background:var(--nav-hover);border-color:var(--nav-line)}
:root[data-hc] .side{border-right:2px solid var(--nav-line)}
:root[data-hc] .topbar{border-bottom:2px solid var(--nav-line)}
:root[data-hc] .side .sb:hover{outline:2px solid #fff;outline-offset:-2px}

.hero input:hover{border-color:color-mix(in srgb,var(--info) 45%,var(--line));box-shadow:0 6px 20px rgba(15,30,50,.12)}
.tab{transition:color .15s,background-color .15s,border-color .15s;border-radius:8px 8px 0 0}
.tab:hover{color:var(--ink);background:var(--hover)}
.pager:hover,.foot:hover{background-color:color-mix(in srgb,var(--info) 3%,transparent)}


/* ===== barras de desplazamiento (scroll) con la estética de la barra lateral ===== */
:root{--sb-track:#e7edf5;--sb-thumb:linear-gradient(180deg,#2f5b8f 0%,#1b3a63 100%);--sb-thumb-h:linear-gradient(180deg,#3d6ca8 0%,#244978 100%);--sb-thumb-flat:#2a5384;--sb-line:rgba(15,30,50,.14)}
:root[data-theme=dark]{--sb-track:#0b111a;--sb-thumb:linear-gradient(180deg,#35588c 0%,#1f3a63 100%);--sb-thumb-h:linear-gradient(180deg,#4573b1 0%,#2b4c7e 100%);--sb-thumb-flat:#2f5083;--sb-line:rgba(255,255,255,.1)}
:root[data-hc][data-theme=dark]{--sb-track:#000000;--sb-thumb:linear-gradient(180deg,#eef5fd 0%,#bcd5f3 100%);--sb-thumb-h:linear-gradient(180deg,#ffffff 0%,#d6e7fb 100%);--sb-thumb-flat:#d6e7fb;--sb-line:#ffffff}
@supports selector(::-webkit-scrollbar){
 ::-webkit-scrollbar{width:13px;height:13px;background:var(--sb-track)}
 ::-webkit-scrollbar-track{background:var(--sb-track);border-left:1px solid var(--sb-line)}
 ::-webkit-scrollbar-track:horizontal{border-left:0;border-top:1px solid var(--sb-line)}
 ::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:10px;border:3px solid var(--sb-track);min-height:42px;min-width:42px}
 ::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-h)}
 ::-webkit-scrollbar-thumb:active{background:var(--sb-thumb-h);border-width:2px}
 ::-webkit-scrollbar-button{display:none;width:0;height:0}
 ::-webkit-scrollbar-corner{background:var(--sb-track)}
 /* zonas internas (tablas, menús, diálogos): más finas */
 .box::-webkit-scrollbar,.ddm::-webkit-scrollbar,dialog form::-webkit-scrollbar,.hist::-webkit-scrollbar,.uscroll::-webkit-scrollbar,.rng .dl::-webkit-scrollbar,.menu::-webkit-scrollbar{width:10px;height:10px}
 .box::-webkit-scrollbar-thumb,.ddm::-webkit-scrollbar-thumb,dialog form::-webkit-scrollbar-thumb,.hist::-webkit-scrollbar-thumb,.uscroll::-webkit-scrollbar-thumb,.rng .dl::-webkit-scrollbar-thumb{border-width:2px;border-radius:8px}
 /* barra lateral: scroll translúcido sobre el fondo azul */
 .side::-webkit-scrollbar{width:9px;background:transparent}
 .side::-webkit-scrollbar-track{background:transparent;border:0}
 .side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border:2px solid transparent;background-clip:padding-box;border-radius:8px}
 .side::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5);background-clip:padding-box}
}
@supports not selector(::-webkit-scrollbar){
 *{scrollbar-width:thin;scrollbar-color:var(--sb-thumb-flat) var(--sb-track)}
 .side{scrollbar-color:rgba(255,255,255,.4) transparent}
}
:root[data-hc] ::-webkit-scrollbar-thumb{border-color:#000}


/* ===== iconos (Tabler Icons, MIT) con color por categoría ===== */
svg.i{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em;overflow:visible}
:root{--ic-blue:#1b5fa8;--ic-teal:#0b7f70;--ic-green:#16794a;--ic-amber:#a86a08;--ic-orange:#bd530c;--ic-red:#b3261e;--ic-violet:#6a3fa0;--ic-pink:#ad2d6c;--ic-slate:#52606d}
:root[data-theme=dark]{--ic-blue:#7db4f0;--ic-teal:#3ccfb8;--ic-green:#62d696;--ic-amber:#f0b254;--ic-orange:#f59a64;--ic-red:#f28b82;--ic-violet:#c6a3f0;--ic-pink:#f07ab3;--ic-slate:#9aa7b5}
:root[data-hc][data-theme=dark]{--ic-blue:#9ccbff;--ic-teal:#5fe0cc;--ic-green:#86e8ae;--ic-amber:#ffcb70;--ic-orange:#ffab78;--ic-red:#ffa39c;--ic-violet:#d6bbff;--ic-pink:#ff93c4;--ic-slate:#dbe3ee}
.side,.topbar{--ic-blue:#8cc0f5;--ic-teal:#6fd8d0;--ic-green:#7fd6a4;--ic-amber:#f2c36b;--ic-orange:#f5a66b;--ic-red:#f59a93;--ic-violet:#c4a6f2;--ic-pink:#f59ac2;--ic-slate:#b9c6d8}
.c-blue{--c:var(--ic-blue)}.c-teal{--c:var(--ic-teal)}.c-green{--c:var(--ic-green)}.c-amber{--c:var(--ic-amber)}.c-orange{--c:var(--ic-orange)}.c-red{--c:var(--ic-red)}.c-violet{--c:var(--ic-violet)}.c-pink{--c:var(--ic-pink)}.c-slate{--c:var(--ic-slate)}
.c-blue,.c-teal,.c-green,.c-amber,.c-orange,.c-red,.c-violet,.c-pink,.c-slate{color:var(--c)}
.ic{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:9px;background:color-mix(in srgb,var(--c,currentColor) 17%,transparent)}
.sb .ic{width:30px;height:30px;font-size:17px;text-align:initial;margin-right:0}
.brand .ic{width:34px;height:34px;font-size:20px}
.topbar b{display:inline-flex;align-items:center;gap:8px}
.topbar .ic{width:32px;height:32px;font-size:19px}
.kpi .ic{position:absolute;right:12px;top:10px;width:38px;height:38px;font-size:21px;opacity:1}
.menu-btn svg.i{width:22px;height:22px}
.btn,.ib{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn.hide,.ib.hide{display:none}
.ib svg.i{width:16px;height:16px}
.dact .ib svg.i{width:13px;height:13px}
.sb.tgl svg.i{width:18px;height:18px}
.hero .si{opacity:1;font-size:clamp(19px,.5vw + 16px,23px);display:flex}
.car{display:inline-flex}.car svg.i{width:.95em;height:.95em}
.arrow svg.i{width:1.1em;height:1.1em}
.tab svg.i{margin-right:4px}
.k svg.i{width:1.05em;height:1.05em;margin-right:2px}
.warnb svg.i{width:.95em;height:.95em;vertical-align:-.17em}
.lbl svg.i{width:1.1em;height:1.1em;vertical-align:-.25em}
.alert{align-items:flex-start}.alert svg.i{margin-top:2px;width:1.15em;height:1.15em}
.fchip button svg.i{width:12px;height:12px}
.ddo .ck{display:inline-flex;align-items:center}.ddo .ck svg.i{width:15px;height:15px}
.thlist .sb .ck svg.i{width:16px;height:16px}
.rng .rtoggle{display:inline-flex;align-items:center;gap:6px}
.rng .rtoggle svg.tg{transition:transform .15s}
.rng.openr .rtoggle svg.tg{transform:rotate(90deg)}
#sv svg.i{width:1.1em;height:1.1em;vertical-align:-.2em}
dialog h3{display:flex;align-items:center;gap:8px}
dialog h3 svg.i{width:1.2em;height:1.2em}
#toast.err{background:var(--bad);color:#fff}
.pgn .btn svg.i{width:16px;height:16px}
:root[data-hc] .ic{border:1px solid color-mix(in srgb,var(--c,#fff) 60%,transparent)}

.side .sb.adm.on .ic{background:rgba(255,255,255,.3);color:#fff}
.side .sb.adm.on svg.i{color:#fff}
#who{display:flex;align-items:center;gap:6px}
#who .ic{width:26px;height:26px;font-size:15px}


/* ===== SA coloreado por proveedor · estados dinámicos · módulos de catálogos ===== */
.sa-chip[class*=" p-"]{color:var(--pc);background:color-mix(in srgb,var(--pc) 13%,transparent);border:1px solid color-mix(in srgb,var(--pc) 38%,transparent);font-weight:600}
td .sa-chip{margin:1px 2px 1px 0}
.b-green,.b-amber,.b-blue,.b-red,.b-violet,.b-teal,.b-orange,.b-pink,.b-slate{background:color-mix(in srgb,var(--bc) 16%,transparent);color:var(--bc)}
.b-green{--bc:var(--ic-green)}.b-amber{--bc:var(--ic-amber)}.b-blue{--bc:var(--ic-blue)}.b-red{--bc:var(--ic-red)}.b-violet{--bc:var(--ic-violet)}.b-teal{--bc:var(--ic-teal)}.b-orange{--bc:var(--ic-orange)}.b-pink{--bc:var(--ic-pink)}.b-slate{--bc:var(--ic-slate)}
.pin{font:14px system-ui,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:7px 10px;width:100%;min-width:0}
.pin:focus{outline:2px solid var(--info);outline-offset:-1px}
.ptools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ptools input[type=search]{flex:1;min-width:180px;font:14px system-ui;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.ptools .sp{flex:1}
.pmerge{border:1px solid var(--info);background:var(--infobg);border-radius:var(--radius);padding:10px 12px;margin-bottom:12px}
.pmrow{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;align-items:center}
.pmrow .pin,.pmrow select{flex:1;min-width:200px}
.pck{width:36px}
.pck input{width:17px;height:17px;accent-color:var(--info)}
.utab td .badge{font-size:13px}
body:not(.p-providers-manage) [data-perm="providers.manage"],
body:not(.p-statuses-manage) [data-perm="statuses.manage"]{display:none!important}