/* ================================================= 
   MENÚ OCULTO ACCESIBLE
   - Invisible visualmente
   - Visible SOLO con TAB
   - Funciona con lectores de pantalla
   - Reutilizable en todos los artículos
==================================================== */

/* ========== AJUSTES DE SCROLL (headers fijos) ==========  */

section[id],
div[id] {
  scroll-margin-top: 6rem;
}

/* ========== SECCIONES: SIN ESTADO ACTIVO POR DEFECTO ==========  */

section[id],
div[id] {
  outline: none;
}

/* ========== FOCO SOLO CUANDO HAY NAVEGACIÓN POR TECLADO ==========  */

section[id]:focus-visible,
div[id]:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 6px;
  border-radius: 0.5rem;
}

/* ❌ Nunca activar con mouse */
section[id]:focus:not(:focus-visible),
div[id]:focus:not(:focus-visible) {
  outline: none;
}

/* ========== ALTO CONTRASTE ==========  */

@media (prefers-contrast: more) {
  section[id]:focus-visible,
  div[id]:focus-visible {
    outline: 4px solid #000;
  }
}

/* ========== REDUCCIÓN DE MOVIMIENTO ==========  */

@media (prefers-reduced-motion: reduce) {
  section[id],
  div[id] {
    transition: none;
  }
}

/* ========== MENÚ OCULTO ACCESIBLE (SKIP LINKS) ==========  */

.menu-accesible {
  position: relative;
  z-index: 9999;
  top: -85px
}

/* Links ocultos */
.menu-accesible .skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  background-color: #0d6efd;
  color: #ffffff;
  padding: 0.6rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Visible SOLO con TAB */
.menu-accesible .skip-link:focus-visible {
  left: 1rem;
  top: 1rem;
}

/* Mouse nunca lo muestra */
.menu-accesible .skip-link:focus:not(:focus-visible) {
  left: -9999px;
}

/* Alto contraste */
@media (prefers-contrast: more) {
  .menu-accesible .skip-link {
    background-color: #000;
    color: #fff;
    border: 2px solid #fff;
  }
}

/* ========== FOCO GLOBAL (1519 / WCAG) ==========  */

:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}


/* ==========================================================
   MENSAJE DE AYUDA PARA NAVEGACIÓN POR TECLADO MENSAJE HELP
   ========================================================== */

.menu-accesible .skip-link-help {
    position: absolute;
    top: 0;
    left: -9999px;
    background-color: #198754;
    color: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    z-index: 10000;
}

/* Mostrar cuando algún skip-link recibe foco */

.menu-accesible:focus-within .skip-link-help {
    left: 1rem;
    top: 1rem;
}

/* Mover los botones debajo del mensaje */

.menu-accesible .skip-link:focus-visible {
    left: 1rem;
    top: 4.5rem;
}

/* Alto contraste */

@media (prefers-contrast: more) {

    .menu-accesible .skip-link-help {
        background-color: #000;
        color: #fff;
        border: 2px solid #fff;
    }

}

/* ================================================= 
   FIN MENÚ OCULTO ACCESIBLE
==================================================== */