/* Transición entre pantallas (1m), la misma en el dashboard del dueño y en el panel del admin.
   - Navegación normal entre páginas: View Transitions entre documentos, fundido de 200 ms.
   - Pestañas de los menús (navegacion.js): View Transition en el mismo documento; la página se desliza hacia
     el lado de la pestaña nueva (data-nav="der" / "izq") en 250 ms con ease-out.
   - En los dos casos los menús (y el encabezado del admin) se quedan quietos y la pastilla activa se desliza.
   - Con "reducir movimiento" no hay animación; sin soporte del navegador se navega como siempre.
   - P-71: duración 200-260 ms con la curva de iOS; solo se animan transform y opacity (y la pastilla activa mide lo
     mismo en todas las pestañas: su grupo solo se mueve). Tocar responde al instante: sin el gris de iOS ni la espera
     de 300 ms (touch-action), y lo que se toca se aclara a los 50 ms (antes, un scroll que empieza no lo enciende) y
     sigue así (.tocado) hasta que cambia la página. */
@view-transition { navigation: auto; }

.menu-inferior { view-transition-name: menu-inferior; }
.menu-inferior a.activa { view-transition-name: pestana-activa; }
.menu { view-transition-name: menu-lateral; }
.encabezado { view-transition-name: encabezado; }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
::view-transition-group(pestana-activa) { animation-duration: 260ms; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }

html[data-nav]::view-transition-old(root), html[data-nav]::view-transition-new(root) {
  animation-duration: 260ms; animation-timing-function: cubic-bezier(.32, .72, 0, 1); animation-fill-mode: both;
}
html[data-nav="der"]::view-transition-old(root) { animation-name: salir-a-la-izquierda; }
html[data-nav="der"]::view-transition-new(root) { animation-name: entrar-por-la-derecha; }
html[data-nav="izq"]::view-transition-old(root) { animation-name: salir-a-la-derecha; }
html[data-nav="izq"]::view-transition-new(root) { animation-name: entrar-por-la-izquierda; }
@keyframes salir-a-la-izquierda { to { transform: translateX(-24%); opacity: 0; } }
@keyframes entrar-por-la-derecha { from { transform: translateX(24%); opacity: 0; } }
@keyframes salir-a-la-derecha { to { transform: translateX(24%); opacity: 0; } }
@keyframes entrar-por-la-izquierda { from { transform: translateX(-24%); opacity: 0; } }

html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label, input, select, textarea { touch-action: manipulation; }
:is(a[href], button, summary) { transition: opacity 160ms ease-out; }
:is(a[href], button, summary):active, .presionado { opacity: .6; transition-duration: 0s; transition-delay: 50ms; }
a.tocado { opacity: .6; transition: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  :is(a[href], button, summary) { transition: none; }
}