/* =====================================================================
   Asocaleta · Movimiento
   Una sola hoja para que TODO el sistema se mueva como iOS: pestañas que
   entran deslizándose, ventanas que suben como las hojas del iPhone,
   botones que ceden al tocarlos y transición suave entre páginas.

   Cómo está hecho (2026-10-02):
   - Curva de las hojas de iOS: cubic-bezier(0.32, 0.72, 0, 1).
   - Resortes con linear() calculados como los de SwiftUI
     (.spring(response:, dampingFraction:)): uno suave (rebote 1 %) para
     hojas y paneles, y uno vivo (rebote 4 %) para avisos y botones.
   - @starting-style: anima cualquier pestaña, ventana o aviso en el
     momento en que aparece, sin importar cómo lo muestra cada pantalla
     (clase, style.display o el atributo hidden). Sin JavaScript.
   - @view-transition: fundido entre páginas (login → inicio → paneles).
   - Solo se animan opacity, translate y scale (los hace la tarjeta de
     video, no traban la pantalla). Se usan translate/scale y NO transform
     para no pisar los transform que ya tienen algunos elementos.
   - Quien pida "reducir movimiento" en su teléfono no ve nada de esto.
   - Navegador viejo que no entienda algo: simplemente no anima.
   ===================================================================== */

:root {
    --mv-hoja: cubic-bezier(0.32, 0.72, 0, 1);
    --mv-salida: cubic-bezier(0.22, 1, 0.36, 1);
    /* resorte suave: response 0.5, damping 0.82 */
    --mv-resorte: linear(0, 0.0275, 0.0958, 0.1876, 0.2902, 0.3947, 0.4951, 0.5876, 0.67, 0.7416, 0.8024, 0.8527, 0.8937, 0.9263, 0.9517, 0.971, 0.9852, 0.9954, 1.0024, 1.0069, 1.0096, 1.0108, 1.0111, 1.0107, 1.0099, 1.0088, 1.0077, 1.0065, 1.0054, 1.0044, 1.0035, 1.0028, 1.0021, 1.0016, 1.0011, 1.0008, 1.0005, 1.0003, 1.0001, 1, 1);
    /* resorte vivo: response 0.42, damping 0.7 */
    --mv-rebote: linear(0, 0.028, 0.0992, 0.197, 0.3084, 0.4233, 0.5347, 0.6377, 0.7293, 0.8081, 0.8737, 0.9265, 0.9676, 0.9982, 1.0198, 1.0339, 1.0421, 1.0456, 1.0457, 1.0433, 1.0393, 1.0344, 1.0292, 1.0239, 1.019, 1.0145, 1.0106, 1.0073, 1.0045, 1.0024, 1.0007, 0.9995, 0.9987, 0.9982, 0.998, 0.9979, 0.9979, 0.9981, 0.9983, 0.9985, 1);
}

/* Lo que vale aunque no haya animaciones: toques limpios y letra nítida. */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:where(button, a, summary, label, select, [onclick], [role="button"]) { touch-action: manipulation; }
:where(.md-caja, .hoja, .modal-contenido, .modal-box) { overscroll-behavior: contain; }

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

    /* ---- Entre páginas: la que se va se apaga y se encoge un pelo; la que
       llega sube y aparece (como empujar una pantalla en iOS). ---- */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: mv-pagina-sale 200ms var(--mv-salida) both; }
    ::view-transition-new(root) { animation: mv-pagina-entra 420ms var(--mv-hoja) both; }
    @keyframes mv-pagina-sale { to { opacity: 0; scale: 0.985; } }
    @keyframes mv-pagina-entra { from { opacity: 0; translate: 0 14px; } }

    /* ---- Botones: ceden al tocarlos y vuelven con resorte. Todo dentro
       de :where() (sin peso), así cualquier estilo propio de la pantalla
       manda sobre esto. ---- */
    :where(button, .btn, [role="button"], .tab-btn, .nav-btn, .bn-btn, .subtab) {
        transition: scale 420ms var(--mv-rebote), filter 160ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
    }
    :where(button, .btn, [role="button"], .tab-btn, .nav-btn, .bn-btn, .subtab):where(:active:not(:disabled)) {
        scale: 0.96; filter: brightness(0.93); transition-duration: 90ms, 90ms, 200ms, 200ms, 200ms, 200ms, 200ms;
    }
    /* Filas que se tocan (listas): se iluminan como una celda de iOS. */
    :where(li[onclick], tr[onclick]) { transition: background-color 220ms ease, opacity 220ms ease; }
    :where(li[onclick], tr[onclick]):active { opacity: 0.7; transition-duration: 60ms; }

    /* ---- Pestañas y secciones: entran deslizándose y apareciendo cada
       vez que se muestran. ---- */
    .contenido, .tab-panel, .panel, .subpanel, section[id^="p-"] {
        animation: none;
        transition: opacity 340ms var(--mv-hoja), translate 520ms var(--mv-resorte);
    }
    @starting-style {
        .contenido, .tab-panel, .panel, .subpanel, section[id^="p-"] { opacity: 0; translate: 0 12px; }
    }

    /* ---- Fondo de las ventanas: se oscurece suave. ---- */
    .md-fondo, .hoja-fondo, .overlay, .modal.show,
    div:has(> .modal-contenido), div:has(> .modal-box),
    div[id^="modal"][style*="position:fixed"], div[id^="modal"][style*="position: fixed"] {
        animation: none;
        transition: opacity 280ms var(--mv-hoja);
    }
    @starting-style {
        .md-fondo, .hoja-fondo, .overlay, .modal.show,
        div:has(> .modal-contenido), div:has(> .modal-box),
        div[id^="modal"][style*="position:fixed"], div[id^="modal"][style*="position: fixed"] { opacity: 0; }
    }

    /* ---- La ventana en sí: en la computadora aparece creciendo un poco
       desde el centro; en el teléfono sube desde abajo como una hoja. ---- */
    .md-caja, .hoja, .modal-contenido, .modal-box,
    div[id^="modal"][style*="position:fixed"] > div, div[id^="modal"][style*="position: fixed"] > div {
        animation: none;
        transition: opacity 260ms var(--mv-hoja), translate 560ms var(--mv-resorte), scale 560ms var(--mv-resorte);
    }
    @starting-style {
        .md-caja, .hoja, .modal-contenido, .modal-box,
        div[id^="modal"][style*="position:fixed"] > div, div[id^="modal"][style*="position: fixed"] > div { opacity: 0; translate: 0 18px; scale: 0.965; }
    }
    @media (max-width: 640px) {
        @starting-style {
            .md-caja, .hoja { opacity: 1; translate: 0 100%; scale: 1; }
        }
    }

    /* ---- Avisos (toasts): caen con un rebotito. ---- */
    .toast {
        transition: opacity 260ms var(--mv-hoja), translate 520ms var(--mv-rebote), scale 520ms var(--mv-rebote);
    }
    @starting-style { .toast { opacity: 0; translate: 0 -14px; scale: 0.94; } }

    /* ---- Primera vez que se abre una pantalla: las tarjetas del inicio
       y las secciones de Secretaría llegan una tras otra. ---- */
    .service-card, .info-card, .stat, .seccion {
        transition: opacity 420ms var(--mv-hoja), translate 620ms var(--mv-resorte);
    }
    @starting-style { .service-card, .info-card, .stat, .seccion { opacity: 0; translate: 0 16px; } }
    :is(.service-card, .info-card, .stat, .seccion):nth-child(2) { transition-delay: 40ms; }
    :is(.service-card, .info-card, .stat, .seccion):nth-child(3) { transition-delay: 80ms; }
    :is(.service-card, .info-card, .stat, .seccion):nth-child(4) { transition-delay: 120ms; }
    :is(.service-card, .info-card, .stat, .seccion):nth-child(5) { transition-delay: 160ms; }
    :is(.service-card, .info-card, .stat, .seccion):nth-child(n+6) { transition-delay: 200ms; }

    /* ---- Cambio de tema claro/oscuro sin golpe. ---- */
    body { transition: background-color 320ms ease, color 320ms ease; }

    /* ---- Secciones que se abren y cierran (<details>): se deslizan en vez
       de aparecer de golpe (2026-10-03). Navegadores sin ::details-content
       (iOS viejo) siguen abriendo como siempre. ---- */
    :root { interpolate-size: allow-keywords; }
    details::details-content {
        block-size: 0; overflow-y: clip;
        transition: block-size 420ms cubic-bezier(0.32, 0.72, 0, 1), content-visibility 420ms allow-discrete;
    }
    details[open]::details-content { block-size: auto; }
    details > summary { transition: color 200ms ease; }
}