/* JDServer WM-21 · capa transversal de accesibilidad. */

.jd-skip-link {
  position: fixed;
  z-index: 100000;
  top: 10px;
  left: 10px;
  max-width: calc(100vw - 20px);
  padding: 12px 16px;
  border: 3px solid #fff;
  border-radius: 10px;
  background: #053b75;
  color: #fff;
  font: 700 1rem/1.25 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: underline;
  transform: translateY(-180%);
  transition: transform .12s ease-out;
}

.jd-skip-link:focus,
.jd-skip-link:focus-visible {
  color: #fff;
  transform: translateY(0);
}

/* Foco doble: visible sobre fondos claros, oscuros y fotografías. */
:where(a[href], button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px #0759b8 !important;
}

:where(main, [id]):focus {
  scroll-margin-top: 1rem;
}

/* Los controles, incluidos los que sólo muestran un icono, mantienen 24×24 CSS px. */
:where(button, summary, [role="button"]) {
  min-width: 24px;
  min-height: 24px;
}

/* Los enlaces de lectura no dependen únicamente del color. */
main :where(p, li, td, dd, figcaption, small) > a[href],
footer :where(p, li, small) > a[href] {
  color: #0f6b63;
  text-decoration: underline;
  text-decoration-thickness: .09em;
  text-underline-offset: .16em;
}

html[data-theme="dark"] main :where(p, li, td, dd, figcaption, small) > a[href],
html[data-theme="dark"] footer :where(p, li, small) > a[href] {
  color: #72ead8;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .jd-skip-link {
    transition: none;
  }
}