/* =============================================================================
   MISQUAD · NAVEGACION SUAVE entre pantallas (la carga includes/menu.php)
   -----------------------------------------------------------------------------
   Al ir de una pantalla a otra el navegador recargaba la pagina entera y el
   menu lateral y la cabecera parpadeaban. Con las transiciones entre
   documentos (View Transitions, Chrome/Edge 126+ y Safari 18.2+; los demas
   navegadores cargan como siempre), el menu lateral y la cabecera se quedan
   quietos (pasan de una pagina a la otra sin animacion) y solo el contenido
   cambia con un fundido corto. La posicion del menu la recupera el script de
   includes/menu.php antes del primer pintado. Al pulsar, el contenido se apaga y
   corre una barra arriba (abajo, html.mq-saliendo).
   ========================================================================== */

@view-transition { navigation: auto; }

.app-sidebar.dir-left { view-transition-name: mq-menu; }
.app-content > .app-header { view-transition-name: mq-cabecera; }
/* view-transition-name hace de la cabecera una capa propia (stacking context): sin
   z-index, lo que viene debajo (la franja del equipo, #subcabecera, con su selector)
   tapaba sus desplegables (la rueda del perfil: «Afiliación» quedaba oculta). Lo
   mismo que la cabecera V2 (css/misquad/cabecera_v2.css), tambien para la V1. */
.app-content > .app-header { position: relative; z-index: 1040; }

/* Menu y cabecera: sin fundido, la nueva sustituye a la vieja en el acto (son iguales). */
::view-transition-group(mq-menu),
::view-transition-group(mq-cabecera) { animation-duration: 0s; }
::view-transition-old(mq-menu),
::view-transition-old(mq-cabecera) { display: none; }
::view-transition-new(mq-menu),
::view-transition-new(mq-cabecera) { animation: none; }

/* El contenido: fundido corto. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .24s; animation-timing-function: ease-out; }

/* AL PULSAR un enlace del menu o de la cabecera (lo marca el script de includes/menu.php con
   html.mq-saliendo): el contenido se apaga en el acto y arriba corre una barra fina, mientras
   el menu y la cabecera no se tocan. Asi parece que solo cambia el interior. */
html.mq-saliendo .app-content > :not(.app-header) { opacity: .35; transition: opacity .15s ease-out; pointer-events: none; }
html.mq-saliendo body::after {
    content: "";
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 40%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #22D3EE, #4DABF7, transparent);
    animation: mq-carga 1s ease-in-out infinite;
    pointer-events: none;
}
@keyframes mq-carga { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

@media (prefers-reduced-motion: reduce) {
    html.mq-saliendo body::after { animation: none; width: 100%; }
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}