/* ==========================================================================
   RD Inteligente — herramientas de accesibilidad propias.
   Sin dependencias: el panel, la lupa, la guía de lectura y el lector usan
   solo lo que trae el navegador. Hereda los tokens de sitio.css cuando existen
   y trae valores propios de reserva para las pantallas que no lo cargan.
   ========================================================================== */

.a11y{
  --a11y-azul:#1E6BFF;
  --a11y-noche:#001730;
  --a11y-tiza:#EDF2F7;
  --a11y-dim:#93AEC6;
  --a11y-linea:rgba(237,242,247,.18);
  --a11y-curva:cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------------------------------------ botón */
.a11y-btn{
  position:fixed; left:18px; bottom:18px; z-index:2147483000;
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:var(--a11y-azul); color:#fff; border:2px solid rgba(255,255,255,.9);
  display:grid; place-items:center; padding:0;
  box-shadow:0 8px 26px -8px rgba(0,23,48,.75);
  transition:transform .22s var(--a11y-curva), background .2s ease;
}
.a11y-btn:hover{ transform:scale(1.07) }
.a11y-btn:active{ transform:scale(.96) }
.a11y-btn svg{ width:30px; height:30px; display:block }
.a11y-btn:focus-visible{ outline:3px solid #fff; outline-offset:3px }
@media (max-width:620px){ .a11y-btn{ width:46px; height:46px; left:12px; bottom:12px } .a11y-btn svg{ width:26px; height:26px } }

/* ------------------------------------------------------------------ panel */
.a11y-panel{
  position:fixed; left:18px; bottom:82px; z-index:2147483000;
  width:min(330px, calc(100vw - 36px)); max-height:min(76vh, 620px); overflow-y:auto;
  background:var(--a11y-noche); color:var(--a11y-tiza);
  border:1px solid var(--a11y-linea); border-radius:16px;
  box-shadow:0 26px 60px -20px rgba(0,10,25,.8);
  font-family:'Instrument Sans', system-ui, sans-serif; font-size:14px; line-height:1.4;
  opacity:0; transform:translateY(10px) scale(.98); visibility:hidden;
  transition:opacity .2s ease, transform .24s var(--a11y-curva), visibility .24s;
}
.a11y-panel[data-abierto="1"]{ opacity:1; transform:none; visibility:visible }
@media (max-width:620px){ .a11y-panel{ left:12px; bottom:70px } }

.a11y-cab{
  display:flex; align-items:center; gap:10px; padding:16px 18px 13px;
  border-bottom:1px solid var(--a11y-linea); position:sticky; top:0;
  background:var(--a11y-noche); border-radius:16px 16px 0 0;
}
.a11y-cab h2{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:16px; font-weight:800; margin:0; flex:1; letter-spacing:-.01em; color:#fff;
}
.a11y-cerrar{
  width:30px; height:30px; border-radius:9px; border:1px solid var(--a11y-linea);
  background:none; color:var(--a11y-dim); cursor:pointer; font-size:17px; line-height:1;
  display:grid; place-items:center; flex:none; padding:0;
}
.a11y-cerrar:hover{ color:#fff; background:rgba(255,255,255,.08) }

.a11y-grupo{ padding:14px 18px; border-bottom:1px solid var(--a11y-linea) }
.a11y-grupo:last-of-type{ border-bottom:0 }
.a11y-grupo > h3{
  font-family:'Space Mono', ui-monospace, monospace; font-size:9.5px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--a11y-dim); margin:0 0 11px;
}

/* -------------------------------------------------------- controles A- A+ */
.a11y-escala{ display:flex; align-items:center; gap:8px }
.a11y-escala button{
  flex:1; height:40px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--a11y-linea); color:var(--a11y-tiza);
  font-family:inherit; font-weight:600; transition:.18s ease;
}
.a11y-escala button:hover{ background:rgba(255,255,255,.13) }
.a11y-escala .val{
  flex:1.2; text-align:center; font-family:'Space Mono', ui-monospace, monospace;
  font-size:13px; color:#fff; font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------- interruptores */
.a11y-ops{ display:grid; gap:7px }
.a11y-op{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:10px 12px; border-radius:11px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid transparent; color:var(--a11y-tiza);
  font-family:inherit; font-size:13.5px; transition:.18s ease;
}
.a11y-op:hover{ background:rgba(255,255,255,.11) }
.a11y-op svg{ width:19px; height:19px; flex:none; color:var(--a11y-dim) }
.a11y-op span{ flex:1 }
.a11y-op .luz{
  width:32px; height:18px; border-radius:20px; flex:none; position:relative;
  background:rgba(255,255,255,.16); transition:background .2s ease;
}
.a11y-op .luz::after{
  content:""; position:absolute; top:3px; left:3px; width:12px; height:12px;
  border-radius:50%; background:var(--a11y-dim); transition:.2s var(--a11y-curva);
}
.a11y-op[aria-pressed="true"]{ background:rgba(30,107,255,.22); border-color:var(--a11y-azul) }
.a11y-op[aria-pressed="true"] svg{ color:#7FC0FF }
.a11y-op[aria-pressed="true"] .luz{ background:var(--a11y-azul) }
.a11y-op[aria-pressed="true"] .luz::after{ left:17px; background:#fff }
.a11y-op:focus-visible, .a11y-escala button:focus-visible, .a11y-cerrar:focus-visible,
.a11y-reset:focus-visible{ outline:2px solid #7FC0FF; outline-offset:2px }

.a11y-pie{ padding:13px 18px 16px }
.a11y-reset{
  width:100%; height:40px; border-radius:10px; cursor:pointer;
  background:none; border:1px solid var(--a11y-linea); color:var(--a11y-dim);
  font-family:inherit; font-size:13px; transition:.18s ease;
}
.a11y-reset:hover{ color:#fff; border-color:var(--a11y-tiza) }
.a11y-nota{ font-size:11.5px; color:var(--a11y-dim); margin:11px 0 0; line-height:1.45 }

/* ==========================================================================
   Efectos sobre la página. Van en <html> para alcanzar todo el documento.
   ========================================================================== */

/* -- tamaño de texto: se escala la raíz, y con ella todo lo que use rem/em -- */
html.a11y-escalado{ font-size:calc(100% * var(--a11y-zoom, 1)) }
html.a11y-escalado body{ font-size:calc(1em * var(--a11y-zoom, 1)) }

/* -- espaciado de texto (WCAG 1.4.12) -------------------------------------- */
html.a11y-espaciado body :is(p,li,dd,dt,td,th,figcaption,label,.lead,.lede){
  line-height:1.9 !important; letter-spacing:.06em !important; word-spacing:.14em !important;
}
html.a11y-espaciado body :is(h1,h2,h3,h4){ line-height:1.4 !important; letter-spacing:.01em !important }

/* -- fuente legible --------------------------------------------------------- */
html.a11y-legible body, html.a11y-legible body :is(p,li,a,span,b,strong,em,h1,h2,h3,h4,td,th,button,input,label,select,textarea){
  font-family:Verdana, Tahoma, 'DejaVu Sans', system-ui, sans-serif !important;
}

/* -- enlaces subrayados ----------------------------------------------------- */
html.a11y-enlaces body a{ text-decoration:underline !important; text-underline-offset:3px }

/* -- contraste alto: se reescriben los tokens y se fuerza lo que no los usa -- */
html.a11y-contraste{
  --fondo:#000 !important; --noche:#000 !important; --noche-2:#000 !important; --noche-3:#000 !important;
  --tiza:#fff !important; --tiza-2:#fff !important; --texto:#fff !important;
  --texto-dim:#FFE95C !important; --tiza-dim:#FFE95C !important;
  --tarjeta:#000 !important; --tarjeta-2:#111 !important;
  --regla:#fff !important; --azul:#FFE95C !important; --azul-vivo:#FFE95C !important;
}
html.a11y-contraste body,
html.a11y-contraste body :is(section,header,footer,main,aside,div,article,nav){
  background-color:#000 !important; background-image:none !important; color:#fff !important;
}
html.a11y-contraste body :is(p,li,td,th,span,label,dd,dt,h1,h2,h3,h4,b,strong,em){ color:#fff !important }
html.a11y-contraste body a{ color:#FFE95C !important; text-decoration:underline !important }
html.a11y-contraste body :is(button,.btn,input,select,textarea){
  background:#000 !important; color:#FFE95C !important; border:2px solid #FFE95C !important;
}
html.a11y-contraste body :is(img,video,svg,canvas,iframe){ filter:grayscale(1) contrast(1.35) }
html.a11y-contraste .a11y-panel, html.a11y-contraste .a11y-panel *{ background-color:#000 !important; color:#fff !important }
html.a11y-contraste .a11y-btn{ background:#FFE95C !important; color:#000 !important; border-color:#000 !important }

/* -- detener animaciones ---------------------------------------------------- */
html.a11y-quieto body *, html.a11y-quieto body *::before, html.a11y-quieto body *::after{
  animation:none !important; transition:none !important; scroll-behavior:auto !important;
}

/* -- cursor grande ---------------------------------------------------------- */
html.a11y-cursor body, html.a11y-cursor body *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4 L8 38 L16 30 L22 44 L29 41 L23 27 L34 27 Z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}

/* -- guía de lectura -------------------------------------------------------- */
.a11y-guia{
  position:fixed; left:0; width:100%; height:var(--a11y-guia-alto,54px);
  pointer-events:none; z-index:2147482000; display:none;
  border-top:2px solid rgba(30,107,255,.9); border-bottom:2px solid rgba(30,107,255,.9);
  background:rgba(30,107,255,.10);
}
html.a11y-guia-on .a11y-guia{ display:block }

/* -- lupa ------------------------------------------------------------------- */
.a11y-lupa{
  position:fixed; z-index:2147483000; display:none; pointer-events:none;
  max-width:min(560px, 84vw); padding:14px 18px; border-radius:14px;
  background:#001730; color:#fff; border:2px solid #1E6BFF;
  box-shadow:0 20px 50px -14px rgba(0,10,25,.85);
  font-family:'Instrument Sans', system-ui, sans-serif;
  font-size:26px; line-height:1.35; font-weight:500;
}
html.a11y-lupa-on .a11y-lupa[data-hay="1"]{ display:block }

/* -- lector: resalta lo que está leyendo ------------------------------------ */
html.a11y-lector-on body *:hover{ outline:1px dashed rgba(30,107,255,.45); outline-offset:2px }
.a11y-leyendo{
  background:#FFE95C !important; color:#001730 !important;
  box-shadow:0 0 0 4px #FFE95C !important; border-radius:3px;
}

/* -- aviso para lectores de pantalla ---------------------------------------- */
.a11y-sr{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

@media print{ .a11y-btn, .a11y-panel, .a11y-guia, .a11y-lupa{ display:none !important } }