/* ===== Animaciones y color extra (estilo Tu CMO) ===== */
body {
  background:
    radial-gradient(900px 420px at 100% -10%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%),
    radial-gradient(700px 360px at -10% 110%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes spin-in { from { transform: rotate(-120deg) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 0%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 22%, transparent); } }

.card, .stage, .sg, .end, .st, .top, .kp > div, .age > div { animation: rise .55s cubic-bezier(.2,.8,.2,1) both; }
.bar > i, .meter i, .risk i { transform-origin: left center; animation: grow 1.1s cubic-bezier(.2,.8,.2,1) both; animation-delay: .35s; }
.dot { animation: pulse 1.8s ease-out infinite; }
.donut { animation: spin-in 1.1s cubic-bezier(.2,.8,.2,1) both .2s; }
.st.bad, .stage.crit, .stage.alert { animation: rise .55s both, glow 2.4s ease-in-out 1.2s infinite; }

.card, .stage, .sg, .end { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover, .stage:hover, .sg:hover, .end:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--accent) 35%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }

/* KPI con franja de color arriba */
.card.kpi { position: relative; overflow: hidden; }
.card.kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.card.kpi:has(.v.up)::before { background: linear-gradient(90deg, var(--ok), #58c98a); }
.card.kpi:has(.v.mid)::before { background: linear-gradient(90deg, var(--warn), #f0b545); }
.card.kpi:has(.v.down)::before { background: linear-gradient(90deg, var(--bad), #f07167); }

/* título con degradé naranja como el hero de Tu CMO */
.top h1 { background: linear-gradient(90deg, var(--text) 0 55%, var(--accent) 80%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: rise .55s both, shine 6s linear 1s infinite; }

/* tarjeta negra tipo "reporte de las 17:00" con borde brillante */
.ink { position: relative; background: radial-gradient(600px 200px at 100% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%), var(--ink-card); }

/* líneas del gráfico que se dibujan */
svg.chart polyline { transition: none; }

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