/**
 * @file
 * Gov Accessibility block component styles.
 *
 * Provides fixed-position, high-contrast accessibility options block.
 * Uses only --ra- CSS variables for theming consistency.
 */

/* ====================================
   GOV ACCESSIBILITY BLOCK
   ==================================== */

.gov-accessibility-block {
  /* Positioning - Fixed on right side, middle of viewport */
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1200;

  /* Dimensions and spacing */
  max-width: 320px;
  /* padding: 1rem; */

  /* Visual styling with --ra- variables */
  background-color: var(--ra-color-cobalt, #0943B5);
  color: var(--ra-color-white, #FFFFFF);
  box-shadow: var(--ra-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  border-radius: 0.5rem 0 0 0.5rem;

  /* Ensure text remains readable */
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Backwards-compatibility with barrio_custom production styles: use the
   same 'accesibilidad-items' behavior and hovering slide-out. We target both
   the generic gov-accessibility-block and the legacy id used in the parent
   theme so the look will match production. */
#block-govaccessibility,
#block-barrio-redaprende-govaccessibility,
.gov-accessibility-block {
  background-color: #0066CD; /* production background */
  border-radius: 8px;
  box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.17);
}

#block-govaccessibility .accesibilidad-items,
#block-barrio-redaprende-govaccessibility .accesibilidad-items,
.gov-accessibility-block .accesibilidad-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 5px;
  width: 36px;
  margin: 0;
}

#block-govaccessibility .accesibilidad-items a,
#block-barrio-redaprende-govaccessibility .accesibilidad-items a,
.gov-accessibility-block .accesibilidad-items a {
  display: flex;
  align-items: center;
  color: #fff;
  border-radius: 8px;
  transition: all 0.5s;
  width: 180px;
  padding: 2px 0px;
  text-decoration: none;
}

#block-govaccessibility .accesibilidad-items a img,
#block-barrio-redaprende-govaccessibility .accesibilidad-items a img,
.gov-accessibility-block .accesibilidad-items a img {
  width: 26px;
  height: 26px;
  padding: 4px;
  margin: 5px 0;
  background-color: #fff;
  border-radius: 6px;
}

#block-govaccessibility .accesibilidad-items a span,
#block-barrio-redaprende-govaccessibility .accesibilidad-items a span,
.gov-accessibility-block .accesibilidad-items a span {
  font-size: 0.8125rem; /* 13px -> rem */
  margin-left: 10px;
}

#block-govaccessibility .accesibilidad-items a:hover,
#block-barrio-redaprende-govaccessibility .accesibilidad-items a:hover,
.gov-accessibility-block .accesibilidad-items a:hover {
  background-color: #004884;
  transform: translateX(-140px);
  padding: 2px 10px;
}

/* Title styling */
.gov-accessibility-block__title {
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ra-color-white, #FFFFFF);
}

/* Content wrapper */
.gov-accessibility-block__content {
  /* Ensure inner content inherits proper styling */
  color: inherit;
}

/* ====================================
   INTERACTIVE ELEMENTS
   ==================================== */

/* Links and buttons inside the block */
.gov-accessibility-block a,
.gov-accessibility-block button {
  color: var(--ra-color-white, #FFFFFF);
  text-decoration: underline;
  background: transparent;
  border: 1px solid transparent;
  padding: 0.25rem 0.5rem;
  display: inline-block;
  transition: all 0.2s ease-in-out;
}

.gov-accessibility-block a:hover,
.gov-accessibility-block button:hover {
  background-color: rgba(255, 255, 255, 0.15);
  text-decoration: none;
  border-radius: 0.25rem;
}

/* Focus styles - high contrast for accessibility */
.gov-accessibility-block a:focus,
.gov-accessibility-block button:focus,
.gov-accessibility-block a:focus-visible,
.gov-accessibility-block button:focus-visible {
  outline: 3px solid var(--ra-color-white, #FFFFFF);
  outline-offset: 2px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
}

/* When block receives focus class via JS */
.gov-accessibility-block.is-focus {
  box-shadow: var(--ra-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1)),
              0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* ====================================
   RESPONSIVE BEHAVIOR
   ==================================== */

/* Mobile: Move to bottom-right corner */
@media (max-width: 639px) {
  .gov-accessibility-block {
    /* Reset positioning */
    top: auto;
    right: 12px;
    bottom: 12px;
    transform: none;

    /* Adjust dimensions for mobile */
    max-width: calc(100vw - 24px);
    padding: 0.875rem;
    font-size: 0.875rem;
  }

  .gov-accessibility-block__title {
    font-size: 0.9375rem;
  }
}

/* Tablets and small desktops */
@media (min-width: 640px) and (max-width: 1023px) {
  .gov-accessibility-block {
    max-width: 280px;
    padding: 0.875rem;
  }
}

/* ====================================
   PRINT STYLES
   ==================================== */

@media print {
  .gov-accessibility-block {
    display: none;
  }
}

/* ====================================
   HIGH CONTRAST MODE
   ==================================== */

@media (prefers-contrast: high) {
  .gov-accessibility-block {
    border: 2px solid var(--ra-color-white, #FFFFFF);
  }

  .gov-accessibility-block a:focus,
  .gov-accessibility-block button:focus {
    outline-width: 4px;
  }
}

/* ====================================
   REDUCED MOTION
   ==================================== */

@media (prefers-reduced-motion: reduce) {
  .gov-accessibility-block,
  .gov-accessibility-block a,
  .gov-accessibility-block button {
    transition: none;
  }
}

/* ====================================
   ADMIN TOOLBAR ADJUSTMENTS
   ==================================== */

/* If Drupal admin toolbar is present, adjust z-index to stay below it */
body.toolbar-fixed .gov-accessibility-block {
  z-index: 499; /* Below admin toolbar (z-index 500) */
}

body.toolbar-horizontal.toolbar-tray-open .gov-accessibility-block {
  top: calc(50% + 39px); /* Adjust for toolbar height */
}

/* Vertical toolbar (sidebar) */
body.toolbar-vertical .gov-accessibility-block {
  right: 0; /* Keep on right side */
}

/* ====================================
   GOV ACCESSIBILITY: HIGH CONTRAST AND TEXT SIZE HOOKS
   These classes are toggled by the govaccessibility JS in the theme and
   support the public 'Gov Accessibility' block buttons.
   ==================================== */

/* Text size: increase/reduce using classes on <html> or <body> */
html.gov-accessibility-font-1, body.gov-accessibility-font-1 {
  font-size: 112.5%; /* ~18px */
}

html.gov-accessibility-font-2, body.gov-accessibility-font-2 {
  font-size: 125%; /* ~20px */
}

html.gov-accessibility-font-small, body.gov-accessibility-font-small {
  font-size: 87.5%; /* ~14px */
}

html.gov-accessibility-font-smaller, body.gov-accessibility-font-smaller {
  font-size: 75%; /* ~12px */
}

/* High contrast: flip to a stronger palette
   This should override background/colors across the site for readability */
html.gov-accessibility-contrast, body.gov-accessibility-contrast {
  --ra-text-primary: #000000 !important;
  --ra-bg-primary: #FFFFFF !important;
  --ra-color-cobalt: #0000ff !important;
  --ra-text-light: #000000 !important;
  background-color: var(--ra-bg-primary) !important;
  color: var(--ra-text-primary) !important;
}

html.gov-accessibility-contrast a, body.gov-accessibility-contrast a {
  color: #0000ff !important;
  text-decoration: underline !important;
}

/* Make icons and images slightly more visible in contrast mode */
html.gov-accessibility-contrast img, body.gov-accessibility-contrast img {
  border: 2px solid var(--ra-text-light) !important;
}

/* Blue buttons: invert to white background when contrast mode is active */
html.gov-accessibility-contrast .header__login-button,
html.gov-accessibility-contrast .contenidos-recursos__btn,
html.gov-accessibility-contrast .ra-cta__button,
html.gov-accessibility-contrast .recurso-card__link,
html.gov-accessibility-contrast .navega-filters__apply-trigger,
html.gov-accessibility-contrast .recursos-filters__apply-trigger,
html.gov-accessibility-contrast .navega-card__chips .navega-card__chip,
html.gov-accessibility-contrast .recurso-card__chip {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* Make sure links in buttons are visible */
html.gov-accessibility-contrast .recurso-card__link svg {
  fill: var(--ra-text-light) !important;
}

/* ====================================
   CONTRAST MODE: HEADER
   Ensure the header top area keeps a readable contrast under gov-accessibility
   (header variables are overridden in _accessibility.scss) */
html.gov-accessibility-contrast .header__top-bar,
body.gov-accessibility-contrast .header__top-bar {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

/* Header bottom bar - asegurar fondo blanco para máximo contraste */
html.gov-accessibility-contrast .header__bottom-bar,
body.gov-accessibility-contrast .header__bottom-bar {
  background-color: #FFFFFF !important;
  border-bottom: 3px solid #000000 !important;
}

/* Enlaces de navegación del bottom bar (Archivo de noticias, Contenido, Servicios, Ayuda) */
html.gov-accessibility-contrast .header__bottom-bar .header-nav__link,
body.gov-accessibility-contrast .header__bottom-bar .header-nav__link,
html.gov-accessibility-contrast .header__bottom-bar .header-nav__item a,
body.gov-accessibility-contrast .header__bottom-bar .header-nav__item a {
  color: #0000ff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 0.75rem 1rem !important;
  border-radius: 4px !important;
  background-color: transparent !important;
  border: 2px solid transparent !important;
  transition: all 0.2s ease !important;
}

html.gov-accessibility-contrast .header__bottom-bar .header-nav__link:hover,
body.gov-accessibility-contrast .header__bottom-bar .header-nav__link:hover,
html.gov-accessibility-contrast .header__bottom-bar .header-nav__item a:hover,
body.gov-accessibility-contrast .header__bottom-bar .header-nav__item a:hover {
  background-color: #FAD118 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  text-decoration: none !important;
}

html.gov-accessibility-contrast .header__bottom-bar .header-nav__link:focus-visible,
body.gov-accessibility-contrast .header__bottom-bar .header-nav__link:focus-visible,
html.gov-accessibility-contrast .header__bottom-bar .header-nav__item a:focus-visible,
body.gov-accessibility-contrast .header__bottom-bar .header-nav__item a:focus-visible {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}

/* Iconos dentro de los enlaces del bottom bar */
html.gov-accessibility-contrast .header__bottom-bar .header-nav__icon,
body.gov-accessibility-contrast .header__bottom-bar .header-nav__icon,
html.gov-accessibility-contrast .header__bottom-bar .header-nav__icon-img,
body.gov-accessibility-contrast .header__bottom-bar .header-nav__icon-img,
html.gov-accessibility-contrast .header__bottom-bar svg,
body.gov-accessibility-contrast .header__bottom-bar svg {
  fill: #000000 !important;
  stroke: #000000 !important;
  color: #000000 !important;
  filter: contrast(1.2) !important;
}

html.gov-accessibility-contrast .header__bottom-bar .header-nav__link:hover .header-nav__icon,
body.gov-accessibility-contrast .header__bottom-bar .header-nav__link:hover .header-nav__icon,
html.gov-accessibility-contrast .header__bottom-bar .header-nav__link:hover .header-nav__icon-img,
body.gov-accessibility-contrast .header__bottom-bar .header-nav__link:hover .header-nav__icon-img,
html.gov-accessibility-contrast .header__bottom-bar .header-nav__link:hover svg,
body.gov-accessibility-contrast .header__bottom-bar .header-nav__link:hover svg {
  fill: #000000 !important;
  stroke: #000000 !important;
}

/* Logo Colombia Aprende en bottom bar */
html.gov-accessibility-contrast .header__bottom-bar .header__brand-logo,
body.gov-accessibility-contrast .header__bottom-bar .header__brand-logo {
  filter: contrast(1.3) brightness(0.9) !important;
}

html.gov-accessibility-contrast .header__top-bar .header__gov-link,
body.gov-accessibility-contrast .header__top-bar .header__gov-link,
html.gov-accessibility-contrast .header__top-bar .header__login-button,
body.gov-accessibility-contrast .header__top-bar .header__login-button,
html.gov-accessibility-contrast .header__top-bar .header__nav a,
body.gov-accessibility-contrast .header__top-bar .header__nav a {
  color: var(--ra-header-text-light) !important;
  border-color: var(--ra-header-text-light) !important;
}

/* Make header nav links and the user menu readable */
html.gov-accessibility-contrast .header-nav__link,
body.gov-accessibility-contrast .header-nav__link,
html.gov-accessibility-contrast .header__user-menu,
body.gov-accessibility-contrast .header__user-menu {
  color: var(--ra-header-text-light) !important;
}

html.gov-accessibility-contrast .header-nav__link:focus-visible,
body.gov-accessibility-contrast .header-nav__link:focus-visible,
html.gov-accessibility-contrast .header__user-menu:focus-visible,
body.gov-accessibility-contrast .header__user-menu:focus-visible,
html.gov-accessibility-contrast .header__user-button:focus-visible,
body.gov-accessibility-contrast .header__user-button:focus-visible {
  outline: 3px solid var(--ra-header-text-light) !important;
  outline-offset: 2px !important;
}

/* Make dropdown caret / arrow visible */
html.gov-accessibility-contrast .header-nav__item--dropdown .header-nav__arrow,
body.gov-accessibility-contrast .header-nav__item--dropdown .header-nav__arrow {
  color: var(--ra-header-text-light) !important;
}

/* ====================================
   DROPDOWNS EN MODO CONTRASTE
   Aplicar mismo estilo exitoso de header-dropdown__list-item a todos los dropdowns
   ==================================== */

/* Dropdown container - fondo blanco para máxima legibilidad */
html.gov-accessibility-contrast .header-dropdown,
body.gov-accessibility-contrast .header-dropdown,
html.gov-accessibility-contrast .header__user-dropdown,
body.gov-accessibility-contrast .header__user-dropdown {
  background-color: #FFFFFF !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Títulos de dropdown */
html.gov-accessibility-contrast .header-dropdown__title,
body.gov-accessibility-contrast .header-dropdown__title {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* Lista del dropdown - fondo blanco consistente */
html.gov-accessibility-contrast .header-dropdown__list,
body.gov-accessibility-contrast .header-dropdown__list {
  background: #FFFFFF !important;
  border: none !important;
  padding: 1rem !important;
}

/* Items del dropdown - mismo estilo que se ve bien actualmente */
html.gov-accessibility-contrast .header-dropdown__link,
body.gov-accessibility-contrast .header-dropdown__link,
html.gov-accessibility-contrast .header__user-dropdown-link,
body.gov-accessibility-contrast .header__user-dropdown-link {
  color: #000000 !important;
  background-color: #FAD118 !important;
  padding: 0.75rem 1rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  border: 2px solid #000000 !important;
  transition: all 0.2s ease !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
}

/* Hover state - fondo amarillo con borde negro (consistente con bottom bar) */
html.gov-accessibility-contrast .header-dropdown__link:hover,
body.gov-accessibility-contrast .header-dropdown__link:hover,
html.gov-accessibility-contrast .header__user-dropdown-link:hover,
body.gov-accessibility-contrast .header__user-dropdown-link:hover {
  background-color: #000000 !important;
  color: #FAD118 !important;
  border: 2px solid #FAD118 !important;
  text-decoration: none !important;
}

/* Focus visible */
html.gov-accessibility-contrast .header-dropdown__link:focus,
body.gov-accessibility-contrast .header-dropdown__link:focus,
html.gov-accessibility-contrast .header__user-dropdown-link:focus,
body.gov-accessibility-contrast .header__user-dropdown-link:focus {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}

/* Imagen del dropdown */
html.gov-accessibility-contrast .header-dropdown__image img,
body.gov-accessibility-contrast .header-dropdown__image img {
  border: 2px solid #000000 !important;
  filter: contrast(1.2) !important;
}

/* Inner del dropdown */
html.gov-accessibility-contrast .header-dropdown__inner,
body.gov-accessibility-contrast .header-dropdown__inner {
  background-color: #FFFFFF !important;
}

/* Keep search field text visible inside the top bar */
html.gov-accessibility-contrast .header__top-bar .header__search input,
body.gov-accessibility-contrast .header__top-bar .header__search input {
  color: var(--ra-text-primary) !important;
}

/* Search: ensure the search submit button is visible on header top bar */
html.gov-accessibility-contrast .header-search__button,
body.gov-accessibility-contrast .header-search__button,
html.gov-accessibility-contrast .header__search button[type="submit"],
body.gov-accessibility-contrast .header__search button[type="submit"] {
  background-color: var(--ra-color-cobalt) !important;
  color: var(--ra-text-light) !important;
  border-color: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .header-search__button:hover,
body.gov-accessibility-contrast .header-search__button:hover,
html.gov-accessibility-contrast .header__search button[type="submit"]:hover,
body.gov-accessibility-contrast .header__search button[type="submit"]:hover {
  background-color: var(--ra-color-hover) !important;
  color: var(--ra-text-light) !important;
}

/* Generic button fallback: make CTA-like elements white with dark text in contrast mode */
html.gov-accessibility-contrast button,
html.gov-accessibility-contrast .btn,
html.gov-accessibility-contrast .button,
html.gov-accessibility-contrast .ra-cta__button,
html.gov-accessibility-contrast .ra-cta__link,
html.gov-accessibility-contrast .navega-filters__apply-trigger,
html.gov-accessibility-contrast .recursos-filters__apply-trigger {
  background-color: #fff !important;
  color: var(--ra-text-light) !important;
  border-color: var(--ra-text-light) !important;
}

/* Dialog buttons (CONTINUAR / CANCELAR) — high-contrast rules
   jQuery UI uses .ui-dialog and .ui-dialog-buttonset; also support custom
   implementations that use .button inside dialogs. */
html.gov-accessibility-contrast .ui-dialog-buttonset .button,
body.gov-accessibility-contrast .ui-dialog-buttonset .button,
html.gov-accessibility-contrast .ui-dialog .button,
body.gov-accessibility-contrast .ui-dialog .button,
html.gov-accessibility-contrast .ui-dialog .ui-button,
body.gov-accessibility-contrast .ui-dialog .ui-button {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  padding: 0.5rem 0.75rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  min-width: 96px !important;
  display: inline-block !important;
}

html.gov-accessibility-contrast .ui-dialog-buttonset .button:hover,
body.gov-accessibility-contrast .ui-dialog-buttonset .button:hover,
html.gov-accessibility-contrast .ui-dialog .button:hover,
body.gov-accessibility-contrast .ui-dialog .button:hover,
html.gov-accessibility-contrast .ui-dialog .ui-button:hover,
body.gov-accessibility-contrast .ui-dialog .ui-button:hover {
  background-color: #000000 !important;
  color: var(--ra-color-yellow, #FAD118) !important;
  border-color: var(--ra-color-yellow, #FAD118) !important;
}

/* Keyboard focus state */
html.gov-accessibility-contrast .ui-dialog-buttonset .button:focus,
body.gov-accessibility-contrast .ui-dialog-buttonset .button:focus,
html.gov-accessibility-contrast .ui-dialog .button:focus,
body.gov-accessibility-contrast .ui-dialog .button:focus,
html.gov-accessibility-contrast .ui-dialog .ui-button:focus,
body.gov-accessibility-contrast .ui-dialog .ui-button:focus {
  outline: 3px solid var(--ra-text-light, #000000) !important;
  outline-offset: 2px !important;
}

/* Optional: named utility class to apply high-contrast dialog styles
   directly in templates if you prefer markup-based control. */
html.gov-accessibility-contrast .ra-contrast-button,
body.gov-accessibility-contrast .ra-contrast-button {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  padding: 0.5rem 0.75rem !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
}

html.gov-accessibility-contrast .ra-contrast-button:hover,
body.gov-accessibility-contrast .ra-contrast-button:hover {
  background-color: #000000 !important;
  color: var(--ra-color-yellow, #FAD118) !important;
}

/* Specific: Contenidos intro CTA primary (blue background normally).
   When contrast mode is active, set a Pale/bright yellow background with
   dark text so it contrasts well with the yellow highlight areas.
   We use the theme variables if available and fallback sensible values. */
html.gov-accessibility-contrast .contenidos-intro__cta--primary,
body.gov-accessibility-contrast .contenidos-intro__cta--primary {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important; /* use theme variable (overridden to black in contrast mode) */
}

/* Hover / focus: keep strong contrast */
html.gov-accessibility-contrast .contenidos-intro__cta--primary:hover,
body.gov-accessibility-contrast .contenidos-intro__cta--primary:hover,
html.gov-accessibility-contrast .contenidos-intro__cta--primary:focus,
body.gov-accessibility-contrast .contenidos-intro__cta--primary:focus {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
  outline: 3px solid var(--ra-text-light) !important;
}

/* Strong focus-visible for CTAs and collection buttons per request */
html.gov-accessibility-contrast .contenidos-intro__cta:focus-visible,
body.gov-accessibility-contrast .contenidos-intro__cta:focus-visible,
html.gov-accessibility-contrast .contenidos-intro__cta--primary:focus-visible,
body.gov-accessibility-contrast .contenidos-intro__cta--primary:focus-visible,
html.gov-accessibility-contrast .contenidos-colecciones__btn:focus-visible,
body.gov-accessibility-contrast .contenidos-colecciones__btn:focus-visible {
  outline: 4px solid #03ff3a !important;
  outline-offset: 2px !important;
}

/* Force icon fills to match the text color in contrast mode */
html.gov-accessibility-contrast .contenidos-intro__cta--primary svg,
body.gov-accessibility-contrast .contenidos-intro__cta--primary svg,
html.gov-accessibility-contrast .contenidos-colecciones__btn svg,
body.gov-accessibility-contrast .contenidos-colecciones__btn svg,
html.gov-accessibility-contrast .cl-button--primary svg,
body.gov-accessibility-contrast .cl-button--primary svg,
html.gov-accessibility-contrast .cl-nav__btn svg,
body.gov-accessibility-contrast .cl-nav__btn svg {
  fill: var(--ra-text-light) !important;
  stroke: var(--ra-text-light) !important;
}

/* Ensure children and pseudoelements inherit dark text in contrast mode */
html.gov-accessibility-contrast .contenidos-intro__cta--primary *,
body.gov-accessibility-contrast .contenidos-intro__cta--primary *,
html.gov-accessibility-contrast .contenidos-intro__cta--primary::before,
body.gov-accessibility-contrast .contenidos-intro__cta--primary::before,
html.gov-accessibility-contrast .contenidos-intro__cta--primary::after,
body.gov-accessibility-contrast .contenidos-intro__cta--primary::after {
  color: var(--ra-text-light) !important;
  fill: var(--ra-text-light) !important;
  stroke: var(--ra-text-light) !important;
}

/* ===================================
   CONTRAST MODE: OTHER CTA BUTTONS
   Keep buttons readable on yellow background. Use specific selectors
   for localized page CTAs and pager buttons.
   =================================== */

/* Primary CTA used in collections / recursos lists */
html.gov-accessibility-contrast .contenidos-colecciones__btn,
body.gov-accessibility-contrast .contenidos-colecciones__btn,
html.gov-accessibility-contrast .contenidos-recursos__btn,
body.gov-accessibility-contrast .contenidos-recursos__btn,
html.gov-accessibility-contrast .cl-button--primary,
body.gov-accessibility-contrast .cl-button--primary {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
  border-color: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .contenidos-colecciones__btn *,
body.gov-accessibility-contrast .contenidos-colecciones__btn *,
html.gov-accessibility-contrast .contenidos-recursos__btn *,
body.gov-accessibility-contrast .contenidos-recursos__btn *,
html.gov-accessibility-contrast .cl-button--primary *,
body.gov-accessibility-contrast .cl-button--primary * {
  color: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .contenidos-colecciones__btn:hover,
body.gov-accessibility-contrast .contenidos-colecciones__btn:hover,
html.gov-accessibility-contrast .cl-button--primary:hover,
body.gov-accessibility-contrast .cl-button--primary:hover {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .contenidos-colecciones__btn:focus,
body.gov-accessibility-contrast .contenidos-colecciones__btn:focus,
html.gov-accessibility-contrast .cl-button--primary:focus,
body.gov-accessibility-contrast .cl-button--primary:focus {
  outline: 3px solid var(--ra-text-light) !important;
}

/* Pager buttons: small circular nav controls */
html.gov-accessibility-contrast .cl-nav__btn,
body.gov-accessibility-contrast .cl-nav__btn,
html.gov-accessibility-contrast .recurso-carousel__nav,
body.gov-accessibility-contrast .recurso-carousel__nav {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
  border-color: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .cl-nav__btn *,
body.gov-accessibility-contrast .cl-nav__btn *,
html.gov-accessibility-contrast .recurso-carousel__nav *,
body.gov-accessibility-contrast .recurso-carousel__nav * {
  color: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .cl-nav__btn:hover,
body.gov-accessibility-contrast .cl-nav__btn:hover,
html.gov-accessibility-contrast .recurso-carousel__nav:hover,
body.gov-accessibility-contrast .recurso-carousel__nav:hover {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .cl-nav__btn:focus,
body.gov-accessibility-contrast .cl-nav__btn:focus,
html.gov-accessibility-contrast .recurso-carousel__nav:focus,
body.gov-accessibility-contrast .recurso-carousel__nav:focus {
  outline: 3px solid var(--ra-text-light) !important;
}

/* Return buttons on Recurso detail pages */
html.gov-accessibility-contrast .recurso-return__button,
body.gov-accessibility-contrast .recurso-return__button {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
  border-color: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .recurso-return__button *,
body.gov-accessibility-contrast .recurso-return__button * {
  color: var(--ra-text-light) !important;
}
html.gov-accessibility-contrast .recurso-return__button:hover,
body.gov-accessibility-contrast .recurso-return__button:hover {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .recurso-return__button:focus,
body.gov-accessibility-contrast .recurso-return__button:focus {
  outline: 3px solid var(--ra-text-light) !important;
}

/* Pagination in recurso materials */
html.gov-accessibility-contrast .recurso-materials__page-link,
body.gov-accessibility-contrast .recurso-materials__page-link {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
  border-color: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .recurso-materials__page-link:focus,
body.gov-accessibility-contrast .recurso-materials__page-link:focus {
  outline: 3px solid var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .contenidos-intro__cta--primary:focus-visible,
body.gov-accessibility-contrast .contenidos-intro__cta--primary:focus-visible {
  outline: 3px solid var(--ra-text-light) !important;
  outline-offset: 2px;
}

/* ====================================
   CONTRAST MODE: HOVER STATES for secondary and pager buttons
   Make hover states readable by applying the yellow background and black text
   (via var(--ra-text-light)) for these specific controls. */

html.gov-accessibility-contrast .contenidos-intro__cta--secondary:hover,
body.gov-accessibility-contrast .contenidos-intro__cta--secondary:hover,
html.gov-accessibility-contrast .contenidos-intro__cta--secondary:focus,
body.gov-accessibility-contrast .contenidos-intro__cta--secondary:focus {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
  border-color: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .navega-pager__next:hover,
body.gov-accessibility-contrast .navega-pager__next:hover,
html.gov-accessibility-contrast .navega-pager__next:focus,
body.gov-accessibility-contrast .navega-pager__next:focus {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
}

/* Prev pager - match next button styles for consistency in contrast mode */
html.gov-accessibility-contrast .navega-pager__prev,
body.gov-accessibility-contrast .navega-pager__prev,
html.gov-accessibility-contrast .recursos-pager__prev,
body.gov-accessibility-contrast .recursos-pager__prev,
html.gov-accessibility-contrast .navega-pager__next,
body.gov-accessibility-contrast .navega-pager__next,
html.gov-accessibility-contrast .recursos-pager__next,
body.gov-accessibility-contrast .recursos-pager__next {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
  border-color: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .navega-pager__prev *,
body.gov-accessibility-contrast .navega-pager__prev *,
html.gov-accessibility-contrast .recursos-pager__prev *,
body.gov-accessibility-contrast .recursos-pager__prev *,
html.gov-accessibility-contrast .navega-pager__next *,
body.gov-accessibility-contrast .navega-pager__next *,
html.gov-accessibility-contrast .recursos-pager__next *,
body.gov-accessibility-contrast .recursos-pager__next * {
  color: var(--ra-text-light) !important;
  fill: var(--ra-text-light) !important;
  stroke: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .navega-pager__prev:hover,
body.gov-accessibility-contrast .navega-pager__prev:hover,
html.gov-accessibility-contrast .navega-pager__prev:focus,
body.gov-accessibility-contrast .navega-pager__prev:focus,
html.gov-accessibility-contrast .recursos-pager__prev:hover,
body.gov-accessibility-contrast .recursos-pager__prev:hover,
html.gov-accessibility-contrast .recursos-pager__prev:focus,
body.gov-accessibility-contrast .recursos-pager__prev:focus,
html.gov-accessibility-contrast .navega-pager__next:hover,
body.gov-accessibility-contrast .navega-pager__next:hover,
html.gov-accessibility-contrast .navega-pager__next:focus,
body.gov-accessibility-contrast .navega-pager__next:focus,
html.gov-accessibility-contrast .recursos-pager__next:hover,
body.gov-accessibility-contrast .recursos-pager__next:hover,
html.gov-accessibility-contrast .recursos-pager__next:focus,
body.gov-accessibility-contrast .recursos-pager__next:focus {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
  border-color: var(--ra-text-light) !important;
}

/* Coleccion related button - visible by default (not just on hover) */
html.gov-accessibility-contrast .coleccion-related__button,
body.gov-accessibility-contrast .coleccion-related__button {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
  border-color: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .coleccion-related__button *,
body.gov-accessibility-contrast .coleccion-related__button * {
  color: var(--ra-text-light) !important;
  fill: var(--ra-text-light) !important;
  stroke: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .coleccion-related__button:hover,
body.gov-accessibility-contrast .coleccion-related__button:hover,
html.gov-accessibility-contrast .coleccion-related__button:focus,
body.gov-accessibility-contrast .coleccion-related__button:focus {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
  border-color: var(--ra-text-light) !important;
}

/* Fallback/CTA on coleccion pages - also use yellow in contrast mode for readability */
html.gov-accessibility-contrast .coleccion-fallback__button,
body.gov-accessibility-contrast .coleccion-fallback__button,
html.gov-accessibility-contrast .coleccion-fallback__button:hover,
body.gov-accessibility-contrast .coleccion-fallback__button:hover {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
  border-color: var(--ra-text-light) !important;
}

/* Ensure icons and nested elements also inherit the dark text on hover */
html.gov-accessibility-contrast .contenidos-intro__cta--secondary *,
body.gov-accessibility-contrast .contenidos-intro__cta--secondary *,
html.gov-accessibility-contrast .navega-pager__next *,
body.gov-accessibility-contrast .navega-pager__next *,
html.gov-accessibility-contrast .recursos-pager__next *,
body.gov-accessibility-contrast .recursos-pager__next *,
html.gov-accessibility-contrast .coleccion-related__button *,
body.gov-accessibility-contrast .coleccion-related__button * {
  color: var(--ra-text-light) !important;
  fill: var(--ra-text-light) !important;
  stroke: var(--ra-text-light) !important;
}

html.gov-accessibility-contrast .coleccion-fallback__button *,
body.gov-accessibility-contrast .coleccion-fallback__button * {
  color: var(--ra-text-light) !important;
  fill: var(--ra-text-light) !important;
  stroke: var(--ra-text-light) !important;
}

/* Ensure filter apply buttons are visible in contrast mode on /navega and /recursos pages */
html.gov-accessibility-contrast .navega-filters__apply-trigger,
body.gov-accessibility-contrast .navega-filters__apply-trigger,
html.gov-accessibility-contrast .recursos-filters__apply-trigger,
body.gov-accessibility-contrast .recursos-filters__apply-trigger,
html.gov-accessibility-contrast #navega-apply-filters,
body.gov-accessibility-contrast #navega-apply-filters,
html.gov-accessibility-contrast #recursos-apply-filters,
body.gov-accessibility-contrast #recursos-apply-filters {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
  border-color: var(--ra-text-light) !important;
  text-decoration: none !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

html.gov-accessibility-contrast .navega-filters__apply-trigger:hover,
body.gov-accessibility-contrast .navega-filters__apply-trigger:hover,
html.gov-accessibility-contrast #navega-apply-filters:hover,
body.gov-accessibility-contrast #navega-apply-filters:hover,
html.gov-accessibility-contrast .recursos-filters__apply-trigger:hover,
body.gov-accessibility-contrast .recursos-filters__apply-trigger:hover,
html.gov-accessibility-contrast #recursos-apply-filters:hover,
body.gov-accessibility-contrast #recursos-apply-filters:hover {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: var(--ra-text-light) !important;
  border-color: var(--ra-text-light) !important;
}

/* ====================================
   CONTRAST MODE: HEADER - stronger overrides
   - Some header top bar palettes can override variables; force dark/light tokens
   - Make sure nav items, user menu and the search button are readable.
   ==================================== */
html.gov-accessibility-contrast .header__top-bar,
body.gov-accessibility-contrast .header__top-bar {
  /* Force a neutral background in contrast mode for predictability */
  background-color: var(--ra-header-top-bg, #000000) !important;
  color: var(--ra-header-text-light) !important;
}

/* Strong fallbacks if variables are changed elsewhere: always keep header links readable */
html.gov-accessibility-contrast .header__top-bar,
body.gov-accessibility-contrast .header__top-bar {
  background-color: #000000 !important; /* explicit fallback to black */
  color: #FFFFFF !important;
}

html.gov-accessibility-contrast .header__top-bar .header__nav__link,
body.gov-accessibility-contrast .header__top-bar .header__nav__link,
html.gov-accessibility-contrast .header__top-bar .header-nav__link,
body.gov-accessibility-contrast .header__top-bar .header-nav__link,
html.gov-accessibility-contrast .header__top-bar .header__nav a,
body.gov-accessibility-contrast .header__top-bar .header__nav a {
  color: #FFFFFF !important;
}

/* Make sure search input and placeholder remain visible - FONDO BLANCO CON TEXTO NEGRO */
html.gov-accessibility-contrast .header__top-bar .header__search input,
body.gov-accessibility-contrast .header__top-bar .header__search input {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  caret-color: #000000 !important;
  border: 2px solid #000000 !important;
}

html.gov-accessibility-contrast .header__top-bar .header__search input::placeholder,
body.gov-accessibility-contrast .header__top-bar .header__search input::placeholder {
  color: #000000 !important;
  opacity: 0.6 !important;
  font-weight: 500 !important;
}

/* Ensure navigation links and user menu items are readable against the top bar */
html.gov-accessibility-contrast .header__top-bar .header-nav__link,
body.gov-accessibility-contrast .header__top-bar .header-nav__link,
html.gov-accessibility-contrast .header__top-bar .header__login-button,
body.gov-accessibility-contrast .header__top-bar .header__login-button {
  color: #000000 !important;
  border-color: #FAD118 !important;
  background-color: #FAD118 !important;
  font-weight: 700 !important;
}

html.gov-accessibility-contrast .header__top-bar .header__login-button:hover,
body.gov-accessibility-contrast .header__top-bar .header__login-button:hover {
  background-color: #000000 !important;
  color: #FAD118 !important;
  border-color: #FAD118 !important;
}

/* User menu button should be black in contrast mode; do not style its children
   with a global rule to avoid overriding dropdown links (Cerrar Sesión). */
html.gov-accessibility-contrast .header__top-bar .header__user-menu,
body.gov-accessibility-contrast .header__top-bar .header__user-menu,
html.gov-accessibility-contrast .header__top-bar .header__user-button,
body.gov-accessibility-contrast .header__top-bar .header__user-button {
  color: #ffffff !important;
  border-color: #ffffff !important;
  background: transparent !important;
  font-weight: 700 !important;
}

/* Re-affirm that logout link remains blue (matches site-level link color in contrast mode). */
html.gov-accessibility-contrast .header__user-dropdown-link,
body.gov-accessibility-contrast .header__user-dropdown-link {
  color: #0000ff !important;
  text-decoration: underline !important;
}

/* Mejorar visibilidad del menú "Componentes" y enlaces de navegación */
html.gov-accessibility-contrast .header-nav__link,
body.gov-accessibility-contrast .header-nav__link {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 4px !important;
}

html.gov-accessibility-contrast .header-nav__link:hover,
body.gov-accessibility-contrast .header-nav__link:hover {
  background-color: rgba(250, 209, 24, 0.2) !important;
  color: #FAD118 !important;
}

html.gov-accessibility-contrast .header-nav__link:focus-visible,
body.gov-accessibility-contrast .header-nav__link:focus-visible {
  outline: 3px solid #FAD118 !important;
  outline-offset: 2px !important;
}

/* Logo gov - invertir colores para visibilidad */
html.gov-accessibility-contrast .header__top-bar .header__gov-logo,
body.gov-accessibility-contrast .header__top-bar .header__gov-logo,
html.gov-accessibility-contrast .header__top-bar .header__gov-logo img,
body.gov-accessibility-contrast .header__top-bar .header__gov-logo img {
  filter: brightness(0) invert(1) !important;
}

/* Asegurar que otros inputs del header también sean visibles */
html.gov-accessibility-contrast .header__top-bar input:not([type="submit"]):not([type="button"]),
body.gov-accessibility-contrast .header__top-bar input:not([type="submit"]):not([type="button"]),
html.gov-accessibility-contrast .header__top-bar textarea,
body.gov-accessibility-contrast .header__top-bar textarea {
  color: #000000 !important;
  background-color: #FFFFFF !important;
  border: 2px solid #000000 !important;
}

/* Botón de búsqueda - visible en amarillo con texto negro */
html.gov-accessibility-contrast .header__top-bar .header-search__button,
body.gov-accessibility-contrast .header__top-bar .header-search__button,
html.gov-accessibility-contrast .header__top-bar .header__search button[type="submit"],
body.gov-accessibility-contrast .header__top-bar .header__search button[type="submit"],
html.gov-accessibility-contrast .header__search button,
body.gov-accessibility-contrast .header__search button {
  background-color: var(--ra-color-yellow, #FAD118) !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  box-shadow: 0 0 0 1px #FAD118, 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

html.gov-accessibility-contrast .header__top-bar .header__search button[type="submit"]:hover,
body.gov-accessibility-contrast .header__top-bar .header__search button[type="submit"]:hover,
html.gov-accessibility-contrast .header__search button:hover,
body.gov-accessibility-contrast .header__search button:hover {
  background-color: #000000 !important;
  color: #FAD118 !important;
  border: 3px solid #FAD118 !important;
}

/* SVG/iconos del header - BLANCOS sobre fondo negro con mejor visibilidad */
html.gov-accessibility-contrast .header__top-bar svg,
body.gov-accessibility-contrast .header__top-bar svg,
html.gov-accessibility-contrast .header__top-bar .header-nav__icon,
body.gov-accessibility-contrast .header__top-bar .header-nav__icon,
html.gov-accessibility-contrast .header-nav__icon-img,
body.gov-accessibility-contrast .header-nav__icon-img {
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
  filter: brightness(1.2) contrast(1.1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
  opacity: 1 !important;
}

/* Hover en iconos de navegación para mejor feedback */
html.gov-accessibility-contrast .header-nav__link:hover .header-nav__icon,
body.gov-accessibility-contrast .header-nav__link:hover .header-nav__icon,
html.gov-accessibility-contrast .header-nav__link:hover .header-nav__icon-img,
body.gov-accessibility-contrast .header-nav__link:hover .header-nav__icon-img {
  filter: brightness(1.4) contrast(1.2) drop-shadow(0 2px 4px rgba(250, 209, 24, 0.8)) !important;
}

/* SVG del botón de búsqueda - NEGRO sobre amarillo */
html.gov-accessibility-contrast .header__top-bar .header__search button svg,
body.gov-accessibility-contrast .header__top-bar .header__search button svg,
html.gov-accessibility-contrast .header__search button svg,
body.gov-accessibility-contrast .header__search button svg {
  fill: #000000 !important;
  stroke: #000000 !important;
}

/* ====================================
   UTILITIES FOR INNER CONTENT
   ==================================== */

/* List styling inside block */
.gov-accessibility-block ul,
.gov-accessibility-block ol {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}

.gov-accessibility-block li {
  margin-bottom: 0.25rem;
}

/* Paragraph spacing */
.gov-accessibility-block p {
  margin: 0.5rem 0;
}

.gov-accessibility-block p:last-child {
  margin-bottom: 0;
}

/* ====================================
   OPTIONAL: TOGGLE BUTTON
   ==================================== */

/* If a collapse toggle button is added later via data-gov-a11y-toggle */
.gov-accessibility-block [data-gov-a11y-toggle] {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: var(--ra-color-white, #FFFFFF);
  cursor: pointer;
  padding: 0.25rem;
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0.8;
}

.gov-accessibility-block [data-gov-a11y-toggle]:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 0.25rem;
}

.gov-accessibility-block [data-gov-a11y-toggle]:focus {
  outline: 2px solid var(--ra-color-white, #FFFFFF);
  outline-offset: 2px;
  opacity: 1;
}

/* Footer menu title in high contrast mode */
html.gov-accessibility-contrast .footer-menu__title,
body.gov-accessibility-contrast .footer-menu__title {
  color: #000000 !important;
  background-color: #ffffff !important;
  border: 2px solid #000000 !important;
}

/* ====================================
   ADDITIONAL HIGH CONTRAST OVERRIDES
   Fixes for specific components identified in accessibility audit
   ==================================== */

/* Hero section and its elements */
html.gov-accessibility-contrast .coleccion-hero,
body.gov-accessibility-contrast .coleccion-hero {
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #000000 !important;
}

html.gov-accessibility-contrast .coleccion-hero__date,
body.gov-accessibility-contrast .coleccion-hero__date,
html.gov-accessibility-contrast .coleccion-hero__title,
body.gov-accessibility-contrast .coleccion-hero__title,
html.gov-accessibility-contrast .coleccion-hero__summary,
body.gov-accessibility-contrast .coleccion-hero__summary,
html.gov-accessibility-contrast .coleccion-hero span,
body.gov-accessibility-contrast .coleccion-hero span {
  color: #000000 !important;
  text-shadow: none !important;
}

/* Cards and List Items */
html.gov-accessibility-contrast .ra-card-list__card,
body.gov-accessibility-contrast .ra-card-list__card,
html.gov-accessibility-contrast .coleccion-news__item,
body.gov-accessibility-contrast .coleccion-news__item,
html.gov-accessibility-contrast .coleccion-card,
body.gov-accessibility-contrast .coleccion-card,
html.gov-accessibility-contrast .coleccion-related__grid,
body.gov-accessibility-contrast .coleccion-related__grid {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}

html.gov-accessibility-contrast .ra-card-list__card *,
body.gov-accessibility-contrast .ra-card-list__card *,
html.gov-accessibility-contrast .coleccion-news__item *,
body.gov-accessibility-contrast .coleccion-news__item *,
html.gov-accessibility-contrast .coleccion-card *,
body.gov-accessibility-contrast .coleccion-card * {
  color: #000000 !important;
}

/* Captions */
html.gov-accessibility-contrast .ra-image-caption__caption,
body.gov-accessibility-contrast .ra-image-caption__caption,
html.gov-accessibility-contrast .ra-media-video__caption,
body.gov-accessibility-contrast .ra-media-video__caption {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  padding: 0.5rem !important;
  border: 1px solid #000000 !important;
}

/* Pager buttons - ensure visibility */
html.gov-accessibility-contrast .navega-pager__next,
body.gov-accessibility-contrast .navega-pager__next,
html.gov-accessibility-contrast .navega-pager__prev,
body.gov-accessibility-contrast .navega-pager__prev {
  background-color: #FAD118 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  opacity: 1 !important;
}

/* General Span overrides in content to avoid invisible text */
html.gov-accessibility-contrast main span,
body.gov-accessibility-contrast main span {
  color: inherit !important; /* Inherit from the high-contrast container */
}

/* Fix for specific yellow text on dark background issues seen in screenshots */
html.gov-accessibility-contrast .text-yellow,
body.gov-accessibility-contrast .text-yellow {
  color: #000000 !important;
  background-color: #FAD118 !important;
}


/* ====================================
   ADMIN TOOLBAR HIGH CONTRAST
   ==================================== */
html.gov-accessibility-contrast #toolbar-administration,
body.gov-accessibility-contrast #toolbar-administration,
html.gov-accessibility-contrast #toolbar-bar,
body.gov-accessibility-contrast #toolbar-bar {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-bottom: 2px solid #000000 !important;
}

html.gov-accessibility-contrast .toolbar-icon,
body.gov-accessibility-contrast .toolbar-icon,
html.gov-accessibility-contrast .toolbar-item,
body.gov-accessibility-contrast .toolbar-item,
html.gov-accessibility-contrast .toolbar-menu__item a,
body.gov-accessibility-contrast .toolbar-menu__item a {
  color: #000000 !important;
  background-color: transparent !important;
}

html.gov-accessibility-contrast .toolbar-icon.is-active,
body.gov-accessibility-contrast .toolbar-icon.is-active,
html.gov-accessibility-contrast .toolbar-icon:hover,
body.gov-accessibility-contrast .toolbar-icon:hover {
  background-color: #FAD118 !important;
  color: #000000 !important;
}

/* Fix icons in toolbar */
html.gov-accessibility-contrast .toolbar-icon::before,
body.gov-accessibility-contrast .toolbar-icon::before {
  filter: invert(1) !important; /* Invert white icons to black */
}


/* ====================================
   LANDING PAGES HIGH CONTRAST (Navega & Recursos)
   ==================================== */

/* Banners */
html.gov-accessibility-contrast .navega-banner,
body.gov-accessibility-contrast .navega-banner,
html.gov-accessibility-contrast .recursos-banner,
body.gov-accessibility-contrast .recursos-banner {
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #000000 !important;
  border-bottom: 2px solid #000000 !important;
}

html.gov-accessibility-contrast .navega-banner__title,
body.gov-accessibility-contrast .navega-banner__title,
html.gov-accessibility-contrast .recursos-banner__title,
body.gov-accessibility-contrast .recursos-banner__title,
html.gov-accessibility-contrast .navega-banner__description,
body.gov-accessibility-contrast .navega-banner__description,
html.gov-accessibility-contrast .recursos-banner__description,
body.gov-accessibility-contrast .recursos-banner__description {
  color: #000000 !important;
  text-shadow: none !important;
}

/* Filters Sidebar */
html.gov-accessibility-contrast .navega-sidebar,
body.gov-accessibility-contrast .navega-sidebar,
html.gov-accessibility-contrast .recursos-layout__sidebar,
body.gov-accessibility-contrast .recursos-layout__sidebar {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-right: 1px solid #000000 !important;
}

html.gov-accessibility-contrast .navega-filter__title,
body.gov-accessibility-contrast .navega-filter__title,
html.gov-accessibility-contrast .recursos-filter-group__title,
body.gov-accessibility-contrast .recursos-filter-group__title {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* Filter Options (Checkboxes) */
html.gov-accessibility-contrast .navega-filter__option,
body.gov-accessibility-contrast .navega-filter__option,
html.gov-accessibility-contrast .recursos-filter-option,
body.gov-accessibility-contrast .recursos-filter-option {
  color: #000000 !important;
}

html.gov-accessibility-contrast .navega-filter__option input[type='checkbox'],
body.gov-accessibility-contrast .navega-filter__option input[type='checkbox'],
html.gov-accessibility-contrast .recursos-filter-option input[type='checkbox'],
body.gov-accessibility-contrast .recursos-filter-option input[type='checkbox'] {
  accent-color: #000000 !important;
  border: 2px solid #000000 !important;
}

/* Active Filter Chips */
html.gov-accessibility-contrast .navega-chip,
body.gov-accessibility-contrast .navega-chip,
html.gov-accessibility-contrast .recursos-chip,
body.gov-accessibility-contrast .recursos-chip {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}

html.gov-accessibility-contrast .navega-chip__remove,
body.gov-accessibility-contrast .navega-chip__remove,
html.gov-accessibility-contrast .recursos-chip__remove,
body.gov-accessibility-contrast .recursos-chip__remove {
  color: #000000 !important;
  font-weight: bold !important;
}

/* Cards (Navega & Recursos) */
html.gov-accessibility-contrast .navega-card,
body.gov-accessibility-contrast .navega-card,
html.gov-accessibility-contrast .recurso-card,
body.gov-accessibility-contrast .recurso-card {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

html.gov-accessibility-contrast .navega-card__title,
body.gov-accessibility-contrast .navega-card__title,
html.gov-accessibility-contrast .recurso-card__title,
body.gov-accessibility-contrast .recurso-card__title,
html.gov-accessibility-contrast .navega-card__title a,
body.gov-accessibility-contrast .navega-card__title a,
html.gov-accessibility-contrast .recurso-card__title a,
body.gov-accessibility-contrast .recurso-card__title a {
  color: #0000ff !important;
  text-decoration: underline !important;
}

html.gov-accessibility-contrast .navega-card__description,
body.gov-accessibility-contrast .navega-card__description,
html.gov-accessibility-contrast .recurso-card__description,
body.gov-accessibility-contrast .recurso-card__description {
  color: #000000 !important;
}

/* Card Chips */
html.gov-accessibility-contrast .navega-card__chip,
body.gov-accessibility-contrast .navega-card__chip,
html.gov-accessibility-contrast .recurso-card__chip,
body.gov-accessibility-contrast .recurso-card__chip {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}

/* ====================================
   DETAIL PAGES HIGH CONTRAST (Coleccion & Recurso)
   ==================================== */

/* Keywords Chips */
html.gov-accessibility-contrast .coleccion-keywords__chip,
body.gov-accessibility-contrast .coleccion-keywords__chip,
html.gov-accessibility-contrast .recurso-keywords-row__chip,
body.gov-accessibility-contrast .recurso-keywords-row__chip,
html.gov-accessibility-contrast .recurso-meta-chips__list span,
body.gov-accessibility-contrast .recurso-meta-chips__list span {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}

/* Accordions */
html.gov-accessibility-contrast .coleccion-accordion__trigger,
body.gov-accessibility-contrast .coleccion-accordion__trigger {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}

html.gov-accessibility-contrast .coleccion-accordion__content,
body.gov-accessibility-contrast .coleccion-accordion__content {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-left: 2px solid #000000 !important;
  border-right: 2px solid #000000 !important;
  border-bottom: 2px solid #000000 !important;
}

/* External Resources */
html.gov-accessibility-contrast .coleccion-externo,
body.gov-accessibility-contrast .coleccion-externo {
  background-color: #FFFFFF !important;
  border: 2px solid #000000 !important;
}

html.gov-accessibility-contrast .coleccion-externo__title,
body.gov-accessibility-contrast .coleccion-externo__title,
html.gov-accessibility-contrast .coleccion-externo__description,
body.gov-accessibility-contrast .coleccion-externo__description {
  color: #000000 !important;
}

/* Video Section */
html.gov-accessibility-contrast .coleccion-video,
body.gov-accessibility-contrast .coleccion-video,
html.gov-accessibility-contrast .recurso-video,
body.gov-accessibility-contrast .recurso-video {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

html.gov-accessibility-contrast .coleccion-video__title,
body.gov-accessibility-contrast .coleccion-video__title,
html.gov-accessibility-contrast .recurso-video__title,
body.gov-accessibility-contrast .recurso-video__title {
  color: #000000 !important;
}

/* Fallback Links */
html.gov-accessibility-contrast .coleccion-video__fallback-link,
body.gov-accessibility-contrast .coleccion-video__fallback-link,
html.gov-accessibility-contrast .recurso-video__fallback-link,
body.gov-accessibility-contrast .recurso-video__fallback-link {
  background-color: #FAD118 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}

/* Share Icons */
html.gov-accessibility-contrast .coleccion-hero__share-link,
body.gov-accessibility-contrast .coleccion-hero__share-link,
html.gov-accessibility-contrast .recurso-hero__share-link,
body.gov-accessibility-contrast .recurso-hero__share-link {
  color: #000000 !important;
  border: 1px solid #000000 !important;
  background-color: #FFFFFF !important;
}

html.gov-accessibility-contrast .coleccion-hero__share-link:hover,
body.gov-accessibility-contrast .coleccion-hero__share-link:hover,
html.gov-accessibility-contrast .recurso-hero__share-link:hover,
body.gov-accessibility-contrast .recurso-hero__share-link:hover {
  background-color: #FAD118 !important;
}


/* Focus overrides for new elements */
html.gov-accessibility-contrast .navega-filter__option input[type='checkbox']:focus,
body.gov-accessibility-contrast .navega-filter__option input[type='checkbox']:focus,
html.gov-accessibility-contrast .recursos-filter-option input[type='checkbox']:focus,
body.gov-accessibility-contrast .recursos-filter-option input[type='checkbox']:focus {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}

html.gov-accessibility-contrast .navega-chip:focus,
body.gov-accessibility-contrast .navega-chip:focus,
html.gov-accessibility-contrast .recursos-chip:focus,
body.gov-accessibility-contrast .recursos-chip:focus {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}