/* =====================================================================
   psf-accesibilidad.css — El panel de ajustes de lectura
   ---------------------------------------------------------------------
   [D-108 · v6.24.0]

   QUE RESUELVE. El sitio cumple WCAG 2.1 AA y eso es un suelo, no un
   techo. Un estudiante con baja vision, con dislexia, con daltonismo o
   simplemente leyendo en un telefono a pleno sol necesita poder cambiar
   la presentacion sin tener que pelearse con el zoom del navegador.
   Este panel expone cinco ajustes, todos de CSS, todos recordados.

   POR QUE CINCO Y NO VEINTE. Cada uno corresponde a un criterio de la
   norma o a una necesidad documentada, y ninguno duplica algo que el
   navegador ya haga bien:

     1. Alto contraste  — 1.4.6 (AAA). Los valores viven en psf-tokens.css.
     2. Texto mas grande — 1.4.4. Escala la raiz, no cada componente, para
        que TODO el sistema de espaciado crezca con el texto.
     3. Mas espaciado   — 1.4.12. Los valores exactos que exige el
        criterio: interlineado 1,5; parrafos 2x; letra 0,12em; palabra
        0,16em. Es la ayuda mejor documentada para dislexia.
     4. Enlaces subrayados — 1.4.1. Que el enlace no se distinga solo por
        el color.
     5. Menos movimiento — 2.3.3. Complementa prefers-reduced-motion para
        quien no lo tiene puesto en el sistema pero lo necesita aqui.

   EL SISTEMA MANDA POR DEFECTO. Si el usuario no ha tocado el panel, se
   respetan prefers-contrast y prefers-reduced-motion. Solo cuando elige
   explicitamente, su eleccion gana sobre la del sistema.

   NINGUN HEX AQUI. Regla dura del proyecto: el color vive en
   psf-tokens.css. Esta hoja solo compone.
   ===================================================================== */

/* ── El boton que abre el panel ──────────────────────────────────── */
.psf-a11y{position:fixed;right:var(--pf-s-3);bottom:var(--pf-s-3);z-index:9999}
.psf-a11y__btn{
 display:inline-flex;align-items:center;gap:var(--pf-s-2);
 min-height:var(--pf-tap);min-width:var(--pf-tap);padding:var(--pf-s-2) var(--pf-s-3);
 background:var(--pf-surface);color:var(--pf-ink);
 border:2px solid var(--pf-ink);border-radius:var(--pf-r-pill);
 font-family:var(--pf-sans);font-size:var(--pf-fs-small);font-weight:var(--pf-w-semibold);
 cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.14)}
.psf-a11y__btn:hover{background:var(--pf-paper-alt)}
.psf-a11y__btn:focus-visible{outline:3px solid var(--pf-ink);outline-offset:3px}
.psf-a11y__ico{font-size:1.15em;line-height:1}

/* ── El panel ────────────────────────────────────────────────────── */
.psf-a11y__panel{
 position:absolute;right:0;bottom:calc(var(--pf-tap) + var(--pf-s-3));
 width:min(19rem,calc(100vw - var(--pf-s-6)));
 background:var(--pf-surface);color:var(--pf-ink);
 border:2px solid var(--pf-ink);border-radius:var(--pf-r-md);
 padding:var(--pf-s-4);box-shadow:0 6px 24px rgba(0,0,0,.2)}
.psf-a11y__panel[hidden]{display:none}

/* ── El modo accesible, un botón y ya ────────────────────────────────
   [D-157 · v9.1.0]

   POR QUE UN BOTON SI YA HAY SEIS AJUSTES. Porque quien más necesita el
   panel es quien peor lo ve mientras lo configura: pedirle que encuentre
   y decida cinco radios diminutos, con el contraste todavía bajo y el
   texto todavía pequeño, es pedirle que resuelva el problema usando la
   herramienta que el problema le estropea. Un clic enciende los cinco;
   los seis ajustes siguen debajo para quien quiera afinar.

   EL TEMA NO ENTRA. Claro y oscuro es preferencia, no necesidad.

   ES EL PRIMER ELEMENTO Y RECIBE EL FOCO al abrirse el panel: el camino
   más corto va del botón flotante al modo accesible, sin pasar por nada.
   ────────────────────────────────────────────────────────────────── */
.psf-a11y__modo{
 display:block;width:100%;text-align:left;
 min-height:var(--pf-tap);margin:0 0 var(--pf-s-4);padding:var(--pf-s-3);
 background:var(--pf-accent-tint);color:var(--pf-ink);
 border:2px solid var(--pf-accent-tx);border-radius:var(--pf-r-sm);
 font-family:var(--pf-sans);cursor:pointer}
.psf-a11y__modo:hover{border-color:var(--pf-ink)}
.psf-a11y__modo:focus-visible{outline:3px solid var(--pf-ink);outline-offset:3px}
.psf-a11y__modo-t{
 display:block;font-size:var(--pf-fs-small);font-weight:var(--pf-w-semibold);
 line-height:1.3}
.psf-a11y__modo-d{
 display:block;margin-top:var(--pf-s-1);
 font-size:var(--pf-fs-micro);line-height:1.5;color:var(--pf-ink-soft)}
/* Encendido, se invierte: el estado se ve sin leer el rótulo. */
.psf-a11y__modo[aria-pressed="true"]{
 background:var(--pf-ink);color:var(--pf-surface);border-color:var(--pf-ink)}
.psf-a11y__modo[aria-pressed="true"] .psf-a11y__modo-d{color:var(--pf-surface)}

.psf-a11y__t{
 margin:0 0 var(--pf-s-1);font-family:var(--pf-sans);font-size:var(--pf-fs-body);
 font-weight:var(--pf-w-bold);line-height:1.3}
.psf-a11y__sub{
 margin:0 0 var(--pf-s-3);font-size:var(--pf-fs-micro);line-height:1.5;color:var(--pf-ink-soft)}
.psf-a11y__g{margin:0 0 var(--pf-s-3);border:0;padding:0}
.psf-a11y__lg{
 display:block;padding:0;margin:0 0 var(--pf-s-2);
 font-family:var(--pf-mono);font-size:var(--pf-fs-micro);text-transform:uppercase;
 letter-spacing:var(--pf-track-label);color:var(--pf-ink-faint-tx)}
.psf-a11y__ops{display:flex;flex-wrap:wrap;gap:var(--pf-s-2)}

/* Los controles son radios y casillas de verdad: el lector de pantalla y
   el teclado los entienden sin que haya que enseñarles nada. La caja real
   se oculta visualmente pero NUNCA con display:none, que la sacaría del
   orden de tabulación. */
.psf-a11y__ops input{
 position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.psf-a11y__ops label{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:var(--pf-tap);padding:var(--pf-s-1) var(--pf-s-3);
 border:2px solid var(--pf-line);border-radius:var(--pf-r-pill);
 font-size:var(--pf-fs-small);line-height:1.4;cursor:pointer;background:var(--pf-surface)}
.psf-a11y__ops label:hover{border-color:var(--pf-ink-faint)}
.psf-a11y__ops input:checked + label{
 background:var(--pf-ink);color:var(--pf-surface);border-color:var(--pf-ink);
 font-weight:var(--pf-w-semibold)}
/* El foco se ve en la etiqueta, porque la caja real es invisible. */
.psf-a11y__ops input:focus-visible + label{outline:3px solid var(--pf-ink);outline-offset:3px}
.psf-a11y__reset{
 display:inline-flex;align-items:center;min-height:var(--pf-tap);
 background:none;border:0;padding:0;cursor:pointer;
 font-family:var(--pf-sans);font-size:var(--pf-fs-micro);color:var(--pf-ink-soft);
 text-decoration:underline}
.psf-a11y__reset:focus-visible{outline:3px solid var(--pf-ink);outline-offset:2px}

/* ── Enlace de salto, lo primero que encuentra el teclado ────────── */
.psf-a11y-salto{
 position:absolute;left:-9999px;top:0;z-index:10000;
 background:var(--pf-surface);color:var(--pf-ink);
 border:2px solid var(--pf-ink);border-radius:0 0 var(--pf-r-md) 0;
 padding:var(--pf-s-2) var(--pf-s-4);font-weight:var(--pf-w-semibold)}
.psf-a11y-salto:focus{left:0}

/* ═════════════════════════════════════════════════════════════════
   LOS MODOS
   ═════════════════════════════════════════════════════════════════ */

/* 1. Texto más grande. Se escala la RAÍZ, no los componentes: como todo
      el sistema de espaciado está en rem y en tokens, el aire crece con
      la letra en vez de quedarse apretado. */
:root[data-pf-texto="grande"]      { font-size:112.5%; }
:root[data-pf-texto="muy-grande"]  { font-size:125%; }

/* 2. Espaciado de texto — los valores exactos del criterio 1.4.12. */
:root[data-pf-espaciado="amplio"] body,
:root[data-pf-espaciado="amplio"] p,
:root[data-pf-espaciado="amplio"] li,
:root[data-pf-espaciado="amplio"] dd,
:root[data-pf-espaciado="amplio"] dt,
:root[data-pf-espaciado="amplio"] td,
:root[data-pf-espaciado="amplio"] th{
 line-height:1.5 !important;
 letter-spacing:.12em !important;
 word-spacing:.16em !important}
:root[data-pf-espaciado="amplio"] p{margin-bottom:2em !important}
/* El monoespaciado de los rótulos ya lleva su propio tracking; sumarle
   0,12em lo rompe. Se le respeta el suyo. */
:root[data-pf-espaciado="amplio"] [class*="__cr"],
:root[data-pf-espaciado="amplio"] [class*="__lg"]{letter-spacing:var(--pf-track-label) !important}

/* 3. Enlaces siempre subrayados — 1.4.1, que el color no sea la única
      señal. Se excluyen los que ya son botones o píldoras, donde el
      subrayado es ruido y la forma ya los distingue. */
:root[data-pf-enlaces="subrayados"] a:not([class*="btn"]):not([class*="__b"]):not(.psf-a11y-salto){
 text-decoration:underline !important;
 text-underline-offset:2px}

/* 4. Menos movimiento. Complementa a prefers-reduced-motion para quien
      no lo tiene puesto en el sistema. */
:root[data-pf-movimiento="reducido"] *,
:root[data-pf-movimiento="reducido"] *::before,
:root[data-pf-movimiento="reducido"] *::after{
 animation-duration:.001ms !important;
 animation-iteration-count:1 !important;
 transition-duration:.001ms !important;
 scroll-behavior:auto !important}

/* 5. Alto contraste: los tokens viven en psf-tokens.css. Aquí solo lo que
      no es color — grosores de borde y de foco, que también son
      contraste. */
:root[data-pf-contraste="alto"] .psf-a11y__ops label{border-width:2px}
:root[data-pf-contraste="alto"] :focus-visible{outline:3px solid var(--pf-ink);outline-offset:2px}
:root[data-pf-contraste="alto"] img,
:root[data-pf-contraste="alto"] svg{forced-color-adjust:auto}

/* El foco visible es innegociable en cualquier modo. */
.psf-a11y a:focus-visible,.psf-a11y button:focus-visible{outline:3px solid var(--pf-ink);outline-offset:3px}

@media print{ .psf-a11y,.psf-a11y-salto{display:none !important} }

@media (max-width:520px){
 .psf-a11y{right:var(--pf-s-2);bottom:var(--pf-s-2)}
 .psf-a11y__panel{width:calc(100vw - var(--pf-s-4))}
 /* El rótulo del botón estorba en pantalla estrecha; queda el icono, que
    conserva su nombre accesible por aria-label. */
 .psf-a11y__txt{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}