/* ═══════════════════════════════════════════════════════════════════════
   LUDUS — capa de interacción compartida (Ola 1 de diseño, 2026-07-08)
   Se enlaza desde index.html, portal.html, admin.html y panel.html.
   Objetivo: que la UI "responda" — feedback táctil, foco visible por
   teclado y respeto de reduced-motion en toda la plataforma.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ease-out fuerte: arranque inmediato, asentado suave (las curvas CSS
       nativas son demasiado tibias para feedback de UI) */
    --ludus-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Feedback de presión ─────────────────────────────────────────────────
   Todo lo presionable se hunde levemente al tocar. Crítico en móvil,
   donde no existe hover: sin esto, tocar un botón "no hace nada" hasta
   que llega la respuesta de red. transform no afecta layout. */
button:not(:disabled):active,
[role="button"]:active,
a[onclick]:active {
    transform: scale(0.97);
}

/* Los ítems de nav/tab a ancho completo se hunden menos (0.97 en un
   elemento ancho se percibe exagerado). */
.tab-btn:active,
.ptab:active {
    transform: scale(0.99);
}

/* ── Foco visible por teclado (a11y) ─────────────────────────────────────
   Un solo anillo coherente para toda la plataforma. :focus-visible no
   dispara con click/tap, solo con navegación por teclado. */
:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Reduced motion (no opcional) ────────────────────────────────────────
   Colapsa animaciones y transiciones a casi-instantáneo. Los crossfades
   de opacidad sobreviven (duración mínima), el movimiento desaparece. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}