/* =====================================================================
   Accesibilidad global. Se carga AL FINAL en App.razor para ganar la
   cascada sobre los `outline: none` dispersos en los CSS por página.
   - Foco visible solo con teclado (:focus-visible), no con mouse.
   - Respeta prefers-reduced-motion.
   ===================================================================== */

/* Anillo de foco visible para todo elemento interactivo cuando se navega
   con teclado. !important es intencional: anula los `outline:none` de las
   hojas por página sin tener que tocarlas una por una. */
:where(a[href], button, input, select, textarea, summary,
       [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"],
       [role="link"], [role="menuitem"]):focus-visible {
    outline: 2px solid var(--wk-primary, #d4af37) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

/* No mostrar anillo al hacer clic con el mouse (los navegadores modernos ya
   distinguen :focus-visible; esto es defensa por si alguna hoja fuerza
   :focus con outline). */
:where(a, button, input, select, textarea):focus:not(:focus-visible) {
    outline: none;
}

/* Movimiento reducido: respeta la preferencia del sistema. */
@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;
    }
}