/* Animaciones de la plataforma (dirección, administrativos, profesores y alumnos). Van en su
   propio archivo, encima de neobrutalism.css, y solo si el equipo no pide «reducir movimiento».
   Las que necesitan código están en public/js/animaciones.js. Las pantallas del profesor
   hechas con Tailwind (.prof-tw) se quedan fuera: tienen sus propios estilos. */

@media (prefers-reduced-motion: no-preference) {

    /* ── Botones: se levantan al pasar y se hunden contra su sombra al pulsar ── */
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .wrap-body:not(.prof-tw) .btn,
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .modal .btn,
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .almhead .btn,
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .comBtns {
        transition: transform .16s cubic-bezier(.3, 1.5, .5, 1), box-shadow .16s ease, background-color .15s ease !important;
    }
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .btn:hover,
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .comBtns:hover {
        transform: translate(-2px, -2px) !important;
        box-shadow: 5px 5px 0 var(--brand-black) !important;
    }
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .btn:active,
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .comBtns:active {
        transform: translate(2px, 2px) !important;
        box-shadow: 0 0 0 var(--brand-black) !important;
        transition-duration: .05s !important;
    }
    /* El icono del botón da un pequeño empujón */
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .btn i { transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .btn:hover i { transform: scale(1.15) rotate(-6deg); }

    /* ── Tarjetas del Inicio y accesos rápidos ── */
    body:is(.role-director, .role-administrativo) .adm-stat,
    body:is(.role-director, .role-administrativo) .adm-quick {
        transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s ease !important;
    }
    body:is(.role-director, .role-administrativo) .adm-stat:hover,
    body:is(.role-director, .role-administrativo) .adm-quick:hover {
        transform: translate(-3px, -4px) rotate(-.6deg) !important;
    }
    body:is(.role-director, .role-administrativo) .adm-stat:active,
    body:is(.role-director, .role-administrativo) .adm-quick:active {
        transform: translate(2px, 2px) !important;
        box-shadow: 1px 1px 0 var(--brand-black) !important;
    }
    body:is(.role-director, .role-administrativo) .adm-stat b { display: block; transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); }
    body:is(.role-director, .role-administrativo) .adm-stat:hover b { transform: scale(1.12); }
    body:is(.role-director, .role-administrativo) .adm-quick i { transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); }
    body:is(.role-director, .role-administrativo) .adm-quick:hover i { transform: scale(1.2) rotate(-8deg); }

    /* ── Entrada de cada página: los bloques suben uno detrás de otro ── */
    body:is(.role-director, .role-administrativo) .adm-main .wrap-body > *,
    body:is(.role-director, .role-administrativo) .adm-main .wrap-body > .adm-inicio > *,
    body.role-profesor .prof-main .wrap-body:not(.prof-tw) > * {
        animation: anim-sube .42s cubic-bezier(.2, .8, .3, 1) backwards;
    }
    body:is(.role-director, .role-administrativo) .adm-main .wrap-body > .adm-inicio { animation: none; }
    body:is(.role-director, .role-administrativo) .adm-main .wrap-body > :nth-child(2),
    body:is(.role-director, .role-administrativo) .adm-main .wrap-body > .adm-inicio > :nth-child(2),
    body.role-profesor .prof-main .wrap-body:not(.prof-tw) > :nth-child(2) { animation-delay: .05s; }
    body:is(.role-director, .role-administrativo) .adm-main .wrap-body > :nth-child(3),
    body:is(.role-director, .role-administrativo) .adm-main .wrap-body > .adm-inicio > :nth-child(3),
    body.role-profesor .prof-main .wrap-body:not(.prof-tw) > :nth-child(3) { animation-delay: .1s; }
    body:is(.role-director, .role-administrativo) .adm-main .wrap-body > :nth-child(4),
    body:is(.role-director, .role-administrativo) .adm-main .wrap-body > .adm-inicio > :nth-child(4),
    body.role-profesor .prof-main .wrap-body:not(.prof-tw) > :nth-child(4) { animation-delay: .15s; }
    body:is(.role-director, .role-administrativo) .adm-main .wrap-body > :nth-child(5),
    body:is(.role-director, .role-administrativo) .adm-main .wrap-body > .adm-inicio > :nth-child(5),
    body.role-profesor .prof-main .wrap-body:not(.prof-tw) > :nth-child(5) { animation-delay: .2s; }
    body:is(.role-director, .role-administrativo) .adm-main .wrap-body > :nth-child(n+6),
    body:is(.role-director, .role-administrativo) .adm-main .wrap-body > .adm-inicio > :nth-child(n+6),
    body.role-profesor .prof-main .wrap-body:not(.prof-tw) > :nth-child(n+6) { animation-delay: .25s; }
    /* Las cuatro cifras del Inicio saltan en fila */
    body:is(.role-director, .role-administrativo) .adm-stats > .adm-stat { animation: anim-salta .5s cubic-bezier(.3, 1.5, .5, 1) backwards; }
    body:is(.role-director, .role-administrativo) .adm-stats > .adm-stat:nth-child(1) { animation-delay: .12s; }
    body:is(.role-director, .role-administrativo) .adm-stats > .adm-stat:nth-child(2) { animation-delay: .19s; }
    body:is(.role-director, .role-administrativo) .adm-stats > .adm-stat:nth-child(3) { animation-delay: .26s; }
    body:is(.role-director, .role-administrativo) .adm-stats > .adm-stat:nth-child(4) { animation-delay: .33s; }

    /* ── Ventanas emergentes: crecen con un pequeño rebote ── */
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .modal.fade .modal-dialog {
        transform: scale(.9) translateY(24px);
        transition: transform .3s cubic-bezier(.2, 1.3, .4, 1);
    }
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .modal.show .modal-dialog { transform: none; }

    /* ── Cabecera: la campana se menea si hay avisos y los globos aparecen con un salto ── */
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .adm-bell-btn:has(.adm-bell-count:not([hidden])) > i { transform-origin: 50% 10%; animation: anim-campana 5s ease-in-out 1s infinite; }
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .adm-bell-count:not([hidden]) { animation: anim-globo .45s cubic-bezier(.3, 1.8, .5, 1) backwards; }
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .adm-bell-btn { transition: transform .16s cubic-bezier(.3, 1.5, .5, 1), box-shadow .16s ease; }
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .adm-bell-btn:hover { transform: translate(-2px, -2px) rotate(-4deg); }
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .adm-bell-btn:active { transform: translate(2px, 2px); }

    /* ── Menú lateral: la opción se desliza y su icono se asoma ── */
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .adm-sidebar .nav-panel-btn { transition: transform .16s cubic-bezier(.3, 1.5, .5, 1), background-color .15s ease !important; }
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .adm-sidebar .nav-panel-btn:hover { transform: translateX(5px) !important; }
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .adm-sidebar .nav-panel-btn i,
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .adm-sidebar .nav-panel-btn svg { transition: transform .22s cubic-bezier(.3, 1.8, .5, 1); }
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .adm-sidebar .nav-panel-btn:hover :is(i, svg) { transform: scale(1.18) rotate(-8deg); }

    /* ── Tablas: la fila se marca al pasar ── */
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) table tbody tr { transition: background-color .12s ease; }

    /* ── Pestañas de la ficha: se levantan al pasar, la activa queda más alta y el contenido
          entra desde el lado hacia el que se ha ido (clases que pone alumno-ficha-pestanas.js) ── */
    body:is(.role-director, .role-administrativo) .adm-tabs { align-items: flex-end; }
    body:is(.role-director, .role-administrativo) .adm-tabs button { transition: transform .18s cubic-bezier(.3, 1.5, .5, 1), padding .18s ease, background-color .15s ease !important; }
    body:is(.role-director, .role-administrativo) .adm-tabs button:hover:not(.active) { transform: translateY(-4px); }
    body:is(.role-director, .role-administrativo) .adm-tabs button.active { padding-top: 13px !important; }
    body:is(.role-director, .role-administrativo) .adm-tabs button i { transition: transform .22s cubic-bezier(.3, 1.8, .5, 1); }
    body:is(.role-director, .role-administrativo) .adm-tabs button:hover i,
    body:is(.role-director, .role-administrativo) .adm-tabs button.active i { transform: scale(1.15) rotate(-6deg); }
    body:is(.role-director, .role-administrativo) .anim-entra-der { animation: anim-entra-der .26s cubic-bezier(.2, .8, .3, 1); }
    body:is(.role-director, .role-administrativo) .anim-entra-izq { animation: anim-entra-izq .26s cubic-bezier(.2, .8, .3, 1); }
    body:is(.role-director, .role-administrativo) .anim-entra-abajo { animation: anim-sube .3s cubic-bezier(.2, .8, .3, 1) backwards; }

    /* ── Profesor: cifras del Inicio, tarjetas de hoy y de asignaturas ── */
    body.role-profesor .prof-stat,
    body.role-profesor .prof-hub-card,
    body.role-profesor .prof-asg-card { transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s ease !important; }
    body.role-profesor .prof-stat:hover,
    body.role-profesor .prof-asg-card:hover { transform: translate(-3px, -4px) rotate(-.6deg) !important; }
    body.role-profesor .prof-hub-card:hover { transform: translate(-2px, -3px) !important; }
    body.role-profesor .prof-stat:active,
    body.role-profesor .prof-asg-card:active { transform: translate(2px, 2px) !important; box-shadow: 1px 1px 0 var(--brand-black) !important; }
    body.role-profesor .prof-stat-value { display: inline-block; transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); }
    body.role-profesor .prof-stat:hover .prof-stat-value { transform: scale(1.15); }
    body.role-profesor .prof-stats > .prof-stat { animation: anim-salta .5s cubic-bezier(.3, 1.5, .5, 1) backwards; }
    body.role-profesor .prof-stats > .prof-stat:nth-child(1) { animation-delay: .12s; }
    body.role-profesor .prof-stats > .prof-stat:nth-child(2) { animation-delay: .19s; }
    body.role-profesor .prof-stats > .prof-stat:nth-child(3) { animation-delay: .26s; }
    body.role-profesor .prof-stats > .prof-stat:nth-child(4) { animation-delay: .33s; }
    body.role-profesor .prof-asg-grid > .prof-asg-card { animation: anim-sube .4s cubic-bezier(.2, .8, .3, 1) backwards; }
    body.role-profesor .prof-asg-grid > .prof-asg-card:nth-child(2) { animation-delay: .05s; }
    body.role-profesor .prof-asg-grid > .prof-asg-card:nth-child(3) { animation-delay: .1s; }
    body.role-profesor .prof-asg-grid > .prof-asg-card:nth-child(n+4) { animation-delay: .15s; }

    /* ── Pestañas de Bootstrap (asignatura del profesor y demás): el contenido entra subiendo ── */
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .tab-content > .tab-pane.active { animation: anim-sube .3s cubic-bezier(.2, .8, .3, 1); }
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .nav-tabs .nav-link { transition: transform .18s cubic-bezier(.3, 1.5, .5, 1), background-color .15s ease; }
    body:is(.role-director, .role-administrativo, .role-profesor, .role-alumno) .nav-tabs .nav-link:hover:not(.active) { transform: translateY(-3px); }

    /* ── Alumno: cada sección entra con sus bloques en cascada; tarjetas que responden al tocar ── */
    body.role-alumno .dashboard-panel.panel-visible > *,
    body.role-alumno .dashboard-panel.panel-visible .alm-home-grid > * { animation: anim-sube .4s cubic-bezier(.2, .8, .3, 1) backwards; }
    body.role-alumno .dashboard-panel.panel-visible > :nth-child(2),
    body.role-alumno .dashboard-panel.panel-visible .alm-home-grid > :nth-child(1) { animation-delay: .05s; }
    body.role-alumno .dashboard-panel.panel-visible > :nth-child(3),
    body.role-alumno .dashboard-panel.panel-visible .alm-home-grid > :nth-child(2) { animation-delay: .1s; }
    body.role-alumno .dashboard-panel.panel-visible > :nth-child(4),
    body.role-alumno .dashboard-panel.panel-visible .alm-home-grid > :nth-child(3) { animation-delay: .15s; }
    body.role-alumno .dashboard-panel.panel-visible > :nth-child(n+5),
    body.role-alumno .dashboard-panel.panel-visible .alm-home-grid > :nth-child(n+4) { animation-delay: .2s; }
    /* OJO: la tarjeta de vídeo (.videoclase) no se mueve: lleva dentro la ventana del vídeo, y un
       transform en la tarjeta hace que esa ventana (position: fixed) se coloque respecto a ella */
    body.role-alumno .alm-hub-card,
    body.role-alumno .schedule-day-card { transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s ease !important; }
    body.role-alumno .alm-hub-card:hover { transform: translate(-2px, -3px) !important; }
    body.role-alumno .alm-hub-card:active { transform: translate(2px, 2px) scale(.99) !important; }
    body.role-alumno .alm-asig-btn { transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s ease, background-color .15s ease; }
    body.role-alumno .alm-asig-btn:hover { transform: translate(-2px, -3px) !important; }
    body.role-alumno .alm-asig-btn:active { transform: translate(2px, 2px) scale(.98) !important; }
    body.role-alumno .alm-asig-btn i,
    body.role-alumno .alm-hub-icon { transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); }
    body.role-alumno .alm-asig-btn:hover i,
    body.role-alumno .alm-hub-card:hover .alm-hub-icon { transform: scale(1.18) rotate(-8deg); }
    body.role-alumno .playLink .videoImg { transition: transform .25s cubic-bezier(.3, 1.8, .5, 1) !important; }
    body.role-alumno .videoclase:hover .videoImg { transform: scale(1.15) !important; }

    /* Yosel en las pantallas vacías del alumno (_yosel-vacio.html.twig) */
    .yosel-vacio-img { animation: anim-flota 4.5s ease-in-out infinite; }

    @keyframes anim-entra-der { from { opacity: 0; transform: translateX(36px); } }
    @keyframes anim-entra-izq { from { opacity: 0; transform: translateX(-36px); } }
    @keyframes anim-sube { from { opacity: 0; transform: translateY(14px); } }
    @keyframes anim-salta { 0% { opacity: 0; transform: translateY(18px) scale(.92); } 60% { opacity: 1; transform: translateY(-4px) scale(1.02); } }
    @keyframes anim-campana { 0%, 12%, 100% { transform: rotate(0); } 2% { transform: rotate(16deg); } 4% { transform: rotate(-14deg); } 6% { transform: rotate(10deg); } 8% { transform: rotate(-7deg); } 10% { transform: rotate(3deg); } }
    @keyframes anim-globo { from { transform: scale(0); } }
    @keyframes anim-flota { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7px) rotate(4deg); } }
}

/* Pantalla vacía del alumno con Yosel (templates/user/alumno/_yosel-vacio.html.twig) */
body.role-alumno .yosel-vacio { display: flex; align-items: center; width: 100%; box-sizing: border-box; gap: 14px; padding: 12px 14px; border: 3px solid var(--brand-black); border-radius: 12px; background: var(--brand-white); box-shadow: 3px 3px 0 var(--brand-yellow); }
body.role-alumno .yosel-vacio-img { flex: none; width: 64px; height: auto; }
body.role-alumno .yosel-vacio p { margin: 0; font-weight: 800; line-height: 1.35; color: var(--brand-black); }
body.role-alumno .yosel-vacio small { display: block; margin-top: 2px; font-weight: 600; color: var(--brand-text-muted); }