/*
 * accesibilidad.css — RETROTERM.AI
 * Cumplimiento WCAG 2.1 nivel AA
 * Cubre: foco visible, skip link, contraste mínimo en textos,
 *        movimiento reducido, tamaño mínimo de toque y legibilidad.
 */

/* 1. SKIP LINK*/
.skip-link{
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 10px 18px;
  background: #00ff66;
  color: #000;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-decoration: none;
  border: 2px solid #000;
  transition: top 0.1s;
}
.skip-link:focus{
  top: 0;
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* 2. FOCO VISIBLE — navegación por teclado */
:focus-visible{
  outline: 2px solid #00ff66 !important;
  outline-offset: 3px !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid #00ff66 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(0, 255, 102, 0.25) !important;
}

/* 3. CONTRASTE — textos que no alcanzan 4.5:1 */
.tarjeta-fecha, .articulo-meta, .art-destacado-meta{
  color: #66cc88 !important;
}

.t-tabla .dim{
  color: #7a9e7a !important;
}

.toc ol{
  color: #66cc88 !important;
}

.vm-num, .osi-num{
  color: #66cc88 !important;
}

.art-cat-titul{
  color: #66cc88 !important;
}

.hw-card p{
  color: #a0b8a0 !important;
}

/* 4. TAMAÑO MÍNIMO DE TOQUE — 44x44px (WCAG 2.5.5) */
button,
.tarjeta-link,
.btn-leer,
.volver-hub,
.volver,
.art-cat-enlace,
.card-btn,
.nav-pie a,
.breadcrumbs a{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.nav-pie a, .art-cat-enlace{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 5. MOVIMIENTO REDUCIDO (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce){
  #bg-canvas{
    display: none !important;
  }
  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  video[autoplay]{
    display: none !important;
  }
}

/* 6. TAMAÑO MÍNIMO DE FUENTE */
.tarjeta-cat, .art-destacado-tag, .articulo-tag{
  font-size: 0.75rem !important;
}

/* 7. INPUTS */
input[type="text"], textarea{
  background: rgba(0, 20, 0, 0.85);
  color: #e0e0e0;
  border: 1px solid #00ff6644;
}

input[type="text"]:focus, textarea:focus{
  border-color: #00ff66;
  outline: 2px solid #00ff66;
  outline-offset: 2px;
}

/* 8. LEGIBILIDAD */
article p, .articulo p{
  line-height: 1.6 !important;
}

/* Iconos de callout para no depender solo del color */
.callout::before{ 
  content: '✔ '; 
}
.callout.warn::before{ 
  content: '⚠ '; 
}
.callout.info::before{ 
  content: 'ℹ '; 
}

/* 9. MODO ALTO CONTRASTE (Windows)*/
@media (forced-colors: active){
  #bg-canvas{ 
    display: none !important; 
  }
  .pantalla, .pantalla-wide{
    background: Canvas !important;
    color: CanvasText !important;
    border-color: CanvasText !important;
  }
  a{ 
    color: LinkText !important; 
  }
  button{ 
    forced-color-adjust: auto; 
  }
}

/* UTILIDAD — sr-only (visible solo para lectores de pantalla) */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}