/* AD-ACC-001 — reglas globales de accesibilidad Aula Diversa */

html.ad-a11y-text-enabled {
    font-size: var(--ad-a11y-root-font-size, 100%);
}

:where(a, button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid #7C22FF;
    outline-offset: 3px;
}

.ad-skip-link {
    position: fixed;
    left: 16px;
    top: 12px;
    z-index: 2000;
    transform: translateY(-160%);
    padding: 10px 14px;
    border-radius: 8px;
    background: #020617;
    color: #FFFFFF;
    font-weight: 700;
    text-decoration: none;
}

.ad-skip-link:focus { transform: translateY(0); }

html.ad-a11y-highlight-links a:not(.ad-skip-link) {
    text-decoration: underline 2px !important;
    text-underline-offset: 3px !important;
    outline: 2px solid #F59E0B !important;
    outline-offset: 2px !important;
}

html.ad-a11y-high-contrast body,
html.ad-a11y-high-contrast main,
html.ad-a11y-high-contrast section,
html.ad-a11y-high-contrast article,
html.ad-a11y-high-contrast aside,
html.ad-a11y-high-contrast header,
html.ad-a11y-high-contrast footer,
html.ad-a11y-high-contrast nav,
html.ad-a11y-high-contrast dialog {
    background: #000000 !important;
    color: #FFFFFF !important;
}

html.ad-a11y-high-contrast :where(h1, h2, h3, h4, h5, h6, p, span, label, li, dt, dd, small, strong) {
    color: #FFFFFF !important;
}

html.ad-a11y-high-contrast a { color: #FFD400 !important; }

html.ad-a11y-high-contrast :where(input, textarea, select) {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}

html.ad-a11y-high-contrast :where(button, [role="button"]) {
    border-color: #FFFFFF !important;
}

html.ad-a11y-high-contrast img {
    filter: none !important;
}

/* AD-ACC-002 — opciones ampliadas del panel de accesibilidad */

/* Apto para dislexia: tipografía de alta legibilidad (Atkinson Hyperlegible, cargada
   por el módulo JS solo al activarla) con más espacio entre letras y palabras. */
html.ad-a11y-dyslexia body,
html.ad-a11y-dyslexia body :where(p, span, a, li, label, button, input, textarea, select, h1, h2, h3, h4, h5, h6, td, th, dt, dd, small, strong, em, blockquote, legend, summary) {
    font-family: "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif !important;
    letter-spacing: .04em !important;
    word-spacing: .12em !important;
    font-style: normal !important;
}

/* Espaciado de texto: valores de WCAG 2.2, criterio 1.4.12. */
html.ad-a11y-text-spacing body :where(p, span, a, li, label, h1, h2, h3, h4, h5, h6, td, th, dt, dd, small, strong, em, blockquote, summary) {
    letter-spacing: .12em !important;
    word-spacing: .16em !important;
}

html.ad-a11y-text-spacing body :where(p, li, dd, blockquote) {
    line-height: 1.5 !important;
    margin-bottom: 1em;
}

/* Altura de línea: 1.5 o 2. */
html.ad-a11y-line-150 body :where(p, li, span, a, label, td, th, dt, dd, blockquote, small, h1, h2, h3, h4, h5, h6) { line-height: 1.5 !important; }
html.ad-a11y-line-200 body :where(p, li, span, a, label, td, th, dt, dd, blockquote, small, h1, h2, h3, h4, h5, h6) { line-height: 2 !important; }

/* Detener animaciones y transiciones en toda la página. */
html.ad-a11y-stop-animations *,
html.ad-a11y-stop-animations *::before,
html.ad-a11y-stop-animations *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* Ocultar imágenes (fotografías e ilustraciones; los íconos SVG de la interfaz se conservan). */
html.ad-a11y-hide-images :where(img, picture, video, figure > img) { visibility: hidden !important; }
html.ad-a11y-hide-images :where([style*="background-image"]) { background-image: none !important; }

/* Cursor grande: flecha negra con borde blanco, visible sobre fondos claros y oscuros. */
html.ad-a11y-big-cursor,
html.ad-a11y-big-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5 19.5 13l-7 1.4-3.6 6.6z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 8 5, auto !important;
}

html.ad-a11y-big-cursor :where(a, button, [role="button"], label, summary, select, input[type="checkbox"], input[type="radio"]),
html.ad-a11y-big-cursor :where(a, button, [role="button"], label, summary, select) * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V4.5a1.5 1.5 0 0 1 3 0V10l.5-1a1.5 1.5 0 0 1 3 .5V11a1.5 1.5 0 0 1 3 0v1a1.5 1.5 0 0 1 3 0v3.5A6.5 6.5 0 0 1 15 22h-2.5a6 6 0 0 1-5-2.7L4.3 14.5a1.6 1.6 0 0 1 2.5-2L9 14.5Z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 18 4, pointer !important;
}

/* Guía de lectura: franja que sigue al puntero (el elemento lo crea el módulo JS). */
.ad-a11y-reading-guide-bar {
    position: fixed;
    top: -22px;
    left: 0;
    right: 0;
    z-index: 999;
    height: 44px;
    pointer-events: none;
    border-top: 3px solid #7C22FF;
    border-bottom: 3px solid #7C22FF;
    background: rgba(124, 34, 255, .08);
    box-shadow: 0 0 0 100vmax rgba(2, 6, 23, .12);
}

html.ad-a11y-high-contrast .ad-a11y-reading-guide-bar {
    border-color: #FFD400;
    background: rgba(255, 212, 0, .12);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
}

html.ad-a11y-high-contrast .ad-accessibility__tile,
html.ad-a11y-high-contrast .ad-accessibility__switch,
html.ad-a11y-high-contrast .ad-accessibility__profile,
html.ad-a11y-high-contrast .ad-accessibility__chip {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}

html.ad-a11y-high-contrast .ad-accessibility__tile[aria-pressed="true"],
html.ad-a11y-high-contrast .ad-accessibility__profile[aria-pressed="true"],
html.ad-a11y-high-contrast .ad-accessibility__chip[aria-pressed="true"] {
    background: #FFD400 !important;
    color: #000000 !important;
    border-color: #FFD400 !important;
}

html.ad-a11y-high-contrast .ad-accessibility__tile[aria-pressed="true"] span,
html.ad-a11y-high-contrast .ad-accessibility__profile[aria-pressed="true"] span {
    color: #000000 !important;
}

html.ad-a11y-high-contrast .ad-accessibility__profile-icon {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
}

html.ad-a11y-high-contrast .ad-accessibility__profile[aria-pressed="true"] .ad-accessibility__profile-icon {
    background: #FFD400 !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

html.ad-a11y-high-contrast .ad-accessibility__shortcut kbd {
    background: #000000 !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* AD-ACC-001 — corrección de alto contraste: controles del panel de
   accesibilidad que quedaban con fondo blanco y texto blanco (invisibles). */

html.ad-a11y-high-contrast .ad-accessibility__panel {
    background: #000000 !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

html.ad-a11y-high-contrast .ad-accessibility__control,
html.ad-a11y-high-contrast .ad-accessibility__toggle,
html.ad-a11y-high-contrast .ad-accessibility__reset,
html.ad-a11y-high-contrast .ad-accessibility__trigger {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}

html.ad-a11y-high-contrast .ad-accessibility__toggle span,
html.ad-a11y-high-contrast .ad-accessibility__control,
html.ad-a11y-high-contrast .ad-accessibility__reset {
    color: #FFFFFF !important;
}

html.ad-a11y-high-contrast .ad-accessibility__toggle[aria-pressed="true"] {
    background: #FFFFFF !important;
    color: #000000 !important;
    border-color: #FFD400 !important;
}

html.ad-a11y-high-contrast .ad-accessibility__toggle[aria-pressed="true"] span {
    color: #000000 !important;
}

html.ad-a11y-high-contrast .ad-accessibility__speech-primary {
    background: #FFD400 !important;
    color: #000000 !important;
    border: 2px solid #FFFFFF !important;
}

html.ad-a11y-high-contrast .ad-accessibility__control:disabled {
    background: #333333 !important;
    color: #FFFFFF !important;
    border-color: #AAAAAA !important;
    opacity: 1 !important;
}

html.ad-a11y-high-contrast .ad-accessibility__status,
html.ad-a11y-high-contrast .ad-accessibility__notice,
html.ad-a11y-high-contrast .ad-accessibility__header p {
    color: #FFFFFF !important;
}

/* AD-ACC-003 — resaltar foco: borde grueso y visible en el elemento enfocado con teclado. */
html.ad-a11y-focus-highlight :focus-visible {
    outline: 4px solid #F59E0B !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 8px rgba(109, 40, 217, .35) !important;
}
