/* ══════════════════════════════════════════════════════════════════════════
   ACCESIBILIDAD — IDEX Medios / Comuncyber
   Pensado para personas con baja visión y para cumplir contraste WCAG AA/AAA.
   Se carga DESPUÉS de los estilos propios de cada página.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1) ENLACES: el navegador usa azul oscuro (#0000EE) y morado visitado, que sobre
      fondo oscuro quedan ilegibles. Estos colores superan el contraste exigido. */
a {
  color: #5eead4;                 /* teal claro — contraste ~12:1 sobre fondo oscuro */
  text-decoration: underline;      /* el subrayado no depende del color (daltónicos) */
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:visited { color: #c4b5fd; }      /* lavanda claro — ~9:1 */
a:hover, a:focus { color: #f5c451; text-decoration-thickness: 2px; }  /* dorado — ~11:1 */

/* Los enlaces que son botones, tarjetas o menús ya tienen su propio diseño */
a.boton, a.btn, .boton a, .btn a, .app, .app a, .site-nav a, nav a, .chip, .tarjeta-btn,
a[role="button"], .acciones a { text-decoration: none; }

/* 2) FOCO VISIBLE: imprescindible para navegación con teclado y baja visión */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #f5c451;
  outline-offset: 2px;
  border-radius: 6px;
}

/* 3) TEXTOS SECUNDARIOS: sube el contraste de los grises muy tenues */
.texto-tenue, .nota, small { color: #a9c9c0; }

/* 4) TAMAÑO DE LETRA AJUSTABLE (lo controla accesibilidad.js con A+ / A-) */
html { font-size: 100%; }
html.acc-115 { font-size: 115%; }
html.acc-130 { font-size: 130%; }
html.acc-150 { font-size: 150%; }

/* 5) Si el sistema pide menos movimiento, se respeta */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}