/* Cada propiedad tiene un dueño: rutas CSS nativo, paneles WAAPI, tema WAAPI. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
html[data-movimiento="no"] { view-transition-name: none; }
::view-transition { pointer-events: none; }
/* Destino de foco programático; los enlaces y controles conservan su anillo. */
.pagina:focus-visible { outline: none; }
.nav-principal, .barra-movil { position: relative; isolation: isolate; }
.barra-movil { position: fixed; }
.nav-selector { position: absolute; z-index: -1; border-radius: var(--r-p); background: var(--primary-soft); pointer-events: none; }
.barra-movil .nav-selector { border-radius: 14px; }
.nav-principal:has(.nav-selector) a[aria-current="page"], .barra-movil:has(.nav-selector) [aria-current="page"] { background: transparent; }
html[data-ruta-direccion] .pagina { view-transition-name: pagina; }
html[data-ruta-direccion] .cabecera { view-transition-name: cabecera; }
html[data-ruta-direccion] .barra-movil { view-transition-name: barra; }
html[data-ruta-direccion] .nav-principal .nav-selector { view-transition-name: selector; }
@media (max-width: 959px) {
  html[data-ruta-direccion] .nav-principal .nav-selector { view-transition-name: none; }
  html[data-ruta-direccion] .barra-movil .nav-selector { view-transition-name: selector; }
}
html[data-ruta-direccion] { --trayecto: 96px; }
html[data-ruta-direccion="atras"] { --trayecto: -96px; }
@media (max-width: 699px) {
  html[data-ruta-direccion] { --trayecto: 48px; }
  html[data-ruta-direccion="atras"] { --trayecto: -48px; }
}
html[data-ruta-direccion]::view-transition-old(root), html[data-ruta-direccion]::view-transition-new(root),
::view-transition-old(cabecera), ::view-transition-new(cabecera), ::view-transition-old(barra), ::view-transition-new(barra) { animation: none; mix-blend-mode: normal; }
::view-transition-group(pagina), ::view-transition-group(selector) { animation-duration: 360ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
/* La superficie viaja debajo de la lectura: no tapa el título mientras se expande. */
::view-transition-group(pagina) { z-index: 2; }
::view-transition-group(cabecera), ::view-transition-group(barra), ::view-transition-group(selector) { z-index: 3; }
::view-transition-old(pagina) { animation: ruta-sale 360ms cubic-bezier(.16, 1, .3, 1) both; }
::view-transition-new(pagina) { animation: ruta-entra 360ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes ruta-sale { to { transform: translateX(var(--trayecto)); opacity: 0; } }
@keyframes ruta-entra { from { transform: translateX(calc(-1 * var(--trayecto))); opacity: 0; } }
::view-transition-group(acontecimiento) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); z-index: 1; }
::view-transition-old(acontecimiento), ::view-transition-new(acontecimiento) { height: 100%; width: 100%; object-fit: fill; mix-blend-mode: normal; }
/* El texto NO recibe un nombre compartido: se compone a su tamaño final. */
html.theme-switching .pagina, html.theme-switching .cabecera, html.theme-switching .barra-movil,
html.theme-switching .nav-selector, html.theme-switching [data-event-surface] { view-transition-name: none !important; }
html.theme-switching::view-transition-group(root) { animation-duration: 500ms; }
/* Capturar los colores finales, no un gris intermedio de los controles con transition. */
html.theme-switching * { transition: none !important; }
html[data-movimiento="no"]::view-transition-group(*), html[data-movimiento="no"]::view-transition-old(*), html[data-movimiento="no"]::view-transition-new(*) { animation: none !important; }