/* Botón «Accesibilidad» con ventana emergente (tamaño de texto y alto contraste) para sitios hechos con otras
   herramientas (WordPress/Elementor, Google Sites) o con su propio estilo. Lo inserta _herramientas/ajustes_lectura.py.
   - Tamaño de texto: si el sitio usa rem (data-ajustes-modo="rem"), se cambia la letra base; si usa px
     (data-ajustes-modo="zoom"), se amplía la página con zoom, sin desbordes horizontales.
   - Alto contraste: SIEMPRE fondo negro y texto claro (enlaces amarillos), también al pasar el cursor o enfocar;
     nunca se invierte un color al pasar el cursor. Las imágenes se conservan.
   El botón usa tamaños fijos en px y nombres con prefijo «al-» para que el estilo del sitio no lo altere. */

/* ── Botón y ventana ── */
.al-ajustes { position: fixed; top: 112px; right: 0; z-index: 2147483000; font: 600 16px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.al-ajustes .al-boton { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 48px; padding: 10px 14px; cursor: pointer;
  font: 700 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: 0; text-transform: none;
  color: #FFF; background: #111; border: 2px solid #FFF; border-right: 0; border-radius: 12px 0 0 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.al-ajustes .al-boton:hover { background: #2B2B2B; color: #FFF; }
.al-ajustes .al-boton svg { width: 24px; height: 24px; flex: none; fill: currentColor; }
.al-ajustes .al-caja { position: absolute; top: 56px; right: 8px; width: 290px; max-width: calc(100vw - 16px); padding: 16px;
  color: #FFF; background: #111; border: 2px solid #FFF; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); text-align: left; }
.al-ajustes .al-caja[hidden] { display: none; }
.al-ajustes .al-titulo { margin: 0 0 10px; font: 700 18px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #FFF; }
.al-ajustes .al-etiqueta { margin: 0 0 6px; font: 600 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #FFF; }
.al-ajustes .al-fila { display: flex; gap: 8px; margin: 0 0 14px; }
.al-ajustes .al-caja button { flex: 1; min-height: 44px; margin: 0; padding: 6px 10px; cursor: pointer; border-radius: 8px;
  font: 700 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: 0; text-transform: none;
  color: #FFF; background: #111; border: 2px solid #BDBDBD; box-shadow: none; }
.al-ajustes .al-caja button:hover { border-color: #FFF; background: #2B2B2B; color: #FFF; }
.al-ajustes .al-caja button[aria-pressed="true"] { color: #000; background: #FFF; border-color: #FFF; }
.al-ajustes .al-contraste { width: 100%; margin-bottom: 14px !important; }
.al-ajustes .al-enlace { display: inline-block; color: #FFEB3B; text-decoration: underline; font: 600 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.al-ajustes .al-enlace:hover { color: #FFF; }
.al-ajustes :focus-visible { outline: 3px solid #FFEB3B !important; outline-offset: 2px; }
.al-ajustes .al-solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) {
  .al-ajustes { top: auto; bottom: 88px; }
  .al-ajustes .al-boton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .al-ajustes .al-caja { top: auto; bottom: 56px; }
}
@media print { .al-ajustes { display: none; } }

/* ── Tamaño del texto ── */
html[data-ajustes-modo="rem"][data-texto="grande"] { font-size: 125% !important; }
html[data-ajustes-modo="rem"][data-texto="muy-grande"] { font-size: 150% !important; }
html[data-ajustes-modo="zoom"][data-texto="grande"] body { zoom: 1.2; }
html[data-ajustes-modo="zoom"][data-texto="muy-grande"] body { zoom: 1.45; }
html[data-ajustes-modo="zoom"][data-texto], html[data-ajustes-modo="zoom"][data-texto] body { overflow-x: hidden; }
html[data-ajustes-modo="zoom"][data-texto] .al-ajustes { zoom: .8334; }
html[data-ajustes-modo="zoom"][data-texto="muy-grande"] .al-ajustes { zoom: .6897; }

/* ── Alto contraste: fondo negro, texto blanco, enlaces amarillos; igual al pasar el cursor ── */
/* «:not(#al-x)» no filtra nada: solo sube la prioridad para ganarle a los estilos del sitio (menús de WordPress, Elementor). */
html[data-contraste="alto"]:not(#al-x), html[data-contraste="alto"]:not(#al-x) body { background: #000 !important; color: #FFF !important; }
html[data-contraste="alto"]:not(#al-x) body *:where(:not(svg, svg *, img, video, picture, iframe, canvas)) {
  background-color: #000 !important; background-image: none !important; color: #FFF !important;
  border-color: #FFF !important; text-shadow: none !important; box-shadow: none !important; transition: none !important; }
html[data-contraste="alto"]:not(#al-x) body *:where(:not(svg, svg *, img, video, picture, iframe, canvas))::before,
html[data-contraste="alto"]:not(#al-x) body *:where(:not(svg, svg *, img, video, picture, iframe, canvas))::after {
  background-image: none !important; text-shadow: none !important; box-shadow: none !important; }
html[data-contraste="alto"]:not(#al-x) body a, html[data-contraste="alto"]:not(#al-x) body a *:not(svg):not(svg *):not(img) { color: #FFEB3B !important; }
html[data-contraste="alto"]:not(#al-x) body a { text-decoration: underline !important; }
html[data-contraste="alto"]:not(#al-x) body a:hover, html[data-contraste="alto"]:not(#al-x) body a:focus-visible,
html[data-contraste="alto"]:not(#al-x) body button:hover, html[data-contraste="alto"]:not(#al-x) body [role="button"]:hover {
  background-color: #000 !important; color: #FFEB3B !important; outline: 3px solid #FFEB3B !important; outline-offset: 2px; }
html[data-contraste="alto"]:not(#al-x) body a:hover *:not(svg):not(svg *):not(img), html[data-contraste="alto"]:not(#al-x) body button:hover *:not(svg):not(svg *):not(img) {
  color: #FFEB3B !important; background-color: #000 !important; }
html[data-contraste="alto"]:not(#al-x) body input, html[data-contraste="alto"]:not(#al-x) body select, html[data-contraste="alto"]:not(#al-x) body textarea {
  border: 2px solid #FFF !important; }
html[data-contraste="alto"]:not(#al-x) body ::placeholder { color: #D0D0D0 !important; }
html[data-contraste="alto"]:not(#al-x) body img { filter: none !important; }
html[data-contraste="alto"]:not(#al-x) body svg { color: #FFF; }
html[data-contraste="alto"]:not(#al-x) :focus-visible { outline: 3px solid #FFEB3B !important; outline-offset: 2px; }
/* En la ventana, el botón activo se muestra al revés (claro sobre oscuro → oscuro sobre claro), sin cambiar al pasar el cursor. */
html[data-contraste="alto"]:not(#al-x) body .al-ajustes .al-caja button[aria-pressed="true"],
html[data-contraste="alto"]:not(#al-x) body .al-ajustes .al-caja button[aria-pressed="true"]:hover { background-color: #FFF !important; color: #000 !important; outline: none !important; }
html[data-contraste="alto"]:not(#al-x) body .al-ajustes .al-caja button[aria-pressed="true"] * { background-color: #FFF !important; color: #000 !important; }