@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Cormorant+Garamond:ital,wght@0,600;1,600&family=Montserrat:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================================
   TEMA PREMIUM · Consola VCE  (piel del diseño, portada al dashboard)
   ============================================================================ */
/* Fase 2 (02-jul-2026): COMPAT reescrita como superset + KIT integrado al final. · PRODUCCIÓN (02-jul-2026): v2 aprobado tras auditoría estática y visual (17 capturas, 4 temas). Detalle: TRASPASO_v3.md */
:root{
  --r-rst:#6CB0BC;
  --ok:#8FB07A; --warn:#E0A94B; --danger:#DA6A50;
  --font-disp:'Cinzel',serif; --font-ser:'Cormorant Garamond',Georgia,serif;
  --font-ui:'Montserrat',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --mark:#14110A;
}
:root{
 --gold:#C2A04E; --gold-br:#EAD08A; --gold-dp:#8C6B2E;
 --border:color-mix(in srgb,var(--gold) 16%,transparent);
 --border-2:color-mix(in srgb,var(--gold) 32%,transparent);
 --border-3:color-mix(in srgb,var(--gold) 52%,transparent);
 --grid-line:color-mix(in srgb,var(--gold) 6%,transparent);
 --row-hover:color-mix(in srgb,var(--gold) 8%,transparent);
 --chip-bg:color-mix(in srgb,var(--gold) 11%,transparent);
}
:root[data-theme="dark"]{
 --bg:#0A0A08; --bg2:#100E09; --panel:rgba(28,24,15,.60); --panel-2:rgba(38,32,20,.50); --panel-solid:#16130C;
 --ink:#EFE7D8; --ink-dim:#B4AA94; --ink-faint:#7C7361;
 --gold:#C2A04E; --gold-br:#EAD08A; --gold-dp:#8C6B2E;
 --glass-shadow:0 18px 50px -22px rgba(0,0,0,.85);
}
:root[data-theme="cobalt"]{
 --bg:#0A0A0C; --bg2:#0E0E11; --panel:rgba(255,255,255,.042); --panel-2:rgba(255,255,255,.06); --panel-solid:#17171B;
 --ink:#ECECEF; --ink-dim:#A6A6AD; --ink-faint:#6E6E77;
 --gold:#3BB4FF; --gold-br:#86D9FF; --gold-dp:#1E6CAE;
 --border:rgba(255,255,255,.085); --border-2:rgba(255,255,255,.15); --border-3:rgba(255,255,255,.26);
 --grid-line:rgba(255,255,255,.035); --row-hover:rgba(255,255,255,.04); --chip-bg:rgba(255,255,255,.05);
 --glass-shadow:0 20px 54px -24px rgba(0,0,0,.92);
}
:root[data-theme="orchid"]{
 --bg:#0A0A0C; --bg2:#0E0E11; --panel:rgba(255,255,255,.042); --panel-2:rgba(255,255,255,.06); --panel-solid:#17171B;
 --ink:#ECECEF; --ink-dim:#A6A6AD; --ink-faint:#6E6E77;
 --gold:#C56BFF; --gold-br:#E0A6FF; --gold-dp:#7A3CB2;
 --border:rgba(255,255,255,.085); --border-2:rgba(255,255,255,.15); --border-3:rgba(255,255,255,.26);
 --grid-line:rgba(255,255,255,.035); --row-hover:rgba(255,255,255,.04); --chip-bg:rgba(255,255,255,.05);
 --glass-shadow:0 20px 54px -24px rgba(0,0,0,.92);
}
:root[data-theme="emerald"]{
 --bg:#0A0A0C; --bg2:#0E0E11; --panel:rgba(255,255,255,.042); --panel-2:rgba(255,255,255,.06); --panel-solid:#17171B;
 --ink:#ECECEF; --ink-dim:#A6A6AD; --ink-faint:#6E6E77;
 --gold:#2BE0A4; --gold-br:#74FACF; --gold-dp:#149062;
 --border:rgba(255,255,255,.085); --border-2:rgba(255,255,255,.15); --border-3:rgba(255,255,255,.26);
 --grid-line:rgba(255,255,255,.035); --row-hover:rgba(255,255,255,.04); --chip-bg:rgba(255,255,255,.05);
 --glass-shadow:0 20px 54px -24px rgba(0,0,0,.92);
}
.accents{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--border-2);border-radius:11px;background:var(--panel-2)}
.acc{width:22px;height:22px;border-radius:7px;border:1px solid transparent;cursor:pointer;display:grid;place-items:center;background:none;transition:.16s;padding:0}
.acc span{width:13px;height:13px;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.35) inset}
.acc:hover{transform:translateY(-1px)}
.acc.on{border-color:currentColor}
.acc[data-theme="dark"]{color:#C2A04E}.acc[data-theme="dark"] span{background:radial-gradient(circle at 34% 30%,#EAD08A,#C2A04E 72%)}
.acc[data-theme="cobalt"]{color:#3BB4FF}.acc[data-theme="cobalt"] span{background:radial-gradient(circle at 34% 30%,#82D4FF,#3BB4FF 72%)}
.acc[data-theme="orchid"]{color:#C56BFF}.acc[data-theme="orchid"] span{background:radial-gradient(circle at 34% 30%,#E0A6FF,#C56BFF 72%)}
.acc[data-theme="emerald"]{color:#2BE0A4}.acc[data-theme="emerald"] span{background:radial-gradient(circle at 34% 30%,#74FACF,#2BE0A4 72%)}
.acc.on span{box-shadow:0 0 10px currentColor,0 0 0 1px rgba(0,0,0,.35) inset}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:color-mix(in srgb,var(--gold) 30%,transparent);color:var(--ink)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}
a{color:inherit;text-decoration:none}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 78% -8%,color-mix(in srgb,var(--gold) 10%,transparent),transparent 60%),radial-gradient(700px 500px at 8% 108%,color-mix(in srgb,var(--gold) 7%,transparent),transparent 60%)}
.ambient::after{content:"";position:absolute;inset:0;opacity:.6;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 75%)}
.sheen{position:fixed;top:-30%;left:-20%;width:60%;height:160%;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent,color-mix(in srgb,var(--gold-br) 5%,transparent),transparent);transform:skewX(-14deg);animation:sweep 14s linear infinite}
@keyframes sweep{0%{left:-40%}100%{left:130%}}
.app{position:relative;z-index:1;display:grid;grid-template-columns:266px 1fr;min-height:100vh}
.rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--bg2),rgba(0,0,0,.16));border-right:1px solid var(--border);padding:20px 16px;gap:18px}
.brand{display:flex;align-items:center;gap:13px}
.markbox{width:52px;height:52px;flex:0 0 52px;border-radius:13px;background:var(--mark);border:1.5px solid var(--gold);display:grid;place-items:center;padding:6px;box-shadow:0 0 0 1px rgba(0,0,0,.4) inset,0 6px 18px -8px color-mix(in srgb,var(--gold) 50%,transparent)}
.markbox svg{width:100%;height:100%;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text .b1{font-family:var(--font-disp);font-weight:700;font-size:14.5px;letter-spacing:.14em;color:var(--ink)}
.brand-text .b2{font-family:var(--font-ser);font-style:italic;font-size:12.5px;color:var(--gold);letter-spacing:.02em}
.nav{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.nav-sec{font-family:var(--font-ui);font-size:9.5px;letter-spacing:.22em;color:var(--ink-faint);text-transform:uppercase;padding:10px 12px 5px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--ink-dim);text-decoration:none;font-weight:500;font-size:13px;cursor:pointer;position:relative;border:1px solid transparent;transition:.18s ease}
.nav-item svg{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.9}
.nav-item:hover{color:var(--ink);background:var(--chip-bg)}
.nav-item.active{color:var(--gold-br);background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 16%,transparent),transparent);border-color:var(--border-2)}
.nav-item.active::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.nav-item.lock{cursor:default;opacity:.5}
.nav-item.lock:hover{background:transparent;color:var(--ink-dim)}
.nav-item .tag{margin-left:auto;font-family:var(--font-mono);font-size:9px;color:var(--ink-faint);border:1px solid var(--border-2);border-radius:5px;padding:1px 5px}
.rail-foot{margin-top:auto;border-top:1px solid var(--border);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.userchip{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:linear-gradient(135deg,var(--gold-br),var(--gold-dp));display:grid;place-items:center;font-family:var(--font-disp);font-weight:700;color:#1a1407;font-size:13px}
.userchip .u1{font-size:12.5px;font-weight:600;color:var(--ink)}
.userchip .u2{font-size:10.5px;color:var(--ink-faint)}
.netline{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--ink-faint);font-family:var(--font-mono)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.main{display:flex;flex-direction:column;min-width:0;padding:0 26px 30px}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:16px 4px 14px;background:linear-gradient(180deg,var(--bg) 60%,transparent);backdrop-filter:blur(2px)}
.tb-title{display:flex;flex-direction:column;line-height:1.05}
.tb-title h1{font-family:var(--font-disp);font-weight:600;font-size:21px;letter-spacing:.16em;color:var(--ink)}
.tb-title h1 b{color:var(--gold)}
.tb-title span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.28em;color:var(--ink-faint);text-transform:uppercase;margin-top:3px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.clock{font-family:var(--font-mono);font-size:12px;color:var(--ink-dim);text-align:right;line-height:1.25}
.clock .t{font-size:16px;color:var(--gold-br);font-weight:500;letter-spacing:.04em}
.clock .d{font-size:9.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.12em}
.period{font-family:var(--font-ser);font-style:italic;font-size:16px;color:var(--ink);border:1px solid var(--border-2);border-radius:9px;padding:6px 13px;background:var(--chip-bg)}
.period b{font-style:normal;color:var(--gold);font-family:var(--font-ui);font-weight:600;font-size:13px;letter-spacing:.02em}
.ticker{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:11px;background:var(--panel);height:38px;display:flex;align-items:center;margin-bottom:18px}
.ticker .lab{flex:0 0 auto;height:100%;display:flex;align-items:center;gap:7px;padding:0 14px;background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 18%,transparent),color-mix(in srgb,var(--gold) 5%,transparent)),var(--panel-solid);border-right:1px solid var(--border-2);position:relative;z-index:2;font-family:var(--font-disp);font-size:10.5px;letter-spacing:.18em;color:var(--gold-br)}
.ticker .lab .dot{background:var(--gold)}
.tick-track{display:flex;gap:38px;white-space:nowrap;padding-left:28px;animation:ticker 40s linear infinite;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px);mask-image:linear-gradient(90deg,transparent,#000 30px)}
.tick-track:hover{animation-play-state:paused}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tick{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-dim);display:inline-flex;align-items:center;gap:8px}
.tick b{color:var(--gold-br);font-weight:600}
.tick .sep{color:var(--gold);opacity:.5}
.hero{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:linear-gradient(120deg,var(--panel-2),var(--panel));box-shadow:var(--glass-shadow);padding:24px 26px;margin-bottom:20px;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.hero-l{flex:1 1 340px;min-width:280px}
.kicker{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.26em;color:var(--gold);text-transform:uppercase}
.hero h2{font-family:var(--font-ser);font-weight:600;font-size:34px;line-height:1.04;margin:6px 0 4px;color:var(--ink)}
.hero h2 .name{color:var(--gold)}
.hero p{font-size:13px;color:var(--ink-dim);max-width:56ch}
.hero-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hstat{display:flex;align-items:center;gap:8px;border:1px solid var(--border-2);border-radius:9px;padding:7px 12px;background:var(--chip-bg)}
.hstat .hs-dot{width:8px;height:8px;border-radius:50%}
.hstat .hs-t{font-size:12px;color:var(--ink)}
.hstat .hs-t b{font-weight:600}
.hero-r{flex:0 0 250px;min-width:230px}
.closing{border:1px solid var(--border-2);border-radius:13px;background:var(--panel-solid);padding:15px 16px}
.closing .ttl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.closing .ttl span{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase}
.closing .ttl b{font-family:var(--font-ser);font-size:26px;color:var(--gold-br);font-weight:600}
.bar{height:8px;border-radius:8px;background:color-mix(in srgb,var(--gold) 12%,transparent);overflow:hidden;position:relative}
.bar>i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--gold-dp),var(--gold),var(--gold-br));box-shadow:0 0 12px color-mix(in srgb,var(--gold) 60%,transparent);transition:width 1.6s cubic-bezier(.2,.7,.2,1) .3s}
.closing .sub{display:flex;justify-content:space-between;margin-top:9px;font-size:10.5px;color:var(--ink-faint)}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:20px}
.kpi{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--panel);box-shadow:var(--glass-shadow);padding:15px 15px 13px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.kpi::before{content:"";position:absolute;top:0;left:14px;right:14px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
.kpi:hover{transform:translateY(-3px);border-color:var(--border-3);box-shadow:0 22px 50px -24px rgba(0,0,0,.8),0 0 0 1px var(--border-2)}
.kpi-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi-lab{font-family:var(--font-ui);font-size:9.5px;font-weight:600;letter-spacing:.13em;color:var(--ink-faint);text-transform:uppercase}
.kpi-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--chip-bg);border:1px solid var(--border-2);color:var(--gold)}
.kpi-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.kpi-num{font-family:var(--font-ser);font-weight:600;font-size:31px;line-height:1;color:var(--ink);margin:11px 0 3px;letter-spacing:-.01em;display:flex;align-items:baseline;gap:3px}
.kpi-num .sfx{font-size:16px;color:var(--gold);font-weight:500}
.kpi-foot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.kpi-sub{font-size:10.5px;color:var(--ink-faint)}
.grid2{display:grid;grid-template-columns:1.45fr 1fr;gap:18px;margin-bottom:20px}
.grid2b{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-bottom:18px}
.card{border:1px solid var(--border);border-radius:15px;background:var(--panel);box-shadow:var(--glass-shadow);overflow:hidden}
.card-h{display:flex;align-items:center;gap:10px;padding:15px 18px 12px}
.card-h h3{font-family:var(--font-disp);font-weight:600;font-size:13.5px;letter-spacing:.1em;color:var(--ink)}
.card-h .hint{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);margin-left:auto}
.card-h .gleam{width:6px;height:18px;border-radius:3px;background:linear-gradient(var(--gold-br),var(--gold-dp))}
.engines{display:flex;flex-direction:column;gap:14px;padding:4px 16px 16px}
.eng-row{display:flex;gap:14px}
.engine{flex:1;border:1px solid var(--border);border-radius:13px;background:var(--panel-2);padding:15px 15px 13px;transition:.2s;position:relative;overflow:hidden}
.engine:hover{border-color:var(--border-3);transform:translateY(-2px)}
.engine .e-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.engine .e-ic{width:36px;height:36px;flex:0 0 36px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 22%,transparent),color-mix(in srgb,var(--gold) 5%,transparent));border:1px solid var(--border-2);color:var(--gold-br)}
.engine .e-ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.engine h4{font-family:var(--font-ser);font-size:18px;font-weight:600;color:var(--ink);line-height:1.05}
.engine .ver{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-faint)}
.e-mods{font-size:10.5px;color:var(--ink-dim);line-height:1.6;margin-bottom:12px}
.e-mods b{color:var(--ink);font-weight:600}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;font-family:var(--font-ui);font-weight:600;font-size:12.5px;letter-spacing:.03em;padding:10px 14px;border-radius:10px;cursor:pointer;border:1px solid var(--gold);background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 18%,transparent),color-mix(in srgb,var(--gold) 4%,transparent));color:var(--gold-br);transition:.16s;text-decoration:none}
.btn:hover{background:linear-gradient(180deg,var(--gold),var(--gold-dp));color:#1a1407;box-shadow:0 8px 22px -10px color-mix(in srgb,var(--gold) 80%,transparent)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.btn.block{width:100%}
.alerts-list{display:flex;flex-direction:column;padding:4px 14px 14px;gap:9px;max-height:440px;overflow:auto}
.alert{display:flex;gap:11px;border:1px solid var(--border);border-radius:11px;padding:11px 12px;background:var(--panel-2);position:relative;transition:.16s}
.alert:hover{border-color:var(--border-2);background:var(--panel-solid)}
.alert .stripe{position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px}
.alert.crit .stripe{background:var(--danger);box-shadow:0 0 10px var(--danger)}
.alert.high .stripe{background:var(--warn)}
.alert.task .stripe{background:var(--gold)}
.alert.info .stripe{background:var(--r-rst)}
.alert .a-ic{flex:0 0 30px;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;margin-left:6px;border:1px solid var(--border-2)}
.alert.crit .a-ic{color:var(--danger)}
.alert.high .a-ic{color:var(--warn)}
.alert.task .a-ic{color:var(--gold-br)}
.alert.info .a-ic{color:var(--r-rst)}
.alert .a-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.alert .a-body{flex:1;min-width:0}
.alert .a-top{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.alert .a-title{font-size:12.5px;font-weight:600;color:var(--ink)}
.badge2{font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:.06em;padding:2px 6px;border-radius:5px;text-transform:uppercase;white-space:nowrap}
.badge2.crit{color:var(--danger);background:rgba(218,106,80,.14)}
.badge2.high{color:var(--warn);background:rgba(224,169,75,.14)}
.badge2.task{color:#1a1407;background:var(--gold)}
.badge2.info{color:var(--r-rst);background:rgba(108,176,188,.14)}
.alert .a-desc{font-size:11px;color:var(--ink-dim);line-height:1.4}
.alert .a-meta{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-faint);margin-top:5px}
.alert .a-meta b{color:var(--gold)}
.dir-tools{display:flex;align-items:center;gap:10px;padding:0 18px 12px;flex-wrap:wrap}
.search{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;border:1px solid var(--border-2);border-radius:9px;padding:8px 11px;background:var(--panel-solid)}
.search svg{width:15px;height:15px;stroke:var(--ink-faint);fill:none;stroke-width:1.8;flex:0 0 15px}
.search input{flex:1;background:none;border:none;outline:none;color:var(--ink);font-family:var(--font-ui);font-size:12.5px}
.search input::placeholder{color:var(--ink-faint)}
.chips{display:flex;gap:6px}
.chip{font-family:var(--font-ui);font-size:11px;font-weight:600;padding:7px 12px;border-radius:8px;cursor:pointer;border:1px solid var(--border-2);color:var(--ink-dim);background:transparent;transition:.16s}
.chip:hover{color:var(--ink)}
.chip.on{color:var(--gold-br);background:var(--chip-bg);border-color:var(--border-3)}
table{width:100%;border-collapse:collapse;font-size:12px}
thead th{position:sticky;top:0;background:var(--panel-solid);text-align:left;font-family:var(--font-ui);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);padding:10px 14px;border-bottom:1px solid var(--border-2);white-space:nowrap}
thead th.n,thead th.r{text-align:right}
tbody td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr{transition:background .14s}
tbody tr:hover{background:var(--row-hover)}
.co-name{font-weight:600;color:var(--ink)}
.nit{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-dim);white-space:nowrap}
.rchip{font-family:var(--font-mono);font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;white-space:nowrap}
.rchip.RST{color:var(--r-rst);background:rgba(108,176,188,.13);border:1px solid rgba(108,176,188,.3)}
.rchip.ORD{color:var(--gold-br);background:color-mix(in srgb,var(--gold) 13%,transparent);border:1px solid var(--border-2)}
.st{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-dim)}
.st .sd{width:7px;height:7px;border-radius:50%}
.st.ok .sd{background:var(--ok)}
.st.rev .sd{background:var(--warn)}
.st.pen .sd{background:var(--danger)}
.dir-foot{display:flex;justify-content:space-between;align-items:center;padding:11px 18px;border-top:1px solid var(--border);font-size:10.5px;color:var(--ink-faint)}
.dir-foot b{color:var(--gold)}
.feed{display:flex;flex-direction:column;padding:6px 18px 16px;gap:0;max-height:440px;overflow:auto}
.fi{display:flex;gap:13px;padding:11px 0;border-bottom:1px solid var(--border)}
.fi:last-child{border-bottom:none}
.fi .ftime{flex:0 0 56px;font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);padding-top:2px;text-align:right}
.fi .frail{flex:0 0 auto;display:flex;flex-direction:column;align-items:center}
.fi .fdot{width:11px;height:11px;border-radius:50%;border:2px solid var(--gold);background:var(--bg);margin-top:3px}
.fi .fdot.solid{background:var(--gold);box-shadow:0 0 10px color-mix(in srgb,var(--gold) 70%,transparent)}
.fi .fline{flex:1;width:2px;background:var(--border);margin:4px 0 -11px}
.fi:last-child .fline{display:none}
.fi .fbody .ft{font-size:12px;color:var(--ink);font-weight:500;line-height:1.35}
.fi .fbody .ft b{color:var(--gold-br);font-weight:600}
.fi .fbody .fs{font-size:10.5px;color:var(--ink-faint);margin-top:2px}

/* ===== Login premium ===== */
.login-body{display:grid;place-items:center;min-height:100vh;position:relative}
.login-card{position:relative;z-index:1;width:min(420px,92vw);border:1px solid var(--border-2);border-radius:18px;background:linear-gradient(120deg,var(--panel-2),var(--panel));box-shadow:var(--glass-shadow);padding:30px 30px 26px}
.login-card .brand{justify-content:center;margin-bottom:6px}
.login-lead{text-align:center;font-size:12px;color:var(--ink-dim);margin-bottom:20px}
.login-error{border:1px solid rgba(218,106,80,.45);background:rgba(218,106,80,.12);color:var(--danger);border-radius:10px;padding:10px 13px;margin-bottom:14px;font-size:12px}
.login-card form{display:flex;flex-direction:column;gap:13px}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.login-card .btn{width:100%;margin-top:4px;padding:12px}
.demo{margin-top:20px;border-top:1px solid var(--border);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.demo .demo-lab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.demo-row{display:flex;gap:7px;flex-wrap:wrap}
.demo .chip{cursor:pointer}


/* ============================================================================
   COMPAT v2 · módulos del backend sobre el tema premium          (Fase 2)
   ----------------------------------------------------------------------------
   Superset de la capa COMPAT original: CONSERVA TODOS los selectores previos
   (incluidos los de vistas no adjuntas: .motor-*, .pill, .note, .ok-banner,
   .kpi-n/.kpi-l…) y eleva sus declaraciones al lenguaje del kit:
   · tokens --sp-* / --rad-* (definidos en el bloque KIT, al final del archivo)
   · semánticos vía color-mix sobre variables (nada de rgba literales)
   · foco de teclado visible con el acento del tema (--gv-focus)
   · .tbl completamente vestida (antes solo width+collapse)
   Sin renombrar clases. Sin tocar portada/shell/login.
   ============================================================================ */
.content{position:relative;z-index:1}
.content>section.card,.content>.card{padding:16px 18px;margin-bottom:18px}
.card.flush{padding:0}
.content .card>h2,.sub-h{font-family:var(--font-disp);font-weight:600;font-size:13.5px;letter-spacing:.09em;color:var(--ink);margin:0 0 13px}
.sub-h{font-size:11px;color:var(--ink-faint);text-transform:uppercase;margin:16px 0 8px;letter-spacing:.14em}
.muted{color:var(--ink-dim)} .muted.sm,.sm{font-size:11px}
.content p.muted{margin-bottom:14px;font-size:12.5px;line-height:1.6}
.sub{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:2px}
.mono{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-dim)}
td.n,th.n,.n{font-family:var(--font-mono);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---- Tablas (.tbl): vestido completo, al nivel de la portada ---- */
.tbl{width:100%;border-collapse:collapse;font-family:var(--font-ui)}
.tbl thead th{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-2);background:var(--panel)}
.tbl tbody td{padding:11px 12px;border-bottom:1px solid var(--grid-line);color:var(--ink-dim);font-size:12.5px;vertical-align:middle}
.tbl tbody tr{transition:background var(--gv-t) var(--gv-ease)}
.tbl tbody tr:hover{background:var(--row-hover)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl .fila-emp{cursor:default}

/* ---- KPI compactos de módulos (vistas no adjuntas los usan) ---- */
.kpis-3{grid-template-columns:repeat(3,1fr)}
.kpi-n{font-family:var(--font-ser);font-weight:600;font-size:30px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.kpi-l{font-size:9.5px;font-weight:600;letter-spacing:.12em;color:var(--ink-faint);text-transform:uppercase;margin-top:7px}
.kpi.ok .kpi-n{color:var(--ok)} .kpi.warn .kpi-n{color:var(--warn)} .kpi.off .kpi-n{color:var(--danger)}

/* ---- Badges: unificados con el lenguaje del kit (píldora + color-mix) ---- */
.badge{display:inline-block;font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.05em;padding:3px 9px;border-radius:var(--rad-pill);text-transform:uppercase;white-space:nowrap;border:1px solid var(--border-2);background:var(--chip-bg);color:var(--ink-dim)}
.badge.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.badge.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.badge.off{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.badge.cyan{color:var(--r-rst);background:color-mix(in srgb,var(--r-rst) 12%,transparent);border-color:color-mix(in srgb,var(--r-rst) 40%,transparent)}
.badge.gold{color:var(--gold-br);background:var(--chip-bg);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}

/* ---- Botones: base intacta (portada); variantes elevadas ---- */
.acts{display:flex;gap:8px;flex-wrap:wrap}
.btn.ghost,.btn.primary,.btn.sm,.btn.xs,.btn.ok,.btn.warn,.btn.off{width:auto}
.btn.primary{background:linear-gradient(180deg,var(--gold-br),var(--gold));border-color:var(--gold);color:var(--mark)}
.btn.primary:hover{filter:brightness(1.06);border-color:var(--gold-br)}
.btn.ghost{background:var(--panel-2);border-color:var(--border-2);color:var(--ink-dim)}
.btn.ghost:hover{color:var(--ink);border-color:var(--border-3);background:var(--chip-bg);box-shadow:none}
.btn.sm{padding:7px 12px;font-size:11.5px}
.btn.xs{padding:5px 10px;font-size:10.5px;border-radius:var(--rad-1)}
.btn.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.btn.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.btn.off{border-color:color-mix(in srgb,var(--danger) 45%,transparent);color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.btn.ok:hover{background:color-mix(in srgb,var(--ok) 16%,transparent)}
.btn.warn:hover{background:color-mix(in srgb,var(--warn) 16%,transparent)}
.btn.off:hover{background:color-mix(in srgb,var(--danger) 16%,transparent)}
.btn.primary:active,.btn.ghost:active,.btn.sm:active,.btn.xs:active,.btn.ok:active,.btn.warn:active,.btn.off:active{transform:translateY(1px)}
.logout-btn{width:100%;margin-top:2px;padding:9px}

/* ---- Foco de teclado accesible: anillo del acento en los 4 temas ---- */
.btn:focus-visible,.subtab:focus-visible,.logout-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gv-focus);border-color:var(--border-3)}

/* ---- Campos dentro de .content ---- */
.content input,.content select,.content textarea{background:var(--panel-solid);border:1px solid var(--border-2);border-radius:var(--rad-2);color:var(--ink);font-family:var(--font-ui);font-size:13px;padding:9px 11px;outline:none;transition:border-color var(--gv-t) var(--gv-ease),box-shadow var(--gv-t) var(--gv-ease)}
.content input:hover,.content select:hover,.content textarea:hover{border-color:var(--border-3)}
.content input:focus,.content select:focus,.content textarea:focus{border-color:var(--border-3);box-shadow:0 0 0 2px var(--panel-solid),0 0 0 4px var(--gv-focus)}
.content input::placeholder,.content textarea::placeholder{color:var(--ink-faint)}
.content select{appearance:none;cursor:pointer;padding-right:32px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%);background-position:calc(100% - 17px) calc(50% - 1px),calc(100% - 12px) calc(50% - 1px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.content input:disabled,.content select:disabled,.content textarea:disabled{opacity:.55;cursor:not-allowed}
.form{display:flex;flex-direction:column;gap:12px}
.form>label,.ff{display:flex;flex-direction:column;gap:6px}
.form>label{font-size:11px;color:var(--ink-dim)}
.ff>span{font-size:10px;letter-spacing:.05em;color:var(--ink-faint);text-transform:uppercase}
.form-inline{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.form-inline input,.form-inline select{flex:1;min-width:150px}
.emp-form .card{display:flex;flex-direction:column;gap:11px}
.emp-form .ff{gap:5px;margin-bottom:2px}
.buscador-wrap{margin:0 0 12px}
.buscador{width:100%;max-width:400px}

/* ---- Banners y notas: filete lateral semántico, tinte tenue ---- */
.ok-banner{border:1px solid color-mix(in srgb,var(--ok) 30%,var(--border));border-left:3px solid var(--ok);background:color-mix(in srgb,var(--ok) 7%,var(--panel));color:var(--ink-dim);border-radius:var(--rad-2);padding:11px 14px;margin-bottom:14px;font-size:12.5px;line-height:1.55}
.ok-banner b{color:var(--ok)}
.saved-note{border:1px solid var(--border-2);border-left:3px solid var(--border-3);background:var(--panel-2);border-radius:var(--rad-2);padding:10px 13px;margin-bottom:12px;font-size:11.5px;color:var(--ink-dim)}
.note{border:1px solid var(--border);border-left:3px solid var(--gold);background:var(--panel);border-radius:var(--rad-2);padding:11px 14px;margin:8px 0 12px;font-size:11.5px;color:var(--ink-dim);line-height:1.55}
.note b{color:var(--gold-br)}

/* ---- Leyenda de la grilla ---- */
.leg{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.chip-leg{font-size:10px;font-weight:600;padding:4px 10px;border-radius:var(--rad-pill);border:1px solid var(--border-2)}
.chip-leg.g-base{color:var(--gold-br);background:var(--chip-bg);border-color:color-mix(in srgb,var(--gold) 35%,transparent)}
.chip-leg.g-aus{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.chip-leg.g-he{color:var(--r-rst);background:color-mix(in srgb,var(--r-rst) 10%,transparent);border-color:color-mix(in srgb,var(--r-rst) 35%,transparent)}

/* ---- Grilla de Novedades: geometría intacta, estados al nivel del kit ---- */
.nov-card{overflow-x:auto;padding:8px}
.nov-tbl{min-width:920px}
.nov-tbl th.ni{font-size:8.5px;padding:8px 5px;text-align:center}
.nov-tbl td.ni{padding:5px 5px;text-align:center}
.nov-tbl td.ni input{width:52px;padding:6px 4px;text-align:center;font-family:var(--font-mono);font-size:12px;font-variant-numeric:tabular-nums;background:transparent;border:1px solid transparent;border-radius:var(--rad-1);box-shadow:none}
.nov-tbl td.ni input:hover{border-color:var(--border)}
.nov-tbl td.ni input:focus{background:var(--panel-solid);border-color:var(--border-3);box-shadow:0 0 0 2px var(--gv-focus)}
.nov-tbl td.ni input.is-dirty{border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.nov-tbl .emp-cell{position:sticky;left:0;background:var(--panel-solid);z-index:1;box-shadow:8px 0 14px -10px rgba(0,0,0,.55)} /* excepción documentada: sombra neutra del sticky (no es tinte semántico) · auditoría 02-jul-2026 */
.ni.g-base{background:color-mix(in srgb,var(--gold) 5%,transparent)}
.ni.g-aus{background:color-mix(in srgb,var(--warn) 6%,transparent)}
.ni.g-he{background:color-mix(in srgb,var(--r-rst) 6%,transparent)}
.emp-cell{min-width:150px}

/* ---- Subpestañas: del estilo carpeta al subrayado del kit ---- */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;border-bottom:1px solid var(--border)}
.subtab{padding:9px 10px;border-radius:0;font-size:12px;font-weight:600;color:var(--ink-dim);text-decoration:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--gv-t) var(--gv-ease),border-color var(--gv-t) var(--gv-ease)}
.subtab:hover{color:var(--ink)}
.subtab.on{color:var(--ink);background:transparent;border-color:transparent;border-bottom-color:var(--gold)}
.subtab.off{color:var(--ink-faint);cursor:default}
.subtab.off:hover{color:var(--ink-faint)}
.subtab.off em{font-style:normal;font-size:8px;color:var(--gold-dp);margin-left:4px;text-transform:uppercase;letter-spacing:.05em}

/* ---- Barras de herramientas de nómina ---- */
.nom-top,.nom-top2,.emp-toolbar,.ficha-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.nom-top2{gap:10px}
.nom-top label,.nom-top2 label{font-size:10px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em}
.sel-emp{min-width:220px}
.sel-anio{min-width:92px}
.sel-wrap{display:flex;align-items:center;gap:8px}
.emp-toolbar,.ficha-top{justify-content:space-between}

/* ---- Ficha del empleado ---- */
.ficha-head{margin:4px 0 16px}
.ficha-head h1{font-family:var(--font-ser);font-size:28px;color:var(--ink);line-height:1.05}
.f-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--grid-line);font-size:12px}
.f-row:last-child{border-bottom:none}
.f-k{color:var(--ink-faint)} .f-v{color:var(--ink);text-align:right}
.raw{margin-top:16px}
.raw summary{cursor:pointer;color:var(--ink-dim);font-size:11px}
.raw summary:hover{color:var(--ink)}
.raw pre{margin-top:10px;background:var(--panel-solid);border:1px solid var(--border);border-radius:var(--rad-2);padding:14px;font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);overflow:auto;max-height:400px}

/* ---- Filas de motores / documentos / semáforo (portal y home) ---- */
.motor-row,.doc-row,.sem-row{display:flex;align-items:center;gap:12px;padding:11px 8px;margin:0 -8px;border-bottom:1px solid var(--grid-line);border-radius:var(--rad-1) var(--rad-1) 0 0;transition:background var(--gv-t) var(--gv-ease)}
.motor-row:hover,.doc-row:hover,.sem-row:hover{background:var(--row-hover)}
.motor-row:last-child,.doc-row:last-child,.sem-row:last-child{border-bottom:none;border-radius:var(--rad-1)}
.motor-row .ic,.doc-row .ic{font-size:18px;flex:0 0 auto}
.motor-row>div,.doc-row>div,.sem-row>div{flex:1}
.motor-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.motor-head .ic.big{font-size:28px}
.motor-head>div{flex:1;min-width:200px}
.pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.pill{font-family:var(--font-mono);font-size:11px;padding:5px 10px;border-radius:var(--rad-pill);border:1px solid var(--border-2);color:var(--ink-dim);background:var(--panel-solid)}
.welcome{margin-bottom:18px}
.welcome h2{font-family:var(--font-ser);font-size:26px;color:var(--ink)}

/* ---- Barra de guardado fija ---- */
.save-bar{position:sticky;bottom:0;z-index:5;background:linear-gradient(180deg,transparent,var(--bg) 45%);padding:14px 0 6px;margin-top:12px;display:flex;justify-content:flex-end;gap:10px}

@media(max-width:1180px){.kpis{grid-template-columns:repeat(3,1fr)}.grid2,.grid2b{grid-template-columns:1fr}}
@media(max-width:980px){.app{grid-template-columns:1fr}.rail{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px;border-right:none;border-bottom:1px solid var(--border)}.nav{flex-direction:row;flex-wrap:wrap;margin-top:0;order:3;width:100%}.nav-sec{display:none}.nav-item.active::before{display:none}.rail-foot{margin:0 0 0 auto;border:none;padding:0;order:2;flex-direction:row}.netline{display:none}}
@media(max-width:680px){.main{padding:0 14px 24px}.kpis{grid-template-columns:repeat(2,1fr)}.eng-row{flex-direction:column}.hero h2{font-size:27px}.tb-right .period{display:none}}
@media(max-width:430px){.kpis{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.tick-track,.sheen,.dot{animation:none!important}.bar>i{transition:none!important}}


/* ============================================================================
   KIT CONSOLA VCE v2 · componentes nuevos (gv- / doc- / portal-)
   Integrado en fase 2. Referencia + styleguide: consola-vce-kit.css / .html
   ============================================================================ */
/* 0 · TOKENS NUEVOS ----------------------------------------------------------
   (colores NO; solo ritmo, radios y movimiento). */
:root{
  /* Escala de espaciado (base 4px) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Radios */
  --rad-1: 6px;    /* chips, inputs        */
  --rad-2: 10px;   /* tarjetas             */
  --rad-3: 14px;   /* paneles / contenedores */
  --rad-pill: 999px;

  /* Movimiento */
  --gv-t: 160ms;
  --gv-ease: cubic-bezier(.2,.6,.2,1);

  /* Anillo de foco = acento del tema (accesibilidad de teclado) */
  --gv-focus: color-mix(in srgb, var(--gold) 60%, transparent);

  /* Sombra sutil (neutra, no teñida) */
  --gv-shadow: var(--glass-shadow, 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.28));
}

/* Respeto a "menos movimiento" del sistema operativo */
@media (prefers-reduced-motion: reduce){
  :root{ --gv-t: 0ms; }
  *{ scroll-behavior: auto !important; }
}

/* Utilidad de foco reutilizable (aplicada por componente) */
.gv-focusring:focus-visible,
.gv-btn:focus-visible,
.gv-tab:focus-visible,
.gv-input:focus-visible,
.gv-select:focus-visible,
.gv-textarea:focus-visible,
.doc-card__dl:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 4px var(--gv-focus);
  border-color: var(--border-3);
}


/* 1 · ROLES TIPOGRÁFICOS -----------------------------------------------------
   Úselos como clases utilitarias cuando un texto necesite una voz clara.
   <span class="gv-eyebrow">Periodo</span> */
.gv-eyebrow{
  font-family:var(--font-ui, Montserrat, system-ui, sans-serif);
  text-transform: uppercase; letter-spacing:.16em;
  font-size:.66rem; font-weight:600; color: var(--ink-faint);
}
.gv-title{
  font-family:var(--font-disp, Cinzel, serif);
  text-transform: uppercase; letter-spacing:.10em;
  font-weight:600; color: var(--ink); line-height:1.15;
}
.gv-num{                       /* cifras grandes (hero, KPI) */
  font-family:var(--font-ser, "Cormorant Garamond", Georgia, serif);
  font-weight:600; color: var(--ink); line-height:1;
  font-variant-numeric: tabular-nums lining-nums;
}
.gv-data{                      /* NIT, fechas, importes, códigos */
  font-family:var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-variant-numeric: tabular-nums; letter-spacing:.01em;
}
.gv-body{
  font-family:var(--font-ui, Montserrat, system-ui, sans-serif);
  color: var(--ink-dim); line-height:1.55;
}


/* 2 · BOTONES ----------------------------------------------------------------
   <button class="gv-btn gv-btn--gold">Descargar</button>
   <button class="gv-btn gv-btn--ghost">Ver</button>
   <button class="gv-btn gv-btn--gold is-loading">Generando…</button> */
.gv-btn{
  --_bg: transparent;
  display: inline-flex; align-items:center; justify-content:center; gap: var(--sp-2);
  font-family:var(--font-ui, Montserrat, system-ui, sans-serif);
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  padding: 10px 16px; min-height:40px;
  border:1px solid var(--border-2); border-radius: var(--rad-1);
  background: var(--_bg); color: var(--ink);
  cursor:pointer; user-select:none; white-space:nowrap;
  transition: transform var(--gv-t) var(--gv-ease),
              background var(--gv-t) var(--gv-ease),
              border-color var(--gv-t) var(--gv-ease),
              filter var(--gv-t) var(--gv-ease);
}
.gv-btn svg{ width:16px; height:16px; flex:0 0 auto; }
.gv-btn:hover{ border-color: var(--border-3); }
.gv-btn:active{ transform: translateY(1px); }

/* Primario: relleno con acento del tema (dorado en Ónix) */
.gv-btn--gold{
  background: linear-gradient(180deg, var(--gold-br), var(--gold));
  border-color: var(--gold);
  color:#14110A;                              /* tinta oscura sobre acento */
}
.gv-btn--gold:hover{ filter: brightness(1.05); border-color: var(--gold-br); }
.gv-btn--gold:active{ filter: brightness(.97); }

/* Fantasma: solo borde */
.gv-btn--ghost{ background: var(--panel-2); color: var(--ink); }
.gv-btn--ghost:hover{ background: var(--chip-bg); }

/* Peligro (acciones destructivas) */
.gv-btn--danger{
  background: transparent; color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}
.gv-btn--danger:hover{
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: var(--danger);
}

/* Tamaños */
.gv-btn--sm{ padding:6px 12px; min-height:32px; font-size:.76rem; }
.gv-btn--block{ width:100%; }

/* Deshabilitado */
.gv-btn:disabled,
.gv-btn.is-disabled{ opacity:.5; cursor:not-allowed; transform:none; filter:none; }

/* Cargando (spinner CSS puro) */
.gv-btn.is-loading{ color: transparent !important; pointer-events:none; position:relative; }
.gv-btn.is-loading::after{
  content:""; position:absolute; width:16px; height:16px;
  border:2px solid currentColor; border-top-color: transparent;
  border-radius:50%; color: var(--ink);
  animation: gv-spin .7s linear infinite;
}
.gv-btn--gold.is-loading::after{ color:#14110A; }
@keyframes gv-spin{ to{ transform: rotate(360deg); } }


/* 3 · CAMPOS / FORMULARIOS ---------------------------------------------------
   <label class="gv-field">
     <span class="gv-field__label">Salario base</span>
     <input class="gv-input gv-data" inputmode="numeric" value="{{salario}}">
     <span class="gv-field__hint">Mensual, en pesos.</span>
   </label>
   Error: agregue gv-field--error al contenedor y un gv-field__msg. */
.gv-field{ display:flex; flex-direction:column; gap: var(--sp-2); }
.gv-field__label{
  font-family:var(--font-ui, Montserrat, system-ui, sans-serif);
  font-size:.72rem; font-weight:600; letter-spacing:.04em; color: var(--ink-dim);
}
.gv-input, .gv-select, .gv-textarea{
  font-family:var(--font-ui, Montserrat, system-ui, sans-serif); font-size:.9rem;
  color: var(--ink); background: var(--panel-solid);
  border:1px solid var(--border-2); border-radius: var(--rad-1);
  padding:10px 12px; min-height:40px; width:100%;
  transition: border-color var(--gv-t) var(--gv-ease), background var(--gv-t) var(--gv-ease);
}
.gv-textarea{ min-height:96px; resize: vertical; line-height:1.5; }
.gv-input::placeholder, .gv-textarea::placeholder{ color: var(--ink-faint); }
.gv-input:hover, .gv-select:hover, .gv-textarea:hover{ border-color: var(--border-3); }
.gv-select{ appearance:none; cursor:pointer;
  background-image: linear-gradient(45deg,transparent 50%, var(--ink-dim) 50%),
                    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px;
  background-size: 5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:34px;
}
.gv-input:disabled, .gv-select:disabled, .gv-textarea:disabled{
  opacity:.55; cursor:not-allowed;
}
/* Estado de error */
.gv-field--error .gv-input,
.gv-field--error .gv-select,
.gv-field--error .gv-textarea{
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent);
}
.gv-field__msg{ font-size:.74rem; color: var(--danger); display:flex; gap:6px; align-items:center; }
.gv-field__hint{ font-size:.74rem; color: var(--ink-faint); }


/* 4 · TABLAS -----------------------------------------------------------------
   Base legible + variante densa para la grilla de Novedades.
   <table class="gv-table"> … </table>
   Densa+editable: <table class="gv-table gv-table--dense gv-table--sticky"> */
.gv-table{ width:100%; border-collapse: collapse; font-family:var(--font-ui, Montserrat, system-ui, sans-serif); }
.gv-table thead th{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; font-weight:600;
  color: var(--ink-faint); text-align:left;
  padding:10px 12px; border-bottom:1px solid var(--border-2); background: var(--panel);
}
.gv-table tbody td{
  padding:11px 12px; border-bottom:1px solid var(--grid-line);
  color: var(--ink-dim); font-size:.88rem; vertical-align:middle;
}
.gv-table tbody tr{ transition: background var(--gv-t) var(--gv-ease); }
.gv-table tbody tr:hover{ background: var(--row-hover); }
.gv-table td.gv-num-cell,
.gv-table th.gv-num-cell{ text-align:right; font-family:var(--font-mono, "IBM Plex Mono", monospace); font-variant-numeric:tabular-nums; }
.gv-table .gv-cell-strong{ color: var(--ink); font-weight:600; }

/* Encabezado fijo al hacer scroll dentro de un contenedor */
.gv-table--sticky thead th{ position: sticky; top:0; z-index:2; }

/* Zebra opcional (muy sutil, sobre la base neutra) */
.gv-table--zebra tbody tr:nth-child(even){
  background: color-mix(in srgb, var(--row-hover) 55%, transparent);
}

/* Variante densa: menos alto de fila, ideal para muchas columnas numéricas */
.gv-table--dense thead th{ padding:7px 8px; }
.gv-table--dense tbody td{ padding:5px 8px; font-size:.82rem; }

/* Celda editable: input numérico legible dentro de la grilla */
.gv-cell-input{
  width:100%; min-width:56px; text-align:right;
  font-family:var(--font-mono, "IBM Plex Mono", monospace); font-variant-numeric:tabular-nums; font-size:.82rem;
  color: var(--ink); background: transparent;
  border:1px solid transparent; border-radius: var(--rad-1); padding:5px 7px;
  transition: border-color var(--gv-t) var(--gv-ease), background var(--gv-t) var(--gv-ease);
}
.gv-cell-input:hover{ border-color: var(--border); }
.gv-cell-input:focus{
  outline:none; background: var(--panel-solid);
  border-color: var(--border-3);
  box-shadow: 0 0 0 2px var(--gv-focus);
}
.gv-cell-input.is-dirty{ border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.gv-cell-input:disabled{ color: var(--ink-faint); }
/* Celda de totales / resaltada */
.gv-cell-total{ background: var(--chip-bg); color: var(--ink); font-weight:600; }


/* 5 · BADGES / PUNTOS DE ESTADO ---------------------------------------------
   <span class="gv-badge gv-badge--rst">RST</span>
   <span class="gv-badge gv-badge--ord">Ordinario</span>
   <span class="gv-dot gv-dot--ok"></span> Al día */
.gv-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono, "IBM Plex Mono", monospace); font-size:.66rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius: var(--rad-pill);
  border:1px solid var(--border-2); background: var(--chip-bg); color: var(--ink-dim);
}
.gv-badge--rst{ color: var(--r-rst); border-color: color-mix(in srgb, var(--r-rst) 45%, transparent);
                background: color-mix(in srgb, var(--r-rst) 10%, transparent); }
.gv-badge--ord{ color: var(--gold-br); border-color: color-mix(in srgb, var(--gold) 45%, transparent);
                background: color-mix(in srgb, var(--gold) 10%, transparent); }
.gv-badge--ok{ color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent);
               background: color-mix(in srgb, var(--ok) 10%, transparent); }
.gv-badge--warn{ color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent);
                 background: color-mix(in srgb, var(--warn) 12%, transparent); }
.gv-badge--danger{ color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent);
                   background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* Punto semáforo */
.gv-dot{ display:inline-block; width:8px; height:8px; border-radius:50%;
         background: var(--ink-faint); flex:0 0 auto; }
.gv-dot--ok{ background: var(--ok); }
.gv-dot--warn{ background: var(--warn); }
.gv-dot--danger{ background: var(--danger); }
.gv-dot--pulse{ box-shadow:0 0 0 0 currentColor; animation: gv-pulse 2s var(--gv-ease) infinite; }
@keyframes gv-pulse{ 70%{ box-shadow:0 0 0 6px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }


/* 6 · BANNERS (ok / nota) ----------------------------------------------------
   Los estados semánticos SÍ llevan tinte tenue: es información, no decoración.
   <div class="gv-banner gv-banner--ok"><svg…/><p>…</p></div> */
.gv-banner{
  display:flex; gap: var(--sp-3); align-items:flex-start;
  padding: var(--sp-3) var(--sp-4);
  border:1px solid var(--border); border-left:3px solid var(--ink-faint);
  border-radius: var(--rad-2); background: var(--panel);
  font-family:var(--font-ui, Montserrat, system-ui, sans-serif); font-size:.86rem; color: var(--ink-dim);
}
.gv-banner svg{ width:18px; height:18px; flex:0 0 auto; margin-top:1px; }
.gv-banner strong{ color: var(--ink); font-weight:600; }
.gv-banner--ok{ border-left-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 7%, var(--panel)); }
.gv-banner--ok svg{ color: var(--ok); }
.gv-banner--note{ border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }
.gv-banner--note svg{ color: var(--warn); }
.gv-banner--danger{ border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--panel)); }
.gv-banner--danger svg{ color: var(--danger); }


/* 7 · SUBPESTAÑAS ------------------------------------------------------------
   <div class="gv-tabs" role="tablist">
     <button class="gv-tab is-active">Colillas</button>
     <button class="gv-tab">Certificados</button>
   </div> */
.gv-tabs{ display:flex; gap: var(--sp-2); border-bottom:1px solid var(--border);
          overflow-x:auto; scrollbar-width:none; }
.gv-tabs::-webkit-scrollbar{ display:none; }
.gv-tab{
  font-family:var(--font-ui, Montserrat, system-ui, sans-serif); font-size:.82rem; font-weight:600;
  color: var(--ink-dim); background:none; border:none; cursor:pointer;
  padding:10px 4px; margin-bottom:-1px; white-space:nowrap;
  border-bottom:2px solid transparent;
  transition: color var(--gv-t) var(--gv-ease), border-color var(--gv-t) var(--gv-ease);
}
.gv-tab:hover{ color: var(--ink); }
.gv-tab.is-active{ color: var(--ink); border-bottom-color: var(--gold); }


/* 8 · TARJETA KPI (para reutilizar; NO reemplaza las de la portada) ----------
   <div class="gv-kpi">
     <span class="gv-kpi__label">Nómina activa</span>
     <span class="gv-kpi__value gv-num">$92<small>M</small></span>
     <span class="gv-kpi__meta">masa mensual</span>
   </div> */
.gv-kpi{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap: var(--sp-2);
  padding: var(--sp-5); background: var(--panel);
  border:1px solid var(--border); border-radius: var(--rad-3);
}
.gv-kpi::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--gold), transparent 70%); }
.gv-kpi__label{ font-family:var(--font-ui, Montserrat, sans-serif); text-transform:uppercase;
  letter-spacing:.14em; font-size:.62rem; font-weight:600; color: var(--ink-faint); }
.gv-kpi__value{ font-size:2.4rem; }
.gv-kpi__value small{ font-size:.9rem; color: var(--ink-dim); margin-left:2px; }
.gv-kpi__meta{ font-size:.74rem; color: var(--ink-faint); }


/* 9 · ESTADOS VACÍOS ---------------------------------------------------------
   Una pantalla vacía es una invitación a actuar, no un mensaje de error.
   <div class="gv-empty">
     <div class="gv-empty__icon"><svg…/></div>
     <p class="gv-empty__title">Aún no hay documentos</p>
     <p class="gv-empty__text">Cuando {{razon_social}} tenga colillas…</p>
     <button class="gv-btn gv-btn--ghost gv-btn--sm">Actualizar</button>
   </div> */
.gv-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap: var(--sp-3); padding: var(--sp-7) var(--sp-5);
  border:1px dashed var(--border-2); border-radius: var(--rad-3);
  background: var(--panel);
}
.gv-empty__icon{
  width:52px; height:52px; display:grid; place-items:center; border-radius:50%;
  color: var(--ink-faint); background: var(--chip-bg);
  border:1px solid var(--border);
}
.gv-empty__icon svg{ width:24px; height:24px; }
.gv-empty__title{ font-family:var(--font-disp, Cinzel, serif); text-transform:uppercase; letter-spacing:.08em;
  font-size:.9rem; color: var(--ink); }
.gv-empty__text{ font-family:var(--font-ui, Montserrat, sans-serif); font-size:.85rem; color: var(--ink-dim);
  max-width:38ch; line-height:1.55; }
.gv-empty--compact{ padding: var(--sp-5) var(--sp-4); }
.gv-empty--compact .gv-empty__icon{ width:40px; height:40px; }
/* Variante "sin permiso": candado y tono más sobrio */
.gv-empty--locked .gv-empty__icon{ color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent); }


/* 10 · TARJETA DE DOCUMENTO / COLILLA (doc-) ---------------------------------
   Firma visual del portal: cada tarjeta es un "mini membrete" — filete
   dorado superior + título en Cinzel — para hilar con sus PDF membreteados.
   <article class="doc-card doc-card--nuevo">
     <div class="doc-card__head">
       <span class="doc-card__icon"><svg…/></span>
       <span class="doc-card__kind">Colilla de nómina</span>
       <span class="gv-badge gv-badge--ok">Nuevo</span>
     </div>
     <h3 class="doc-card__title">{{doc_titulo}}</h3>
     <p class="doc-card__meta gv-data">{{periodo}} · {{fecha}} · PDF · {{peso}}</p>
     <div class="doc-card__foot">
       <a class="doc-card__dl gv-btn gv-btn--gold gv-btn--block" href="{{url}}" download>
         <svg…/> Descargar
       </a>
     </div>
   </article> */
.doc-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap: var(--sp-3);
  padding: var(--sp-4); padding-top: calc(var(--sp-4) + 2px);
  background: var(--panel-solid); border:1px solid var(--border);
  border-radius: var(--rad-2);
  transition: transform var(--gv-t) var(--gv-ease),
              border-color var(--gv-t) var(--gv-ease),
              box-shadow var(--gv-t) var(--gv-ease);
}
.doc-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dp) 60%, transparent); opacity:.85; }
.doc-card:hover{ transform: translateY(-2px); border-color: var(--border-3); box-shadow: var(--gv-shadow); }
.doc-card:focus-within{ border-color: var(--border-3); box-shadow: 0 0 0 2px var(--gv-focus); }

.doc-card__head{ display:flex; align-items:center; gap: var(--sp-2); }
.doc-card__icon{
  width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center;
  border-radius: var(--rad-1); color: var(--gold-br);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.doc-card__icon svg{ width:18px; height:18px; }
.doc-card__kind{ font-family:var(--font-ui, Montserrat, sans-serif); font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.10em; color: var(--ink-faint); margin-right:auto; }
.doc-card__title{ font-family:var(--font-disp, Cinzel, serif); letter-spacing:.03em; font-weight:600;
  font-size:1rem; color: var(--ink); margin:0; line-height:1.25; }
.doc-card__meta{ font-size:.74rem; color: var(--ink-dim); margin:0; }
.doc-card__foot{ margin-top: var(--sp-2); }
/* Estado "no disponible aún" (documento en preparación) */
.doc-card--pending{ opacity:.7; }
.doc-card--pending .doc-card__foot .gv-btn{ pointer-events:none; opacity:.55; }


/* 11 · GRÁFICA DE COSTO DE NÓMINA (barras CSS puras, sin JS) ------------------
   El servidor fija la altura de cada barra con style="--h:NN%".
   <div class="gv-chart">
     <div class="gv-chart__plot">
       <div class="gv-chart__bar" style="--h:62%"><span class="gv-chart__val">{{v}}</span></div>
       … una por mes …
     </div>
     <div class="gv-chart__axis gv-data"><span>Ene</span> … <span>Jun</span></div>
   </div>
   Vacío: <div class="gv-chart is-empty"> … gv-empty dentro … </div> */
.gv-chart{ display:flex; flex-direction:column; gap: var(--sp-3); }
.gv-chart__plot{
  display:flex; align-items:flex-end; gap: var(--sp-2);
  height:170px; padding-top: var(--sp-4);
  border-bottom:1px solid var(--border-2);
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent calc(25% - 1px),
                              var(--grid-line) calc(25% - 1px), var(--grid-line) 25%);
}
.gv-chart__bar{
  position:relative; flex:1 1 0; min-width:10px; height: var(--h, 0%);
  border-radius: var(--rad-1) var(--rad-1) 0 0;
  background: linear-gradient(180deg, var(--gold-br), var(--gold-dp));
  transition: filter var(--gv-t) var(--gv-ease);
}
.gv-chart__bar:hover{ filter: brightness(1.12); }
.gv-chart__bar.is-current{ background: linear-gradient(180deg, var(--gold-br), var(--gold)); }
.gv-chart__val{
  position:absolute; top:-18px; left:50%; transform: translateX(-50%);
  font-family:var(--font-mono, "IBM Plex Mono", monospace); font-size:.6rem; color: var(--ink-dim);
  opacity:0; transition: opacity var(--gv-t) var(--gv-ease); white-space:nowrap;
}
.gv-chart__bar:hover .gv-chart__val{ opacity:1; }
.gv-chart__axis{ display:flex; gap: var(--sp-2); }
.gv-chart__axis span{ flex:1 1 0; text-align:center; font-size:.64rem; color: var(--ink-faint); }
.gv-chart.is-empty .gv-chart__plot{ display:none; }


/* 12 · LISTA / FILA GENÉRICA (semáforo de obligaciones, actividad…) ----------
   <ul class="gv-list">
     <li class="gv-row">
       <span class="gv-dot gv-dot--warn"></span>
       <span class="gv-row__main">
         <span class="gv-row__title">{{obligacion}}</span>
         <span class="gv-row__sub gv-data">Vence {{fecha}}</span>
       </span>
       <span class="gv-badge gv-badge--warn">Por vencer</span>
     </li>
   </ul> */
.gv-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.gv-row{
  display:flex; align-items:center; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom:1px solid var(--grid-line);
}
.gv-row:last-child{ border-bottom:none; }
.gv-row__main{ display:flex; flex-direction:column; gap:2px; margin-right:auto; min-width:0; }
.gv-row__title{ font-family:var(--font-ui, Montserrat, sans-serif); font-size:.86rem; color: var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gv-row__sub{ font-size:.72rem; color: var(--ink-faint); }


/* 13 · PORTAL DEL CLIENTE (portal-) ------------------------------------------
   Vista que ve UNA empresa: solo lo suyo, sin barra lateral del staff.
   Pensado para móvil (descargar un documento desde el celular en el banco).
   ------------------------------------------------------------------------- */

/* Marco general */
.portal{ min-height:100vh; background: var(--bg);
  font-family:var(--font-ui, Montserrat, system-ui, sans-serif); color: var(--ink); }
.portal-wrap{ max-width:1040px; margin:0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-8); }

/* Barra superior fija (marca + periodo) */
.portal-topbar{
  position: sticky; top:0; z-index:20;
  display:flex; align-items:center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.portal-topbar__brand{ display:flex; align-items:center; gap: var(--sp-3); margin-right:auto; }
.portal-topbar__name{ font-family:var(--font-disp, Cinzel, serif); text-transform:uppercase; letter-spacing:.12em;
  font-size:.78rem; color: var(--ink); }
.portal-topbar__sub{ font-family:var(--font-mono, "IBM Plex Mono", monospace); font-size:.62rem; color: var(--ink-faint); }

/* Recuadro del logo GV (dorado en los 4 temas; solo cambia el borde) */
.gv-logobox{
  width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--mark, #14110A);                     /* placa del lockup: usa su --mark si existe */
  border:1px solid var(--gold);                        /* borde = acento del tema */
  border-radius: var(--rad-1);
}
.gv-logobox img, .gv-logobox svg{ width:24px; height:24px; }
.gv-logobox .gv-logobox__fallback{ font-family:var(--font-disp, Cinzel, serif); font-weight:700;
  font-size:.8rem; color: var(--gold-br); letter-spacing:.02em; } /* si aún no hay svg */

/* Encabezado de la empresa */
.portal-head{ display:flex; align-items:center; gap: var(--sp-4);
  padding: var(--sp-6) 0 var(--sp-5); border-bottom:1px solid var(--border); }
.portal-head .gv-logobox{ width:56px; height:56px; }
.portal-head .gv-logobox img, .portal-head .gv-logobox svg{ width:34px; height:34px; }
.portal-head__id{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.portal-head__name{ font-family:var(--font-disp, Cinzel, serif); text-transform:uppercase; letter-spacing:.06em;
  font-size:1.25rem; color: var(--ink); line-height:1.2; }
.portal-head__meta{ display:flex; align-items:center; gap: var(--sp-3); flex-wrap:wrap; }
.portal-head__nit{ font-family:var(--font-mono, "IBM Plex Mono", monospace); font-size:.78rem; color: var(--ink-dim); }

/* Rejilla de contenido: principal + lateral en escritorio */
.portal-grid{ display:grid; grid-template-columns: 1fr; gap: var(--sp-5); margin-top: var(--sp-5); }
@media (min-width: 860px){
  .portal-grid{ grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); align-items:start; }
  .portal-grid__aside{ position: sticky; top:76px; }
}

/* Sección (panel con título) */
.portal-section{ background: var(--panel); border:1px solid var(--border);
  border-radius: var(--rad-3); padding: var(--sp-5); }
.portal-section + .portal-section{ margin-top: var(--sp-5); }
.portal-section__head{ display:flex; align-items:baseline; justify-content:space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4); }
.portal-section__title{ font-family:var(--font-disp, Cinzel, serif); text-transform:uppercase; letter-spacing:.10em;
  font-size:.82rem; color: var(--ink); }
.portal-section__hint{ font-size:.72rem; color: var(--ink-faint); }

/* Semáforo — resumen de conteos */
.portal-oblig__summary{ display:flex; gap: var(--sp-4); flex-wrap:wrap; margin-bottom: var(--sp-3); }
.portal-oblig__stat{ display:flex; align-items:center; gap:8px; font-size:.8rem; color: var(--ink-dim); }
.portal-oblig__stat b{ font-family:var(--font-ser, "Cormorant Garamond", serif); font-size:1.3rem; color: var(--ink); }

/* Buscador de documentos */
.portal-search{ position:relative; margin-bottom: var(--sp-4); }
.portal-search svg{ position:absolute; left:12px; top:50%; transform: translateY(-50%);
  width:16px; height:16px; color: var(--ink-faint); }
.portal-search .gv-input{ padding-left:36px; }

/* Rejilla de documentos */
.portal-docs{ display:grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: var(--sp-4); }

/* Resumen de costo (número hero + gráfica) */
.portal-cost__figure{ display:flex; align-items:baseline; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.portal-cost__amount{ font-family:var(--font-ser, "Cormorant Garamond", serif); font-weight:600; font-size:2.6rem;
  color: var(--ink); line-height:1; }
.portal-cost__label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color: var(--ink-faint); }

/* ---- Móvil ---- */
@media (max-width: 640px){
  .portal-wrap{ padding: var(--sp-4) var(--sp-4) var(--sp-8); }
  .portal-head{ flex-direction:row; align-items:center; gap: var(--sp-3);
    padding: var(--sp-5) 0 var(--sp-4); }
  .portal-head__name{ font-size:1.05rem; }
  .portal-section{ padding: var(--sp-4); border-radius: var(--rad-2); }
  .portal-docs{ grid-template-columns: 1fr; }        /* una tarjeta por fila, botón ancho */
  .doc-card{ padding: var(--sp-4); }
  .doc-card__dl{ min-height:46px; font-size:.9rem; } /* objetivo táctil cómodo */
  .portal-cost__amount{ font-size:2.1rem; }
  .portal-oblig__summary{ gap: var(--sp-3); }
}

/* ============================================================================
   v2.1 — BANDEJA REDISEÑADA (maqueta Claude Design aprobada por Javier 12-jul-2026)
   Tarjetas con tesela + badges, editor abierto, filtros por destino y buscador.
   ============================================================================ */
.bj-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.bj-chips{display:flex;gap:6px;flex-wrap:wrap}
.bj-chip{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--ink-dim);background:var(--chip-bg);border:1px solid var(--border);
  border-radius:var(--rad-pill);padding:5px 12px;cursor:pointer;transition:all .15s ease}
.bj-chip:hover{border-color:var(--border-2);color:var(--ink)}
.bj-chip.active{color:var(--gold-br);border-color:var(--border-3);
  background:color-mix(in srgb,var(--gold) 14%,transparent)}
.bj-chip .bj-n{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);
  background:color-mix(in srgb,var(--gold) 10%,transparent);border-radius:var(--rad-pill);
  padding:1px 7px;margin-left:4px}
.bj-chip.active .bj-n{color:var(--gold-br)}
.bj-buscar{margin-left:auto;font-family:var(--font-ui);font-size:12px;color:var(--ink);
  background:var(--panel);border:1px solid var(--border);border-radius:var(--rad-pill);
  padding:7px 14px;min-width:200px;outline:none}
.bj-buscar:focus{border-color:var(--border-3)}
.bj-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--rad-2);
  padding:16px 18px;margin-bottom:12px;transition:border-color .15s ease}
.bj-card:hover{border-color:var(--border-2)}
.bj-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bj-tile{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;background:color-mix(in srgb,var(--gold) 12%,transparent);
  border:1px solid var(--border-2);border-radius:var(--rad-1)}
.badge.gold{font-family:var(--font-ui);font-size:9.5px;font-weight:700;letter-spacing:.08em;
  color:var(--gold-br);background:color-mix(in srgb,var(--gold) 13%,transparent);
  border:1px solid var(--border-2);border-radius:var(--rad-pill);padding:3px 10px}
.bj-dest{font-family:var(--font-ui);font-size:10.5px;color:var(--ink-faint);
  border:1px solid var(--border);border-radius:var(--rad-pill);padding:3px 10px}
.bj-fecha{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-faint)}
.bj-titulo{font-family:var(--font-ser);font-size:18px;font-weight:600;line-height:1.3;
  color:var(--ink);margin:0 0 4px}
.bj-sub{font-family:var(--font-ui);font-size:11.5px;color:var(--ink-dim);margin-bottom:12px}
.bj-editor{background:var(--panel-2);border:1px solid var(--grid-line);
  border-left:2px solid var(--border-3);border-radius:var(--rad-1);padding:12px 14px;margin-bottom:12px}
.bj-editor-lbl{font-family:var(--font-ui);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.bj-acciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bj-acciones .bj-descartar{margin-left:auto;opacity:.65}
.bj-acciones .bj-descartar:hover{opacity:1}
@media (max-width:760px){
  .bj-toolbar{flex-direction:column;align-items:stretch}
  .bj-buscar{margin-left:0;width:100%}
  .bj-head{flex-wrap:wrap}
  .bj-fecha{margin-left:0;width:100%}
  .bj-acciones{flex-direction:column;align-items:stretch}
  .bj-acciones .bj-descartar{margin-left:0}
}

/* ============================================================================
   v2.2 — MÓDULO TAREAS DEL EQUIPO (panel supervisor · mis tareas · fijas)
   ============================================================================ */
.tk-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.tk-col{flex:1;min-width:240px;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:10px}
.tk-colhead{display:flex;align-items:center;gap:9px;padding:4px 4px 10px;border-bottom:1px solid var(--border);margin-bottom:10px}
.tk-avatar{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--gold) 16%,transparent);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--gold-br)}
.tk-colhead b{font-family:var(--font-ui);font-size:13px;color:var(--ink);display:block}
.tk-colhead .sub{font-size:10.5px}
.tk-carga{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-dim)}
.tk-list{display:flex;flex-direction:column;gap:8px;min-height:40px}
.tk-empty{font-size:11.5px;color:var(--ink-faint);text-align:center;padding:14px 0;font-style:italic}
.tk-card{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:8px;padding:9px 11px}
.tk-card.tk-danger{border-left-color:var(--danger)}
.tk-card.tk-warn{border-left-color:var(--warn)}
.tk-card.tk-muted{border-left-color:var(--border-2)}
.tk-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.tk-origen{margin-left:auto;font-size:10px;color:var(--ink-faint)}
.tk-titulo{font-family:var(--font-ser);font-size:15px;color:var(--ink);line-height:1.25;margin-bottom:4px}
.tk-meta{font-size:11px;color:var(--ink-dim)}
.mt-head{padding:6px 0 14px}
.mt-head h2{margin:0 0 4px}
.mt-list{display:flex;flex-direction:column;gap:12px;max-width:560px}
.mt-card{background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--border);border-radius:12px;padding:14px 16px}
.mt-card.mt-danger{border-left-color:var(--danger)}
.mt-card.mt-warn{border-left-color:var(--warn)}
.mt-card.mt-muted{border-left-color:var(--border-2)}
.mt-titulo{font-family:var(--font-ser);font-size:18px;color:var(--ink);line-height:1.3;margin-bottom:5px}
.mt-meta{font-size:12px;color:var(--ink-dim);margin-bottom:10px}
.mt-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mt-nota{flex:1;min-width:180px;font-family:var(--font-ui);font-size:12px;color:var(--ink);background:var(--panel-2);border:1px solid var(--border);border-radius:var(--rad-pill);padding:8px 13px;outline:none}
.mt-nota:focus{border-color:var(--border-3)}
.mt-btn{white-space:nowrap;font-size:14px;padding:9px 20px}
.mt-aldia{max-width:520px;margin:0 auto}
@media (max-width:640px){
  .mt-list{max-width:100%}
  .mt-form{flex-direction:column;align-items:stretch}
  .mt-btn{width:100%}
}


/* ── v2.3 — RELLENO DE TARJETAS ANIDADAS (14-jul-2026) ──────────────────────
   La regla del kit (.content>section.card) solo alcanza tarjetas hijas
   DIRECTAS del contenido; las que viven dentro de las rejillas grid2/grid2b
   quedaban con el título pegado al borde (Consolidado PILA: registrar fecha /
   fechas registradas; Seg. Social: planilla del mes; etc.). Mismo relleno del
   kit, sin tocar las tarjetas de diseño (.card-h maneja el suyo). */
.content .grid2>section.card, .content .grid2>.card,
.content .grid2b>section.card, .content .grid2b>.card { padding: 16px 18px; }


/* ── v2.4 — INFORME EJECUTIVO CON GRÁFICAS (14-jul-2026) ────────────────────
   Gráficas SVG del informe por rango. Paleta de series validada (CVD/contraste,
   claro y oscuro): Devengado #BC8B2C · Aportes #2FA0B8 · Provisiones #9578D8.
   Texto en tokens de tinta (nunca del color de la serie); rejilla recesiva. */
.ch{width:100%;height:auto;display:block;font-variant-numeric:tabular-nums}
.ch-grid{stroke:var(--border);stroke-width:1;opacity:.55}
.ch-ylab{font:9.5px var(--font-mono,monospace);fill:var(--ink-faint);text-anchor:end}
.ch-xlab{font:9.5px var(--font-mono,monospace);fill:var(--ink-dim);text-anchor:middle}
.ch-vlab{font:600 10.5px var(--font-mono,monospace);fill:var(--ink);text-anchor:middle}
.ch-dot{fill:var(--panel-solid,#16130C);stroke-width:2}
.ch-hit{cursor:crosshair}
.ch-arc{stroke-linejoin:round}
.ch-dona{max-width:210px;margin:6px auto 0}
.ch-centro{font:600 15px var(--font-mono,monospace);fill:var(--ink);text-anchor:middle}
.ch-centro-sub{font:9px var(--font-mono,monospace);fill:var(--ink-faint);text-anchor:middle;letter-spacing:.08em;text-transform:uppercase}
.ch-leyenda{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:12px;font-size:11px;color:var(--ink-dim)}
.ch-leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.ch-leyenda b{color:var(--ink)}
.ch-tip{position:absolute;z-index:60;background:var(--panel-solid,#16130C);border:1px solid var(--gold);color:var(--ink);
  font:11px var(--font-mono,monospace);padding:6px 10px;border-radius:8px;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.45);white-space:nowrap}
.ch-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;border-left:3px solid var(--gold)}
.ch-hero-v{font:600 30px var(--font-mono,monospace);color:var(--gold);letter-spacing:.01em;margin:2px 0}
.ch-hero-r{font:11px var(--font-mono,monospace);color:var(--ink-dim);background:var(--bg);border:1px solid var(--border);
  padding:8px 14px;border-radius:999px;white-space:nowrap}
.ch-fila .card h2,.ch-fila2 .card h2{margin-bottom:8px}
.ch-tabla{font-size:11px}
.ch-tabla td.n,.ch-tabla th{text-align:right;font-variant-numeric:tabular-nums}
.ch-tabla td:first-child,.ch-tabla th:first-child{text-align:left}
.ch-tabla .t-total td{border-top:1px solid var(--gold);padding-top:8px}
.ch-tabla .t-var td{color:var(--ink-faint);font-size:10.5px}
@media (max-width:900px){.ch-hero{flex-direction:column;align-items:flex-start}.ch-hero-r{white-space:normal}}


/* ── v2.5 — PROFUNDIDAD PREMIUM EN GRÁFICAS (14-jul-2026) ───────────────────
   "Mejor que 3D": degradados, brillo, sombras y animación de entrada — riqueza
   visual sin distorsionar los valores (el 3D real deforma la lectura). */
.ch-trazo{stroke-dasharray:1600;stroke-dashoffset:1600;animation:chTrazo 1.1s ease-out forwards}
@keyframes chTrazo{to{stroke-dashoffset:0}}
.ch-area{opacity:0;animation:chAparece .9s ease-out .35s forwards}
@keyframes chAparece{to{opacity:1}}
.ch-barra{transform-box:fill-box;transform-origin:center bottom;transform:scaleY(0);
  animation:chCrece .65s cubic-bezier(.22,1,.36,1) forwards}
@keyframes chCrece{to{transform:scaleY(1)}}
.ch-dona{opacity:0;transform:rotate(-8deg);transform-origin:center;
  animation:chGira .8s ease-out .15s forwards}
@keyframes chGira{to{opacity:1;transform:rotate(0)}}
.ch-dot{filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
@media (prefers-reduced-motion: reduce){
  .ch-trazo,.ch-area,.ch-barra,.ch-dona{animation:none;stroke-dashoffset:0;opacity:1;transform:none}
}