/* --- ACCESIBILIDAD (panel portado de mika.loaneth.tech, 2026-10-31) ---
     Cada preferencia es una clase «a11y-…» en <html>. Los colores de las plantillas salen de los
     tokens (--fondo, --texto, --primario, --acento…), así que oscuro y alto contraste solo cambian
     tokens: lo que el código ya garantiza sobre ellos (texto sobre primario/acento) se mantiene.
     (0,1,1) de «html.a11y-…» gana a (0,1,0) de «:root». */

  /* BOTÓN flotante, abajo a la izquierda (a la derecha va el de WhatsApp) */
  .a11y-boton { position: fixed; z-index: 21; left: max(1rem, env(safe-area-inset-left));
           bottom: max(1rem, env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 50%;
           display: grid; place-items: center; padding: 0; cursor: pointer; background: var(--primario);
           color: var(--sobre-primario); border: 2px solid var(--fondo); box-shadow: 0 10px 24px -10px rgba(0,0,0,.55); }
  .a11y-tema { position: fixed; z-index: 21; left: calc(max(1rem, env(safe-area-inset-left)) + 52px + .6rem);
           bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4px); width: 44px; height: 44px; border-radius: 50%;
           display: grid; place-items: center; padding: 0; cursor: pointer; background: var(--fondo);
           color: var(--texto); border: 2px solid var(--texto); box-shadow: 0 10px 24px -10px rgba(0,0,0,.55); }
  .a11y-tema .a11y-sol, .a11y-oscuro .a11y-tema .a11y-luna { display: none; }
  .a11y-oscuro .a11y-tema .a11y-sol { display: block; }
  .a11y-boton[hidden], .a11y-tema[hidden] { display: none; }
  .a11y-boton:focus-visible, .a11y-tema:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; }
  footer { padding-bottom: 6rem; }  /* que el botón no tape el pie */

  /* ESQUINA que eligió el dueño (body.a11y-en-…; sin clase, abajo a la izquierda). El botón de modo oscuro
     va siempre al lado de este, hacia adentro. WhatsApp es fijo, abajo a la derecha (58 px): en esa esquina el
     par sube encima de él, y arriba baja de la barra superior (hasta 5,8 rem en el celular, con su nombre en dos líneas) si está visible: nada se tapa. */
  .a11y-en-abajo-derecha .a11y-boton { left: auto; right: max(1rem, env(safe-area-inset-right)); }
  .a11y-en-abajo-derecha .a11y-tema { left: auto; right: calc(max(1rem, env(safe-area-inset-right)) + 52px + .6rem); }
  .con-whatsapp.a11y-en-abajo-derecha .a11y-boton { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 58px + .6rem); }
  .con-whatsapp.a11y-en-abajo-derecha .a11y-tema { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 58px + .6rem + 4px); }
  .a11y-en-arriba-izquierda, .a11y-en-arriba-derecha { --a11y-y: max(1rem, env(safe-area-inset-top)); }
  .a11y-bajo-barra.a11y-en-arriba-izquierda, .a11y-bajo-barra.a11y-en-arriba-derecha { --a11y-y: calc(max(1rem, env(safe-area-inset-top)) + 5.5rem); }
  .a11y-en-arriba-izquierda .a11y-boton, .a11y-en-arriba-derecha .a11y-boton { bottom: auto; top: var(--a11y-y); }
  .a11y-en-arriba-izquierda .a11y-tema, .a11y-en-arriba-derecha .a11y-tema { bottom: auto; top: calc(var(--a11y-y) + 4px); }
  .a11y-en-arriba-derecha .a11y-boton { left: auto; right: max(1rem, env(safe-area-inset-right)); }
  .a11y-en-arriba-derecha .a11y-tema { left: auto; right: calc(max(1rem, env(safe-area-inset-right)) + 52px + .6rem); }

  /* DIÁLOGO: centrado (el reinicio de márgenes de la base le quita el margin: auto) */
  .a11y-panel { margin: auto; padding: 0; border: 0; border-radius: var(--radio); width: min(92vw, 26rem);
           max-height: 90vh; overflow: auto; background: var(--fondo); color: var(--texto);
           font-family: var(--cuerpo); font-size: 1rem; line-height: 1.5; text-align: left; }
  .a11y-panel::backdrop { background: rgba(0, 0, 0, .6); }
  .a11y-caja { padding: 1.25rem 1.5rem 1.5rem; }
  .a11y-panel p { margin: 0 0 .75rem; font-size: 1rem; max-width: none; }
  .a11y-arriba { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; }
  .a11y-panel .a11y-titulo { margin: 0; font-family: var(--titulos); font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
  .a11y-panel fieldset { border: 0; padding: 0; margin: 1rem 0 0; }
  .a11y-panel legend { padding: 0; margin-bottom: .25rem; font-size: .8rem; font-weight: 700;
           letter-spacing: .08em; text-transform: uppercase; }
  .a11y-opcion { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 48px;
           padding: .4rem 0; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, currentColor, transparent 82%); }
  /* interruptor: el estado se ve por la posición del círculo, no solo por el color */
  .a11y-opcion input { appearance: none; flex: none; position: relative; width: 2.9rem; height: 1.6rem; margin: 0;
           border: 2px solid currentColor; border-radius: 1rem; background: transparent; cursor: pointer; }
  .a11y-opcion input::before { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.6rem - 8px);
           height: calc(1.6rem - 8px); border-radius: 50%; background: currentColor; transition: transform .15s; }
  .a11y-opcion input:checked { background: currentColor; }
  .a11y-opcion input:checked::before { background: var(--fondo); transform: translateX(1.3rem); }
  .a11y-panel button:focus-visible, .a11y-opcion input:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
  .a11y-cerrar { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit;
           font-size: 1.8rem; line-height: 1; cursor: pointer; }
  .a11y-panel .a11y-estado { min-height: 1.5em; margin: .75rem 0 0; font-weight: 600; }
  .a11y-restablecer { min-height: 44px; margin-top: .5rem; padding: .6rem 1.3rem; border: 2px solid currentColor;
           border-radius: var(--radio-boton); background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
  .a11y-panel .a11y-nota { margin: 1rem 0 0; font-size: .875rem; }

  /* LECTURA */
  html.a11y-grande { font-size: 125%; }
  .a11y-espaciado body :is(p, li, dd, dt, blockquote, label, a, span) { line-height: 1.8 !important;
           letter-spacing: .06em !important; word-spacing: .14em !important; }
  .a11y-espaciado body :is(h1, h2, h3) { line-height: 1.35 !important; letter-spacing: .02em !important; }
  html.a11y-lectura { --titulos: Verdana, "DejaVu Sans", Tahoma, sans-serif; --cuerpo: Verdana, "DejaVu Sans", Tahoma, sans-serif; }
  .a11y-lectura body, .a11y-lectura body :not(svg, svg *) { font-family: Verdana, "DejaVu Sans", Tahoma, sans-serif !important;
           font-style: normal !important; }
  .a11y-subrayado body a { text-decoration: underline !important; text-underline-offset: .2em; text-decoration-thickness: 2px; }

  /* PANTALLA */
  html.a11y-oscuro { --fondo: #121212; --texto: #f2f2f2; color-scheme: dark; }
  html.a11y-contraste { --fondo: #fff; --texto: #000; --primario: #000; --sobre-primario: #fff; --acento: #000;
           --sobre-acento: #fff; --acento-sobre-primario: #fff; --velo: .45; }
  html.a11y-contraste.a11y-oscuro { --fondo: #000; --texto: #fff; --acento: #fff; --sobre-acento: #000; }
  /* lo que efectos.py calcula con la paleta ORIGINAL (vidrio, degradados, velo) ya no vale con estos
     tokens: se vuelve sólido con los nuevos */
  html.a11y-oscuro, html.a11y-contraste { --acento-sobre-fondo: var(--texto); --vidrio-menu: var(--fondo); --degradado-1: var(--texto); --degradado-2: var(--texto); }
  html.a11y-contraste { --vidrio-panel: var(--primario); --velo-fondo: rgba(0, 0, 0, .8);
           --fondo-degradado-1: var(--primario); --fondo-degradado-2: var(--primario); }
  .a11y-contraste .a11y-panel, .a11y-contraste .a11y-boton { border: 2px solid var(--texto); }

  /* MOVIMIENTO: lo mismo que prefers-reduced-motion, también si se activa con la página ya abierta */
  .a11y-quieto *, .a11y-quieto *::before, .a11y-quieto *::after { animation: none !important;
           transition: none !important; scroll-behavior: auto !important; }
  .a11y-quieto .js-aparicion :is(main > section, .tarjetas > *, .lista > li, .galeria figure) { opacity: 1 !important;
           translate: none !important; transform: none !important; }
  .a11y-quieto .inclinado { transform: none !important; }
  .a11y-quieto .hero__3d { display: none !important; }

  /* De deiberolivares.com (análisis 2026-10-31): saltar al contenido, foco reforzado y colores
     forzados de Windows (forced-colors: el sistema pone sus colores; solo se cuidan bordes y foco) */
  .a11y-saltar { position: fixed; z-index: 30; left: 1rem; top: -5rem; padding: .7rem 1.1rem;
           background: var(--texto); color: var(--fondo); border-radius: var(--radio-boton); font-weight: 700; }
  .a11y-saltar:focus { top: 1rem; outline: 3px solid var(--primario); outline-offset: 2px; }
  main:focus { outline: none; }
  .a11y-foco :focus-visible { outline: 4px solid var(--texto) !important; outline-offset: 3px !important;
           box-shadow: 0 0 0 7px var(--fondo) !important; }
  @media (forced-colors: active) {
    .a11y-boton, .a11y-tema, .a11y-panel, .a11y-opcion input { border: 2px solid CanvasText; forced-color-adjust: auto; }
    .a11y-opcion input:checked { background: Highlight; }
    :focus-visible { outline: 3px solid Highlight !important; }
  }