/* ==========================================================================
   SIAC — animaciones de la interfaz
   Se cargan en el layout principal (_Layout) y en el del login (_LayoutSimple).
   Todo va dentro de prefers-reduced-motion: no-preference, así que quien desactivó
   las animaciones en su sistema operativo (accesibilidad) ve la interfaz sin movimiento.
   Para quitar todas las animaciones basta con no cargar esta hoja.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

    /* Curvas y duraciones comunes */
    :root {
        --siac-anim-rapida: .15s;
        --siac-anim-media: .3s;
        --siac-anim-lenta: .5s;
        --siac-curva: cubic-bezier(.2, .7, .2, 1);
    }

    @keyframes siac-entrar {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes siac-entrar-izquierda {
        from { opacity: 0; transform: translateX(-16px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes siac-entrar-derecha {
        from { opacity: 0; transform: translateX(24px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes siac-bajar {
        from { opacity: 0; transform: translateY(-100%); }
        to { opacity: 1; transform: none; }
    }

    @keyframes siac-desvanecer {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes siac-acercar {
        from { opacity: 0; transform: scale(.96); }
        to { opacity: 1; transform: none; }
    }

    @keyframes siac-latido {
        0%, 100% { transform: none; }
        50% { transform: scale(1.06); }
    }

    /* Encabezado y barra de usuario
       ====================================================================== */
    .siac-header-bar {
        animation: siac-bajar var(--siac-anim-lenta) var(--siac-curva) backwards;
    }

    .siac-userbar {
        animation: siac-desvanecer var(--siac-anim-lenta) .15s ease backwards;
    }

    /* Botón de regresar: la flecha se mueve hacia la izquierda */
    .siac-back i {
        transition: transform var(--siac-anim-media) var(--siac-curva);
    }

    .siac-back:hover i {
        transform: translateX(-3px);
    }

    /* Subrayado dorado que crece desde el centro en las opciones del menú superior */
    .siac-nav a,
    .siac-nav button {
        position: relative;
    }

    .siac-nav a::after,
    .siac-nav button::after {
        content: "";
        position: absolute;
        right: 1rem;
        bottom: 12px;
        left: 1rem;
        height: 2px;
        border-radius: 2px;
        background: var(--snd-dorado-300);
        transform: scaleX(0);
        transition: transform var(--siac-anim-media) var(--siac-curva);
    }

    .siac-nav a:hover::after,
    .siac-nav button:hover::after,
    .siac-nav a.active::after {
        transform: scaleX(1);
    }

    .siac-servicio {
        transition: background-color var(--siac-anim-rapida), border-color var(--siac-anim-rapida), color var(--siac-anim-rapida), transform var(--siac-anim-rapida);
    }

    .siac-servicio:hover {
        transform: translateY(-1px);
    }

    /* Contenido de la página: entra en cascada
       ====================================================================== */
    .siac-breadcrumb,
    .siac-page-header {
        animation: siac-entrar-izquierda var(--siac-anim-lenta) var(--siac-curva) backwards;
    }

    .siac-page-header {
        animation-delay: .05s;
    }

    .siac-page > :not(.siac-breadcrumb):not(.siac-page-header) {
        animation: siac-entrar var(--siac-anim-lenta) var(--siac-curva) backwards;
    }

    .siac-page > :nth-child(3) { animation-delay: .1s; }
    .siac-page > :nth-child(4) { animation-delay: .15s; }
    .siac-page > :nth-child(5) { animation-delay: .2s; }
    .siac-page > :nth-child(6) { animation-delay: .25s; }
    .siac-page > :nth-child(n+7) { animation-delay: .3s; }

    /* Indicadores: entran uno tras otro y se elevan al pasar el cursor */
    .siac-kpi {
        animation: siac-acercar var(--siac-anim-lenta) var(--siac-curva) backwards;
        transition: transform var(--siac-anim-media) var(--siac-curva), box-shadow var(--siac-anim-media);
    }

    .row > :nth-child(2) > .siac-kpi { animation-delay: .08s; }
    .row > :nth-child(3) > .siac-kpi { animation-delay: .16s; }

    .siac-kpi:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(22, 26, 29, .08);
    }

    .siac-kpi:hover .siac-kpi-icono {
        animation: siac-latido .6s ease;
    }

    /* Tarjetas del menú de opciones: aparecen en cascada */
    .siac-menu-grid .siac-modulo {
        animation: siac-entrar var(--siac-anim-lenta) var(--siac-curva) backwards;
        transition: transform var(--siac-anim-media) var(--siac-curva), box-shadow var(--siac-anim-media), border-color var(--siac-anim-media);
    }

    .siac-menu-grid .siac-modulo:nth-child(2) { animation-delay: .03s; }
    .siac-menu-grid .siac-modulo:nth-child(3) { animation-delay: .06s; }
    .siac-menu-grid .siac-modulo:nth-child(4) { animation-delay: .09s; }
    .siac-menu-grid .siac-modulo:nth-child(5) { animation-delay: .12s; }
    .siac-menu-grid .siac-modulo:nth-child(6) { animation-delay: .15s; }
    .siac-menu-grid .siac-modulo:nth-child(7) { animation-delay: .18s; }
    .siac-menu-grid .siac-modulo:nth-child(8) { animation-delay: .21s; }
    .siac-menu-grid .siac-modulo:nth-child(9) { animation-delay: .24s; }
    .siac-menu-grid .siac-modulo:nth-child(10) { animation-delay: .27s; }
    .siac-menu-grid .siac-modulo:nth-child(11) { animation-delay: .3s; }
    .siac-menu-grid .siac-modulo:nth-child(12) { animation-delay: .33s; }
    .siac-menu-grid .siac-modulo:nth-child(n+13) { animation-delay: .36s; }

    .siac-menu-grid .siac-modulo:hover {
        transform: translateY(-4px);
    }

    .siac-modulo-icono {
        transition: background-color var(--siac-anim-media), transform var(--siac-anim-media) var(--siac-curva);
    }

    .siac-modulo:hover .siac-modulo-icono {
        transform: rotate(-4deg) scale(1.05);
    }

    /* Selector de sector */
    .siac-sectores-intro {
        animation: siac-entrar var(--siac-anim-lenta) var(--siac-curva) backwards;
    }

    /* Botones
       ====================================================================== */
    .btn,
    .k-button {
        transition: background-color var(--siac-anim-rapida), border-color var(--siac-anim-rapida), color var(--siac-anim-rapida),
                    box-shadow var(--siac-anim-rapida), transform var(--siac-anim-rapida);
    }

    .btn:active,
    .k-button:active {
        transform: scale(.97);
    }

    .btn .fa-arrow-right,
    .btn .fa-sign-in,
    .siac-modulo-ir i {
        transition: transform var(--siac-anim-media) var(--siac-curva);
    }

    .btn:hover .fa-arrow-right,
    .btn:hover .fa-sign-in {
        transform: translateX(3px);
    }

    /* Campos: el borde y el halo de enfoque cambian suavemente */
    .form-control,
    .custom-select,
    .k-textbox,
    .k-textarea,
    .k-dropdown-wrap,
    .k-picker-wrap,
    .k-numeric-wrap,
    .k-multiselect-wrap {
        transition: border-color var(--siac-anim-rapida), box-shadow var(--siac-anim-media);
    }

    /* Componentes de Kendo
       ====================================================================== */
    /* Filas del grid: aparecen al cargar, paginar, filtrar u ordenar */
    .siac .k-grid-content tbody tr,
    .siac .k-grid > table > tbody tr {
        animation: siac-desvanecer var(--siac-anim-media) ease backwards;
    }

    .siac .k-grid tbody tr {
        transition: background-color var(--siac-anim-rapida);
    }

    /* Contenido de pestañas */
    .siac .k-tabstrip > .k-content.k-state-active {
        animation: siac-entrar var(--siac-anim-media) var(--siac-curva) backwards;
    }

    .siac .k-tabstrip-items .k-item {
        transition: border-color var(--siac-anim-media), color var(--siac-anim-media);
    }

    /* Paneles plegables */
    .siac .k-expander {
        transition: box-shadow var(--siac-anim-media);
    }

    .siac .k-expander-indicator .k-icon {
        transition: transform var(--siac-anim-media) var(--siac-curva);
    }

    /* Ventanas y fondo oscuro */
    .siac .k-window {
        animation: siac-acercar var(--siac-anim-media) var(--siac-curva) backwards;
    }

    .siac .k-overlay {
        animation: siac-desvanecer var(--siac-anim-media) ease backwards;
    }

    /* Interruptores */
    .siac .k-switch-container,
    .siac .k-switch-handle {
        transition: background-color var(--siac-anim-media), left var(--siac-anim-media) var(--siac-curva), transform var(--siac-anim-media) var(--siac-curva);
    }

    /* Avisos y etiquetas
       ====================================================================== */
    .siac .alert,
    .login-siac .alert {
        animation: siac-entrar var(--siac-anim-media) var(--siac-curva) backwards;
    }

    .siac-estado,
    .siac-tipo {
        animation: siac-acercar var(--siac-anim-media) ease backwards;
    }

    /* Login
       ====================================================================== */
    .login-siac .login-hero-content > * {
        animation: siac-entrar .7s var(--siac-curva) backwards;
    }

    .login-siac .login-hero-content > :nth-child(2) { animation-delay: .15s; }
    .login-siac .login-hero-content > :nth-child(3) { animation-delay: .3s; }

    .login-siac .login-hero .divisor {
        animation: siac-crecer .8s .4s var(--siac-curva) backwards;
        transform-origin: left;
    }

    @keyframes siac-crecer {
        from { transform: scaleX(0); }
        to { transform: none; }
    }

    .login-siac .login-panel-body > * {
        animation: siac-entrar-derecha var(--siac-anim-lenta) var(--siac-curva) backwards;
    }

    .login-siac .login-panel-body > :nth-child(2) { animation-delay: .05s; }
    .login-siac .login-panel-body > :nth-child(3) { animation-delay: .1s; }
    .login-siac .login-panel-body > :nth-child(4) { animation-delay: .15s; }
    .login-siac .login-panel-body > :nth-child(n+5) { animation-delay: .2s; }

    .login-siac .login-hero .accesos a {
        transition: opacity var(--siac-anim-rapida), transform var(--siac-anim-rapida);
    }

    .login-siac .login-hero .accesos a:hover {
        transform: translateY(-1px);
    }
}