: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}
/* Comprobante contable: la grilla tiene 8 columnas (cuenta, tercero, detalle, descripción,
   centro, débito, crédito) y en 840px salía cortada con barra horizontal, teniendo media
   pantalla libre al lado. Se le da el ancho que necesita, sin pasarse del alto disponible. */
.mbox-cc{width:min(1440px,97%)!important}
.mbox-preview{width:min(900px,96%)!important}
/* Ventana del faltante por producto: la tabla lleva 8 columnas (orden, fecha, punto,
   factura, pedido, recibido, faltante, $) y a 760px se apretaban tanto que el número de
   orden se partía en tres renglones. Ancha y con más aire por dentro. */
.mbox-falta{width:min(1180px,96%)!important;padding:28px 30px!important}
/* El ancho del asiento se define abajo, junto con los otros arreglos del modal. */
.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 PRONAMED-BI  ·  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);
}
/* VELO OSCURO, no un brillo (25-ago-2026). Antes esto ACLARABA la esquina con un radial de
   #48A8E0, y el texto es blanco: sobre ese azul el contraste cae a 2,64:1 — por debajo del 4,5:1
   que exige WCAG para texto normal, o sea ilegible justo donde va el numero del comprobante.
   Un velo oscuro hace lo contrario: garantiza el contraste del blanco sea cual sea el degradado
   que tenga el tema debajo (y hay temas con degradados claros). */
.factHead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(15,23,42,.28) 0%,rgba(15,23,42,.10) 45%,rgba(15,23,42,.46) 100%);
}
.factHead .empresa,.factHead .factNum .num{text-shadow:0 1px 2px rgba(15,23,42,.35)}
.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}}

/* ══════════ Modal: tres arreglos del detalle del comprobante (25-ago-2026) ══════════ */

/* 1 · EL RECORTE POR LA IZQUIERDA. `justify-content:center` centra bien mientras el hijo QUEPA,
      pero cuando es mas ancho que el contenedor lo recorta por AMBOS lados y no hay forma de
      llegar al principio: por eso se leia "LLERA HERMANOS" y "UENTA" en vez de VILLERA y CUENTA.
      Es el fallo clasico de centrar con flex. Se centra con `margin:auto`, que sí respeta el
      borde inicial cuando hay desbordamiento. */
.modal{justify-content:flex-start}
.modal .mbox{margin-inline:auto}

/* 2 · LA X QUEDABA DETRAS. El encabezado sangra hasta el borde del modal (margin negativo) y
      crea su propio contexto de apilado, asi que tapaba el boton de cerrar. Ademas era gris
      sobre un encabezado oscuro: se pone blanco y con un fondo tenue para que se vea siempre. */
.modal .x{z-index:5}
/* Se usa la clase que ya pone el JS (`mbox-asiento`) y no `:has()`, que es CSS reciente y no
   quiero que la visibilidad del boton CERRAR dependa de si el navegador lo soporta. */
.modal .mbox-asiento .x{color:#fff;background:rgba(15,23,42,.30);border-radius:50%}
.modal .mbox-asiento .x:hover{background:rgba(15,23,42,.55);color:#fff}

/* 3 · AIRE. El asiento son 6 columnas: a 760px no cabia. Se le da ancho de verdad y se deja que
      la tabla use el espacio en vez de estrangular las celdas. */
/* `.modal .mbox` (especificidad 20) le gana a `.mbox-asiento` (10), asi que el padding hay
   que anularlo con el mismo peso o el encabezado se queda 22px corto por lado. */
.modal .mbox-asiento{width:min(1500px,96vw);padding:0;overflow:hidden}

/* SIN MARGENES NEGATIVOS — asi se quita la barra de una vez.
   El encabezado llegaba a los bordes con `margin:-22px -28px`, y eso es contenido que sobresale:
   #modalBody tiene `overflow:auto` (regla .modal .mbox>#modalBody, mas especifica que cualquier
   cosa que se le ponga por clase) y saca una barra de 28px que no lleva a ningun lado, ademas de
   dejar el texto corrido —"Sin anexos" se leia "nexos"—.
   Y no basta con apagar el eje horizontal: CSS no admite un eje `visible` y el otro `auto`;
   convierte el visible en auto. Asi que se ataca la causa: la tarjeta va SIN padding, el
   encabezado ocupa todo el ancho por si mismo, y cada seccion pone su propio margen. Cero
   desbordamiento, cero barra. */
.mbox-asiento .factHead{margin:0 0 18px;padding:22px 30px;border-radius:var(--r-3) var(--r-3) 0 0}
.mbox-asiento .factMeta,
.mbox-asiento .scroll,
.mbox-asiento #ccSoportes{margin-left:28px;margin-right:28px}
.mbox-asiento #ccSoportes{margin-bottom:26px}
.mbox-asiento table{width:100%;table-layout:auto}
.mbox-asiento td,.mbox-asiento th{overflow-wrap:anywhere;word-break:normal}
.mbox-asiento .scroll{overflow-x:hidden;overflow-y:auto}
.mbox-asiento .num{white-space:nowrap}          /* los importes nunca se parten */
@media(max-width:900px){
  .mbox-asiento .factHead{padding:18px 18px}
  .mbox-asiento .factMeta,.mbox-asiento .scroll,.mbox-asiento #ccSoportes{margin-left:16px;margin-right:16px}
  .mbox-asiento .scroll{overflow-x:auto}        /* en pantalla chica si se permite rodar */
}

/* 22-sep-2026 · Menú fase 2: subtítulo de TEMA dentro de un grupo y temas plegados (NAV_MENU, core.js) */
.hijos .ntema{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);opacity:.75;padding:9px 9px 3px}
.hijos .ntema:first-child{padding-top:3px}
.hijos details.ntema-fold{margin-top:4px}
.hijos details.ntema-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:var(--r-1,8px);font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);opacity:.75;user-select:none}
.hijos details.ntema-fold>summary::-webkit-details-marker{display:none}
.hijos details.ntema-fold>summary::before{content:"▶";font-size:7px;transition:transform .2s}
.hijos details.ntema-fold[open]>summary::before{transform:rotate(90deg)}
.hijos details.ntema-fold>summary small{font-weight:600;letter-spacing:0;opacity:.85}
.hijos details.ntema-fold>summary:hover{opacity:1;color:var(--texto);background:rgba(255,255,255,.06)}
.hijos details.ntema-fold>summary:focus-visible{outline:2px solid var(--azul);outline-offset:1px}

/* 22-sep-2026 · Menú fase 3 — diseño «panel por grupo» (muestra 1 elegida por el dueño).
   Clases pm-* y variables --pm-* PROPIAS: ninguna regla vieja del menú (.nodo/.nlink/.hijos, vidrio…) las
   alcanza, y #sidebar.pm (id + clase) gana sobre `aside{…}`. Si algo del menú se ve "como antes", es que
   una regla vieja se coló: buscar aquí, no en las de arriba. */
:root{
  --pm-bg:#F4F6FA; --pm-surface:#FFFFFF; --pm-ink:#2E3A4E; --pm-muted:#8792A5; --pm-line:#E1E6EE;
  --pm-accent:#1556C0; --pm-accent-soft:#E3ECFA; --pm-accent-ink:#0F3F8F;
  --pm-shadow:0 12px 32px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.06);
}
:root[data-theme="dark"]{
  --pm-bg:#0B1222; --pm-surface:#0F1728; --pm-ink:#D5DDEB; --pm-muted:#7C889F; --pm-line:#1C2740;
  --pm-accent:#7AA8FF; --pm-accent-soft:#16264A; --pm-accent-ink:#B9D0FF;
  --pm-shadow:0 12px 32px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
}
#sidebar.pm{background:var(--pm-bg);border-right:1px solid var(--pm-line);box-shadow:none;color:var(--pm-ink);
  backdrop-filter:none;-webkit-backdrop-filter:none;font-family:var(--font-body,'Inter',system-ui,sans-serif)}
#sidebar.pm .logo{color:var(--pm-ink)}
#sidebar.pm .logo span{color:var(--pm-accent)}
#sidebar.pm .side-toggle{color:var(--pm-muted)}
#sidebar.pm .side-toggle:hover{background:var(--pm-accent-soft);color:var(--pm-ink)}
#sidebar.pm .estado-chip{background:var(--pm-surface);border:1px solid var(--pm-line);color:var(--pm-muted)}
#sidebar.pm .estado-chip:hover{background:var(--pm-accent-soft)}
#sidebar.pm .pos-btn{margin:2px 12px 10px;padding:10px;border-radius:10px;font-size:13.5px;font-weight:700;letter-spacing:.2px;
  background:linear-gradient(180deg,#1E64D6,#1350B8);color:#fff;box-shadow:0 6px 16px rgba(21,86,192,.25)}
#sidebar.pm .pos-btn.act{outline:2px solid #fff;outline-offset:-4px}
#sidebar.pm .tree{flex:1;min-height:0;overflow-y:auto;padding:0 8px 14px}
#sidebar.pm .pm-buscar{padding:0 12px 8px}
#sidebar.pm .pm-buscar input{width:100%;box-sizing:border-box;font:inherit;font-size:12.5px;padding:7px 10px;border-radius:9px;
  border:1px solid var(--pm-line);background:var(--pm-surface);color:var(--pm-ink);outline:none}
#sidebar.pm .pm-buscar input::placeholder{color:var(--pm-muted)}
#sidebar.pm .pm-buscar input:focus{border-color:var(--pm-accent);box-shadow:0 0 0 2px var(--pm-accent-soft)}
#sidebar.pm .pm-ico{width:18px;height:18px;flex:0 0 18px}
#sidebar.pm .pm-quick,#sidebar.pm .pm-grp{display:flex;align-items:center;gap:9px;width:100%;margin:0;border:0;background:none;
  font:inherit;font-size:13.5px;line-height:1.3;color:var(--pm-ink);padding:8px 10px;border-radius:9px;cursor:pointer;text-align:left;box-shadow:none}
#sidebar.pm .pm-quick{font-size:13px;padding:7px 10px}
#sidebar.pm .pm-quick .pm-ico,#sidebar.pm .pm-grp .pm-ico{color:var(--pm-muted)}
#sidebar.pm .pm-quick:hover,#sidebar.pm .pm-grp:hover{background:var(--pm-accent-soft)}
#sidebar.pm .pm-lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sidebar.pm .pm-car{font-size:9px;color:var(--pm-muted);transition:transform .15s}
#sidebar.pm .pm-grp[aria-expanded="true"]{background:var(--pm-accent-soft)}
#sidebar.pm .pm-grp[aria-expanded="true"] .pm-car{transform:rotate(90deg)}
#sidebar.pm .pm-quick.act,#sidebar.pm .pm-grp.act{background:var(--pm-accent-soft);color:var(--pm-accent-ink);font-weight:600;box-shadow:inset 3px 0 0 var(--pm-accent)}
#sidebar.pm .pm-quick.act .pm-ico,#sidebar.pm .pm-grp.act .pm-ico{color:var(--pm-accent)}
#sidebar.pm .pm-badge{font-size:10.5px;font-weight:700;background:var(--pm-accent);color:#fff;border-radius:99px;padding:0 7px;line-height:18px}
#sidebar.pm .pm-blk{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pm-muted);padding:14px 10px 5px;user-select:none}
#sidebar.pm .pm-quick:focus-visible,#sidebar.pm .pm-grp:focus-visible,#sidebar.pm .pm-itm:focus-visible,.pm-panel .pm-itm:focus-visible,.pm-panel .pm-x:focus-visible{
  outline:2px solid var(--pm-accent);outline-offset:-2px;box-shadow:none}
/* elementos de página (en el panel y en los resultados de búsqueda) */
.pm-itm{display:block;width:100%;margin:0;border:0;background:none;font:inherit;font-family:var(--font-body,'Inter',system-ui,sans-serif);
  font-size:13px;line-height:1.35;color:var(--pm-ink);padding:6px 10px;border-radius:7px;cursor:pointer;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:none}
.pm-itm:hover{background:var(--pm-accent-soft)}
.pm-itm.act{color:var(--pm-accent);font-weight:600}
#sidebar.pm .pm-res .pm-itm{display:flex;flex-direction:column;gap:0;white-space:normal;font-size:12.5px;padding:7px 10px}
#sidebar.pm .pm-res .pm-itm small{font-size:10.5px;color:var(--pm-muted);font-weight:400}
#sidebar.pm .pm-res .pm-itm.sel{background:var(--pm-accent-soft);color:var(--pm-accent-ink)}
#sidebar.pm .pm-vacio{font-size:12px;color:var(--pm-muted);padding:8px 10px}
/* el panel */
.pm-panel{position:fixed;z-index:90;box-sizing:border-box;background:var(--pm-surface);color:var(--pm-ink);border:1px solid var(--pm-line);
  border-radius:14px;box-shadow:var(--pm-shadow);padding:16px 18px 18px;overflow:auto;
  font-family:var(--font-body,'Inter',system-ui,sans-serif);animation:pmIn .14s ease-out}
@keyframes pmIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.pm-phead{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.pm-phead .pm-ico{width:20px;height:20px;flex:0 0 20px;color:var(--pm-accent)}
.pm-phead b{font-family:var(--font-display,'Inter Tight','Inter',sans-serif);font-size:17px;font-weight:700;color:var(--pm-ink)}
.pm-x{margin-left:auto;border:0;background:none;color:var(--pm-muted);font-size:20px;line-height:1;cursor:pointer;border-radius:6px;padding:2px 8px}
.pm-x:hover{background:var(--pm-accent-soft);color:var(--pm-ink)}
.pm-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px 18px}
.pm-col h4{margin:0 0 4px;padding:0 10px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pm-muted)}
/* celular: el panel va dentro del menú, debajo de su grupo */
.pm-panel.pm-inline{position:static;box-shadow:none;margin:4px 2px 8px;padding:12px;border-radius:12px;animation:none}
.pm-panel.pm-inline .pm-cols{grid-template-columns:1fr;gap:10px}
.pm-panel.pm-inline .pm-phead{display:none}
/* menú retraído (solo íconos, escritorio) */
@media (min-width:881px){
  body.rail #sidebar.pm .pm-blk,body.rail #sidebar.pm .pm-buscar,body.rail #sidebar.pm .pm-lbl,
  body.rail #sidebar.pm .pm-car,body.rail #sidebar.pm .pm-badge,body.rail #sidebar.pm .pm-res{display:none!important}
  body.rail #sidebar.pm .pm-quick,body.rail #sidebar.pm .pm-grp{justify-content:center;padding:10px 0}
}
@media (max-width:880px){ #sidebar.pm{box-shadow:0 12px 32px rgba(15,23,42,.25)} }
@media (prefers-reduced-motion:reduce){ .pm-panel{animation:none} #sidebar.pm .pm-car{transition:none} }


/* ════════════════════════════════════════════════════════════════════════════════════════
   PRONAMED-BI · CAPA BASE v1 — "Rótulo LHA"
   Para ANEXAR al final de static/styles.css (gana por orden de fuente). No toca ningún JS.
   NO desplegar sin la validación E2E antes/después (ver plan_migracion_estilos_en_linea.md §6).

   Fundamento: qa/diseno/AUDITORIA_DISENO.md (hallazgos) y qa/diseno/DIRECCION_BASE.md (decisiones).
   Modo impeccable: OPERATE — familiaridad ganada, escaneo, densidad, color "Restrained",
   movimiento 120–240 ms solo para estado.

   Estrategia (en orden de preferencia):
     1. Redefinir TOKENS con los nombres que ya consumen los 23 módulos (--azul, --gris, --panel…):
        el 89 % de los 4.354 style="…" del JS usa var(--token), así que se recolorean solos.
     2. Tokens con ALCANCE (#sidebar redefine --texto/--gris/--borde para su superficie navy):
        corrige de un golpe las ~30 reglas heredadas que pintan el menú con tokens de página.
     3. Reglas de componente sobre las clases que YA existen, con especificidad mínima suficiente.
     4. !important SOLO donde hay que vencer un estilo en línea o un !important previo. Inventario:
        (a) 12 decl. — tokens --azul/--azul-h/--azul-txt/--azul-2/--side-act/--grad-azul: guia.js:341-352
            los escribe EN LÍNEA sobre <html> (color por módulo); sin !important la marca no gana.
        (b) 2 decl. — backdrop-filter:none en .sugs/.msel-pop/.modal .mbox/.mbox-fact/.modalCentros:
            vence el !important de styles.css:2972-2973.
        (c) 1 decl. — .kpi::before background: vence styles.css:2987 y :3022 (!important).
        (d) 4 decl. — .rk.sel (borde lateral 3px) y .barra i: vencen styles.css:2990-2991, 3025-3027.
        (e) 2 decl. — #loginError color/tamaño: vence el style en línea de propuesta.html:132.
        (f) 3 decl. — #nuevaVersionBar: vence el cssText en línea de core.js:319-321.
        (g) 2 decl. — #nuevoPop left/right: vence style="left:0;right:auto" de propuesta.html:190.
        (h) 1 decl. — inputs a 16 px en teléfonos: vence font-size en línea (iOS hace zoom < 16 px).
        (i) 11 decl. — bloque reduced-motion: vence el "kill" global !important de styles.css:606-613 y
            :2844-2854 solo en los componentes listados.
        Total medido: 38 (scripts/12_verificar_base.py). styles.css tiene 124.
   ════════════════════════════════════════════════════════════════════════════════════════ */


/* ── 0 · PROPIEDADES REGISTRADAS ───────────────────────────────────────────────────────────
   propuesta.html:401-410 (capa UI-LAYER-ECC) escribe --mx/--my en línea sobre la .card en CADA
   pointermove. Como las custom properties heredan, eso invalida el estilo de todo el subárbol
   (tablas de cientos de filas) en cada movimiento del mouse. Registrarlas como NO heredables
   limita el recálculo a la propia tarjeta. El brillo que alimentaban se elimina en §5. */
@property --mx { syntax: '*'; inherits: false; }
@property --my { syntax: '*'; inherits: false; }


/* ── 1 · TOKENS — TEMA CLARO ───────────────────────────────────────────────────────────────
   Marca fijada por el dueño: azul LHA #48A8E0, verde LHA #78C828, navy #0F172A.
   Los puros NO pasan AA como texto sobre blanco (#48A8E0 = 2,64:1; #78C828 = 2,0:1), así que
   cada uno tiene una variante "profunda" del MISMO tono (HSL) calculada para ≥4,5:1
   (scripts/08_paleta_propuesta.py, scripts/10_semanticos.py). Los puros quedan para marcas de
   dato grandes, wordmark y sobre navy. */
:root{
  color-scheme: light;

  /* primitivas de marca (iguales en ambos temas) */
  --lha-azul:#48A8E0;            /* marca · datos · acción en oscuro · foco sobre navy */
  --lha-azul-profundo:#1B6D9D;   /* acción en claro: 5,64:1 con blanco y sobre #FFF */
  --lha-verde:#78C828;           /* marca · éxito en oscuro · punto "en vivo" */
  --lha-verde-profundo:#497918;  /* éxito como texto en claro: 5,21:1 */
  --lha-navy:#0F172A;            /* tinta y chrome (sidebar, toast, cabecera de documento) */

  /* superficies (neutros fríos derivados del navy) */
  --fondo:#F4F6F9; --panel:#FFFFFF; --panel-2:#EEF2F6; --panel-3:#E4E9F0;
  /* tinta */
  --texto:#0F172A; --texto2:#424D5C; --gris:#5B687A; --navy:#0F172A;
  /* líneas: hairline para contenedores; control ≥3:1 (WCAG 1.4.11) para bordes de campos */
  --borde:#DCE2EA; --borde-fuerte:#B4BFCC; --borde-control:#7A8DA5;

  /* acción (un solo color de acción en toda la plataforma) */
  --accion:#1556C0; --accion-hover:#0F3F8F; --accion-press:#0B2F6B; --sobre-accion:#FFFFFF;
  --accion-tinte:#E3ECFA;
  --foco:#1556C0;

  /* estados semánticos (texto AA sobre panel Y sobre los tintes 9–18 % que ya pintan las reglas) */
  --exito:#497918;  --exito-marca:#78C828;  --exito-tinte:#EFF8E5;
  --error:#C91D22;  --error-tinte:#FBE9E9;
  --aviso:#875A09;  --aviso-marca:#F0A828;  --aviso-tinte:#FDF3E1;
  --info:#1556C0;   --info-tinte:#E3ECFA;

  /* nombres heredados que consumen CSS y JS (no renombrar) */
  --verde:#497918; --verde-h:#3D6614; --verde-txt:#497918;
  --rojo:#C91D22; --ambar:#875A09;
  --teal:#1556C0;       /* los degradados azul→teal de styles.css:2987/2991 quedan sólidos */
  --lavanda:#6A5BD6;
  --azul-marca:#48A8E0;
  --dato:#2493D4;       /* barras: azul LHA oscurecido lo justo para 3:1 sobre la pista */
  --dato-verde:#5D9B1F;

  /* inversa (toast, barra de nueva versión) */
  --inverso:#0F172A; --sobre-inverso:#FFFFFF;

  /* sidebar: navy sólido en AMBOS temas (ver §3) */
  --side:#0F172A; --side-texto:#B0B9C6; --side-texto2:#8394AB;
  --side-hover:rgba(255,255,255,.07); --side-activo:rgba(72,168,224,.18);

  /* vidrio NEUTRALIZADO: los tokens siguen existiendo (los consumen ~40 reglas) pero opacos */
  --glass-bg:#FFFFFF; --glass-border:#DCE2EA; --glass-blur:0px;
  --glass-overlay:#FFFFFF; --glass-overlay-blur:0px;

  /* degradados NEUTRALIZADOS: mismos nombres, relleno sólido */
  --grad-verde:linear-gradient(#5D9B1F,#5D9B1F);
  --grad-rojo:linear-gradient(#C91D22,#C91D22);
  --grad-navy:linear-gradient(#0F172A,#0F172A);
  --grad-hero:linear-gradient(#0F172A,#0F172A);

  /* elevación: siempre con desplazamiento + desenfoque (craft-floor §Verify · Depth) */
  --sh-1:0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
  --sh-2:0 4px 12px -2px rgba(15,23,42,.12), 0 2px 4px -2px rgba(15,23,42,.06);
  --sh-3:0 16px 40px -8px rgba(15,23,42,.22), 0 4px 12px -4px rgba(15,23,42,.10);
  --sh-glow:0 4px 12px -2px rgba(15,23,42,.12), 0 2px 4px -2px rgba(15,23,42,.06); /* ya no es halo */

  /* foco: el halo !important de styles.css:2889 usa --ring-soft → transparente lo apaga sin pelear */
  --ring:#1556C0; --ring-soft:transparent;

  /* radios por jerarquía (no uno para todo) */
  --r-etiqueta:4px;     /* badges/estados: rótulo impreso, no se toca */
  --r-control:8px;      /* botones, campos, ítems de menú */
  --r-contenedor:12px;  /* tarjetas, tablas, popovers */
  --r-capa:16px;        /* modal, cajón, aviso */
  --r-1:8px; --r-2:12px; --r-3:16px; --r-pill:999px;

  /* tipografía: UNA familia (Inter, ya cargada); escala fija en rem, razón ≈1,125 */
  --ff:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SFMono-Regular','Cascadia Mono',Consolas,'Liberation Mono',monospace;
  --fs-xs:.78125rem;    /* 12,5 px · dato, tabla, badge, metadato (piso) */
  --fs-sm:.875rem;      /* 14 px · cuerpo, botón, campo en escritorio, menú */
  --fs-base:1rem;       /* 16 px · campo en táctil, título de tarjeta destacada */
  --fs-lg:1.125rem;     /* 18 px · título de página, título de modal */
  --fs-xl:1.25rem;      /* 20 px · título de cajón/sección */
  --fs-2xl:1.4375rem;   /* 23 px · valor de KPI */
  --fs-3xl:1.625rem;    /* 26 px · total del POS */
  --fs-display:1.8125rem; /* 29 px · solo login */
  --fw-black:700;       /* Inter se carga hasta 700: el 800 pedido se sintetizaba */

  /* espacio: base 4 (s-N = N×4 px). --sp-* se conservan con sus valores (4/8/16/24/32/48) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-12:48px;

  /* movimiento: estado, no decoración */
  --d-1:120ms; --d-2:180ms; --d-3:240ms; --d-salida:160ms;
  --ease-out:cubic-bezier(.16,1,.3,1);   /* llegar: desaceleración exponencial */
  --ease-in:cubic-bezier(.4,0,1,1);      /* salir */
  --ease-std:cubic-bezier(.2,0,0,1);     /* cambios de estado in situ */
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.16,1,.3,1);/* sin rebote (quieter.md: nunca bounce/elastic) */

  /* compatibilidad: tokens usados en JS que no existían (auditoría §Theming) */
  --input:#FFFFFF; --bg:#FFFFFF; --fondo2:#EEF2F6;
  --hover:rgba(72,168,224,.10);

  /* superficie del navegador */
  --seleccion:rgba(72,168,224,.30);
  --scroll:#B4BFCC; --scroll-hover:#7A8DA5;

  /* orientación por módulo (ver §1c) */
  --modulo:var(--modulo-base,#48A8E0);

  /* aging: secuencial verde LHA → rojo (sin cambios de valor; se documenta) */
  --b1:#78C828; --b2:#C2E567; --b3:#FDE047; --b4:#F97316; --b5:#DC2626; --b6:#B91C1C; --b7:#991B1B;
}


/* ── 1b · TOKENS — TEMA OSCURO ─────────────────────────────────────────────────────────────
   Compuesto, no invertido: la elevación sube por luminancia (panel < panel-2 < panel-3) y las
   sombras SÍ se redefinen (hoy el oscuro hereda las sombras claras de styles.css:2935-2937
   porque el bloque :root de "Abisal" va después del oscuro de :490). En oscuro los colores
   puros de marca ya son AA como texto, y los rellenos llevan texto navy. */
[data-theme="dark"]{
  color-scheme: dark;
  --fondo:#0B1220; --panel:#111A2B; --panel-2:#172235; --panel-3:#1E2A40;
  --texto:#E8EDF4; --texto2:#ACB6C5; --gris:#8493A9;
  --navy:#E8EDF4;               /* "tinta fuerte": en JS se usa como color de texto/serie (46 usos) */
  --borde:#243048; --borde-fuerte:#34425E; --borde-control:#526B9F;

  --accion:#7AA8FF; --accion-hover:#9CC0FF; --accion-press:#B9D0FF; --sobre-accion:#0B1220;
  --accion-tinte:#16264A;
  --foco:#7AA8FF;

  --exito:#78C828;  --exito-tinte:#1B2E1F;
  --error:#EB6F73;  --error-tinte:#35202A;
  --aviso:#F0A828;  --aviso-tinte:#33291A;
  --info:#7AA8FF;   --info-tinte:#16264A;

  --verde:#78C828; --verde-h:#9AD65A; --verde-txt:#78C828;
  --rojo:#EB6F73; --ambar:#F0A828;
  --teal:#7AA8FF; --lavanda:#B6ABFF;
  --dato:#48A8E0; --dato-verde:#78C828;

  --inverso:#E8EDF4; --sobre-inverso:#0B1220;
  --side:#080D19;

  --glass-bg:#111A2B; --glass-border:#243048;
  --glass-overlay:#172235;       /* las capas flotantes son UN escalón más claras */

  --grad-verde:linear-gradient(#78C828,#78C828);
  --grad-rojo:linear-gradient(#EB6F73,#EB6F73);
  --grad-navy:linear-gradient(#080D19,#080D19);
  --grad-hero:linear-gradient(#080D19,#080D19);

  --sh-1:0 1px 2px rgba(0,0,0,.40);
  --sh-2:0 6px 16px -4px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.35);
  --sh-3:0 20px 48px -12px rgba(0,0,0,.70), 0 4px 12px rgba(0,0,0,.40);
  --sh-glow:0 6px 16px -4px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.35);

  --ring:#7AA8FF;
  --input:#111A2B; --bg:#111A2B; --fondo2:#172235;
  --hover:rgba(72,168,224,.14);
  --seleccion:rgba(72,168,224,.38);
  --scroll:#34425E; --scroll-hover:#526B9F;
}


/* ── 1a · MARCA FIJA (vence el color por módulo en línea) ───────────────────────────────────
   DECISIÓN QUE EL LÍDER/DUEÑO DEBE CONFIRMAR (DIRECCION_BASE.md §9-A).
   guia.js:_setTemaVars() escribe --azul/--azul-h/--azul-txt/--azul-2/--side-act/--grad-azul
   EN LÍNEA sobre <html> en cada navegación (13 colores distintos). Resultado medido: el botón
   primario falla AA en 7 módulos (claro, inicio del degradado 3,6–3,9:1) y FACTURAR POS /
   "＋ Nuevo" fallan en los 13 módulos en oscuro (2,6–3,6:1). La brief fija la marca LHA como
   color de acción. El módulo sobrevive como ORIENTACIÓN (§1c), no como color de acción.
   Para volver al comportamiento anterior basta borrar este bloque. !important: inventario (a). */
:root{
  --azul:#1556C0 !important; --azul-h:#0F3F8F !important; --azul-txt:#1556C0 !important;
  --azul-2:#1556C0 !important; --side-act:#48A8E0 !important;
  --grad-azul:linear-gradient(#1556C0,#1556C0) !important;
}
[data-theme="dark"]{
  --azul:#7AA8FF !important; --azul-h:#9CC0FF !important; --azul-txt:#9CC0FF !important;
  --azul-2:#7AA8FF !important; --side-act:#48A8E0 !important;
  --grad-azul:linear-gradient(#7AA8FF,#7AA8FF) !important;
}


/* ── 1c · ORIENTACIÓN POR MÓDULO ────────────────────────────────────────────────────────────
   Conserva la idea aprobada el 29-jul ("el color dice dónde estás") en un rol restringido:
   la marca de 8 px junto al título de página y la franja de 3 px de las KPI. Lee el atributo
   html[data-modulo] que ya pone guia.js — sin tocar JS. Colores = COLOR_MODULO de guia.js:366. */
html[data-modulo="inicio"],html[data-modulo="facturar"]{--modulo-base:#0B7D54}
html[data-modulo="ventas"]{--modulo-base:#1556C0}
html[data-modulo="clientes"],html[data-modulo="chat"]{--modulo-base:#6A5BD6}
html[data-modulo="oport"]{--modulo-base:#9C6609}
html[data-modulo="visita"],html[data-modulo="guia"],html[data-modulo="apoyo_medico"]{--modulo-base:#0B7A82}
html[data-modulo="cartera"],html[data-modulo="cobranza"],html[data-modulo="tesoreria"]{--modulo-base:#C0453C}
html[data-modulo="productos"],html[data-modulo="pedidos"],html[data-modulo="oc"],html[data-modulo="abastecimiento"]{--modulo-base:#1B4F8A}
html[data-modulo="compras"],html[data-modulo="finanzas"]{--modulo-base:#0C6157}
html[data-modulo="contable"],html[data-modulo="contabilidad"]{--modulo-base:#A85B18}
html[data-modulo="comisiones"],html[data-modulo="documento_soporte"]{--modulo-base:#5B3A8A}
html[data-modulo="rrhh"],html[data-modulo="nomina"],html[data-modulo="admin"]{--modulo-base:#54646E}
html[data-modulo="auditoria"]{--modulo-base:#2A4A73}
html[data-modulo="ext"]{--modulo-base:#A83B6B}
html[data-theme="dark"][data-modulo]{--modulo:color-mix(in srgb,var(--modulo-base,#48A8E0) 66%,#FFFFFF)}


/* ── 2 · BASE Y SUPERFICIE DEL NAVEGADOR (craft-floor §Browser surfaces) ─────────────────────
   Una familia, cuerpo 14 px/1,5, sin tracking artificial (styles.css:570 ponía .1px), cifras
   tabulares en TODA la superficie (es una app de cifras: facturas, saldos, unidades), y
   cv05/cv08 de Inter para distinguir l/I/1 en códigos, lotes y NIT. */
html{ accent-color:var(--accion); scrollbar-color:var(--scroll) transparent; }
body,[data-theme="dark"] body{
  background:var(--fondo);            /* sin radiales decorativos (styles.css:2996-3002) */
  color:var(--texto);
  font-family:var(--ff);
  font-size:var(--fs-sm);
  line-height:1.5;
  letter-spacing:0;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"cv05" 1,"cv08" 1;
  caret-color:var(--accion);
}
.num,td,th,tfoot td,.kpi .big,.big,.dpill,.valr,.pctt,.matrizMes td{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"cv05" 1,"cv08" 1;
}
::selection{ background:var(--seleccion); color:var(--texto); }
::-webkit-scrollbar-thumb{ background:var(--scroll); background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--scroll-hover); background-clip:padding-box; }
.scroll,.matrizMes{ scrollbar-color:var(--scroll) transparent; }
.scroll::-webkit-scrollbar-thumb,.matrizMes::-webkit-scrollbar-thumb{ background:var(--scroll); border-color:var(--panel); }
:where(a){ color:var(--accion); text-underline-offset:2px; text-decoration-thickness:1px; }
:where(a):hover{ color:var(--accion-hover); }

/* Foco visible UNIFICADO. Hoy hay 6 definiciones en cascada (styles.css:68, 1103, 2820, 2836,
   2886, 3149) y la última deja a .btn con outline:none + un halo al 35 % (≈1,8:1 → falla
   WCAG 1.4.11/2.4.7). Un anillo de 2 px del color de acción, separado 2 px: ≥5,6:1 en claro y
   ≥6,5:1 en oscuro, sin mover el layout. Especificidad (0,2,1): vence a .btn:focus-visible
   (0,2,0) y a .filtro input:focus (0,2,1, por orden). */
html :is(a,button,input,select,textarea,summary,[tabindex],[contenteditable="true"],.btn,.chip,.pedtab):focus-visible{
  outline:2px solid var(--foco);
  outline-offset:2px;
}
html :is(input,select,textarea):focus-visible{ outline-offset:1px; border-color:var(--foco); }
#overlay input:focus-visible{ outline:2px solid var(--foco); outline-offset:1px; }


/* ── 3 · SIDEBAR — RETIRADA para la muestra: el menú «panel por grupo» (pm-*) ya
   tiene el diseño que eligió el dueño el 22-sep; esta capa no lo toca. ── */


/* ── 4 · HEADER ────────────────────────────────────────────────────────────────────────────
   Superficie sólida (sin blur sobre contenido que hace scroll: coste por frame) y sin
   translateZ (que además convertía al header en bloque contenedor de los popovers fixed). */
#appLayout header{
  background:var(--panel);
  border:0; border-bottom:1px solid var(--borde);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:none; transform:none;
  min-height:56px; padding:8px 16px; gap:12px;
}
#pageTitle,header h2{ font-family:var(--ff); font-size:var(--fs-lg); font-weight:600; letter-spacing:-.01em; }
#pageTitle::before{                                   /* orientación por módulo (§1c) */
  content:""; display:inline-block; width:8px; height:8px; border-radius:2px;
  background:var(--modulo); margin-right:10px; vertical-align:.12em;
}
#burger{ min-width:36px; min-height:36px; border-radius:var(--r-control); font-size:18px; }
.searchbox{ flex:0 1 260px; }
.searchbox input,.searchbox input:focus{
  width:100%; height:36px; padding:0 12px 0 36px;
  border:1px solid var(--borde-control); border-radius:var(--r-control);
  background-color:var(--panel); box-shadow:none;
  font-size:var(--fs-sm); font-weight:400;
}
.searchbox input:hover{ border-color:var(--texto2); background-color:var(--panel); }
.searchbox input::placeholder{ color:var(--gris); }
.sugs{ background:var(--glass-overlay); border:1px solid var(--borde); border-radius:var(--r-contenedor); box-shadow:var(--sh-2); transform:none; }
.sugs div{ font-size:var(--fs-sm); border-radius:var(--r-control); }
.sugs div:hover{ background:var(--accion-tinte); color:var(--texto); }

.hdr-tools .btn,.campbtn,.profbtn{ min-height:36px; }
.campbtn{ min-width:36px; background:var(--panel); border:1px solid var(--borde-fuerte); border-radius:var(--r-control); box-shadow:none; }
.campbtn:hover,.profbtn:hover{ background:var(--panel-2); border-color:var(--texto2); box-shadow:none; }
.camp-badge{ min-width:20px; height:20px; top:-8px; right:-8px; font-size:12px; background:var(--error); color:#FFFFFF; }
[data-theme="dark"] .camp-badge{ color:var(--sobre-accion); }
.profbtn{ background:var(--panel); border-color:var(--borde-fuerte); }
.prof-av{ background:var(--accion); color:var(--sobre-accion); }   /* antes azul→navy; en oscuro navy es claro */
.prof-item{ min-height:36px; font-size:var(--fs-sm); border-radius:var(--r-control); }
.prof-item:hover{ background:var(--panel-2); }
.prof-item.danger{ color:var(--error); }
.clave-warn{ color:var(--aviso); }                                 /* #b06a00 = 4,28:1 */
.hdr-tools .nuevobtn{ background:var(--accion); border-color:transparent; color:var(--sobre-accion); }
.hdr-tools .nuevobtn:hover{ background:var(--accion-hover); filter:none; }

/* Teléfono: el header medía ≥449 px de mínimo (flex-wrap:nowrap + .hdr-right flex-shrink:0 +
   input de búsqueda fijo en 150 px, styles.css:851-852/2812) → a 375 px se recortaban perfil y
   campana. Se reparte en dos filas: [☰ · herramientas] / [título · búsqueda]. */
@media (max-width:560px){
  #appLayout header{ flex-wrap:wrap; row-gap:0; column-gap:4px; padding:8px 12px; }
  #appLayout header #burger{ order:0; }
  #appLayout header .hdr-right{ order:1; margin-left:auto; gap:4px; }
  #appLayout header .hdr-tools{ gap:4px; }
  #appLayout header::after{ content:""; order:2; flex-basis:100%; height:0; }
  #appLayout header #pageTitle{ order:3; flex:0 1 auto; max-width:45%; margin-top:8px; font-size:var(--fs-base); }
  #appLayout header .searchbox{ order:4; flex:1 1 0; min-width:0; margin-top:8px; }
  .searchbox input,.searchbox input:focus{ width:100%; }
}
/* "＋ Nuevo" (600 px de ancho mínimo) anclado a la izquierda del botón se salía del viewport
   entre 561 y 880 px y en teléfono. Se fija al viewport. !important: inventario (g). */
@media (max-width:880px){
  #nuevoPop.nuevoMega{ position:fixed; top:64px; left:12px !important; right:12px !important;
    min-width:0; max-width:none; max-height:calc(100dvh - 140px); }
}


/* ── 5 · MOVIMIENTO Y DECORACIÓN QUE SE RETIRAN ────────────────────────────────────────────
   Operate: movimiento solo para estado (operate.md §Motion). Se retiran: brillo especular que
   barre el botón (styles.css:3054-3060), ripple (3142 + propuesta.html:383), brillo que sigue al
   cursor (3107-3115 + propuesta.html:401), elevación al pasar sobre CADA tarjeta/KPI/fila/chip
   (31 reglas :hover con translate/scale), entrada escalonada de tarjetas (3126-3131). */
.btn::after{ content:none; }
.btn .ripple{ display:none; }
.card:not(.kpi)::before{ content:none; }
.card:hover,.kpi:hover,.modcard:hover,.ccpick:hover,.ttile:hover,.rk:hover,.rk.sel:hover,
.bar-row:hover,.chip:hover,.dpill:hover,.badge.up:hover,.badge.down:hover,.abcpill:hover,
.pedtab:hover,.pedtab-add:hover,.kpi .chips span:hover,.aging-stack div:hover{ transform:none; }
.card:hover{ box-shadow:var(--sh-1); border-color:var(--borde); }
.modal .x:hover{ transform:none; }
.chip i:hover,.chip i:active,.chip:active{ transform:none; }
.matriz input[type=checkbox]:hover{ transform:none; filter:none; }
.aging-stack div:hover{ box-shadow:none; filter:brightness(1.06); }
/* Entrada de página: un fundido de 180 ms que confirma el cambio de vista (no coreografía). */
#main.is-entering{ animation:pb-aparecer var(--d-2) var(--ease-out) both; }
#main.is-entering .card{ animation:none; }
#main.fade>*{ animation:pb-aparecer var(--d-2) var(--ease-out) both; }
/* Marquesina de banners: se pausa al pasar el puntero o al enfocar (WCAG 2.2.2). */
#bnrMarquee:hover .mq,#bnrMarquee:focus-within .mq{ animation-play-state:paused; }
/* Capas que ya no necesitan compositor propio (12 translateZ(0) permanentes) */
.kpi,.glass,.modcard,.ccpick,.cardTools,#editBar,#overlay .panel{ transform:none; }

@keyframes pb-aparecer{ from{opacity:.4} to{opacity:1} }
@keyframes pb-modal{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
@keyframes pb-giro{ to{ transform:rotate(360deg) } }
@keyframes pb-brillo{ to{ transform:translateX(100%) } }


/* ── 6 · VIDRIO: se retira donde es decorativo ─────────────────────────────────────────────
   22 reglas con backdrop-filter activo (44 declaraciones con prefijo). Sobre el fondo plano de la
   página el desenfoque no se ve; en el header y el sidebar se recalcula en cada scroll/hover.
   Las capas flotantes quedan OPACAS (ya lo eran al 95 %: el blur no se veía y sí costaba). */
.glass,.kpi,.kpi .ico,.modcard,.modcard .tagOculto,.ccpick,.pedtabs,#editBar,.cardTools,#toast,
#filtros,#scrim,#overlay .panel{
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* inventario (b): vence el !important de styles.css:2972-2973 */
.sugs,.msel-pop,.modal .mbox,.mbox-fact,.modalCentros{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
/* Scrim del modal: oscurece sin desenfocar (el desenfoque de 4 px sobre TODA la ventana era el
   efecto más caro en teléfonos de gama baja). Sigue aislando el diálogo. */
.modal{ background:rgba(15,23,42,.56); -webkit-backdrop-filter:none; backdrop-filter:none; }
[data-theme="dark"] .modal{ background:rgba(2,6,15,.72); }
#scrim{ background:rgba(15,23,42,.5); }


/* ── 7 · COMPONENTES ───────────────────────────────────────────────────────────────────────── */

/* 7.1 BOTÓN — secundario por defecto; .primary; .ghost y .xs existían en el JS (39 y 3 usos)
   SIN estilo; .peligro nuevo para migrar los ~12 style="color:var(--rojo)" sobre .btn.
   Alto 36 px (44 en táctil). Sin elevación al pasar: cambia el fondo, no la posición. */
.btn{
  overflow:visible;               /* styles.css:3048 recortaba el punto de aviso de "Más" (propuesta.html:195) */
  min-height:36px; padding:0 14px; gap:var(--s-2);
  border:1px solid var(--borde-fuerte); border-radius:var(--r-control);
  background:var(--panel); color:var(--texto);
  font-family:var(--ff); font-size:var(--fs-sm); font-weight:500; line-height:1.2;
  box-shadow:var(--sh-1);
  transition:background-color var(--d-2) var(--ease-std),border-color var(--d-2) var(--ease-std),
             color var(--d-2) var(--ease-std),box-shadow var(--d-2) var(--ease-std);
}
.btn:hover{ background:var(--panel-2); border-color:var(--texto2); color:var(--texto); box-shadow:var(--sh-1); transform:none; }
.btn:active{ background:var(--panel-3); box-shadow:none; transform:none; transition-duration:var(--d-1); }
/* (0,3,1): vence :root .btn.primary (3009, degradado cobalto literal) y [data-theme=dark] (3010);
   el !important de html[data-modulo] .btn.primary (3021) ya pinta sólido vía --azul-2/--azul. */
html[data-theme] .btn.primary{
  background:var(--accion); background-image:none; border-color:transparent;
  color:var(--sobre-accion); box-shadow:var(--sh-1); filter:none;
}
html[data-theme] .btn.primary:hover{ background:var(--accion-hover); background-image:none; color:var(--sobre-accion); box-shadow:var(--sh-1); filter:none; transform:none; }
html[data-theme] .btn.primary:active{ background:var(--accion-press); background-image:none; filter:none; }
.btn.ghost{ background:transparent; border-color:transparent; box-shadow:none; color:var(--texto2); }
.btn.ghost:hover{ background:var(--panel-2); color:var(--texto); border-color:transparent; }
.btn.peligro{ color:var(--error); border-color:color-mix(in srgb,var(--error) 45%,var(--panel)); }
.btn.peligro:hover{ background:var(--error-tinte); border-color:var(--error); color:var(--error); }
html[data-theme] .btn.primary.peligro{ background:var(--error); color:var(--sobre-accion); }
.btn.xs{ min-height:28px; padding:0 10px; font-size:var(--fs-xs); }
.btn-ico{ min-width:36px; padding:0 9px; }
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; box-shadow:none; filter:none; }
.btn[aria-busy="true"]{ cursor:progress; position:relative; }
.btn[aria-busy="true"]::after{
  content:""; position:absolute; right:10px; top:50%; width:12px; height:12px; margin-top:-6px;
  border-radius:50%; border:2px solid currentColor; border-right-color:transparent;
  animation:pb-giro .8s linear infinite; opacity:.8;
}

/* 7.2 CAMPOS — base de especificidad CERO (:where) para los 313 input/select/textarea sin clase:
   hoy caen en el estilo del navegador. Cualquier clase o style en línea sigue ganando.
   Borde de control #7A8DA5 = 3,40:1 (WCAG 1.4.11; el borde actual #D8DFEA da 1,34:1). */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden],[type=image],[type=submit],[type=button],[type=reset]),select,textarea){
  font-family:inherit; color:var(--texto);
  background-color:var(--panel);
  border:1px solid var(--borde-control); border-radius:var(--r-control);
  padding:6px 10px;
}
:where(textarea){ line-height:1.45; }
:where(input,select,textarea)::placeholder{ color:var(--gris); opacity:1; }
:where(input,select,textarea):disabled{ background-color:var(--panel-2); color:var(--gris); cursor:not-allowed; }
:where(input,textarea)[readonly]{ background-color:var(--panel-2); }
:where(input,select,textarea)[aria-invalid="true"],
:where(input,select,textarea):user-invalid{ border-color:var(--error); box-shadow:0 0 0 1px var(--error); }
.fi,.pvSearch,.guiaSearch,.ptcF,.pedtools input[type=search],.pedtools input.busca{
  border:1px solid var(--borde-control); border-radius:var(--r-control);
  background:var(--panel); color:var(--texto); box-shadow:none;
}
.fi,.guiaSearch,.pedtools input[type=search],.pedtools input.busca{ min-height:36px; font-size:var(--fs-sm); }
.fi:focus,.guiaSearch:focus,.ptcF:focus,.pvSearch:focus,.pedtbl input.cant:focus,
.pedtools input[type=search]:focus,.pedtools input.busca:focus{ border-color:var(--foco); box-shadow:none; }
.fi[readonly]{ background:var(--panel-2); color:var(--texto2); }
.fl{ font-size:var(--fs-xs); font-weight:600; color:var(--texto2); }
.pedtbl input.cant{ border-color:var(--borde-control); min-height:30px; }

/* 7.3 BARRA DE FILTROS */
#filtros{
  background:var(--panel); border:0; border-bottom:1px solid var(--borde);
  box-shadow:none; padding:10px 16px; gap:12px;
}
#filtros .filtro label,.filtro label{
  font-size:var(--fs-xs); font-weight:600; text-transform:none; letter-spacing:0;
  color:var(--texto2); margin-bottom:4px;
}
#filtros .filtro input,#filtros .filtro select,.msel-btn{
  height:36px; min-height:36px; padding:0 10px;
  font-size:var(--fs-sm); font-weight:400;
  border:1px solid var(--borde-control); border-radius:var(--r-control);
  background:var(--panel); color:var(--texto); box-shadow:none;
}
.filtro input:hover,.filtro select:hover,.msel-btn:hover{ border-color:var(--texto2); box-shadow:none; }
.filtro input:focus,.filtro select:focus{ background:var(--panel); box-shadow:none; border-color:var(--foco); }
.msel-btn:focus-visible{ border-color:var(--foco); box-shadow:none; }
.filtro.atenuado::after{ font-size:var(--fs-xs); bottom:-18px; }
.rangos button,#rangoPresets .rp{
  min-height:32px; padding:0 10px; font-size:var(--fs-xs); font-weight:600;
  border:1px solid var(--borde-fuerte); border-radius:var(--r-control);
  background:var(--panel); color:var(--texto2);
}
.rangos button:hover,#rangoPresets .rp:hover{ border-color:var(--texto2); color:var(--texto); }
.rangos button.act,#rangoPresets .rp.act{ background:var(--accion); border-color:var(--accion); color:var(--sobre-accion); }
#filtrosToggle{ min-height:36px; border-color:var(--borde-fuerte); border-radius:var(--r-control); }

/* 7.4 POPOVER (.msel-pop: sedes, vistas, "Más", perfil, campana, ＋ Nuevo) */
.msel-pop{
  background:var(--glass-overlay); border:1px solid var(--borde); border-radius:var(--r-contenedor);
  box-shadow:var(--sh-2); padding:6px;
  transform:translateY(-4px);
  transition:opacity var(--d-salida) var(--ease-in),transform var(--d-salida) var(--ease-in),visibility var(--d-salida);
}
.msel-pop.open{ transform:none; transition-duration:var(--d-2); transition-timing-function:var(--ease-out); }
.msel-pop label{ min-height:32px; font-size:var(--fs-sm); border-radius:var(--r-control); }
.msel-pop label:hover{ background:var(--panel-2); color:var(--texto); }
.msel-pop .acciones{ border-top-color:var(--borde); }
.msel-pop .acciones button{ min-height:30px; font-size:var(--fs-xs); background:var(--panel-2); color:var(--texto2); border-radius:var(--r-control); }
.msel-pop .acciones button:hover{ background:var(--panel-3); background-image:none; color:var(--texto); box-shadow:none; }
.nuevoMega .megaGrupo h4{ text-transform:none; letter-spacing:0; font-size:var(--fs-xs); font-weight:600; color:var(--texto2); }

/* 7.5 TARJETA — contenedor plano: borde hairline + elevación 1, sin "levantarse" al pasar */
.card{
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--r-contenedor);
  box-shadow:var(--sh-1);
  transition:border-color var(--d-2) var(--ease-std);
}
h3,.cardHead h3{ font-family:var(--ff); font-size:var(--fs-sm); font-weight:600; letter-spacing:-.005em; color:var(--texto); }
h3::before{ content:none; }                     /* punto decorativo delante de cada título (1420) */
.cardHead .sub,.card .sub{ font-size:var(--fs-xs); color:var(--gris); font-weight:400; }
.card .lbl{ font-size:var(--fs-xs); font-weight:600; text-transform:none; letter-spacing:0; }
.card .val{ font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.01em; line-height:1.15; }
.modcard{ background:var(--panel); border:1px solid var(--borde); border-radius:var(--r-contenedor); box-shadow:var(--sh-1); }
.modcard::before{ content:none; }               /* barra lateral de color 3→5 px (2388) */
.modcard:hover{ border-color:var(--texto2); box-shadow:var(--sh-1); }
.modcard.warn,.modcard.alerta{ background:var(--aviso-tinte); border-color:color-mix(in srgb,var(--aviso) 45%,var(--panel)); }
.modcard.crit,.modcard.error{ background:var(--error-tinte); border-color:color-mix(in srgb,var(--error) 45%,var(--panel)); }
.modcard.success{ background:var(--exito-tinte); border-color:color-mix(in srgb,var(--exito) 45%,var(--panel)); }
.modcard h4{ font-family:var(--ff); font-weight:600; letter-spacing:0; }
.modcard p{ font-size:var(--fs-xs); }
.modcard .tagOculto{ border-radius:var(--r-etiqueta); font-size:var(--fs-xs); color:var(--aviso); background:var(--aviso-tinte); }
.ccpick{ background:var(--panel); border-color:var(--borde); border-radius:var(--r-contenedor); box-shadow:none; font-size:var(--fs-xs); }
.ccpick:hover{ background:var(--panel-2); border-color:var(--texto2); box-shadow:none; }

/* 7.6 KPI — etiqueta pequeña, cifra grande tabular, franja de orientación de 3 px.
   Arregla una regresión: .card::before{opacity:0} (3108) dejaba la franja aprobada por el dueño
   INVISIBLE hasta pasar el mouse. El ícono-emoji se retira (decorativo; operate.md). */
.kpi{ background:var(--panel); border:1px solid var(--borde); box-shadow:var(--sh-1); padding-top:19px; }
.kpi:hover{ box-shadow:var(--sh-1); border-color:var(--borde); }
html[data-theme] .kpi::before{                   /* inventario (c) */
  content:""; inset:0 0 auto 0; height:3px; border-radius:0; opacity:1; transition:none;
  background:var(--modulo) !important;
}
.kpi .ico{ display:none; }
.kpi .tit{ font-size:var(--fs-xs); font-weight:600; color:var(--texto2); letter-spacing:0; line-height:1.3; }
.kpi .des{ font-size:var(--fs-xs); color:var(--gris); }
.kpi .big{ font-family:var(--ff); font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.01em; line-height:1.15; color:var(--texto); transition:none; }
.kpi .chips span{ font-size:var(--fs-xs); border-radius:var(--r-etiqueta); background:var(--panel-2); border-color:var(--borde); }

/* 7.7 TABLA DENSA — 12,5 px (hoy 11,5 px), encabezado en minúsculas 600, filas de ~34 px,
   números a la derecha y tabulares, total con regla superior (no tinte verde). */
table{ font-size:var(--fs-xs); color:var(--texto); }
th,.cntab th,.rankTable th,.miniBarTable th,.matrizMes thead th{
  font-size:var(--fs-xs); font-weight:600; text-transform:none; letter-spacing:0;
  color:var(--texto2); background:var(--panel-2); padding:8px 12px; white-space:nowrap;
}
td{ padding:8px 12px; border-bottom-color:var(--borde); }
.matriz td,.matriz th{ font-size:var(--fs-xs); }
td.empty{ text-align:center; padding:24px 12px; }
tr.click:hover td{ background:var(--panel-2); }
tr.click:active td{ background:var(--panel-3); filter:none; }
tfoot td{ background:var(--panel-2); border-top:1px solid var(--texto2); font-weight:600; color:var(--texto); }
.matrizMes tfoot td{ border-top:1px solid var(--texto2); box-shadow:none; }
.matrizMes tfoot td:first-child{ color:var(--texto); text-transform:none; letter-spacing:0; font-size:var(--fs-xs); }
.scroll,.matrizMes,.matriz{ border-radius:var(--r-contenedor); border-color:var(--borde); box-shadow:none; }
html .stMore{ font-size:var(--fs-xs); }             /* (0,1,1): el <style> que inyecta componentes.js va después */
tr.ncrow td{ background:var(--error-tinte); }
.pedtbl tr.urge td{ box-shadow:none; background:var(--error-tinte); }   /* sin barra lateral de 3 px */

/* 7.8 BARRAS Y RANKING */
.bar-row{ font-size:var(--fs-xs); }
.bar-row:hover{ background:var(--panel-2); box-shadow:none; }
.bar-row .tr{ background:var(--panel-2); border-color:var(--borde); }
.bar-row .fl{ background:var(--dato); box-shadow:none; }
.bar-row .vl{ font-size:var(--fs-xs); }
.rk .nom{ font-size:var(--fs-xs); font-weight:600; text-transform:none; letter-spacing:0; }
.rk .pos,.rk .pctt{ font-size:var(--fs-xs); }
.rk .valr{ font-size:var(--fs-xs); }
/* inventario (d): borde lateral de 3 px (lista de rechazo de craft-floor) → borde completo de 1 px + tinte */
html[data-theme] .rk.sel{
  border-left-width:1px !important;
  border-color:color-mix(in srgb,var(--accion) 45%,var(--panel)) !important;
  background:var(--accion-tinte) !important; box-shadow:none;
}
html[data-theme] .rk.sel .pos,html[data-theme] .rk.sel .valr{ color:var(--accion); }
html[data-theme] .barra i,html[data-theme] .rk.sel .barra i{ background:var(--dato) !important; box-shadow:none; }
.rk .barra{ background:var(--panel-2); box-shadow:none; }

/* 7.9 CHIP (filtro activo, removible) — cápsula tintada, no botón sólido: el estado se ve sin
   gritar. ✕ con objetivo de 24×24 (hoy 16×16, falla WCAG 2.5.8). */
.chip{
  background:var(--accion-tinte); color:var(--accion);
  border:1px solid color-mix(in srgb,var(--accion) 35%,var(--panel));
  border-radius:var(--r-pill); box-shadow:none; filter:none;
  font-size:var(--fs-xs); font-weight:600; min-height:28px; padding:2px 4px 2px 12px;
}
.chip i{
  width:24px; height:24px; border-radius:var(--r-pill); color:inherit; background:transparent; font-size:var(--fs-sm);
}
.chip i:hover{ background:color-mix(in srgb,var(--accion) 16%,transparent); }
.cnchip{ min-height:32px; border-radius:var(--r-pill); }
.cnchip.on{ background:var(--accion); border-color:var(--accion); color:var(--sobre-accion); }

/* 7.10 BADGE / ETIQUETA DE ESTADO — rótulo rectangular de 4 px (lo estático no parece botón),
   texto AA sobre su tinte, y el glifo ▲▼ se conserva como pista no-cromática. */
.badge,[data-theme] .tipoPill,[data-theme] .paybadge,[data-theme] .dpill{
  border-radius:var(--r-etiqueta); font-size:var(--fs-xs); font-weight:600; letter-spacing:0; line-height:1.4;
}
.badge{ padding:1px 6px; background:var(--panel-2); color:var(--texto2); box-shadow:inset 0 0 0 1px var(--borde); }
[data-theme] .badge.up,[data-theme] .paybadge,[data-theme] .dpill.pos{
  background:var(--exito-tinte); color:var(--exito); border-color:color-mix(in srgb,var(--exito) 30%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--exito) 30%,transparent);
}
[data-theme] .badge.down,[data-theme] .dpill.neg{
  background:var(--error-tinte); color:var(--error); border-color:color-mix(in srgb,var(--error) 30%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--error) 30%,transparent);
}
.badge.up::before,.badge.down::before{ font-size:.62em; }
[data-theme] .tipoPill{ padding:1px 7px; }
[data-theme] .abc-A{ background:var(--error-tinte); color:var(--error); }
[data-theme] .abc-B{ background:var(--aviso-tinte); color:var(--aviso); }   /* #b45309 = 4,42:1 */
[data-theme] .abc-C{ background:var(--panel-2); color:var(--texto2); }
.abcpill{ width:20px; height:20px; line-height:20px; font-size:var(--fs-xs); border-radius:var(--r-etiqueta); }
.hcom-hd .tag{ border-radius:var(--r-etiqueta); font-size:var(--fs-xs); }
.hcom-hd .tag.ab{ background:var(--aviso-tinte); color:var(--aviso); }     /* #8a6d00 = 3,87:1 */
.hcom.abierta,.hcom.enproceso{ border-left-width:1px; }                   /* el estado ya va en .tag */
.snap,.ensChip{ font-size:var(--fs-xs); border-radius:var(--r-etiqueta); }
.pedtab .badge,.patChip .pcB,.fbN{ background:var(--accion); color:var(--sobre-accion); font-size:var(--fs-xs); box-shadow:none; }
.patChip .pcB{ min-width:20px; height:20px; }

/* 7.11 PESTAÑAS (.pedtab: pedidos y facturas en curso del POS) — línea de 2 px arriba en el
   color de acción (indicador estándar de pestaña) en vez de degradado + halo. */
.pedtabs{ background:transparent; border:0; border-bottom:1px solid var(--borde); box-shadow:none; padding:0; border-radius:0; }
.pedtab{
  min-height:36px; padding:0 12px; font-size:var(--fs-sm); color:var(--texto2);
  background:transparent; border-color:transparent; border-radius:var(--r-control) var(--r-control) 0 0;
}
.pedtab:hover{ background:var(--panel-2); color:var(--texto); }
.pedtab.act{ background:var(--panel); color:var(--texto); font-weight:600; border-color:var(--borde); box-shadow:none; }
.pedtab.act::after{ left:0; right:0; top:-1px; height:2px; border-radius:0; background:var(--accion); }
.pedtab .x{ min-width:24px; min-height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-control); }
.pedtab-add{ min-height:36px; border-color:var(--accion); color:var(--accion); border-radius:var(--r-control) var(--r-control) 0 0; }

/* 7.12 MODAL — capa opaca, radio de capa, elevación 3, aparece en 240 ms (sin blur). El ✕
   pasa de <span> de 30 px a objetivo de 36/44 px. (El <span> sin rol ni teclado queda en el plan.) */
.modal.open{ animation:pb-aparecer var(--d-2) var(--ease-out); }
.modal .mbox{
  border:1px solid var(--borde); border-radius:var(--r-capa); box-shadow:var(--sh-3);
  transform:none; animation:pb-modal var(--d-3) var(--ease-out);
}
.modal .x{ width:36px; height:36px; border-radius:var(--r-control); color:var(--texto2); transition:background-color var(--d-2) var(--ease-std); }
.modal .x:hover{ background:var(--panel-2); color:var(--texto); }
.factHead{ background:var(--lha-navy); box-shadow:none; }         /* cabecera de documento: navy plano */
.factHead::after{ content:none; }
.factHead .factNum .lbl,.factHead .empresa-sub,.metalbl{ font-size:var(--fs-xs); }
.factSec,.drawSec{ text-transform:none; letter-spacing:0; font-size:var(--fs-sm); font-weight:600; color:var(--texto); }
.ttile .l{ text-transform:none; letter-spacing:0; font-size:var(--fs-xs); }
.ttile.total{ background:var(--accion); color:var(--sobre-accion); box-shadow:none; }
.ttile.total .l,.ttile.total .v{ color:var(--sobre-accion); }
[data-theme="dark"] .fx2-num{ color:var(--accion); }             /* #1556C0 literal ≈2,5:1 en oscuro */
.drawer,.posDrawer{ box-shadow:var(--sh-3); transition-duration:var(--d-3); transition-timing-function:var(--ease-out); }

/* 7.13 AVISO (toast) — superficie inversa (navy/blanco, 17,9:1), sin borde lateral de color,
   y en móvil por ENCIMA de la barra inferior (hoy bottom:18px la tapa). */
#toast{
  background:var(--inverso); color:var(--sobre-inverso);
  border:0; border-radius:var(--r-contenedor); box-shadow:var(--sh-3);
  padding:10px 16px; font-size:var(--fs-sm); font-weight:500;
  max-width:min(420px,calc(100vw - 32px));
  transform:translateY(8px);
  transition:opacity var(--d-2) var(--ease-out),transform var(--d-2) var(--ease-out);
}
#toast.show{ transform:none; }
@media (max-width:880px){
  #toast{ right:16px; bottom:calc(60px + 12px + env(safe-area-inset-bottom)); }
  #avisosWrap{ bottom:calc(60px + 12px + env(safe-area-inset-bottom)); }
}
.aviso-card{ border-radius:var(--r-capa); box-shadow:var(--sh-3); }
.aviso-hd{ background:var(--accion); color:var(--sobre-accion); }
/* Barra "Se actualizó la plataforma": en oscuro era blanco sobre --navy (#EEF2FA) = 1,12:1.
   inventario (f): el cssText en línea exige !important. */
#nuevaVersionBar{ background:var(--inverso) !important; color:var(--sobre-inverso) !important; }
#nuevaVersionBar button{ color:var(--sobre-accion) !important; }

/* 7.14 ESTADO VACÍO Y CARGA */
.empty{ color:var(--gris); font-size:var(--fs-xs); padding:12px 0; }
.card>p.empty:only-child,.card>.empty:only-child{ padding:24px 8px; text-align:center; }
.skeleton{
  position:relative; overflow:hidden; display:block; min-height:1em;
  background:var(--panel-2); border-radius:var(--r-etiqueta); color:transparent;
}
.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--panel) 70%,transparent),transparent);
  animation:pb-brillo 1.2s linear infinite;
}
[aria-busy="true"]{ cursor:progress; }
.loading{ transition:opacity var(--d-2) var(--ease-std); }
#loadbar{ background:var(--lha-azul); box-shadow:none; }

/* 7.15 MODO DISEÑO, calendario, POS y piezas sueltas con blanco fijo sobre --azul */
#editBar{ background:var(--accion-tinte); border:1px solid color-mix(in srgb,var(--accion) 35%,var(--panel)); box-shadow:none; }
.cardTools{ background:var(--panel); border:1px solid var(--borde); box-shadow:var(--sh-2); }
.cardTools button{ min-width:28px; min-height:28px; font-size:var(--fs-xs); }
.btnMini{ min-height:28px; padding:0 10px; font-size:var(--fs-xs); border-radius:var(--r-control); border-color:var(--borde-fuerte); }
html .feDia.sel,html .feMesIt.sel,html .feDia.sel:hover{ background:var(--accion); color:var(--sobre-accion); }  /* fecha.css carga después: (0,2,1) */
html .feDia{ height:36px; }
.posIco,.usrAv,.posCli-sel .av{ background:var(--accion); color:var(--sobre-accion); }
.posVendBadge{ background:var(--accion); color:var(--sobre-accion); }
.posVendBadge .ctxK,.posVendBadge select{ color:inherit; }
.fabBtn,.fabItem.act{ background:var(--accion); color:var(--sobre-accion); }
.fabItem.act .fbN{ background:var(--sobre-accion); color:var(--accion); }
.hcompose-bar .send,.hcom-av,.posListaBtn.act{ background:var(--accion); color:var(--sobre-accion); }
.posListaBtn{ min-height:32px; border-color:var(--borde-fuerte); border-radius:var(--r-control); transition:background-color var(--d-2) var(--ease-std),border-color var(--d-2) var(--ease-std); }
.posCtx .ctxK,.posCli-ctx .ctxK,.pvBar .ctxK,.pvTk-sec,.agSec,.viewas label{
  text-transform:none; letter-spacing:0; font-size:var(--fs-xs); font-weight:600;
}
.posSold,.guiaVia,.guiaN,.permGH .permCnt,.aviso-hd .meta,.camp-meta,.hcompose-hint,.hcom-hd .when,.menc-dd .it small{ font-size:var(--fs-xs); }
.guiaItem.prod{ border-left-width:1px; background:color-mix(in srgb,var(--lha-verde) 7%,var(--panel)); }
.mobnav{ height:calc(60px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); }
.mobnav a{ font-size:12px; font-weight:500; color:var(--texto2); }
.mobnav a.pos{ color:var(--texto2); font-weight:600; }
.mobnav a.act{ color:var(--accion); box-shadow:inset 0 2px 0 var(--accion); }
.mobnav a:active{ transform:none; background:var(--panel-2); }

/* 7.16 LOGIN — se conserva la composición (panel de marca + formulario) y el patrón de cápsulas
   (lo único figurativo y propio del sector). Se retiran: texto con degradado, kicker en
   MAYÚSCULAS (prohibido por craft-floor), halos desenfocados y la plantilla hero-metric
   "81+ / 5 / 24/7" (cifra no verificable: el Manual documenta 42 reportes). Reversible: §9-B. */
@media (min-width:701px){ #overlay{ background:#F4F6F9; } }
.loginBrand{ background:var(--lha-navy); }
#overlay .loginForm .btn:hover{ transform:none; filter:none; background:var(--accion-hover); box-shadow:var(--sh-1); }
.lb-glow{ display:none; }
#overlay .lb-eyebrow{ display:none; }
.lb-headline em{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--lha-azul); }
.lb-stats{ display:none; }
.lf-link{ color:var(--lha-azul-profundo); }                     /* #48A8E0 sobre blanco = 2,64:1 */
.lf-link:hover{ color:var(--accion-hover); }
.lf-wrap:focus-within .lf-ico{ color:var(--lha-azul-profundo); }
.lf-check input{ accent-color:var(--lha-azul-profundo); }
/* inventario (e): style="color:#EF4444;font-size:11px" en línea (3,76:1 a 11 px) */
#loginError{ color:var(--error) !important; font-size:var(--fs-xs) !important; }


/* ── 8 · TÁCTIL — objetivos de 44 px con puntero grueso (28 de 29 controles medidos < 44 px) ── */
@media (pointer:coarse){
  .btn,.hdr-tools .btn,.campbtn,.profbtn,#burger,.modal .x,.prof-item,
  #filtros .filtro input,#filtros .filtro select,.msel-btn,.searchbox input,.fi,.guiaSearch,
  #filtrosToggle,.pedtab,.pedtab-add{ min-height:44px; }
  .btn-ico,.campbtn,#burger,.modal .x{ min-width:44px; }
  .searchbox input,.searchbox input:focus{ height:44px; }
  #filtros .filtro input,#filtros .filtro select,.msel-btn{ height:44px; }
  .modal .x{ height:44px; width:44px; }.msel-pop label,.rangos button,#rangoPresets .rp,.cnchip,.posListaBtn,
  .btn.xs,.cardTools button,.btnMini{ min-height:40px; }
  .chip{ min-height:36px; }
  .chip i,.pedtab .x{ min-width:32px; min-height:32px; }
  :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden]),select){ min-height:40px; }
}
/* inventario (h): en teléfono, todo campo de texto a ≥16 px para que iOS no haga zoom al enfocar
   (hay font-size de 11–13 px en línea en decenas de formularios). */
@media (pointer:coarse) and (max-width:560px){
  input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden],[type=button],[type=submit]),
  select,textarea{ font-size:max(16px,1em) !important; }
}


/* ── 9 · MOVIMIENTO REDUCIDO — alternativa INTENCIONAL (no el apagón global) ──────────────
   styles.css:606-613 y :2844-2854 fuerzan con !important transiciones/animaciones de .001 ms a
   TODO: el cambio de estado desaparece (popover, modal, aviso aparecen de golpe) y los
   indicadores de carga dejan de girar. Aquí, SOLO para los componentes listados: se conserva
   un fundido/cambio de color lineal de 120 ms (el estado se sigue percibiendo), se elimina
   todo desplazamiento, y los indicadores de carga siguen (lentos). Inventario (i). */
@media (prefers-reduced-motion: reduce){
  .btn,.chip,.pedtab,.cnchip,.msel-btn,.rangos button,#rangoPresets .rp,.prof-item,.posListaBtn,
  .sugs div,.msel-pop label,tr.click td,.fi,.filtro input,.filtro select,.searchbox input{
    transition-property:background-color,border-color,color,opacity !important;
    transition-duration:var(--d-1) !important;
    transition-timing-function:linear !important;
    transform:none !important;
  }
  .msel-pop,#toast{
    transform:none !important;
    transition-property:opacity,visibility !important;
    transition-duration:var(--d-1) !important;
    transition-timing-function:linear !important;
  }
  .modal.open,.modal .mbox,#main.is-entering,#main.fade>*{
    animation:pb-aparecer var(--d-1) linear both !important;
  }
  .btn[aria-busy="true"]::after{ animation:pb-giro 1.6s linear infinite !important; }
  .skeleton::after{ animation:none !important; }
}


/* ── 10 · UTILIDADES PARA LA MIGRACIÓN DE ESTILOS EN LÍNEA (sin uso aún) ────────────────────
   Cubren los patrones más repetidos de los 4.354 style="…" medidos (plan §3). Nombres en
   español, una responsabilidad por clase, valores SOLO de la escala. */
.t-gris{ color:var(--gris); }        .t-2{ color:var(--texto2); }       .t-texto{ color:var(--texto); }
.t-accion{ color:var(--accion); }    .t-exito{ color:var(--exito); }    .t-error{ color:var(--error); }
.t-aviso{ color:var(--aviso); }
.t-dato{ font-size:var(--fs-xs); }   .t-cuerpo{ font-size:var(--fs-sm); } .t-titulo{ font-size:var(--fs-lg); font-weight:600; }
.meta{ font-size:var(--fs-xs); color:var(--gris); }
.fw-600{ font-weight:600; }          .fw-700{ font-weight:700; }
.nowrap{ white-space:nowrap; }       .truncar{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.a-der{ text-align:right; }          .a-izq{ text-align:left; }         .a-centro{ text-align:center; }
.f-1{ flex:1 1 0; min-width:0; }     .w-100{ width:100%; }
.fila{ display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }
.fila-3{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
.fila-fin{ display:flex; align-items:center; justify-content:flex-end; gap:var(--s-2); flex-wrap:wrap; }
.fila-entre{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); flex-wrap:wrap; }
.pila{ display:flex; flex-direction:column; gap:var(--s-2); }
.mt-1{ margin-top:var(--s-1); } .mt-2{ margin-top:var(--s-2); } .mt-3{ margin-top:var(--s-3); } .mt-4{ margin-top:var(--s-4); }
.mb-2{ margin-bottom:var(--s-2); } .mb-3{ margin-bottom:var(--s-3); } .mb-4{ margin-bottom:var(--s-4); }
.vacio{ padding:var(--s-8) var(--s-3); text-align:center; color:var(--gris); font-size:var(--fs-sm); }
.panel-sutil{ background:var(--panel); border:1px solid var(--borde); border-radius:var(--r-contenedor); padding:var(--s-3) var(--s-4); }
.titulo-modal{ font-size:var(--fs-lg); font-weight:600; margin:0 44px var(--s-1) 0; }
.sobre-accion{ background:var(--accion); color:var(--sobre-accion); }
.cod{ font-family:var(--mono); font-size:.92em; }
.rejilla-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:var(--s-3); }
.rejilla-auto{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr)); gap:var(--s-3); }
.sr-solo{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }