/* ============================================================================
   PulseGest · Executive Vibrance 2026  —  global theme override layer  (v3)
   macOS Sonoma financiero: glass real, azul real profundo dominante,
   champagne como acento premium puntual, perla fría neutra.
   Carga DESPUÉS del <style> inline; gana por orden de cascada.
   100% LOCAL — reversible: elimina el <link> para volver al tema base.
   ========================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=satoshi@400,500,700,900&display=swap');

/* ----------------------------------------------------------------------------
   1. TOKENS — remap de las variables que el monolito ya consume + propias
   ------------------------------------------------------------------------- */
:root{
  /* Marca ejecutiva */
  --xv-blue:#2456ff;          /* azul real profundo, dominante */
  --xv-blue-2:#1740d6;        /* azul prensado */
  --xv-blue-ink:#0b1f6b;      /* azul tinta para texto sobre claro */
  --xv-champagne:#b9924e;     /* dorado champagne, acento premium */
  --xv-champagne-2:#d8b572;
  --xv-teal:#15b8a6;          /* verde-azulado financiero */

  /* Obsidiana de la sidebar */
  --xv-obsidian:#0a1326;
  --xv-obsidian-2:#070d1c;

  /* Superficies glass (claro, vibrancy macOS) */
  --xv-glass:rgba(255,255,255,.62);
  --xv-glass-2:rgba(255,255,255,.78);
  --xv-glass-hi:rgba(255,255,255,.85);     /* highlight interior */
  --xv-glass-border:rgba(255,255,255,.7);
  --xv-blur:saturate(180%) blur(22px);
  --xv-shadow:0 18px 48px rgba(15,28,68,.14), 0 2px 6px rgba(15,28,68,.06);
  --xv-shadow-hi:inset 0 1px 0 rgba(255,255,255,.75);
  --xv-radius:18px;
  --xv-ease:cubic-bezier(.2,.85,.25,1);

  /* Remap de los tokens base del monolito */
  --bg:#e9eef7;
  --panel:var(--xv-glass-2);
  --ink:#0d172e; --ink-2:#27324f; --muted:#5d6885;
  --line:rgba(13,23,46,.09);
  --blue:var(--xv-blue); --blue-2:var(--xv-blue-2);
  --nav:var(--xv-obsidian); --nav-2:var(--xv-obsidian-2);
  --green:#0f9d6b; --orange:#e08a13; --red:#e23b56; --purple:#6a5bff;
  --soft:rgba(255,255,255,.55); --soft-2:rgba(255,255,255,.42);
}

/* ----------------------------------------------------------------------------
   2. ATMÓSFERA — mesh aurora frío + grano, compartido por app y login
   ------------------------------------------------------------------------- */
body{
  font-family:'Satoshi','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  background:
    radial-gradient(1200px 720px at 88% -8%, rgba(36,86,255,.16), transparent 60%),
    radial-gradient(980px 620px at -6% 8%, rgba(185,146,78,.12), transparent 58%),
    radial-gradient(900px 700px at 50% 116%, rgba(21,184,166,.10), transparent 60%),
    linear-gradient(180deg,#eef2fa 0%, #e6ecf7 100%) !important;
  background-attachment:fixed;
  color:var(--ink);
  letter-spacing:-.005em;
}
/* grano sutil sobre todo, sin capturar clicks */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.app{position:relative;z-index:1}

/* ----------------------------------------------------------------------------
   3. TIPOGRAFÍA — display característico + cuerpo limpio + dígitos alineados
   ------------------------------------------------------------------------- */
.brand, .page-head h1, .module-hero h2, .panel h2,
.card .value, .module-metric .value, .module-card h3{
  font-family:'Clash Display','Satoshi',sans-serif !important;
}
.page-head h1{font-weight:600 !important;letter-spacing:-.035em !important}
.card .value, .module-metric .value{font-weight:600 !important;letter-spacing:-.025em !important}
/* dinero y columnas numéricas: tabular para que cuadren al centavo */
.tbl .num, .card .value, .module-metric .value, .compact-alert-table .num,
[class*="num"], .pill{font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------------------
   4. LOGIN — DARK GLASS premium: card de vidrio ahumado flotando en la aurora
   ------------------------------------------------------------------------- */
.login-screen{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(900px 620px at 82% -12%, rgba(36,86,255,.40), transparent 56%),
    radial-gradient(720px 520px at 8% 112%, rgba(185,146,78,.24), transparent 56%),
    radial-gradient(600px 600px at 50% 50%, rgba(21,184,166,.08), transparent 60%),
    linear-gradient(155deg,#060b1a 0%, #0a1733 52%, #0d2a63 100%) !important;
  position:relative;overflow:hidden;
}
/* halo de luz girando muy lento detrás del card */
.login-screen::after{
  content:"";position:absolute;width:680px;height:680px;border-radius:50%;
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;
  background:conic-gradient(from 0deg, transparent, rgba(36,86,255,.16), transparent 38%, rgba(185,146,78,.12), transparent 70%);
  filter:blur(40px);animation:xvSpin 28s linear infinite;
}
@keyframes xvSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.login-card{
  position:relative;z-index:2;
  width:min(430px,100%) !important;
  padding:36px 34px 30px !important;
  background:linear-gradient(168deg, rgba(22,32,60,.78) 0%, rgba(11,19,40,.72) 100%) !important;
  backdrop-filter:saturate(170%) blur(28px);-webkit-backdrop-filter:saturate(170%) blur(28px);
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:26px !important;
  box-shadow:0 44px 110px rgba(2,6,20,.62), inset 0 1px 0 rgba(255,255,255,.18) !important;
  color:#e9eef9 !important;
}
/* wordmark tipográfico en vez del PNG viejo */
.login-card .login-brand{flex-direction:column !important;align-items:flex-start !important;gap:3px !important;margin-bottom:8px !important}
.login-logo-wordmark, .login-card .login-brand img{display:none !important}
.login-card .login-brand::before{
  content:"PulseGest";
  font-family:'Clash Display',sans-serif;font-weight:600;font-size:34px;letter-spacing:-.035em;line-height:1;
  background:linear-gradient(118deg,#ffffff 32%, #d8b572 120%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.login-card .login-brand::after{
  content:"El pulso gerencial de su empresa en tiempo real";
  font-size:11.5px;color:#8da3c8;letter-spacing:.02em;font-weight:500;
}
.login-wordmark-fallback{display:none !important}
.login-card h1{color:#fff !important;font-family:'Clash Display',sans-serif !important}
.login-card p{color:#9fb0cf !important}

/* campos del login: dark glass con contraste real */
#login-form .field label{color:#a7b6d6 !important;letter-spacing:.06em !important}
#login-form .field input{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
  padding:13px 15px !important;border-radius:13px !important;font-size:14px !important;
  backdrop-filter:none !important;transition:all .16s var(--xv-ease) !important;
}
#login-form .field input::placeholder{color:#7c8db0 !important}
#login-form .field input:focus{
  border-color:var(--xv-blue) !important;
  box-shadow:0 0 0 3px rgba(36,86,255,.32) !important;
  background:rgba(255,255,255,.1) !important;outline:0 !important;
}
#login-form .btn{
  margin-top:18px !important;padding:14px !important;font-size:14.5px !important;
  background:linear-gradient(180deg,var(--xv-blue),var(--xv-blue-2)) !important;
  box-shadow:0 12px 30px rgba(36,86,255,.45), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.login-card .login-note{
  background:rgba(36,86,255,.1) !important;
  border:1px solid rgba(36,86,255,.22) !important;
  color:#aebfe2 !important;border-radius:14px !important;font-weight:500 !important;
}
.login-error{color:#ff8da0 !important;font-weight:700 !important}

/* el banner PWA estorba en el preview; ocultar */
.pwa-install-card{display:none !important}

/* ----------------------------------------------------------------------------
   5. SIDEBAR — obsidiana líquida con rail de luz en el activo
   ------------------------------------------------------------------------- */
.side{
  background:
    radial-gradient(420px 300px at 30% -5%, rgba(36,86,255,.28), transparent 60%),
    linear-gradient(180deg,var(--xv-obsidian) 0%, var(--xv-obsidian-2) 100%) !important;
  border-right:1px solid rgba(255,255,255,.06) !important;
  box-shadow:1px 0 0 rgba(255,255,255,.04), 18px 0 50px rgba(5,12,34,.25);
}
.logo{
  background:linear-gradient(135deg,var(--xv-blue),var(--xv-champagne)) !important;
  box-shadow:0 10px 26px rgba(36,86,255,.45), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.nav button{border-radius:12px !important;transition:all .18s var(--xv-ease) !important}
.nav button:hover{background:rgba(255,255,255,.07) !important;transform:translateX(2px)}
.nav button.active{
  background:linear-gradient(90deg, rgba(36,86,255,.95), rgba(23,64,214,.92)) !important;
  box-shadow:0 8px 22px rgba(36,86,255,.4), inset 0 1px 0 rgba(255,255,255,.25) !important;
  position:relative;
}
.nav button.active::before{
  content:"";position:absolute;left:-18px;top:50%;transform:translateY(-50%);
  width:4px;height:60%;border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--xv-champagne),var(--xv-champagne-2));
  box-shadow:0 0 14px var(--xv-champagne);
}
.client{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  backdrop-filter:blur(8px);border-radius:14px !important;
}
.client .bar i{background:linear-gradient(90deg,var(--xv-teal),var(--xv-champagne)) !important}

/* ----------------------------------------------------------------------------
   6. TOPBAR — frosted sticky + controles glass
   ------------------------------------------------------------------------- */
.topbar{
  background:rgba(233,238,247,.72) !important;
  backdrop-filter:var(--xv-blur);-webkit-backdrop-filter:var(--xv-blur);
  border-bottom:1px solid var(--xv-glass-border) !important;
}
.search input, .icon-btn, .user{
  background:var(--xv-glass) !important;
  border:1px solid var(--xv-glass-border) !important;
  backdrop-filter:blur(10px);
  border-radius:12px !important;
}
.search input:focus{outline:0;border-color:var(--xv-blue) !important;box-shadow:0 0 0 3px rgba(36,86,255,.18) !important;background:var(--xv-glass-2) !important}
.icon-btn:hover{background:var(--xv-glass-2) !important;transform:translateY(-1px)}
.avatar{background:linear-gradient(135deg,var(--xv-blue),var(--xv-champagne)) !important}

/* ----------------------------------------------------------------------------
   7. CARDS / KPIs / PANELES — vidrio translúcido para que la aurora se lea
   ------------------------------------------------------------------------- */
.card, .panel, .module-card{
  background:var(--xv-glass-2) !important;
  backdrop-filter:var(--xv-blur);-webkit-backdrop-filter:var(--xv-blur);
  border:1px solid var(--xv-glass-border) !important;
  border-radius:var(--xv-radius) !important;
  box-shadow:var(--xv-shadow), var(--xv-shadow-hi) !important;
}
.card{position:relative;overflow:hidden}
/* hilo de luz superior en cada KPI */
.card::after{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
}
.card.report-card-link:hover, .module-card:hover{
  transform:translateY(-3px);
  border-color:rgba(36,86,255,.4) !important;
  box-shadow:0 26px 56px rgba(36,86,255,.18), var(--xv-shadow-hi) !important;
}
.card .ico-tile{
  background:linear-gradient(135deg, rgba(36,86,255,.16), rgba(36,86,255,.28)) !important;
  color:var(--xv-blue) !important;border:1px solid rgba(36,86,255,.2);
}
.card.green .ico-tile{background:linear-gradient(135deg,rgba(15,157,107,.18),rgba(15,157,107,.3)) !important;color:#0f9d6b !important;border-color:rgba(15,157,107,.25)}
.card.orange .ico-tile{background:linear-gradient(135deg,rgba(185,146,78,.2),rgba(185,146,78,.34)) !important;color:#9a6b18 !important;border-color:rgba(185,146,78,.3)}
.card.purple .ico-tile{background:linear-gradient(135deg,rgba(106,91,255,.18),rgba(106,91,255,.3)) !important;color:#6a5bff !important;border-color:rgba(106,91,255,.25)}
.card .delta.up{background:rgba(15,157,107,.14) !important;color:#0c7d55 !important}
.card .delta.down{background:rgba(226,59,86,.14) !important;color:#c02742 !important}

/* hero de módulo: cristal obsidiana con glow */
.module-hero{
  background:
    radial-gradient(520px 360px at 88% -20%, rgba(185,146,78,.28), transparent 60%),
    linear-gradient(135deg,#0a1326 0%, #123065 56%, #2456ff 120%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 24px 60px rgba(8,18,44,.32) !important;
}
.module-metric{background:rgba(255,255,255,.1) !important;border:1px solid rgba(255,255,255,.16) !important;backdrop-filter:blur(10px)}
.module-card .module-card-icon{
  background:linear-gradient(135deg, rgba(36,86,255,.16), rgba(185,146,78,.2)) !important;
  color:var(--xv-blue-ink) !important;border:1px solid rgba(36,86,255,.18);
}

/* ----------------------------------------------------------------------------
   8. BOTONES — gradiente premium + lift; chip champagne para acentos
   ------------------------------------------------------------------------- */
.btn{
  border-radius:12px !important;
  background:linear-gradient(180deg,var(--xv-blue),var(--xv-blue-2)) !important;
  box-shadow:0 8px 20px rgba(36,86,255,.28), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition:all .18s var(--xv-ease) !important;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(36,86,255,.4), inset 0 1px 0 rgba(255,255,255,.3) !important}
.btn.secondary{
  background:var(--xv-glass-2) !important;color:var(--ink-2) !important;
  border:1px solid var(--xv-glass-border) !important;backdrop-filter:blur(10px);box-shadow:var(--xv-shadow-hi) !important;
}
.btn.secondary:hover{background:#fff !important;transform:translateY(-1px)}
.btn.success{background:linear-gradient(180deg,#14b87e,#0c8a5c) !important;box-shadow:0 8px 20px rgba(15,157,107,.3) !important}
.btn.danger{background:linear-gradient(180deg,#f0506b,#c8243f) !important;box-shadow:0 8px 20px rgba(226,59,86,.3) !important}
.btn.warn{background:linear-gradient(180deg,var(--xv-champagne-2),var(--xv-champagne)) !important;color:#3a2a08 !important;box-shadow:0 8px 20px rgba(185,146,78,.3) !important}

/* ----------------------------------------------------------------------------
   9. FORMS — campos de vidrio con foco azul
   ------------------------------------------------------------------------- */
.field input, .field select, .field textarea{
  background:var(--xv-glass) !important;
  border:1px solid var(--xv-glass-border) !important;
  border-radius:11px !important;backdrop-filter:blur(6px);
  transition:all .15s var(--xv-ease) !important;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--xv-blue) !important;
  box-shadow:0 0 0 3px rgba(36,86,255,.18) !important;
  background:var(--xv-glass-2) !important;
}

/* ----------------------------------------------------------------------------
   10. TABLAS — financieras, encabezado discreto, zebra suave, total con peso
   ------------------------------------------------------------------------- */
.tbl th{background:rgba(255,255,255,.5) !important;color:var(--muted) !important;backdrop-filter:blur(4px)}
.tbl tr:hover td{background:rgba(36,86,255,.05) !important}
.tbl tr.grand-total td, .tbl tfoot td{
  background:rgba(36,86,255,.08) !important;
  border-top:2px solid var(--xv-blue) !important;border-bottom-color:var(--xv-blue) !important;
}
.decision-table th{background:linear-gradient(90deg,#0a1326,#2456ff) !important}

/* ----------------------------------------------------------------------------
   11. PILLS / BADGES — refinadas; variante champagne para destacados
   ------------------------------------------------------------------------- */
.pill.ok{background:rgba(15,157,107,.15) !important;color:#0c7d55 !important}
.pill.warn{background:rgba(185,146,78,.18) !important;color:#8a6418 !important}
.pill.bad{background:rgba(226,59,86,.15) !important;color:#c02742 !important}
.pill.blue{background:rgba(36,86,255,.14) !important;color:var(--xv-blue-ink) !important}
.pill.gold{background:linear-gradient(135deg,rgba(185,146,78,.22),rgba(216,181,114,.3)) !important;color:#7a531a !important;border:1px solid rgba(185,146,78,.3)}

/* ----------------------------------------------------------------------------
   12. TILES / STEPS / CHARTS — coherencia de marca
   ------------------------------------------------------------------------- */
.tile{background:var(--xv-glass) !important;border:1px solid var(--xv-glass-border) !important;border-radius:13px !important}
.tile.on{border-color:var(--xv-blue) !important;background:rgba(36,86,255,.08) !important;box-shadow:inset 3px 0 0 var(--xv-blue) !important}
.tile .ic{background:rgba(36,86,255,.14) !important;color:var(--xv-blue) !important}
.tile.on .ic{background:var(--xv-blue) !important;color:#fff !important}
.step{background:var(--xv-glass) !important;border:1px solid var(--xv-glass-border) !important;border-radius:13px !important}
.step .num{background:linear-gradient(135deg,var(--xv-blue),var(--purple)) !important;box-shadow:0 6px 14px rgba(36,86,255,.3) !important}
.chart-bars .stack{box-shadow:0 6px 14px rgba(36,86,255,.18) !important}
.spark i{background:linear-gradient(180deg,rgba(36,86,255,.4),var(--xv-blue)) !important}

/* ----------------------------------------------------------------------------
   13. SCROLLBAR — fina y discreta (WebKit)
   ------------------------------------------------------------------------- */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(36,86,255,.22);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(36,86,255,.4);background-clip:content-box}
.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);background-clip:content-box}

/* ----------------------------------------------------------------------------
   14. MOVIMIENTO — entrada escalonada del contenido (alto impacto, una vez)
   ------------------------------------------------------------------------- */
@keyframes xvRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.content > *{animation:xvRise .5s var(--xv-ease) both}
.content > *:nth-child(1){animation-delay:.02s}
.content > *:nth-child(2){animation-delay:.08s}
.content > *:nth-child(3){animation-delay:.14s}
.content > *:nth-child(4){animation-delay:.2s}
.content > *:nth-child(5){animation-delay:.26s}
.cards .card{animation:xvRise .5s var(--xv-ease) both}
.cards .card:nth-child(2){animation-delay:.06s}
.cards .card:nth-child(3){animation-delay:.12s}
.cards .card:nth-child(4){animation-delay:.18s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  body{background-attachment:scroll !important}
}