/* Animaciones de entrada y prefers-reduced-motion. Se carga al final a propósito. */

/* ==========================================================================
   Micro-interacciones (overhaul visual)
   ========================================================================== */

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.panel,
.stat-card,
.kpi-card,
.dashboard-greeting {
    /* "backwards" (no "both"/"forwards"): tras terminar la animación, el navegador
       deja de aplicar el transform final (translateY(0)) en vez de dejarlo fijado
       para siempre. Un transform permanente en un .panel rompe el position:fixed
       de cualquier modal Bootstrap anidado dentro (deja de centrarse y su z-index
       queda atrapado por debajo del backdrop, que se añade directamente a <body>). */
    animation: fade-in-up .35s ease-out backwards;
}

/* Recargando la misma página (pestañas, filtros, paginación; lo marca el script
   de _HeadPartial) no se anima la entrada: se notaba como un destello */
.sin-animacion-entrada .panel,
.sin-animacion-entrada .stat-card,
.sin-animacion-entrada .kpi-card,
.sin-animacion-entrada .dashboard-greeting {
    animation: none;
}

/* Cambio entre páginas con un fundido cruzado en vez de pasar por la pantalla
   en blanco (Chrome/Edge; el resto de navegadores lo ignora) */
@view-transition {
    navigation: auto;
}

/* Cascada de entrada para las tarjetas KPI de una misma fila:
   envolver la fila con .stat-grid para que cada .col se anime
   con un pequeño retraso creciente respecto al anterior. */
.stat-grid > [class*="col"]:nth-child(1) .kpi-card { animation-delay: .00s; }
.stat-grid > [class*="col"]:nth-child(2) .kpi-card { animation-delay: .03s; }
.stat-grid > [class*="col"]:nth-child(3) .kpi-card { animation-delay: .06s; }
.stat-grid > [class*="col"]:nth-child(4) .kpi-card { animation-delay: .09s; }
.stat-grid > [class*="col"]:nth-child(5) .kpi-card { animation-delay: .12s; }
.stat-grid > [class*="col"]:nth-child(6) .kpi-card { animation-delay: .15s; }
.stat-grid > [class*="col"]:nth-child(7) .kpi-card { animation-delay: .18s; }
.stat-grid > [class*="col"]:nth-child(8) .kpi-card { animation-delay: .21s; }
.stat-grid > [class*="col"]:nth-child(9) .kpi-card { animation-delay: .24s; }
.stat-grid > [class*="col"]:nth-child(10) .kpi-card { animation-delay: .27s; }
.stat-grid > [class*="col"]:nth-child(11) .kpi-card { animation-delay: .30s; }
.stat-grid > [class*="col"]:nth-child(12) .kpi-card { animation-delay: .33s; }
.stat-grid > [class*="col"]:nth-child(13) .kpi-card { animation-delay: .36s; }
.stat-grid > [class*="col"]:nth-child(14) .kpi-card { animation-delay: .39s; }

/* Respeta la preferencia del sistema de reducir el movimiento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}