:root{
  --azul:#48A8E0; --verde:#78C828; --navy:#0F172A; --gris:#94A3B8;
  --borde:#E8EEF5; --rojo:#EF4444; --ambar:#F59E0B;
  --fondo:#F4F7FB; --panel:#FFFFFF; --texto:#0F172A; --texto2:#475569;
  --side:#0F172A; --side-texto:#CBD5E1; --side-act:#1E293B;
  --b1:#78C828; --b2:#c2e567; --b3:#fde047; --b4:#f97316; --b5:#dc2626; --b6:#b91c1c; --b7:#991b1b;
}
[data-theme=dark]{
  --fondo:#0B1220; --panel:#101A2C; --texto:#E2E8F0; --texto2:#94A3B8;
  --borde:#1E2A40; --navy:#E2E8F0; --side:#070D18; --side-act:#15233B;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins','Segoe UI',system-ui,sans-serif;background:var(--fondo);color:var(--texto);font-size:14px;overflow-x:hidden}
.layout{display:flex;min-height:100vh}

/* ───── Sidebar ───── */
aside{width:248px;background:var(--side);color:var(--side-texto);flex-shrink:0;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:60;transition:transform .25s,width .22s ease}
/* modo riel: menú retraído a solo iconos (escritorio) */
@media(min-width:881px){
  body.rail aside{width:66px}
  body.rail .content{margin-left:66px}
  body.rail aside .logo{padding:16px 0 8px;text-align:center;font-size:17px}
  body.rail aside .logo span{display:inline}
  body.rail aside .logo .lg-txt,body.rail aside .logo small,body.rail .viewas,body.rail aside .pie{display:none}
  body.rail .nodo>.nlink{justify-content:center;padding:11px 0}
  body.rail .nodo>.nlink>span:nth-child(2),body.rail .nodo .caret{display:none}
  body.rail .hijos{display:none!important}
}
aside .logo{padding:18px 18px 12px;font-weight:700;font-size:15px;color:#fff}
aside .logo span{color:var(--azul)}
aside .logo small{display:block;font-weight:400;font-size:10px;color:var(--gris);margin-top:2px}
.viewas{margin:4px 14px 10px;font-size:10px}
.viewas label{color:var(--gris);text-transform:uppercase;font-weight:600;display:block;margin-bottom:4px}
.viewas select{width:100%;background:var(--side-act);color:#fff;border:1px solid #27364f;border-radius:8px;padding:6px 8px;font-size:12px}
nav.tree{flex:1;overflow-y:auto;padding:4px 10px 20px}
.tree .navlbl{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--texto2);opacity:.8;padding:14px 12px 5px;user-select:none;pointer-events:none}
.tree .navlbl:first-child{padding-top:4px}
body.rail .tree .navlbl{display:none}
.nodo{margin-bottom:2px}
.nodo>.nlink{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--side-texto);user-select:none}
.nodo>.nlink:hover{background:var(--side-act);color:#fff}
.nodo>.nlink.act{background:var(--azul);color:#fff;font-weight:600}
.nodo .caret{margin-left:auto;font-size:9px;transition:transform .2s;color:var(--gris)}
.nodo.open>.nlink .caret{transform:rotate(90deg)}
.hijos{display:none;margin:1px 0 4px 26px;border-left:1px solid #27364f;padding-left:8px}
.nodo.open>.hijos{display:block}
.hijos .nlink{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--gris)}
.hijos .nlink:hover{background:var(--side-act);color:#fff}
/* Acciones (crear) resaltadas en verde dentro del menú — Fase 2 Hacer/Ver */
.nodo>.nlink.accion>span:nth-child(2){color:var(--verde);font-weight:600}
.hijos .nlink.accion{color:var(--verde);font-weight:600}
.hijos .nlink.accion:hover{background:var(--verde);color:#07210a}
/* Botón "＋ Nuevo" del header — Fase 3 */
.hdr-tools .nuevobtn{background:var(--verde);color:#08240c;border-color:var(--verde);font-weight:700}
.hdr-tools .nuevobtn:hover{filter:brightness(1.06)}
.hijos .nlink.act{color:var(--azul);font-weight:600}
.lock{font-size:9px;margin-left:auto;opacity:.8}
aside .pie{padding:12px 16px;font-size:10px;color:var(--gris);border-top:1px solid #1c2940}

/* ───── Contenido ───── */
.content{flex:1;margin-left:248px;min-width:0;transition:margin-left .22s ease}
/* barra de progreso superior + transición de páginas */
#loadbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--azul),var(--verde));z-index:300;opacity:0}
#loadbar.on{opacity:1;width:72%;transition:width 5s cubic-bezier(.08,.65,.15,1),opacity .15s}
#loadbar.done{opacity:0;width:100%;transition:width .25s,opacity .5s .25s}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#main.fade>*{animation:fadeUp .26s ease both}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--azul);outline-offset:1px}
header{background:var(--panel);border-bottom:1px solid var(--borde);padding:10px 18px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:250;flex-wrap:wrap}
#burger{border:none;background:none;font-size:19px;cursor:pointer;color:var(--texto2);border-radius:8px;padding:4px 8px}
#burger:hover{background:var(--fondo);color:var(--azul)}
header h2{font-size:15px;font-weight:600;flex-shrink:0}
.searchbox{position:relative}
.searchbox input{border:1px solid var(--borde);background:var(--fondo);border-radius:99px;padding:7px 14px;font-size:12px;width:230px;color:var(--texto)}
.sugs{position:absolute;top:36px;left:0;right:0;background:var(--panel);border:1px solid var(--borde);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:260px;overflow:auto;display:none;z-index:80}
.sugs div{padding:8px 12px;font-size:12px;cursor:pointer}
.sugs div:hover{background:var(--fondo)}
.spacer{flex:1}
.pill{font-size:11px;color:var(--texto2);background:var(--fondo);padding:4px 10px;border-radius:99px;white-space:nowrap}
.pill b{color:var(--verde)}
.btn{border:1px solid var(--borde);background:var(--panel);border-radius:9px;padding:6px 12px;cursor:pointer;font-size:12px;color:var(--texto);user-select:none}
.btn:hover{border-color:var(--azul);color:var(--azul)}
.btn.primary{background:var(--azul);color:#fff;border-color:var(--azul)}

/* filtros + chips */
#filtros{background:var(--panel);border-bottom:1px solid var(--borde);padding:8px 18px;display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.filtro label{display:block;font-size:9px;color:var(--gris);font-weight:700;margin-bottom:3px;text-transform:uppercase}
.filtro input,.filtro select{border:1px solid var(--borde);border-radius:8px;padding:6px 8px;font-size:12px;background:var(--fondo);min-width:110px;color:var(--texto)}
/* multi-selector de sedes */
.msel{position:relative}
.msel-btn{border:1px solid var(--borde);border-radius:8px;padding:6px 10px;font-size:12px;background:var(--fondo);color:var(--texto);cursor:pointer;min-width:140px;text-align:left;white-space:nowrap}
.msel-btn::after{content:'▾';float:right;color:var(--gris);margin-left:8px}
.msel-pop{position:absolute;top:34px;left:0;background:var(--panel);border:1px solid var(--borde);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.14);padding:8px;display:none;z-index:75;min-width:200px;max-height:280px;overflow:auto}
.msel-pop.open{display:block}
.msel-pop label{display:flex;gap:8px;align-items:center;font-size:12px;padding:5px 8px;cursor:pointer;border-radius:7px;text-transform:none;font-weight:500;color:var(--texto);margin:0}
.msel-pop label:hover{background:var(--fondo)}
.msel-pop input[type=checkbox]{accent-color:var(--azul);width:14px;height:14px}
.msel-pop .acciones{display:flex;gap:6px;padding:6px 6px 2px;border-top:1px solid var(--borde);margin-top:6px}
.msel-pop .acciones button{flex:1;border:none;background:var(--fondo);border-radius:7px;padding:5px;font-size:10.5px;cursor:pointer;color:var(--texto2)}
.msel-pop .acciones button:hover{color:var(--azul)}
#rangoPresets .rp{border:1px solid var(--borde);background:var(--fondo);color:var(--texto2);border-radius:7px;padding:6px 9px;font-size:11px;cursor:pointer;font-weight:600}
#rangoPresets .rp:hover{border-color:var(--azul);color:var(--azul)}
#rangoPresets .rp.act{background:var(--azul);color:#fff;border-color:var(--azul)}
.rangos{display:flex;gap:3px;flex-wrap:wrap}
.rangos button{border:1px solid var(--borde);background:var(--fondo);color:var(--texto2);border-radius:7px;padding:6px 9px;font-size:11px;cursor:pointer;font-weight:600}
.rangos button:hover{border-color:var(--azul);color:var(--azul)}
.rangos button.act{background:var(--azul);color:#fff;border-color:var(--azul)}
#chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{background:var(--azul);color:#fff;border-radius:99px;padding:3px 10px;font-size:11px;display:flex;gap:6px;align-items:center}
.chip i{font-style:normal;cursor:pointer;font-weight:700}

main{padding:16px 18px;max-width:1500px}
.grid{display:grid;gap:12px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.cols2{grid-template-columns:2fr 1fr}
.cols3{grid-template-columns:1fr 1fr 1fr}
.colsIg{grid-template-columns:1fr 1fr}
@media(max-width:1000px){.cols2,.cols3,.colsIg{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:14px 16px}
.card .lbl{font-size:9px;font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:.4px}
.card .val{font-size:21px;font-weight:600}
.card .sub{margin-top:8px;font-size:10px;color:var(--gris)}
.badge{padding:2px 6px;border-radius:6px;font-weight:600;font-size:10px}
.badge.up{background:#f0fae0;color:#5a9a1a}.badge.down{background:#FEF2F2;color:var(--rojo)}
[data-theme=dark] .badge.up{background:#1c2e10}.badge.down{}
h3{font-size:12px;font-weight:600;margin-bottom:10px}
h3 i{font-style:normal;color:var(--azul)}
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:11px;cursor:pointer;border-radius:6px;padding:1px 2px}
.bar-row:hover{background:var(--fondo)}
.bar-row .nm{width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .tr{flex:1;background:var(--fondo);border-radius:5px;height:10px;min-height:10px;overflow:hidden;position:relative}
.bar-row .fl{position:absolute;left:0;top:0;bottom:0;min-width:3px;border-radius:5px;background:var(--azul)}
.bar-row .vl{width:84px;text-align:right;font-weight:600;font-size:10.5px}
table{width:100%;border-collapse:collapse;font-size:11.5px}
th{text-align:left;color:var(--gris);font-size:10px;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--borde);position:sticky;top:0;background:var(--panel);cursor:default}
td{padding:6px 8px;border-bottom:1px solid var(--borde)}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--fondo)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.scroll{max-height:430px;overflow:auto}
.aging-stack{display:flex;height:26px;border-radius:8px;overflow:hidden;margin:6px 0 12px}
.aging-stack div{cursor:pointer}
.aging-leg{display:flex;flex-wrap:wrap;gap:10px;font-size:10px;color:var(--gris)}
.aging-leg .dot{display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:4px}
svg text{font-family:inherit}
.empty{color:var(--gris);font-size:11px;padding:8px 0}

/* mapa de proyecto */
.mapa{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.modcard{background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:16px;cursor:pointer;transition:.15s;position:relative}
.modcard:hover{border-color:var(--azul);transform:translateY(-2px)}
.modcard .ic{font-size:22px}
.modcard h4{font-size:13px;margin:8px 0 4px}
.modcard p{font-size:10.5px;color:var(--gris);line-height:1.5}
.modcard .tagOculto{position:absolute;top:10px;right:10px;font-size:9px;background:#FEF3C7;color:#B45309;border-radius:6px;padding:2px 6px;font-weight:700}
[data-theme=dark] .modcard .tagOculto{background:#3a2c0a}

/* matriz de accesos */
.matriz{overflow:auto}
.matriz table{font-size:11px;min-width:560px}
.matriz td,.matriz th{text-align:center}
.matriz td:first-child,.matriz th:first-child{text-align:left;font-weight:600}
.matriz input[type=checkbox]{accent-color:var(--azul);width:14px;height:14px;cursor:pointer}
.subnodo{color:var(--gris);padding-left:18px!important;font-weight:400!important}

/* modal */
.modal{position:fixed;inset:0;background:rgba(8,14,26,.6);display:none;align-items:flex-start;justify-content:center;z-index:260;padding:30px 14px;overflow:auto}
.modal.open{display:flex}
.modal .mbox{background:var(--panel);border-radius:16px;padding:22px;width:min(760px,100%);position:relative}
.modal .x{position:absolute;top:12px;right:16px;cursor:pointer;font-size:18px;color:var(--gris)}
#toast{position:fixed;bottom:18px;right:18px;pointer-events:none;background:var(--navy);color:var(--fondo);padding:10px 16px;border-radius:10px;font-size:12px;opacity:0;transition:.3s;z-index:300}
[data-theme=dark] #toast{background:#E2E8F0;color:#0B1220}
/* ── Avisos internos: burbuja abajo-derecha (apila varias; solo "OK, entendido", sin X) ── */
#avisosWrap{position:fixed;right:18px;bottom:18px;z-index:305;display:flex;flex-direction:column-reverse;gap:12px;max-width:min(360px,92vw);pointer-events:none}
.aviso-card{pointer-events:auto;background:var(--panel);border:1px solid var(--borde);border-radius:14px;box-shadow:0 12px 34px rgba(15,23,42,.28);overflow:hidden;animation:avSlide .28s cubic-bezier(.22,.61,.36,1)}
@keyframes avSlide{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.aviso-hd{display:flex;align-items:center;gap:8px;padding:9px 13px;background:var(--grad-azul,var(--azul));color:#fff;font-size:12px;font-weight:700}
.aviso-hd .meta{margin-left:auto;font-weight:400;opacity:.85;font-size:10.5px;white-space:nowrap}
.aviso-img{display:block;width:100%;max-height:340px;object-fit:contain;background:#0b1220}
.aviso-tx{padding:12px 14px;font-size:13.5px;color:var(--texto);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.aviso-ok{display:block;width:100%;border:0;border-top:1px solid var(--borde);background:var(--panel);color:var(--verde,#1a7f37);font-weight:700;font-size:13.5px;padding:12px;cursor:pointer;transition:background .15s ease}
.aviso-ok:hover{background:color-mix(in srgb,var(--verde,#1a7f37) 12%,transparent)}
.aviso-ok:active{transform:scale(.99)}
@media(max-width:560px){#avisosWrap{left:12px;right:12px;bottom:12px;max-width:none}}
/* ── Campanita 🔔 + buzón de notificaciones ── */
.campana{position:relative;flex:0 0 auto}
.campbtn{position:relative;border:1px solid var(--borde);background:var(--panel-2);color:var(--texto);border-radius:var(--r-1);padding:6px 10px;font-size:16px;line-height:1;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.campbtn:hover{border-color:var(--azul);box-shadow:var(--sh-2)}
.camp-badge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;background:var(--rojo,#e23b3b);color:#fff;border-radius:99px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--panel)}
.camppop{padding:0;min-width:460px;max-width:min(560px,94vw);max-height:72vh;overflow:hidden;display:none;flex-direction:column}
/* Centro de notificaciones (modal) */
.cnbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:2px 0 12px}
.cnchip{border:1px solid var(--borde);background:var(--panel);color:var(--texto2);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;transition:.15s}
.cnchip:hover{border-color:var(--azul)}
.cnchip.on{background:var(--azul);border-color:var(--azul);color:#fff}
.cntab{width:100%;border-collapse:collapse;font-size:12.5px}
.cntab th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--gris);padding:7px 8px;border-bottom:1px solid var(--borde);position:sticky;top:0;background:var(--panel);z-index:1}
.cntab td{padding:9px 8px;border-bottom:1px solid var(--borde);vertical-align:top}
.cntab tr:hover td{background:var(--panel-2)}
.camppop.open{display:flex}
/* La campana comparte la clase .msel-pop (que fija min-width:210/max-height:288 MÁS ABAJO en el CSS
   y por orden pisaba a .camppop). Con el id gana siempre: panel ancho para leer bien las menciones. */
#campanaPop{min-width:600px;max-width:min(720px,96vw);max-height:76vh}
#campanaPop.open{display:flex;flex-direction:column}
.camp-hd{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--borde);font-weight:700;font-size:13.5px}
.camp-hd .marcar{margin-left:auto;font-size:11px;font-weight:600;color:var(--azul);cursor:pointer}
.camp-hd .marcar:hover{text-decoration:underline}
.camp-list{overflow:auto}
.camp-item{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--borde);cursor:default;transition:background .12s}
.camp-item.clic{cursor:pointer}
.camp-item.clic:hover{background:var(--panel-2)}
.camp-item.nl{background:color-mix(in srgb,var(--azul) 6%,transparent)}
.camp-ico{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:14px}
.camp-ico.info{background:color-mix(in srgb,var(--azul) 16%,transparent)}
.camp-ico.exito{background:color-mix(in srgb,var(--verde,#1a7f37) 18%,transparent)}
.camp-ico.alerta{background:color-mix(in srgb,#e0a800 22%,transparent)}
.camp-ico.error{background:color-mix(in srgb,var(--rojo,#e23b3b) 18%,transparent)}
.camp-cuerpo{min-width:0;flex:1}
.camp-tit{font-size:13px;font-weight:600;color:var(--texto);display:flex;align-items:center;gap:6px}
.camp-tit .pt{width:7px;height:7px;border-radius:50%;background:var(--azul);flex:0 0 auto}
.camp-tx{font-size:12px;color:var(--texto2);margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-wrap;word-break:break-word}
.camp-thumb{width:100%;max-height:120px;object-fit:cover;border-radius:8px;margin-top:6px}
.camp-meta{font-size:10.5px;color:var(--gris);margin-top:3px}
.camp-empty{padding:34px 16px;text-align:center;color:var(--texto2);font-size:13px}
@media(max-width:760px){#campanaPop,.camppop{position:fixed;left:8px;right:8px;top:56px;min-width:0;max-width:none}}
/* ── Hilo de comentarios y menciones sobre documentos ── */
.hilo{margin-top:6px}
.hilo-list{display:flex;flex-direction:column;gap:9px;max-height:320px;overflow:auto;padding:2px 2px 8px}
.hcom{display:flex;gap:9px;padding:9px 11px;border:1px solid var(--borde);border-radius:10px;background:var(--panel-2)}
.hcom.priv{border-style:dashed}
.hcom.abierta{border-left:3px solid #e0a800}
.hcom.enproceso{border-left:3px solid var(--azul)}
.hcom.resuelta{opacity:.72}
.hcom-av{width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;background:var(--azul)}
.hcom-b{min-width:0;flex:1}
.hcom-hd{display:flex;align-items:center;gap:7px;font-size:12px;flex-wrap:wrap}
.hcom-hd .who{font-weight:700;color:var(--texto)}
.hcom-hd .when{color:var(--gris);font-size:11px}
.hcom-hd .tag{margin-left:auto;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:99px}
.hcom-hd .tag.ab{background:color-mix(in srgb,#e0a800 22%,transparent);color:#8a6d00}
.hcom-hd .tag.pr{background:color-mix(in srgb,var(--azul) 18%,transparent);color:var(--azul)}
.hcom-hd .tag.re{background:color-mix(in srgb,var(--verde,#1a7f37) 18%,transparent);color:var(--verde,#1a7f37)}
.hcom-tx{font-size:13px;color:var(--texto);margin-top:3px;white-space:pre-wrap;word-break:break-word;line-height:1.4}
.hcom-tx .m{color:var(--azul);font-weight:700}
.hcom-ac{display:flex;gap:12px;margin-top:6px}
.hcom-ac button{border:none;background:none;color:var(--azul);font-size:11.5px;font-weight:600;cursor:pointer;padding:0}
.hcom-ac button:hover{text-decoration:underline}
.hcom-ac button.del{color:var(--gris)}
.hilo-empty{padding:22px 10px;text-align:center;color:var(--texto2);font-size:12.5px}
.hcompose{margin-top:9px;border:1px solid var(--borde);border-radius:12px;background:var(--panel);padding:8px 10px;position:relative}
.hcompose textarea{width:100%;border:none;background:none;color:var(--texto);font:inherit;font-size:13px;resize:vertical;min-height:44px;outline:none}
.hcompose-bar{display:flex;align-items:center;gap:10px;margin-top:6px}
.hcompose-bar .at{border:1px solid var(--borde);background:var(--panel-2);color:var(--texto);border-radius:8px;width:30px;height:27px;cursor:pointer;font-weight:800;font-size:14px}
.hcompose-bar .at:hover{border-color:var(--azul)}
.hcompose-bar .priv{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--texto2);cursor:pointer;user-select:none}
.hcompose-bar .send{margin-left:auto;border:none;background:var(--azul);color:#fff;border-radius:8px;padding:7px 16px;font-weight:700;font-size:12.5px;cursor:pointer}
.hcompose-bar .send:disabled{opacity:.5;cursor:default}
.hcompose-hint{font-size:10.5px;color:var(--gris);margin-top:4px}
.menc-dd{position:absolute;z-index:60;background:var(--panel);border:1px solid var(--borde);border-radius:10px;box-shadow:var(--sh-2);max-height:210px;overflow:auto;min-width:230px;display:none}
.menc-dd.open{display:block}
.menc-dd .it{display:flex;flex-direction:column;padding:7px 11px;cursor:pointer;border-bottom:1px solid var(--borde)}
.menc-dd .it:last-child{border-bottom:none}
.menc-dd .it:hover,.menc-dd .it.sel{background:var(--panel-2)}
.menc-dd .it b{font-size:12.5px;color:var(--azul)}
.menc-dd .it small{font-size:10.5px;color:var(--gris)}
.pin-seg{color:#e0a800;cursor:help}
#toast.show{opacity:1}
.loading{opacity:.45;pointer-events:none}
.hidden{display:none!important}
#overlay{position:fixed;inset:0;background:#0F172A;display:flex;align-items:center;justify-content:center;z-index:500}
#overlay .panel{background:#fff;border-radius:16px;padding:28px;width:360px;color:#0F172A}
#overlay h2{font-size:16px;margin-bottom:6px}
#overlay p{font-size:12px;color:#64748B;margin-bottom:14px}
#overlay input{width:100%;border:1px solid #E2E8F0;border-radius:8px;padding:10px;font-size:13px;margin-bottom:12px}
textarea.cfg{width:100%;border:1px solid var(--borde);border-radius:8px;padding:8px;font-size:12px;font-family:monospace;min-height:64px;margin-bottom:10px;background:var(--fondo);color:var(--texto)}

/* ───── estilo PBI: jerarquías, degradados y selección ───── */
.kpi{position:relative;overflow:hidden;padding-top:16px}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--kg,linear-gradient(90deg,var(--azul),var(--azul-2,#8fd0f5)))}
.kpi .tit{font-size:13.5px;font-weight:700}
.kpi .des{font-size:10px;color:var(--gris);margin:2px 0 10px}
.kpi .big{font-size:24px;font-weight:700;letter-spacing:-.5px}
.kpi .ico{position:absolute;top:16px;right:14px;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--fondo)}
.kpi .chips{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.kpi .chips span{background:var(--fondo);border-radius:6px;padding:3px 8px;font-size:10px;color:var(--texto2)}
.kpi .chips b{color:var(--texto)}
.dpill{font-size:10.5px;font-weight:700;border-radius:8px;padding:4px 10px;white-space:nowrap}
.dpill.neg{background:#FEF2F2;color:#EF4444}
.dpill.pos{background:#f0fae0;color:#5a9a1a}
[data-theme=dark] .dpill.neg{background:#371316}
[data-theme=dark] .dpill.pos{background:#1c2e10}
.leyenda{display:flex;gap:14px;font-size:10.5px;color:var(--texto2);flex-wrap:wrap;margin:2px 0 6px}
.leyenda .dot{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}
.rk{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;cursor:pointer;border:1px solid transparent;margin-bottom:2px}
.rk:hover{background:var(--fondo)}
.rk.sel{background:linear-gradient(90deg,rgba(120,200,40,.16),transparent);border-color:var(--verde)}
.rk .pos{font-size:11px;font-weight:700;color:var(--gris);width:20px;flex-shrink:0}
.rk .mid{flex:1;min-width:0}
.rk .nom{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk .barra{display:block;width:100%;height:5px;min-height:5px;border-radius:3px;background:var(--fondo);margin-top:4px;overflow:hidden;position:relative}
.rk .barra i{position:absolute;left:0;top:0;bottom:0;min-width:3px;border-radius:3px;background:linear-gradient(90deg,var(--verde),#c2e567)}
.rk .pctt{font-size:8.5px;color:var(--gris);margin-top:2px}
.rk .valr{font-size:11.5px;font-weight:700;white-space:nowrap}
.tipoPill{display:inline-block;background:#f0fae0;color:#446e15;border-radius:99px;padding:2px 8px;font-size:9.5px;font-weight:600;white-space:nowrap}
.tipoPill::before{content:'●';font-size:7px;margin-right:4px;color:var(--verde);vertical-align:1px}
[data-theme=dark] .tipoPill{background:#1c2e10;color:#a4d96a}
.tipoPill.ncp{background:#FEF2F2;color:#B91C1C}
.tipoPill.ncp::before{color:var(--rojo)}
[data-theme=dark] .tipoPill.ncp{background:#371316;color:#fca5a5}
tr.ncrow td{background:rgba(239,68,68,.05)}
tr.ncrow .num,tr.ncrow b{color:#B91C1C}
tfoot td{background:linear-gradient(90deg,rgba(120,200,40,.14),transparent);font-weight:700;border-top:2px solid var(--verde)}
/* matrices mes a mes (cliente×mes, producto×mes) */
.matrizMes{overflow:auto;max-height:430px}
.matrizMes table{min-width:720px}
.matrizMes th:first-child,.matrizMes td:first-child{position:sticky;left:0;background:var(--panel);z-index:2;max-width:190px;min-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.matrizMes tfoot td{background:var(--panel);box-shadow:inset 0 2px 0 var(--verde)}
/* ───── Visor formal de factura ───── */
.mbox-fact{width:min(840px,100%)!important}
.mbox-detalle{width:min(940px,100%)!important}
.mbox-guia{width:min(1500px,97%)!important}
.mbox-preview{width:min(900px,96%)!important}
.mbox-fact .x{color:#fff;z-index:3;opacity:.85}
.mbox-fact .x:hover{opacity:1}
.factHead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:-22px -22px 16px;padding:20px 24px;border-radius:16px 16px 0 0;background:linear-gradient(120deg,#0F172A,#1e3a5f 55%,#2d7fb8);color:#fff}
.factHead .empresa{font-size:18px;font-weight:700;letter-spacing:.3px}
.factHead .empresa-sub{font-size:10.5px;color:#cbd5e1;margin-top:3px;letter-spacing:.4px}
.factHead .factNum{text-align:right;flex-shrink:0}
.factHead .factNum .lbl{font-size:9px;letter-spacing:2px;color:#9fb6cf}
.factHead .factNum .num{font-size:21px;font-weight:700;line-height:1.2}
.factMeta{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;font-size:12px;color:var(--texto2);margin-bottom:16px}
.factMeta b{color:var(--texto)}
.factMeta>div{line-height:1.9}
.metalbl{display:inline-block;font-size:9px;letter-spacing:1px;color:var(--gris);font-weight:700;min-width:58px}
.factTotals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.ttile{border-radius:12px;padding:12px 16px;border:1px solid var(--borde)}
.ttile .l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.ttile .v{font-size:23px;font-weight:700;margin-top:2px}
.ttile.total{background:linear-gradient(90deg,rgba(72,168,224,.10),transparent)}
.ttile.total .l{color:var(--azul)}
.ttile.saldo .l{color:var(--rojo)}
.factSec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--navy);margin:16px 0 7px;border-bottom:1px solid var(--borde);padding-bottom:5px}
.paybadge{display:inline-block;background:#ecf7c8;color:#446e15;border-radius:6px;padding:1px 8px;font-size:11px;font-weight:600}
[data-theme=dark] .paybadge{background:#1c2e10;color:#a4d96a}
@media(max-width:680px){.factMeta,.factTotals{grid-template-columns:1fr}}
.cardHead{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cardHead h3{margin:0}
.cardHead .sub{font-size:10px;color:var(--gris);display:block;margin-top:2px;font-weight:400}
.cardHead .spacer{flex:1}

/* ───── layout editable: rejilla de 6 columnas + modo diseño ───── */
.gridLayout{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;align-items:start;margin-top:12px}
.gridLayout>.card{grid-column:span var(--sp,3);position:relative}
@media(max-width:1000px){.gridLayout>.card{grid-column:1/-1!important}}
.card.editing{outline:2px dashed var(--azul);outline-offset:2px;cursor:grab;user-select:none;touch-action:none}
.card.editing.dragging{opacity:.45;cursor:grabbing;outline-style:solid}
.card.editing>*:not(.cardTools):not(.rsz){pointer-events:none}
.cardTools{position:absolute;top:-13px;right:10px;display:flex;gap:2px;z-index:6;background:var(--panel);border:1px solid var(--azul);border-radius:9px;padding:2px 4px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.cardTools button{border:none;background:none;cursor:pointer;font-size:11.5px;color:var(--texto2);padding:2px 6px;border-radius:5px;line-height:1.4}
.cardTools button:hover{background:var(--fondo);color:var(--azul)}
.cardTools .mover{cursor:grab;color:var(--azul);font-weight:700}
.rsz{position:absolute;right:0;bottom:0;width:22px;height:22px;cursor:nwse-resize;z-index:7;color:var(--azul);font-size:13px;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 3px 1px 0;touch-action:none}
.rsz:hover{transform:scale(1.25)}
.hS .scroll{max-height:180px}.hM .scroll{max-height:320px}.hL .scroll{max-height:540px}
.hS svg{max-height:140px}.hM svg{max-height:210px}.hL svg{max-height:300px}
.rkwrap{overflow:auto}  /* base: cualquier rkwrap con max-height (inline o por clase) hace scroll, no se desborda de la tarjeta */
.hS .rkwrap{max-height:180px;overflow:auto}.hM .rkwrap{max-height:320px;overflow:auto}.hL .rkwrap{max-height:540px;overflow:auto}
#editBar{background:linear-gradient(90deg,rgba(72,168,224,.12),transparent);border:1px solid var(--azul);border-radius:12px;padding:8px 14px;font-size:11.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
#editBar b{color:var(--azul)}

/* ───── Pedidos: pestañas estilo navegador ───── */
.pedtabs{display:flex;gap:4px;align-items:center;flex-wrap:wrap;border-bottom:2px solid var(--borde);margin-bottom:12px;padding-bottom:0}
.pedtab{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px 10px 0 0;background:var(--fondo);border:1px solid var(--borde);border-bottom:none;cursor:pointer;font-size:12.5px;color:var(--texto2);position:relative;top:2px;max-width:230px}
.pedtab.act{background:var(--panel);color:var(--azul);font-weight:600;border-color:var(--azul);box-shadow:0 -2px 8px rgba(72,168,224,.08)}
.pedtab .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pedtab .x{font-weight:700;opacity:.5;border-radius:4px;padding:0 4px}
.pedtab .x:hover{opacity:1;background:var(--fondo);color:var(--rojo)}
.pedtab .badge{font-size:9px;background:var(--azul);color:#fff;border-radius:99px;padding:1px 6px}
.pedtab-add{padding:8px 12px;border:1px dashed var(--azul);border-radius:10px;background:none;color:var(--azul);cursor:pointer;font-size:12.5px;font-weight:600}
.pedtab-add:hover{background:var(--fondo)}
.pedtools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.pedtools input[type=search],.pedtools input.busca{border:1px solid var(--borde);border-radius:8px;padding:6px 10px;font-size:12px;background:var(--fondo);color:var(--texto);min-width:180px}
.pedtbl input.cant{width:64px;border:1px solid var(--borde);border-radius:7px;padding:5px 6px;font-size:12px;text-align:right;background:var(--panel);color:var(--texto);font-weight:700}
.pedtbl input.cant:focus{border-color:var(--azul);outline:none}
.pedtbl input.cant.sug{color:var(--azul)}
.pedtbl tr.urge td{background:rgba(239,68,68,.05)}
.abcpill{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;border-radius:5px;font-size:10px;font-weight:700}
.abc-A{background:#fee2e2;color:#b91c1c}.abc-B{background:#fef3c7;color:#b45309}.abc-C{background:#e2e8f0;color:#475569}
[data-theme=dark] .abc-A{background:#371316;color:#fca5a5}[data-theme=dark] .abc-B{background:#3a2c0a;color:#fcd34d}[data-theme=dark] .abc-C{background:#1e2a40;color:#94a3b8}
.modalCentros{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:50vh;overflow:auto;margin-top:10px}
.ccpick{border:1px solid var(--borde);border-radius:10px;padding:10px;cursor:pointer;font-size:12px}
.ccpick:hover{border-color:var(--azul);background:var(--fondo)}
.ccpick.no{opacity:.5}
.ccpick b{display:block;font-size:12.5px}
.ccpick small{color:var(--gris);font-size:10px}

/* responsive */
#scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55}
@media(max-width:880px){
  aside{transform:translateX(-100%)}
  aside.open{transform:none}
  #scrim.open{display:block}
  .content{margin-left:0}
  #burger{display:block}
  .searchbox input{width:150px}
}


/* ════════════════════════════════════════════════════════════════
   RE-SKIN BioStore  ·  sistema glassmorphism / dark-first
   Generado por flota de 28 agentes (workflow w2qeb4q3f)
   Autor: Israel Hernandez Aguirre
   Capa de override: va al final del <style>, gana por orden de fuente.
   ════════════════════════════════════════════════════════════════ */
:root {
  --azul: #48A8E0;
  --azul-h: #2E8BC4;
  --verde: #78C828;
  --verde-h: #5FA31C;
  --navy: #0F172A;
  --rojo: #E0483F;
  --ambar: #F0A828;

  --fondo: #F4F7FB;
  --panel: #FFFFFF;
  --panel-2: #EEF3F9;

  --texto: #0F172A;
  --texto2: #3E4C63;
  --gris: #6B7A90;
  --borde: #DCE4EF;

  --side: #0F172A;
  --side-texto: #C7D2E0;
  --side-act: #48A8E0;

  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur: 10px;   /* bajado de 16 a 10: el costo del backdrop-filter escala con el radio */

  --grad-azul: linear-gradient(135deg, #48A8E0 0%, #2E8BC4 100%);
  --grad-verde: linear-gradient(135deg, #78C828 0%, #5FA31C 100%);
  --grad-rojo: linear-gradient(135deg, #E0483F 0%, #B5332B 100%);
  --grad-navy: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  --grad-hero: linear-gradient(120deg, #0F172A 0%, #1B3A5C 45%, #48A8E0 100%);

  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --sh-2: 0 4px 12px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.06);
  --sh-3: 0 12px 32px rgba(15, 23, 42, 0.16), 0 4px 8px rgba(15, 23, 42, 0.08);
  --sh-glow: 0 0 0 1px rgba(72, 168, 224, 0.30), 0 6px 24px rgba(72, 168, 224, 0.35);

  --r-1: 8px;
  --r-2: 12px;
  --r-3: 18px;
  --r-pill: 999px;

  --ff: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-display: 3rem;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
}

[data-theme="dark"] {
  --azul: #5FB6EC;
  --azul-h: #84C8F2;
  --verde: #8DD93E;
  --verde-h: #A6E661;
  --navy: #0F172A;
  --rojo: #F0665E;
  --ambar: #F6BB4D;

  --fondo: #0B1220;
  --panel: #141E32;
  --panel-2: #1B2840;

  --texto: #EEF3FA;
  --texto2: #B5C2D6;
  --gris: #8094AD;
  --borde: #26344E;

  --side: #0A1020;
  --side-texto: #9FB1C9;
  --side-act: #5FB6EC;

  --glass-bg: rgba(20, 30, 50, 0.55);
  --glass-border: rgba(120, 150, 190, 0.18);
  --glass-blur: 11px;   /* bajado de 18 a 11 (modo oscuro): backdrop-filter más barato de repintar */

  --grad-azul: linear-gradient(135deg, #5FB6EC 0%, #3A8FCB 100%);
  --grad-verde: linear-gradient(135deg, #8DD93E 0%, #5FA31C 100%);
  --grad-rojo: linear-gradient(135deg, #F0665E 0%, #C13A32 100%);
  --grad-navy: linear-gradient(135deg, #1B2840 0%, #0A1020 100%);
  --grad-hero: linear-gradient(120deg, #0A1020 0%, #16304C 45%, #2E8BC4 100%);

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.45);
  --sh-2: 0 4px 14px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35);
  --sh-3: 0 14px 38px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.40);
  --sh-glow: 0 0 0 1px rgba(95, 182, 236, 0.40), 0 6px 28px rgba(95, 182, 236, 0.45);
}

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-radius: var(--r-3);
  box-shadow: var(--sh-2);
  transform: translateZ(0);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--panel); }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ===== BASE ===== */
/* ═══════════ BASE · html / body / tipografía / scrollbars / selección ═══════════ */
*{box-sizing:border-box;margin:0;padding:0}

html{
  font-family:var(--ff,'Poppins','Segoe UI',system-ui,sans-serif);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scrollbar-width:thin;                       /* Firefox: barra fina */
  scrollbar-color:var(--borde) transparent;   /* thumb / track */
  scroll-behavior:smooth;
}

body{
  font-family:var(--ff,'Poppins','Segoe UI',system-ui,sans-serif);
  background:var(--fondo);
  color:var(--texto);
  font-size:14px;
  line-height:1.5;
  font-weight:var(--fw-regular,400);
  letter-spacing:.1px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'kern' 1,'liga' 1;
  transition:background .2s ease,color .2s ease;   /* suaviza el cambio claro↔oscuro */
}

/* ── Scrollbars finas y modernas (WebKit/Blink) ── */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--borde);
  border-radius:var(--r-pill,999px);
  border:2px solid transparent;
  background-clip:padding-box;
  transition:background .18s ease;
}
::-webkit-scrollbar-thumb:hover{
  background:var(--gris);
  background-clip:padding-box;
}
::-webkit-scrollbar-corner{background:transparent}

/* ── Selección de texto coherente con la marca ── */
::selection{
  background:color-mix(in srgb,var(--azul) 28%,transparent);
  color:var(--texto);
}
::-moz-selection{
  background:color-mix(in srgb,var(--azul) 28%,transparent);
  color:var(--texto);
}

/* ── Respeto a usuarios sensibles al movimiento ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}

/* ===== SIDEBAR ===== */
/* ============ SIDEBAR — panel de vidrio oscuro ============ */
aside{
  width:248px;
  background:var(--glass-bg);
  border-right:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  color:var(--side-texto);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0;bottom:0;left:0;
  z-index:60;
  box-shadow:var(--sh-2);
  transform:translateZ(0);
  transition:transform .25s ease,width .22s ease;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  aside{background:var(--side);}
}
@media (prefers-reduced-transparency:reduce){
  aside{background:var(--side);backdrop-filter:none;-webkit-backdrop-filter:none;}
}

/* ---- Logo ---- */
aside .logo{
  padding:var(--sp-3) 18px 12px;
  font-weight:var(--fw-bold);
  font-size:var(--fs-sm);
  color:var(--texto);
  letter-spacing:.2px;
}
aside .logo span{color:var(--azul);}
aside .logo small{
  display:block;
  font-weight:var(--fw-regular);
  font-size:10px;
  color:var(--gris);
  margin-top:2px;
}

/* ---- View-as ---- */
.viewas{margin:var(--sp-1) 14px 10px;font-size:10px;}
.viewas label{
  color:var(--gris);
  text-transform:uppercase;
  font-weight:var(--fw-semibold);
  letter-spacing:.5px;
  display:block;
  margin-bottom:var(--sp-1);
}
.viewas select{
  width:100%;
  background:var(--panel-2);
  color:var(--texto);
  border:1px solid var(--borde);
  border-radius:var(--r-1);
  padding:6px 8px;
  font-size:var(--fs-xs);
  font-family:var(--ff);
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.viewas select:hover{border-color:var(--azul);}
.viewas select:focus-visible{
  outline:none;
  border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(72,168,224,.25);
}

/* ---- Árbol de navegación ---- */
nav.tree{flex:1;overflow-y:auto;padding:var(--sp-1) 10px 20px;}
.nodo{margin-bottom:2px;}
.nodo>.nlink{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border-radius:var(--r-2);
  cursor:pointer;
  font-size:var(--fs-sm);
  color:var(--side-texto);
  user-select:none;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .15s ease;
}
.nodo>.nlink:hover{
  background:rgba(255,255,255,.06);
  color:var(--texto);
}
.nodo>.nlink.act{
  background:var(--grad-azul);
  color:#fff;
  font-weight:var(--fw-semibold);
  box-shadow:var(--sh-glow);
}
.nodo>.nlink.act .caret,
.nodo>.nlink.act .lock{color:#fff;}

.nodo .caret{
  margin-left:auto;
  font-size:9px;
  transition:transform .2s ease;
  color:var(--gris);
}
.nodo.open>.nlink .caret{transform:rotate(90deg);}

/* ---- Hijos ---- */
.hijos{
  display:none;
  margin:1px 0 var(--sp-1) 26px;
  border-left:1px solid var(--borde);
  padding-left:var(--sp-2);
}
.nodo.open>.hijos{display:block;}
.hijos .nlink{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border-radius:var(--r-1);
  cursor:pointer;
  font-size:var(--fs-xs);
  color:var(--gris);
  transition:background .18s ease,color .18s ease;
}
.hijos .nlink:hover{
  background:rgba(255,255,255,.06);
  color:var(--texto);
}
.hijos .nlink.act{
  color:var(--azul);
  font-weight:var(--fw-semibold);
}

/* ---- Lock + pie ---- */
.lock{font-size:9px;margin-left:auto;opacity:.8;}
aside .pie{
  padding:12px var(--sp-3);
  font-size:10px;
  color:var(--gris);
  border-top:1px solid var(--glass-border);
}

/* ---- Modo riel ---- */
body.rail aside{width:66px;}
body.rail .content{margin-left:66px;}
body.rail aside .logo{padding:var(--sp-3) 0 var(--sp-2);text-align:center;font-size:17px;}
body.rail aside .logo span{display:inline;}
body.rail aside .logo .lg-txt,
body.rail aside .logo small,
body.rail .viewas,
body.rail aside .pie{display:none;}
body.rail .nodo>.nlink{justify-content:center;padding:11px 0;}
body.rail .nodo>.nlink>span:nth-child(2),
body.rail .nodo .caret{display:none;}
body.rail .hijos{display:none!important;}

/* ============================================================
   MENÚ REDISEÑADO (jul 2026) — POS primario + accesos frecuentes +
   4 super-categorías plegables (una abierta a la vez) + estado arriba +
   barra inferior móvil. Reusa .nodo/.nlink para los módulos (los id de
   nodo NO cambian: son llaves de permiso). Ver docs/MOCKUP_MENU_NUEVO.html
   ============================================================ */
/* Estado del sistema (reemplaza el pie de la barra) */
.estado-chip{margin:2px 12px 10px;display:flex;align-items:center;gap:7px;width:calc(100% - 24px);
  font-size:10.5px;color:var(--side-texto);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-pill,999px);padding:6px 11px;cursor:pointer;overflow:hidden;transition:background .18s ease}
.estado-chip:hover{background:rgba(255,255,255,.12)}
.estado-chip .edot{width:7px;height:7px;border-radius:50%;background:var(--verde);flex:0 0 7px;box-shadow:0 0 0 3px rgba(11,125,84,.22)}
.estado-chip.pausado .edot{background:var(--gris);box-shadow:none}
.estado-chip .est-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.estado-chip .est-date{color:var(--gris);font-weight:600;flex:0 0 auto}
body.rail .estado-chip{display:none}

/* Botón POS primario */
.pos-btn{margin:2px 12px 12px;display:flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(135deg,var(--verde),var(--verde-h,#0a6a48));color:#fff;font-weight:800;font-size:14px;letter-spacing:.2px;
  border:none;padding:12px;border-radius:12px;box-shadow:0 8px 20px rgba(11,125,84,.30);cursor:pointer;
  transition:transform .15s ease,filter .15s ease}
.pos-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.pos-btn.act{outline:2px solid rgba(255,255,255,.85);outline-offset:-4px}
.pos-btn .ic{font-size:17px;line-height:1}
body.rail .pos-btn{margin:2px 8px 10px;padding:12px 0;gap:0}
body.rail .pos-btn .pos-lbl{display:none}
body.rail .pos-btn .ic{font-size:20px}

/* Accesos rápidos (Inicio + uso frecuente) */
.qitem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-2,9px);cursor:pointer;
  font-size:var(--fs-sm,13px);color:var(--side-texto);user-select:none;transition:background .18s ease,color .18s ease}
.qitem .qico{width:19px;text-align:center;font-size:15px;color:var(--gris);flex:0 0 19px}
.qitem:hover{background:rgba(255,255,255,.06);color:var(--texto)}
.qitem.act{background:var(--azul);color:#fff;font-weight:var(--fw-semibold,600)}
.qitem.act .qico{color:#fff}
body.rail .qitem{justify-content:center;padding:10px 0}
body.rail .qitem .qlbl{display:none}

/* Rótulos de sección */
.rotlbl{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);
  opacity:.85;padding:12px 12px 5px;user-select:none;pointer-events:none}
body.rail .rotlbl{display:none}

/* Super-categorías plegables (una abierta a la vez) */
.supercat{margin-bottom:1px}
.superhead{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-2,9px);cursor:pointer;
  font-size:var(--fs-sm,13px);font-weight:var(--fw-semibold,600);color:var(--side-texto);user-select:none;
  transition:background .18s ease,color .18s ease}
.superhead .sico{width:19px;text-align:center;font-size:15px;color:var(--gris);flex:0 0 19px;transition:color .18s ease}
.superhead:hover{background:rgba(255,255,255,.06);color:var(--texto)}
.superhead .schev{margin-left:auto;color:var(--gris);font-size:10px;transition:transform .2s ease}
.supercat.open>.superhead{color:var(--texto)}
.supercat.open>.superhead .sico{color:var(--azul)}
.supercat.open>.superhead .schev{transform:rotate(90deg);color:var(--azul)}
.supersub{display:none;padding:2px 0 6px 6px;margin:1px 0 2px 6px;border-left:1px solid rgba(255,255,255,.08)}
.supercat.open>.supersub{display:block;animation:fadeUp .18s ease both}
body.rail .superhead .slbl,body.rail .superhead .schev{display:none}
body.rail .superhead{justify-content:center;padding:10px 0}
body.rail .supersub{display:none!important}

/* Barra inferior móvil (Inicio · Facturar · CRM · Ventas · Más) */
.mobnav{display:none}
@media(max-width:880px){
  .mobnav{display:flex;position:fixed;left:0;right:0;bottom:0;height:60px;z-index:70;
    background:var(--panel);border-top:1px solid var(--borde);box-shadow:0 -4px 20px rgba(0,0,0,.10)}
  .mobnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;
    font-size:10px;font-weight:600;color:var(--gris);cursor:pointer;text-decoration:none;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
  .mobnav a .mico{font-size:19px;line-height:1}
  .mobnav a.act{color:var(--azul)}
  .mobnav a.pos{color:var(--verde)}
  .mobnav a:active{transform:scale(.94)}
  .content{padding-bottom:66px}          /* que la barra no tape el contenido */
}

/* ===== HEADER ===== */
header{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(var(--glass-blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);padding:10px 18px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:250;flex-wrap:nowrap;box-shadow:var(--sh-1);transform:translateZ(0)}
.hdr-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.content>header>h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header{background:var(--panel)}}
@media (prefers-reduced-transparency:reduce){header{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}}
#burger{border:none;background:none;font-size:19px;cursor:pointer;color:var(--texto2);border-radius:var(--r-1);padding:4px 8px;transition:background .18s ease,color .18s ease,transform .18s ease}
#burger:hover{background:var(--panel-2);color:var(--azul)}
#burger:active{transform:scale(.94)}
/* El botón de plegar/expandir vive DENTRO de la barra lateral (arriba). En escritorio el
   ☰ del header se oculta; solo reaparece en móvil, donde la barra está fuera de pantalla
   y es la única forma de abrirla. */
@media(min-width:881px){ #burger{display:none} }
.side-top{display:flex;align-items:flex-start;justify-content:flex-start;gap:6px}
.side-toggle{flex:0 0 auto;order:-1;border:none;background:none;color:var(--side-texto,#cfd8e6);font-size:18px;line-height:1;cursor:pointer;border-radius:9px;padding:7px 9px;margin:14px 4px 0 12px;transition:background .18s ease,color .18s ease,transform .12s ease}
.side-toggle:hover{background:rgba(255,255,255,.10);color:#fff}
.side-toggle:active{transform:scale(.92)}
body.rail .side-top{flex-direction:column;align-items:center;gap:0}
body.rail .side-toggle{margin:10px 0 2px;order:-1}   /* en riel: el ☰ arriba, centrado, y el ·BI debajo */
header h2,#pageTitle{font-size:15px;font-weight:var(--fw-semibold);color:var(--texto);flex-shrink:0;letter-spacing:-.01em}
.spacer{flex:1}

/* ===== SEARCH ===== */
.searchbox{position:relative;flex:0 1 240px;min-width:44px}
.searchbox input{
  border:1px solid var(--borde);
  background:var(--panel-2);
  border-radius:var(--r-pill);
  padding:8px 16px 8px 38px;
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  width:100%;box-sizing:border-box;
  color:var(--texto);
  font-family:var(--ff);
  box-shadow:var(--sh-1) inset;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, width .25s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236B7A90' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:14px center;
}
.searchbox input::placeholder{color:var(--gris);font-weight:var(--fw-regular)}
.searchbox input:hover{
  border-color:var(--azul);
  background-color:var(--panel);
}
.searchbox input:focus{
  outline:none;
  border-color:var(--azul);
  background-color:var(--panel);
  box-shadow:var(--sh-glow);
  width:260px;
}
.sugs{
  position:absolute;
  top:calc(100% + 6px);
  left:0;right:0;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  border-radius:var(--r-2);
  box-shadow:var(--sh-3);
  max-height:260px;
  overflow:auto;
  display:none;
  z-index:80;
  padding:6px;
  transform:translateZ(0);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sugs{background:var(--panel)}
}
@media (prefers-reduced-transparency: reduce) {
  .sugs{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.sugs div{
  padding:9px 12px;
  font-size:var(--fs-sm);
  color:var(--texto);
  cursor:pointer;
  border-radius:var(--r-1);
  transition:background .15s ease, color .15s ease;
}
.sugs div:hover{
  background:var(--azul);
  color:#fff;
}
@media(max-width:980px){
  .searchbox input{width:150px}
  .searchbox input:focus{width:170px}
}

/* ===== PILLS ===== */
.pill{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-family:var(--ff);
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  line-height:1;
  color:var(--texto2);
  background:var(--panel-2);
  border:1px solid var(--borde);
  padding:5px 12px;
  border-radius:var(--r-pill);
  white-space:nowrap;
  box-shadow:var(--sh-1);
  transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.pill:hover{
  border-color:var(--azul);
  color:var(--texto);
  box-shadow:var(--sh-2);
}
.pill b{
  color:var(--verde);
  font-weight:var(--fw-semibold);
}

/* LIVE: punto latiente sutil + estado conectado */
#liveStatus{
  position:relative;
  padding-left:24px;
  color:var(--texto2);
  background:var(--panel-2);
  border-color:var(--borde);
}
#liveStatus::before{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  width:7px;
  height:7px;
  margin-top:-3.5px;
  border-radius:var(--r-pill);
  background:var(--verde);
  box-shadow:0 0 0 0 rgba(120,200,40,.55);
  animation:pillPulse 2s ease-out infinite;
}
#liveStatus b{ color:var(--verde); }

@keyframes pillPulse{
  0%{ box-shadow:0 0 0 0 rgba(120,200,40,.50); }
  70%{ box-shadow:0 0 0 6px rgba(120,200,40,0); }
  100%{ box-shadow:0 0 0 0 rgba(120,200,40,0); }
}

@media (prefers-reduced-motion: reduce){
  #liveStatus::before{ animation:none; }
}

/* ===== HEADER: herramientas agrupadas + menú de perfil (patrón Gmail/HubSpot) ===== */
.hdr-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hdr-tools::after{content:"";width:1px;align-self:stretch;background:var(--borde);margin:3px 4px}
.profile{position:relative;flex:0 0 auto}
.profbtn{display:flex;align-items:center;gap:8px;max-width:200px;border:1px solid var(--borde);background:var(--panel-2);border-radius:var(--r-pill);padding:5px 11px 5px 6px;cursor:pointer;color:var(--texto);transition:border-color .18s ease,box-shadow .18s ease}
.profbtn:hover{border-color:var(--azul);box-shadow:var(--sh-2)}
.profbtn.warn{border-color:#e0a800;box-shadow:0 0 0 2px color-mix(in srgb,#e0a800 22%,transparent)}
.prof-av{width:27px;height:27px;border-radius:50%;background:linear-gradient(135deg,var(--azul),var(--navy,#1F3864));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex:0 0 auto}
.prof-av.lg{width:40px;height:40px;font-size:17px}
.prof-meta{display:flex;flex-direction:column;line-height:1.18;min-width:0}
.prof-meta b{font-size:12.5px;font-weight:var(--fw-semibold);color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:128px}
.prof-meta small{font-size:10px;color:var(--texto2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:128px}
.profile .caret{font-size:9px;color:var(--texto2);flex:0 0 auto}
.profpop{padding:6px;min-width:250px}
.prof-head{display:flex;gap:11px;align-items:center;padding:8px 9px 11px}
.prof-head b{font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.prof-head small{font-size:11px;color:var(--texto2)}
.prof-viewas{padding:4px 9px 8px}
.prof-viewas label{display:block;font-size:10.5px;color:var(--texto2);margin-bottom:4px;font-weight:600}
.prof-viewas label small{font-weight:400;opacity:.8}
.prof-viewas select{width:100%;padding:7px 9px;border:1px solid var(--borde);border-radius:8px;background:var(--panel);color:var(--texto);font-size:12px}
.prof-sep{height:1px;background:var(--borde);margin:5px 2px}
.prof-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;padding:9px 11px;border-radius:8px;cursor:pointer;color:var(--texto);font-size:13px;font-family:inherit}
.prof-item:hover{background:var(--panel-2)}
.prof-item.danger{color:var(--rojo)}
.prof-item.danger:hover{background:color-mix(in srgb,var(--rojo) 10%,transparent)}
.clave-warn{color:#b06a00;font-size:11px;margin-left:auto;font-weight:600}
@media(max-width:880px){
  .hdr-tools .btn-lbl{display:none}       /* pantallas angostas: herramientas solo-ícono */
  .hdr-tools::after{display:none}
  .prof-meta{display:none}                /* deja solo el avatar */
  .profbtn{max-width:none;padding:5px}
}

/* ===== BUTTONS ===== */
/* botones */
.btn{
  position:relative;
  border:1px solid var(--borde);
  background:var(--panel);
  border-radius:var(--r-1);
  padding:7px 14px;
  cursor:pointer;
  font-family:var(--ff);
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  line-height:1.1;
  color:var(--texto);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  box-shadow:var(--sh-1);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .2s ease,transform .15s ease;
}
.btn:hover{
  border-color:var(--azul);
  color:var(--azul);
  background:var(--panel-2);
  box-shadow:var(--sh-2);
  transform:translateY(-1px);
}
.btn:active{
  transform:translateY(0);
  box-shadow:var(--sh-1);
}
.btn.primary{
  background:var(--grad-azul);
  background-color:var(--azul);
  color:#fff;
  border-color:transparent;
  box-shadow:var(--sh-2);
}
.btn.primary:hover{
  color:#fff;
  background:var(--grad-azul);
  filter:brightness(1.06);
  box-shadow:var(--sh-glow);
  transform:translateY(-1px);
}
.btn.primary:active{
  filter:brightness(.97);
  transform:translateY(0);
  box-shadow:var(--sh-2);
}
/* Botón SOLO-ÍCONO (p. ej. ⟳ Actualizar sin texto, pedido del dueño 04-ago-2026): compacto,
   casi cuadrado, MISMA altura que los botones con texto (no cambia padding vertical ni line-height). */
.btn-ico{
  padding-left:9px;
  padding-right:9px;
  gap:0;
  font-size:14px;
}
.btn:disabled,.btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:var(--sh-1);
  filter:none;
}
button:focus-visible,input:focus-visible,select:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--azul);
  border-radius:var(--r-1);
}
@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn:active,.btn.primary:hover,.btn.primary:active{
    transition:none;
    transform:none;
  }
}

/* ===== FILTERS ===== */
#filtros{
  background:var(--glass-bg);
  border-bottom:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  padding:var(--sp-2) var(--sp-3);
  display:flex;
  gap:var(--sp-2);
  flex-wrap:wrap;
  align-items:end;
  box-shadow:var(--sh-1);
  position:relative;
  z-index:200;            /* la barra y su popup de Sede quedan SOBRE las tarjetas (no detrás) */
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #filtros{background:var(--panel)}
}
@media (prefers-reduced-transparency:reduce){
  #filtros{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ── Filtros adaptables: en tablet cada control crece para llenar la fila; en
   teléfono se colapsan detrás del botón "🎛 Filtros" (los chips activos siguen visibles). ── */
#filtrosToggle{display:none;align-items:center;gap:6px;border:1px solid var(--borde);background:var(--panel-2);color:var(--texto);border-radius:var(--r-1);padding:8px 13px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer}
#filtrosToggle:hover{border-color:var(--azul);color:var(--azul)}
#filtros.abierto #filtrosToggle .fcar{display:inline-block;transform:rotate(180deg)}
@media(max-width:880px){
  #filtros .filtro{flex:1 1 150px}
  #filtros .filtro input,#filtros .filtro select,#filtros .msel,#filtros .msel-btn{width:100%;min-width:0}
  #filtros #chips{flex-basis:100%;order:99;margin-top:2px}
}
@media(max-width:560px){
  #filtrosToggle{display:inline-flex}
  #filtros{gap:8px;align-items:stretch}
  #filtros .filtro{flex:1 1 100%}
  #filtros:not(.abierto) .filtro{display:none}   /* colapsado por defecto en teléfono */
  #rangoPresets{width:100%}
}

.filtro{position:relative}

.filtro label{
  display:block;
  font-family:var(--ff);
  font-size:var(--fs-xs);
  color:var(--texto2);
  font-weight:var(--fw-bold);
  margin-bottom:var(--sp-1);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.filtro input,.filtro select{
  font-family:var(--ff);
  border:1px solid var(--borde);
  border-radius:var(--r-1);
  padding:var(--sp-1) var(--sp-2);
  font-size:var(--fs-sm);
  background:var(--panel);
  min-width:110px;
  color:var(--texto);
  transition:border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.filtro input:hover,.filtro select:hover{
  border-color:var(--azul);
}

.filtro input:focus,.filtro select:focus{
  outline:none;
  border-color:var(--azul);
  background:var(--panel-2);
  box-shadow:var(--sh-glow);
}

.filtro input::placeholder{color:var(--gris)}

/* ===== POPUPS ===== */
/* ============ MULTISELECT / POPUPS — glass popover, dark-first ============ */
.msel{position:relative}

.msel-btn{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  border:1px solid var(--borde);border-radius:var(--r-1);
  padding:7px 11px;min-width:140px;
  font-family:var(--ff);font-size:var(--fs-xs);font-weight:var(--fw-medium);
  background:var(--panel-2);color:var(--texto);
  text-align:left;white-space:nowrap;cursor:pointer;
  box-shadow:var(--sh-1);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
}
.msel-btn:hover{
  border-color:var(--azul);color:var(--texto);
  box-shadow:var(--sh-2);
}
.msel-btn:focus-visible{
  outline:none;border-color:var(--azul);box-shadow:var(--sh-glow);
}
.msel-btn::after{
  content:'▾';color:var(--gris);margin-left:var(--sp-2);
  font-size:.9em;line-height:1;
  transition:transform .2s ease,color .18s ease;
}
.msel-btn:hover::after{color:var(--azul)}

.msel-pop{
  position:absolute;top:calc(100% + 6px);left:0;z-index:75;
  min-width:210px;max-height:288px;overflow-y:auto;
  padding:var(--sp-2);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--r-2);
  box-shadow:var(--sh-3);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  transform:translateY(-6px) scale(.985);transform-origin:top left;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .2s cubic-bezier(.2,.8,.25,1),visibility .18s ease;
}
.msel-pop.open{
  display:block;
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0) scale(1);
}

.msel-pop label{
  display:flex;align-items:center;gap:var(--sp-2);margin:0;
  padding:6px 9px;border-radius:var(--r-1);
  font-family:var(--ff);font-size:var(--fs-xs);font-weight:var(--fw-medium);
  color:var(--texto);text-transform:none;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.msel-pop label:hover{background:var(--panel-2);color:var(--azul)}

.msel-pop input[type=checkbox]{
  accent-color:var(--azul);
  width:15px;height:15px;flex:0 0 auto;cursor:pointer;
}

.msel-pop .acciones{
  display:flex;gap:var(--sp-1);
  padding:var(--sp-2) var(--sp-1) 2px;margin-top:var(--sp-2);
  border-top:1px solid var(--glass-border);
}
.msel-pop .acciones button{
  flex:1;border:1px solid transparent;
  background:var(--panel-2);border-radius:var(--r-1);
  padding:6px 5px;
  font-family:var(--ff);font-size:10.5px;font-weight:var(--fw-semibold);
  color:var(--texto2);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.msel-pop .acciones button:hover{
  color:#fff;background:var(--grad-azul);
  border-color:transparent;box-shadow:var(--sh-1);
}
.msel-pop .acciones button:focus-visible{
  outline:none;box-shadow:var(--sh-glow);
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .msel-pop{background:var(--panel)}
}
@media (prefers-reduced-transparency:reduce){
  .msel-pop{
    background:var(--panel);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
}

/* "＋ Nuevo": mega-menú categorizado por área (como el "+Crear" de Siigo) — Fase 3b */
.nuevoMega{min-width:600px;max-width:min(680px,calc(100vw - 40px));max-height:min(480px,calc(100vh - 90px))}
.nuevoMega .megaGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4) var(--sp-3)}
.nuevoMega .megaGrupo{display:flex;flex-direction:column;gap:1px;min-width:0}
.nuevoMega .megaGrupo h4{
  display:flex;align-items:center;gap:6px;margin:0 0 4px;padding:0 9px;
  font-size:10px;font-weight:var(--fw-bold);letter-spacing:.5px;text-transform:uppercase;
  color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nuevoMega .prof-item{padding:8px 9px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:720px){
  .nuevoMega{min-width:320px;max-width:calc(100vw - 24px)}
  .nuevoMega .megaGrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .nuevoMega .megaGrid{grid-template-columns:1fr}
}

/* ===== HELPERS CANÓNICOS ===== */
.factlink{color:var(--azul);cursor:pointer;text-decoration:underline dotted;font-weight:600}
.factlink:hover{text-decoration:underline}
.filtro.atenuado{opacity:.4;pointer-events:none}
.filtro.atenuado::after{content:'no aplica';position:absolute;bottom:-13px;left:0;font-size:8.5px;color:var(--gris);letter-spacing:0}
.snap{font-size:10px;color:var(--gris);border:1px solid var(--borde);border-radius:6px;padding:1px 6px;margin-left:6px;font-weight:600;white-space:nowrap}
.ensChip{font-size:9.5px;color:#7c3aed;background:color-mix(in srgb,#7c3aed 12%,transparent);border:1px solid #7c3aed55;border-radius:6px;padding:0 5px;margin-left:6px;font-weight:700;cursor:help;white-space:nowrap}

/* ===== CHIPS ===== */
#chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.chip{
  background:var(--grad-azul);
  color:#fff;
  border:1px solid var(--glass-border);
  border-radius:var(--r-pill);
  padding:4px 6px 4px 12px;
  font-family:var(--ff);
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  line-height:1;
  letter-spacing:.1px;
  display:inline-flex;
  gap:var(--sp-1);
  align-items:center;
  box-shadow:var(--sh-1);
  transition:transform .18s ease,box-shadow .2s ease,filter .18s ease;
}
.chip:hover{
  transform:translateY(-1px);
  box-shadow:var(--sh-glow);
  filter:brightness(1.04);
}
.chip i{
  font-style:normal;
  cursor:pointer;
  font-weight:var(--fw-bold);
  font-size:var(--fs-sm);
  line-height:1;
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-pill);
  color:#fff;
  background:rgba(255,255,255,.18);
  transition:background .15s ease,transform .15s ease;
}
.chip i:hover{
  background:rgba(255,255,255,.32);
  transform:scale(1.12);
}
.chip i:active{transform:scale(.94)}

@media (prefers-reduced-motion:reduce){
  .chip,.chip i{transition:none}
  .chip:hover{transform:none}
  .chip i:hover{transform:none}
}

/* ===== CARDS ===== */
/* ───── CARD BASE ───── */
.card{
  /* Sólido a propósito: las tarjetas van SOBRE el fondo de la página, así que el backdrop-filter
     no aportaba nada visible pero re-rasterizaba un blur de 16px en CADA hover/repaint (con muchas
     tarjetas + tablas grandes eso trababa el hover y el sombreado de filas). Sin blur = fluido. */
  background:var(--panel);
  border:1px solid var(--glass-border);
  border-radius:var(--r-3);
  padding:var(--sp-3) var(--sp-3);
  box-shadow:var(--sh-2);
  transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;
}
.card:hover{
  border-color:rgba(72,168,224,.35);
  box-shadow:var(--sh-3);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card{background:var(--panel);}
}
@media (prefers-reduced-transparency:reduce){
  .card{
    background:var(--panel);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* ── encabezado de tarjeta ── */
.cardHead{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-2);
  flex-wrap:wrap;
  margin-bottom:var(--sp-2);
}
.cardHead h3{margin:0;}
.cardHead .sub{
  font-size:var(--fs-xs);
  color:var(--gris);
  display:block;
  margin-top:var(--sp-1);
  font-weight:var(--fw-regular);
}
.cardHead .spacer{flex:1;}

/* ── título con bullet de acento ── */
h3{
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  color:var(--texto);
  margin-bottom:var(--sp-2);
  display:flex;
  align-items:center;
  gap:var(--sp-2);
}
h3::before{
  content:"";
  flex:0 0 auto;
  width:6px;
  height:6px;
  border-radius:var(--r-pill);
  background:var(--azul);
  box-shadow:0 0 0 3px rgba(72,168,224,.18);
}
h3 i{
  font-style:normal;
  color:var(--azul);
  font-weight:var(--fw-semibold);
}

/* ── estado vacío ── */
.empty{
  color:var(--gris);
  font-size:var(--fs-xs);
  padding:var(--sp-2) 0;
}

/* ===== KPI ===== */
/* ====== KPI ====== */
.kpi{
  position:relative;
  overflow:hidden;
  padding-top:18px;
  border-radius:var(--r-3);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  box-shadow:var(--sh-2);
  transform:translateZ(0);
  transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),border-color .2s ease;
}
.kpi:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh-3);
  border-color:var(--azul);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .kpi{background:var(--panel)}
}
@media (prefers-reduced-transparency:reduce){
  .kpi{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .kpi{transition:none}
  .kpi:hover{transform:none}
}

.kpi::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:var(--kg,var(--grad-azul));
  z-index:1;
}

.kpi .tit{
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--texto);
  letter-spacing:-.2px;
  line-height:1.25;
}
.kpi .des{
  font-size:var(--fs-xs);
  color:var(--gris);
  margin:var(--sp-1) 0 var(--sp-3);
  line-height:1.3;
}
.kpi .big{
  font-size:var(--fs-2xl);
  font-weight:var(--fw-black);
  color:var(--texto);
  letter-spacing:-.6px;
  line-height:1.1;
}

.kpi .ico{
  position:absolute;
  top:16px;right:14px;
  width:38px;height:38px;
  border-radius:var(--r-2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  color:var(--azul);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(8px) saturate(150%);
  -webkit-backdrop-filter:blur(8px) saturate(150%);
  box-shadow:var(--sh-1);
  transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s ease;
}
.kpi:hover .ico{
  transform:scale(1.06);
  box-shadow:var(--sh-glow);
}
@media (prefers-reduced-transparency:reduce){
  .kpi .ico{background:var(--panel-2);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .kpi .ico{transition:none}
  .kpi:hover .ico{transform:none}
}

.kpi .chips{
  margin-top:var(--sp-3);
  display:flex;
  gap:var(--sp-1);
  flex-wrap:wrap;
}
.kpi .chips span{
  background:var(--panel-2);
  border:1px solid var(--borde);
  border-radius:var(--r-1);
  padding:3px 8px;
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  color:var(--texto2);
  transition:border-color .15s ease,background .15s ease;
}
.kpi .chips span:hover{border-color:var(--azul)}
.kpi .chips b{color:var(--texto);font-weight:var(--fw-bold)}

/* ====== Delta pill ====== */
.dpill{
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  border-radius:var(--r-1);
  padding:4px 10px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:4px;
  line-height:1;
  border:1px solid transparent;
  transition:transform .15s ease;
}
.dpill:hover{transform:translateY(-1px)}
.dpill.pos{
  background:rgba(120,200,40,.14);
  color:var(--verde-h);
  border-color:rgba(120,200,40,.28);
}
.dpill.neg{
  background:rgba(224,72,63,.12);
  color:var(--rojo);
  border-color:rgba(224,72,63,.26);
}
[data-theme=dark] .dpill.pos{
  background:rgba(141,217,62,.16);
  color:var(--verde);
  border-color:rgba(141,217,62,.32);
}
[data-theme=dark] .dpill.neg{
  background:rgba(240,102,94,.18);
  color:var(--rojo);
  border-color:rgba(240,102,94,.34);
}
@media (prefers-reduced-motion:reduce){
  .dpill{transition:none}
  .dpill:hover{transform:none}
}

/* ====== Leyenda ====== */
.leyenda{
  display:flex;
  gap:var(--sp-3);
  font-size:var(--fs-xs);
  color:var(--texto2);
  flex-wrap:wrap;
  margin:var(--sp-1) 0 var(--sp-2);
}
.leyenda .dot{
  display:inline-block;
  width:14px;height:3px;
  border-radius:var(--r-pill);
  margin-right:5px;
  vertical-align:middle;
}

/* ── Categoría SIN DATOS: que no ocupe lo mismo que una llena ──────────────────────
   El marco de `.scroll` (borde + fondo + alto) está pensado para tablas. Cuando lo único
   que hay dentro es un "no hay", ese marco convierte cada tarjeta vacía en una caja de
   ~150 px para decir nada — y en la Ficha 360 llegan a coincidir cinco a la vez, media
   pantalla en blanco. Con `:has()` se detecta ese caso y se colapsa: sin borde, sin fondo,
   una sola línea. Las tarjetas CON datos no se tocan. */
.scroll:has(> .empty:only-child){
  border:0; background:none; min-height:0; max-height:none; overflow:visible;
}
.scroll > .empty:only-child{ padding:2px 0; font-size:11px; opacity:.72; }
/* El título de una tarjeta vacía también baja de peso: el ojo la salta y se va a lo que sí
   tiene información, en vez de leer cinco encabezados para descubrir que están todos vacíos. */
.card:has(.scroll > .empty:only-child) > h3{ opacity:.62; }

/* ===== TABLES ===== */
/* ───── TABLAS · limpias y legibles, sin vidrio detrás de los datos ───── */
.scroll{
  max-height:430px;
  overflow:auto;
  border-radius:var(--r-2);
  border:1px solid var(--borde);
  background:var(--panel);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--borde) transparent;
}
.scroll::-webkit-scrollbar{width:10px;height:10px}
.scroll::-webkit-scrollbar-track{background:transparent}
.scroll::-webkit-scrollbar-thumb{
  background:var(--borde);
  border-radius:var(--r-pill);
  border:2px solid var(--panel);
}
.scroll::-webkit-scrollbar-thumb:hover{background:var(--gris)}

table{
  width:100%;
  border-collapse:collapse;
  font-size:11.5px;
  color:var(--texto);
  background:var(--panel);
}

th{
  text-align:left;
  color:var(--texto2);
  font-size:10px;
  font-weight:var(--fw-semibold);
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:9px 10px;
  border-bottom:1px solid var(--borde);
  position:sticky;
  top:0;
  z-index:2;
  background:var(--panel-2);
  cursor:default;
  white-space:nowrap;
}

td{
  padding:7px 10px;
  border-bottom:1px solid var(--borde);
  color:var(--texto);
  transition:background .15s ease;
}

tbody tr:last-child td{border-bottom:none}

.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

tr.click{cursor:pointer}
tr.click:hover td{background:var(--panel-2)}
tr.click:active td{background:var(--panel-2);filter:brightness(.98)}
tr.click:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}

/* filas de no conformidad / urgencia (resaltado de alerta, AA) */
tr.ncrow td{background:color-mix(in srgb, var(--rojo) 9%, var(--panel))}
tr.ncrow:hover td{background:color-mix(in srgb, var(--rojo) 15%, var(--panel))}
tr.ncrow .num,tr.ncrow b{color:var(--rojo)}

/* totales destacados */
tfoot td{
  position:sticky;
  bottom:0;
  z-index:1;
  background:color-mix(in srgb, var(--verde) 12%, var(--panel));
  color:var(--texto);
  font-weight:var(--fw-bold);
  border-top:2px solid var(--verde);
  padding:8px 10px;
}

/* matrices (datos centrados, mismas reglas de legibilidad) */
.matriz table{font-size:11px;min-width:560px}
.matriz td,.matriz th{text-align:center}

.matrizMes table{min-width:720px}
.matrizMes tfoot td{
  background:var(--panel);
  box-shadow:inset 0 2px 0 var(--verde);
  color:var(--texto);
}

/* ===== RANK ===== */
.rk{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:var(--r-2);cursor:pointer;border:1px solid transparent;margin-bottom:2px;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.rk:hover{background:var(--panel-2);transform:translateX(2px)}
.rk.sel{background:linear-gradient(90deg,color-mix(in srgb,var(--verde) 18%,transparent),transparent);border-color:var(--verde);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--verde) 22%,transparent),var(--sh-1)}
.rk.sel:hover{transform:translateX(2px)}
.rk .pos{font-size:11px;font-weight:var(--fw-bold);color:var(--gris);width:20px;flex-shrink:0;text-align:center;transition:color .18s ease}
.rk.sel .pos{color:var(--verde-h)}
.rk .mid{flex:1;min-width:0}
.rk .nom{font-size:10px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.2px;color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk .barra{display:block;width:100%;height:5px;min-height:5px;border-radius:var(--r-pill);background:var(--panel-2);margin-top:4px;overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px var(--borde)}
.rk .barra i{position:absolute;left:0;top:0;bottom:0;min-width:3px;border-radius:var(--r-pill);background:var(--grad-verde);box-shadow:0 0 6px color-mix(in srgb,var(--verde) 45%,transparent);transition:width .35s cubic-bezier(.4,0,.2,1)}
.rk.sel .barra i{background:var(--grad-azul);box-shadow:0 0 8px color-mix(in srgb,var(--azul) 50%,transparent)}
.rk .pctt{font-size:8.5px;color:var(--gris);margin-top:2px}
.rk .valr{font-size:11.5px;font-weight:var(--fw-bold);color:var(--texto);white-space:nowrap}
.rk.sel .valr{color:var(--verde-h)}
@media (prefers-reduced-motion:reduce){.rk,.rk .pos,.rk .barra i{transition:none}.rk:hover,.rk.sel:hover{transform:none}}

/* ===== BADGES ===== */
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:var(--r-pill);
  font-weight:var(--fw-semibold);
  font-size:var(--fs-xs);
  line-height:1.5;
  letter-spacing:.2px;
  white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.badge.up{
  background:rgba(120,200,40,.16);
  color:var(--verde-h);
  box-shadow:inset 0 0 0 1px rgba(120,200,40,.28);
}
.badge.up::before{content:'▲';font-size:7px;margin-right:4px;vertical-align:1px}
.badge.down{
  background:rgba(224,72,63,.14);
  color:var(--rojo);
  box-shadow:inset 0 0 0 1px rgba(224,72,63,.26);
}
.badge.down::before{content:'▼';font-size:7px;margin-right:4px;vertical-align:1px}
.badge.up:hover,.badge.down:hover{transform:translateY(-1px)}
[data-theme=dark] .badge.up{
  background:rgba(141,217,62,.18);
  color:var(--verde);
  box-shadow:inset 0 0 0 1px rgba(141,217,62,.30);
}
[data-theme=dark] .badge.down{
  background:rgba(240,102,94,.18);
  color:var(--rojo);
  box-shadow:inset 0 0 0 1px rgba(240,102,94,.30);
}

.tipoPill{
  display:inline-block;
  background:color-mix(in srgb,var(--texto) 5%,transparent);
  color:var(--texto2);
  border-radius:var(--r-pill);
  padding:2px 9px;
  font-size:9.5px;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--borde);
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.tipoPill::before{content:'●';font-size:7px;margin-right:4px;color:var(--gris);vertical-align:1px}
[data-theme=dark] .tipoPill{
  background:rgba(255,255,255,.05);
  color:var(--texto2);
  box-shadow:inset 0 0 0 1px var(--borde);
}
.tipoPill.ncp{
  background:rgba(224,72,63,.13);
  color:var(--rojo);
  box-shadow:inset 0 0 0 1px rgba(224,72,63,.24);
}
.tipoPill.ncp::before{color:var(--rojo)}
[data-theme=dark] .tipoPill.ncp{
  background:rgba(240,102,94,.16);
  color:var(--rojo);
  box-shadow:inset 0 0 0 1px rgba(240,102,94,.28);
}

.abcpill{
  display:inline-block;
  width:18px;height:18px;line-height:18px;
  text-align:center;
  border-radius:var(--r-1);
  font-size:10px;
  font-weight:var(--fw-bold);
  transition:transform .18s ease,box-shadow .18s ease;
}
.abcpill:hover{transform:translateY(-1px);box-shadow:var(--sh-1)}
.abc-A{background:rgba(224,72,63,.16);color:var(--rojo);box-shadow:inset 0 0 0 1px rgba(224,72,63,.26)}
.abc-B{background:rgba(240,168,40,.18);color:#b45309;box-shadow:inset 0 0 0 1px rgba(240,168,40,.30)}
.abc-C{background:rgba(107,122,144,.18);color:var(--gris);box-shadow:inset 0 0 0 1px rgba(107,122,144,.26)}
[data-theme=dark] .abc-A{background:rgba(240,102,94,.18);color:var(--rojo);box-shadow:inset 0 0 0 1px rgba(240,102,94,.30)}
[data-theme=dark] .abc-B{background:rgba(246,187,77,.18);color:var(--ambar);box-shadow:inset 0 0 0 1px rgba(246,187,77,.30)}
[data-theme=dark] .abc-C{background:rgba(128,148,173,.18);color:var(--texto2);box-shadow:inset 0 0 0 1px rgba(128,148,173,.28)}

.paybadge{
  display:inline-block;
  background:rgba(120,200,40,.16);
  color:var(--verde-h);
  border-radius:var(--r-pill);
  padding:2px 9px;
  font-size:11px;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(120,200,40,.28);
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
[data-theme=dark] .paybadge{
  background:rgba(141,217,62,.18);
  color:var(--verde);
  box-shadow:inset 0 0 0 1px rgba(141,217,62,.30);
}

.pedtab .badge{
  display:inline-block;
  font-size:9px;
  background:var(--grad-azul);
  color:#fff;
  border-radius:var(--r-pill);
  padding:1px 7px;
  box-shadow:var(--sh-1);
}

/* ===== BARS ===== */
.bar-row{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:7px;font-size:11px;cursor:pointer;border-radius:var(--r-1);padding:3px var(--sp-1);color:var(--texto2);transition:background 180ms ease,transform 180ms ease,box-shadow 180ms ease}
.bar-row:hover{background:var(--panel-2);transform:translateX(2px);box-shadow:inset 2px 0 0 var(--azul)}
.bar-row .nm{width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--texto);font-weight:var(--fw-medium)}
.bar-row .tr{flex:1;background:var(--panel-2);border:1px solid var(--borde);border-radius:var(--r-pill);height:11px;min-height:11px;overflow:hidden;position:relative}
.bar-row .fl{position:absolute;left:0;top:0;bottom:0;margin:0!important;min-width:6px;border-radius:var(--r-pill);background:var(--grad-azul,var(--azul));box-shadow:0 1px 4px rgba(72,168,224,.45);transition:width 320ms cubic-bezier(.22,1,.36,1),filter 180ms ease}
.bar-row:hover .fl{filter:brightness(1.08) saturate(1.12)}
.bar-row .vl{width:84px;text-align:right;font-weight:var(--fw-semibold);font-size:10.5px;color:var(--texto);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .bar-row,.bar-row .fl{transition:none}
  .bar-row:hover{transform:none}
}

/* ===== AGING ===== */
.aging-stack{
  display:flex;
  height:26px;
  border-radius:var(--r-1);
  overflow:hidden;
  margin:6px 0 12px;
  box-shadow:var(--sh-1), inset 0 0 0 1px var(--borde);
  background:var(--panel-2);
}
.aging-stack div{
  cursor:pointer;
  position:relative;
  transition:filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.aging-stack div:hover{
  filter:brightness(1.08) saturate(1.12);
  transform:scaleY(1.06);
  z-index:2;
  box-shadow:0 0 0 1px rgba(255,255,255,0.35);
}
.aging-leg{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:var(--fs-xs);
  color:var(--texto2);
}
.aging-leg span{
  display:inline-flex;
  align-items:center;
  transition:color 150ms ease;
}
.aging-leg .dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:var(--r-pill);
  margin-right:4px;
  box-shadow:0 0 0 2px var(--panel);
}
@media (prefers-reduced-motion: reduce){
  .aging-stack div{transition:none}
  .aging-stack div:hover{transform:none}
}

/* ===== MATRIZ ===== */
/* ───── MATRIZ mes × dimensión (cliente×mes, producto×mes, categoría×bodega) ───── */
/* Chrome glass solo en el contenedor; nunca detrás de celdas de datos. Dark-first, AA. */
.matrizMes{
  overflow:auto;
  max-height:430px;
  border-radius:var(--r-2);
  border:1px solid var(--borde);
  background:var(--panel);
  box-shadow:var(--sh-1);
  scrollbar-width:thin;
  scrollbar-color:var(--borde) transparent;
}
.matrizMes::-webkit-scrollbar{width:10px;height:10px}
.matrizMes::-webkit-scrollbar-track{background:transparent}
.matrizMes::-webkit-scrollbar-thumb{
  background:var(--borde);
  border-radius:var(--r-pill);
  border:2px solid var(--panel);
}
.matrizMes::-webkit-scrollbar-thumb:hover{background:var(--gris)}

.matrizMes table{
  min-width:720px;
  border-collapse:separate;
  border-spacing:0;
  width:100%;
}

/* Cabecera sticky superior — chrome translúcido sobre los datos al hacer scroll */
.matrizMes thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:var(--panel-2);
  color:var(--texto2);
  font-weight:var(--fw-semibold);
  font-size:var(--fs-xs);
  letter-spacing:.3px;
  white-space:nowrap;
  padding:9px 12px;
  border-bottom:1px solid var(--borde);
  box-shadow:0 1px 0 var(--borde);
}

/* Primera columna fija (nombre/dimensión) */
.matrizMes th:first-child,
.matrizMes td:first-child{
  position:sticky;
  left:0;
  z-index:2;
  background:var(--panel);
  max-width:190px;
  min-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:var(--fw-medium);
  color:var(--texto);
  padding:8px 12px;
  border-right:1px solid var(--borde);
}

/* Esquina superior-izquierda: cruce de ambos sticky, manda sobre todo */
.matrizMes thead th:first-child{
  z-index:4;
  background:var(--panel-2);
}

/* Celdas de datos — fondo sólido, legible, sin glass detrás */
.matrizMes tbody td{
  padding:7px 12px;
  font-size:var(--fs-sm);
  color:var(--texto);
  border-bottom:1px solid var(--borde);
  white-space:nowrap;
  transition:background-color 160ms ease;
}

/* Heatmap suave de celdas: el JS pinta el color base; aquí afinamos legibilidad y hover.
   Las celdas con dato vacío quedan transparentes; las pintadas conservan su tono. */
.matrizMes tbody tr:hover td{
  background:var(--panel-2);
}
.matrizMes tbody tr:hover td:first-child{
  background:var(--panel-2);
}
.matrizMes tr.click{cursor:pointer}
.matrizMes tr.click:hover td{
  background:color-mix(in srgb, var(--azul) 9%, var(--panel));
}
.matrizMes tr.click:hover td:first-child{
  background:color-mix(in srgb, var(--azul) 12%, var(--panel));
  color:var(--azul-h);
}

/* Total de columna (b) y números: tabulares y firmes */
.matrizMes .num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.matrizMes tbody td b{
  color:var(--texto);
  font-weight:var(--fw-bold);
}

/* tfoot sticky inferior con total — acento verde, fondo opaco para tapar datos al hacer scroll */
.matrizMes tfoot td{
  position:sticky;
  bottom:0;
  z-index:3;
  background:var(--panel);
  font-weight:var(--fw-bold);
  color:var(--texto);
  padding:9px 12px;
  border-top:2px solid var(--verde);
  box-shadow:inset 0 2px 0 var(--verde);
}
.matrizMes tfoot td:first-child{
  z-index:4;
  background:var(--panel);
  color:var(--verde-h);
  text-transform:uppercase;
  letter-spacing:.4px;
  font-size:var(--fs-xs);
}

/* Leyenda de cobertura/heatmap encima de la matriz */
.matrizMes + .aging-leg,
.aging-leg{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:var(--fs-xs);
  color:var(--gris);
}

@media (prefers-reduced-motion: reduce){
  .matrizMes tbody td,
  .matrizMes tr.click:hover td{transition:none}
}

/* ===== MODAL ===== */
/* modal */
.modal{position:fixed;inset:0;background:rgba(8,14,26,.55);display:none;align-items:flex-start;justify-content:center;z-index:260;padding:30px 14px;overflow:auto;-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%)}
.modal.open{display:flex;animation:modalFade .2s ease}
.modal .mbox{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);backdrop-filter:blur(var(--glass-blur)) saturate(140%);border-radius:var(--r-3);padding:22px;width:min(760px,100%);position:relative;box-shadow:var(--sh-3);transform:translateZ(0);animation:modalPop .22s cubic-bezier(.16,1,.3,1)}
.modal .x{position:absolute;top:12px;right:16px;cursor:pointer;font-size:18px;line-height:1;color:var(--gris);width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-pill);transition:background .18s ease,color .18s ease,transform .18s ease}
.modal .x:hover{background:var(--panel-2);color:var(--texto);transform:rotate(90deg)}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalPop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-transparency:reduce){.modal{backdrop-filter:none;-webkit-backdrop-filter:none}.modal .mbox{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.modal.open,.modal .mbox{animation:none}.modal .x:hover{transform:none}}
/* Los cuadros de diálogo SIEMPRE caben en la pantalla (no se recortan a ningún tamaño):
   el cuadro se limita al alto del viewport y su cuerpo hace scroll interno, con la ✕
   siempre visible arriba. Los textos largos/URLs se parten para no desbordar. */
.modal{align-items:flex-start;padding:clamp(8px,3vh,28px) clamp(8px,3vw,14px)}
.modal .mbox{display:flex;flex-direction:column;max-height:calc(100vh - 56px);max-height:calc(100dvh - clamp(16px,6vh,56px));overflow-wrap:anywhere}
.modal .mbox>#modalBody{overflow:auto;min-height:0;overscroll-behavior:contain}
.modal .mbox img{max-width:100%;height:auto}
@media(max-width:560px){.modal .mbox{width:100%;padding:18px 16px}.modal .x{top:8px;right:10px}}

/* ===== FACTURA ===== */
/* ============ VISOR FACTURA · drop-in ============ */
.mbox-fact{
  width:min(980px,100%)!important;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  box-shadow:var(--sh-3);
  transform:translateZ(0);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mbox-fact{background:var(--panel)}
}
@media (prefers-reduced-transparency:reduce){
  .mbox-fact{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.mbox-fact .x{color:#fff;z-index:3;opacity:.85;transition:opacity .18s ease,transform .18s ease}
.mbox-fact .x:hover{opacity:1;transform:scale(1.08)}

/* Encabezado formal de documento · gradiente navy→azul */
.factHead{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  margin:-22px -22px 16px;padding:22px 24px;
  border-radius:var(--r-3) var(--r-3) 0 0;
  background:var(--grad-hero);
  color:#fff;
  position:relative;overflow:hidden;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.10),var(--sh-2);
}
.factHead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 160% at 100% 0,rgba(72,168,224,.30),transparent 55%);
}
.factHead>*{position:relative;z-index:1}
.factHead .empresa{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:.3px}
.factHead .empresa-sub{font-size:10.5px;color:#dbe6f2;margin-top:3px;letter-spacing:.4px}
.factHead .factNum{text-align:right;flex-shrink:0}
.factHead .factNum .lbl{font-size:9px;letter-spacing:2px;color:#bcd0e6}
.factHead .factNum .num{font-size:21px;font-weight:var(--fw-bold);line-height:1.2}

/* Metadatos · texto de datos, sin glass */
.factMeta{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;font-size:var(--fs-sm);color:var(--texto2);margin-bottom:16px}
.factMeta b{color:var(--texto)}
.factMeta>div{line-height:1.9}
.metalbl{display:inline-block;font-size:9px;letter-spacing:1px;color:var(--gris);font-weight:var(--fw-bold);min-width:58px}

/* Totales · tarjetas sólidas (datos), sin glass */
.factTotals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.ttile{
  border-radius:var(--r-2);padding:12px 16px;
  border:1px solid var(--borde);background:var(--panel-2);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.ttile:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.ttile .l{font-size:10px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.4px}
.ttile .v{font-size:var(--fs-2xl);font-weight:var(--fw-bold);margin-top:2px;color:var(--texto)}
.ttile.total{background:var(--grad-azul);border-color:transparent;color:#fff;box-shadow:var(--sh-glow)}
.ttile.total .l{color:rgba(255,255,255,.92)}
.ttile.total .v{color:#fff}
.ttile.total:hover{box-shadow:var(--sh-glow),var(--sh-2)}
.ttile.saldo .l{color:var(--rojo)}

/* Secciones */
.factSec{
  font-size:11px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.6px;
  color:var(--azul);margin:16px 0 7px;border-bottom:1px solid var(--borde);padding-bottom:5px;
}

/* Badge de pago */
.paybadge{
  display:inline-block;background:rgba(120,200,40,.16);color:var(--verde-h);
  border:1px solid rgba(120,200,40,.28);
  border-radius:var(--r-1);padding:1px 8px;font-size:11px;font-weight:var(--fw-semibold);
}
[data-theme=dark] .paybadge{background:rgba(141,217,62,.14);color:var(--verde);border-color:rgba(141,217,62,.30)}

@media(max-width:680px){.factMeta,.factTotals{grid-template-columns:1fr}}

/* ===== PEDIDOS ===== */
/* ===== PEDIDOS — pestañas estilo navegador + tabla editable ===== */

/* Handle de redimensionado (chrome) */
.rsz{position:absolute;right:0;bottom:0;width:22px;height:22px;cursor:nwse-resize;z-index:7;color:var(--azul);font-size:13px;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 3px 1px 0;touch-action:none;border-radius:0 0 var(--r-2) 0;transition:transform 180ms cubic-bezier(.4,0,.2,1),color 180ms ease,background 180ms ease}
.rsz:hover{transform:scale(1.25);color:var(--azul-h);background:linear-gradient(135deg,transparent 40%,rgba(72,168,224,.18) 100%)}

/* Barra de pestañas — riel estilo navegador */
.pedtabs{display:flex;gap:4px;align-items:flex-end;flex-wrap:wrap;border-bottom:1px solid var(--borde);margin-bottom:12px;padding:6px 6px 0;background:var(--glass-bg);border:1px solid var(--glass-border);border-bottom:1px solid var(--borde);backdrop-filter:blur(var(--glass-blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);border-radius:var(--r-2) var(--r-2) 0 0;box-shadow:var(--sh-1)}

/* Pestaña inactiva */
.pedtab{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-2) var(--r-2) 0 0;background:var(--panel-2);border:1px solid var(--borde);border-bottom:none;cursor:pointer;font-size:12.5px;font-weight:var(--fw-medium);color:var(--texto2);position:relative;top:1px;max-width:230px;transition:background 180ms ease,color 180ms ease,transform 180ms cubic-bezier(.4,0,.2,1),box-shadow 180ms ease}
.pedtab:hover{background:var(--panel);color:var(--texto);transform:translateY(-1px)}

/* Pestaña activa — se funde con el panel */
.pedtab.act{background:var(--panel);color:var(--azul);font-weight:var(--fw-semibold);border-color:var(--azul);box-shadow:0 -3px 12px rgba(72,168,224,.18);z-index:2}
.pedtab.act::after{content:"";position:absolute;left:8px;right:8px;top:0;height:2px;border-radius:var(--r-pill);background:var(--grad-azul)}

/* Pestaña arrastrándose */
.pedtab.dragging{opacity:.85;cursor:grabbing;box-shadow:var(--sh-3);transform:scale(1.03) rotate(-.5deg);z-index:10;transition:none}

/* Nombre / cerrar / badge */
.pedtab .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pedtab .x{font-weight:var(--fw-bold);opacity:.5;border-radius:var(--r-1);padding:0 4px;line-height:1.4;transition:opacity 150ms ease,background 150ms ease,color 150ms ease}
.pedtab .x:hover{opacity:1;background:var(--panel-2);color:var(--rojo)}
.pedtab .badge{font-size:9px;font-weight:var(--fw-bold);background:var(--grad-azul);color:#fff;border-radius:var(--r-pill);padding:1px 6px;box-shadow:var(--sh-1)}

/* Botón añadir pestaña */
.pedtab-add{display:flex;align-items:center;justify-content:center;padding:8px 12px;border:1px dashed var(--azul);border-radius:var(--r-2) var(--r-2) 0 0;background:none;color:var(--azul);cursor:pointer;font-size:12.5px;font-weight:var(--fw-semibold);position:relative;top:1px;transition:background 180ms ease,color 180ms ease,border-color 180ms ease,transform 180ms cubic-bezier(.4,0,.2,1)}
.pedtab-add:hover{background:var(--panel-2);border-color:var(--azul-h);color:var(--azul-h);transform:translateY(-1px)}

/* Herramientas (búsqueda, filtros) */
.pedtools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.pedtools input[type=search],.pedtools input.busca{border:1px solid var(--borde);border-radius:var(--r-1);padding:6px 10px;font-size:12px;background:var(--panel);color:var(--texto);min-width:180px;transition:border-color 150ms ease,box-shadow 150ms ease,background 150ms ease}
.pedtools input[type=search]::placeholder,.pedtools input.busca::placeholder{color:var(--gris)}
.pedtools input[type=search]:focus,.pedtools input.busca:focus{border-color:var(--azul);box-shadow:0 0 0 3px rgba(72,168,224,.18);outline:none}

/* Tabla editable — sólido, SIN glass detrás de datos */
.pedtbl input.cant{width:64px;border:1px solid var(--borde);border-radius:7px;padding:5px 6px;font-size:12px;text-align:right;background:var(--panel);color:var(--texto);font-weight:var(--fw-bold);transition:border-color 150ms ease,box-shadow 150ms ease}
.pedtbl input.cant:hover{border-color:var(--azul)}
.pedtbl input.cant:focus{border-color:var(--azul);box-shadow:0 0 0 3px rgba(72,168,224,.18);outline:none}
.pedtbl input.cant.sug{color:var(--azul)}

/* Fila urgente — fondo plano legible (sin transparencia tras datos) */
.pedtbl tr.urge td{background:var(--panel-2);box-shadow:inset 3px 0 0 var(--rojo)}
.pedtbl tr.urge:hover td{background:var(--panel)}

/* ===== CCPICK ===== */
/* ===== PARAMETRIZACIÓN ===== */

/* Modal: grid de selectores de centro de costo (chrome → glass permitido) */
.modalCentros{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:var(--sp-2);
  max-height:50vh;
  overflow:auto;
  margin-top:var(--sp-3);
  padding:var(--sp-1);
}

/* Selector de centro de costo: tarjeta de chrome con glass + micro-interacción */
.ccpick{
  position:relative;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  border-radius:var(--r-2);
  padding:var(--sp-3) var(--sp-3);
  cursor:pointer;
  font-size:var(--fs-xs);
  color:var(--texto);
  box-shadow:var(--sh-1);
  transform:translateZ(0);
  transition:border-color .18s ease, box-shadow .2s ease, transform .18s ease, background .2s ease;
}
.ccpick:hover{
  border-color:var(--azul);
  background:var(--panel);
  box-shadow:var(--sh-glow);
  transform:translateY(-2px);
}
.ccpick:active{
  transform:translateY(0);
  box-shadow:var(--sh-1);
}
.ccpick:focus-visible{
  outline:2px solid var(--azul);
  outline-offset:2px;
}
.ccpick.no{
  opacity:.45;
  filter:grayscale(.4);
  box-shadow:none;
}
.ccpick.no:hover{
  border-color:var(--borde);
  background:var(--glass-bg);
  box-shadow:none;
  transform:none;
}
.ccpick b{
  display:block;
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  color:var(--texto);
  line-height:1.25;
}
.ccpick small{
  color:var(--gris);
  font-size:10px;
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ccpick{background:var(--panel);}
  .ccpick:hover{background:var(--panel-2);}
}
@media (prefers-reduced-transparency:reduce){
  .ccpick{
    background:var(--panel);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .ccpick:hover{background:var(--panel-2);}
}
@media (prefers-reduced-motion:reduce){
  .ccpick{transition:none;}
  .ccpick:hover,.ccpick:active{transform:none;}
}

/* Matriz de accesos: datos puros → SIN glass detrás de la tabla, panel sólido */
.matriz{
  overflow:auto;
  border:1px solid var(--borde);
  border-radius:var(--r-2);
  background:var(--panel);
  box-shadow:var(--sh-1);
}
.matriz table{
  font-size:var(--fs-xs);
  min-width:560px;
  border-collapse:collapse;
  width:100%;
}
.matriz td,.matriz th{
  text-align:center;
  padding:var(--sp-2) var(--sp-2);
  border-bottom:1px solid var(--borde);
  color:var(--texto2);
}
.matriz th{
  background:var(--panel-2);
  color:var(--texto);
  font-weight:var(--fw-semibold);
  font-size:11px;
  position:sticky;
  top:0;
  z-index:1;
}
.matriz td:first-child,.matriz th:first-child{
  text-align:left;
  font-weight:var(--fw-semibold);
  color:var(--texto);
}
.matriz tbody tr{
  transition:background .15s ease;
}
.matriz tbody tr:hover{
  background:var(--panel-2);
}
.matriz input[type=checkbox]{
  accent-color:var(--azul);
  width:16px;
  height:16px;
  cursor:pointer;
  border-radius:var(--r-1);
  transition:transform .15s ease, filter .15s ease;
}
.matriz input[type=checkbox]:hover{
  transform:scale(1.12);
  filter:drop-shadow(0 0 3px rgba(72,168,224,.45));
}
.matriz input[type=checkbox]:focus-visible{
  outline:2px solid var(--azul);
  outline-offset:2px;
}

/* Subnodo: fila hija indentada dentro de la matriz */
.subnodo{
  color:var(--gris)!important;
  padding-left:var(--sp-4)!important;
  font-weight:var(--fw-regular)!important;
  position:relative;
}
.subnodo::before{
  content:"";
  position:absolute;
  left:var(--sp-3);
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border-radius:var(--r-pill);
  background:var(--azul);
  opacity:.55;
}

/* ===== MAPA ===== */
/* ============================================================
   INICIO / INSIGHTS — mapa del proyecto + tarjetas de alerta
   Glassmorphism solo en el chrome de la tarjeta (modcard).
   Dark-first · Contraste AA · Drop-in (mismos nombres de clase)
   ============================================================ */

.mapa{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--sp-3);
}

/* Tarjeta-chrome con glass + acento lateral por severidad */
.modcard{
  position:relative;
  overflow:hidden;
  padding:var(--sp-3);
  cursor:pointer;
  border-radius:var(--r-2);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  box-shadow:var(--sh-1);
  transform:translateZ(0);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Acento por defecto (azul) — barra lateral viva sobre el chrome */
.modcard::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  border-radius:var(--r-2) 0 0 var(--r-2);
  background:var(--grad-azul);
  opacity:.85;
  transition:width .2s ease, opacity .2s ease;
}

.modcard:hover{
  border-color:var(--azul);
  transform:translateY(-3px);
  box-shadow:var(--sh-3);
}
.modcard:hover::before{
  width:5px;
  opacity:1;
}

.modcard:focus-visible{
  outline:none;
  box-shadow:var(--sh-glow);
}

.modcard .ic{
  display:inline-block;
  font-size:22px;
  line-height:1;
  transition:transform .2s ease;
}
.modcard:hover .ic{ transform:scale(1.08); }

.modcard h4{
  font-size:13px;
  margin:var(--sp-2) 0 var(--sp-1);
  color:var(--texto);
  font-weight:var(--fw-semibold);
  letter-spacing:.1px;
}
.modcard p{
  font-size:10.5px;
  color:var(--texto2);
  line-height:1.5;
}

/* Acentos por severidad — sobreescriben la barra ::before y el hover */
.modcard.ok::before,
.modcard.info::before{ background:var(--grad-azul); }
.modcard.ok:hover{ border-color:var(--azul); }

.modcard.success::before{ background:var(--grad-verde); }
.modcard.success:hover{ border-color:var(--verde); }
.modcard.success:focus-visible{ box-shadow:0 0 0 1px var(--verde), var(--sh-2); }

.modcard.warn::before,
.modcard.alerta::before{ background:linear-gradient(135deg,var(--ambar) 0%,#C77F12 100%); }
.modcard.warn:hover,
.modcard.alerta:hover{ border-color:var(--ambar); }
.modcard.warn:focus-visible,
.modcard.alerta:focus-visible{ box-shadow:0 0 0 1px var(--ambar), var(--sh-2); }

.modcard.crit::before,
.modcard.error::before{ background:var(--grad-rojo); }
.modcard.crit:hover,
.modcard.error:hover{ border-color:var(--rojo); }
.modcard.crit:focus-visible,
.modcard.error:focus-visible{ box-shadow:0 0 0 1px var(--rojo), var(--sh-2); }

/* Etiqueta "oculto" — píldora ámbar legible en ambos temas */
.modcard .tagOculto{
  position:absolute;
  top:10px;
  right:10px;
  padding:2px 6px;
  font-size:9px;
  font-weight:var(--fw-bold);
  border-radius:var(--r-pill);
  background:rgba(240,168,40,.16);
  color:#B45309;
  border:1px solid rgba(240,168,40,.35);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
[data-theme=dark] .modcard .tagOculto{
  background:rgba(240,168,40,.16);
  color:var(--ambar);
  border-color:rgba(240,168,40,.30);
}

/* Fallbacks: sin backdrop-filter o transparencia reducida → panel sólido */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .modcard{ background:var(--panel); }
}
@media (prefers-reduced-transparency: reduce){
  .modcard{
    background:var(--panel);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
@media (prefers-reduced-motion: reduce){
  .modcard,
  .modcard::before,
  .modcard .ic{ transition:none; }
  .modcard:hover{ transform:none; }
}

/* ===== LOGIN ===== */
/* ───── LOGIN ───── */
#overlay{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-3);
  background:var(--grad-hero);
  background-attachment:fixed;
}
#overlay::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 18% 12%, rgba(72,168,224,.28), transparent 60%),
    radial-gradient(55% 45% at 85% 88%, rgba(120,200,40,.18), transparent 60%);
  pointer-events:none;
}
#overlay .panel{
  position:relative;
  width:360px;max-width:100%;
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
  color:var(--texto);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--r-3);
  box-shadow:var(--sh-3);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  transform:translateZ(0);
  animation:loginIn .35s cubic-bezier(.16,.84,.44,1) both;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #overlay .panel{background:var(--panel)}
}
@media (prefers-reduced-transparency:reduce){
  #overlay .panel{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
}
#overlay h2{
  font-family:var(--ff);
  font-size:var(--fs-xl);font-weight:var(--fw-bold);
  letter-spacing:-.01em;color:var(--texto);
  margin:0 0 var(--sp-1);
}
#overlay p{
  font-family:var(--ff);
  font-size:var(--fs-sm);font-weight:var(--fw-regular);
  color:var(--texto2);margin:0 0 var(--sp-4);line-height:1.45;
}
#overlay input{
  width:100%;box-sizing:border-box;
  font-family:var(--ff);font-size:var(--fs-sm);color:var(--texto);
  padding:11px var(--sp-3);margin-bottom:var(--sp-3);
  background:var(--panel-2);
  border:1px solid var(--borde);
  border-radius:var(--r-1);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#overlay input::placeholder{color:var(--gris)}
#overlay input:hover{border-color:var(--azul)}
#overlay input:focus{
  outline:none;
  border-color:var(--azul);
  background:var(--panel);
  box-shadow:var(--sh-glow);
}
#overlay button{
  width:100%;box-sizing:border-box;cursor:pointer;
  font-family:var(--ff);font-size:var(--fs-base);font-weight:var(--fw-semibold);
  color:#fff;letter-spacing:.01em;
  padding:11px var(--sp-3);margin-top:var(--sp-1);
  background:var(--grad-azul);
  border:1px solid transparent;
  border-radius:var(--r-1);
  box-shadow:var(--sh-2);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
#overlay button:hover{
  filter:brightness(1.05);
  box-shadow:var(--sh-glow);
  transform:translateY(-1px);
}
#overlay button:active{transform:translateY(0) scale(.99);box-shadow:var(--sh-1)}
#overlay button:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
#loginError{
  display:none;
  font-family:var(--ff);font-size:var(--fs-xs);font-weight:var(--fw-medium);
  color:var(--rojo);
  margin-top:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  background:color-mix(in srgb, var(--rojo) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--rojo) 35%, transparent);
  border-radius:var(--r-1);
  line-height:1.4;
}
#loginError.show{display:block;animation:loginErr .25s ease both}
@keyframes loginIn{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes loginErr{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  #overlay .panel,#loginError.show{animation:none}
  #overlay button:hover,#overlay button:active{transform:none}
}

/* ===== FEEDBACK ===== */
/* ───── FEEDBACK: barra de progreso, toast, transición de páginas ───── */
/* barra de progreso superior (azul→verde) */
#loadbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad-azul);background:linear-gradient(90deg,var(--azul),var(--verde));z-index:300;opacity:0;border-radius:0 var(--r-pill) var(--r-pill) 0;box-shadow:0 0 8px rgba(72,168,224,.45)}
#loadbar.on{opacity:1;width:72%;transition:width 5s cubic-bezier(.08,.65,.15,1),opacity .15s ease}
#loadbar.done{opacity:0;width:100%;transition:width .25s ease,opacity .5s ease .25s}

/* transición de entrada de páginas */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#main.fade>*{animation:fadeUp .26s ease both}

/* toast — chrome glass, contraste AA, dark-first */
/* pointer-events:none SIEMPRE: el toast es informativo y NUNCA debe interceptar clics/toques.
   Vive fijo abajo-derecha (z-index 300), justo encima del footer del drawer de usuarios (el
   botón "Crear usuario"/"Guardar" queda en esa misma esquina): sin esto, tras mostrarse una
   vez el toast conserva su tamaño y —aunque invisible (opacity:0)— tapaba el botón, que solo
   respondía en su borde izquierdo (cerca de "Cancelar") hasta recargar. */
#toast{position:fixed;bottom:18px;right:18px;pointer-events:none;background:var(--glass-bg);color:var(--texto);border:1px solid var(--glass-border);backdrop-filter:blur(var(--glass-blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);padding:11px 16px 11px 14px;border-radius:var(--r-2);font-size:var(--fs-xs);font-weight:var(--fw-medium);box-shadow:var(--sh-3);border-left:3px solid var(--azul);z-index:300;opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
#toast.show{opacity:1;transform:none}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #toast{background:var(--panel)}
}
@media (prefers-reduced-transparency: reduce){
  #toast{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-reduced-motion: reduce){
  #loadbar.on,#loadbar.done,#toast{transition-duration:.01ms}
  #main.fade>*{animation:none}
}

/* ===== EDITING ===== */
/* ===== MODO DISEÑO — layout edit chrome (drop-in) ===== */
.gridLayout{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--sp-3);
  align-items:start;
  margin-top:var(--sp-3);
}
.gridLayout>.card{
  grid-column:span var(--sp,3);
  position:relative;
}
@media(max-width:1000px){
  .gridLayout>.card{grid-column:1/-1!important}
}

/* tarjeta en modo edición — outline discreto, sin glass detrás de datos */
.card.editing{
  outline:2px dashed var(--azul);
  outline-offset:3px;
  cursor:grab;
  user-select:none;
  touch-action:none;
  transition:outline-color .18s ease, box-shadow .2s ease, transform .18s ease;
}
.card.editing:hover{
  outline-color:var(--azul-h);
  box-shadow:var(--sh-2);
}
.card.editing.dragging{
  opacity:.5;
  cursor:grabbing;
  outline-style:solid;
  box-shadow:var(--sh-glow);
  transform:scale(.985);
}
.card.editing>*:not(.cardTools):not(.rsz){pointer-events:none}

/* barra flotante de herramientas — glass (chrome) */
.cardTools{
  position:absolute;
  top:-14px;
  right:12px;
  display:flex;
  gap:2px;
  z-index:6;
  padding:3px 5px;
  border-radius:var(--r-2);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  box-shadow:var(--sh-2);
  transform:translateZ(0);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cardTools{background:var(--panel)}
}
@media (prefers-reduced-transparency: reduce){
  .cardTools{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.cardTools button{
  border:none;
  background:none;
  cursor:pointer;
  font-size:var(--fs-xs);
  color:var(--texto2);
  padding:2px 6px;
  border-radius:var(--r-1);
  line-height:1.4;
  transition:background .15s ease, color .15s ease;
}
.cardTools button:hover{
  background:var(--panel-2);
  color:var(--azul);
}
.cardTools button:active{transform:translateY(.5px)}
.cardTools .mover{
  cursor:grab;
  color:var(--azul);
  font-weight:var(--fw-bold);
}
.cardTools .mover:active{cursor:grabbing}

/* manija de redimensionado — discreta, esquina */
.rsz{
  position:absolute;
  right:0;
  bottom:0;
  width:22px;
  height:22px;
  cursor:nwse-resize;
  z-index:7;
  color:var(--azul);
  font-size:13px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:0 3px 1px 0;
  touch-action:none;
  opacity:.7;
  transition:transform .18s ease, opacity .18s ease, color .15s ease;
}
.rsz:hover{
  transform:scale(1.3);
  opacity:1;
  color:var(--azul-h);
}
.rsz:active{transform:scale(1.15)}

/* presets de altura */
.hS .scroll{max-height:180px}.hM .scroll{max-height:320px}.hL .scroll{max-height:540px}
.hS svg{max-height:140px}.hM svg{max-height:210px}.hL svg{max-height:300px}
.hS .rkwrap{max-height:180px;overflow:auto}.hM .rkwrap{max-height:320px;overflow:auto}.hL .rkwrap{max-height:540px;overflow:auto}

/* barra de estado del modo diseño — glass (chrome) */
#editBar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-sm);
  color:var(--texto2);
  border-radius:var(--r-2);
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  box-shadow:var(--sh-1);
  transform:translateZ(0);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #editBar{background:var(--panel)}
}
@media (prefers-reduced-transparency: reduce){
  #editBar{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
}
#editBar b{color:var(--azul);font-weight:var(--fw-semibold)}

@media (prefers-reduced-motion: reduce){
  .card.editing,.cardTools button,.rsz{transition:none}
  .card.editing.dragging,.rsz:hover{transform:none}
}

/* ===== RESPA11Y ===== */
/* ───────── RESPONSIVE + ACCESIBILIDAD ───────── */

/* Scrim para off-canvas (chrome glass sutil sobre el velo) */
#scrim{
  display:none;position:fixed;inset:0;z-index:55;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;transition:opacity .2s ease;
}
#scrim.open{display:block;opacity:1}

/* Grids a 1 columna en pantallas medianas */
@media(max-width:1000px){
  .cols2,.cols3,.colsIg{grid-template-columns:1fr}
  .gridLayout>.card{grid-column:1/-1!important}
}

/* Aside off-canvas en móvil/tablet */
@media(max-width:880px){
  aside{
    transform:translateX(-100%);
    box-shadow:var(--sh-3);
    transition:transform .22s ease;
  }
  aside.open{transform:none}
  #scrim.open{display:block}
  .content{margin-left:0}
  #burger{display:block}
  .searchbox input{width:150px}
}

@media(max-width:680px){
  .factMeta,.factTotals{grid-template-columns:1fr}
}

/* ── Focus-visible rings consistentes (AA, sobre cualquier fondo) ── */
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--azul);
  outline-offset:2px;
  border-radius:var(--r-1);
}
#burger:focus-visible{
  outline:2px solid var(--azul);
  outline-offset:2px;
  background:var(--panel-2);
  color:var(--azul);
}
/* Ring sobre superficies glass/oscuras: halo extra para garantizar visibilidad */
.glass :focus-visible,
aside :focus-visible{
  outline:2px solid var(--side-act);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(72,168,224,.25);
}

/* ── Reduced motion: respeta preferencia del sistema ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  aside,.content,#scrim,#loadbar{transition:none!important}
  #main.fade>*{animation:none!important}
  #loadbar.on{transition:opacity .15s!important}
}

/* ── Ajustes de contraste alto: bordes y rings reforzados ── */
@media (prefers-contrast: more){
  .glass{
    background:var(--panel);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border-color:var(--texto2);
  }
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  a:focus-visible,
  [tabindex]:focus-visible{
    outline-width:3px;
    outline-offset:2px;
  }
  header,aside{border-color:var(--texto2)}
}

/* Soporte para forced-colors (modo alto contraste de Windows) */
@media (forced-colors: active){
  .glass{background:Canvas;border:1px solid CanvasText}
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  a:focus-visible{outline:2px solid Highlight}
}

/* ===== CIERRE / COHERENCIA ===== */
/* 1) FOCUS tematizado y único (mata los rgba crudos) */
:root{ --ring: var(--azul); --ring-soft: color-mix(in srgb, var(--azul) 35%, transparent); }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--ring); outline-offset:2px;
  box-shadow:0 0 0 3px var(--ring-soft) !important;
}

/* 2) Texto/enlace azul accesible en CLARO; botón primario con fill oscuro */
:root{ --azul-txt:#1E6FA8; }
h3 i,.hijos .nlink.act,a.link,.txt-accent{ color:var(--azul-txt); }
.btn.primary{ background:var(--grad-azul); background-color:transparent; }
:root .btn.primary{ background-image:linear-gradient(135deg,#2E8BC4 0%,#1E6FA8 100%); color:#fff; }
[data-theme="dark"] .btn.primary{ color:var(--navy); } /* navy sobre azul claro = AA */

/* 3) Grises informativos suben a AA (claro y oscuro) */
:root{ --gris:#5A6B82; }                 /* >=4.5 sobre panel/panel-2 */
[data-theme="dark"]{ --gris:#9AACC4; }   /* mantiene AA y jerarquía */

/* 4) Prohibido vidrio sobre datos y glass-anidado (1 sola capa de blur) */
table,.scroll,thead,tbody,tfoot,th,td,
.glass .glass,.card .card,.kpi .ico{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.scroll,table,th,td,tfoot td{ background-color:var(--panel); } /* opaco garantizado */
th,tfoot td{ background-color:var(--panel-2); }

/* 5) Coherencia de forma/elevación: tokens, nunca hex/rgba sueltos */
.card,.kpi,.glass,.modal .mbox{ border-radius:var(--r-3); box-shadow:var(--sh-2); }
.btn,.dpill,.chips span,.viewas select,.kpi .ico{ border-radius:var(--r-1); }
.nlink:hover,.hijos .nlink:hover{ background:color-mix(in srgb,var(--side-texto) 12%, transparent); }

/* ════════════════════════════════════════════════════════════════
   RE-SKIN v2 · "ABISAL COBALTO" — fusion fria (conceptos 3+4+5, tipografia 7)
   Indigo-navy-teal profundo · alto contraste · cobalto + teal + lavanda
   Inter Tight (display) + Inter (datos)
   Autor: Israel Hernandez Aguirre
   ════════════════════════════════════════════════════════════════ */

/* 1) FUNDACION — paleta fria fusion (redefine tokens => recolorea todo v1) */
:root{
  --fondo:#EDF1F7; --panel:#FFFFFF; --panel-2:#F2F5FB;
  --texto:#0E1422; --texto2:#41506A; --gris:#5C6675; --navy:#0E1422;
  --borde:#D8DFEA;
  --azul:#1556C0; --azul-h:#0E3E92; --azul-txt:#1556C0;     /* cobalto (de #4) */
  --verde:#0B7D54; --verde-h:#0A6A48; --verde-txt:#0B7D54;  /* esmeralda (de #5) */
  --rojo:#C42A38; --ambar:#9A6400;
  --teal:#0B7A82; --lavanda:#6A5BD6;                          /* acentos 5 y 3 */
  --side:#0F1A30; --side-texto:#AEB8D4; --side-act:#3D7BFF;   /* indigo-navy + cobalto */
  --glass-bg:rgba(237,241,247,.66); --glass-border:rgba(255,255,255,.45); --glass-blur:14px;
  --glass-overlay:rgba(255,255,255,.95); --glass-overlay-blur:28px;
  --sh-1:0 1px 2px rgba(14,20,34,.07), 0 1px 3px rgba(14,20,34,.06);
  --sh-2:0 6px 18px -6px rgba(14,20,34,.16), 0 2px 5px rgba(14,20,34,.08);
  --sh-3:0 18px 44px -14px rgba(14,20,34,.30), 0 4px 10px rgba(14,20,34,.10);
  --grad-hero:linear-gradient(140deg,#0F1A30 0%,#143A86 48%,#0E6B72 100%);
}
[data-theme="dark"]{
  --fondo:#0A1422; --panel:#121E33; --panel-2:#182740;
  --texto:#EEF2FA; --texto2:#AAB8D2; --gris:#7C89A4; --navy:#EEF2FA;
  --borde:#243553;
  --azul:#5C9BFF; --azul-h:#84B4FF; --azul-txt:#8FB6FF;
  --verde:#34D399; --verde-h:#5FE0AE; --verde-txt:#34D399;
  --rojo:#FF6B72; --ambar:#E8AA42;
  --teal:#2DD4BF; --lavanda:#B6ABFF;
  --side:#070E1B; --side-texto:#93A2C0; --side-act:#5C9BFF;
  --glass-bg:rgba(18,30,51,.60); --glass-border:rgba(255,255,255,.10);
  --glass-overlay:rgba(16,26,45,.95);
  --grad-hero:linear-gradient(140deg,#070E1B 0%,#122A52 48%,#0E6B72 100%);
}

/* 2) TIPOGRAFIA — Inter Tight (display) + Inter (cuerpo/datos) */
:root{
  --font-display:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff:var(--font-body);
}
body,.btn,input,select,textarea,table,.nlink,.filtro label{ font-family:var(--font-body); }
h2,#pageTitle,h3,.cardHead h3,.logo,.logo .lg-txt,#overlay h2,
.kpi .big,.big,.modcard h4,.factHead .empresa,.ttile b{
  font-family:var(--font-display); letter-spacing:-.02em; font-weight:700;
}
.num,td,th,tfoot td,.kpi .big,.big,.dpill,.valr,.pctt,.matrizMes td{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* 3) GLASS OVERLAY — opaco: NO se lee el texto del fondo a traves del cristal */
.sugs,.msel-pop,.modal .mbox,.mbox-fact,.modalCentros{
  background:var(--glass-overlay) !important;
  backdrop-filter:blur(var(--glass-overlay-blur)) saturate(135%) contrast(1.05) !important;
  -webkit-backdrop-filter:blur(var(--glass-overlay-blur)) saturate(135%) contrast(1.05) !important;
  box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.4);
  border:1px solid var(--glass-border);
}
.modal{ backdrop-filter:blur(4px) brightness(.92); -webkit-backdrop-filter:blur(4px) brightness(.92); }
@media (prefers-reduced-transparency:reduce){
  .sugs,.msel-pop,.modal .mbox,.mbox-fact,.modalCentros{
    background:var(--panel) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  .modal{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* 4) FORMA + ACENTOS — alto contraste, multi-acento (teal/lavanda) */
.card,.kpi{ box-shadow:var(--sh-2); border:1px solid var(--borde); }
.kpi::before{ background:linear-gradient(90deg,var(--azul),var(--teal)) !important; height:3px !important; opacity:.95; }
#liveStatus::before{ background:var(--teal) !important; box-shadow:0 0 0 0 color-mix(in srgb,var(--teal) 55%,transparent) !important; } /* latido bioluminiscente */
#liveStatus b{ color:var(--teal) !important; }
.rk.sel{ border-left:3px solid var(--lavanda) !important; background:color-mix(in srgb,var(--lavanda) 9%,transparent) !important; }
.rk.sel .barra i,.barra i{ background:linear-gradient(90deg,var(--azul),var(--teal)) !important; }
.tipoPill.ncp{ background:color-mix(in srgb,var(--rojo) 14%,transparent) !important; color:var(--rojo) !important; }

/* 5) FONDO — limpio con profundidad fria sutil (sin grano, disciplina alto contraste) */
body{ background:var(--fondo); }
[data-theme="dark"] body{
  background:
    radial-gradient(60vmax 50vmax at 78% -8%, rgba(14,107,114,.16), transparent 60%),
    radial-gradient(55vmax 45vmax at 8% 105%, rgba(61,123,255,.12), transparent 60%),
    var(--fondo);
  background-attachment:fixed;
}

/* 6) AJUSTES FINOS — iconos Phosphor + botón primario cobalto + cierre AA */
.nico{display:inline-flex;align-items:center}
.nico svg{opacity:.92}
.nodo>.nlink.act .nico svg{opacity:1}
.modcard .ic svg{display:block}
:root .btn.primary{ background-image:linear-gradient(135deg,#1F6FD6 0%,#1556C0 100%); color:#fff; border-color:transparent; }
[data-theme="dark"] .btn.primary{ background-image:linear-gradient(135deg,#5C9BFF 0%,#3D7BEF 100%); color:#06101F; }
.dpill.pos{ color:var(--verde-txt); } .dpill.neg{ color:var(--rojo); }

/* 7) TEMA POR LÍNEA — color primario rotativo (Admin → Configuración → Color de la plataforma).
   Cuando hay una línea activa (html[data-linea]), lo hardcodeado en cobalto pasa a seguir
   las variables que fija aplicarTemaLinea() en JS. Sin línea activa NADA cambia.
   29-jul: se añade html[data-modulo] a CADA selector — es el atributo que pone
   aplicarColorModulo(). Sin esto, el color por módulo recoloreaba el chrome pero
   dejaba en cobalto fijo todo lo de aquí abajo: .btn.primary (el "Filtrar" de
   dentro de los reportes), las barras de ranking y el punto de "En vivo". */
html[data-linea] .btn.primary,
html[data-modulo] .btn.primary{ background-image:linear-gradient(135deg,var(--azul-2,var(--azul)) 0%,var(--azul) 100%) !important; }
html[data-linea] .kpi::before,
html[data-modulo] .kpi::before{ background:linear-gradient(90deg,var(--azul),var(--azul-2,var(--teal))) !important; }
html[data-linea] .rk.sel,
html[data-modulo] .rk.sel{ border-left-color:var(--azul) !important; background:color-mix(in srgb,var(--azul) 9%,transparent) !important; }
html[data-linea] .rk.sel .barra i, html[data-linea] .barra i,
html[data-modulo] .rk.sel .barra i, html[data-modulo] .barra i{ background:linear-gradient(90deg,var(--azul),var(--azul-2,var(--teal))) !important; }
html[data-linea] #liveStatus::before,
html[data-modulo] #liveStatus::before{ background:var(--azul) !important; box-shadow:0 0 0 0 color-mix(in srgb,var(--azul) 55%,transparent) !important; }
html[data-linea] #liveStatus b,
html[data-modulo] #liveStatus b{ color:var(--azul) !important; }
html[data-linea],
html[data-modulo]{ --grad-hero:linear-gradient(140deg,#0F1A30 0%,var(--azul-h) 48%,var(--azul) 100%); }

/* ===== UI-LAYER-ECC · capa interacción/motion (skills ECC) ===== */
/* ===== Abisal Cobalto · capa de interacción (aditiva, sutil) ===== */
:root{
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.4,.64,1);
  --d-1: .12s;   /* press / feedback */
  --d-2: .22s;   /* hover */
  --d-3: .38s;   /* entrada de página */
}

/* --- Botones: lift + press + brillo especular --- */
.btn{
  position:relative; overflow:hidden;
  transition: transform var(--d-2) var(--ease-out),
              box-shadow var(--d-2) var(--ease-out),
              border-color var(--d-2) var(--ease-out),
              background var(--d-2) var(--ease-out);
}
.btn::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .6s var(--ease-out); opacity:0;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--sh-2); }
.btn:hover::after{ transform:translateX(120%); opacity:1; }
.btn:active{ transform:translateY(0) scale(.98); transition-duration:var(--d-1); }
.btn.primary:hover{ box-shadow:var(--sh-2), var(--sh-glow); }

/* --- Nav activo: indicador animado --- */
aside .nodo>.nlink{
  position:relative;
  transition: background var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out);
}
aside .nodo>.nlink::before{
  content:""; position:absolute; left:0; top:50%;
  width:3px; height:0; transform:translateY(-50%);
  border-radius:var(--r-pill); background:var(--azul);
  transition:height var(--d-3) var(--ease-spring), opacity var(--d-2) var(--ease-out);
  opacity:0;
}
aside .nodo>.nlink:hover{ background:var(--glass-bg); }
aside .nodo>.nlink.act::before{ height:60%; opacity:1; }
/* JERARQUÍA DEL MENÚ (27-jul-2026): el ÚNICO elemento fuerte es el botón verde POS. El item
   ACTIVO se marca sutil — barra de acento lateral (::before) + fondo tenue + texto en negrita,
   SIN el relleno de gradiente ni el glow que competían con el botón. Con `aside` gana la cascada. */
aside .nodo>.nlink.act{
  background:color-mix(in srgb, var(--azul) 11%, transparent);
  color:var(--texto);
  font-weight:var(--fw-bold);
  box-shadow:none;
}
aside .nodo>.nlink.act .caret,
aside .nodo>.nlink.act .lock{ color:var(--azul); }
aside .qitem.act{
  background:color-mix(in srgb, var(--azul) 11%, transparent);
  color:var(--texto);
  font-weight:var(--fw-bold);
  box-shadow:inset 3px 0 0 var(--azul);   /* misma barra de acento que los módulos */
}
aside .qitem.act .qico{ color:var(--azul); }
aside .nodo>.nlink.act .nico{ transition:transform var(--d-2) var(--ease-spring); transform:scale(1.06); }
aside .nodo>.nlink .nico{ transition:transform var(--d-2) var(--ease-out); }
aside .nodo>.nlink:hover .nico{ transform:translateX(1px); }

/* --- Tarjetas: hover-lift + brillo especular del glass --- */
.card{
  position:relative;
  transition: transform var(--d-2) var(--ease-out),
              box-shadow var(--d-2) var(--ease-out),
              border-color var(--d-2) var(--ease-out);
}
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
             rgba(255,255,255,.08), transparent 45%);
  transition:opacity var(--d-3) var(--ease-out);
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); border-color:var(--glass-border); }
.card:hover::before{ opacity:1; }

/* --- KPI: el número listo para count-up --- */
.kpi .big{ transition:opacity var(--d-3) var(--ease-out); font-variant-numeric:tabular-nums; }

/* --- Entrada suave de #main al navegar --- */
#main.is-entering{ animation:mainIn var(--d-3) var(--ease-out) both; }
@keyframes mainIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
#main.is-entering .card{ animation:cardIn var(--d-3) var(--ease-out) both; }
#main.is-entering .card:nth-child(2){ animation-delay:.04s }
#main.is-entering .card:nth-child(3){ animation-delay:.08s }
#main.is-entering .card:nth-child(4){ animation-delay:.12s }
#main.is-entering .card:nth-child(n+5){ animation-delay:.16s }
@keyframes cardIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* --- Chip: feedback ligero --- */
.chip{ transition:transform var(--d-1) var(--ease-out), background var(--d-2) var(--ease-out); }
.chip:active{ transform:scale(.96); }

/* --- Filas de tabla: realce sobrio --- */
tbody tr{ transition:background var(--d-2) var(--ease-out); }
tbody tr:hover{ background:var(--glass-bg); }

/* --- Ripple (lo dibuja el JS, opcional) --- */
.btn .ripple{
  position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
  background:rgba(255,255,255,.28); animation:ripple .6s var(--ease-out) forwards;
}
@keyframes ripple{ to{ transform:scale(2.6); opacity:0; } }

/* --- Foco accesible y coherente --- */
.btn:focus-visible,
aside .nodo>.nlink:focus-visible,
.chip:focus-visible,
.card:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--azul);
}

/* --- Respeto total a quien reduce el movimiento --- */
@media (prefers-reduced-motion: reduce){
  .btn, .card, .chip, aside .nodo>.nlink, aside .nodo>.nlink .nico,
  #main.is-entering, #main.is-entering .card, .kpi .big, tbody tr{
    animation:none !important;
    transition:background .12s linear, color .12s linear,
               border-color .12s linear, box-shadow .12s linear !important;
    transform:none !important;
  }
  .btn::after, .card::before, .btn .ripple{ display:none !important; }
  .btn:hover, .card:hover{ transform:none !important; }
  aside .nodo>.nlink.act::before{ transition:none !important; }
}
/* ── Login: split editorial farmacéutico (Estilo 3) ── */
#overlay{
  background:
    radial-gradient(1100px 600px at 100% -10%,#EAF4FC 0%,rgba(234,244,252,0) 60%),
    radial-gradient(900px 500px at -10% 110%,#EEF8E4 0%,rgba(238,248,228,0) 55%),
    #F6F8FC;
  align-items:stretch;padding:0;
}
#overlay::before{display:none}
.loginCard{display:grid;grid-template-columns:1.05fr 1fr;width:100%;border-radius:0;box-shadow:none;animation:loginIn .45s cubic-bezier(.16,.84,.44,1) both}
/* ── Panel de marca (izquierda) ── */
.loginBrand{position:relative;overflow:hidden;background:radial-gradient(120% 120% at 12% 8%,#1b3358 0%,transparent 55%),radial-gradient(130% 130% at 92% 96%,#0c2a3f 0%,transparent 52%),linear-gradient(155deg,#0c1426 0%,#0F172A 42%,#102a40 100%);padding:clamp(2.4rem,4vw,4.2rem);display:flex;flex-direction:column;isolation:isolate}
.lb-glow{position:absolute;border-radius:50%;filter:blur(8px);pointer-events:none;z-index:0}
.lb-glow-a{width:420px;height:420px;right:-130px;top:-120px;background:radial-gradient(circle,rgba(72,168,224,.30),transparent 64%)}
.lb-glow-b{width:380px;height:380px;left:-120px;bottom:-130px;background:radial-gradient(circle,rgba(120,200,40,.20),transparent 64%)}
.lb-pattern{position:absolute;inset:0;z-index:0;pointer-events:none}
.lb-inner{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:2.4rem}
.lb-wm{display:inline-flex;align-items:center;gap:.72rem}
.lb-wm .mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(140deg,#48A8E0,#2f86c4);box-shadow:0 8px 22px -8px rgba(72,168,224,.7),inset 0 1px 0 rgba(255,255,255,.35);flex:none}
.lb-wm .mark svg{width:21px;height:21px;display:block}
.lb-wm .wname{font-size:1.18rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.lb-wm .dot{color:#48A8E0}.lb-wm b{color:#78C828;font-weight:800}
.lb-lead{max-width:30ch}
#overlay .lb-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#48A8E0;margin:0 0 1.4rem}
#overlay .lb-eyebrow::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,#48A8E0,transparent);border-radius:2px}
.lb-headline{margin:0 !important;font-weight:800 !important;font-size:clamp(2.3rem,4.6vw,3.6rem) !important;line-height:1.04 !important;letter-spacing:-.03em !important;color:#fff !important}
.lb-headline em{font-style:normal;background:linear-gradient(100deg,#48A8E0 12%,#78C828 96%);-webkit-background-clip:text;background-clip:text;color:transparent}
#overlay .lb-subhead{font-size:1rem !important;line-height:1.6 !important;color:#cdddf0 !important;max-width:40ch;margin:1.5rem 0 0 !important}
.lb-stats{display:flex;gap:2.4rem;flex-wrap:wrap;padding-top:1.6rem;border-top:1px solid rgba(205,221,240,.16)}
.lb-stat .sn{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1}
.lb-stat .sn .u{color:#78C828}
.lb-stat .sl{margin-top:.4rem;font-size:.78rem;font-weight:500;letter-spacing:.02em;color:#cdddf0}
/* ── Panel de formulario (derecha) ── */
.loginForm{background:#fff;display:flex;align-items:center;justify-content:center;padding:clamp(2rem,4vw,3.5rem);position:relative}
.loginForm::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,#e2e8f0 18%,#e2e8f0 82%,transparent)}
.lf-inner{width:100%;max-width:410px}
.lf-top{margin-bottom:2.6rem}
.lf-pill{display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:600;color:#475569;background:#f6f8fc;border:1px solid #e2e8f0;padding:.42rem .78rem;border-radius:999px}
.lf-pill .live{width:7px;height:7px;border-radius:50%;background:#78C828;box-shadow:0 0 0 3px rgba(120,200,40,.18)}
.lf-title{margin:0 0 .7rem !important;font-size:1.85rem !important;font-weight:800 !important;letter-spacing:-.025em;color:#0F172A !important}
#overlay .lf-sub{font-size:.98rem !important;line-height:1.55 !important;color:#475569 !important;margin:0 0 2.1rem !important}
.lf-fgroup{display:grid;gap:.5rem;margin-bottom:1.15rem}
.lf-label{font-size:.82rem;font-weight:600;color:#0F172A;letter-spacing:.005em;display:block}
.lf-wrap{position:relative;display:flex;align-items:center}
.lf-ico{position:absolute;left:14px;width:18px;height:18px;color:#64748b;pointer-events:none;transition:color .18s ease}
.lf-wrap input{padding-left:2.7rem !important;border-radius:11px !important;margin-bottom:0 !important}
.lf-wrap:focus-within .lf-ico{color:#48A8E0}
#keyInput{padding-right:2.7rem !important}
/* #overlay .lf-eye (id+clase) supera a la regla base "#overlay button" para no
   heredar width:100%, fondo azul ni sombra del botón principal. */
#overlay .lf-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;min-width:0;margin:0;padding:0;display:grid;place-items:center;border:0;background:transparent;color:#64748b;border-radius:8px;cursor:pointer;box-shadow:none;transition:color .15s,background .15s}
#overlay .lf-eye:hover{color:#0F172A;background:rgba(15,23,42,.05);box-shadow:none;transform:translateY(-50%) !important}
#overlay .lf-eye:active{transform:translateY(-50%) !important}
#overlay .lf-eye:focus-visible{outline:2px solid #48A8E0;outline-offset:1px}
#overlay .lf-eye svg{width:18px;height:18px;display:block}
#overlay .lf-eye .eye-off{display:none}
#overlay .lf-eye[aria-pressed="true"] .eye-on{display:none}
#overlay .lf-eye[aria-pressed="true"] .eye-off{display:block}
.lf-row{display:flex;align-items:center;justify-content:space-between;margin:.2rem 0 1.5rem}
.lf-check{display:inline-flex;align-items:center;gap:.55rem;font-size:.86rem;color:#475569;cursor:pointer;user-select:none}
.lf-check input{width:18px !important;height:18px !important;border:1.5px solid #cbd5e1 !important;border-radius:6px !important;background:#fff !important;cursor:pointer;flex:none;margin:0 !important;padding:0 !important;box-shadow:none !important;accent-color:#48A8E0}
.lf-link{font-size:.86rem;font-weight:600;color:#48A8E0;text-decoration:none;transition:color .15s ease}
.lf-link:hover{color:#2f86c4;text-decoration:underline;text-underline-offset:3px}
#overlay .loginForm .btn{width:100%;margin-top:0;border:0;padding:1rem 1.2rem;border-radius:11px;height:auto;font-size:1rem;font-weight:700;letter-spacing:.01em}
.lf-secure{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.6rem;font-size:.8rem;color:#64748b}
.lf-secure svg{width:14px;height:14px;color:#78C828}
.lf-foot{margin-top:2.3rem;padding-top:1.4rem;border-top:1px solid #e2e8f0;font-size:.78rem;color:#64748b;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
/* ── Responsive escalonado del login ── */
/* Las media queries por altura (más abajo) garantizan que el panel quepa
   en cualquier pantalla sin recortarse ("mocho") ni mostrar scroll interno. */
.loginBrand{min-height:0}
.loginForm{min-height:0}
/* Laptop / pantallas intermedias por ANCHO: compactar el split progresivamente
   (el split de 2 columnas se conserva hasta 700px para no dejar el formulario
   angosto y centrado con huecos a los lados). */
@media(max-width:1080px){
  .loginBrand{padding:2.6rem 2.2rem}
  .lb-headline{font-size:clamp(2rem,3.6vw,2.7rem) !important}
  .lb-subhead{font-size:.95rem !important;margin-top:1.2rem !important}
  .lb-stats{gap:1.5rem}
  .lb-stat .sn{font-size:1.35rem}
  .loginForm{padding:2.6rem 2.2rem}
  .lf-inner{max-width:380px}
}
@media(max-width:880px){
  .loginBrand{padding:2.2rem 1.8rem}
  .lb-headline{font-size:clamp(1.8rem,3.4vw,2.3rem) !important;line-height:1.12 !important}
  .lb-subhead{display:none}                      /* gana el titular + stats */
  .lb-stats{gap:1.2rem}
  .lb-stat .sn{font-size:1.2rem}
  .lb-stat .sl{font-size:.7rem}
  .loginForm{padding:2.2rem 1.8rem}
  .lf-inner{max-width:360px}
  .lf-top{margin-bottom:1.5rem}
  .lf-sub{margin-bottom:1.6rem !important}
}
/* Apilar SOLO en pantallas estrechas reales (móvil / tablet portrait).
   MOBILE-FIRST (70-80% del tráfico): el header de marca se reduce a una barra
   compacta (logo + categoría); el bloque de marketing (titular/stats) se
   reserva para el split de escritorio. Así el FORMULARIO —la acción real—
   queda "front and center", visible sin scroll (above-the-fold). */
@media(max-width:700px){
  #overlay{display:block;overflow-y:auto;background:#fff;padding:0}
  .loginCard{display:flex;flex-direction:column;width:100%;max-width:none;min-height:100dvh;border-radius:0;box-shadow:none}
  .loginBrand{flex:none;padding:1.4rem 1.6rem;overflow:visible}
  .lb-inner{gap:.5rem;justify-content:flex-start}
  .lb-headline,.lb-subhead,.lb-stats{display:none}   /* no dominar el primer pantallazo */
  .lb-eyebrow{margin:0 !important}
  .lb-pattern{opacity:.45}
  .loginForm{flex:1;flex-direction:column;align-items:center;justify-content:flex-start;padding:1.8rem 1.6rem 2.2rem;overflow:visible}
  .loginForm::before{display:none}
  .lf-inner{max-width:440px;width:100%;margin:0}
  .lf-top{margin-bottom:1.2rem}
  .lf-title{font-size:1.7rem !important}
  .lf-sub{margin-bottom:1.5rem !important}
}
/* Móvil por ANCHO: aún más ajustado para garantizar el botón above-the-fold */
@media(max-width:480px){
  .loginBrand{padding:1.25rem 1.3rem}
  .lf-title{font-size:1.55rem !important}
  .lf-sub{font-size:.92rem !important;margin-bottom:1.3rem !important}
  .lf-wrap input{font-size:16px !important}      /* evita el zoom automático en iOS */
  .lf-foot{flex-direction:column;gap:.35rem}
}
@media(max-width:360px){
  .loginForm{padding:1.6rem 1.2rem 2rem}
}
/* ── Adaptación por ALTURA (clave en pantallas con escala Windows 125/150%
   o ventanas no maximizadas): compacta el panel para que NUNCA se corte ── */
/* Adaptación por ALTURA — SOLO en modo escritorio (split, ≥701px), para no
   pisar el header compacto del móvil apilado (que ya gestiona su propia altura
   vía scroll del overlay). */
@media(min-width:701px) and (max-height:880px){
  .loginBrand{padding-top:2.4rem;padding-bottom:2.4rem}
  .lb-inner{gap:1.6rem}
  .lb-headline{font-size:clamp(1.9rem,3vw,2.8rem) !important}
  .lb-subhead{font-size:.95rem !important;margin-top:1.1rem !important;line-height:1.5 !important}
  .lb-stats{padding-top:1.2rem}
  .lb-stat .sn{font-size:1.35rem}
}
@media(min-width:701px) and (max-height:720px){
  .loginBrand{padding-top:1.9rem;padding-bottom:1.9rem}
  .lb-inner{gap:1.1rem}
  .lb-eyebrow{margin-bottom:.8rem !important}
  .lb-headline{font-size:clamp(1.7rem,2.6vw,2.25rem) !important;line-height:1.12 !important}
  .lb-subhead{display:none}                      /* prioriza titular + stats */
  .lb-stats{padding-top:1rem;gap:1.6rem}
  .lb-stat .sn{font-size:1.25rem}
  .lb-stat .sl{font-size:.72rem}
}
@media(min-width:701px) and (max-height:580px){
  .lb-headline{font-size:1.7rem !important}
  .lb-stats{display:none}                        /* última prioridad: ocultar stats */
  .lb-pattern{display:none}
  .loginBrand{justify-content:center}
}
/* ───────── Banners estandarizados ───────── */
.bnrSlot{margin:0 0 10px;text-align:center}
.bnrSlot img{max-width:100%;height:auto;border-radius:10px;display:block;margin:0 auto;box-shadow:var(--sh-1)}
#bnrMarquee{overflow:hidden;white-space:nowrap;background:var(--panel);border:1px solid var(--borde);border-radius:10px}
#bnrMarquee .mq{display:inline-block;padding:6px 0;animation:bnrMq 22s linear infinite}
#bnrMarquee img{display:inline-block;height:60px;width:auto;border-radius:6px;box-shadow:none;margin:0;vertical-align:middle}
@keyframes bnrMq{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
#bnrSide{position:fixed;right:14px;bottom:14px;z-index:40;width:170px}
#bnrSide img{width:100%;height:auto;border-radius:10px;box-shadow:var(--sh-2)}
@media (prefers-reduced-motion:reduce){#bnrMarquee .mq{animation:none}}
@media (max-width:1200px){#bnrSide{display:none!important}}
/* ───────── Guía Terapéutica LHA ───────── */
.guiaSearch{flex:1;min-width:200px;max-width:440px;border:1px solid var(--borde);border-radius:10px;padding:9px 12px;font-size:13px;background:var(--panel-2,var(--fondo));color:var(--texto);outline:none}
.guiaSearch:focus{border-color:var(--azul);box-shadow:0 0 0 3px rgba(72,168,224,.15)}
.guiaMeta{font-size:11.5px;color:var(--texto2);margin:8px 0 2px}
.guiaList{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:7px;margin-top:10px;max-height:64vh;overflow:auto}
.guiaItem{display:flex;align-items:center;gap:7px;text-align:left;border:1px solid var(--borde);background:var(--panel);border-radius:9px;padding:9px 11px;cursor:pointer;font-size:12.5px;color:var(--texto);transition:border-color .15s,background .15s}
.guiaItem:hover{border-color:var(--azul);background:rgba(72,168,224,.06)}
.guiaItem .giN{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.guiaN{flex:none;font-size:10px;font-weight:700;background:var(--fondo);border:1px solid var(--borde);border-radius:99px;padding:1px 7px;color:var(--texto2)}
.guiaRef{font-weight:400;color:var(--gris);font-size:11px}
.guiaVia{flex:none;font-size:9.5px;color:var(--azul);background:rgba(72,168,224,.12);border-radius:99px;padding:1px 6px;white-space:nowrap}
.guiaVia.gv2{color:var(--verde);background:rgba(120,200,40,.14)}
.guiaItem.prod{border-left:3px solid var(--verde)}
.guiaItem.prod:hover{border-color:var(--verde);background:rgba(120,200,40,.06)}
/* patologías en ficha 360 */
.patChips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.patChip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--borde);background:var(--panel);border-radius:99px;padding:5px 7px 5px 12px;cursor:pointer;font-size:12px;color:var(--texto);transition:border-color .15s,background .15s}
.patChip:hover{border-color:var(--azul);background:rgba(72,168,224,.07)}
.patChip .pcB{font-size:10px;font-weight:700;background:var(--azul);color:#fff;border-radius:99px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px}
.patNote{font-size:11px;color:var(--texto2);margin-top:9px;line-height:1.5}
/* modal guía */
.gModH{font-size:17px;margin:0 0 2px;font-weight:700}
.gModSub{font-size:11.5px;color:var(--texto2);margin:0 0 12px;line-height:1.5}
.guiaAlias{font-size:11px;color:var(--gris);margin-bottom:8px}
.gProds{display:flex;flex-direction:column;gap:9px}
.gProd{border:1px solid var(--borde);border-radius:10px;padding:10px 12px;background:var(--fondo)}
.gpHead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.gpNom{font-size:13.5px;color:var(--texto)}
.gProd .gpNom[onclick]{cursor:pointer;color:var(--azul);text-decoration:underline;text-underline-offset:2px}
.gpForma{font-size:10.5px;color:var(--gris)}
.gpForma2{font-size:12px;color:var(--gris);margin-bottom:8px}
.gpComp,.gpInd,.gpField{font-size:11.5px;color:var(--texto2);margin-top:6px;line-height:1.6}
.gpLbl{font-weight:700;color:var(--texto)}
.gpNoComp{color:var(--gris);font-style:italic}
.compChip{display:inline-block;font-size:10.5px;background:rgba(72,168,224,.10);border:1px solid rgba(72,168,224,.22);color:var(--texto);border-radius:7px;padding:1px 6px;margin:2px 3px 0 0}
.gpObs{margin-top:9px;font-size:11.5px}
.gpObs summary{cursor:pointer;font-weight:700;color:var(--texto);font-size:12px}
.gpObs>div{margin-top:6px;color:var(--texto2);line-height:1.55;max-height:220px;overflow:auto}
.gpTrata{margin-top:11px}
.trataWrap{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;max-height:150px;overflow:auto}
.trataChip{font-size:10.5px;border:1px solid var(--borde);background:var(--panel);border-radius:99px;padding:3px 9px;cursor:pointer;color:var(--azul)}
.trataChip:hover{background:rgba(72,168,224,.1)}
/* ── Botón "Más" expandible de la ficha 360 ── */
.fabMas{display:inline-flex;align-items:center;margin:12px 0 0;padding:5px;border:1px solid var(--borde);border-radius:99px;background:var(--panel);box-shadow:var(--sh-1);max-width:100%;overflow:hidden}
.fabBtn{display:inline-flex;align-items:center;gap:6px;border:none;background:linear-gradient(135deg,var(--azul),var(--azul-2,#2f86c4));color:#fff;font-weight:700;font-size:12.5px;border-radius:99px;padding:8px 16px;cursor:pointer;white-space:nowrap;flex:none}
.fabBtn .fbI{font-size:15px;line-height:1;transition:transform .4s ease}
.fabMas:hover .fbI,.fabMas.open .fbI{transform:rotate(135deg)}
.fabItem{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;border:1px solid var(--borde);background:var(--fondo);color:var(--texto);font-size:12px;font-weight:600;border-radius:99px;padding:8px 0;margin:0;cursor:pointer;transition:max-width .45s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * .07s),opacity .35s ease calc(var(--i,0) * .07s),padding .45s ease,margin .45s ease,background .15s,border-color .15s}
.fabMas:hover .fabItem,.fabMas.open .fabItem{max-width:260px;opacity:1;padding:8px 14px;margin-left:7px}
.fabItem:hover{border-color:var(--azul);background:rgba(72,168,224,.08);color:var(--azul)}
.fabItem.act{border-color:var(--azul);background:var(--azul);color:#fff}
.fabItem.act .fbN{background:#fff;color:var(--azul)}
.fbN{display:inline-block;font-size:9.5px;font-weight:800;background:var(--azul);color:#fff;border-radius:99px;min-width:15px;text-align:center;padding:0 5px;margin-left:2px}
#fabPanel{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .3s ease,margin .3s ease}
#fabPanel.open{max-height:2200px;opacity:1;margin-top:12px}
.fabCard{animation:fabIn .35s ease}
@keyframes fabIn{from{transform:translateY(-6px)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
tr.sel-row td{background:color-mix(in srgb,var(--azul) 10%,transparent)!important}
.flashSec{animation:flashSec 1.1s ease}
@keyframes flashSec{0%{box-shadow:0 0 0 0 rgba(72,168,224,.55)}100%{box-shadow:0 0 0 10px rgba(72,168,224,0)}}
/* inputs del editor de configuración (sistema de puntos) */
.ptcF{padding:5px 7px;border:1px solid var(--borde);border-radius:6px;background:var(--panel);color:var(--texto);font-size:12px;font-family:inherit}
.ptcF:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 2px rgba(72,168,224,.15)}
#ptCfgAdmin td,#ptCfgAdmin th{padding:5px 6px}
/* fila de totales del sistema de puntos (fija al fondo del scroll) */
.ptTot td{position:sticky;bottom:0;background:var(--panel);font-weight:700;border-top:2px solid var(--azul);font-size:12px;z-index:1}
/* ── Módulo Administración de usuarios ── */
.usrAv{width:32px;height:32px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--azul),var(--azul-2,#2d7fb8));color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.btnMini{border:1px solid var(--borde);background:var(--panel);border-radius:7px;padding:3px 8px;cursor:pointer;font-size:12px;color:var(--texto);transition:border-color .15s,background .15s}
.btnMini:hover{border-color:var(--azul);background:rgba(72,168,224,.08)}

/* ── Menú "📄 Certificados" (Ficha 360) ── */
.certMenuItem{display:block;width:100%;text-align:left;padding:10px 14px;border:none;background:none;cursor:pointer;font-size:12.5px;color:var(--texto);font-family:inherit;white-space:nowrap}
.certMenuItem:hover{background:var(--fondo)}
.certMenuItem+.certMenuItem{border-top:1px solid var(--borde)}
.dscrim{position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:255;opacity:0;visibility:hidden;transition:opacity .25s}
.dscrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100vh;width:460px;max-width:94vw;background:var(--panel);border-left:1px solid var(--borde);box-shadow:-10px 0 40px rgba(15,23,42,.18);z-index:256;transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawHead{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--borde);font-size:15px}
.drawHead .x{cursor:pointer;color:var(--gris);font-size:16px}
.drawBody{flex:1;overflow-y:auto;padding:14px 18px}
.drawFoot{display:flex;gap:8px;justify-content:flex-end;padding:13px 18px;border-top:1px solid var(--borde)}
.drawSec{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--azul);margin:16px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--borde)}
.drawSec:first-child{margin-top:0}
.fl{display:block;font-size:11.5px;font-weight:600;color:var(--texto);margin:9px 0 4px}
.fi{width:100%;box-sizing:border-box;border:1px solid var(--borde);border-radius:8px;padding:8px 10px;font-size:13px;background:var(--panel-2,var(--fondo));color:var(--texto);outline:none}
.fi:focus{border-color:var(--azul);box-shadow:0 0 0 3px rgba(72,168,224,.15)}
.fi[readonly]{background:var(--fondo);color:var(--gris)}
.fchk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--texto);margin-top:8px;cursor:pointer}
.permWrap{border:1px solid var(--borde);border-radius:10px;padding:4px 6px;max-height:240px;overflow:auto}
.permG{border-bottom:1px solid var(--borde)}
.permG:last-child{border-bottom:none}
.permGH{display:flex;align-items:center;gap:7px;padding:7px 4px;cursor:pointer;font-size:12.5px}
.permGH .permCnt{margin-left:auto;font-size:10px;color:var(--gris);background:var(--fondo);border:1px solid var(--borde);border-radius:99px;padding:0 7px}
.permH{display:flex;flex-wrap:wrap;gap:4px 12px;padding:0 6px 8px 26px}
.permItem{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--texto2);cursor:pointer}
.msWrap{display:flex;flex-direction:column;gap:6px}
.msChips{display:flex;flex-wrap:wrap;gap:5px}
.msChips:empty{display:none}
.msChip{display:inline-flex;align-items:center;gap:6px;font-size:11px;background:rgba(72,168,224,.1);border:1px solid rgba(72,168,224,.28);color:var(--texto);border-radius:99px;padding:2px 5px 2px 9px}
.msChip i{cursor:pointer;color:var(--gris);font-style:normal;font-size:11px}
.msChip i:hover{color:var(--rojo)}
@media(max-width:520px){.drawer{width:100vw}}
/* ── Facturación POS ── */
.posGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:7px;max-height:60vh;overflow:auto}
.posCard{display:flex;align-items:center;gap:8px;border:1px solid var(--borde);background:var(--panel);border-radius:9px;padding:8px;cursor:pointer;transition:border-color .15s,background .15s}
.posCard:hover{border-color:var(--azul);background:rgba(72,168,224,.06)}
.posIco{width:32px;height:32px;flex:none;border-radius:8px;background:linear-gradient(135deg,var(--azul),var(--verde));color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.posTot{margin-top:10px;border-top:1px solid var(--borde);padding-top:8px}
.posTr{display:flex;justify-content:space-between;font-size:12px;color:var(--texto2);padding:2px 0}
.posTr.posGran{font-size:15px;color:var(--texto);font-weight:700;border-top:1px solid var(--borde);margin-top:4px;padding-top:6px}
@media(max-width:760px){#posWrap{grid-template-columns:1fr!important}}
.posScanMsg{max-height:0;overflow:hidden;opacity:0;font-size:12px;font-weight:700;border-radius:8px;transition:max-height .2s,opacity .2s,padding .2s;padding:0 10px}
.posScanMsg.show{max-height:44px;opacity:1;padding:7px 10px;margin:4px 0}
.posScanMsg.ok{background:rgba(120,200,40,.14);border:1px solid rgba(120,200,40,.4);color:var(--verde)}
.posScanMsg.err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);color:var(--rojo)}
.posCliDrop{position:absolute;z-index:220;top:calc(100% + 4px);left:0;right:0;background:var(--panel);border:1px solid var(--borde);border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.13);max-height:min(56vh,440px);overflow-y:auto;overscroll-behavior:contain}
.posCliItem{padding:8px 12px;cursor:pointer;font-size:12.5px;border-bottom:1px solid var(--borde)}
.posCliItem:last-child{border-bottom:none}
.posCliItem:hover,.posCliItem:focus{background:var(--fondo)}
.posListaBtn{border:1px solid var(--borde);background:var(--panel);border-radius:8px;padding:6px 13px;cursor:pointer;font-size:12px;font-weight:600;color:var(--texto);transition:all .15s;white-space:nowrap}
.posListaBtn:hover{border-color:var(--azul)}
.posListaBtn.act{border-color:var(--azul);background:var(--azul);color:#fff}
/* ═══ POS rediseño: barra de contexto + hero del lector + catálogo lateral (drawer) ═══ */
.posCtx{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:10px 14px;margin-bottom:12px;box-shadow:0 1px 2px rgba(15,32,64,.05)}
.posCtx .cx{display:flex;align-items:center;gap:8px}
.posCtx .ctxK{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.posCtx .ctxV{font-size:13px;font-weight:700;color:var(--texto)}
.posCtx .ctxSel{border:1px solid var(--borde);background:var(--panel);color:var(--texto);border-radius:8px;padding:5px 8px;font-size:12.5px;font-weight:600;max-width:190px}
.posVendBadge{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--azul-2,#1F6FD6),var(--azul));color:#fff;border-radius:10px;padding:6px 10px}
.posVendBadge .ctxK{color:#dbe8fb}
.posVendBadge select{border:none;background:transparent;color:#fff;font-weight:800;font-size:13px;outline:none}
.posVendBadge select option{color:#0e1422}
/* POS rediseño: CLIENTE protagonista arriba + contexto (vendedor/sede/centro/bodega) secundario */
.posCliente{background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:14px 16px;margin-bottom:12px;box-shadow:0 1px 2px rgba(15,32,64,.05)}
.posCli-h{font-size:12.5px;font-weight:800;color:var(--texto);display:flex;align-items:center;gap:7px}
.posCli-search{display:flex;gap:8px;align-items:center;margin-top:8px;position:relative}
.posCli-search .ic{font-size:17px;color:var(--gris);flex-shrink:0;line-height:1}
.posCli-search #pos_cli{flex:1;min-width:0}
.posCli-sel{margin-top:0}
.posCli-sel.on{display:flex;align-items:center;gap:11px;background:color-mix(in srgb,var(--azul) 8%,transparent);border:1px solid color-mix(in srgb,var(--azul) 24%,transparent);border-radius:11px;padding:10px 13px;margin-top:10px}
.posCli-sel .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--azul-2,#1F6FD6),var(--azul));color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px;flex:none}
.posCli-sel .nm{font-size:16px;font-weight:800;color:var(--texto);line-height:1.15}
.posCli-sel .meta{font-size:11.5px;color:var(--texto2);margin-top:2px}
.posCli-ctx{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-start;margin-top:12px;padding-top:11px;border-top:1px solid var(--borde)}
.posCli-ctx .cx{display:flex;flex-direction:column;gap:3px}
.posCli-ctx .ctxK{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.posCli-ctx .ctxV{font-size:13px;font-weight:700;color:var(--texto);padding-top:4px}
.posCli-ctx .ctxSel{border:1px solid var(--borde);background:var(--panel);color:var(--texto);border-radius:8px;padding:5px 8px;font-size:12.5px;font-weight:600;max-width:190px}
.posCatBtn{margin-left:auto}
.posHero{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 10%,transparent),transparent);border:1px solid color-mix(in srgb,var(--verde) 32%,transparent);border-radius:12px;padding:11px 14px;margin-bottom:8px}
.posHero .hi{font-size:26px;flex:none}
.posHero b{font-size:13.5px}
.posHero small{display:block;color:var(--texto2);font-size:11px;line-height:1.4}
.posHero .btn{margin-left:auto;flex:none}
.posNewCli{flex:none;white-space:nowrap;padding:9px 12px !important}
.posDrawerBack{position:fixed;inset:0;background:rgba(8,15,30,.34);opacity:0;pointer-events:none;transition:opacity .22s;z-index:300}
.posDrawerBack.open{opacity:1;pointer-events:auto}
.posDrawer{position:fixed;top:0;right:0;height:100vh;width:min(680px,96vw);background:var(--panel);border-left:1px solid var(--borde);box-shadow:-10px 0 34px rgba(8,15,30,.20);transform:translateX(102%);transition:transform .24s cubic-bezier(.4,0,.2,1);z-index:301;display:flex;flex-direction:column}
.posDrawer.open{transform:none}
.posDrawerHead{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--borde);background:var(--fondo)}
.posDrawerHead b{font-size:15px}
.posDrawerHead small{display:block;color:var(--gris);font-size:11px}
.posDrawerHead .x{margin-left:auto;cursor:pointer;font-size:20px;color:var(--gris);line-height:1}
.posDrawerBody{padding:14px 16px;overflow-y:auto;flex:1;display:flex;flex-direction:column}
.posDrawerBody .guiaSearch{flex:none;width:100%;max-width:none}
.posDrawerBody .posGrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));max-height:none;overflow:visible}
.posDrawerBody .posCard b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
.posSold{font-size:9.5px;font-weight:800;color:var(--verde);background:color-mix(in srgb,var(--verde) 12%,transparent);border-radius:5px;padding:1px 6px;white-space:nowrap;flex:none}
.posRankN{width:22px;height:22px;flex:none;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:800;background:color-mix(in srgb,var(--azul) 12%,transparent);color:var(--azul);font-variant-numeric:tabular-nums}
/* ═══════════ POS v2 · layout centrado en el TICKET (productos ⟶ recibo) ═══════════ */
.pvBar{display:flex;flex-wrap:wrap;gap:9px 18px;align-items:center;background:var(--panel);border:1px solid var(--borde);border-radius:13px;padding:9px 15px;margin-bottom:13px;box-shadow:0 1px 2px rgba(15,32,64,.05)}
.pvBar .pvBarTit{font-size:13px;font-weight:800;color:var(--texto);display:flex;align-items:center;gap:7px;padding-right:8px;border-right:1px solid var(--borde);margin-right:2px}
.pvBar .cx{display:flex;align-items:center;gap:7px}
.pvBar .ctxK{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.pvBar .ctxV{font-size:12.5px;font-weight:700;color:var(--texto)}
.pvBar .ctxSel{border:1px solid var(--borde);background:var(--panel);color:var(--texto);border-radius:8px;padding:5px 8px;font-size:12px;font-weight:600;max-width:175px}
.pvBar .pvSim{margin-left:auto;font-size:11px;font-weight:800;color:var(--ambar);background:color-mix(in srgb,var(--ambar) 14%,transparent);border:1px solid color-mix(in srgb,var(--ambar) 40%,transparent);border-radius:999px;padding:4px 11px}
.pvWork{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:start}
/* IZQUIERDA · productos siempre visibles */
.pvProds{display:flex;flex-direction:column}
.pvProds .pvHd{font-size:13.5px;font-weight:800;color:var(--texto);display:flex;align-items:baseline;gap:8px;margin-bottom:11px}
.pvSearch{width:100%;border:1.5px solid var(--borde);background:var(--panel);color:var(--texto);border-radius:11px;padding:11px 14px;font-size:14px;font-weight:500;transition:border-color .15s,box-shadow .15s}
.pvSearch::placeholder{color:var(--gris)}
.pvSearch:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px color-mix(in srgb,var(--azul) 15%,transparent)}
.pvListas{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:11px 0 2px}
.pvGrid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));max-height:calc(100vh - 292px)}
.pvCard .posIco{width:28px;height:28px;font-size:12px;border-radius:7px}
.pvPrice{font-size:12.5px;font-weight:800;color:var(--verde);white-space:nowrap;flex:none}
/* DERECHA · el TICKET (cliente ⟶ carrito ⟶ impuestos ⟶ TOTAL ⟶ pago ⟶ emitir) */
.pvTicket{display:flex;flex-direction:column}
.pvTk-sec{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gris);display:flex;align-items:center;gap:6px;margin:15px 0 8px}
.pvTk-sec:first-child{margin-top:2px}
.pvTk-sec .sub{color:var(--gris)}
.pvTk-cli{display:flex;gap:7px;align-items:center;position:relative}
.pvTk-cli #pos_cli{flex:1;min-width:0}
.pvTot{margin-top:12px;background:color-mix(in srgb,var(--azul) 6%,transparent);border:1px solid color-mix(in srgb,var(--azul) 20%,transparent);border-radius:12px;padding:11px 14px 12px}
.pvTot .posTr{font-size:12.5px}
.pvTot .posTr.posGran{font-size:16px;color:var(--azul);border-top:1.5px solid color-mix(in srgb,var(--azul) 26%,transparent);margin-top:7px;padding-top:9px;align-items:baseline}
.pvTot .posTr.posGran b{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1}
.pvStamp{display:flex;flex-direction:column;gap:6px;margin-top:11px;padding-top:11px;border-top:1px dashed var(--borde)}
.pvEmit{width:100%;margin-top:12px;font-size:15px;font-weight:800;padding:13px}
/* Barra de pestañas del POS (varias facturas en curso) — reusa .pedtabs/.pedtab del módulo de pedidos */
#posTabsBar .pedtabs{margin-bottom:12px}
#posTabsBar .pedtab{max-width:200px}
#posTabsBar .pedtab .nm{font-weight:700}
/* Editor de agencias de facturación (Configuración) */
.agList{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.agBlock{border:1px solid var(--borde);border-radius:12px;padding:12px 14px;background:var(--panel)}
.agHead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.agSec{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gris);margin:10px 0 6px}
.agSec .sub{font-weight:400;text-transform:none;letter-spacing:0}
.agGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 10px}
.agChk{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agChk input{flex:none}
@media(max-width:900px){#posWrap{grid-template-columns:1fr !important}.posCtx{gap:8px 12px}.posCatBtn{margin-left:0}.posVendBadge select{max-width:150px}.pvGrid{max-height:none}.pvBar .pvBarTit{border-right:none}}
@media (prefers-reduced-motion:reduce){.fabItem{transition:opacity .2s ease,max-width .2s ease}.flashSec{animation:none}.posDrawer{transition:none}.posDrawerBack{transition:none}}

/* ===== Tablas de ranking (top N con medalla + % participación) y tablas de mini-barra por
   agencia — mismo lenguaje visual del informe ejecutivo exportable, pero con los tokens vivos
   (--azul/--verde/--teal/--rojo/--ambar/--borde/--panel-2) para que respeten tema claro/oscuro
   y la línea de color activa sin tocarlas. Reusar en cualquier reporte con top-N. */
.rankTable{width:100%;border-collapse:collapse;font-size:12.5px}
.rankTable th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--gris);font-weight:700;padding:6px 8px;border-bottom:2px solid var(--borde)}
.rankTable td{padding:7px 8px;border-bottom:1px solid var(--borde)}
.rankTable td.num{text-align:right;font-variant-numeric:tabular-nums}
.rankTable td.rk2{font-weight:800;color:var(--azul);width:26px}
.rankTable td.nom{font-weight:600;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rankTable tr:hover td{background:var(--panel-2,var(--fondo))}
.rankTable tr.click{cursor:pointer}
.miniBarTable{width:100%;border-collapse:collapse;font-size:12.5px}
.miniBarTable th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--gris);font-weight:700;padding:6px 8px;border-bottom:2px solid var(--borde)}
.miniBarTable td{padding:7px 8px;border-bottom:1px solid var(--borde)}
.miniBarTable td.nom{font-weight:600}
.miniBarWrap{position:relative;background:var(--panel-2,var(--fondo));border-radius:5px;height:15px;min-width:100px}
.miniBarWrap .fill{position:absolute;top:0;left:0;bottom:0;border-radius:5px;opacity:.9}
.miniBarWrap span{position:relative;font-size:10.5px;font-weight:700;padding-left:6px;line-height:15px}
.miniBarWrap span.neg{color:var(--rojo)}

/* ════════════════════════════════════════════════════════════════
   RE-SKIN v3 · COLOR POR MÓDULO  (jul-2026)
   Autor: Israel Hernández Aguirre
   Capa ADITIVA al final: no reemplaza nada, solo corrige y afina.
   El color primario lo inyecta guia.js::aplicarColorModulo() como
   variables inline en <html>, así que TODO lo que ya usa --azul /
   --grad-azul se recolorea solo. Aquí solo van 2 cosas:
   ════════════════════════════════════════════════════════════════ */

/* 1) ARRASTRE DE PALETA MUERTA — --grad-verde y --grad-rojo se quedaron
   con los valores de la paleta v1 (#78C828 lima, #E0483F) que el re-skin
   v2 "ABISAL COBALTO" ya reemplazó: el v2 redefinió --verde y --rojo pero
   NO sus gradientes. Resultado: chips y franjas verdes/rojas de toda la
   plataforma seguían pintando el verde lima viejo. Se re-derivan del
   token VIGENTE para que no vuelvan a divergir. */
:root, [data-theme="dark"]{
  --grad-verde: linear-gradient(135deg, color-mix(in srgb, var(--verde) 72%, #ffffff) 0%, var(--verde) 100%);
  --grad-rojo:  linear-gradient(135deg, color-mix(in srgb, var(--rojo)  72%, #ffffff) 0%, var(--rojo)  100%);
}

/* 2) FRANJA DE LA TARJETA — el elemento que el dueño aprobó de la maqueta
   LHA. Ya existía a 4px; sube a 5px y se ancla al color del módulo. */
.kpi::before{ height:5px; }

/* 3) TODO LO "VERDE" SIGUE A LA SECCIÓN (orden del dueño, 29-jul).
   Antes había DOS lenguajes de color a la vez: la sección pintaba de su color
   (--azul) y, encima, los elementos de ACCIÓN se quedaban fijos en --verde. En
   Administración (gris) eso dejaba un recuadro verde flotando sin relación con
   nada. Ahora el color lo manda la sección; lo que sigue distinguiendo una
   acción de un reporte es el marcador "＋" y el peso de la fuente, no el tono.

   De paso se corrigen dos textos casi negros heredados de la paleta v1 (cuando
   --verde era el lima #78C828 y el texto oscuro sí contrastaba):
     .nuevobtn  color:#08240c sobre #0B7D54 -> 3.21:1  (medido en vivo)
     .accion:hover color:#07210a sobre --verde -> mismo problema
   Ambos pasan a blanco sobre el color de la sección. */

/* 3.a — los dos botones de crear: FACTURAR POS y ＋ Nuevo */
.pos-btn,
.hdr-tools .nuevobtn{
  background:linear-gradient(135deg,var(--azul),var(--azul-h));
  border-color:transparent;
  color:#fff;
}
.pos-btn{ box-shadow:0 8px 20px color-mix(in srgb, var(--azul) 30%, transparent); }

/* 3.b — nodos de acción del menú (los "＋ …", las micro secciones) */
.nodo>.nlink.accion>span:nth-child(2),
.hijos .nlink.accion{ color:var(--azul); }
.hijos .nlink.accion:hover{ background:var(--azul); color:#fff; }

/* ══════════ Factura — detalle PREMIUM: recuadro de estado con franja de color (05-ago-2026) ══════════
   Pedido del dueño: la factura NORMAL lleva franja AZUL degradada; la ANULADA, franja ROJA degradada
   + marca de agua "ANULADA". Clases nuevas (.fx2-*) para NO tocar .factHead (lo comparte el recibo). */
.fx2{position:relative}
.fx2-body{position:relative;z-index:1}
.fx2-wm{position:absolute;top:32%;left:50%;transform:translate(-50%,-50%) rotate(-15deg);
  font-size:clamp(52px,11vw,116px);font-weight:800;letter-spacing:.14em;color:rgba(196,56,63,.10);
  border:5px solid rgba(196,56,63,.14);border-radius:14px;padding:2px 30px;
  pointer-events:none;z-index:0;white-space:nowrap;user-select:none}
.fx2-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  padding:2px 0 14px;margin-bottom:12px;border-bottom:1px solid var(--borde)}
.fx2-brand{display:flex;gap:13px;align-items:flex-start;min-width:0}
.fx2-logo{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#1556C0,#2E7BF6);color:#fff;font-weight:800;font-size:22px}
.fx2-empresa{font-size:17px;font-weight:800;color:var(--texto);letter-spacing:.2px;line-height:1.15}
.fx2-sub{font-size:10px;color:var(--gris);margin-top:3px;letter-spacing:.5px;text-transform:uppercase;font-weight:600}
.fx2-nit{font-size:11px;color:var(--texto2);margin-top:3px}
.fx2-box{min-width:206px;max-width:250px;flex:none;border:1px solid var(--borde);border-radius:12px;
  overflow:hidden;text-align:center;background:var(--panel)}
.fx2-box-top{padding:6px 14px;font-size:10px;font-weight:800;letter-spacing:.6px;color:#fff;
  text-transform:uppercase;background:linear-gradient(90deg,#123F8F,#1556C0 45%,#2E7BF6)}
.fx2-box.anul .fx2-box-top{background:linear-gradient(90deg,#8E1F26,#C4383F 45%,#E0656B)}
.fx2-num{font-size:23px;font-weight:800;color:#1556C0;padding:9px 14px 7px;letter-spacing:.4px;line-height:1.1}
.fx2-box.anul .fx2-num{color:#C4383F}
.fx2-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--borde)}
.fx2-grid>div{padding:6px 8px}
.fx2-grid>div+div{border-left:1px solid var(--borde)}
.fx2-grid span{display:block;font-size:8px;letter-spacing:1px;color:var(--gris);font-weight:700;text-transform:uppercase;margin-bottom:1px}
.fx2-grid b{font-size:12px}
.fx2-anulban{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:rgba(196,56,63,.07);
  border:1px solid rgba(196,56,63,.24);border-radius:10px;padding:9px 13px;margin:0 0 12px;
  font-size:12px;color:#C4383F;font-weight:600}
.fx2-anulban .cude{margin-left:auto;font-family:var(--mono,monospace);font-size:10.5px;color:var(--gris);font-weight:400;word-break:break-all}
/* Botones (Imprimir / Aplicar NC) DENTRO del header, bajo el NIT: aprovechan el hueco a la
   izquierda del recuadro de estado sin agregar alto. */
.fx2-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:11px 0 0}
/* Franja delgada AZUL DEGRADADA en el borde superior del modal (como la plantilla). */
.mbox-fx2::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;z-index:6;
  border-radius:16px 16px 0 0;background:linear-gradient(90deg,#123F8F,#1556C0 45%,#2E7BF6 75%,#48A8E0)}
/* En este modal el fondo es CLARO → el botón de cerrar (X) va oscuro, no blanco. */
.mbox-fx2 .x{color:var(--texto)!important;opacity:.5}
.mbox-fx2 .x:hover{opacity:1}

/* Tablas del detalle de factura (productos / forma de pago): encabezado con FRANJA DEGRADADA
   azul→cian (como la plantilla). El degradado va en la FILA para que sea CONTINUO a lo ancho;
   los th quedan transparentes y sin borde para no cortarlo. */
.fx2-body table thead tr{background:linear-gradient(90deg,#2FB4E8 0%,#2E74D6 55%,#3A57C0 100%)}
.fx2-body table thead th{background:transparent;color:#fff;border:none;font-weight:700;letter-spacing:.3px}
.fx2-body table thead th.num{color:#fff}
/* Recuadro del QR de la DIAN en el detalle de factura (del CUFE completo). */
.fx2-qr{width:92px;height:92px;flex:none;border:1px solid var(--borde);border-radius:8px;padding:5px;background:#fff}
.fx2-qr svg{width:100%;height:100%;display:block}

/* Soportes de pago dentro del detalle de factura: 2 columnas → 1 en pantallas angostas. */
@media(max-width:640px){.factSopGrid{grid-template-columns:1fr!important}}