→ para img tags
- background-image:var(--sophia-img) + background-position:var(--sophia-pos) → para divs con bg
- .dom-img y .sophia-img heredan el centrado para compat con código existente
*/
:root{
--sophia-img:url('/images/vec-avatar.png');
--sophia-pos:center center;
/* Tamaños por ubicación (gestionables desde Avatar Studio admin UI). */
--sophia-size-topbar:32px;
--sophia-size-sidebar-exp:24px;
--sophia-size-sidebar-col:44px;
--sophia-size-dashboard:46px;
}
.sophia-avatar,
.dom-img,
.sophia-img{
object-fit:cover;
object-position:var(--sophia-pos);
}
.sophia-avatar{
border-radius:50%;
display:block;
}
/* Bg-image variant (para divs con background-image en lugar de img tag) */
.sophia-bg{
background-image:var(--sophia-img);
background-size:cover;
background-position:var(--sophia-pos);
background-repeat:no-repeat;
}
.ndom-head .ndom-ico{font-size:14px;line-height:1;flex-shrink:0;opacity:.55;
width:24px;height:24px;border-radius:7px;
display:inline-flex;align-items:center;justify-content:center;
background:transparent;
transition:background .15s, opacity .15s, transform .15s;
overflow:hidden;
}
/* Cuando el icono contiene una imagen (caso SOphIA en Asistente),
el parent se hace circular para clip el avatar como en el topbar. */
.ndom-ico:has(.dom-img){border-radius:50%}
/* Imagen dentro del icono de dominio (caso SOphIA en Asistente).
Reemplaza el emoji por una foto circular. Centrado via .sophia-avatar utility. */
.ndom-ico .dom-img{
width:100%;height:100%;
border-radius:50%;
display:block;
}
/* Tamaño del avatar en sidebar expandido (override del 24x24 default cuando hay dom-img) */
.ndom-head .ndom-ico:has(.dom-img){
width:var(--sophia-size-sidebar-exp,24px);
height:var(--sophia-size-sidebar-exp,24px);
}
/* Tamaño del avatar en sidebar colapsado (override del 44x44 default) */
body.nav-collapsed .ndom-head .ndom-ico:has(.dom-img){
width:var(--sophia-size-sidebar-col,44px);
height:var(--sophia-size-sidebar-col,44px);
}
.dd-head-ico .dom-img{
width:var(--sophia-size-dashboard,46px);
height:var(--sophia-size-dashboard,46px);
border-radius:50%;
display:block;
box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.ndom-head:hover .ndom-ico{opacity:1}
/* En expandido el icono activo NO lleva cuadro, el outline del card +
tint suave de la row hacen el trabajo. Executive, no salvaje.
En colapsado el cuadrito 44x44 sigue (es el unico indicador). */
.ndom-head.active .ndom-ico{
opacity:1;
background:transparent;
color:inherit;
box-shadow:none;
}
.ndom-head .ndom-name{
flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Badge "ACTIVO" eliminado, bg + border-left + bold ya indican activo */
.ndom-head .ndom-badge{display:none}
.ndom-head .ndom-chev{
font-size:14px;color:var(--tx3);flex-shrink:0;font-weight:300;
opacity:.6;
transition:transform .15s,color .15s,opacity .15s;
}
.ndom-head:hover .ndom-chev{color:var(--mag);transform:translateX(2px);opacity:1}
.ndom-body{
background:var(--sur2);
padding:5px 0 9px;
border-top:1px solid var(--bdr);
animation:ndomExpand .25s ease-out;
}
.ndom-empty{
padding:14px 16px;color:var(--tx3);font-size:11px;
text-align:center;font-style:italic;
}
@keyframes ndomExpand{
from{opacity:0;transform:translateY(-3px)}
to{opacity:1;transform:translateY(0)}
}
/* ── Acordeón de módulos en sidebar (renderNav v45h) ── */
.nmod{
border-bottom:1px solid var(--bdr);
background:var(--sur);
}
.nmod:last-child{border-bottom:0}
.nmod-head{
width:100%;
display:flex;align-items:center;gap:9px;
padding:10px 13px 10px 11px;
background:transparent;
border:0;border-left:3px solid transparent;
cursor:pointer;
font-family:'Inter',sans-serif;
font-size:11px;font-weight:600;letter-spacing:1px;
color:var(--mod-color,var(--tx1));
text-align:left;text-transform:uppercase;
opacity:.62;
transition:background .15s, border-left-color .15s, opacity .15s;
}
.nmod-head:hover{background:var(--sur2);opacity:.95}
.nmod-head:focus-visible{outline:2px solid var(--mod-color,var(--mag));outline-offset:-2px}
/* Activo: full opacity + bg + left border en color del módulo */
.nmod-head.active{
background:var(--mod-bg);
border-left-color:var(--mod-color);
cursor:default;
opacity:1;
font-weight:700;
}
.nmod-head .nmod-ico{font-size:15px;line-height:1;flex-shrink:0}
.nmod-head .nmod-name{
flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nmod-head .nmod-badge{
font-size:8px;font-weight:600;letter-spacing:.5px;
padding:1px 7px;border-radius:var(--pill);
background:var(--mod-color);color:#fff;
flex-shrink:0;text-transform:uppercase;
opacity:.88;
}
.nmod-head .nmod-chev{
font-size:13px;color:var(--tx3);flex-shrink:0;font-weight:400;
transition:transform .15s,color .15s;
opacity:.7;
}
.nmod-head:hover .nmod-chev{color:var(--mod-color);transform:translateX(2px);opacity:1}
/* Body solo presente en el módulo activo */
.nmod-body{
background:var(--sur2);
padding:4px 0 8px;
border-top:1px solid var(--bdr);
animation:nmodExpand .25s ease-out;
}
.nmod-empty{
padding:14px 16px;color:var(--tx3);font-size:11px;
text-align:center;font-style:italic;
}
@keyframes nmodExpand{
from{opacity:0;transform:translateY(-4px)}
to{opacity:1;transform:translateY(0)}
}
/* Acordeón ocultado, volvemos a chip-bar clásico (sopa de letras) */
.nmod-head,.nmod-body,.nmod{display:none}
/* ── VECTOR Hub (curtain modal) ── */
#hub-curtain{
position:fixed;inset:0;z-index:99999;
display:flex;align-items:center;justify-content:center;
padding:20px;animation:hubFadeIn .18s ease-out;
}
#hub-curtain.closing{animation:hubFadeOut .15s ease-in forwards}
.hub-backdrop{
position:absolute;inset:0;
background:rgba(15,15,25,.55);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
cursor:pointer;
}
.hub-panel{
position:relative;
width:min(720px,94vw);max-height:88vh;overflow:auto;
background:var(--sur);border:1px solid var(--bdr);
border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.32);
padding:26px 26px 20px;
animation:hubPanelIn .25s cubic-bezier(.2,.9,.3,1);
}
.hub-head{margin-bottom:20px;position:relative;padding-right:38px}
.hub-head-title{
display:flex;align-items:center;gap:9px;
font-family:'Inter',sans-serif;font-weight:700;
font-size:21px;letter-spacing:1.5px;color:var(--tx1);
}
.hub-head-ico{font-size:19px;line-height:1}
.hub-head-sub{
margin-top:3px;font-size:11px;color:var(--tx3);
letter-spacing:.4px;
}
.hub-close{
position:absolute;top:-4px;right:-4px;
width:30px;height:30px;border-radius:50%;
background:var(--sur2);border:1px solid var(--bdr);
color:var(--tx2);cursor:pointer;font-size:20px;line-height:1;
display:flex;align-items:center;justify-content:center;
transition:background .15s, color .15s, border-color .15s;
}
.hub-close:hover{background:var(--bdr);color:var(--tx1);border-color:var(--mag)}
.hub-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
gap:10px;
}
.hub-card{
display:flex;flex-direction:column;align-items:flex-start;gap:5px;
padding:14px 13px 13px;
background:var(--sur2);
border:1px solid var(--bdr);border-radius:14px;
cursor:pointer;text-align:left;
font-family:'Inter',sans-serif;
transition:transform .12s, border-color .15s, box-shadow .15s, background .15s;
position:relative;overflow:hidden;
animation:hubCardIn .35s ease-out backwards;
color:var(--tx1);
}
.hub-card:hover{
transform:translateY(-2px);
border-color:var(--card-color,var(--mag));
background:var(--card-bg,var(--sur2));
box-shadow:0 6px 16px rgba(0,0,0,.10);
}
.hub-card:focus-visible{
outline:2px solid var(--card-color,var(--mag));outline-offset:2px;
}
.hub-card.active{
border-color:var(--card-color);
background:var(--card-bg);
}
.hub-card-ico{font-size:28px;line-height:1;margin-bottom:2px}
.hub-card-name{
font-family:'Inter',sans-serif;font-weight:700;
font-size:15px;letter-spacing:.8px;color:var(--card-color,var(--tx1));
}
.hub-card-sub{
font-size:10px;color:var(--tx3);letter-spacing:.3px;
line-height:1.35;
}
.hub-card-badge{
position:absolute;top:8px;right:8px;
background:var(--card-color);color:#fff;
font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
padding:2px 7px;border-radius:var(--pill);
}
.hub-foot{
margin-top:18px;padding-top:13px;border-top:1px solid var(--bdr);
font-size:10px;color:var(--tx3);text-align:center;letter-spacing:.4px;
}
.hub-foot kbd{
background:var(--sur2);border:1px solid var(--bdr);border-radius:4px;
padding:1px 5px;font-family:inherit;font-weight:600;
font-size:9px;color:var(--tx2);margin:0 1px;
}
@keyframes hubFadeIn{from{opacity:0}to{opacity:1}}
@keyframes hubFadeOut{from{opacity:1}to{opacity:0}}
@keyframes hubPanelIn{
from{opacity:0;transform:translateY(8px) scale(.98)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes hubCardIn{
from{opacity:0;transform:translateY(-4px)}
to{opacity:1;transform:translateY(0)}
}
@media (max-width:600px){
#hub-curtain{padding:14px}
.hub-panel{padding:20px 18px 16px;border-radius:14px}
.hub-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.hub-card{padding:12px 11px}
.hub-card-ico{font-size:24px}
.hub-card-name{font-size:13px}
.hub-foot{font-size:9px}
}
#nscroll{flex:1;overflow-y:auto;padding:6px 0}
.nsec{margin-bottom:1px}
.nsh{display:flex;align-items:center;justify-content:space-between;
padding:5px 13px 3px;font-size:9px;font-weight:700;letter-spacing:1.3px;
text-transform:uppercase;color:var(--tx3);cursor:pointer;user-select:none}
.nsa{width:11px;height:11px;transition:transform .2s;color:var(--tx3)}
.nsec.open .nsa{transform:rotate(90deg)}
.nsi{overflow:hidden;max-height:0;transition:max-height .25s var(--ease)}
.nsec.open .nsi{max-height:600px}
.nit{display:flex;align-items:center;gap:9px;padding:7px 13px 7px 19px;
font-size:13px;color:var(--tx2);cursor:pointer;transition:all .15s;
border-left:2px solid transparent;position:relative;white-space:nowrap}
.nit:hover{background:var(--hov);color:var(--tx1)}
.nit.active{color:var(--tx);background:var(--hov)}
.nit.active::before{content:'';position:absolute;left:0;top:0;bottom:0;
width:2px;border-radius:0 2px 2px 0;background:var(--grad)}
.ndot{width:5px;height:5px;border-radius:50%;background:var(--bdr3);flex-shrink:0}
.nit.active .ndot{background:var(--mag)}
.nbadge{margin-left:auto;min-width:18px;height:18px;background:var(--mag);
border-radius:var(--pill);font-size:10px;font-weight:700;color:#fff;
padding:0 4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* Main */
#main{flex:1;overflow-y:auto;background:var(--bg);padding:26px 28px;animation:fIn .3s var(--ease)}
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.pt{font-family:'Inter',sans-serif;font-weight:700;font-size:26px;
letter-spacing:.3px;color:var(--tx);line-height:1.1}
.ps{font-size:13px;color:var(--tx2);margin-top:3px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* Cards */
.card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);
padding:18px 20px;box-shadow:var(--sh-sm);transition:border-color .2s,box-shadow .2s}
.card:hover{border-color:var(--bdr2);box-shadow:var(--sh-md)}
.sc{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);
padding:16px 20px;box-shadow:var(--sh-sm);position:relative;overflow:hidden;
transition:border-color .2s,transform .2s}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.sc:hover{border-color:var(--bdr2);transform:translateY(-1px)}
.slbl{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
color:var(--tx3);margin-bottom:6px}
.sval{font-family:'Inter',sans-serif;font-weight:700;font-size:30px;color:var(--tx);line-height:1}
/* KPI de dinero: montos largos ("L. 11,004.89") no deben partir el "L." del número.
clamp escala hacia abajo en pantallas angostas / cifras de 7+ dígitos. */
.sval-money{font-size:clamp(15px,4.6vw,19px);white-space:nowrap;line-height:1.15}
.svs{font-family:'Inter',sans-serif;font-weight:700;font-size:18px;color:var(--tx)}
.ssub{font-size:12px;color:var(--tx2);margin-top:4px}
.mc{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);
padding:20px;cursor:pointer;box-shadow:var(--sh-sm);transition:all .2s var(--ease);
display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.mc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
opacity:0;transition:opacity .2s}
.mc:hover{transform:translateY(-2px);border-color:var(--bdr2);box-shadow:var(--sh-md)}
.mc:hover::before{opacity:1}
.mb{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--pill);
font-weight:700;font-size:11px;letter-spacing:.8px;align-self:flex-start}
.mn{font-family:'Inter',sans-serif;font-weight:700;font-size:17px;color:var(--tx)}
.md{font-size:12px;color:var(--tx2);line-height:1.55}
.ma{margin-top:auto;align-self:flex-end;color:var(--tx3);transition:transform .2s,color .2s}
.mc:hover .ma{color:var(--mag);transform:translate(2px,-2px)}
.ew{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);
padding:20px;display:flex;justify-content:center;overflow:hidden;box-shadow:var(--sh-sm)}
.ew svg{max-width:100%;height:auto}
/* About */
.as{margin-bottom:26px}
.as h2{font-family:'Inter',sans-serif;font-weight:700;font-size:18px;color:var(--tx);
letter-spacing:.2px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.as h2::after{content:'';flex:1;height:1px;background:var(--bdr2)}
.as p{color:var(--tx1);line-height:1.78;margin-bottom:9px;font-size:14px}
.as strong{color:var(--tx);font-weight:600}
.pillar{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);
padding:18px 20px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--sh-sm)}
.pnum{font-family:'Inter',sans-serif;font-weight:700;font-size:26px;
background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
flex-shrink:0;line-height:1;margin-top:2px}
.ptit{font-family:'Inter',sans-serif;font-weight:700;font-size:15px;color:var(--tx);margin-bottom:5px}
.pdesc{font-size:13px;color:var(--tx1);line-height:1.65}
.qt{border-left:4px solid var(--mag);padding:16px 20px;margin:18px 0;
background:rgba(212,32,112,.04);border-radius:0 var(--r) var(--r) 0;
text-align:left}
.qt p{font-style:normal;font-weight:600;color:var(--tx);font-size:14px;line-height:1.78;margin:0}
.vtag{display:inline-flex;align-items:center;gap:6px;background:var(--sur);
border:1px solid var(--bdr);border-radius:var(--pill);padding:4px 12px;
font-size:11px;color:var(--tx2);box-shadow:var(--sh-sm)}
.vtag span{font-family:'Inter',sans-serif;font-weight:700;font-size:12px;
background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
/* Ribbon */
.rl{display:grid;grid-template-columns:252px 1fr;gap:14px;height:calc(100vh - var(--bar-h) - 68px)}
.rll{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);
overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-sm)}
.rlh{padding:12px 14px;border-bottom:1px solid var(--bdr);
font-family:'Inter',sans-serif;font-weight:700;font-size:13px;letter-spacing:.5px;color:var(--tx);
display:flex;align-items:center;justify-content:space-between}
.rls{flex:1;overflow-y:auto;padding:5px}
.rpi{display:flex;align-items:center;gap:9px;padding:9px 11px;
border-radius:var(--rsm);cursor:pointer;transition:background .15s}
.rpi:hover,.rpi.active{background:var(--hov)}
.rpia{width:30px;height:30px;border-radius:7px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-family:'Inter',sans-serif;font-weight:700;font-size:12px}
.rpin{font-size:13px;font-weight:500;color:var(--tx)}
.rpis{font-size:11px;color:var(--tx2)}
.re{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);
overflow-y:auto;padding:18px;box-shadow:var(--sh-sm)}
.ree{height:100%;display:flex;flex-direction:column;align-items:center;
justify-content:center;color:var(--tx3);gap:9px}
.rs{margin-bottom:20px}
.rst{font-size:9px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
color:var(--tx3);margin-bottom:9px;padding-bottom:6px;border-bottom:1px solid var(--bdr)}
.rg{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:7px}
.ri{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:var(--rsm);
background:var(--sur2);border:1px solid var(--bdr);cursor:pointer;transition:all .15s;user-select:none}
.ri:hover{border-color:var(--bdr2);background:var(--hov)}
.ri.ck{border-color:rgba(212,32,112,.28);background:rgba(212,32,112,.05)}
.rc{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--bdr2);flex-shrink:0;
display:flex;align-items:center;justify-content:center;background:var(--sur);transition:all .15s}
.ri.ck .rc{background:var(--grad);border-color:transparent}
.rl2{font-size:11px;color:var(--tx2)}
.ri.ck .rl2{color:var(--tx)}
/* Table */
.tw{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);
overflow:hidden;box-shadow:var(--sh-sm)}
.th{display:grid;padding:9px 15px;background:var(--sur2);border-bottom:1px solid var(--bdr);
font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--tx3)}
.tr{display:grid;padding:11px 15px;border-bottom:1px solid var(--bdr);
align-items:center;transition:background .15s}
.tr:last-child{border-bottom:none}
.tr:hover{background:var(--hov)}
/* Buttons, fC42: padding más generoso en .pri (CTAs principales) */
.bsm{padding:8px 16px;border-radius:var(--rsm);font-size:12.5px;font-weight:600;cursor:pointer;
border:1px solid var(--bdr2);background:var(--sur);color:var(--tx1);transition:all .15s;
font-family:'Inter',sans-serif;min-height:34px;display:inline-flex;align-items:center;gap:8px;
white-space:nowrap}
/* fix w.141: el reset `.shell button{padding:0;border:0;background:transparent}`
(0,1,1) le gana a `.bsm` (0,1,0) y aplastaba los .bsm SIN estilo inline dentro
del shell (ej. "Adjuntar imagen" del escalamiento; observación Darío). Se
restaura el look base con :not(.pri) para no pisar el gradiente del primario. */
.shell .bsm:not(.pri){padding:8px 16px;border:1px solid var(--bdr2);background:var(--sur)}
.bsm:hover{border-color:var(--bdr3);background:var(--hov)}
.bsm:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.bsm.pri{padding:10px 22px;background:var(--grad);border-color:transparent;color:#fff;
box-shadow:0 2px 8px rgba(212,32,112,.28);min-height:38px;font-size:13px}
.bsm.pri:hover{opacity:.88;box-shadow:0 4px 12px rgba(212,32,112,.36)}
/* Chips selectores de tipo (escalamientos w.140): más aire que .bsm, activo
con acento sólido. Prefijo .shell obligatorio: el reset `.shell button
{padding:0}` (0,0,1,1) le ganaba a .sophesc-tipo y los aplastaba (observación
Darío w.139). */
.sophesc-tipos{display:flex;gap:10px;flex-wrap:wrap}
.shell .sophesc-tipo,.sophesc-tipo{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;
border-radius:12px;border:1.5px solid var(--bdr2);background:var(--sur);
color:var(--tx1);font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;
cursor:pointer;transition:all .15s;white-space:nowrap;line-height:1}
.sophesc-tipo .sophesc-tipo-ico{font-size:16px;line-height:1}
.sophesc-tipo:hover{border-color:var(--bdr3);background:var(--hov)}
.sophesc-tipo.active{background:var(--ac);border-color:transparent;color:#fff;
box-shadow:0 3px 10px -2px var(--ac-bg)}
.bsm.pri svg{flex-shrink:0}
/* Modal */
.mov{position:fixed;inset:0;z-index:300;background:rgba(24,18,14,.35);
display:flex;align-items:center;justify-content:center;padding:20px;
animation:fIn .2s var(--ease);backdrop-filter:blur(6px)}
.modal{background:var(--sur);border:1px solid var(--bdr2);border-radius:16px;padding:26px;
width:100%;max-width:456px;max-height:90vh;overflow-y:auto;box-shadow:var(--sh-lg);animation:cIn .25s var(--ease)}
.mtit{font-family:'Inter',sans-serif;font-weight:700;font-size:19px;
letter-spacing:.2px;margin-bottom:18px;color:var(--tx)}
.mac{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}
/* Footers de modal en pantalla angosta · FIX GLOBAL (w.172).
Historia: el mismo bug se reportó tres veces desde el campo. Primero en la
ficha PDV (Alex #484), después en el editor de circuitos (auditoría
ui-quality w.145) y ahora en el editor de rutas (Alex, 2026-07-23: "al
editar una ruta el botón cancelar está fuera de rango"). Las dos primeras
se parchearon con una clase por modal (.mac-sodpv, .mac-sodcc) justamente
para no tocar .mac global sin validar.
Pero el portal tiene 112 footers con `class="mac"` a secas: parchear de a
uno garantiza que el cuarto caso también llegue por WhatsApp. La causa es
una sola, flex sin wrap + 3 botones (Cancelar / Eliminar / Guardar) que no
entran a 375-390px, así que el arreglo va a la raíz.
Bajo riesgo: flex-wrap solo actúa cuando el contenido NO entra. Si entra,
el layout queda idéntico al de hoy. */
@media(max-width:480px){
.mac{flex-wrap:wrap;row-gap:8px}
}
/* Scrollbar más ancha/visible, solo modal editor de encuesta SOSAH (form largo
con muchas secciones + lista de preguntas). Pedido 2026-07-07, no global. */
.menc-modal-scroll{scrollbar-width:auto;scrollbar-color:var(--bdr2) transparent}
.menc-modal-scroll::-webkit-scrollbar{width:14px}
.menc-modal-scroll::-webkit-scrollbar-track{background:transparent}
.menc-modal-scroll::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:8px;border:3px solid var(--sur)}
.menc-modal-scroll::-webkit-scrollbar-thumb:hover{background:var(--tx3)}
/* Coming soon */
.cs{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
color:var(--tx3);gap:10px;text-align:center;padding:60px 20px}
.cs h3{font-family:'Inter',sans-serif;font-weight:700;font-size:17px;color:var(--tx2)}
.cs p{font-size:13px;max-width:280px}
/* Animations */
@keyframes fIn{from{opacity:0}to{opacity:1}}
@keyframes fDown{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
/* Toast */
#tw{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;
gap:7px;z-index:999;pointer-events:none}
.toast{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:var(--r);
background:var(--sur);border:1px solid var(--bdr2);font-size:13px;color:var(--tx1);
box-shadow:var(--sh-md);animation:cIn .2s var(--ease);pointer-events:all;max-width:300px}
.toast.ok{border-color:rgba(5,150,105,.25);background:rgba(5,150,105,.04)}
.toast.err{border-color:rgba(212,32,112,.25);background:rgba(212,32,112,.04)}
.tdot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.toast.ok .tdot{background:#059669}
.toast.err .tdot{background:var(--mag)}
.toast .tdot{background:var(--ora)}
#gind{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
background:var(--sur);border:1px solid var(--bdr2);border-radius:var(--pill);
padding:5px 14px;font-size:12px;color:var(--tx2);display:none;
align-items:center;gap:7px;z-index:100;
animation:pulse 1.5s infinite;box-shadow:var(--sh-md)}
#gind.show{display:flex}
#gdot{width:6px;height:6px;border-radius:50%;background:var(--ora)}
/* ── NAV OVERLAY (mobile drawer) ── */
#nav-overlay{
display:none;position:fixed;inset:0;z-index:90;
background:rgba(24,18,14,.45);backdrop-filter:blur(3px)}
#nav-overlay.show{display:block}
/* ── BOTTOM NAV (mobile) ── */
#bottom-nav{
display:none;height:58px;background:var(--sur);
border-top:1px solid var(--bdr);flex-shrink:0;
align-items:center;justify-content:space-around;
padding:0 8px;position:relative;z-index:60;
safe-area-inset-bottom:env(safe-area-inset-bottom,0)}
.bnav-item{
display:flex;flex-direction:column;align-items:center;
gap:3px;padding:6px 12px;border-radius:10px;cursor:pointer;
transition:background .15s;color:var(--tx2);flex:1;min-width:0}
.bnav-item:hover,.bnav-item.active{color:var(--mag)}
.bnav-item.active{background:rgba(212,32,112,.07)}
.bnav-icon{width:20px;height:20px;flex-shrink:0}
.bnav-lbl{font-size:10px;font-weight:600;letter-spacing:.3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-width:54px}
.bnav-dot{width:4px;height:4px;border-radius:50%;background:var(--mag);
position:absolute;top:8px;right:8px;display:none}
.bnav-item.active .bnav-dot{display:block}
/* w.101 (fix reporte Darío 2026-07-17): el .leaflet-container necesita su PROPIO
contexto de stacking (z-index bajo) también en DESKTOP, no solo en el drawer
mobile. Sin esto, sus panes/controles internos (Leaflet los sube a 700-800 para
popups/zoom) ESCAPAN y se sobreponen al menú lateral (#nav) cuando hay un mapa
renderizado, el mapa "flota" encima del sidebar. Con z-index:1 + position:relative
todo el mapa queda contenido en z-index 1, debajo del nav. El fullscreen (.vmapa-
fullscreen, z-index del wrap) no se afecta. */
.leaflet-container{z-index:1;position:relative}
/* ── DRAWER NAV (mobile slide-in) ── */
@media(max-width:768px){
/* Nav se convierte en drawer deslizable.
z-index:1100 para quedar SIEMPRE por encima de Leaflet (panes internos
de leaflet-container suben hasta z-index 700-800 para popups/controles).
Sin esto, en APK el mapa se ve "flotando" sobre el drawer cuando el
usuario abre el menu lateral mientras tiene un mapa renderizado. */
#nav{
position:fixed;top:0;left:0;bottom:0;z-index:1100;
transform:translateX(-100%);transition:transform .28s var(--ease);
width:280px !important;
box-shadow:var(--sh-lg)}
#nav.mob-open{transform:translateX(0)}
/* Asegurar contexto de stacking propio del leaflet-container para que sus
panes internos no escapen del z-index del contenedor. */
.leaflet-container{z-index:1 !important;position:relative}
/* v45g/15: cuando el drawer mobile esta abierto, ocultar TODAS las overlays
del mapa (toolbar, boton fullscreen, container), sin esto, las toolbars
con z-index propio (430) quedan visibles encima del drawer. */
body.mob-nav-open .vmapa-toolbar,
body.mob-nav-open .btn-fullscreen-mapa,
body.mob-nav-open .vmapa-leyenda,
body.mob-nav-open .vmapa-wrap,
body.mob-nav-open .mapa-marc-wrap,
body.mob-nav-open .leaflet-container{visibility:hidden !important}
/* Ocultar colapsar en mobile */
#nfooter{display:none}
/* Bottom nav visible */
#bottom-nav{display:flex}
/* Layout sin nav fijo */
#layout{flex-direction:column}
#main{padding:14px;padding-bottom:calc(60px + env(safe-area-inset-bottom, 0px))}
/* Topbar compacto */
#topbar{padding:0 12px;gap:10px}
.tsep{display:none}
#tmod{display:none}
/* Page header, botones arriba, título debajo, compacto */
.ph{flex-direction:column-reverse;align-items:stretch;gap:6px;margin-bottom:14px}
.ph > *{width:100%}
.ph .pt{font-size:22px}
.ph .ps{font-size:12px}
/* Grids */
.g2{grid-template-columns:1fr 1fr}
.g3,.g4{grid-template-columns:1fr 1fr}
/* Ribbon/perfiles, stacked */
.rl{grid-template-columns:1fr;height:auto}
/* Sidebar móvil, solo títulos de los 7 dominios; sub-secciones viven en
las cards del dashboard del dominio. Override del nav-collapsed cuando el
drawer mobile está abierto, para que labels siempre se vean. */
#nav .ndom-body{display:none !important}
body.nav-collapsed #nav{width:280px !important}
body.nav-collapsed #nav .nm-brand{display:flex !important}
body.nav-collapsed #nav .nm-brand .nm-text,
body.nav-collapsed #nav .ndom-name,
body.nav-collapsed #nav .ndom-chev,
body.nav-collapsed #nav .um-info,
body.nav-collapsed #nav .um-options,
body.nav-collapsed #nav .um-version{display:initial}
body.nav-collapsed #nav .ndom-head{padding:11px 14px;justify-content:flex-start;gap:10px}
body.nav-collapsed #nav .nmh{justify-content:flex-start;padding:14px 14px}
body.nav-collapsed #nav #nav-user{padding:10px;display:block}
body.nav-collapsed #nav .um-header{padding:10px;justify-content:flex-start;background:initial}
body.nav-collapsed #nav .um-toggle{display:initial}
}
@media(max-width:520px){
.g2,.g3,.g4{grid-template-columns:1fr}
#topbar{padding:0 10px}
#main{padding:12px;padding-bottom:calc(50px + env(safe-area-inset-bottom, 0px))}
.g4{grid-template-columns:1fr 1fr}
#db-status{display:none !important}
}
/* =====================================================
SISTEMA SEMÁNTICO, inspirado en HRMS, nativo VECTOR
Color tokens, badges, alert cards, tablas, empty states
===================================================== */
/* Tokens semánticos, fallback si el tema no los cargó aún */
:root{
--ok:var(--vx-status-success,#0F7B5C); --ok-bg:var(--vx-status-success-soft,rgba(15,123,92,.10));
--wn:var(--vx-status-warning,#A05A00); --wn-bg:var(--vx-status-warning-soft,rgba(160,90,0,.10));
--er:var(--vx-status-danger,#A1294A); --er-bg:var(--vx-status-danger-soft,rgba(161,41,74,.10));
--in:var(--vx-status-info,#1A6FB0); --in-bg:var(--vx-status-info-soft,rgba(26,111,176,.10));
--ac:var(--mag); --ac-bg:var(--vx-brand-primary-soft,rgba(14,63,77,.10));
--mu:var(--tx2); --mu2:var(--tx3);
}
/* Badges, densos, semánticos */
.badge{display:inline-flex;align-items:center;gap:4px;
padding:2px 9px;border-radius:var(--pill);font-weight:700;font-size:11px;
letter-spacing:.2px;line-height:1.5;white-space:nowrap}
.badge.xs{font-size:10px;padding:1px 7px}
.badge.sm{font-size:11px;padding:2px 8px}
.badge.lg{font-size:12px;padding:3px 11px}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-wn{background:var(--wn-bg);color:var(--wn)}
.b-er{background:var(--er-bg);color:var(--er)}
.b-in{background:var(--in-bg);color:var(--in)}
.b-ac{background:var(--ac-bg);color:var(--ac)}
.b-gr{background:var(--sur2);color:var(--tx2)}
.b-pu{background:rgba(124,58,237,.10);color:#7C3AED}
/* Dot de estado */
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;vertical-align:middle}
.dot-ok{background:var(--ok)} .dot-wn{background:var(--wn)}
.dot-er{background:var(--er)} .dot-in{background:var(--in)}
.dot-gr{background:var(--tx3)}
/* Alert cards, para mensajes con personalidad */
.al{display:flex;align-items:flex-start;gap:12px;
background:var(--sur);border:1.5px solid var(--bdr);border-radius:var(--r);
padding:12px 16px;box-shadow:var(--sh-sm)}
.al-emo{font-size:20px;line-height:1;flex-shrink:0;padding-top:1px}
.al-body{flex:1;min-width:0}
.al-title{font-weight:700;font-size:13px;color:var(--tx);margin-bottom:2px}
.al-sub{font-size:12px;color:var(--tx2);line-height:1.5}
.al-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap}
.al-ok{border-color:var(--ok);background:var(--ok-bg)}
.al-ok .al-title{color:var(--ok)}
.al-wn{border-color:var(--wn);background:var(--wn-bg)}
.al-wn .al-title{color:var(--wn)}
.al-er{border-color:var(--er);background:var(--er-bg)}
.al-er .al-title{color:var(--er)}
.al-in{border-color:var(--in);background:var(--in-bg)}
.al-in .al-title{color:var(--in)}
/* Tabla semántica, reemplaza styles inline */
.vt{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);
overflow:hidden;box-shadow:var(--sh-sm)}
.vt-wrap{overflow-x:auto}
.vt table{width:100%;border-collapse:collapse;font-size:13px}
.vt thead tr{background:var(--sur2);border-bottom:1.5px solid var(--bdr2)}
.vt th{text-align:left;padding:11px 12px;font-weight:700;color:var(--tx2);
font-size:11px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.vt th:first-child{padding-left:16px}
.vt th:last-child{padding-right:16px}
.vt tbody tr{border-bottom:1px solid var(--bdr);transition:background .12s}
.vt tbody tr:nth-child(even){background:rgba(24,18,14,.015)}
.vt tbody tr:hover{background:var(--hov)}
.vt td{padding:10px 12px;vertical-align:middle}
.vt td:first-child{padding-left:16px}
.vt td:last-child{padding-right:16px}
.vt .td-strong{font-weight:600;color:var(--tx);font-size:13px}
.vt .td-num{font-variant-numeric:tabular-nums;font-family:'Inter',sans-serif;font-weight:600}
.vt .td-mu{color:var(--tx2);font-size:12px}
.vt .td-mu2{color:var(--tx3);font-size:11px}
.vt .td-it{color:var(--tx1);font-style:italic;font-size:12px}
.vt .td-center{text-align:center}
.vt .td-right{text-align:right}
/* Avatar unificado */
.av{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
font-family:'Inter',sans-serif;font-weight:700;border-radius:9px}
.av-sm{width:28px;height:28px;font-size:11px;border-radius:7px}
.av-md{width:34px;height:34px;font-size:12px}
.av-lg{width:40px;height:40px;font-size:14px;border-radius:10px}
.av-grad{background:var(--grad);color:#fff;box-shadow:var(--sh-sm)}
/* Empty state narrativo */
.es{padding:48px 24px;text-align:center}
.es-emo{font-size:40px;margin-bottom:12px;opacity:.9}
.es-title{font-weight:700;font-size:16px;color:var(--tx);margin-bottom:6px}
.es-sub{font-size:13px;color:var(--tx2);line-height:1.6;max-width:440px;margin:0 auto}
/* Chip motivo (estilo HRMS) */
.motivo-chip{display:inline-flex;align-items:center;gap:5px;
font-size:11px;font-weight:600;padding:2px 9px;border-radius:var(--pill);
border:.5px solid;line-height:1.5;white-space:nowrap}
/* Filter bar */
.fbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.fbar .finput{position:relative;flex:1;min-width:200px}
.fbar .finput svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--tx3);pointer-events:none}
.fbar input[type=text],.fbar input[type=search]{width:100%;padding:8px 12px 8px 32px;
background:var(--sur);border:1.5px solid var(--bdr);border-radius:var(--rsm);
font-family:'Inter',sans-serif;font-size:13px;color:var(--tx);outline:none;transition:border-color .15s}
.fbar input[type=text]:focus,.fbar input[type=search]:focus{border-color:var(--mag)}
.fbar select{padding:8px 12px;background:var(--sur);border:1.5px solid var(--bdr);
border-radius:var(--rsm);color:var(--tx);font-family:'Inter',sans-serif;
font-size:13px;outline:none;cursor:pointer}
.fbar input[type=date],.fbar input[type=month]{padding:7px 10px;background:var(--sur);
border:1.5px solid var(--bdr);border-radius:var(--rsm);font-size:13px;color:var(--tx);
font-family:'Inter',sans-serif}
/* Section header con línea */
.sec-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;margin-top:6px}
.sec-h-title{font-family:'Inter',sans-serif;font-weight:700;font-size:14px;
color:var(--tx);text-transform:uppercase;letter-spacing:.8px}
.sec-h-line{flex:1;height:1px;background:var(--bdr2)}
.sec-h-count{font-size:11px;padding:2px 8px;border-radius:var(--pill);
background:var(--sur2);color:var(--tx2);font-weight:700}
/* =====================================================
TOGGLE SWITCH + CHIP LIST + TAB BUTTONS
===================================================== */
/* Toggle iOS-style */
.tg{position:relative;display:inline-block;width:40px;height:22px;cursor:pointer;flex-shrink:0}
.tg input{opacity:0;width:0;height:0}
.tg .ts,.tg>span{position:absolute;inset:0;background:var(--bdr2);border-radius:var(--pill);
transition:background .2s var(--ease);cursor:pointer}
.tg .ts::before,.tg>span::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;
background:#fff;border-radius:50%;transition:transform .2s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tg input:checked+.ts,.tg input:checked+span{background:var(--grad)}
.tg input:checked+.ts::before,.tg input:checked+span::before{transform:translateX(18px)}
/* Chip list (items asignados con botón remove) */
.chip-list{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.chip-item{display:flex;align-items:center;gap:10px;padding:8px 12px;
background:var(--sur2);border:1px solid var(--bdr);border-radius:var(--r);
transition:border-color .15s,background .15s}
.chip-item:hover{border-color:var(--bdr2);background:var(--hov)}
.chip-item .chip-code{display:inline-block;min-width:42px;text-align:center;
padding:2px 7px;border-radius:var(--pill);font-size:10px;font-weight:700;
background:var(--ac-bg);color:var(--ac)}
.chip-item .chip-name{flex:1;font-size:13px;font-weight:600;color:var(--tx)}
.chip-item .chip-meta{font-size:11px;color:var(--tx3)}
.chip-item .chip-x{flex-shrink:0;padding:3px 9px;font-size:12px;color:var(--er);
background:var(--er-bg);border:none;border-radius:var(--rsm);cursor:pointer;
font-weight:700;transition:background .12s}
.chip-item .chip-x:hover{background:var(--er);color:#fff}
/* Picker buscable/paginado de referencia (modal Asignaciones geocerca) */
.refpk{border:1.5px solid var(--bdr);border-radius:var(--rsm);overflow:hidden;background:var(--sur)}
.refpk-search{position:relative;padding:8px;background:var(--sur2);border-bottom:1px solid var(--bdr)}
.refpk-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--tx3);pointer-events:none}
.refpk-search input{width:100%;padding:7px 10px 7px 30px;border:1.5px solid var(--bdr);
border-radius:6px;background:var(--sur);font-family:inherit;font-size:13px;color:var(--tx)}
.refpk-search input:focus{border-color:var(--ac);outline:none}
.refpk-list{max-height:210px;overflow-y:auto}
.refpk-row{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;
border-bottom:1px solid var(--bdr);transition:background .12s}
.refpk-row:last-child{border-bottom:none}
.refpk-row:hover{background:var(--hov)}
.refpk-row.sel{background:var(--ac-bg)}
.refpk-row-body{flex:1;min-width:0}
.refpk-main{font-size:13px;font-weight:700;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.refpk-sub{font-size:11px;color:var(--tx3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.refpk-check{flex-shrink:0;color:var(--ac);font-weight:700;font-size:14px}
.refpk-empty{padding:24px 12px;text-align:center;font-size:12px;color:var(--tx3)}
.refpk-pagbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
padding:7px 10px;background:var(--sur2);border-top:1px solid var(--bdr)}
.refpk-pagbar.one{justify-content:flex-end}
.refpk-pagnav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.refpk-pagnav button{padding:3px 7px;font-size:10px;line-height:1.4}
.refpk-pagtxt{padding:0 4px;font-size:11px;color:var(--tx2);white-space:nowrap}
.refpk-pagmeta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--tx3)}
.refpk-pagmeta select{font-size:11px;padding:2px 6px;background:var(--sur);border:1px solid var(--bdr);
border-radius:4px;color:var(--tx);cursor:pointer}
@media (max-width:480px){
.refpk-pagbar{justify-content:center}
.refpk-pagnav{justify-content:center;width:100%}
.refpk-pagmeta{width:100%;justify-content:space-between}
}
/* ── Modal "Asignaciones de geocerca" (mGeocercaAsignaciones, js/sohrms.js)
4 mejoras UX pedidas por Dany (w.51): no-cierre por click afuera + shake,
controles de ventana (minimizar/expandir/cerrar), edición de asignación,
scrollbar ancha. Prefijo gcasig- para no chocar con otros modales. ── */
/* Pieza 1: pulso/shake al intentar cerrar por click afuera */
@keyframes gcasigShake{
0%,100%{transform:translateX(0)}
20%{transform:translateX(-6px)}
40%{transform:translateX(6px)}
60%{transform:translateX(-4px)}
80%{transform:translateX(4px)}
}
.gcasig-shake{animation:gcasigShake .35s ease}
/* Pieza 2: controles de ventana (minimizar / expandir / cerrar) */
.gcasig-win-ctrls{position:absolute;top:14px;right:14px;display:flex;gap:4px;z-index:5}
.gcasig-win-btn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--bdr);border-radius:6px;background:var(--sur2);color:var(--tx2);
font-size:13px;line-height:1;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.gcasig-win-btn:hover{background:var(--hov);color:var(--tx);border-color:var(--bdr2)}
.gcasig-win-btn.gcasig-win-x:hover{background:var(--er);color:#fff;border-color:var(--er)}
@media(max-width:480px){
/* Objetivo táctil mínimo 32x32px (w.52) · 26px era chico para dedo en mobile */
.gcasig-win-ctrls{gap:6px}
.gcasig-win-btn{width:32px;height:32px;font-size:15px}
}
.gcasig-modal-expanded{max-width:min(1200px,96vw)!important;max-height:94vh!important}
.gcasig-modal-expanded .refpk-list{max-height:38vh}
.gcasig-modal-expanded .gcasig-chip-list{max-height:44vh}
/* Pill flotante cuando el modal está minimizado */
.gcasig-pill{position:fixed;bottom:18px;right:18px;z-index:301;
display:flex;align-items:center;gap:8px;padding:10px 16px;
background:var(--sur);border:1px solid var(--bdr2);border-radius:999px;
box-shadow:var(--sh-lg);cursor:pointer;font-size:12.5px;font-weight:600;color:var(--tx);
animation:cIn .2s var(--ease)}
.gcasig-pill:hover{background:var(--hov)}
.gcasig-pill-ico{font-size:14px}
/* Pieza 3: chip recién editado se resalta un momento */
@keyframes gcasigHighlight{
0%{box-shadow:0 0 0 2px var(--ac);background:var(--ac-bg)}
100%{box-shadow:0 0 0 0 transparent;background:var(--sur2)}
}
.gcasig-chip-highlight{animation:gcasigHighlight 2.2s ease}
.chip-item .chip-edit{flex-shrink:0;padding:3px 9px;font-size:12px;color:var(--tx2);
background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rsm);cursor:pointer;
font-weight:700;transition:background .12s,color .12s,border-color .12s}
.chip-item .chip-edit:hover{background:var(--ac);color:#fff;border-color:var(--ac)}
/* Pieza 4: scrollbar ancha (mismo patrón que .menc-modal-scroll de w.32) en
picker de referencia + zona de chips asignados, pedido textual de Dany. */
.gcasig-chip-list{max-height:260px;overflow-y:auto;padding-right:4px}
.gcasig-wide-scroll{scrollbar-width:auto;scrollbar-color:var(--bdr2) transparent}
.gcasig-wide-scroll::-webkit-scrollbar{width:14px}
.gcasig-wide-scroll::-webkit-scrollbar-track{background:transparent}
.gcasig-wide-scroll::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:8px;border:3px solid var(--sur)}
.gcasig-wide-scroll::-webkit-scrollbar-thumb:hover{background:var(--tx3)}
/* Pieza 5: mini-chips de solo lectura en el resumen de "Editar geocerca" */
.gcasig-mini-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;
padding:2px 8px;border-radius:20px;white-space:nowrap;max-width:170px;
overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.gcasig-mini-chip-more{display:inline-flex;align-items:center;font-size:11px;
padding:2px 8px;border-radius:20px;background:var(--bg);color:var(--tx3);
border:1px dashed var(--bdr);vertical-align:middle}
/* Tab buttons (selector tipo forma, etc), fC45: más respiro
Prefix .shell-main para vencer specificity de `.shell button { padding:0 }`
(mismo patrón que el fix breadcrumb fC31). */
.tab-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tab-btn,
.shell-main .tab-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
border:1.5px solid var(--bdr);background:var(--sur);border-radius:var(--rsm);
font-size:13px;font-weight:600;color:var(--tx1);cursor:pointer;line-height:1.2;
transition:all .15s var(--ease)}
.tab-btn:hover{border-color:var(--bdr2);background:var(--hov)}
.tab-btn.active{background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--sh-sm)}
/* Chips de período en #sodms/kpis (Esta semana/Semana pasada/Este mes),
pedido Alex #476/#477: quedaban desalineados dentro del .fbar (junto a
Desde/Hasta) por el align-items:center default con .fg más alto (label+
input). El .fbar de esta vista fija align-items:flex-end inline; acá solo
se ajusta el ancho en mobile para que las 3 chips se repartan prolijas. */
@media(max-width:540px){
#sodkp-periodo-bar{width:100%}
#sodkp-periodo-bar .tab-btn{flex:1;justify-content:center;padding:9px 10px;font-size:12px}
}
/* Info banner (tipo hint dentro de modal) */
.info-banner{background:var(--ac-bg);border:1px solid var(--ac);border-radius:var(--r);
padding:11px 14px;font-size:12px;color:var(--ac);line-height:1.7;margin-bottom:10px}
.info-banner code{background:rgba(255,255,255,.5);padding:1px 5px;border-radius:3px;font-size:11px}
.info-banner strong{font-weight:700}
/* =====================================================
MAPA INTERACTIVO · Leaflet para dibujar polígonos
===================================================== */
.mapa-pol-wrap{position:relative;margin-bottom:10px}
#mapa-pol-draw{height:360px;width:100%;border-radius:var(--r);
border:1.5px solid var(--bdr);transition:height .2s var(--ease);background:var(--sur2)}
.mapa-pol-wrap.fullscreen{position:fixed!important;top:0;left:0;
width:100vw!important;height:100vh!important;z-index:9999;border-radius:0;margin:0}
.mapa-pol-wrap.fullscreen #mapa-pol-draw{height:100vh!important;border-radius:0!important;border:0}
/* Contenedor propio del mapa+botón ⛶ del editor de circuitos (#sodms/circuitos,
js/sodms.js _sodccPoligonoHtml). #sodcc-pol-wrap trae ARRIBA la barra de
búsqueda, así que el .btn-fullscreen-mapa NO puede anclarse a .mapa-pol-wrap
completo (queda flotando sobre "Buscar"). Este wrapper interno acota el
position:relative solo al mapa (auditoría ui-quality-architect w.145, fix #1). */
.mapa-pol-inner{position:relative}
.btn-fullscreen-mapa{position:absolute;top:10px;right:10px;z-index:420;
background:#fff;border:1.5px solid var(--bdr2);border-radius:var(--rsm);
padding:7px 11px;cursor:pointer;font-size:14px;font-weight:700;color:var(--tx1);
box-shadow:var(--sh-md);transition:all .15s var(--ease)}
.btn-fullscreen-mapa:hover{background:var(--hov);border-color:var(--bdr3)}
/* fix #13 (auditoría w.145): en fullscreen el wrap (100vh fixed) apilaba barra
de búsqueda + mapa(100vh) + toolbar, y el fondo del mapa quedaba cortado bajo
el viewport. Se hace columna flex y el mapa llena el espacio restante (en vez
de 100vh rígido). Scopeado a #sodcc-pol-wrap para NO tocar el editor de zonas
de colaborador de sohrms (#mapa-pol-wrap), que comparte la clase. */
#sodcc-pol-wrap.fullscreen{display:flex;flex-direction:column}
#sodcc-pol-wrap.fullscreen .mapa-pol-inner{flex:1;min-height:0}
#sodcc-pol-wrap.fullscreen #sodcc-pol-draw{height:100%!important}
/* Editor de circuitos SODMS (#sodcc-pol-section): fixes mobile de la
auditoría w.145. #mapa-pol-draw de arriba es del editor de zonas de
colaborador en js/sohrms.js (id distinto, comparte solo la clase
.mapa-pol-wrap) · NO se toca esa regla, este bloque es aparte y usa el id
real de este editor (#sodcc-pol-draw). */
@media(max-width:420px){
/* fix #4: alto de mapa fijo (360px inline) desbordaba en pantallas angostas.
!important vence al inline style que setea la altura (360px inicial + toggle
de _sodccToggleFullscreen). El caso fullscreen lo maneja el bloque flex de
arriba (#sodcc-pol-wrap.fullscreen #sodcc-pol-draw → height:100%, gana por
especificidad: 2 ids+1 clase vs 1 id de esta regla). */
#sodcc-pol-draw{height:300px!important}
/* fix #3: área táctil de los controles del editor (toolbar + pastillas de
foco dual), scopeado a #sodcc-pol-section para no tocar .bsm/.tab-btn
globales del resto de la app. */
#sodcc-pol-section .bsm{min-height:44px}
#sodcc-pol-section .tab-btn{min-height:44px}
/* fix #5: "✕ Salir de edición dual" tenía margin-left:auto inline y
quedaba solo pegado a la derecha al wrappear la barra dual en mobile;
pasa a ocupar la fila completa. */
#sodcc-dual-bar{row-gap:8px}
#sodcc-dual-salir{margin-left:0!important;width:100%;justify-content:center}
}
.pol-toolbar{margin-top:8px;padding:8px 12px;background:var(--sur);
border:1.5px solid var(--bdr);border-radius:var(--rsm);
display:flex;gap:8px;align-items:center;flex-wrap:wrap;
box-shadow:var(--sh-sm)}
.pol-toolbar .pts-count{margin-left:auto;font-size:12px;color:var(--tx2);
font-weight:700;padding:4px 10px;background:var(--sur2);border-radius:var(--pill)}
.pol-toolbar .pts-count.ok{background:var(--ok-bg);color:var(--ok)}
.mapa-pol-wrap.fullscreen .pol-toolbar{position:fixed;bottom:22px;left:50%;
transform:translateX(-50%);z-index:10001;background:#fff;border-radius:var(--pill);
padding:10px 18px;box-shadow:0 6px 24px rgba(0,0,0,.25);margin:0;border:1px solid rgba(0,0,0,.08);width:auto;max-width:92vw;gap:10px}
.mapa-pol-wrap.fullscreen .pol-toolbar .bsm{background:#fff;border:1px solid var(--bdr2)}
.mapa-pol-wrap.fullscreen .pol-toolbar .pts-count{background:rgba(0,0,0,.04);color:#333}
.mapa-pol-wrap.fullscreen .pol-toolbar .pts-count.ok{background:var(--ok-bg);color:var(--ok)}
/* Resultados de búsqueda de dirección (geocoding Nominatim), geocerca por punto */
.gc-pto-res-item{width:100%}
.gc-pto-res-item:hover{background:var(--hov);border-color:var(--bdr3)}
/* Marker custom HTML se inyecta inline via L.divIcon */
.leaflet-container{font-family:'Inter',sans-serif;font-size:13px}
.leaflet-popup-content{font-family:'Inter',sans-serif;font-size:12px;line-height:1.5}
.leaflet-tooltip{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
background:var(--tx);color:#fff;border:none;box-shadow:var(--sh-md);border-radius:var(--rsm);padding:4px 8px}
.leaflet-tooltip::before{border-top-color:var(--tx)}
/* =====================================================
VMAPA, componente vectorMapa() genérico (v45g N.1)
===================================================== */
.vmapa-wrap{position:relative;border-radius:12px;overflow:hidden;margin-bottom:10px}
.vmapa-fullscreen{position:fixed!important;top:0;left:0;
width:100vw!important;height:100vh!important;z-index:9999;border-radius:0!important;margin:0!important;overflow:visible!important}
.vmapa-fullscreen>div:first-child{height:100vh!important;border-radius:0!important;border:0!important}
.vmapa-toolbar{position:absolute;top:10px;right:10px;z-index:430;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
/* Override de la regla generica .btn-fullscreen-mapa cuando los botones
estan dentro del toolbar: position:static para que el flex column los
apile en lugar de superponerlos todos en (top:10px, right:10px). */
.vmapa-toolbar .btn-fullscreen-mapa,
.vmapa-toolbar .vmapa-btn{
position:static !important;
top:auto !important;
right:auto !important;
width:36px;height:36px;padding:0;
display:inline-flex;align-items:center;justify-content:center;
}
.vmapa-btn{display:inline-flex}
.vmapa-leyenda{position:absolute;bottom:10px;left:10px;z-index:430;font-size:11px;
background:rgba(255,255,255,.92);border:1px solid var(--bdr);border-radius:var(--rsm);
padding:6px 10px;pointer-events:none;max-width:calc(100% - 80px)}
/* Pill de filtros de track SOSMS */
.sosms-track-pill{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
margin-bottom:10px;padding:10px 14px;background:var(--sur);border:1.5px solid var(--bdr);
border-radius:var(--pill);font-size:12px}
.sosms-track-pill label{display:flex;align-items:center;gap:5px;cursor:pointer;color:var(--tx1);
padding:4px 8px;border-radius:var(--pill);transition:background .15s;white-space:nowrap}
.sosms-track-pill label:hover{background:var(--hov)}
.sosms-track-pill label.active{background:rgba(147,51,234,.1);color:#9333EA;font-weight:600}
.sosms-track-pill input[type=radio]{accent-color:#9333EA}
.sosms-track-pill input[type=number]{width:52px;padding:3px 6px;border:1.5px solid var(--bdr);
border-radius:var(--rsm);font-size:12px;background:var(--sur);color:var(--tx1);text-align:center}
/* Chips de preset del recorrido (fix w.128, ex input numérico de minutos) */
.sosms-min-chips{display:inline-flex;gap:4px;flex-wrap:wrap}
.sosms-min-chips button{border:1.5px solid var(--bdr);background:var(--sur);color:var(--tx2);
font-size:11px;font-weight:600;padding:4px 10px;border-radius:10px;cursor:pointer;
font-family:inherit;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.sosms-min-chips button:hover{border-color:var(--bdr3);background:var(--hov)}
.sosms-min-chips button.active{background:var(--ac);border-color:transparent;color:#fff}
@media(max-width:480px){
.sosms-min-chips button{padding:8px 12px;min-height:32px;font-size:12px}
}
.sosms-track-pill .pill-sep{width:1px;height:20px;background:var(--bdr);flex-shrink:0}
.sosms-track-pill .toggle-calles{display:flex;align-items:center;gap:5px;cursor:pointer;
color:var(--tx2);font-size:12px;margin-left:auto}
.sosms-track-pill .toggle-calles input{accent-color:#9333EA}
/* Selector "Censo" / "Señal" del toggle Cobertura del censo (chunk 55) */
/* fix w.127 (observación Darío): radio pill sobre botón alto = "huevo" blanco
alrededor de la opción activa (zoom app). Segmented control estándar. */
.sosms-censo-modo{display:inline-flex;background:var(--sur2);border:1px solid var(--bdr);
border-radius:12px;padding:2px;gap:2px}
.sosms-censo-modo button{border:none;background:transparent;color:var(--tx2);font-size:11px;
font-weight:700;padding:4px 10px;border-radius:10px;cursor:pointer;
transition:background .15s,color .15s;font-family:inherit}
.sosms-censo-modo button.active{background:var(--sur);color:var(--tx1);box-shadow:0 1px 2px rgba(16,24,40,.08)}
/* Tap target de campo (warning gate w.52): en mobile los botones Censo/Señal
suben a >=32px de alto tocable */
@media(max-width:480px){
.sosms-censo-modo button{padding:9px 14px;font-size:12px;min-height:32px}
}
/* Barra de filtros del censo (Feature #368, w.99): sucursal/vendedor
(client-side) + rango de fechas (server-side). Fila propia bajo el pill
principal, mismo estilo visual, solo visible con "Cobertura del censo"
activo. */
.sosms-censo-filtros{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin-bottom:10px;padding:10px 14px;background:var(--sur);border:1.5px dashed var(--bdr);
border-radius:var(--pill);font-size:12px}
.sosms-censo-filtros label{display:flex;flex-direction:column;gap:2px;color:var(--tx2);
font-size:10.5px;font-weight:600}
.sosms-censo-filtros select,.sosms-censo-filtros input[type=date]{padding:5px 8px;
border:1.5px solid var(--bdr);border-radius:var(--rsm);font-size:12px;
background:var(--sur);color:var(--tx1);font-family:inherit}
.sosms-censo-filtros #sosms-censo-f-limpiar{align-self:flex-end;margin-left:auto}
@media(max-width:540px){
.sosms-censo-filtros{gap:8px}
.sosms-censo-filtros #sosms-censo-f-limpiar{margin-left:0}
}
/* fix w.126 (observación Darío, app móvil): var(--pill)=999px se ve bien en
una sola fila (desktop), pero cuando los toggles envuelven a 2-4 filas el
contenedor alto se vuelve un óvalo. En angosto, radio de card normal. */
@media(max-width:820px){
.sosms-track-pill,.sosms-censo-filtros{border-radius:16px}
}
/* Barra "Tramo visible: ~X km · Y min", bajo la pill de filtros, mismo
patrón visual que la nota de geocerca (rSosmsMapaColaborador). */
.sosms-tramo-info{margin-bottom:10px;font-size:11.5px;color:var(--tx2);
background:var(--sur);border:1px solid var(--bdr);border-radius:8px;padding:8px 12px}
/* Marcadores de inicio/fin del track SOSMS (divIcon, ver _sosmsDivIcon en
js/sosms.js). Círculo con borde blanco + sombra; el anillo de pulso (solo
en el marcador de posición actual) es un div hijo separado para no pelear
con transform-origin de SVG. */
.sosms-divicon{background:transparent;border:none}
.sosms-pin{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
border:2.5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);position:relative;z-index:2}
.sosms-pin span{font-size:13px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.sosms-pin-ring{position:absolute;inset:-8px;border-radius:50%;opacity:.45;z-index:1;
animation:sosmsPinPulse 1.8s ease-out infinite}
@keyframes sosmsPinPulse{0%{transform:scale(.6);opacity:.55}100%{transform:scale(1.9);opacity:0}}
/* =====================================================
MONITOREO WEB, layout escritorio mapa + panel lateral
(#sosms/mapa en viewport ancho ≥1024px). Mobile/tablet
mantienen el layout apilado de siempre (panel oculto,
solo mapa), ver rSosmsMapa en js/sosms.js.
===================================================== */
.sosms-mapa-layout{display:flex;flex-direction:column;gap:14px}
.sosms-mapa-col-map{min-width:0}
.sosms-mapa-panel{display:none}
@media(min-width:1024px){
.sosms-mapa-layout{flex-direction:row;align-items:stretch}
.sosms-mapa-col-map{flex:1}
.sosms-mapa-panel{
display:flex;flex-direction:column;gap:10px;
width:340px;flex-shrink:0;
}
}
@media(min-width:1280px){
.sosms-mapa-panel{width:380px}
}
.smp-filtros{display:flex;gap:4px;background:var(--sur);border:1px solid var(--bdr);
border-radius:var(--r);padding:4px;flex-shrink:0}
.smp-fbtn{flex:1;border:0;background:transparent;padding:8px 6px;border-radius:var(--rsm);
font-size:11.5px;font-weight:600;color:var(--tx2);cursor:pointer;transition:background .15s,color .15s;
font-family:inherit;white-space:nowrap}
.smp-fbtn:hover{background:var(--hov)}
.smp-fbtn.active{background:#9333EA;color:#fff;font-weight:700}
.smp-roster{flex:1;min-height:0;overflow-y:auto;background:var(--sur);border:1px solid var(--bdr);
border-radius:var(--r)}
.smp-roster-head{position:sticky;top:0;background:var(--sur);padding:11px 14px;
border-bottom:1px solid var(--bdr);display:flex;justify-content:space-between;align-items:center;
font-size:13px;font-weight:700;color:var(--tx);z-index:1}
.smp-row{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;
border-bottom:1px solid var(--bdr);transition:background .15s;border-left:3px solid transparent}
.smp-row:last-child{border-bottom:0}
.smp-row:hover{background:var(--hov)}
.smp-row.active{background:rgba(147,51,234,.08);border-left-color:#9333EA}
/* Badge "Salidas de zona (hoy)", panel lateral del mapa en vivo
(rSosmsMapa, ver _sosmsSalidasHoyHtml en js/sosms.js). flex-shrink:0
para no comprimirse cuando el roster crece; solo se pinta si hay filas. */
.smp-salidas{flex-shrink:0;background:var(--sur);border:1px solid var(--er);
border-radius:var(--r);overflow:hidden;max-height:180px;display:flex;flex-direction:column}
.smp-salidas-head{padding:9px 14px;font-size:12px;font-weight:800;color:var(--er);
background:rgba(239,68,68,.08);display:flex;align-items:center;justify-content:space-between;
flex-shrink:0}
.smp-salidas-head span{font-weight:700;opacity:.75}
.smp-salidas-body{overflow-y:auto}
.smp-salida-row{display:flex;align-items:center;gap:8px;padding:7px 14px;
border-top:1px solid var(--bdr);font-size:11.5px}
.smp-salida-row:first-child{border-top:0}
.smp-salida-hora{font-size:10.5px;font-weight:700;color:var(--tx3);flex-shrink:0;width:36px}
.smp-salida-nombre{font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smp-salida-zona{font-size:10.5px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* =====================================================
MONITOREO AD v2, clustering + drill-down + roster
agrupado. 100% gateado a _esAD() en js/sosms.js; fuera
de modo AD nada de esto se pinta (el .smp-* de arriba
sigue siendo la vista genérica sin cambios).
Fuente: material/design/portal_v2/monitoreo_ad/ +
spec_migracion_MONITOREO_AD.md (2026-07-06).
===================================================== */
/* Breadcrumb + drill-select jerárquico (§3.3 de la spec) */
.sm2-hfilter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sm2-crumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sm2-crumb{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
border-radius:var(--rsm);cursor:pointer;font-size:12px;font-weight:600;color:var(--tx2);
background:var(--sur);border:1px solid var(--bdr);transition:all .15s;font-family:inherit}
.sm2-crumb:hover{border-color:var(--bdr2);color:var(--tx)}
.sm2-crumb.active{background:var(--tx1);color:#fff;border-color:var(--tx1)}
.sm2-crumb-sep{color:var(--tx3);font-size:13px}
.sm2-drill{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sm2-drill-label{font-size:11px;font-weight:700;color:var(--tx3);white-space:nowrap}
.sm2-drill select{font-size:12px;font-weight:600;padding:6px 10px;border:1.5px solid var(--bdr);
border-radius:var(--rsm);background:var(--sur);color:var(--tx);cursor:pointer;font-family:inherit}
.sm2-drill select:focus{outline:none;border-color:var(--mag)}
/* KPI clickable, modifica el .sc/.g4 genérico ya existente, sin tocarlo
para el resto de la app (solo se agrega esta clase en el monitoreo AD) */
.sm2-kpi{cursor:pointer;transition:box-shadow .15s,border-color .15s,transform .15s}
.sm2-kpi:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,30,45,.10)}
.sm2-kpi.sm2-kpi-sel{border-color:var(--mag);box-shadow:0 0 0 2px rgba(212,32,112,.14)}
/* Roster agrupado por supervisor, colapsable (§3.4) */
.sm2-rgroup{border-bottom:1px solid var(--bdr)}
.sm2-rgroup:last-child{border-bottom:0}
.sm2-rgroup-head{position:sticky;top:39px;z-index:1;background:var(--sur2);
display:flex;align-items:center;gap:9px;padding:8px 14px;cursor:pointer;
border-bottom:1px solid var(--bdr);user-select:none;transition:background .15s}
.sm2-rgroup-head:hover{background:var(--hov)}
.sm2-rgroup-chev{font-size:11px;color:var(--tx3);transition:transform .18s;flex-shrink:0}
.sm2-rgroup.collapsed .sm2-rgroup-chev{transform:rotate(-90deg)}
.sm2-rgroup-name{flex:1;min-width:0;font-size:12px;font-weight:700;color:var(--tx);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm2-rgroup-name small{font-weight:600;color:var(--tx3)}
.sm2-rgroup-mini{display:flex;align-items:center;gap:6px;flex-shrink:0}
.sm2-mini-dot{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;color:var(--tx2)}
.sm2-mini-dot i{width:7px;height:7px;border-radius:50%;display:inline-block}
.sm2-rgroup-body{display:block}
.sm2-rgroup.collapsed .sm2-rgroup-body{display:none}
.sm2-rrow{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 24px;cursor:pointer;
border-bottom:1px solid var(--bdr);transition:background .15s;border-left:3px solid transparent}
.sm2-rrow:last-child{border-bottom:0}
.sm2-rrow:hover{background:var(--hov)}
.sm2-rrow.active{background:rgba(147,51,234,.08);border-left-color:#9333EA}
.sm2-rrow-av{position:relative;flex-shrink:0}
.sm2-rrow-av .sm2-stdot{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;
border-radius:50%;border:2px solid var(--sur)}
/* Cluster + pin divIcon (Leaflet.markercluster) */
.sm2-cluster{background:transparent}
.sm2-cluster div{width:42px;height:42px;margin-left:3px;margin-top:3px;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;
font-weight:700;font-size:13px;color:#fff;border:3px solid var(--sur);
box-shadow:0 4px 12px rgba(15,30,45,.28)}
.sm2-pin{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-family:'Inter',sans-serif;font-weight:700;font-size:10.5px;
color:#fff;border:3px solid var(--sur);box-shadow:0 3px 9px rgba(15,30,45,.35)}
.sm2-pin.crit{animation:sm2PinPulse 1.6s infinite}
@keyframes sm2PinPulse{
0%{box-shadow:0 0 0 0 rgba(239,68,68,.5),0 3px 9px rgba(15,30,45,.35)}
70%{box-shadow:0 0 0 9px rgba(239,68,68,0),0 3px 9px rgba(15,30,45,.35)}
100%{box-shadow:0 0 0 0 rgba(239,68,68,0),0 3px 9px rgba(15,30,45,.35)}
}
/* =====================================================
MAPA DE MARCACIONES SOHRMS
===================================================== */
.mapa-marc-wrap{position:relative;margin-bottom:10px}
#mapa-marcaciones{height:480px;width:100%;border-radius:var(--r);
border:1.5px solid var(--bdr);background:var(--sur2);z-index:1}
.mapa-marc-wrap.fullscreen{position:fixed!important;top:0;left:0;
width:100vw!important;height:100vh!important;z-index:9999;border-radius:0;margin:0}
.mapa-marc-wrap.fullscreen #mapa-marcaciones{height:100vh!important;border-radius:0!important;border:0}
.mapa-marc-wrap .btn-fullscreen-mapa{position:absolute;top:10px;right:10px;z-index:420}
/* El botón ✕ "Salir" solo tiene sentido en fullscreen (el resto del tiempo
queda abajo del fullscreen ⛶ y confunde al usuario). Ocultamos por default
y revelamos cuando el wrap entra a fullscreen. */
.mapa-marc-wrap:not(.fullscreen) #btn-mm-salir{display:none !important}
.mapa-marc-wrap.fullscreen #btn-mm-salir{display:block;background:#fff;border:1.5px solid var(--bdr2);color:var(--er);font-weight:700}
.mapa-marc-wrap.fullscreen #btn-mm-salir:hover{background:#fee2e2;border-color:var(--er)}
.mapa-marc-legend{display:flex;gap:18px;padding:10px 14px;flex-wrap:wrap;
font-size:12px;color:var(--tx1);background:var(--sur);
border:1px solid var(--bdr);border-radius:var(--rsm);margin-bottom:10px}
.mapa-marc-legend .lg-item{display:inline-flex;align-items:center;gap:6px}
.mapa-marc-legend .lg-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.mapa-marc-legend .lg-geo{width:14px;height:14px;border-radius:50%;
background:rgba(212,32,112,.18);border:2px dashed var(--ac)}
/* =====================================================
PERMISOS BATCH MODAL, responsive
===================================================== */
.pb-modal{padding:18px;max-width:640px}
.pb-modal .mtit{margin-bottom:0}
/* Grupos compactos: header pegado al siguiente */
.pb-modal .pb-grp-h{padding:9px 10px;border-radius:var(--rsm);transition:background .15s;margin:0;border:1px solid transparent;display:flex;align-items:center;gap:8px}
.pb-modal .pb-grp-h:hover{background:var(--hov);border-color:var(--bdr)}
.pb-modal .pb-grp-h+.pb-grp-body{margin-top:2px}
/* Cuando un grupo está expandido, su body lleva el .vt con menos margin */
.pb-modal .pb-grp-body{padding:0 4px 0 26px}
.pb-modal .pb-grp-body .vt{margin-bottom:8px!important;border-radius:var(--rsm);border:1px solid var(--bdr)}
.pb-modal .pb-grp-body .vt table{font-size:12px}
.pb-modal .pb-grp-body .vt td{padding:7px 10px}
.pb-modal .pb-grp-body .vt th{padding:7px 10px;font-size:10px}
/* Separador sutil entre grupos colapsados */
.pb-modal .pb-grp-h{position:relative}
.pb-modal .pb-grp-h:not(:first-of-type){margin-top:1px}
.pb-modal .pb-grp-h .sec-h-line{display:none} /* la línea ocupa mucho espacio horizontal */
.pb-modal .pb-grp-h .sec-h-title{font-size:12.5px;font-weight:700;color:var(--tx)}
.pb-modal .pb-grp-h .sec-h-count{margin-left:auto;font-size:10px;background:var(--sur2);color:var(--tx2);padding:2px 8px;border-radius:var(--pill);font-weight:700}
/* Mobile: modal ocupa casi toda la pantalla, padding reducido, header sticky funcional */
@media(max-width:768px){
.pb-modal{padding:12px;max-width:96vw!important;max-height:96vh!important}
.pb-modal .pb-sticky-head{margin:-12px -12px 0 -12px!important;padding:12px!important}
.pb-modal .mtit{font-size:13px}
.pb-modal .pb-prf-name{display:block;width:100%;font-size:11px;margin-top:2px}
.pb-modal #pb-counter{font-size:10px;padding:3px 8px}
/* Botones de acciones: chips compactos */
.pb-modal .pb-actions .bsm{font-size:10px;padding:4px 7px}
/* Tabla más compacta */
.pb-modal .vt table{font-size:11px}
.pb-modal .vt td{padding:6px 4px}
.pb-modal .vt th{padding:6px 4px}
/* La columna técnica del nombre se permite envolver */
.pb-modal .vt td .td-strong{font-size:12px}
/* Toggles más pequeños en mobile */
.pb-modal .tg{width:36px;height:20px}
.pb-modal .tg .ts::before,.pb-modal .tg>span::before{width:14px;height:14px}
.pb-modal .tg input:checked+.ts::before,.pb-modal .tg input:checked+span::before{transform:translateX(16px)}
/* Action bar (mac) sticky abajo */
.pb-modal .mac{position:sticky;bottom:0;background:var(--sur);
margin:0 -12px -12px -12px!important;padding:10px 12px!important;
border-top:1px solid var(--bdr);z-index:10}
}
/* ════════════════════════════════════════════════════════════════════
v45h/40 · Editor Perfiles & Accesos: 2-paneles ribbon Excel-style
Toolbar arriba con select módulo + select tipo + buscador + summary.
Layout: panel izq (Disponibles) | botones | panel der (Asignados).
Items agrupados por módulo dentro de cada panel.
──────────────────────────────────────────────────────────────────── */
.xr-toolbar{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:9px 11px;background:var(--sur2);border:1px solid var(--bdr);
border-radius:var(--rsm);margin-bottom:10px;
}
.xr-tool-group{display:flex;align-items:center;gap:6px;flex-shrink:0}
.xr-tool-lbl{font-size:11px;color:var(--tx2);font-weight:600;letter-spacing:.3px}
.xr-select{
padding:6px 10px;background:var(--sur);border:1px solid var(--bdr);
border-radius:5px;font-size:12px;color:var(--tx);outline:none;
font-family:'Inter',sans-serif;cursor:pointer;
transition:border-color .15s;
}
.xr-select:hover{border-color:var(--bdr2)}
.xr-select:focus{border-color:var(--mag)}
.xr-search-wrap{
display:flex;align-items:center;gap:7px;flex:1;min-width:180px;
padding:0 10px;background:var(--sur);border:1px solid var(--bdr);
border-radius:5px;
}
.xr-search-wrap svg{color:var(--tx3);flex-shrink:0}
.xr-search-wrap input{
flex:1;border:none;background:transparent;outline:none;
padding:7px 0;font-size:12px;color:var(--tx);font-family:'Inter',sans-serif;
}
.xr-summary{
display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;
}
.xr-summary .xr-stat{
display:inline-flex;gap:4px;padding:4px 10px;background:var(--sur);
border:1px solid var(--bdr);border-radius:var(--pill);font-size:10px;
color:var(--tx2);text-transform:uppercase;letter-spacing:.4px;font-weight:600;
}
.xr-summary .xr-stat b{color:var(--mag);font-weight:700}
/* Grid de 2 paneles + botones centrales */
.xr-grid{
display:grid;grid-template-columns:1fr 50px 1fr;gap:8px;
height:480px;margin-bottom:6px;
}
.xr-panel{
display:flex;flex-direction:column;
background:var(--sur2);border:1px solid var(--bdr);
border-radius:var(--r);overflow:hidden;
}
.xr-panel-asignados{
background:var(--sur);border:1.5px solid var(--mag);
box-shadow:0 0 0 3px rgba(212,32,112,.07);
}
.xr-panel-head{
display:flex;align-items:center;gap:8px;
padding:10px 13px;border-bottom:1px solid var(--bdr);
font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--tx3);
flex-shrink:0;
}
.xr-panel-asignados .xr-panel-head{color:var(--mag)}
.xr-panel-body{flex:1;overflow-y:auto;padding:6px 7px;min-height:0}
/* Grupo (módulo) dentro del panel */
.xr-grupo{margin-bottom:5px}
.xr-grupo-head{
display:flex;align-items:center;gap:7px;
padding:7px 9px;background:var(--sur);border:1px solid var(--bdr);
border-radius:5px;cursor:pointer;user-select:none;
transition:background .12s;
}
.xr-grupo-head:hover{background:var(--hov)}
.xr-caret{
display:inline-block;font-size:10px;color:var(--tx3);transition:transform .15s;
width:10px;flex-shrink:0;
}
.xr-caret-open{transform:rotate(90deg)}
.xr-grupo-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.xr-grupo-name{
flex:1;font-family:'Inter',sans-serif;font-weight:700;font-size:12px;
letter-spacing:.5px;text-transform:uppercase;
}
.xr-grupo-count{
font-size:10px;background:var(--sur2);color:var(--tx2);
padding:2px 7px;border-radius:var(--pill);font-weight:600;
}
/* Botón "pasar todos del grupo", pequeño, hover marca, stopPropagation evita
togglear el accordion del header. */
.xr-grupo-mover{
margin-left:6px;padding:2px 7px;border-radius:var(--rsm);
background:transparent;border:1px solid var(--bdr);
color:var(--tx2);font-size:11px;cursor:pointer;
transition:background .15s, color .15s, border-color .15s;
flex-shrink:0;line-height:1;
}
.xr-grupo-mover:hover{background:var(--mag);color:#fff;border-color:var(--mag)}
.xr-grupo-body{padding:4px 0 4px 18px}
/* Item individual (mod/nav/cap) */
.xr-item{
display:flex;align-items:center;gap:7px;
padding:5px 8px;margin-bottom:1px;border-radius:4px;
font-size:12px;color:var(--tx1);cursor:pointer;
transition:background .1s;user-select:none;
}
.xr-item:hover{background:var(--hov)}
.xr-item-sel{background:rgba(212,32,112,.13)!important;font-weight:600}
.xr-kind-badge{
font-size:8px;font-weight:700;letter-spacing:.5px;
padding:1px 5px;border-radius:3px;flex-shrink:0;
}
.xr-item-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Botones centrales */
.xr-actions{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:8px;
}
.xr-act{
width:40px;height:36px;
background:var(--sur);border:1.5px solid var(--bdr2);
border-radius:7px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
color:var(--tx2);transition:all .15s;
}
.xr-act:hover{border-color:var(--mag);color:var(--mag);transform:translateX(2px)}
.xr-act-warn:hover{border-color:#a0154f;color:#a0154f;transform:translateX(-2px)}
.xr-act-sep{width:1px;height:14px;background:var(--bdr2)}
.xr-hint{
font-size:10px;color:var(--tx3);text-align:center;
padding:6px 0 14px;font-style:italic;
}
@media (max-width:768px){
.xr-toolbar{flex-direction:column;align-items:stretch}
.xr-tool-group{width:100%}
.xr-search-wrap{width:100%}
.xr-summary{margin-left:0;justify-content:center}
.xr-grid{grid-template-columns:1fr;height:auto;gap:10px}
.xr-actions{flex-direction:row;justify-content:center;padding:6px 0}
.xr-act{transform:rotate(90deg)}
}
/* ════════════════════════════════════════════════════════════════════
v45h/32 LEGACY · Estilos del árbol (descontinuados v45h/40, mantener
por compat si vuelve la modal de algún lado)
──────────────────────────────────────────────────────────────────── */
.xr-toolbar{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:8px 10px;background:var(--sur2);border:1px solid var(--bdr);
border-radius:var(--rsm);margin-bottom:10px;
}
.xr-search-wrap{
position:relative;flex:1;min-width:220px;
display:flex;align-items:center;gap:7px;
padding:0 10px;background:var(--sur);border:1px solid var(--bdr);
border-radius:var(--rsm);
}
.xr-search-wrap svg{ color:var(--tx3);flex-shrink:0 }
.xr-search-wrap input{
flex:1;border:none;background:transparent;outline:none;
padding:7px 0;font-size:12px;font-family:'Inter',sans-serif;color:var(--tx);
}
.xr-summary{
display:flex;gap:10px;font-size:11px;color:var(--tx2);flex-wrap:wrap;
}
.xr-summary .xr-stat{
display:inline-flex;gap:4px;padding:4px 9px;background:var(--sur);
border:1px solid var(--bdr);border-radius:var(--pill);
}
.xr-summary .xr-stat b{ color:var(--mag);font-weight:700 }
.xr-toolbar-actions{ display:flex;gap:6px;flex-shrink:0 }
.xr-toolbar-actions .bsm{ font-size:11px;padding:5px 10px }
.xr-tree{
max-height:520px;overflow-y:auto;
display:flex;flex-direction:column;gap:6px;
padding-right:4px;
margin-bottom:10px;
}
.xr-mod{
background:var(--sur);border:1px solid var(--bdr);
border-radius:var(--rsm);overflow:hidden;
transition:border-color .15s, box-shadow .15s;
}
.xr-mod:hover{ border-color:var(--bdr2) }
.xr-mod-head{
display:flex;align-items:center;gap:9px;flex-wrap:wrap;
padding:9px 11px;cursor:pointer;user-select:none;
background:var(--sur2);
border-bottom:1px solid transparent;
transition:background .15s;
}
.xr-mod-head:hover{ background:var(--hov) }
.xr-caret-wrap{
display:inline-flex;align-items:center;justify-content:center;
width:16px;height:16px;color:var(--tx3);
transition:transform .2s var(--ease, cubic-bezier(.4,0,.2,1));
}
.xr-caret-wrap.xr-rot{ transform:rotate(90deg) }
.xr-mod-dot{
width:8px;height:8px;border-radius:50%;flex-shrink:0;
box-shadow:0 0 0 2px rgba(0,0,0,.04);
}
.xr-mod-name{
font-family:'Inter',sans-serif;font-size:14px;letter-spacing:.5px;
}
.xr-mod-counts{
display:flex;gap:5px;flex-wrap:wrap;flex:1;justify-content:flex-end;
}
.xr-pill{
font-size:9px;padding:2px 7px;background:var(--sur);
border:1px solid var(--bdr);border-radius:var(--pill);
color:var(--tx2);font-weight:600;letter-spacing:.3px;text-transform:uppercase;
white-space:nowrap;
}
.xr-pill.xr-pill-on{
background:rgba(16,185,129,.13);
border-color:rgba(16,185,129,.4);color:#10b981;
}
.xr-mod-actions{
display:flex;gap:4px;flex-shrink:0;
}
.xr-btn-mini{
font-size:10px;padding:3px 8px;
background:var(--sur);border:1px solid var(--bdr);
border-radius:5px;cursor:pointer;color:var(--tx2);font-weight:600;
font-family:'Inter',sans-serif;
transition:all .12s;letter-spacing:.2px;
}
.xr-btn-mini:hover{ background:var(--mag);color:#fff;border-color:var(--mag) }
.xr-btn-warn:hover{ background:#a0154f;color:#fff;border-color:#a0154f }
.xr-mod-body{
padding:6px 12px 10px;
background:var(--sur);
animation:xrSlideDown .18s var(--ease, cubic-bezier(.4,0,.2,1));
}
@keyframes xrSlideDown{ from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
.xr-section{ margin-top:6px }
.xr-section-head{
display:flex;align-items:center;gap:7px;flex-wrap:wrap;
font-size:9px;font-weight:700;letter-spacing:.8px;color:var(--tx3);
padding:8px 4px 4px;text-transform:uppercase;
}
.xr-section-head .xr-btn-mini{
margin-left:auto;font-size:9px;padding:2px 6px;
}
.xr-section-head .xr-btn-mini + .xr-btn-mini{ margin-left:4px }
.xr-row{
display:flex;align-items:center;gap:9px;
padding:6px 9px;border-radius:5px;cursor:pointer;
font-size:12px;color:var(--tx1);user-select:none;
transition:background .12s;
}
.xr-row:hover{ background:var(--sur2) }
.xr-row.xr-on{ background:rgba(16,185,129,.06) }
.xr-row.xr-on:hover{ background:rgba(16,185,129,.10) }
.xr-cb{
width:18px;height:18px;flex-shrink:0;
border:1.5px solid var(--bdr2);border-radius:4px;
display:flex;align-items:center;justify-content:center;
background:var(--sur);transition:all .12s;
}
.xr-row.xr-on .xr-cb{
background:#10b981;border-color:#10b981;color:#fff;
}
.xr-lbl{ flex:1;min-width:0;line-height:1.4 }
.xr-sec{ color:var(--tx3);font-style:normal;font-size:10px;font-weight:500 }
.xr-code{
font-family:'Inter',sans-serif;font-weight:600;font-size:11px;
background:rgba(0,0,0,.04);padding:1px 6px;border-radius:3px;color:var(--tx1);
}
.xr-kind{
font-size:8px;font-weight:700;letter-spacing:.5px;color:var(--tx3);
background:var(--sur2);padding:2px 5px;border-radius:3px;flex-shrink:0;
}
@media (max-width:768px){
.xr-toolbar{ flex-direction:column;align-items:stretch }
.xr-toolbar-actions{ justify-content:stretch }
.xr-toolbar-actions .bsm{ flex:1 }
.xr-mod-head{ flex-direction:column;align-items:flex-start;gap:6px }
.xr-mod-counts, .xr-mod-actions{ width:100% }
.xr-tree{ max-height:none }
}
/* ════════════════════════════════════════════════════════════════════
v45h/31 · Mapa del ecosistema con cariño · animaciones sutiles
──────────────────────────────────────────────────────────────────── */
.eco-map{ overflow:visible }
@keyframes ecoRotateSlow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes ecoRotateRev { from{transform:rotate(360deg)} to{transform:rotate(0deg)} }
@keyframes ecoPulseHalo { 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:.85;transform:scale(1.08)} }
@keyframes ecoFlowDash { from{stroke-dashoffset:0} to{stroke-dashoffset:-40} }
@keyframes ecoHubGlow { 0%,100%{filter:drop-shadow(0 0 6px rgba(212,32,112,.25))} 50%{filter:drop-shadow(0 0 14px rgba(212,32,112,.55))} }
.eco-pulse-halo{
transform-origin:360px 190px;
animation:ecoPulseHalo 3s ease-in-out infinite;
}
.eco-hub-card{
animation:ecoHubGlow 4s ease-in-out infinite;
transition:transform .3s var(--ease, cubic-bezier(.4,0,.2,1));
}
.eco-flow{
animation:ecoFlowDash 2.6s linear infinite;
}
.eco-flow-soft{
animation:ecoFlowDash 4s linear infinite;
}
/* Módulos activos: hover hace scale + glow */
.eco-mod{
transform-origin:center;
transition:transform .25s var(--ease, cubic-bezier(.4,0,.2,1)), filter .25s ease;
cursor:default;
}
.eco-mod:hover{
transform:scale(1.06);
filter:drop-shadow(0 4px 12px rgba(0,0,0,.12));
}
.eco-mod-soon{
opacity:.85;
transition:opacity .25s ease;
}
.eco-mod-soon:hover{ opacity:1 }
/* Status dots con halo sutil */
.eco-status-dot{
filter:drop-shadow(0 0 3px rgba(16,185,129,.6));
}
/* Mobile: reducir tamaño + ocultar próximamente para no saturar */
@media (max-width:640px){
.eco-map{ max-width:100% }
}
/* ════════════════════════════════════════════════════════════════════
v45h/31 · Catálogo solicitudes: layout responsive
──────────────────────────────────────────────────────────────────── */
.cat-flow-row{
display:flex;align-items:center;gap:10px;
padding:10px 12px;background:var(--sur2);border:1px solid var(--bdr);
border-radius:var(--rsm);cursor:pointer;transition:border-color .15s, background .15s;
}
.cat-flow-row:hover{ border-color:var(--mag); background:var(--sur); }
.cat-flow-info{ flex:1;min-width:0 }
.cat-flow-cta{
font-size:11px;flex-shrink:0;white-space:nowrap;
max-width:200px;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:768px){
.cat-flow-row{ flex-direction:column;align-items:stretch;gap:8px;padding:11px 13px }
.cat-flow-info{ width:100% }
.cat-flow-cta{
width:100%;max-width:100%;text-align:center;
padding:9px 12px;font-size:12px;
/* Truncar nombres muy largos del CTA en móvil */
}
}
/* ════════════════════════════════════════════════════════════════════
v45h/12 Bloque M Pieza A · Multi-perfil: switch + banner + temas
──────────────────────────────────────────────────────────────────── */
/* Switch de perfil en topbar */
.ps-btn{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;
background:var(--sur2);border:1px solid var(--bdr);border-radius:var(--pill);
cursor:pointer;font-family:'Inter',sans-serif;font-size:12px;
color:var(--tx1);font-weight:600;transition:background .15s,border-color .15s}
.ps-btn:hover{background:var(--sur);border-color:var(--mag)}
.ps-btn .ps-tipo{font-size:13px;line-height:1}
.ps-btn .ps-nombre{font-weight:600;letter-spacing:.2px}
.ps-btn svg{color:var(--tx3)}
/* Modal switch */
.ps-list{display:flex;flex-direction:column;gap:7px;margin:6px 0 12px}
.ps-row{display:flex;align-items:center;gap:11px;padding:11px 13px;
background:var(--sur2);border:1.5px solid var(--bdr);border-radius:var(--rsm);
cursor:pointer;text-align:left;font-family:'Inter',sans-serif;
transition:background .15s,border-color .15s}
.ps-row:hover:not(:disabled){background:var(--sur);border-color:var(--mag)}
.ps-row:disabled{cursor:not-allowed;opacity:.65}
.ps-row-activo{border-color:#10b981;background:rgba(16,185,129,.07)}
.ps-row-ico{font-size:18px;line-height:1;flex-shrink:0;width:22px;text-align:center}
.ps-row-body{flex:1;min-width:0}
.ps-row-nombre{font-size:13px;font-weight:700;color:var(--tx1);
display:flex;align-items:center;gap:6px}
.ps-row-tipo{font-size:11px;color:var(--tx2);margin-top:2px}
.ps-row-2fa{font-size:11px}
/* ── Pill perfil elevado (inline en topbar, reemplaza banner flotante) ── */
.perfil-elevado-pill{display:inline-flex;align-items:center;gap:8px;
padding:5px 11px;color:#fff;font-family:'Inter',sans-serif;
border-radius:var(--pill);box-shadow:0 1px 4px rgba(0,0,0,.15);
font-size:11px;font-weight:700;letter-spacing:.5px;animation:pepFade .2s ease-out}
.perfil-elevado-pill .pep-ico{font-size:13px;line-height:1}
.perfil-elevado-pill .pep-label{text-transform:uppercase;white-space:nowrap}
.perfil-elevado-pill .pep-exit{background:rgba(255,255,255,.18);color:#fff;
border:1px solid rgba(255,255,255,.32);border-radius:var(--pill);
padding:2px 9px;cursor:pointer;font-family:inherit;font-size:10px;
font-weight:700;letter-spacing:.4px;transition:background .15s}
.perfil-elevado-pill .pep-exit:hover{background:rgba(255,255,255,.32)}
@keyframes pepFade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
/* ── Recuadro inset crítico (rojo banner clásico) ── */
body.tema-root_god{box-shadow:inset 0 0 0 4px #dc2626;min-height:100vh}
body.tema-admin_elevado{box-shadow:inset 0 0 0 3px var(--ora);min-height:100vh}
/* ── Topbar coloreado cuando hay perfil elevado ──
Overridea CSS vars del topbar para que los inline styles que usan var(--sur2),
var(--bdr), var(--tx1..3) tomen automáticamente la paleta blanca/translúcida.
El logo SVG se forza a blanco vía fill/stroke override. */
body.tema-root_god #topbar,
body.tema-admin_elevado #topbar{
color:#fff;
--sur2:rgba(255,255,255,.16);
--bdr:rgba(255,255,255,.28);
--bdr2:rgba(255,255,255,.22);
--tx1:#fff;
--tx2:rgba(255,255,255,.92);
--tx3:rgba(255,255,255,.78);
border-bottom:1px solid rgba(0,0,0,.10);
box-shadow:0 2px 6px rgba(0,0,0,.10);
}
/* Topbar root_god: rojo crítico clásico (mismo que el banner flotante v45f). */
body.tema-root_god #topbar{
background:#dc2626;
}
body.tema-root_god #topbar .tlogo-w,
body.tema-root_god #tmod-n,
body.tema-root_god .perfil-elevado-pill{
text-shadow:0 1px 2px rgba(0,0,0,.18);
}
body.tema-admin_elevado #topbar{background:var(--ora)}
/* Logo V, invertir gradient a blanco cuando elevado.
`fill: currentColor` no aplica porque el SVG usa url(#tg). Sobrescribimos directo. */
body.tema-root_god .tlogo svg rect,
body.tema-admin_elevado .tlogo svg rect{
fill:rgba(255,255,255,.18) !important;
stroke:#fff !important;
}
body.tema-root_god .tlogo svg path,
body.tema-admin_elevado .tlogo svg path{
stroke:#fff !important;
}
body.tema-root_god .tlogo svg line,
body.tema-admin_elevado .tlogo svg line{
stroke:#fff !important;
}
body.tema-root_god .tlogo svg circle,
body.tema-admin_elevado .tlogo svg circle,
body.tema-root_god .tlogo svg polygon,
body.tema-admin_elevado .tlogo svg polygon{
fill:#fff !important;
}
/* "VECTOR" wordmark: el text-fill-color transparent + background-clip:text deja
ver el gradient. Cuando elevado pisamos a blanco sólido. */
body.tema-root_god .tlogo-w,
body.tema-admin_elevado .tlogo-w{
background:none !important;
-webkit-text-fill-color:#fff !important;
color:#fff;
}
/* Pill perfil elevado dentro de topbar coloreado: semi-transparente para integrarse */
body.tema-root_god .perfil-elevado-pill,
body.tema-admin_elevado .perfil-elevado-pill{
background:rgba(0,0,0,.20) !important;
box-shadow:none;
}
/* tmod dot: blanco para que se vea sobre topbar coloreado */
body.tema-root_god #tmod-dot,
body.tema-admin_elevado #tmod-dot{
background:#fff !important;
box-shadow:0 0 0 2px rgba(255,255,255,.30);
}
/* DB-status pill verde-online dot: que conserve el verde (visible sobre magenta) */
/* Avatar SOphIA: borde blanco cuando topbar elevado */
body.tema-root_god #btn-sophia > div,
body.tema-admin_elevado #btn-sophia > div{
border-color:#fff !important;
box-shadow:0 0 0 2px rgba(255,255,255,.22) !important;
}
/* Botones tactions (campana): hover suave sobre fondo coloreado */
body.tema-root_god #topbar .tbtn,
body.tema-admin_elevado #topbar .tbtn{
color:#fff;
}
body.tema-root_god #topbar .tbtn:hover,
body.tema-admin_elevado #topbar .tbtn:hover{
background:rgba(0,0,0,.15);
}
/* Tema qa, sin banner ni recuadro; solo pill verde sutil en topbar */
body.tema-qa #tmod-dot{background:#10b981 !important}
/* Mobile: recuadro más fino + pill compacta (solo ícono + Salir, sin label) */
@media (max-width:600px){
body.tema-root_god{box-shadow:inset 0 0 0 3px #dc2626}
body.tema-admin_elevado{box-shadow:inset 0 0 0 2px var(--ora)}
.perfil-elevado-pill{padding:4px 8px;gap:5px}
.perfil-elevado-pill .pep-label{display:none}
.perfil-elevado-pill .pep-exit{padding:2px 7px;font-size:9px}
/* Switch perfil: ocultar nombre largo, mostrar solo ícono+chevron */
.ps-btn .ps-nombre{display:none}
.ps-btn{padding:6px 9px}
}
/* Legacy: ocultar banner viejo si quedó en alguna sesión cacheada */
.perfil-banner{display:none !important}
/* v45g, pill elevado: ocultar en móvil (redundante con color topbar + switch) */
@media (max-width:768px){
#perfil-elevado-pill{display:none !important}
}
/* v45j Fase 8 · Capacitación */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.cap-card{border-radius:var(--r);padding:16px}
@media(max-width:540px){.cap-grid{grid-template-columns:1fr}}
/* ════════════════════════════════════════════════════════════════════════
v45m · OPERATIONAL HEALTH (enterprise control panel)
Lenguaje: AWS Console + Linear + Datadog clean. SIN hero oscuro,
SIN glow permanente, SIN gauges circulares. Solo VECTOR sobrio.
════════════════════════════════════════════════════════════════════════ */
.vh-wrap{padding-bottom:24px}
/* Header compact (≤120px), refinement: typography más densa, separador más definido */
.vh-head{display:flex;align-items:center;justify-content:space-between;
padding:4px 0 12px;margin-bottom:18px;border-bottom:1px solid var(--bdr2);
gap:14px;flex-wrap:wrap}
.vh-head-l{flex:1;min-width:0}
.vh-h-title{font-family:'Inter',sans-serif;font-weight:700;font-size:20px;
color:var(--tx);line-height:1.05;letter-spacing:-.4px}
.vh-h-sub{font-size:11px;color:var(--tx2);margin-top:4px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;letter-spacing:.2px}
.vh-h-sub b{color:var(--tx1);font-weight:600}
.vh-head-r{display:flex;align-items:center;gap:6px;flex-shrink:0}
/* Live pill, refinement: más compacto, pulse mínimo */
.vh-live{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 7px;
border-radius:3px;background:rgba(5,150,105,.06);
border:1px solid rgba(5,150,105,.2);
font-size:9.5px;font-weight:700;letter-spacing:.7px;color:#047857;
text-transform:uppercase;font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vh-live::before{content:'';width:5px;height:5px;border-radius:50%;
background:#10b981;
box-shadow:0 0 0 0 rgba(16,185,129,.55);
animation:vh-pulse 2.2s ease-in-out infinite}
@keyframes vh-pulse{
0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}
50% {box-shadow:0 0 0 4px rgba(16,185,129,0)}
}
.vh-live.crit{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.25);color:#b91c1c}
.vh-live.crit::before{background:#dc2626;animation:vh-pulse-crit 1s ease-in-out infinite}
@keyframes vh-pulse-crit{
0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.6)}
50% {box-shadow:0 0 0 5px rgba(220,38,38,0)}
}
/* Workspace pill refinada */
.vh-ws{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;
border:1px solid var(--bdr2);border-radius:3px;
background:var(--sur2);font-size:10.5px;font-weight:600;color:var(--tx1);
letter-spacing:.1px;max-width:200px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.vh-ws-ico{font-size:10px;color:var(--tx3);flex-shrink:0}
/* Refresh button refinado */
.vh-rf{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;
border:1px solid var(--bdr2);border-radius:3px;
background:var(--sur);color:var(--tx1);font-size:11px;font-weight:600;
cursor:pointer;transition:border-color .15s var(--ease),color .15s var(--ease)}
.vh-rf:hover{border-color:var(--tx2);color:var(--tx)}
.vh-rf:active{transform:scale(.97)}
.vh-rf-ico{font-size:12px;line-height:1}
/* Scroll-to-top button discreto (reemplaza FAB rosa) */
.vh-toptools{position:fixed;bottom:18px;right:18px;z-index:30;
display:flex;flex-direction:column;gap:6px;opacity:0;pointer-events:none;
transition:opacity .2s var(--ease)}
.vh-toptools.show{opacity:1;pointer-events:auto}
.vh-toptools button{width:32px;height:32px;border-radius:6px;border:1px solid var(--bdr2);
background:var(--sur);color:var(--tx2);cursor:pointer;font-size:13px;
display:flex;align-items:center;justify-content:center;
transition:all .15s var(--ease);box-shadow:var(--sh-sm)}
.vh-toptools button:hover{border-color:var(--tx3);color:var(--tx);background:var(--sur2)}
/* Section label refinada, más sutil, mono-spaced */
.vh-sec{font-size:9.5px;font-weight:700;color:var(--tx3);
text-transform:uppercase;letter-spacing:.8px;margin:22px 0 10px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vh-sec:first-of-type{margin-top:0}
/* Core Health domina ligeramente, sección con peso */
.vh-sec.core{color:var(--tx2);font-size:10px;letter-spacing:.9px}
/* Row 1 · KPI compact cards · Core Health (jerarquía: domina ligeramente) */
.vh-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
gap:8px;margin-bottom:4px}
.vh-k{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rsm);
padding:10px 12px 11px;position:relative;overflow:hidden;
transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.vh-k::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:var(--mag);opacity:.85}
.vh-k.ok::before{background:#10b981}
.vh-k.warn::before{background:#f59e0b}
.vh-k.crit::before{background:#dc2626}
.vh-k.info::before{background:#0891b2}
.vh-k:hover{border-color:var(--bdr2);box-shadow:var(--sh-sm)}
.vh-k-lbl{font-size:9.5px;color:var(--tx2);text-transform:uppercase;
letter-spacing:.6px;font-weight:700;margin-bottom:5px;
display:flex;align-items:center;gap:5px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vh-k-lbl-ico{font-size:10px;opacity:.6;color:var(--tx3);font-family:initial}
.vh-k-val{font-family:'Inter',sans-serif;font-weight:700;font-size:23px;
color:var(--tx);line-height:1.02;letter-spacing:-.3px;
font-variant-numeric:tabular-nums}
.vh-k-unit{font-size:12px;color:var(--tx3);font-weight:600;letter-spacing:0;margin-left:1px}
.vh-k-sub{font-size:10px;color:var(--tx3);margin-top:4px;line-height:1.3;
font-variant-numeric:tabular-nums}
/* Row 2 · Platform Status list (terciario, sin elevación) */
.vh-plat{background:var(--sur);border:1px solid var(--bdr);
border-radius:var(--rsm);overflow:hidden}
.vh-plat-row{display:grid;grid-template-columns:minmax(0,1.4fr) 130px minmax(0,1.4fr) 110px;
align-items:center;padding:10px 14px;
border-bottom:1px solid var(--bdr);font-size:11.5px}
.vh-plat-row:last-child{border-bottom:0}
.vh-plat-row:hover{background:var(--sur2)}
.vh-plat-name{font-weight:600;color:var(--tx1);display:flex;align-items:center;gap:9px;min-width:0}
.vh-plat-name-ico{font-size:12px;opacity:.5;color:var(--tx3);flex-shrink:0}
.vh-plat-status{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:10.5px;letter-spacing:.2px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vh-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.vh-dot.ok{background:#10b981}
.vh-dot.warn{background:#f59e0b}
.vh-dot.crit{background:#dc2626}
.vh-dot.off{background:var(--tx3)}
.vh-plat-status.ok{color:#047857}
.vh-plat-status.warn{color:#b45309}
.vh-plat-status.crit{color:#b91c1c}
.vh-plat-status.off{color:var(--tx3)}
.vh-plat-meta{font-size:10.5px;color:var(--tx2);font-variant-numeric:tabular-nums;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vh-plat-bar{height:4px;background:var(--sur2);border-radius:2px;
overflow:hidden;position:relative}
.vh-plat-bar-fill{position:absolute;top:0;left:0;bottom:0;
background:#10b981;transition:width .5s var(--ease)}
.vh-plat-bar-fill.warn{background:#f59e0b}
.vh-plat-bar-fill.crit{background:#dc2626}
/* Row 3 · Activity charts · secundario (densidad mayor, altura reducida) */
.vh-charts{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-bottom:10px}
.vh-chart{background:var(--sur);border:1px solid var(--bdr);
border-radius:var(--rsm);padding:11px 13px 10px;margin-bottom:10px}
.vh-chart:last-child{margin-bottom:0}
.vh-chart-hd{display:flex;justify-content:space-between;align-items:baseline;
margin-bottom:8px}
.vh-chart-title{font-size:11.5px;font-weight:700;color:var(--tx1);
letter-spacing:.1px}
.vh-chart-meta{font-size:9.5px;color:var(--tx3);text-transform:uppercase;
letter-spacing:.6px;font-weight:600;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vh-chart-box{position:relative;height:170px}
.vh-chart.tall .vh-chart-box{height:185px}
.vh-chart-box.short{height:100px}
/* Module storage horizontal bars (sustituye doughnut) */
.vh-modbars{display:flex;flex-direction:column;gap:7px;padding-top:4px;
max-height:185px;overflow-y:auto}
.vh-modbar{display:grid;grid-template-columns:80px 1fr 64px;align-items:center;
gap:9px;font-size:10.5px}
.vh-modbar-name{color:var(--tx1);font-weight:600;text-transform:uppercase;
letter-spacing:.3px;font-size:9.5px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vh-modbar-track{height:6px;background:var(--sur2);border-radius:3px;overflow:hidden}
.vh-modbar-fill{height:100%;border-radius:3px;transition:width .5s var(--ease)}
.vh-modbar-val{font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
font-weight:600;text-align:right;color:var(--tx);font-size:10.5px;
font-variant-numeric:tabular-nums}
.vh-modbar-empty{color:var(--tx3);font-size:11px;font-style:italic;padding:8px 0}
/* Heat timeline 24h (reemplaza histograma de sesiones-por-hora) */
.vh-heat{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;padding:8px 0 4px}
.vh-heat-cell{position:relative;aspect-ratio:1;border-radius:2px;
background:var(--sur2);transition:transform .12s var(--ease)}
.vh-heat-cell:hover{transform:scale(1.18);box-shadow:0 0 0 1px var(--bdr3);z-index:2}
.vh-heat-cell[data-v="0"]{background:var(--sur2)}
.vh-heat-cell[data-v="1"]{background:rgba(8,145,178,.18)}
.vh-heat-cell[data-v="2"]{background:rgba(8,145,178,.35)}
.vh-heat-cell[data-v="3"]{background:rgba(8,145,178,.55)}
.vh-heat-cell[data-v="4"]{background:rgba(8,145,178,.78)}
.vh-heat-cell[data-v="5"]{background:#0891b2}
.vh-heat-labels{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
font-size:8.5px;color:var(--tx3);text-align:center;padding-top:2px;
font-variant-numeric:tabular-nums}
.vh-heat-legend{display:flex;align-items:center;justify-content:flex-end;gap:6px;
margin-top:8px;font-size:9.5px;color:var(--tx3);
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;letter-spacing:.3px}
.vh-heat-legend-scale{display:flex;gap:2px}
.vh-heat-legend-scale span{width:10px;height:10px;border-radius:2px}
/* Row 4 · Top tables/indices · terciario (metadata silenciosa) */
.vh-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.vh-tab{background:var(--sur);border:1px solid var(--bdr);
border-radius:var(--rsm);padding:11px 13px}
.vh-tab-title{font-size:11.5px;font-weight:700;color:var(--tx1);margin-bottom:8px;
display:flex;justify-content:space-between;align-items:baseline}
.vh-tab-meta{font-size:9.5px;color:var(--tx3);text-transform:uppercase;
letter-spacing:.6px;font-weight:600;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vh-tab table{width:100%;border-collapse:collapse;font-size:10.5px}
.vh-tab th{text-align:left;padding:4px 6px;font-size:8.5px;color:var(--tx3);
text-transform:uppercase;letter-spacing:.6px;font-weight:700;
border-bottom:1px solid var(--bdr2);
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vh-tab th.r{text-align:right}
.vh-tab td{padding:5px 6px;font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
border-bottom:1px solid var(--bdr);color:var(--tx1);font-size:10px}
.vh-tab td.r{text-align:right;font-weight:600}
.vh-tab td.dim{color:var(--tx3);font-weight:500}
.vh-tab tr:last-child td{border-bottom:0}
.vh-tab tr:hover td{background:var(--sur2)}
/* Footer · metadata silenciosa */
.vh-foot{display:flex;justify-content:space-between;align-items:center;
padding:8px 0 0;margin-top:6px;border-top:1px solid var(--bdr);
font-size:9.5px;color:var(--tx3);letter-spacing:.3px;gap:14px;flex-wrap:wrap;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vh-foot b{color:var(--tx2);font-weight:600}
/* Responsive */
@media (max-width:900px){
.vh-charts{grid-template-columns:1fr}
.vh-tabs{grid-template-columns:1fr}
.vh-plat-row{grid-template-columns:1fr 110px;gap:6px 12px;padding:10px 12px}
.vh-plat-row > *:nth-child(3),
.vh-plat-row > *:nth-child(4){grid-column:span 2;justify-self:stretch;padding-left:22px}
.vh-head{padding:4px 0 12px}
.vh-h-title{font-size:19px}
.vh-ws{max-width:140px}
}
@media (max-width:540px){
.vh-kpis{grid-template-columns:repeat(2,1fr)}
.vh-ws{display:none}
.vh-rf span:not(.vh-rf-ico){display:none}
.vh-rf{padding:5px 8px}
}
/* ════════════════════════════════════════════════════════════════════════
v45m · VECTOR HUB (centro operativo de modulos · kernel modular enterprise)
Estilo: AWS Service Manager + Vercel Runtime + Stripe Internal Platform.
NO App Store. NO consumer. Solo runtime hub tecnico.
════════════════════════════════════════════════════════════════════════ */
.vhub-wrap{padding-bottom:32px}
/* Header */
.vhub-head{display:flex;align-items:center;justify-content:space-between;
padding:4px 0 14px;margin-bottom:14px;border-bottom:1px solid var(--bdr2);
gap:14px;flex-wrap:wrap}
.vhub-head-l{flex:1;min-width:0}
.vhub-title{font-family:'Inter',sans-serif;font-weight:700;font-size:22px;
color:var(--tx);line-height:1.05;letter-spacing:-.4px}
.vhub-sub{font-size:11px;color:var(--tx2);margin-top:5px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;letter-spacing:.2px}
.vhub-sub b{color:var(--tx1);font-weight:600}
.vhub-head-r{display:flex;align-items:center;gap:6px;flex-shrink:0}
/* Runtime status pill (compacto, no glow) */
.vhub-runtime{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;
border:1px solid var(--bdr2);border-radius:3px;background:var(--sur);
font-size:10.5px;font-weight:600;color:var(--tx1);letter-spacing:.2px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vhub-runtime-dot{width:5px;height:5px;border-radius:50%;background:#10b981;flex-shrink:0;
box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:vhub-pulse 2.2s ease-in-out infinite}
@keyframes vhub-pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)} 50%{box-shadow:0 0 0 4px rgba(16,185,129,0)}}
.vhub-rf{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;
border:1px solid var(--bdr2);border-radius:3px;background:var(--sur);
color:var(--tx1);font-size:11px;font-weight:600;cursor:pointer;
transition:border-color .15s var(--ease),color .15s var(--ease)}
.vhub-rf:hover{border-color:var(--tx2);color:var(--tx)}
.vhub-rf:active{transform:scale(.97)}
.vhub-rf-ico{font-size:12px;line-height:1}
/* Tabs */
.vhub-tabs{display:flex;gap:0;border-bottom:1px solid var(--bdr);margin-bottom:14px;
overflow-x:auto;scrollbar-width:none}
.vhub-tabs::-webkit-scrollbar{display:none}
.vhub-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
background:transparent;border:0;border-bottom:2px solid transparent;
font-size:11.5px;font-weight:600;color:var(--tx2);cursor:pointer;letter-spacing:.2px;
transition:color .15s var(--ease),border-color .15s var(--ease);
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
white-space:nowrap;margin-bottom:-1px}
.vhub-tab:hover{color:var(--tx1)}
.vhub-tab.active{color:var(--tx);border-bottom-color:var(--mag)}
.vhub-tab-dot{width:5px;height:5px;border-radius:50%;background:var(--tx3);flex-shrink:0}
.vhub-tab-dot.ok{background:#10b981}
.vhub-tab-dot.warn{background:#f59e0b}
.vhub-tab-dot.info{background:#0891b2}
.vhub-tab-count{font-size:9.5px;color:var(--tx3);font-weight:600;
background:var(--sur2);padding:1px 6px;border-radius:8px;letter-spacing:.3px;
min-width:18px;text-align:center}
.vhub-tab.active .vhub-tab-count{color:var(--tx1);background:rgba(212,32,112,.08)}
/* Grid de cards */
.vhub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
/* Card de módulo (service-oriented, no marketing) */
.vhub-card{background:var(--sur);border:1px solid var(--bdr);
border-radius:var(--rsm);padding:14px 15px 12px;
display:flex;flex-direction:column;gap:11px;
transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.vhub-card:hover{border-color:var(--bdr2);box-shadow:var(--sh-sm)}
.vhub-card[data-state="disabled"]{opacity:.65}
.vhub-card-head{display:flex;align-items:flex-start;gap:11px}
.vhub-card-icowrap{width:36px;height:36px;border-radius:6px;
display:flex;align-items:center;justify-content:center;
font-size:18px;font-weight:700;flex-shrink:0;line-height:1}
.vhub-card-titlewrap{flex:1;min-width:0}
.vhub-card-name{font-size:14px;font-weight:700;color:var(--tx);line-height:1.1;
letter-spacing:-.1px}
.vhub-card-tag{font-size:10px;color:var(--tx3);margin-top:2px;
text-transform:uppercase;letter-spacing:.6px;font-weight:600;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vhub-card-badges{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
/* Badges (compactos, sutiles, enterprise · NO pills gigantes) */
.vhub-badge{display:inline-block;padding:2px 6px;font-size:9px;font-weight:700;
letter-spacing:.5px;text-transform:uppercase;border-radius:3px;
background:var(--sur2);color:var(--tx2);border:1px solid var(--bdr2);
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;line-height:1.4}
.vhub-badge.ok{background:rgba(5,150,105,.08);color:#047857;border-color:rgba(5,150,105,.22)}
.vhub-badge.warn{background:rgba(245,158,11,.1);color:#b45309;border-color:rgba(245,158,11,.25)}
.vhub-badge.crit{background:rgba(220,38,38,.08);color:#b91c1c;border-color:rgba(220,38,38,.22)}
.vhub-badge.off{background:var(--sur2);color:var(--tx3);border-color:var(--bdr)}
.vhub-badge.core{background:rgba(212,32,112,.08);color:#9b1856;border-color:rgba(212,32,112,.22)}
.vhub-badge.experimental{background:rgba(124,58,237,.08);color:#5b21b6;border-color:rgba(124,58,237,.22)}
.vhub-badge.ia{background:rgba(3,105,161,.08);color:#075985;border-color:rgba(3,105,161,.22)}
.vhub-card-desc{font-size:12px;color:var(--tx2);line-height:1.4}
/* Stats row inline (tablas · filas · en disco), estilo Stripe Internal */
.vhub-card-stats{display:flex;align-items:stretch;justify-content:space-around;
gap:0;padding:11px 6px;background:var(--sur2);border-radius:6px;
border:1px solid var(--bdr)}
.vhub-card-stats.empty{justify-content:center;padding:14px 6px;opacity:.7}
.vhub-stat{flex:1;text-align:center;padding:0 8px;min-width:0}
.vhub-stat.dim{opacity:.5}
.vhub-stat-num{font-family:'Inter',sans-serif;font-weight:700;font-size:18px;
color:var(--tx);line-height:1.05;letter-spacing:-.2px;
font-variant-numeric:tabular-nums;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vhub-stat-lbl{font-size:9.5px;color:var(--tx3);margin-top:3px;
text-transform:lowercase;letter-spacing:.4px;font-weight:500;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vhub-stat-div{width:1px;background:var(--bdr2);flex-shrink:0}
/* Meta-data técnica del módulo (versión, owner, runtime, deps) */
.vhub-card-meta{display:grid;grid-template-columns:1fr;gap:3px;
padding:8px 10px;background:var(--sur2);border-radius:4px;
border:1px solid var(--bdr);font-size:10.5px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vhub-card-meta-row{display:flex;gap:8px;align-items:baseline}
.vhub-card-meta-k{color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;
font-size:9px;font-weight:700;min-width:54px;line-height:1.4}
.vhub-card-meta-v{color:var(--tx1);font-weight:500;font-size:10px;flex:1;
overflow-wrap:anywhere}
.vhub-card-meta-v code{background:var(--sur);padding:1px 5px;border-radius:2px;
border:1px solid var(--bdr);font-size:9.5px;font-family:inherit;
color:var(--tx2)}
.vhub-deps{display:inline-flex;flex-wrap:wrap;gap:3px;align-items:center;line-height:1.6}
.vhub-impact-kernel{color:#9b1856;font-weight:600}
.vhub-impact-high{color:#b45309;font-weight:600}
.vhub-impact-med{color:#0369a1}
.vhub-impact-low{color:#047857}
/* Footer card */
.vhub-card-foot{display:flex;align-items:center;justify-content:space-between;
gap:10px;padding-top:8px;border-top:1px solid var(--bdr);margin-top:auto}
.vhub-card-action{padding:5px 12px;border-radius:4px;border:1px solid var(--bdr2);
background:var(--sur);color:var(--tx);font-size:11px;font-weight:600;
cursor:pointer;letter-spacing:.2px;
transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease)}
.vhub-card-action:hover:not(.disabled){border-color:var(--mag);color:var(--mag)}
.vhub-card-action:active:not(.disabled){transform:scale(.97)}
.vhub-card-action.disabled{opacity:.55;cursor:not-allowed;color:var(--tx3)}
.vhub-card-foot-note{font-size:9.5px;color:var(--tx3);letter-spacing:.2px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
/* Empty state */
.vhub-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:60px 20px;color:var(--tx3);gap:8px}
.vhub-empty-ico{font-size:28px;color:var(--tx3);line-height:1}
.vhub-empty-msg{font-size:12px;text-align:center;max-width:380px;line-height:1.4;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
/* Responsive */
@media (max-width:540px){
.vhub-grid{grid-template-columns:1fr}
.vhub-runtime{display:none}
.vhub-rf span:not(.vhub-rf-ico){display:none}
.vhub-rf{padding:4px 7px}
.vhub-tab{padding:7px 10px;font-size:11px}
.vhub-tab-count{display:none}
}
/* ════════════════════════════════════════════════════════════════════════
v45m · VECTOR Hub · Wizard install package (4 pasos)
════════════════════════════════════════════════════════════════════════ */
.vhub-wiz-ov{position:fixed;inset:0;background:rgba(24,18,14,.6);z-index:300;
display:flex;align-items:center;justify-content:center;padding:20px;
animation:vhub-wiz-fade .15s var(--ease)}
@keyframes vhub-wiz-fade{from{opacity:0}to{opacity:1}}
.vhub-wiz-modal{background:var(--sur);border-radius:10px;box-shadow:var(--sh-lg);
width:min(720px,100%);max-height:92vh;display:flex;flex-direction:column;
overflow:hidden;animation:vhub-wiz-slide .2s var(--ease)}
@keyframes vhub-wiz-slide{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.vhub-wiz-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 18px;border-bottom:1px solid var(--bdr)}
.vhub-wiz-h-title{font-family:'Inter',sans-serif;font-weight:700;font-size:18px;
color:var(--tx);letter-spacing:-.2px}
.vhub-wiz-close{background:transparent;border:0;font-size:18px;color:var(--tx3);
cursor:pointer;padding:4px 9px;border-radius:4px;line-height:1;
transition:color .15s var(--ease),background .15s var(--ease)}
.vhub-wiz-close:hover{color:var(--tx);background:var(--sur2)}
/* Steps indicator */
.vhub-wiz-steps{display:flex;align-items:center;gap:6px;
padding:10px 18px;background:var(--sur2);
border-bottom:1px solid var(--bdr);font-size:10.5px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
letter-spacing:.3px;color:var(--tx3);overflow-x:auto}
.vhub-wiz-step{display:inline-flex;align-items:center;gap:5px;flex-shrink:0}
.vhub-wiz-step-n{display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;border-radius:50%;background:var(--sur);
border:1px solid var(--bdr2);font-weight:700;font-size:9.5px}
.vhub-wiz-step.active{color:var(--mag)}
.vhub-wiz-step.active .vhub-wiz-step-n{background:var(--mag);color:#fff;border-color:var(--mag)}
.vhub-wiz-step.active .vhub-wiz-step-l{color:var(--tx);font-weight:700}
.vhub-wiz-step.done{color:#047857}
.vhub-wiz-step.done .vhub-wiz-step-n{background:#10b981;color:#fff;border-color:#10b981}
.vhub-wiz-step-sep{color:var(--bdr3);margin:0 3px}
/* Body */
.vhub-wiz-body{padding:18px;overflow-y:auto;flex:1}
/* Paso 1: Información */
.vhub-wiz-info-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.vhub-wiz-info-icowrap{width:48px;height:48px;border-radius:8px;
display:flex;align-items:center;justify-content:center;font-size:24px;
font-weight:700;flex-shrink:0}
.vhub-wiz-info-name{font-family:'Inter',sans-serif;font-weight:700;font-size:20px;
color:var(--tx);letter-spacing:-.2px}
.vhub-wiz-info-meta{font-size:11px;color:var(--tx3);margin-top:3px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;letter-spacing:.2px}
.vhub-wiz-info-desc{font-size:13px;color:var(--tx1);line-height:1.5;
padding:12px 14px;background:var(--sur2);border-radius:6px;
border:1px solid var(--bdr);margin-bottom:14px}
.vhub-wiz-info-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.vhub-wiz-pill{display:inline-block;padding:3px 9px;background:var(--sur2);
border:1px solid var(--bdr);border-radius:3px;font-size:10.5px;color:var(--tx1);
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;letter-spacing:.2px}
.vhub-wiz-pill b{color:var(--tx2);font-weight:700;margin-right:4px}
.vhub-wiz-pill.warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.25);color:#b45309}
/* Paso 2: Vista previa */
.vhub-wiz-sec{font-size:10px;font-weight:700;color:var(--tx2);
text-transform:uppercase;letter-spacing:.6px;margin:14px 0 8px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
display:flex;align-items:center;gap:6px}
.vhub-wiz-sec:first-child{margin-top:0}
.vhub-wiz-sec-ico{font-size:11px;color:var(--tx3)}
.vhub-wiz-mod-row{display:flex;align-items:baseline;gap:8px;font-size:12px;
padding:6px 0;color:var(--tx1)}
.vhub-wiz-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block}
.vhub-wiz-dim{color:var(--tx3);font-size:11px}
.vhub-wiz-caps{display:flex;flex-direction:column;gap:4px}
.vhub-wiz-cap-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.5fr) auto;
gap:8px;align-items:center;font-size:11px;padding:5px 8px;
background:var(--sur2);border-radius:4px}
.vhub-wiz-cap-code{font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
font-size:10.5px;color:var(--mag);background:transparent;padding:0}
.vhub-wiz-cap-name{color:var(--tx1);text-align:right}
.vhub-wiz-cap-cls{font-size:9.5px;font-weight:700;text-transform:uppercase;
letter-spacing:.5px;padding:2px 6px;border-radius:3px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vhub-wiz-cap-cls.cls-principal{background:rgba(212,32,112,.1);color:var(--mag)}
.vhub-wiz-cap-cls.cls-secundaria{background:var(--sur);color:var(--tx2);border:1px solid var(--bdr)}
.vhub-wiz-cap-cls.cls-laboratorio{background:rgba(124,58,237,.1);color:#7C3AED}
.vhub-wiz-nav-row{font-size:11.5px;color:var(--tx1);padding:3px 0;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;letter-spacing:.1px}
.vhub-wiz-nav-row code{background:var(--sur2);padding:1px 5px;border-radius:2px;
border:1px solid var(--bdr);font-size:10px;color:var(--tx2)}
.vhub-wiz-perfiles{font-size:11.5px;color:var(--tx1);
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;letter-spacing:.1px}
/* Paso 3: Instalando */
.vhub-wiz-installing{display:flex;flex-direction:column;align-items:center;
padding:20px 16px;gap:10px}
.vhub-wiz-spinner{width:32px;height:32px;border-radius:50%;
border:3px solid var(--sur2);border-top-color:var(--mag);
animation:vhub-wiz-spin 0.8s linear infinite}
@keyframes vhub-wiz-spin{to{transform:rotate(360deg)}}
.vhub-wiz-install-title{font-size:15px;font-weight:700;color:var(--tx)}
.vhub-wiz-install-sub{font-size:11.5px;color:var(--tx2);
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vhub-wiz-log{width:100%;max-height:200px;overflow-y:auto;
background:var(--sur2);border:1px solid var(--bdr);border-radius:5px;
padding:8px 11px;margin-top:8px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;font-size:11px}
.vhub-wiz-log-line{padding:3px 0;color:var(--tx1)}
.vhub-wiz-log-line.ok{color:#047857}
.vhub-wiz-log-line.err{color:#b91c1c}
.vhub-wiz-log-line b{color:var(--tx);font-weight:600}
/* Paso 4: Completado */
.vhub-wiz-done{display:flex;flex-direction:column;align-items:center;
padding:20px 16px;gap:8px;text-align:center}
.vhub-wiz-done-ico{width:56px;height:56px;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-size:28px;
background:rgba(16,185,129,.12);color:#10b981;font-weight:700}
.vhub-wiz-done-ico.err{background:rgba(220,38,38,.1);color:#dc2626}
.vhub-wiz-done-title{font-family:'Inter',sans-serif;font-weight:700;
font-size:18px;color:var(--tx)}
.vhub-wiz-done-sub{font-size:12px;color:var(--tx2);
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vhub-wiz-done-resumen{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
width:100%;max-width:380px;margin:14px 0 8px}
.vhub-wiz-done-resumen > div{padding:10px;background:var(--sur2);
border-radius:5px;border:1px solid var(--bdr);font-size:11px;color:var(--tx2);
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;text-align:center}
.vhub-wiz-done-resumen b{font-family:'Inter',sans-serif;font-size:18px;
color:var(--tx);display:block;margin-bottom:2px;font-weight:700}
/* Footer botones */
.vhub-wiz-foot{display:flex;align-items:center;justify-content:flex-end;
gap:8px;padding-top:14px;margin-top:14px;border-top:1px solid var(--bdr)}
.vhub-wiz-foot.center{justify-content:center;border-top:0;padding-top:0;margin-top:0}
.vhub-wiz-btn{padding:7px 13px;border:1px solid var(--bdr2);border-radius:5px;
background:var(--sur);color:var(--tx1);font-size:12px;font-weight:600;
cursor:pointer;transition:all .15s var(--ease)}
.vhub-wiz-btn:hover{border-color:var(--tx2);color:var(--tx)}
.vhub-wiz-btn.pri{background:var(--mag);color:#fff;border-color:var(--mag)}
.vhub-wiz-btn.pri:hover{background:#b51961;border-color:#b51961;color:#fff}
.vhub-wiz-btn:disabled{opacity:.55;cursor:not-allowed}
/* ──── v45m · Modal gestión suites instaladas (lista + desinstalar) ──── */
.vhub-rf-badge{display:inline-flex;align-items:center;justify-content:center;
min-width:18px;height:18px;padding:0 5px;background:var(--mag);color:#fff;
border-radius:9px;font-size:10px;font-weight:700;margin-left:4px;line-height:1}
.vhub-rf-badge:empty{display:none}
.vhub-suites-modal{max-width:680px}
.vhub-suites-empty{display:flex;flex-direction:column;align-items:center;
padding:30px 20px;text-align:center;gap:8px}
.vhub-suites-empty-ico{font-size:36px;color:var(--tx3);line-height:1}
.vhub-suites-empty-msg{font-size:13px;color:var(--tx1);font-weight:600}
.vhub-suites-empty-hint{font-size:11.5px;color:var(--tx3)}
.vhub-suites-empty-hint b{color:var(--tx1);font-weight:600}
.vhub-suites-list{display:flex;flex-direction:column;gap:8px}
.vhub-pkg-row{display:flex;align-items:flex-start;justify-content:space-between;
gap:12px;padding:12px 14px;background:var(--sur2);border:1px solid var(--bdr);
border-radius:7px;transition:border-color .15s var(--ease)}
.vhub-pkg-row:hover{border-color:var(--bdr2)}
.vhub-suite-r-l{flex:1;min-width:0}
.vhub-suite-r-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.vhub-suite-name{font-family:'Inter',sans-serif;font-weight:700;font-size:15px;
color:var(--tx);line-height:1.2;margin-bottom:3px}
.vhub-suite-meta{font-size:11px;color:var(--tx2);line-height:1.4}
.vhub-suite-meta code{font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
font-size:10.5px;background:var(--sur);padding:1px 5px;border-radius:3px;
color:var(--tx1);border:1px solid var(--bdr)}
.vhub-suite-err{font-size:11px;color:#b91c1c;background:rgba(220,38,38,.06);
border-left:2px solid #dc2626;padding:5px 8px;margin-top:6px;border-radius:3px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vhub-suite-badge{display:inline-block;padding:3px 9px;border-radius:11px;
font-size:10.5px;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.vhub-suite-badge.ok{background:rgba(16,185,129,.1);color:#047857;border:1px solid rgba(16,185,129,.25)}
.vhub-suite-badge.err{background:rgba(220,38,38,.1);color:#b91c1c;border:1px solid rgba(220,38,38,.25)}
.vhub-suite-badge.off{background:var(--sur);color:var(--tx3);border:1px solid var(--bdr2)}
.vhub-suite-badge.pending{background:rgba(245,158,11,.1);color:#b45309;border:1px solid rgba(245,158,11,.25)}
.vhub-suite-btn-uninstall{font-size:11px;padding:5px 10px}
.vhub-suite-btn-uninstall:hover{background:rgba(220,38,38,.08);border-color:#dc2626;color:#dc2626}
/* Sub-modal confirmar desinstalación */
.vhub-wiz-modal-sm{max-width:440px}
.vhub-wiz-uninstall-confirm{padding:6px 0;display:flex;flex-direction:column;gap:14px}
.vhub-wiz-warning-ico{font-size:36px;text-align:center;color:#b45309;line-height:1}
.vhub-wiz-warning-title{font-family:'Inter',sans-serif;font-weight:600;
font-size:16px;color:var(--tx);text-align:center;line-height:1.3}
.vhub-wiz-warning-title b{font-weight:800;color:var(--tx)}
.vhub-wiz-warning-body{font-size:12.5px;color:var(--tx1);line-height:1.5;
background:var(--sur2);padding:10px 12px;border-radius:5px;border:1px solid var(--bdr)}
.vhub-wiz-warning-body code{font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
font-size:11px;background:var(--sur);padding:1px 5px;border-radius:3px;
color:var(--tx1);border:1px solid var(--bdr)}
.vhub-wiz-toggle{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;
background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.18);
border-radius:5px;cursor:pointer;font-size:12px;color:var(--tx1);line-height:1.5}
.vhub-wiz-toggle input[type=checkbox]{margin:2px 0 0 0;cursor:pointer;flex-shrink:0}
.vhub-wiz-toggle b{font-weight:700;color:var(--tx)}
.vhub-wiz-toggle .vhub-wiz-dim{display:block;font-size:11px;margin-top:3px}
.vhub-wiz-install-title{font-family:'Inter',sans-serif;font-weight:700;font-size:15px;
color:var(--tx);margin-top:14px}
.vhub-wiz-install-sub{font-size:11.5px;color:var(--tx2);margin-top:5px;text-align:center}
.vhub-suites-count{display:inline-block;margin-left:8px;padding:2px 8px;background:var(--sur);
border:1px solid var(--bdr);border-radius:9px;font-size:11px;color:var(--tx2);font-weight:600;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;vertical-align:middle}
.vhub-suites-foot{justify-content:space-between !important;border-top:1px solid var(--bdr) !important}
/* ──── v45m · Vista dedicada Suites (#vector/hub-suites) ──── */
.vhsl-wrap{padding:18px 24px;max-width:1600px;margin:0 auto}
.vhsl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--bdr)}
.vhsl-head-l{display:flex;align-items:flex-start;gap:14px}
.vhsl-back{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--bdr2);
border-radius:5px;color:var(--tx2);text-decoration:none;font-size:12px;font-weight:600;
background:var(--sur2);transition:all .15s var(--ease);margin-top:4px}
.vhsl-back:hover{border-color:var(--mag);color:var(--mag);background:var(--sur)}
.vhsl-title{font-family:'Inter',sans-serif;font-weight:700;font-size:22px;color:var(--tx);
line-height:1.2}
.vhsl-sub{font-size:12px;color:var(--tx2);margin-top:3px}
.vhsl-head-r{display:flex;align-items:center;gap:8px;flex-shrink:0}
.vhsl-search{padding:6px 12px;border:1px solid var(--bdr2);border-radius:5px;background:var(--sur);
color:var(--tx);font-size:13px;width:280px;transition:border-color .15s var(--ease)}
.vhsl-search:focus{outline:none;border-color:var(--mag)}
.vhsl-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border:1px solid var(--bdr2);
border-radius:5px;background:var(--sur);color:var(--tx1);font-size:12px;font-weight:600;
cursor:pointer;transition:all .15s var(--ease)}
.vhsl-btn:hover{border-color:var(--mag);color:var(--mag)}
.vhsl-btn span{font-size:13px}
.vhsl-filters{display:flex;align-items:center;justify-content:space-between;gap:16px;
margin-bottom:14px;flex-wrap:wrap}
.vhsl-fchip-grp{display:flex;gap:6px;flex-wrap:wrap}
.vhsl-fchip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--bdr);
background:var(--sur2);color:var(--tx2);border-radius:4px;font-size:12px;font-weight:600;
cursor:pointer;transition:all .15s var(--ease)}
.vhsl-fchip:hover{border-color:var(--bdr2);color:var(--tx1)}
.vhsl-fchip.active{background:var(--mag);color:#fff;border-color:var(--mag)}
.vhsl-fchip-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--bdr2)}
.vhsl-fchip-dot.ok{background:#10b981}
.vhsl-fchip-dot.err{background:#dc2626}
.vhsl-fchip-dot.off{background:var(--tx3)}
.vhsl-fchip.active .vhsl-fchip-dot{background:#fff}
.vhsl-fchip-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;
padding:0 5px;background:rgba(0,0,0,.08);border-radius:8px;font-size:10px;font-weight:700;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vhsl-fchip.active .vhsl-fchip-n{background:rgba(255,255,255,.25)}
.vhsl-fsort{font-size:12px;color:var(--tx2);display:flex;align-items:center;gap:6px}
.vhsl-fselect{padding:4px 8px;border:1px solid var(--bdr2);border-radius:4px;background:var(--sur);
color:var(--tx);font-size:12px;cursor:pointer}
.vhsl-body{background:var(--sur);border:1px solid var(--bdr);border-radius:7px;overflow:hidden}
.vhsl-loading{padding:30px;text-align:center;color:var(--tx3);font-size:12px}
.vhsl-empty{padding:40px 24px;text-align:center;display:flex;flex-direction:column;gap:8px;
align-items:center}
.vhsl-empty-ico{font-size:36px;color:var(--tx3);line-height:1}
.vhsl-empty-msg{font-size:13px;color:var(--tx2)}
.vhsl-empty-msg b{color:var(--tx);font-weight:700}
.vhsl-empty.err{color:#b91c1c}
.vhsl-table{width:100%;border-collapse:collapse;font-size:12.5px}
.vhsl-table thead{background:var(--sur2)}
.vhsl-table th{text-align:left;padding:9px 14px;font-size:10px;font-weight:700;letter-spacing:.4px;
text-transform:uppercase;color:var(--tx2);border-bottom:1px solid var(--bdr)}
.vhsl-table th.num,.vhsl-table td.num{text-align:right;font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.vhsl-table th.acts,.vhsl-table td.acts{text-align:right;white-space:nowrap}
.vhsl-table tbody tr{border-bottom:1px solid var(--bdr);cursor:pointer;transition:background .12s var(--ease)}
.vhsl-table tbody tr:hover{background:var(--sur2)}
.vhsl-table tbody tr.sel{background:rgba(212,32,112,.05);border-left:3px solid var(--mag)}
.vhsl-table tbody tr:last-child{border-bottom:0}
.vhsl-table td{padding:11px 14px;vertical-align:middle;color:var(--tx1)}
.vhsl-cell-suite{min-width:200px}
.vhsl-cell-name{font-weight:600;color:var(--tx);margin-bottom:2px}
.vhsl-cell-id{font-family:'JetBrains Mono','SF Mono',Consolas,monospace;font-size:10.5px;color:var(--tx2);
background:var(--sur2);padding:1px 5px;border-radius:3px;border:1px solid var(--bdr)}
.vhsl-ver{font-family:'JetBrains Mono','SF Mono',Consolas,monospace;font-size:11px;color:var(--tx2);
background:var(--sur2);padding:2px 7px;border-radius:3px}
.vhsl-cell-date{color:var(--tx2);font-size:11.5px;white-space:nowrap}
.vhsl-modchip{display:inline-block;font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
font-size:10.5px;color:var(--tx2);background:var(--sur2);padding:1px 6px;border-radius:3px;
border:1px solid var(--bdr);margin-right:3px}
.vhsl-modmore{font-size:10.5px;color:var(--tx3);font-weight:600}
.vhsl-dim{color:var(--tx3);font-size:11px}
.vhsl-badge{display:inline-block;padding:3px 9px;border-radius:11px;font-size:10.5px;
font-weight:700;letter-spacing:.3px;white-space:nowrap}
.vhsl-badge.ok{background:rgba(16,185,129,.1);color:#047857;border:1px solid rgba(16,185,129,.25)}
.vhsl-badge.err{background:rgba(220,38,38,.1);color:#b91c1c;border:1px solid rgba(220,38,38,.25)}
.vhsl-badge.off{background:var(--sur2);color:var(--tx3);border:1px solid var(--bdr2)}
.vhsl-badge.pending{background:rgba(245,158,11,.1);color:#b45309;border:1px solid rgba(245,158,11,.25)}
.vhsl-act{padding:4px 9px;border:1px solid var(--bdr2);border-radius:4px;background:var(--sur);
color:var(--tx1);font-size:11px;font-weight:600;cursor:pointer;margin-left:5px;
transition:all .12s var(--ease)}
.vhsl-act:hover{border-color:var(--tx2);color:var(--tx)}
.vhsl-act-unin:hover{border-color:#dc2626;color:#dc2626;background:rgba(220,38,38,.05)}
.vhsl-detail{margin-top:18px;background:var(--sur);border:1px solid var(--bdr);border-radius:7px;
overflow:hidden}
.vhsl-d-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;
background:var(--sur2);border-bottom:1px solid var(--bdr)}
.vhsl-d-title{font-family:'Inter',sans-serif;font-weight:700;font-size:18px;color:var(--tx);line-height:1.2}
.vhsl-d-meta{font-size:11.5px;color:var(--tx2);margin-top:3px}
.vhsl-d-meta code{font-family:'JetBrains Mono','SF Mono',Consolas,monospace;font-size:10.5px;
background:var(--sur);padding:1px 5px;border-radius:3px;border:1px solid var(--bdr);color:var(--tx1)}
.vhsl-d-close{background:transparent;border:0;font-size:18px;color:var(--tx3);cursor:pointer;
padding:4px 8px;border-radius:4px}
.vhsl-d-close:hover{color:var(--tx);background:var(--sur)}
.vhsl-d-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;padding:14px 18px}
.vhsl-d-card{background:var(--sur2);border:1px solid var(--bdr);border-radius:5px;padding:11px 13px;
margin:0 18px 12px 18px}
.vhsl-d-grid > .vhsl-d-card{margin:0}
.vhsl-d-sec{font-size:10px;font-weight:700;color:var(--tx2);letter-spacing:.4px;text-transform:uppercase;
margin-bottom:7px;padding-bottom:5px;border-bottom:1px solid var(--bdr)}
.vhsl-d-mods{display:flex;flex-wrap:wrap;gap:4px}
.vhsl-d-list{margin:0;padding:0;list-style:none;font-size:11.5px;color:var(--tx1)}
.vhsl-d-list li{padding:3px 0;line-height:1.5}
.vhsl-d-list code{font-family:'JetBrains Mono','SF Mono',Consolas,monospace;font-size:10.5px;
background:var(--sur);padding:1px 4px;border-radius:3px;color:var(--tx1);border:1px solid var(--bdr)}
.vhsl-d-log{max-height:220px;overflow-y:auto;font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
font-size:11px;background:var(--sur);border:1px solid var(--bdr);border-radius:4px;padding:8px 11px}
.vhsl-d-log-line{padding:2px 0;color:var(--tx1)}
.vhsl-d-log-line.ok{color:#047857}
.vhsl-d-log-line.err{color:#b91c1c}
.vhsl-d-log-line b{color:var(--tx);font-weight:600}
.vhsl-d-err{margin:8px 18px 14px;padding:8px 11px;background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.2);
border-left:3px solid #dc2626;border-radius:3px;font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
font-size:11px;color:#b91c1c}
.vhsl-d-err b{color:#7f1d1d}
@media (max-width:768px){
.vhsl-wrap{padding:12px}
.vhsl-head{flex-direction:column;gap:12px}
.vhsl-head-r{width:100%;flex-wrap:wrap}
.vhsl-search{flex:1;min-width:140px;width:auto}
.vhsl-filters{flex-direction:column;align-items:stretch;gap:10px}
.vhsl-table th:nth-child(3),.vhsl-table td:nth-child(3),
.vhsl-table th:nth-child(4),.vhsl-table td:nth-child(4){display:none}
.vhsl-d-grid{grid-template-columns:1fr;padding:10px 12px}
.vhsl-d-card{margin:0 12px 10px 12px}
}
/* ════════════════════════════════════════════════════════════════════════
v45m · SOSAH plantillas pre-armadas (wizard)
Modal estilo enterprise: lista a la izquierda, preview a la derecha.
════════════════════════════════════════════════════════════════════════ */
/* z-index 400 (era 200): estos overlays (🔀 Reglas condicionadas y el selector
de plantillas) se abren DESDE el modal de la encuesta, que es .mov con
z-index:300. Con 200 quedaban dibujados por debajo: el usuario hacía click
en 🔀, el panel se abría y quedaba tapado, se leía como "el botón no hace
nada" (reportado por Darío 2026-07-24, y explica los tanteos de Dany en la
cola KINETIA #901/#902). Los confirms inline usan 10001+ y siguen por
encima de esto. */
.spl-ov{position:fixed;inset:0;background:rgba(24,18,14,.55);z-index:400;
display:flex;align-items:center;justify-content:center;padding:20px;
animation:spl-fade .15s var(--ease)}
@keyframes spl-fade{from{opacity:0}to{opacity:1}}
.spl-modal{background:var(--sur);border-radius:10px;box-shadow:var(--sh-lg);
width:min(960px,100%);max-height:92vh;display:flex;flex-direction:column;
overflow:hidden;animation:spl-slide .2s var(--ease)}
@keyframes spl-slide{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.spl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
padding:16px 20px 14px;border-bottom:1px solid var(--bdr)}
.spl-h-title{font-family:'Inter',sans-serif;font-weight:700;font-size:18px;
color:var(--tx);line-height:1.1;letter-spacing:-.2px}
.spl-h-sub{font-size:11px;color:var(--tx3);margin-top:4px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;letter-spacing:.2px}
.spl-close{background:transparent;border:0;font-size:18px;color:var(--tx3);
cursor:pointer;padding:4px 8px;border-radius:4px;line-height:1;
transition:color .15s var(--ease),background .15s var(--ease)}
.spl-close:hover{color:var(--tx);background:var(--sur2)}
.spl-body{display:grid;grid-template-columns:260px 1fr;gap:0;
flex:1;overflow:hidden}
/* Lista de plantillas (izquierda) */
.spl-list{background:var(--sur2);border-right:1px solid var(--bdr);
padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.spl-item{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;
background:var(--sur);border:1px solid var(--bdr);border-radius:6px;
cursor:pointer;text-align:left;transition:all .15s var(--ease)}
.spl-item:hover{border-color:var(--bdr2)}
.spl-item.active{border-color:var(--mag);background:rgba(212,32,112,.04);
box-shadow:var(--sh-sm)}
.spl-item-ico{width:32px;height:32px;border-radius:5px;display:flex;
align-items:center;justify-content:center;font-size:16px;font-weight:700;
flex-shrink:0;line-height:1}
.spl-item-body{flex:1;min-width:0}
.spl-item-name{font-size:12px;font-weight:700;color:var(--tx);line-height:1.2;
letter-spacing:-.1px}
.spl-item-tag{font-size:9.5px;color:var(--tx3);margin-top:2px;
text-transform:uppercase;letter-spacing:.5px;font-weight:600;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.spl-item-meta{font-size:10px;color:var(--tx2);margin-top:4px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
/* Preview (derecha) */
.spl-preview{padding:18px 22px;overflow-y:auto}
.spl-p-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.spl-p-icowrap{width:40px;height:40px;border-radius:6px;display:flex;
align-items:center;justify-content:center;font-size:20px;font-weight:700;
flex-shrink:0;line-height:1}
.spl-p-name{font-family:'Inter',sans-serif;font-weight:700;font-size:18px;
color:var(--tx);line-height:1.1;letter-spacing:-.2px}
.spl-p-tag{font-size:10.5px;color:var(--tx3);margin-top:3px;
text-transform:uppercase;letter-spacing:.5px;font-weight:600;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.spl-p-desc{font-size:12px;color:var(--tx2);line-height:1.5;
padding:11px 13px;background:var(--sur2);border-radius:6px;border:1px solid var(--bdr);
margin-bottom:14px}
.spl-p-sec-title{font-size:10px;font-weight:700;color:var(--tx2);
text-transform:uppercase;letter-spacing:.7px;margin:14px 0 8px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.spl-questions{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.spl-q{padding:9px 11px;background:var(--sur);border:1px solid var(--bdr);
border-radius:5px}
.spl-q-head{display:flex;align-items:flex-start;gap:8px}
.spl-q-num{display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;border-radius:3px;background:var(--sur2);
color:var(--tx2);font-size:10px;font-weight:700;flex-shrink:0;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.spl-q-text{font-size:12px;color:var(--tx);font-weight:500;line-height:1.4;flex:1}
.spl-q-req{color:#dc2626;font-weight:700}
.spl-q-tipo{font-size:9.5px;color:var(--tx3);margin-top:5px;margin-left:26px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;letter-spacing:.2px}
.spl-q-tipo code{background:var(--sur2);padding:1px 5px;border-radius:2px;
font-family:inherit;font-size:9px;color:var(--tx2);border:1px solid var(--bdr)}
.spl-q-opts{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;margin-left:26px}
.spl-q-opt{font-size:10px;padding:2px 7px;background:var(--sur2);
border:1px solid var(--bdr);border-radius:3px;color:var(--tx1);
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
/* Form de nombre/codigo */
.spl-form{margin-top:16px;padding-top:14px;border-top:1px solid var(--bdr);
display:flex;flex-direction:column;gap:11px}
.spl-form-row{display:flex;flex-direction:column;gap:5px}
.spl-form-lbl{font-size:10px;font-weight:700;color:var(--tx2);
text-transform:uppercase;letter-spacing:.5px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.spl-input{padding:7px 10px;border:1px solid var(--bdr2);border-radius:4px;
background:var(--bg);color:var(--tx);font-size:12px;font-family:inherit;
transition:border-color .15s var(--ease)}
.spl-input:focus{outline:none;border-color:var(--mag)}
.spl-input.mono{font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
font-size:11px;letter-spacing:.4px;text-transform:uppercase}
.spl-error{margin-top:10px;padding:8px 11px;background:rgba(220,38,38,.08);
border:1px solid rgba(220,38,38,.25);border-radius:4px;
font-size:11px;color:#b91c1c;display:none;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.spl-error.show{display:block}
.spl-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;
padding:12px 20px;border-top:1px solid var(--bdr);background:var(--sur2)}
.spl-btn{padding:7px 14px;border:1px solid var(--bdr2);border-radius:4px;
background:var(--sur);color:var(--tx1);font-size:12px;font-weight:600;cursor:pointer;
transition:all .15s var(--ease)}
.spl-btn:hover{border-color:var(--tx2);color:var(--tx)}
.spl-btn.pri{background:var(--mag);color:#fff;border-color:var(--mag)}
.spl-btn.pri:hover{background:#b51961;border-color:#b51961;color:#fff}
.spl-btn:disabled{opacity:.55;cursor:not-allowed}
@media (max-width:780px){
.spl-body{grid-template-columns:1fr}
.spl-list{flex-direction:row;overflow-x:auto;border-right:0;
border-bottom:1px solid var(--bdr);max-height:120px}
.spl-item{min-width:200px;flex-shrink:0}
}
/* ════════════════════════════════════════════════════════════════════════
v45m · SOSAH reglas condicionadas (skip logic editor)
════════════════════════════════════════════════════════════════════════ */
.srl-body{padding:16px 20px;display:flex;flex-direction:column;gap:14px;
overflow-y:auto;flex:1}
.srl-info{font-size:11px;color:var(--tx2);background:var(--sur2);
padding:9px 12px;border-radius:5px;border:1px solid var(--bdr);
line-height:1.5}
.srl-empty{color:var(--tx3);font-size:12px;font-style:italic;padding:14px;text-align:center;
border:1px dashed var(--bdr2);border-radius:5px}
.srl-list{display:flex;flex-direction:column;gap:6px}
.srl-row{display:grid;grid-template-columns:30px 1fr auto auto;gap:10px;
align-items:center;padding:9px 12px;background:var(--sur);
border:1px solid var(--bdr);border-radius:5px}
.srl-row:hover{border-color:var(--bdr2)}
.srl-row-num{display:flex;align-items:center;justify-content:center;
width:24px;height:24px;border-radius:4px;background:var(--sur2);
color:var(--tx2);font-size:11px;font-weight:700;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.srl-row-body{font-size:11.5px;min-width:0}
.srl-row-cond{color:var(--tx1);line-height:1.4}
.srl-row-cond code{background:var(--sur2);padding:1px 5px;border-radius:2px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;font-size:10.5px;
color:var(--mag);border:1px solid var(--bdr)}
.srl-row-acc{color:var(--tx2);font-size:10.5px;margin-top:3px;letter-spacing:.2px}
.srl-row-actions{display:flex;gap:4px}
.srl-mini{padding:3px 7px;border:1px solid var(--bdr2);border-radius:3px;
background:var(--sur);color:var(--tx2);font-size:10px;cursor:pointer;
transition:all .15s var(--ease)}
.srl-mini:hover{border-color:var(--tx2);color:var(--tx)}
.srl-mini.danger:hover{border-color:#dc2626;color:#dc2626}
.srl-row-active{display:inline-flex;align-items:center;gap:5px;
font-size:9.5px;color:var(--tx3);
font-family:'JetBrains Mono','SF Mono',Consolas,monospace;letter-spacing:.3px}
.srl-row-active-dot{width:6px;height:6px;border-radius:50%}
.srl-row-active-dot.on{background:#10b981}
.srl-row-active-dot.off{background:var(--tx3)}
.srl-form-wrap{margin-top:6px;padding:14px;background:var(--sur2);
border-radius:6px;border:1px solid var(--bdr)}
.srl-form-title{font-size:10.5px;font-weight:700;color:var(--tx2);
text-transform:uppercase;letter-spacing:.6px;margin-bottom:11px;
font-family:'JetBrains Mono','SF Mono',Consolas,monospace}
.srl-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.srl-form-row{display:flex;flex-direction:column;gap:4px}
.srl-form-actions{display:flex;align-items:center;justify-content:flex-end;
gap:7px;margin-top:11px;padding-top:11px;border-top:1px solid var(--bdr)}
@media (max-width:540px){
.srl-form-grid{grid-template-columns:1fr}
}
/* v45w · SOSAH visibilidad condicional (metadata.visible_si/requerida_si),
sección dentro del mismo modal de reglas condicionadas (.srl-form-wrap). */
.svc-block{padding:2px 0}
.svc-block+.svc-block{margin-top:10px;padding-top:14px;border-top:1px solid var(--bdr)}
.svc-block-head{display:flex;align-items:center;gap:10px}
.svc-hint{font-size:10px;color:var(--tx3);margin-top:5px}
/* ── B2 big-bang: Tagline MAGNITUD × DIRECCIÓN ───────────────────── */
.vxe-tagline{
font-family:'Inter','JetBrains Mono',monospace;
font-size:9px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
color:var(--vx-text-subtle,var(--tx3));
padding:6px 14px 4px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
opacity:.7;
transition:opacity .2s;
}
.vxe-tagline:hover{ opacity:1; }
.vxe-tagline__op{
color:var(--vx-brand-accent,var(--ora));
font-weight:800;
}
/* En sidebar colapsado: ocultar tagline */
.nav-collapsed .vxe-tagline{ display:none; }
/* ════════════════════════════════════════════════════════════════════════════
▼▼▼ BEGIN SHELL V2 · Fase A (aditivo, sin uso hasta Fase B con ?shell=v2)
════════════════════════════════════════════════════════════════════════════
Origen: material/design/portal_v2/shell_v2/css/{tokens,shell,sidebar,subnav_panel,topbar}.css
Migración: handoff spec material/design/REDESIGN_migracion_shell.md
Coexiste con legacy. Clases .shell, .sidebar, .topbar, .subnav-* son disjuntas (verificado pre-grep).
button/a globales del shell se scopean a .shell para no romper botones legacy VECTOR.
════════════════════════════════════════════════════════════════════════════ */
/* ── Tokens shell v2 (extiende :root legacy) ───────────────────────────────── */
:root {
/* Brand petróleo */
--teal-50: #EAF2F4;
--teal-100: #CCDDE2;
--teal-200: #9CBFC9;
--teal-400: #3D8595;
--teal-500: #1B6577;
--teal-600: #0E3F4D;
--teal-700: #0A2F3A;
--teal-800: #061F26;
/* Acento ámbar */
--amber-50: #FAEFD9;
--amber-100: #F5DBA8;
--amber-400: #D5901E;
--amber-500: #C77700;
--amber-600: #A66200;
/* Neutrales sesgo azul-petróleo */
--n-0: #FFFFFF;
--n-50: #F6F7F9;
--n-100: #EBEDF1;
--n-200: #DDE1E7;
--n-300: #C5CCD5;
--n-400: #A4ADB9;
--n-500: #8A99AA;
--n-600: #637588;
--n-700: #4A5A6E;
--n-800: #3A4A5A;
--n-900: #0F1E2D;
/* Semánticos estado */
--success-500: #0F7B5C;
--success-50: #E6F3EE;
--danger-500: #A1294A;
--danger-50: #F7E1E8;
--warning-500: #A05A00;
--warning-50: #FAEED9;
/* Aliases shell */
--brand: var(--teal-600);
--brand-hover: var(--teal-500);
--brand-soft: var(--teal-50);
--accent: var(--amber-500);
--accent-soft: var(--amber-50);
--bg-page: var(--n-50);
--bg-surface: var(--n-0);
--bg-subtle: var(--n-100);
--bg-hover: rgba(14, 63, 77, 0.04);
--text-strong: var(--n-900);
--text: var(--n-800);
--text-muted: var(--n-600);
--text-subtle: var(--n-500);
--text-on-brand:var(--n-0);
--border: var(--n-200);
--border-soft: var(--n-100);
/* Sombras */
--sh-sm: 0 1px 2px rgba(14, 30, 45, 0.05);
--sh-md: 0 2px 8px rgba(14, 30, 45, 0.08);
--sh-lg: 0 6px 32px rgba(14, 30, 45, 0.10);
--sh-xl: 0 12px 48px rgba(14, 30, 45, 0.14);
/* Radii */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 18px;
--r-pill: 999px;
/* Motion */
--ease-std: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--dur-fast: 80ms;
--dur-base: 150ms;
--dur-slow: 210ms;
/* Layout shell */
--sidebar-icon: 52px;
--sidebar-full: 220px;
--topbar-h: 64px;
--subnav-w: 268px;
/* Topbar dark v3 */
--topbar-bg: linear-gradient(165deg, #061F26 0%, #0A2F3A 55%, #0E3F4D 100%);
--topbar-fg: #FFFFFF;
--topbar-fg-dim: rgba(255, 255, 255, 0.72);
--topbar-fg-mute: rgba(255, 255, 255, 0.55);
--topbar-surface: rgba(255, 255, 255, 0.08);
--topbar-surface-hover:rgba(255, 255, 255, 0.14);
--topbar-border: rgba(255, 255, 255, 0.16);
--topbar-border-strong:rgba(255, 255, 255, 0.24);
--topbar-accent: var(--amber-400, #D5901E);
/* Tipografía (system stack fallback) */
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* ── Reset scopeado al shell (NO global para no romper botones legacy) ─────── */
.shell button {
font-family: inherit;
border: 0;
background: transparent;
cursor: pointer;
color: inherit;
font-size: inherit;
padding: 0;
}
.shell a { color: inherit; text-decoration: none; }
/* ── Shell container ── */
.shell {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
background: var(--bg-page);
}
.shell-body {
position: relative;
flex: 1;
min-height: 0;
display: flex;
}
.shell-main {
flex: 1;
min-width: 0;
overflow-y: auto;
padding: 24px 32px;
margin-left: var(--sidebar-icon);
transition: margin-left var(--dur-slow) var(--ease-std);
}
/* ═══ Container estándar (fix DISEÑO 2026-07-18, pedido Darío) ═══
Antes .shell-main no tenía max-width → módulos que centran su propio
wrapper con margin:0 auto (.ad-view, brand_ad.css) lo hacían relativo a
un ancho gigante en pantallas anchas (1800px+), generando "aire muerto"
de 250-350px a cada lado, reportado en #sosms/direccion. El cap se pone
ACÁ (fuente única), no en cada módulo: cualquier wrapper que ya centra
su propio contenido hereda automáticamente un gutter razonable sin tocar
su CSS ni su JS.
Escape hatch, pantallas que sí necesitan el ancho completo:
- Mapas Leaflet (6 módulos: sosms/sodms/sohrms/sosah/vector-core/mapa.js)
- El layout de mapa+panel de SOSMS (.sosms-mapa-layout)
- Tablas server-side paginadas (.vt-wrap, patrón replicado en 10 pantallas)
- Opt-out manual: clase .shell-fullbleed en el root del contenido. */
.shell-main {
max-width: 1440px;
}
.shell-main:has(.leaflet-container),
.shell-main:has(.sosms-mapa-layout),
.shell-main:has(.vt-wrap),
.shell-main.shell-fullbleed {
max-width: none;
}
.shell-main-inner {
max-width: 1280px;
margin: 0 auto;
}
.shell-brand-strip {
height: 3px;
flex-shrink: 0;
background: linear-gradient(90deg, var(--teal-600), var(--amber-500) 60%, var(--teal-700));
}
.shell-overlay {
position: absolute;
inset: 0;
left: calc(var(--sidebar-icon) + var(--subnav-w));
z-index: 20;
background: transparent;
display: none;
}
.shell-overlay.active { display: block; }
.shell-mobile-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 30, 45, 0.45);
backdrop-filter: blur(2px);
z-index: 40;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) ease;
}
.shell-mobile-backdrop.active {
opacity: 1;
pointer-events: auto;
}
@media (max-width: 767px) {
.shell-main {
margin-left: 0;
padding: 16px;
}
.shell-overlay { display: none !important; }
}
/* Demo placeholder (heredado del sandbox · Fase D los borrará si no usan) */
.demo-page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-soft);
margin-bottom: 24px;
}
.demo-page-title {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
color: var(--text-strong);
margin: 0;
letter-spacing: -0.4px;
}
.demo-page-subtitle {
font-size: 13px;
color: var(--text-muted);
margin-top: 4px;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.demo-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 18px;
box-shadow: var(--sh-sm);
transition: box-shadow var(--dur-base) ease, transform var(--dur-base) ease;
}
.demo-card:hover {
box-shadow: var(--sh-md);
transform: translateY(-1px);
}
.demo-card-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-subtle);
font-weight: 600;
margin: 0 0 8px;
}
.demo-card-value {
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
color: var(--text-strong);
margin: 0;
letter-spacing: -0.5px;
}
.demo-card-delta {
font-size: 12px;
color: var(--success-500);
margin-top: 4px;
}
.demo-section { margin-top: 32px; }
.demo-section-title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
color: var(--text-strong);
margin: 0 0 12px;
}
.demo-route-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: var(--r-pill);
background: var(--brand-soft);
color: var(--brand);
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 11px;
font-weight: 600;
}
/* ════════════════════════════════════════════════════════════════════════════
SIDEBAR (52px colapsado, 220px expanded overlay)
════════════════════════════════════════════════════════════════════════════ */
.sidebar {
position: absolute;
top: 0; left: 0; bottom: 0;
width: var(--sidebar-icon);
background: var(--bg-surface);
border-right: 1px solid var(--border);
z-index: 32;
display: flex;
flex-direction: column;
overflow: hidden;
transition: width var(--dur-slow) var(--ease-std),
box-shadow var(--dur-slow) var(--ease-std);
}
.sidebar.expanded {
width: var(--sidebar-full);
box-shadow: var(--sh-lg);
}
.sidebar-brand {
height: var(--topbar-h);
border-bottom: 1px solid var(--border-soft);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0;
gap: 10px;
overflow: hidden;
}
.sidebar.expanded .sidebar-brand {
padding: 0 14px;
justify-content: flex-start;
}
.sidebar-brand-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: linear-gradient(135deg, var(--teal-600), var(--teal-500));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--n-0);
font-family: var(--font-display);
font-weight: 800;
font-size: 15px;
letter-spacing: -0.5px;
box-shadow: 0 2px 6px rgba(14, 63, 77, 0.25);
}
.sidebar-brand-text {
display: flex;
flex-direction: column;
opacity: 0;
max-width: 0;
overflow: hidden;
white-space: nowrap;
transition: opacity 80ms ease, max-width var(--dur-slow) var(--ease-std);
user-select: none;
pointer-events: none;
}
.sidebar.expanded .sidebar-brand-text {
opacity: 1;
max-width: 160px;
transition: opacity 180ms ease 60ms, max-width var(--dur-slow) var(--ease-std);
}
.sidebar-brand-name {
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
color: var(--text-strong);
letter-spacing: -0.2px;
line-height: 1.15;
}
.sidebar-brand-tag {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-subtle);
line-height: 1.2;
margin-top: 1px;
}
.sidebar-nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 8px 0;
display: flex;
flex-direction: column;
gap: 2px;
scrollbar-width: thin;
scrollbar-color: var(--n-200) transparent;
}
.sidebar.expanded .sidebar-nav { padding: 8px 6px; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--n-200); border-radius: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-item {
width: 100%;
height: 40px;
display: flex;
align-items: center;
gap: 12px;
padding: 0;
justify-content: center;
border-radius: var(--r-md);
background: transparent;
color: var(--text-muted);
position: relative;
transition: background var(--dur-fast) ease,
color var(--dur-fast) ease,
padding var(--dur-slow) var(--ease-std),
justify-content var(--dur-slow) var(--ease-std);
flex-shrink: 0;
}
.sidebar.expanded .sidebar-item {
padding: 0 10px 0 14px;
justify-content: flex-start;
}
.sidebar-item:hover {
background: var(--bg-hover);
color: var(--text);
}
.sidebar-item.active {
background: rgba(14, 63, 77, 0.08);
color: var(--brand);
}
.sidebar-item.active::before {
content: '';
position: absolute;
left: 2px;
top: 22%;
bottom: 22%;
width: 3px;
border-radius: 2px;
background: var(--brand);
}
.sidebar-item.accent.active {
background: rgba(199, 119, 0, 0.08);
color: var(--accent);
}
.sidebar-item.accent.active::before { background: var(--accent); }
.sidebar-item-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
.sidebar-item-label {
font-size: 11.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0;
max-width: 0;
overflow: hidden;
white-space: nowrap;
transition: opacity 80ms ease, max-width var(--dur-slow) var(--ease-std);
flex: 1;
text-align: left;
}
.sidebar.expanded .sidebar-item-label {
opacity: 1;
max-width: 160px;
transition: opacity 130ms ease 50ms, max-width var(--dur-slow) var(--ease-std);
}
.sidebar-item.active .sidebar-item-label { font-weight: 600; }
.sidebar-item-chevron {
opacity: 0;
margin-left: auto;
flex-shrink: 0;
color: var(--text-subtle);
transition: opacity 130ms ease 50ms;
}
.sidebar.expanded .sidebar-item-chevron { opacity: 0.5; }
.sidebar-footer {
flex-shrink: 0;
padding: 8px 0 10px;
border-top: 1px solid var(--border-soft);
display: flex;
flex-direction: column;
gap: 4px;
}
.sidebar.expanded .sidebar-footer { padding: 8px 6px 10px; }
.sidebar-user-pill {
width: 100%;
height: 40px;
display: flex;
align-items: center;
gap: 10px;
padding: 0;
justify-content: center;
border-radius: var(--r-md);
transition: background var(--dur-fast) ease,
padding var(--dur-slow) var(--ease-std),
justify-content var(--dur-slow) var(--ease-std);
}
.sidebar.expanded .sidebar-user-pill {
padding: 0 8px;
justify-content: flex-start;
}
.sidebar-user-pill:hover { background: var(--bg-hover); }
.sidebar-user-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, var(--teal-500), var(--amber-500));
color: var(--n-0);
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(14, 63, 77, 0.20);
}
.sidebar-user-info {
display: flex;
flex-direction: column;
opacity: 0;
max-width: 0;
overflow: hidden;
white-space: nowrap;
text-align: left;
transition: opacity 80ms ease, max-width var(--dur-slow) var(--ease-std);
}
.sidebar.expanded .sidebar-user-info {
opacity: 1;
max-width: 130px;
transition: opacity 180ms ease 60ms, max-width var(--dur-slow) var(--ease-std);
}
.sidebar-user-name {
font-size: 12px;
font-weight: 600;
color: var(--text-strong);
line-height: 1.15;
}
.sidebar-user-role {
font-size: 10px;
color: var(--text-muted);
line-height: 1.2;
}
.sidebar-logout-btn {
width: 100%;
height: 36px;
border-radius: var(--r-md);
color: var(--text-subtle);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.sidebar-logout-btn:hover {
background: rgba(161, 41, 74, 0.08);
color: var(--danger-500);
}
.sidebar.expanded .sidebar-logout-btn {
width: 100%;
gap: 10px;
font-size: 12.5px;
padding: 0 10px;
justify-content: flex-start;
}
.sidebar.expanded .sidebar-logout-btn::after {
content: 'Cerrar sesión';
font-size: 12.5px;
font-weight: 500;
opacity: 1;
transition: opacity 180ms ease 60ms;
}
@media (max-width: 767px) {
.sidebar {
position: fixed;
width: 260px !important;
z-index: 50;
transform: translateX(-260px);
transition: transform var(--dur-slow) var(--ease-std), box-shadow var(--dur-slow) var(--ease-std);
box-shadow: none;
}
.sidebar.mobile-open {
transform: translateX(0);
box-shadow: var(--sh-xl);
}
.sidebar .sidebar-brand-text,
.sidebar .sidebar-item-label,
.sidebar .sidebar-user-info {
opacity: 1;
max-width: 200px;
}
.sidebar .sidebar-item {
padding: 0 14px;
justify-content: flex-start;
}
.sidebar .sidebar-user-pill {
padding: 0 10px;
justify-content: flex-start;
}
.sidebar .sidebar-item-chevron { opacity: 0.5; }
.sidebar-mobile-close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border-radius: var(--r-md);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.sidebar-mobile-close:hover {
background: var(--bg-subtle);
color: var(--text);
}
}
@media (min-width: 768px) {
.sidebar-mobile-close { display: none; }
}
/* ════════════════════════════════════════════════════════════════════════════
SUBNAV PANEL (panel flotante hijos del root)
════════════════════════════════════════════════════════════════════════════ */
.subnav-panel {
position: absolute;
top: 0; bottom: 0;
left: var(--sidebar-icon);
width: var(--subnav-w);
z-index: 31;
background: var(--bg-surface);
border-right: 1px solid var(--border);
box-shadow: 6px 0 32px rgba(14, 30, 45, 0.10);
display: flex;
flex-direction: column;
animation: subnav-slide-in 180ms var(--ease-std);
overflow: hidden;
}
.shell.sidebar-expanded .subnav-panel {
left: var(--sidebar-full);
transition: left var(--dur-slow) var(--ease-std);
}
/* fix "se monta" (2026-07-06, spec_migracion_MONITOREO_AD.md §1): el
.subnav-panel es position:absolute y hasta ahora .shell-main nunca
reservaba su ancho, así que el panel quedaba pintado ENCIMA del
contenido (título/KPIs tapados) al abrirlo. Transversal a TODO el
shell v2, no solo #sosms/mapa, corremos el contenido cuando el
subnav está abierto (clase .subnav-open togglada por js/subnav_panel.js).
Solo en desktop: en mobile el subnav-panel ya es overlay fullscreen
fixed (ver media query 767px más abajo) y .shell-main no debe moverse. */
@media (min-width: 768px) {
.shell.subnav-open .shell-main {
margin-left: calc(var(--sidebar-icon) + var(--subnav-w));
}
.shell.subnav-open.sidebar-expanded .shell-main {
margin-left: calc(var(--sidebar-full) + var(--subnav-w));
}
}
@keyframes subnav-slide-in {
from { transform: translateX(-16px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.subnav-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px 14px;
border-bottom: 1px solid var(--border-soft);
flex-shrink: 0;
}
.subnav-header-icon {
width: 36px;
height: 36px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.subnav-header-text { flex: 1; min-width: 0; }
.subnav-header-label {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: var(--text-strong);
line-height: 1.2;
margin: 0;
}
.subnav-header-desc {
font-size: 11.5px;
color: var(--text-subtle);
margin: 2px 0 0;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.subnav-close {
width: 26px;
height: 26px;
border-radius: var(--r-sm);
color: var(--text-subtle);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.subnav-close:hover {
background: var(--bg-subtle);
color: var(--text);
}
.subnav-body {
flex: 1;
overflow-y: auto;
padding: 10px 10px 6px;
scrollbar-width: thin;
scrollbar-color: var(--n-200) transparent;
}
.subnav-body::-webkit-scrollbar { width: 4px; }
.subnav-body::-webkit-scrollbar-thumb { background: var(--n-200); border-radius: 4px; }
.subnav-section-header {
padding: 14px 8px 8px;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-subtle);
}
.subnav-section-header:first-child { padding-top: 4px; }
.subnav-items-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 0 4px;
}
.subnav-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 12px 10px;
border-radius: var(--r-md);
background: var(--bg-page);
border: 1.5px solid transparent;
text-align: left;
transition: background var(--dur-fast) ease,
border-color var(--dur-fast) ease,
transform var(--dur-fast) ease;
min-height: 76px;
}
.subnav-item:hover {
background: var(--bg-subtle);
border-color: var(--border);
transform: translateY(-1px);
}
.subnav-item.active {
background: rgba(14, 63, 77, 0.06);
border-color: rgba(14, 63, 77, 0.20);
}
.subnav-item.accent.active {
background: rgba(199, 119, 0, 0.06);
border-color: rgba(199, 119, 0, 0.20);
}
.subnav-item-icon {
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--bg-subtle);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.subnav-item.active .subnav-item-icon {
background: rgba(14, 63, 77, 0.12);
color: var(--brand);
}
.subnav-item.accent.active .subnav-item-icon {
background: rgba(199, 119, 0, 0.12);
color: var(--accent);
}
.subnav-item-label {
font-size: 12px;
font-weight: 500;
color: var(--text);
line-height: 1.25;
word-break: break-word;
}
.subnav-item.active .subnav-item-label {
font-weight: 600;
color: var(--brand);
}
.subnav-item.accent.active .subnav-item-label { color: var(--accent); }
.subnav-footer {
flex-shrink: 0;
padding: 12px;
border-top: 1px solid var(--border-soft);
background: var(--bg-page);
}
.subnav-cta {
width: 100%;
padding: 10px 14px;
border-radius: var(--r-md);
background: rgba(14, 63, 77, 0.08);
border: 1.5px solid rgba(14, 63, 77, 0.18);
color: var(--brand);
font-size: 12.5px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.subnav-cta:hover {
background: rgba(14, 63, 77, 0.14);
border-color: rgba(14, 63, 77, 0.32);
}
.subnav-cta.accent {
background: rgba(199, 119, 0, 0.08);
border-color: rgba(199, 119, 0, 0.20);
color: var(--accent);
}
.subnav-cta.accent:hover {
background: rgba(199, 119, 0, 0.14);
border-color: rgba(199, 119, 0, 0.34);
}
.subnav-footer-hint {
font-size: 10px;
color: var(--text-subtle);
text-align: center;
margin: 6px 0 0;
line-height: 1.3;
}
@media (max-width: 767px) {
.subnav-panel {
position: fixed;
inset: var(--topbar-h) 0 0 0;
width: 100%;
z-index: 45;
border-right: 0;
border-top: 1px solid var(--border);
animation: subnav-slide-up 200ms var(--ease-std);
}
.shell.sidebar-expanded .subnav-panel { left: 0; }
@keyframes subnav-slide-up {
from { transform: translateY(16px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.subnav-items-grid { grid-template-columns: 1fr 1fr; }
}
/* ───────────────────────────────────────────────────────────────────
TOPBAR DARK v3 · Shell v2 (portado del look legacy validado)
Petróleo gradient + brand display + chips/acciones light-on-dark
─────────────────────────────────────────────────────────────────── */
.shell .topbar {
height: var(--topbar-h);
background: var(--topbar-bg);
color: var(--topbar-fg);
display: flex;
align-items: center;
padding: 0 14px 0 8px;
gap: 12px;
position: relative;
z-index: 50;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 18px rgba(0, 0, 0, 0.18);
flex-shrink: 0;
}
/* Bloque izquierdo: hamburger + brand + breadcrumbs */
.topbar-left {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.topbar-hamburger {
width: 40px;
height: 40px;
display: none;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
color: var(--topbar-fg);
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.topbar-hamburger:hover {
background: var(--topbar-surface);
border-color: var(--topbar-border);
}
.topbar-brand {
display: flex;
align-items: center;
gap: 12px;
background: transparent;
border: 0;
padding: 4px 10px 4px 6px;
border-radius: 12px;
cursor: pointer;
color: var(--topbar-fg);
transition: background 0.15s;
}
.topbar-brand:hover { background: var(--topbar-surface); }
.topbar-brand-mark {
display: inline-flex;
width: 38px;
height: 38px;
flex-shrink: 0;
}
.topbar-brand-mark svg { width: 100%; height: 100%; display: block; }
.topbar-brand-word {
font-family: 'Inter', system-ui, sans-serif;
font-weight: 700;
font-size: 20px;
letter-spacing: 2.5px;
line-height: 1;
color: #FFFFFF;
}
/* Breadcrumbs como pills oscuras con chevron ámbar */
.topbar-breadcrumbs {
display: flex;
align-items: center;
gap: 6px;
margin-left: 4px;
padding-left: 14px;
border-left: 1px solid var(--topbar-border);
height: 32px;
}
.topbar-breadcrumb-item {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 12px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--topbar-fg-dim);
background: var(--topbar-surface);
border: 1px solid var(--topbar-border);
border-radius: 999px;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.topbar-breadcrumb-item.topbar-breadcrumb-current {
background: var(--topbar-surface-hover);
color: var(--topbar-fg);
border-color: var(--topbar-border-strong);
}
.topbar-breadcrumb-sep {
display: inline-flex;
align-items: center;
color: var(--topbar-accent);
}
/* Bloque centro: search Ctrl+K en dark */
.topbar-center {
flex: 1;
min-width: 0;
}
/* Divisor vertical sutil entre brand y search (fC8) */
.topbar-divider-vert {
width: 1px;
height: 22px;
background: rgba(255, 255, 255, 0.10);
margin: 0 14px 0 10px;
flex-shrink: 0;
}
/* fix w.133 (observación Darío): más aire horizontal, al hover el rectángulo
marcaba lupa y chip ⌘K pegados a las esquinas redondeadas. */
.topbar-search {
width: 300px;
max-width: 300px;
height: 36px;
display: flex;
align-items: center;
gap: 11px;
padding: 0 16px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--topbar-border);
border-radius: 10px;
color: var(--topbar-fg-mute);
cursor: pointer;
font-family: inherit;
font-size: 13px;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* Prefix .shell obligatorio: el reset `.shell button{padding:0}` (0,0,1,1)
le ganaba a .topbar-search (0,0,1,0) y el padding NUNCA aplicó (causa raíz
del "sin aire" que reportó Darío en w.133). */
.shell .topbar-search { padding: 0 16px; }
.topbar-search:hover {
background: rgba(0, 0, 0, 0.35);
border-color: var(--topbar-border-strong);
color: var(--topbar-fg-dim);
}
.topbar-search-icon { display: inline-flex; color: var(--topbar-fg-mute); flex-shrink: 0; }
.topbar-search-text { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-search-kbd {
display: inline-flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
margin-left: 4px;
height: 22px;
padding: 0 7px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--topbar-border);
border-radius: 5px;
font-size: 10.5px;
font-weight: 600;
color: var(--topbar-fg-dim);
}
/* Bloque derecho: chip módulo + db + acciones + user */
.topbar-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.topbar-module-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 12px;
background: var(--topbar-surface);
border: 1px solid var(--topbar-border);
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.4px;
color: var(--topbar-fg);
}
.topbar-module-chip.accent {
background: rgba(213, 144, 30, 0.18);
border-color: rgba(213, 144, 30, 0.45);
color: #FAEFD9;
}
.topbar-module-chip-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--topbar-accent);
box-shadow: 0 0 0 3px rgba(213, 144, 30, 0.22);
}
.topbar-db-status {
display: inline-flex;
align-items: center;
gap: 7px;
height: 28px;
padding: 0 12px;
background: var(--topbar-surface);
border: 1px solid var(--topbar-border);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: var(--topbar-fg-dim);
}
.topbar-db-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #34D399;
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
}
.topbar-action {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
color: var(--topbar-fg-dim);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
position: relative;
}
.topbar-action:hover {
background: var(--topbar-surface);
border-color: var(--topbar-border);
color: var(--topbar-fg);
}
.topbar-action.active { color: var(--topbar-accent); }
.topbar-action-badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 16px;
height: 16px;
background: var(--topbar-accent);
border: 2px solid #0A2F3A;
border-radius: 999px;
color: #1A1303;
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
.topbar-divider {
width: 1px;
height: 24px;
background: var(--topbar-border);
margin: 0 4px;
}
.topbar-user {
display: inline-flex;
align-items: center;
gap: 10px;
height: 44px;
padding: 0 10px 0 4px;
background: transparent;
border: 1px solid transparent;
border-radius: 12px;
color: var(--topbar-fg);
cursor: pointer;
font-family: inherit;
transition: background 0.15s, border-color 0.15s;
}
.topbar-user:hover {
background: var(--topbar-surface);
border-color: var(--topbar-border);
}
.topbar-user-avatar {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--amber-400, #D5901E) 0%, var(--amber-600, #A66200) 100%);
color: #FFFFFF;
font-weight: 700;
font-size: 12.5px;
letter-spacing: 0.5px;
border-radius: 10px;
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(166, 98, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.10);
}
.topbar-user-info { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.topbar-user-name {
font-size: 13px;
font-weight: 600;
color: var(--topbar-fg);
white-space: nowrap;
}
.topbar-user-role {
font-size: 10.5px;
color: var(--topbar-fg-mute);
letter-spacing: 0.2px;
white-space: nowrap;
}
.topbar-user-version {
font-size: 9.5px;
color: var(--amber-400);
letter-spacing: 0.4px;
white-space: nowrap;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-weight: 500;
margin-top: 2px;
opacity: 0.9;
}
/* Responsive, mobile (< 768px) */
@media (max-width: 767px) {
.shell .topbar { padding: 0 10px 0 4px; gap: 8px; }
.topbar-hamburger { display: inline-flex; }
.topbar-brand { padding: 4px 6px; gap: 0; }
.topbar-brand-word { display: none; }
.topbar-brand-mark { width: 32px; height: 32px; }
.topbar-breadcrumbs {
margin-left: 0; padding-left: 8px;
border-left: 1px solid var(--topbar-border);
}
.topbar-breadcrumb-item { padding: 0 8px; font-size: 10.5px; height: 24px; }
.topbar-breadcrumb-item:not(.topbar-breadcrumb-current) { display: none; }
.topbar-center { padding: 0; }
.topbar-divider-vert { display: none; }
.topbar-search-text { display: none; }
.topbar-search, .shell .topbar-search { width: 36px; padding: 0 10px; max-width: none; }
.topbar-search-kbd { display: none; }
.topbar-module-chip { display: none; }
.topbar-db-status { display: none; }
.topbar-divider { display: none; }
.topbar-user-info { display: none; }
.topbar-user { padding: 0 4px; }
}
/* Responsive, tablet pequeño (768-960px) */
@media (min-width: 768px) and (max-width: 960px) {
.topbar-db-status { display: none; }
.topbar-brand-word { font-size: 18px; letter-spacing: 2px; }
}
/* ─── FIX alineación sidebar colapsado (Issue 1 · 24 may 2026, fC23 update) ──
Garantiza que brand-icon, item-icons, user-avatar y logout-icon compartan
el eje X = 26px (centro del sidebar 52px) cuando el sidebar está colapsado.
En estado expandido O drawer mobile-open la regla NO aplica (labels visibles).
──────────────────────────────────────────────────────────────────────── */
/* Ocultar completamente los labels colapsados, max-width:0 dejaba un slot
conceptual en el flex que descentraba los íconos.
fC23: excluir .mobile-open para que el drawer mobile sí muestre labels. */
.sidebar:not(.expanded):not(.mobile-open) .sidebar-brand-text,
.sidebar:not(.expanded):not(.mobile-open) .sidebar-item-label,
.sidebar:not(.expanded):not(.mobile-open) .sidebar-user-info,
.sidebar:not(.expanded):not(.mobile-open) .sidebar-item-chevron {
display: none;
}
.sidebar:not(.expanded):not(.mobile-open) .sidebar-brand {
padding: 0;
justify-content: center;
gap: 0;
}
.sidebar:not(.expanded):not(.mobile-open) .sidebar-nav { padding: 8px 0; }
.sidebar:not(.expanded):not(.mobile-open) .sidebar-footer { padding: 8px 0 10px; }
.sidebar:not(.expanded):not(.mobile-open) .sidebar-item,
.sidebar:not(.expanded):not(.mobile-open) .sidebar-user-pill,
.sidebar:not(.expanded):not(.mobile-open) .sidebar-logout-btn {
width: 100%;
padding: 0;
justify-content: center;
gap: 0;
}
/* La barra magenta lateral del .active debe encogerse para no descentrar */
.sidebar:not(.expanded) .sidebar-item.active::before {
left: 0;
width: 2px;
}
/* ───── Page-header layout shell v2 (fC13 + fC34 estabilización) ─────
Flex-wrap: title-block izquierda, actions derecha (breadcrumb vive como
sibling del .ph, no dentro). fC34: posición FIJA entre vistas, sin "salto"
al navegar. min-height garantiza altura consistente aunque falte .ps o
actions. margin-bottom fijo evita variaciones entre módulos legacy. */
.shell-main .ph {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
align-items: center !important;
gap: 16px;
text-align: left !important;
min-height: 64px;
margin: 0 0 22px 0 !important;
padding: 0 !important;
}
.shell-main .ph > * {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.shell-main .ph > div:first-of-type {
/* Primer div = wrapper title+subtitle (estructura legacy .ph>div>.pt+.ps) */
flex: 1 1 auto;
min-width: 0;
text-align: left;
}
/* fC17: cuando el primer div contiene un .ph-icon (hubs rDominioDashboard),
layout flex con icono al lado del title-block estilo SOPA Image #14. */
.shell-main .ph > div:first-of-type:has(.ph-icon) {
display: flex;
align-items: center;
gap: 14px;
}
.shell-main .ph-icon {
width: 44px;
height: 44px;
border-radius: 11px;
background: rgba(14, 63, 77, 0.07);
color: var(--brand);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.shell-main .ph-icon svg {
width: 22px;
height: 22px;
stroke-width: 1.8;
}
/* fC37: styling pixel-perfect del título y subtítulo en TODAS las vistas.
Anula el margin default del