/* ==========================================================================
   El Cambio Digital — sistema de marketing
   Estilo: dark editorial con índigo eléctrico. Paleta de la marca.
   ========================================================================== */

:root {
  --bg:#07070C; --bg-2:#0E0E16; --bg-3:#14141F; --bg-4:#1B1B2A;
  --linea:#232337; --linea-2:#2E2E48;
  --indigo:#6366F1; --indigo-claro:#818CF8; --indigo-brillo:#A5B4FC; --indigo-prof:#4338CA;
  --indigo-glow:rgba(99,102,241,.35);
  --txt:#E9E9F7; --txt-2:#B6B6CE; --txt-3:#76768F; --txt-4:#4B4B5E;
  --verde:#34D399; --verde-glow:rgba(52,211,153,.30);
  --ambar:#FBBF24; --ambar-glow:rgba(251,191,36,.30);
  --coral:#FB7185; --coral-glow:rgba(251,113,133,.25);
  --display:'Newsreader','Iowan Old Style','Palatino Linotype',Palatino,'Hoefler Text',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
  --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:28px;
  --ez:cubic-bezier(.16,1,.3,1);
  --ez-spring:cubic-bezier(.34,1.4,.64,1);
  --t-fast:160ms; --t:280ms; --t-slow:480ms;
}

* { margin:0; padding:0; box-sizing:border-box; }
::selection { background:var(--indigo); color:#fff; }
html { scroll-behavior:smooth; }

body {
  font-family:var(--sans); background:var(--bg); color:var(--txt); line-height:1.55;
  font-feature-settings:"cv11" on,"ss01" on,"cv05" on;
  -webkit-font-smoothing:antialiased;
  position:relative; overflow-x:hidden; min-height:100vh;
  padding:28px 24px 80px;
}

/* ── FONDO VIVO ── */
body::before {
  content:''; position:fixed; inset:-25%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(99,102,241,.20), transparent 62%),
    radial-gradient(34% 26% at 82% 30%, rgba(129,140,248,.13), transparent 62%),
    radial-gradient(30% 32% at 55% 82%, rgba(67,56,202,.16), transparent 62%),
    radial-gradient(26% 24% at 90% 78%, rgba(165,180,252,.08), transparent 62%);
  animation:aurora 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes aurora {
  0%   { transform:translate3d(0,0,0) scale(1) rotate(0deg); }
  25%  { transform:translate3d(2.5%,-2%,0) scale(1.06) rotate(.6deg); }
  50%  { transform:translate3d(-1.5%,2.5%,0) scale(1.03) rotate(-.5deg); }
  75%  { transform:translate3d(1.8%,1.4%,0) scale(1.07) rotate(.4deg); }
  100% { transform:translate3d(-2%,-1%,0) scale(1.04) rotate(-.3deg); }
}
body::after {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(129,140,248,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129,140,248,.045) 1px, transparent 1px);
  background-size:64px 64px;
  animation:gridflow 22s linear infinite;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 25%, #000 40%, transparent 80%);
          mask-image:radial-gradient(120% 90% at 50% 25%, #000 40%, transparent 80%);
  will-change:background-position;
}
@keyframes gridflow { from{background-position:0 0;} to{background-position:64px 64px;} }

/* capa FX extra: 2da aurora + rayos + partículas */
.fondo-fx { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.fx-aurora-2 {
  position:absolute; inset:-30%; will-change:transform;
  background:
    radial-gradient(30% 28% at 72% 14%, rgba(67,56,202,.16), transparent 60%),
    radial-gradient(26% 30% at 28% 72%, rgba(129,140,248,.11), transparent 60%),
    radial-gradient(34% 26% at 92% 52%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(22% 24% at 12% 28%, rgba(165,180,252,.07), transparent 60%);
  animation:aurora2 34s ease-in-out infinite alternate;
}
@keyframes aurora2 {
  0%   { transform:translate3d(0,0,0) scale(1.05) rotate(0deg); }
  50%  { transform:translate3d(-3.5%,3%,0) scale(1.13) rotate(-1.2deg); }
  100% { transform:translate3d(3%,-2.5%,0) scale(1.08) rotate(1.4deg); }
}
.fx-beam {
  position:absolute; top:-25%; height:150%; width:2px; filter:blur(1.2px); opacity:0; will-change:transform,opacity;
  background:linear-gradient(180deg, transparent, var(--indigo-brillo) 42%, #C7D2FE 50%, var(--indigo-brillo) 58%, transparent);
}
.fx-beam-1 { left:14%; animation:beam 10s ease-in-out 1.5s infinite; }
.fx-beam-2 { left:62%; animation:beam 13s ease-in-out 6s infinite; }
.fx-beam-3 { left:88%; animation:beam 16s ease-in-out 10s infinite; }
@keyframes beam {
  0%   { transform:translateX(-260px) rotate(20deg); opacity:0; }
  7%   { opacity:.55; }
  14%  { opacity:0; }
  100% { transform:translateX(120px) rotate(20deg); opacity:0; }
}
.fx-particles span {
  position:absolute; border-radius:50%; background:var(--indigo-claro);
  box-shadow:0 0 6px var(--indigo-glow); animation:drift linear infinite; will-change:transform,opacity;
}
@keyframes drift {
  0%   { transform:translate3d(0,0,0); opacity:0; }
  8%   { opacity:.9; }
  92%  { opacity:.9; }
  100% { transform:translate3d(var(--dx,0px),-118vh,0); opacity:0; }
}

/* loadbar */
#loadbar {
  position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--indigo),var(--indigo-brillo));
  box-shadow:0 0 12px var(--indigo-glow); z-index:9999;
  transition:width .8s var(--ez), opacity .4s ease .2s;
}

/* contenedor */
.wrap { max-width:1140px; margin:0 auto; position:relative; z-index:1; }

/* entrada escalonada — JS asigna el delay */
[data-anim] { will-change:opacity,transform; }

/* ───────────────────────── HEADER / HERO ───────────────────────── */
header.app {
  position:relative; border:1px solid var(--linea); border-radius:var(--r-2xl);
  padding:40px 44px 34px; margin-bottom:32px; overflow:hidden;
  background:
    radial-gradient(700px 300px at 0% 0%, rgba(99,102,241,.16), transparent 60%),
    linear-gradient(180deg,var(--bg-3),var(--bg-2));
  transition:border-color var(--t);
}
header.app:hover { border-color:var(--linea-2); }
header.app::before {
  content:''; position:absolute; left:-10%; right:-10%; height:2px; top:0;
  background:linear-gradient(90deg,transparent,var(--indigo-brillo) 50%,transparent);
  box-shadow:0 0 16px var(--indigo-glow);
  animation:scan 1.6s var(--ez) .3s forwards; opacity:0;
}
@keyframes scan { 0%{top:0;opacity:1} 95%{opacity:.8} 100%{top:100%;opacity:0} }
header.app::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(165,180,252,.06) 50%,transparent 60%);
  background-size:300% 100%; background-position:200% 0;
  animation:shimmer 7s ease-in-out 2s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 35%,100%{background-position:-100% 0} }
header.app .eyebrow { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.26em; color:var(--indigo-claro); margin-bottom:14px; }
header.app h1 { font-family:var(--display); font-size:clamp(30px,5vw,46px); font-weight:400; line-height:1.02; letter-spacing:-.02em; color:#fff; }
header.app h1 em { font-style:italic; color:var(--indigo-brillo); }
header.app h1 .cursor::after { content:'_'; color:var(--indigo-claro); animation:blink 1.1s steps(2) infinite; margin-left:.05em; font-style:normal; }
@keyframes blink { 50%{opacity:0} }
header.app .subtitulo { color:var(--txt-2); margin-top:12px; font-size:15px; max-width:620px; }
header.app .meta { position:absolute; top:40px; right:44px; text-align:right; font-family:var(--mono); font-size:12px; color:var(--txt-3); }
header.app .meta b { color:var(--txt); display:block; font-size:14px; }

/* ───────────────────────── NAV (con dropdowns) ───────────────────────── */
nav.app {
  display:flex; flex-wrap:wrap; gap:4px; margin-bottom:40px; padding:6px;
  border:1px solid var(--linea); border-radius:var(--r-lg); background:var(--bg-2);
  font-family:var(--sans);
}
nav.app a, nav.app .nav-dropdown summary {
  position:relative; font-size:13px; padding:9px 14px; border-radius:var(--r-md);
  text-decoration:none; color:var(--txt-2); font-weight:500; transition:color var(--t-fast),transform var(--t-fast) var(--ez), background var(--t-fast);
  cursor:pointer; list-style:none; display:inline-block;
}
nav.app a:hover, nav.app .nav-dropdown summary:hover { color:var(--txt); background:var(--bg-4); transform:translateY(-1px); }
nav.app a.activa {
  color:#fff; background:linear-gradient(135deg,var(--indigo),var(--indigo-prof));
  box-shadow:0 0 0 1px var(--indigo),0 4px 18px var(--indigo-glow);
}
nav.app .separador { color:var(--txt-4); align-self:center; }

/* dropdowns */
nav.app .nav-dropdown { display:inline-block; position:relative; }
nav.app .nav-dropdown summary::-webkit-details-marker { display:none; }
nav.app .nav-dropdown summary::marker { content:''; }
nav.app .nav-dropdown summary.activa { color:var(--indigo-brillo); background:var(--bg-4); }
nav.app .nav-dropdown[open] > summary { background:linear-gradient(135deg,var(--indigo),var(--indigo-prof)); color:#fff; }
nav.app .nav-dropdown .submenu {
  position:absolute; top:calc(100% + 6px); left:0; min-width:200px; z-index:1000;
  background:var(--bg-3); border:1px solid var(--linea-2); border-radius:var(--r-lg);
  padding:6px; box-shadow:0 14px 40px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:2px;
}
nav.app .nav-dropdown .submenu a { display:block; padding:8px 12px; font-size:13px; }
nav.app .nav-dropdown .submenu a.activa { background:linear-gradient(135deg,var(--indigo),var(--indigo-prof)); box-shadow:none; }
nav.app .hola { color:var(--verde); align-self:center; font-size:13px; }
nav.app .logout { color:var(--coral); }
nav.app .logout:hover { background:rgba(251,113,133,.1); }
nav.app .volver { color:var(--txt-3); font-family:var(--mono); }

/* ───────────────────────── MAIN ───────────────────────── */
main { display:block; }

/* títulos de sección */
h2, .sh h2 {
  font-family:var(--display); font-size:26px; font-weight:400; color:#fff; letter-spacing:-.01em;
  margin:42px 0 18px;
}
.sh { margin:42px 0 18px; }
.sh h2 { margin:0; }
.eyebrow {
  display:inline-block; font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.24em; color:var(--indigo-claro); margin-bottom:8px;
}
h3 {
  font-family:var(--display); font-size:21px; font-weight:400; color:var(--indigo-brillo);
  margin:32px 0 14px; letter-spacing:-.01em;
  padding-left:12px; border-left:3px solid var(--indigo);
}
h4 { font-family:var(--sans); font-size:15px; font-weight:600; color:var(--txt); margin:20px 0 8px; }

p { line-height:1.6; color:var(--txt-2); }
p b, p strong { color:var(--txt); }
a { color:var(--indigo-brillo); }
a:hover { color:#C7D2FE; }
hr { border:0; border-top:1px solid var(--linea); margin:32px 0; }
i, em { color:var(--txt-3); }
code { font-family:var(--mono); font-size:.92em; background:var(--bg-3); padding:.1em .4em; border-radius:4px; color:var(--indigo-brillo); border:1px solid var(--linea); }

.nota { color:var(--txt-3); font-style:italic; font-size:12px; display:block; margin-top:4px; }
.punto { color:var(--indigo-brillo); font-weight:600; }

/* ───────────────────────── KPIs ───────────────────────── */
.kpis { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:20px; margin-bottom:20px; }
.kpis-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:20px; }
.kpi {
  position:relative; border:1px solid var(--linea); border-radius:var(--r-xl);
  padding:26px 28px; background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  transition:border-color var(--t),transform var(--t) var(--ez),box-shadow var(--t);
  cursor:default; overflow:hidden;
}
.kpi::after {
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%), rgba(99,102,241,.10), transparent 60%);
  opacity:0; transition:opacity var(--t);
}
.kpi:hover { border-color:var(--linea-2); transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.kpi:hover::after { opacity:1; }
.kpi .label { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--txt-3); transition:color var(--t); }
.kpi:hover .label { color:var(--txt-2); }
.kpi .big { font-size:50px; font-weight:200; line-height:1; margin:14px 0 6px; letter-spacing:-.04em; font-variant-numeric:tabular-nums; transition:transform var(--t) var(--ez-spring); }
.kpi:hover .big { transform:scale(1.04); }
.kpi .small { font-size:13px; color:var(--txt-3); }
.kpi.hero {
  background:radial-gradient(500px 200px at 100% 0%, rgba(52,211,153,.14), transparent 60%),linear-gradient(180deg,var(--bg-3),var(--bg-2));
  border-color:rgba(52,211,153,.25);
}
.kpi.hero:hover { border-color:rgba(52,211,153,.5); box-shadow:0 16px 40px rgba(52,211,153,.12); }
.kpi.hero .big { font-weight:300; color:#fff; text-shadow:0 0 40px var(--verde-glow); }
.kpi.hero .label { color:var(--verde); }
.kpi.hero .ring { position:absolute; top:22px; right:22px; width:10px; height:10px; border-radius:50%; background:var(--verde); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 var(--verde-glow),0 0 12px var(--verde)} 50%{box-shadow:0 0 0 8px transparent,0 0 18px var(--verde)} }
.kpi.indigo .big { color:var(--indigo-brillo); text-shadow:0 0 40px var(--indigo-glow); }
.kpi.indigo .label { color:var(--indigo-claro); }
.kpi.ambar .big { color:var(--ambar); text-shadow:0 0 30px var(--ambar-glow); }
.kpi.ambar .label { color:var(--ambar); }
.kpi.coral .big { color:var(--coral); }
.kpi.coral .label { color:var(--coral); }

.mini-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px; }
.mini { border:1px solid var(--linea); border-radius:var(--r-lg); padding:16px 18px; background:var(--bg-2); transition:border-color var(--t),transform var(--t) var(--ez),background var(--t); cursor:default; }
.mini:hover { border-color:var(--linea-2); transform:translateY(-2px); background:var(--bg-3); }
.mini .label { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--txt-3); }
.mini .num { font-size:24px; font-weight:300; color:var(--txt); margin-top:4px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; transition:color var(--t); }
.mini:hover .num { color:var(--indigo-brillo); }

/* ───────────────────────── CARDS / BLOQUES ───────────────────────── */
.card, ul.caja, .bandera, .verde-box, .escenario, .copy-box, .proxima-accion, .linea-tiempo, .toc {
  border:1px solid var(--linea); border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  transition:border-color var(--t);
}
.card { padding:24px 28px; margin-bottom:24px; }
.card:hover, ul.caja:hover, .escenario:hover { border-color:var(--linea-2); }
.card .legend { font-family:var(--mono); font-size:11px; color:var(--txt-3); margin-bottom:16px; letter-spacing:.04em; }

ul.caja { padding:18px 20px 18px 38px; margin:16px 0; }
ul.caja li { margin-bottom:8px; line-height:1.6; color:var(--txt-2); }
ul.caja li::marker { color:var(--indigo); }

ol { padding-left:24px; margin:12px 0; }
ol li { margin-bottom:8px; color:var(--txt-2); }
ol li::marker { color:var(--indigo-claro); font-family:var(--mono); }

.bandera { padding:16px 22px; margin:16px 0; border-color:rgba(251,113,133,.3); background:rgba(251,113,133,.06); }
.bandera h4 { color:var(--coral); margin-top:0; }
.bandera ul { padding-left:22px; }
.bandera li { color:var(--txt-2); margin-bottom:6px; }
.bandera li::marker { color:var(--coral); }

.verde-box { padding:16px 22px; margin:16px 0; border-color:rgba(52,211,153,.3); background:rgba(52,211,153,.06); }
.verde-box h4 { color:var(--verde); margin-top:0; }
.verde-box ul { padding-left:22px; }
.verde-box li { color:var(--txt-2); margin-bottom:6px; }
.verde-box li::marker { color:var(--verde); }

.escenario { padding:18px 24px; margin:18px 0; }
.escenario h4 { font-size:16px; margin-top:0; }
.escenario.a { border-color:rgba(52,211,153,.3); } .escenario.a h4 { color:var(--verde); }
.escenario.b { border-color:rgba(251,191,36,.3); } .escenario.b h4 { color:var(--ambar); }
.escenario.c { border-color:rgba(251,113,133,.3); } .escenario.c h4 { color:var(--coral); }
.escenario ul { padding-left:22px; }
.escenario li { color:var(--txt-2); margin-bottom:6px; }

.copy-box {
  font-family:var(--mono); font-size:13px; white-space:pre-line; color:var(--txt);
  padding:18px 22px; margin:12px 0; line-height:1.6;
  border-color:var(--linea-2); border-style:dashed; background:var(--bg-2);
}

.ancla {
  text-align:center; font-size:18px; color:#fff; font-weight:400; line-height:1.5;
  padding:22px 28px; margin:20px auto; max-width:760px; border-radius:var(--r-xl);
  border:1px solid var(--indigo); background:radial-gradient(400px 150px at 50% 0%, rgba(99,102,241,.15), transparent 60%),var(--bg-3);
  box-shadow:0 0 30px rgba(99,102,241,.12);
}
.ancla i, .ancla em { color:var(--indigo-brillo); font-style:italic; }
.ancla b { color:#fff; }
.ancla.verde { border-color:var(--verde); background:radial-gradient(400px 150px at 50% 0%, rgba(52,211,153,.15), transparent 60%),var(--bg-3); box-shadow:0 0 30px rgba(52,211,153,.12); }
.ancla.verde i { color:var(--verde); }

.tarjeta {
  display:inline-block; vertical-align:top; width:280px; margin:8px; padding:18px 22px;
  border:1px solid var(--linea); border-radius:var(--r-lg); background:var(--bg-2);
  transition:border-color var(--t),transform var(--t) var(--ez),box-shadow var(--t);
}
.tarjeta:hover { border-color:var(--indigo); transform:translateY(-3px); box-shadow:0 12px 32px rgba(99,102,241,.15); }
.tarjeta h4 { margin:0 0 8px; color:var(--indigo-brillo); border-bottom:1px solid var(--linea); padding-bottom:6px; }
.tarjeta p { margin:0; font-size:12px; color:var(--txt-2); }
.tarjeta a { display:block; margin-top:10px; font-family:var(--mono); font-size:11px; color:var(--indigo-claro); text-decoration:none; }
.tarjeta a:hover { color:#C7D2FE; }

.proxima-accion {
  padding:18px 24px; margin:20px auto; text-align:center; max-width:760px;
  border-color:var(--indigo); background:radial-gradient(400px 150px at 50% 0%, rgba(99,102,241,.16), transparent 60%),var(--bg-3);
  box-shadow:0 0 30px rgba(99,102,241,.14);
}
.proxima-accion .cuando { font-family:var(--mono); color:var(--indigo-claro); font-weight:600; font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
.proxima-accion .que { color:#fff; font-size:20px; font-weight:600; margin-top:6px; font-family:var(--display); }
.proxima-accion .detalle { color:var(--txt-2); font-size:13px; margin-top:8px; }

.linea-tiempo { padding:18px; margin:20px auto; text-align:center; font-family:var(--mono); font-size:13px; }
.linea-tiempo .mes { display:inline-block; padding:6px 9px; margin:2px; border:1px solid var(--linea); min-width:54px; border-radius:6px; color:var(--txt-2); transition:all var(--t-fast); }
.linea-tiempo .mes:hover { border-color:var(--indigo); color:var(--indigo-brillo); }
.linea-tiempo .b1 { background:rgba(99,102,241,.08); } .linea-tiempo .b2 { background:rgba(129,140,248,.10); }
.linea-tiempo .b3 { background:rgba(67,56,202,.12); } .linea-tiempo .b4 { background:rgba(52,211,153,.10); }
.linea-tiempo .hito-mes { background:rgba(52,211,153,.18); color:var(--verde); font-weight:bold; border-color:var(--verde); }
.linea-tiempo .hoy { border:2px solid var(--indigo-brillo); font-weight:bold; box-shadow:0 0 12px var(--indigo-glow); }

.toc { padding:16px 30px; margin:20px auto; max-width:60%; }
.toc li { margin-bottom:4px; }
.toc a { color:var(--indigo-brillo); text-decoration:none; font-size:14px; }
.toc a:hover { color:#C7D2FE; text-decoration:underline; }

/* ───────────────────────── REEL ───────────────────────── */
.reel { border:1px solid var(--linea); border-radius:var(--r-lg); padding:14px 18px; margin:10px 0; background:var(--bg-2); transition:border-color var(--t),transform var(--t) var(--ez); }
.reel:hover { border-color:var(--linea-2); transform:translateX(3px); }
.reel .num { display:inline-block; background:linear-gradient(135deg,var(--indigo),var(--indigo-prof)); color:#fff; padding:3px 10px; margin-right:10px; font-family:var(--mono); font-weight:bold; font-size:13px; border-radius:6px; }
.reel .titulo { color:var(--indigo-brillo); font-weight:600; font-size:15px; font-family:var(--display); }
.reel .guion { display:block; color:var(--txt); margin-top:8px; font-style:italic; padding-left:20px; line-height:1.6; }
.reel .por-que { display:block; color:var(--verde); margin-top:6px; font-size:11px; padding-left:20px; font-style:italic; }

/* ───────────────────────── TABLAS ───────────────────────── */
table { width:100%; border-collapse:collapse; font-size:14px; margin:18px 0; border:1px solid var(--linea); border-radius:var(--r-lg); overflow:hidden; }
caption { font-weight:600; color:var(--indigo-brillo); padding:10px; background:var(--bg-2); font-family:var(--mono); font-size:13px; letter-spacing:.05em; border-bottom:1px solid var(--linea); }
th { text-align:left; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--txt-3); padding:12px 14px; border-bottom:1px solid var(--linea); font-weight:600; background:var(--bg-2); }
td { padding:13px 14px; border-bottom:1px solid var(--linea); color:var(--txt-2); vertical-align:top; transition:background var(--t-fast),color var(--t-fast),padding-left var(--t-fast) var(--ez); background:var(--bg-3); }
tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:rgba(99,102,241,.07); }
tbody tr:hover td:first-child { color:var(--indigo-brillo); }
td.semana { font-family:var(--mono); font-weight:bold; text-align:center; color:var(--indigo-brillo); background:rgba(99,102,241,.08); }
td.fechas { font-family:var(--mono); text-align:center; font-size:12px; color:var(--txt-2); background:rgba(99,102,241,.04); }
td.hito { background:rgba(52,211,153,.10); font-weight:bold; color:var(--verde); }
td.vacio { color:var(--txt-4); text-align:center; background:var(--bg-2); }
td.bloque1 { background:rgba(99,102,241,.06); } td.bloque2 { background:rgba(129,140,248,.07); }
td.bloque3 { background:rgba(67,56,202,.09); } td.bloque4 { background:rgba(52,211,153,.07); }
td .num { font-variant-numeric:tabular-nums; }
td .tag { display:inline-block; font-size:12px; font-weight:600; padding:3px 11px; border-radius:9999px; background:rgba(52,211,153,.12); color:var(--verde); border:1px solid rgba(52,211,153,.3); }

/* ───────────────────────── BARRAS ───────────────────────── */
.bar-row { margin-bottom:14px; }
.bar-label { font-family:var(--mono); font-size:11px; color:var(--txt-3); margin-bottom:5px; letter-spacing:.03em; transition:color var(--t-fast); }
.bar-row:hover .bar-label { color:var(--txt-2); }
.bar-track { height:14px; background:#0A0A12; border:1px solid var(--linea); border-radius:7px; position:relative; overflow:hidden; }
.bar-fill { height:100%; position:absolute; top:0; left:0; border-radius:7px; }
.b-total { background:linear-gradient(90deg,#2A2A40,#34344E); }
.b-call { background:linear-gradient(90deg,var(--ambar),#F59E0B); box-shadow:0 0 14px var(--ambar-glow); }
.b-close { background:linear-gradient(90deg,var(--verde),#10B981); box-shadow:0 0 18px var(--verde-glow); }
.bar-fill[data-w]::after { content:''; position:absolute; top:0; bottom:0; width:40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); transform:translateX(-150%); animation:barshine 3.8s ease-in-out 1.8s infinite; }
@keyframes barshine { 0%{transform:translateX(-150%)} 40%,100%{transform:translateX(350%)} }

/* ───────────────────────── BOTONES ───────────────────────── */
.btn, .btn-primario {
  display:inline-block; font-size:13px; font-weight:600; padding:10px 20px; border-radius:var(--r-md);
  text-decoration:none; color:#fff; cursor:pointer; border:none; font-family:var(--sans);
  background:linear-gradient(135deg,var(--indigo),var(--indigo-prof));
  box-shadow:0 4px 18px var(--indigo-glow); transition:transform var(--t-fast) var(--ez-spring),box-shadow var(--t-fast); position:relative; overflow:hidden;
}
.btn::before, .btn-primario::before { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); transition:left var(--t-slow) var(--ez); }
.btn:hover, .btn-primario:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 8px 30px var(--indigo-glow),0 0 0 1px var(--indigo-claro); color:#fff; }
.btn:hover::before, .btn-primario:hover::before { left:120%; }
.btn:active, .btn-primario:active { transform:translateY(0) scale(.99); }
.btn.ghost, .btn-secundario { background:transparent; border:1px solid var(--linea-2); box-shadow:none; color:var(--txt-2); }
.btn.ghost:hover, .btn-secundario:hover { border-color:var(--indigo); color:var(--indigo-brillo); box-shadow:0 0 18px rgba(99,102,241,.15); }
.btn.ghost::before, .btn-secundario::before { display:none; }
.btn-cancelar { background:transparent; border:1px solid var(--linea-2); box-shadow:none; color:var(--txt-2); }
.btn-cancelar:hover { border-color:var(--txt-3); color:var(--txt); }
.btn-confirmar { background:linear-gradient(135deg,var(--coral),#E11D48); box-shadow:0 4px 18px var(--coral-glow); }
.btn-confirmar:hover { box-shadow:0 8px 28px var(--coral-glow); transform:translateY(-2px); color:#fff; }

/* ───────────────────────── FORMULARIOS ───────────────────────── */
.form-ecd { border:1px solid var(--linea); border-radius:var(--r-xl); background:linear-gradient(180deg,var(--bg-3),var(--bg-2)); padding:22px 26px; margin:20px 0; }
.form-row { display:flex; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.form-row label { display:flex; flex-direction:column; font-weight:600; color:var(--txt-2); flex:1; font-size:12px; min-width:180px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.form-row label.ancho { flex:1 1 100%; }
.form-row input, .form-row select, .form-row textarea {
  margin-top:6px; padding:9px 11px; border:1px solid var(--linea-2); border-radius:var(--r-md);
  font-family:var(--sans); font-size:14px; background:var(--bg); color:var(--txt); font-weight:400; text-transform:none; letter-spacing:0;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px var(--indigo-glow); }
.form-row textarea { resize:vertical; min-height:60px; line-height:1.5; }
.form-row input::placeholder, .form-row textarea::placeholder { color:var(--txt-4); }
.form-hint { color:var(--indigo-claro); font-weight:400; font-style:italic; font-size:10px; text-transform:none; letter-spacing:0; }
.form-actions { margin-top:20px; border-top:1px solid var(--linea); padding-top:16px; }

/* ───────────────────────── MODAL ───────────────────────── */
.modal-confirmacion {
  border:1px solid var(--indigo); background:linear-gradient(180deg,var(--bg-3),var(--bg-2)); color:var(--txt);
  font-family:var(--sans); padding:24px 30px; min-width:340px; max-width:480px; border-radius:var(--r-xl);
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(99,102,241,.2);
}
.modal-confirmacion::backdrop { background:rgba(7,7,12,.7); backdrop-filter:blur(2px); }
.modal-confirmacion h3 { font-family:var(--display); color:var(--indigo-brillo); margin:0 0 10px; font-size:20px; border:none; padding:0; }
.modal-confirmacion p { color:var(--txt-2); line-height:1.5; margin:12px 0; }
.modal-acciones { margin-top:24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.modal-acciones a, .modal-acciones button { display:inline-block; padding:10px 22px; font-family:var(--sans); font-size:14px; font-weight:600; text-decoration:none; border:none; cursor:pointer; border-radius:var(--r-md); }

/* ───────────────────────── ASISTENTE IA (ventana flotante) ───────────────────────── */
.ai-fab {
  position:fixed; right:22px; bottom:22px; z-index:9000; width:54px; height:54px; border-radius:50%;
  border:1px solid var(--indigo-claro); cursor:pointer; color:#fff; font-size:22px; line-height:1;
  background:linear-gradient(135deg,var(--indigo),var(--indigo-prof));
  box-shadow:0 8px 28px var(--indigo-glow),0 0 0 1px var(--indigo);
  transition:transform var(--t-fast) var(--ez-spring),box-shadow var(--t-fast);
  display:flex; align-items:center; justify-content:center;
}
.ai-fab:hover { transform:translateY(-3px) scale(1.06); box-shadow:0 12px 36px var(--indigo-glow),0 0 0 1px var(--indigo-claro); }
.ai-fab:active { transform:translateY(0) scale(.97); }
.ai-fab span { animation:blink 2.4s steps(2) 2s infinite; }
.ai-fab.abierto { transform:scale(.92); opacity:.85; }

.ai-panel {
  position:fixed; right:22px; bottom:88px; z-index:9001;
  width:min(900px, calc(100vw - 32px)); height:min(760px, calc(100vh - 110px));
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--linea-2); border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 40px rgba(99,102,241,.15);
  animation:aiPop .26s var(--ez);
}
/* Sin esto, `.ai-panel{display:flex}` le gana al atributo [hidden] y no se minimiza. */
.ai-panel[hidden] { display:none; }
@keyframes aiPop { from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:none;} }
.ai-head {
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  border-bottom:1px solid var(--linea); background:var(--bg-2);
}
.ai-head .ai-title { font-family:var(--display); font-size:15px; color:var(--indigo-brillo); }
.ai-head-acc { display:flex; gap:4px; }
.ai-iconbtn {
  background:transparent; border:1px solid var(--linea-2); color:var(--txt-3); cursor:pointer;
  width:28px; height:28px; border-radius:8px; font-size:14px; line-height:1; transition:all var(--t-fast);
}
.ai-iconbtn:hover { border-color:var(--indigo); color:var(--indigo-brillo); }

.ai-log { flex:1; padding:16px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; }
.ai-msg { max-width:88%; padding:10px 13px; border-radius:var(--r-lg); line-height:1.6; font-size:13.5px; word-wrap:break-word; overflow-wrap:anywhere; }
.ai-msg.user { align-self:flex-end; background:linear-gradient(135deg,var(--indigo),var(--indigo-prof)); color:#fff; border-bottom-right-radius:4px; white-space:pre-wrap; }
.ai-msg.bot { align-self:flex-start; background:var(--bg-4); color:var(--txt); border:1px solid var(--linea); border-bottom-left-radius:4px; }
.ai-msg.bot a { color:var(--indigo-brillo); } .ai-msg.bot a:hover { color:#C7D2FE; }
.ai-msg.bot code { background:var(--bg); font-size:.9em; }
.ai-msg.bot strong { color:#fff; }
.ai-msg.sys { align-self:stretch; text-align:center; font-size:12px; color:var(--txt-3); font-style:italic; }
.ai-msg.err { align-self:stretch; background:rgba(251,113,133,.1); border:1px solid rgba(251,113,133,.3); color:var(--coral); font-size:12.5px; }
.ai-typing { align-self:flex-start; color:var(--txt-3); font-size:12.5px; font-style:italic; padding:2px 4px; }
.ai-typing::after { content:'…'; animation:blink 1.1s steps(2) infinite; }

.ai-compose { display:flex; gap:8px; align-items:flex-end; padding:10px 12px; border-top:1px solid var(--linea); background:var(--bg-2); }
.ai-compose textarea {
  flex:1; resize:none; padding:9px 11px; border:1px solid var(--linea-2); border-radius:var(--r-md);
  background:var(--bg); color:var(--txt); font-family:var(--sans); font-size:13.5px; line-height:1.45;
  min-height:38px; max-height:140px; transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.ai-compose textarea:focus { outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px var(--indigo-glow); }
.ai-compose textarea::placeholder { color:var(--txt-4); }
.ai-send {
  flex:0 0 auto; width:38px; height:38px; border:none; border-radius:var(--r-md); cursor:pointer; color:#fff; font-size:15px;
  background:linear-gradient(135deg,var(--indigo),var(--indigo-prof)); box-shadow:0 4px 14px var(--indigo-glow);
  transition:transform var(--t-fast) var(--ez-spring),box-shadow var(--t-fast);
}
.ai-send:hover { transform:translateY(-1px); box-shadow:0 6px 20px var(--indigo-glow); }
.ai-send:disabled { opacity:.45; cursor:default; transform:none; }

@media (max-width:520px){
  .ai-panel { right:10px; left:10px; bottom:78px; width:auto; height:min(70vh, calc(100vh - 100px)); }
  .ai-fab { right:14px; bottom:14px; }
}

/* ───────────────────────── FOOTER ───────────────────────── */
footer.app, .firma {
  text-align:center; font-style:italic; color:var(--txt-3); margin-top:48px; padding-top:20px;
  border-top:1px solid var(--linea); font-size:12px;
}
footer.app i, .firma i { color:var(--indigo-claro); }

.leyenda { text-align:center; margin:14px 0; font-size:12px; color:var(--txt-2); }
.leyenda span { padding:3px 10px; border:1px solid var(--linea); margin:0 4px; border-radius:6px; }

center { display:block; text-align:center; }

/* ───────────────────────── ANIMACIÓN: respeta reduce ───────────────────────── */
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* ───────────────────────── RESPONSIVE ───────────────────────── */
@media (max-width:820px){
  .kpis, .kpis-3, .mini-kpis { grid-template-columns:1fr 1fr; }
  header.app { padding:28px 22px; }
  header.app .meta { position:static; text-align:left; margin-top:14px; }
  header.app h1 { font-size:28px; }
  .toc { max-width:100%; }
  .tarjeta { width:100%; }
  table { display:block; overflow-x:auto; }
  .form-row { flex-direction:column; }
}
@media (max-width:520px){ .kpis, .kpis-3, .mini-kpis { grid-template-columns:1fr; } body{ padding:20px 14px 60px; } }