/* ============================================================================
   a11y.css — Mejoras de accesibilidad globales (WCAG 2.1 AA, EAA / Ley 11/2023).
   Cargado en todos los layouts (head*.php). Fase 1 M5: capa compartida.
   ============================================================================ */

/* --- Skip link (WCAG 2.4.1 Bypass Blocks) --- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: #0f1320;
    color: #FFD700;
    padding: 10px 16px;
    border-radius: 0 0 8px 0;
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
    outline: 3px solid #FFD700;
    outline-offset: 2px;
}
/* Ancla destino: no debe alterar el layout, pero sí ser enfocable. */
.skip-target {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Landmark <main> ---
   Asegura bloque (navegadores antiguos) y evita el anillo de foco alrededor de
   toda la página cuando el skip-link mueve el foco al contenedor con tabindex=-1. */
main { display: block; }
main[tabindex="-1"]:focus { outline: none; }

/* --- Error de campo inline accesible (WCAG 3.3.1) --- */
.a11y-field-error {
    color: #b91c1c;            /* 5.9:1 sobre blanco */
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 4px;
}
.a11y-field-error:empty { display: none; }

/* --- Opción activa de typeahead/combobox accesible (navegación por teclado) --- */
.a11y-ta-active {
    background: #fef3c7 !important;
}

/* --- Foco visible (WCAG 2.4.7) — universal para teclado ---
   :focus-visible solo marca el foco con teclado (no en click de ratón),
   evitando el "anillo" molesto al clicar pero garantizando visibilidad al tabular. */
*:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    border-radius: 2px;
}
/* No quitar el outline a quien aún use :focus sin -visible (fallback navegadores viejos). */

/* --- Utilidad solo-lector (texto accesible no visible) --- */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
    position: static !important;
    width: auto; height: auto;
    margin: 0; overflow: visible; clip: auto; white-space: normal;
}

/* --- Movimiento reducido (WCAG 2.3.3 / respeto preferencia del sistema) --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Tamaño mínimo de objetivo táctil (WCAG 2.5.5 AAA / buena práctica AA) ---
   Aplicado a controles icónicos pequeños sin romper los que ya son grandes. */
button, [role="button"], a.btn, .icon-btn {
    min-height: 24px;
}