/* =====================================================================
   ATALA · accesibilidad.css  (WCAG 2.2 nivel AA · TalkBack / VoiceOver)
   Se carga DESPUÉS de atala.css y material.css, así que solo ajusta lo necesario sin tocar el diseño:
     · contraste (texto 4.5:1, bordes de controles 3:1)
     · foco visible, objetivos táctiles de 44 px, texto que se puede ampliar
     · reducir movimiento, menú cerrado fuera del alcance del lector, texto solo para lector
   El coral de marca (#E75234) se queda para adornos; donde hay LETRA encima se usa --at-coral-a11y.
   Para volver al coral de marca basta con cambiar esa variable (el contraste baja a 3.7:1).
   ===================================================================== */
:root {
    --at-coral-a11y: #C03A1A;     /* 5.4:1 con letra blanca */
    --at-coral-texto: #B93718;    /* 5.0:1 como texto sobre crema */
    --at-borde-control: #857F77;  /* 3.9:1 sobre blanco: borde de campos y botones (WCAG 1.4.11) */
    --at-enfoque: #01408D;
    --at-sobre-coral: rgba(255, 255, 255, .95);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── Texto que solo lee el lector de pantalla ─────────────────────── */
.at-solo-lector {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── "Saltar al contenido" (teclado y lector) ─────────────────────── */
.at-saltar {
    position: absolute; left: 8px; top: -64px; z-index: 1000; background: var(--at-carbon); color: #fff;
    padding: 12px 16px; border-radius: 12px; font-weight: 800; text-decoration: none;
}
.at-saltar:focus { top: 8px; color: #fff; }

/* ── Foco visible (WCAG 2.4.7 / 2.4.11) ───────────────────────────── */
:focus-visible { outline: 3px solid var(--at-enfoque); outline-offset: 2px; }
.at-in:focus-visible, .at-in:focus, .at-buscar:focus-within { outline: 3px solid var(--at-enfoque); outline-offset: 1px; }
.at-cajon :focus-visible, .at-cabecera :focus-visible, .at-tarjeta.naranja :focus-visible, .at-kpi.oscuro :focus-visible,
.at-btn.primario:focus-visible, .at-btn.coral:focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--at-enfoque); }
#at-menu:focus-visible ~ .at-barra-sup .at-hamburguesa { outline: 3px solid var(--at-enfoque); outline-offset: 2px; }
main:focus, h1:focus { outline: none; }

/* ── Contraste: letra sobre coral ─────────────────────────────────── */
.at-btn.coral, .at-fab, .at-nav-link.active, .at-contador, .at-cabecera, .at-tarjeta.naranja, .at-kpi.oscuro { background-color: var(--at-coral-a11y); }
.at-pb.on, .at-cumplio .no.on { background-color: var(--at-coral-a11y); border-color: var(--at-coral-a11y); }
.at-kpi.oscuro, .at-tarjeta.naranja { border-color: var(--at-coral-a11y); }
.at-nav-link.active .at-contador { color: var(--at-coral-a11y); }
.at-cabecera .at-avatar.grande { color: var(--at-coral-a11y); }
.at-registro-titulo { color: var(--at-coral-texto); }

/* ── Contraste: etiquetas del menú, marcadores de posición y bordes de controles ── */
.at-nav-seccion { color: #B5B0A9; }
::placeholder { color: #6B6762; opacity: 1; }
.at-in, .at-buscar, .at-chip, .at-btn.borde, .at-cumplio button, .at-adjuntar { border-color: var(--at-borde-control); }

/* ── Chips con acciones dentro (disciplinas del alta): botones reales ── */
.at-chip-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 8px; }
.at-chip-btn:focus-visible { outline-offset: 3px; }

/* ── Objetivos táctiles de 44 px y letra de 16 px (iOS no hace zoom al enfocar) ── */
@media (pointer: coarse) {
    .at-chip, .at-tab, .at-btn.chico, .at-pb, .at-in { min-height: 44px; }
    .at-chip-btn { min-height: 32px; min-width: 32px; }
    input, select, textarea { font-size: max(16px, 1em); }
}

/* ── Menú lateral: cerrado no se puede navegar con el lector ──────── */
.at-cajon { visibility: hidden;
            transition: transform var(--md-largo, .3s) var(--md-enfatizado, ease), visibility 0s linear var(--md-largo, .3s); }
#at-menu:checked ~ .at-cajon { visibility: visible; transition-delay: 0s; }
@media (min-width: 960px) { .at-cajon { visibility: visible; } }

/* ── Reducir movimiento (WCAG 2.3.3 / 2.2.2) ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
    #atala-splash { display: none !important; }
}

/* ── Alto contraste del sistema ───────────────────────────────────── */
@media (forced-colors: active) {
    .at-btn, .at-chip, .at-in, .at-tab { border: 1px solid ButtonText; }
    .at-chip.on, .at-tab.on, .at-nav-link.active { outline: 2px solid Highlight; }
}