/* Klazen It — reglas comunes de accesibilidad (WCAG 2.2 nivel AA; tamaños táctiles de Apple y Android).
   Se carga en TODAS las páginas, después de los estilos de cada una. Ver «Accesibilidad» en agente.md. */

/* 2.4.7 / 2.4.11 / 2.4.13 — Foco siempre visible: contorno grueso con borde blanco para que se vea sobre cualquier fondo. */
/* (Los contenedores que reciben el foco por programa —ventanas y contenido principal, tabindex="-1"— no llevan contorno.) */
[tabindex="-1"]:focus { outline: none !important; }
:focus-visible:not([tabindex="-1"]) {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px #fff !important;
}
.field:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px !important; }
/* Sobre fondos oscuros, el contorno es blanco. */
.bg-theme-900 :focus-visible:not([tabindex="-1"]), .bg-slate-900 :focus-visible:not([tabindex="-1"]) {
    outline-color: #fff !important;
    box-shadow: 0 0 0 5px rgb(15 23 42 / .9) !important;
}

/* 2.4.1 — Enlace «Saltar al contenido»: aparece al entrar con el teclado. */
.skip-link {
    position: fixed; left: .75rem; top: -5rem; z-index: 3000;
    background: #0f172a; color: #fff; padding: .75rem 1rem; border-radius: .75rem;
    font-size: .875rem; font-weight: 600; text-decoration: underline;
}
.skip-link:focus { top: .75rem; }

/* 1.4.3 — Texto de ejemplo dentro de los campos con contraste suficiente (4.5:1). */
::placeholder { color: #64748b !important; opacity: 1 !important; }
.result:empty::before { color: #64748b !important; }

/* 1.4.11 — El borde de los campos se distingue del fondo (3:1). */
.field,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
select:not(#aula-select), textarea, [contenteditable="true"] {
    border-color: #7b8794 !important;
}
input[type="checkbox"], input[type="radio"] { min-width: 1rem; min-height: 1rem; }

/* 1.4.1 — Los enlaces dentro de un texto no se distinguen solo por el color. */
p a[href], li a[href], label a[href] { text-decoration: underline; text-underline-offset: 2px; }

/* 2.5.8 — Tamaño mínimo de lo que se pulsa: 24 px siempre… */
button, [role="button"], select, summary { min-height: 24px; min-width: 24px; }
/* …y en pantallas táctiles 48 px (Android: 48 dp; Apple: 44 pt). No aplica a enlaces o botones dentro de una frase. */
@media (pointer: coarse) {
    button, [role="button"], select, summary, .btn, .chip,
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]) { min-height: 48px; }
    input[type="checkbox"], input[type="radio"] { width: 1.5rem !important; height: 1.5rem !important; }
    p > button, span > button, label > span > button { min-height: 24px; padding-block: .35rem; }
    nav a[href] { display: inline-flex; align-items: center; min-height: 48px; }
}

/* 2.3.3 — Respeta «reducir movimiento» del sistema (iOS, Android, Windows, macOS). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
    .transform { transform: none !important; }
}

/* 1.4.10 / 1.4.4 — Con mucho zoom o pantallas bajas, la página principal deja de ser de altura fija y se desplaza completa. */
@media (max-height: 560px), (max-width: 340px) {
    body.h-screen { height: auto !important; min-height: 100vh; overflow: auto !important; }
    body.h-screen > main { overflow: visible !important; flex: none !important; }
}

/* Modo de alto contraste de Windows: los bordes y el foco siguen viéndose. */
@media (forced-colors: active) {
    :focus-visible { outline: 3px solid Highlight !important; box-shadow: none !important; }
    button, .btn, .field, .chip { border: 1px solid ButtonText; }
}

/* Texto solo para lectores de pantalla. */
.solo-lector {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}