/* Barra de accesibilidad · InterRed
   Los estilos del panel usan variables propias para no depender del tema:
   tiene que verse igual con Twenty Twenty-Five y con DIVI. */

.ir-a11y{
  --ir-azul:#12395c; --ir-azul-claro:#1d5f96;
  --ir-papel:#fff; --ir-tinta:#16232e; --ir-borde:#c9d2d9; --ir-suave:#eef1f4;
  position:fixed; inset-block-end:1rem; inset-inline-end:1rem; z-index:99999;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Texto solo para lectores de pantalla. No se usa display:none porque eso
   lo esconde también de ellos. */
.ir-a11y__oculto{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.ir-a11y__abrir{
  display:grid; place-items:center; width:3.25rem; height:3.25rem;
  border-radius:50%; border:2px solid var(--ir-papel); cursor:pointer;
  background:var(--ir-azul); color:var(--ir-papel);
  box-shadow:0 2px 6px rgba(0,0,0,.25), 0 8px 24px -8px rgba(0,0,0,.35);
}
.ir-a11y__abrir:hover{background:var(--ir-azul-claro)}
.ir-a11y__abrir:focus-visible,
.ir-a11y button:focus-visible{outline:3px solid #ffbf47; outline-offset:2px}

.ir-a11y__panel{
  position:absolute; inset-block-end:4.25rem; inset-inline-end:0;
  width:min(20rem,calc(100vw - 2rem)); max-height:min(34rem,calc(100vh - 7rem));
  overflow-y:auto; padding:1rem;
  background:var(--ir-papel); color:var(--ir-tinta);
  border:1px solid var(--ir-borde); border-radius:.5rem;
  box-shadow:0 4px 12px rgba(0,0,0,.16), 0 16px 40px -12px rgba(0,0,0,.3);
}
.ir-a11y__panel[hidden]{display:none}

.ir-a11y__cabecera{display:flex; align-items:center; justify-content:space-between; margin-bottom:.85rem}
.ir-a11y__cabecera h2{margin:0; font-size:1.05rem; font-weight:700; color:var(--ir-tinta)}
.ir-a11y__cerrar{
  display:grid; place-items:center; width:2rem; height:2rem; padding:0;
  background:none; border:1px solid var(--ir-borde); border-radius:.25rem;
  color:var(--ir-tinta); cursor:pointer;
}
.ir-a11y__cerrar:hover{background:var(--ir-suave)}

.ir-a11y__grupo{border:0; padding:0; margin:0 0 .85rem}
.ir-a11y__grupo legend{
  padding:0; margin-bottom:.4rem; font-size:.75rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#54626d;
}
.ir-a11y__tamanos{display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem}
.ir-a11y__tamano{
  display:grid; place-items:center; min-height:2.75rem; cursor:pointer;
  background:var(--ir-papel); border:1px solid var(--ir-borde);
  border-radius:.25rem; color:var(--ir-tinta); font-weight:600;
}
.ir-a11y__tamano:hover{background:var(--ir-suave)}
.ir-a11y__tamano[aria-pressed="true"]{background:var(--ir-azul); border-color:var(--ir-azul); color:var(--ir-papel)}

.ir-a11y__opcion{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  width:100%; min-height:2.75rem; padding:.5rem .7rem; margin-bottom:.4rem;
  background:var(--ir-papel); border:1px solid var(--ir-borde);
  border-radius:.25rem; color:var(--ir-tinta); font-size:.92rem;
  text-align:start; cursor:pointer;
}
.ir-a11y__opcion:hover{background:var(--ir-suave)}
.ir-a11y__interruptor{
  flex:0 0 auto; width:2.35rem; height:1.3rem; border-radius:1rem;
  background:#b6c0c8; position:relative; transition:background .15s;
}
.ir-a11y__interruptor::after{
  content:""; position:absolute; inset-block-start:.15rem; inset-inline-start:.15rem;
  width:1rem; height:1rem; border-radius:50%; background:#fff; transition:transform .15s;
}
.ir-a11y__opcion[aria-pressed="true"] .ir-a11y__interruptor{background:var(--ir-azul)}
.ir-a11y__opcion[aria-pressed="true"] .ir-a11y__interruptor::after{transform:translateX(1.05rem)}
/* El estado no puede depender solo del color: criterio 1.4.1. */
.ir-a11y__opcion[aria-pressed="true"]{border-color:var(--ir-azul); border-inline-start-width:4px; font-weight:600}

.ir-a11y__reset{
  width:100%; min-height:2.75rem; cursor:pointer; font-size:.92rem; font-weight:600;
  background:var(--ir-suave); border:1px solid var(--ir-borde);
  border-radius:.25rem; color:var(--ir-tinta);
}
.ir-a11y__reset:hover{background:#e2e7eb}
.ir-a11y__nota{margin:.7rem 0 0; font-size:.75rem; line-height:1.4; color:#54626d}

/* ---------- lo que las preferencias aplican al sitio ---------- */

html.ir-texto-1{font-size:118%}
html.ir-texto-2{font-size:136%}

/* Criterio 1.4.12: los valores son los que la propia norma define como
   mínimos que el contenido debe soportar sin romperse. */
html.ir-espaciado body,
html.ir-espaciado p, html.ir-espaciado li, html.ir-espaciado dd{
  line-height:1.6!important; letter-spacing:.12em!important; word-spacing:.16em!important;
}
html.ir-espaciado p{margin-block-end:2em!important}

html.ir-enlaces a:not(.ir-a11y__abrir):not(.ir-a11y__opcion){
  text-decoration:underline!important; text-underline-offset:.2em!important;
  text-decoration-thickness:.12em!important; outline:1px dotted currentColor; outline-offset:2px;
}

html.ir-sin-animacion *,
html.ir-sin-animacion *::before,
html.ir-sin-animacion *::after{
  animation-duration:.001ms!important; animation-iteration-count:1!important;
  transition-duration:.001ms!important; scroll-behavior:auto!important;
}
html.ir-sin-animacion video[autoplay]{display:none}

/* Alto contraste: amarillo sobre negro, que es la convención que la gente
   reconoce de los modos de contraste del sistema operativo. El panel se
   excluye para que siga siendo legible y operable. */
html.ir-contraste body,
html.ir-contraste :not(.ir-a11y):not(.ir-a11y *){
  background-color:#000!important; color:#fff!important; border-color:#fff!important;
}
/* Estas reglas repiten los dos :not() de la regla general a propósito.
   Sin el segundo, «html.ir-contraste a:not(.ir-a11y *)» queda en especificidad
   (0,2,2) y pierde contra la regla general, que es (0,3,1) — y como ambas
   llevan !important, el !important no desempata nada. El resultado era que los
   enlaces salían blancos en vez de amarillos, sin ningún error visible. */
html.ir-contraste a:not(.ir-a11y):not(.ir-a11y *){
  color:#ff0!important; text-decoration:underline!important;
}
html.ir-contraste button:not(.ir-a11y):not(.ir-a11y *),
html.ir-contraste input:not(.ir-a11y):not(.ir-a11y *),
html.ir-contraste select:not(.ir-a11y):not(.ir-a11y *),
html.ir-contraste textarea:not(.ir-a11y):not(.ir-a11y *){
  background:#000!important; color:#fff!important; border:1px solid #fff!important;
}
html.ir-contraste img:not(.ir-a11y):not(.ir-a11y *),
html.ir-contraste video:not(.ir-a11y):not(.ir-a11y *){outline:1px solid #fff; outline-offset:2px}
html.ir-contraste :focus-visible{outline:3px solid #ff0!important; outline-offset:2px!important}

@media (prefers-reduced-motion:reduce){
  .ir-a11y__interruptor,.ir-a11y__interruptor::after{transition:none}
}
@media print{ .ir-a11y{display:none} }
