/* ==========================================================================
   accesibilidad.css — Menú de accesibilidad de kontrolschool.com (versión 2)
   --------------------------------------------------------------------------
   Acompaña a js/accesibilidad.js. Tanda 6: rediseño según las capturas de
   referencia entregadas por Jorge (panel lateral con cabecera de color,
   "Perfiles de accesibilidad", cuadrícula de 3 columnas con niveles y
   botón "Restablecer Filtros"). Tanda 6.1: colores con la paleta del sitio.

   Organización:
     A) Fuente para dislexia (OpenDyslexic, licencia SIL OFL, servida local).
     B) El widget: botón flotante, panel, perfiles, tarjetas, vista
        "Estructura de la página", lupa, máscara y guía de lectura.
     C) Los modos que se aplican a la página. Cada modo es una clase en <html>
        (p. ej. html.ks-a11y-contraste-2). En <html> y no en <body> para que
        el ajuste ya esté puesto cuando el navegador pinta por primera vez.

   Regla general: el propio widget (.ks-a11y-ui) queda excluido de todos los
   modos, para que el usuario siempre pueda leerlo y apagar lo que activó.
   ========================================================================== */


/* ======================= A) FUENTE PARA DISLEXIA ========================= */
@font-face {
    font-family: 'OpenDyslexic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../li/fonts/opendyslexic-regular.woff2) format('woff2');
}
@font-face {
    font-family: 'OpenDyslexic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../li/fonts/opendyslexic-bold.woff2) format('woff2');
}


/* ======================= B) WIDGET ======================================= */

/* Variables del widget — PALETA DEL SITIO (tanda 6.1, pedido de Jorge):
   tomadas de los colores reales que usa kontrolschool.com:
     #59BBEB  celeste de botones, caja del formulario y "volver arriba"
     #87CEFA  celeste claro de la barra superior y el pie
     #1E396C  azul oscuro del botón "Enviar" y la franja del copyright
     #091E3E  azul casi negro del texto
     #EEF9FF  fondo celeste muy claro de las tarjetas de módulos
   Contraste: sobre el celeste #59BBEB el texto e íconos van en azul oscuro
   (#091E3E, 8,4:1), nunca en blanco (2,2:1 no cumple WCAG). Los bordes que
   indican "activo" van en #1E396C (11:1 sobre blanco). */
.ks-a11y-ui {
    --ks-pri: #59bbeb;
    --ks-pri-claro: #87cefa;
    --ks-pri-osc: #1e396c;
    --ks-fondo: #eef9ff;
    --ks-texto: #091e3e;
    --ks-borde: #cfe3ef;
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

/* --- Botón flotante (abajo a la izquierda) --- */
.ks-a11y-launcher {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 100001;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #59bbeb;        /* mismo celeste que el botón "volver arriba" del sitio */
    color: #091e3e;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    cursor: pointer;
    padding: 0;
}
.ks-a11y-launcher:hover { background: #2bb1e0; }
.ks-a11y-launcher svg { width: 34px; height: 34px; }

/* --- Panel lateral --- */
.ks-a11y-panel {
    position: fixed;
    top: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 100002;
    width: min(460px, calc(100vw - 20px));
    display: flex;
    flex-direction: column;
    background: var(--ks-fondo);
    color: var(--ks-texto);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    overflow: hidden;
    font-size: 15px;            /* fijo: el panel no crece con "Agrandar texto" */
}
.ks-a11y-panel[hidden] { display: none !important; }
@media (max-width: 520px) {
    .ks-a11y-panel { top: 0; bottom: 0; left: 0; width: 100vw; border-radius: 0; }
}

/* Cabecera de color con título y botón cerrar */
.ks-a11y-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ks-pri);
    color: var(--ks-texto);
    padding: 16px 18px 30px;
}
.ks-a11y-head h2 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--ks-texto) !important;
    font-family: Arial, Helvetica, sans-serif !important;
}
.ks-a11y-close {
    border: 0;
    background: transparent;
    color: var(--ks-texto);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
}
.ks-a11y-close svg { width: 24px; height: 24px; }
.ks-a11y-close:hover { background: rgba(255, 255, 255, .35); }

/* Cuerpo desplazable: se monta sobre la cabecera con esquinas redondeadas */
.ks-a11y-body {
    flex: 1 1 auto;
    overflow-y: auto;
    background: var(--ks-fondo);
    margin-top: -16px;
    border-radius: 16px 16px 0 0;
    padding: 18px 18px 8px;
}
.ks-a11y-sep {
    border: 0;
    border-top: 1px solid var(--ks-pri-claro);
    margin: 0 0 16px;
    opacity: 1;
}
.ks-a11y-subtitulo {
    margin: 0 0 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ks-texto) !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Perfiles: 2 columnas, tarjetas horizontales */
.ks-a11y-perfiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
.ks-a11y-perfil {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 8px 12px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #fff;
    color: var(--ks-texto);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.ks-a11y-perfil .ks-a11y-ico-circ {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ks-fondo);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ks-a11y-perfil .ks-a11y-ico-circ svg { width: 18px; height: 18px; }
.ks-a11y-perfil:hover { border-color: var(--ks-pri); }
.ks-a11y-perfil[aria-pressed="true"] {
    background: var(--ks-pri);
    border-color: var(--ks-pri-osc);
    color: var(--ks-texto);
}
.ks-a11y-perfil[aria-pressed="true"] .ks-a11y-ico-circ { background: rgba(255, 255, 255, .45); }

/* Cuadrícula de ajustes: 3 columnas */
.ks-a11y-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 360px) {
    .ks-a11y-grid { grid-template-columns: repeat(2, 1fr); }
}
.ks-a11y-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 92px;
    padding: 12px 6px 10px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #fff;
    color: var(--ks-texto);
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.ks-a11y-opt:hover { border-color: var(--ks-pri); }
.ks-a11y-opt svg.ks-a11y-icono { width: 24px; height: 24px; flex: none; }
.ks-a11y-opt .ks-a11y-label { line-height: 1.2; }

/* Activo: borde de color + check en la esquina (no solo color: WCAG 1.4.1) */
.ks-a11y-opt[aria-pressed="true"] {
    border-color: var(--ks-pri-osc);
    background: var(--ks-fondo);
}
.ks-a11y-check {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 16px;
    height: 16px;
    color: var(--ks-pri-osc);
    display: none;
}
.ks-a11y-perfil .ks-a11y-check { top: 50%; right: 10px; margin-top: -8px; color: var(--ks-pri-osc); }
[aria-pressed="true"] > .ks-a11y-check { display: block; }

/* Barras de nivel bajo la etiqueta */
.ks-a11y-niveles {
    display: flex;
    gap: 4px;
    width: 80%;
    justify-content: center;
}
.ks-a11y-niveles span {
    flex: 1;
    max-width: 30px;
    height: 3px;
    border-radius: 2px;
    background: var(--ks-borde);
}
.ks-a11y-niveles span.on { background: var(--ks-pri-osc); }

/* Pie con "Restablecer Filtros" */
.ks-a11y-foot {
    flex: none;
    background: #fff;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--ks-borde);
}
.ks-a11y-reset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    background: var(--ks-pri-osc);     /* como el botón "Enviar" del sitio */
    color: #fff;
    padding: 8px 28px;
    min-width: 60%;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}
.ks-a11y-reset:hover { background: #133853; }
.ks-a11y-reset svg { width: 16px; height: 16px; }

/* Vista "Estructura de la página" */
.ks-a11y-estructura[hidden] { display: none !important; }
.ks-a11y-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--ks-pri-osc);
    font-weight: 700;
    font-size: 14px;
    padding: 4px 0;
    margin-bottom: 10px;
    cursor: pointer;
}
.ks-a11y-estructura h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 14px 0 8px !important;
    color: var(--ks-texto) !important;
    font-family: Arial, Helvetica, sans-serif !important;
}
.ks-a11y-estructura ul { list-style: none; padding: 0; margin: 0; }
.ks-a11y-estructura li { margin: 0 0 6px; }
.ks-a11y-estructura li button {
    width: 100%;
    text-align: left;
    border: 1px solid var(--ks-borde);
    border-radius: 8px;
    background: #fff;
    color: var(--ks-texto);
    padding: 8px 10px;
    font-size: 13.5px;
    cursor: pointer;
}
.ks-a11y-estructura li button:hover { border-color: var(--ks-pri-osc); }
.ks-a11y-estructura .nivel {
    display: inline-block;
    min-width: 26px;
    margin-right: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--ks-pri-osc);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* Lupa de contenido: burbuja con el texto ampliado */
.ks-a11y-lupa {
    position: fixed;
    z-index: 100003;
    max-width: min(520px, calc(100vw - 20px));
    padding: 12px 16px;
    background: #fff;
    color: #111;
    border: 3px solid #1e396c;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
    line-height: 1.35;
    pointer-events: none;
}
.ks-a11y-lupa[hidden] { display: none !important; }

/* Máscara de lectura: oscurece arriba y abajo de una franja que sigue al ratón */
.ks-a11y-mascara {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, .55);
    pointer-events: none;
}
.ks-a11y-mascara.sup { top: 0; border-bottom: 4px solid #59bbeb; }
.ks-a11y-mascara.inf { bottom: 0; border-top: 4px solid #1e396c; }
.ks-a11y-mascara[hidden] { display: none !important; }

/* Guía de lectura: barra horizontal que sigue al ratón */
.ks-a11y-guia {
    position: fixed;
    left: 0;
    right: 0;
    height: 10px;
    z-index: 100000;
    background: #59bbeb;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #1e396c;
    pointer-events: none;
}
.ks-a11y-guia[hidden] { display: none !important; }

@media print {
    .ks-a11y-ui, .ks-a11y-lupa, .ks-a11y-mascara, .ks-a11y-guia { display: none !important; }
}


/* ======================= C) MODOS SOBRE LA PÁGINA ======================== */

/* Selector reutilizado: "todo en la página menos el widget" */
/* (se escribe completo en cada regla porque CSS no tiene alias de selectores) */

/* --- Contraste + -----------------------------------------------------------
   Nivel 1: oscuro (fondo negro, texto blanco, enlaces amarillos)
   Nivel 2: claro (fondo blanco, texto negro, enlaces azules subrayados)
   Nivel 3: invertido (filtro de inversión; las fotos se re-invierten)     */
html.ks-a11y-contraste-1 body,
html.ks-a11y-contraste-1 body *:not(.ks-a11y-ui):not(.ks-a11y-ui *):not(img):not(video):not(picture):not(svg):not(svg *) {
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
}
html.ks-a11y-contraste-1 body a:not(.ks-a11y-ui *),
html.ks-a11y-contraste-1 body a *:not(.ks-a11y-ui *) { color: #ffeb3b !important; }

html.ks-a11y-contraste-2 body,
html.ks-a11y-contraste-2 body *:not(.ks-a11y-ui):not(.ks-a11y-ui *):not(img):not(video):not(picture):not(svg):not(svg *) {
    background-color: #fff !important;
    background-image: none !important;
    color: #000 !important;
    border-color: #000 !important;
    box-shadow: none !important;
}
html.ks-a11y-contraste-2 body a:not(.ks-a11y-ui *),
html.ks-a11y-contraste-2 body a *:not(.ks-a11y-ui *) { color: #0000cc !important; text-decoration: underline !important; }

/* --- Filtros de color (contraste invertido y saturación) ------------------
   Se combinan con variables para que no se pisen entre sí. Se aplican a los
   hijos directos del <body>, no al <body>: un filtro en el body rompe los
   elementos fijos (botones flotantes, el propio widget). */
html.ks-a11y-filtros {
    --ks-f-inv: invert(0);
    --ks-f-sat: saturate(1);
}
html.ks-a11y-contraste-3 { --ks-f-inv: invert(1) hue-rotate(180deg); }
html.ks-a11y-saturacion-1 { --ks-f-sat: saturate(.45); }
html.ks-a11y-saturacion-2 { --ks-f-sat: saturate(2); }
html.ks-a11y-saturacion-3 { --ks-f-sat: grayscale(1); }
html.ks-a11y-filtros body > *:not(.ks-a11y-ui):not(.ks-a11y-lupa):not(.ks-a11y-mascara):not(.ks-a11y-guia):not(script) {
    filter: var(--ks-f-inv) var(--ks-f-sat);
}
/* En modo invertido las fotos y videos se vuelven a invertir (quedan normales) */
html.ks-a11y-contraste-3 body img,
html.ks-a11y-contraste-3 body video,
html.ks-a11y-contraste-3 body picture img {
    filter: invert(1) hue-rotate(180deg);
}

/* --- Resaltar enlaces ----------------------------------------------------- */
html.ks-a11y-enlaces body a:not(.ks-a11y-ui *):not(.skip-link) {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    outline: 2px dashed #f5a623 !important;
    outline-offset: 2px;
    background-color: #fff8d6 !important;
    color: #0b3d91 !important;
}

/* --- Resaltar encabezados ------------------------------------------------- */
html.ks-a11y-encabezados body :is(h1, h2, h3, h4, h5, h6):not(.ks-a11y-ui *) {
    outline: 3px solid #1e396c !important;
    outline-offset: 4px;
    background-color: #eef9ff !important;
    color: #091e3e !important;
}

/* --- Ocultar imágenes (se reserva el espacio) ----------------------------- */
html.ks-a11y-sin-imagenes body img:not(.ks-a11y-ui *),
html.ks-a11y-sin-imagenes body picture:not(.ks-a11y-ui *),
html.ks-a11y-sin-imagenes body video {
    visibility: hidden !important;
}
html.ks-a11y-sin-imagenes body *:not(.ks-a11y-ui *) { background-image: none !important; }

/* --- Detener animaciones -------------------------------------------------- */
html.ks-a11y-sin-animacion *,
html.ks-a11y-sin-animacion *::before,
html.ks-a11y-sin-animacion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}
html.ks-a11y-sin-animacion .wow { visibility: visible !important; }

/* --- Agrandar texto (4 niveles) — Bootstrap usa rem: basta el tamaño raíz -- */
html.ks-a11y-texto-1 { font-size: 110% !important; }
html.ks-a11y-texto-2 { font-size: 125% !important; }
html.ks-a11y-texto-3 { font-size: 140% !important; }
html.ks-a11y-texto-4 { font-size: 160% !important; }
html[class*="ks-a11y-texto-"] body :is(p, li, a, label, small, span, td, th):not(.ks-a11y-ui *) {
    font-size: 1em;
}

/* --- Cursor grande (nivel 1 de "Cursor") ---------------------------------- */
html.ks-a11y-cursor-1,
html.ks-a11y-cursor-1 * {
    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 2l15 11-6.5 1.2L16 21l-3 1.5-3.5-6.8L4 20z' fill='%23000' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E") 6 3, auto !important;
}

/* --- Apto para dislexia ----------------------------------------------------
   Nivel 1: fuente simple y legible (sin cursivas ni justificado).
   Nivel 2: fuente OpenDyslexic (letras con base "pesada" que evitan giros). */
html.ks-a11y-dislexia-1 body *:not(.ks-a11y-ui):not(.ks-a11y-ui *):not(i):not(.fa):not(.fas):not(.fab):not(.far):not([class^="bi"]):not([class*=" bi-"]) {
    font-family: Verdana, Tahoma, Arial, sans-serif !important;
    font-style: normal !important;
}
html.ks-a11y-dislexia-2 body *:not(.ks-a11y-ui):not(.ks-a11y-ui *):not(i):not(.fa):not(.fas):not(.fab):not(.far):not([class^="bi"]):not([class*=" bi-"]) {
    font-family: 'OpenDyslexic', Verdana, Arial, sans-serif !important;
    font-style: normal !important;
}
html[class*="ks-a11y-dislexia-"] body :is(p, li):not(.ks-a11y-ui *) { text-align: left !important; }

/* --- Espaciado de texto (3 niveles; el 1 = mínimo de WCAG 1.4.12) -------- */
html.ks-a11y-espaciado-1 body *:not(.ks-a11y-ui):not(.ks-a11y-ui *) { letter-spacing: .12em !important; word-spacing: .16em !important; }
html.ks-a11y-espaciado-2 body *:not(.ks-a11y-ui):not(.ks-a11y-ui *) { letter-spacing: .18em !important; word-spacing: .25em !important; }
html.ks-a11y-espaciado-3 body *:not(.ks-a11y-ui):not(.ks-a11y-ui *) { letter-spacing: .25em !important; word-spacing: .35em !important; }

/* --- Altura de la línea (3 niveles) --------------------------------------- */
html.ks-a11y-altura-1 body *:not(.ks-a11y-ui):not(.ks-a11y-ui *) { line-height: 1.5 !important; }
html.ks-a11y-altura-2 body *:not(.ks-a11y-ui):not(.ks-a11y-ui *) { line-height: 1.8 !important; }
html.ks-a11y-altura-3 body *:not(.ks-a11y-ui):not(.ks-a11y-ui *) { line-height: 2.1 !important; }

/* --- Texto alineado (4 niveles) ------------------------------------------- */
html.ks-a11y-alineado-1 body *:not(.ks-a11y-ui):not(.ks-a11y-ui *) { text-align: left !important; }
html.ks-a11y-alineado-2 body *:not(.ks-a11y-ui):not(.ks-a11y-ui *) { text-align: center !important; }
html.ks-a11y-alineado-3 body *:not(.ks-a11y-ui):not(.ks-a11y-ui *) { text-align: right !important; }
html.ks-a11y-alineado-4 body :is(p, li, dd, label):not(.ks-a11y-ui *) { text-align: justify !important; }

/* --- Lectura en voz alta: resalta el bloque que suena --------------------- */
.ks-a11y-leyendo {
    outline: 3px solid #f5a623 !important;
    outline-offset: 4px;
    background-color: rgba(245, 166, 35, .12) !important;
}
/* Destino al navegar desde "Estructura de la página" */
.ks-a11y-destino {
    outline: 3px solid #1e396c !important;
    outline-offset: 4px;
}