/* ==========================================================================
   BISAE · Controles visibles de accesibilidad
   Se carga al final para que los ajustes del usuario tengan prioridad.
   ========================================================================== */

/* Tamaño de fuente: usa rem en todo el sitio, por eso escalar html alcanza a toda la interfaz. */
html[data-a11y-font-size="large"] {
  font-size: 106.25%;
}

html[data-a11y-font-size="xlarge"] {
  font-size: 112.5%;
}

html[data-a11y-font-size="huge"] {
  font-size: 125%;
}

/* Tipografías alternativas sin depender de fuentes externas. */
html[data-a11y-font-family="readable"] {
  --font-sans: Verdana, Arial, Tahoma, system-ui, sans-serif;
}

html[data-a11y-font-family="serif"] {
  --font-sans: Georgia, "Times New Roman", Times, serif;
}

html[data-a11y-font-family="mono"] {
  --font-sans: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Alto contraste. Prioriza lectura por encima de identidad visual. */
html[data-a11y-contrast="high"] {
  --bg-main: #ffffff;
  --bg-card: #ffffff;
  --bg-muted: #f3f4f6;
  --bg-elevated: #ffffff;
  --bg-hero: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  --text-primary: #000000;
  --text-secondary: #111827;
  --text-muted: #1f2937;
  --text-inverse: #ffffff;
  --text-link: #003bff;
  --color-primary: #003bff;
  --color-primary-hover: #001d8f;
  --color-secondary: #000000;
  --color-secondary-hover: #111827;
  --color-accent: #b00020;
  --color-accent-muted: #ffe4e9;
  --border-default: #111827;
  --border-strong: #000000;
  --border-soft: #374151;
  --shadow-sm: 0 0 0 1px #111827;
  --shadow-md: 0 0 0 1px #111827;
  --shadow-lg: 0 0 0 2px #111827;
  --focus-ring: 0 0 0 .25rem rgba(0, 59, 255, .45);
}

html[data-a11y-contrast="high"] .glass-card,
html[data-a11y-contrast="high"] .feature-card,
html[data-a11y-contrast="high"] .metric-card,
html[data-a11y-contrast="high"] .content-card,
html[data-a11y-contrast="high"] .contact-card,
html[data-a11y-contrast="high"] .stage-window,
html[data-a11y-contrast="high"] .logo-card {
  border: 2px solid var(--border-strong);
  background: var(--bg-card);
}

html[data-a11y-contrast="high"] .btn-brand {
  background: var(--color-primary);
  color: #ffffff;
}

html[data-a11y-contrast="high"] .btn-outline-brand {
  background: #ffffff;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Reducción manual de movimiento, además de prefers-reduced-motion. */
html[data-a11y-motion="reduce"] *,
html[data-a11y-motion="reduce"] *::before,
html[data-a11y-motion="reduce"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}

html[data-a11y-motion="reduce"] .reveal {
  opacity: 1 !important;
  transform: none !important;
}

html[data-a11y-motion="reduce"] .tilt-card {
  transform: none !important;
}

/* Panel del selector visible. */
.a11y-switcher {
  position: relative;
}

.a11y-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}

.a11y-toggle::before {
  content: "A";
  display: inline-grid;
  place-items: center;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  border-radius: 999px;
  font-weight: 900;
  background: color-mix(in srgb, var(--color-primary), transparent 86%);
}

.a11y-menu {
  inline-size: min(22rem, calc(100vw - 2rem));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}

.a11y-menu-title {
  font-size: .95rem;
  font-weight: 900;
  margin-block-end: .25rem;
}

.a11y-menu-help {
  color: var(--text-muted);
  font-size: .85rem;
  margin-block-end: .85rem;
}

.a11y-field {
  display: grid;
  gap: .35rem;
  margin-block-end: .85rem;
}

.a11y-field label {
  color: var(--text-secondary);
  font-size: .82rem;
  font-weight: 850;
}

.a11y-field .form-select {
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background-color: var(--bg-card);
  border-color: var(--border-default);
}

.a11y-reset {
  inline-size: 100%;
}

@media (max-width: 991.98px) {
  .a11y-menu {
    inline-size: 100%;
    box-shadow: var(--shadow-md);
  }

  .a11y-toggle {
    inline-size: 100%;
    justify-content: center;
  }
}


/* Ajuste visual coordinado: cuando el encabezado inyecta el emoji accesible,
   se oculta la insignia textual previa para evitar duplicados. */
.site-header .a11y-toggle.utility-button-control::before {
  content: none;
  display: none;
}


/* ==========================================================================
   Museo de la Abeja Huasca · panel superior de ajustes · 20260630-v9
   Ordena idioma, tema y controles de accesibilidad dentro del dropdown.
   ========================================================================== */
.site-header .ajustes-menu {
  inline-size: min(54rem, calc(100vw - 2rem));
  max-inline-size: calc(100vw - 2rem);
  padding: clamp(1rem, 1.8vw, 1.35rem) !important;
  border: 1px solid var(--border-default);
  border-radius: clamp(1rem, 2vw, 1.45rem);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  overflow: visible;
}

.site-header .ajustes-menu .a11y-menu-title {
  font-size: clamp(1rem, 1vw, 1.12rem);
}

.site-header .ajustes-menu .a11y-menu-help {
  margin-block-end: 1rem;
  color: var(--text-muted);
}

.site-header .ajustes-menu > .language-switcher,
.site-header .ajustes-menu > .theme-switcher {
  display: inline-flex;
  vertical-align: top;
  max-inline-size: 100%;
  margin-block: 0 .85rem;
  margin-inline-end: .45rem;
}

.site-header .ajustes-menu > .theme-switcher {
  min-inline-size: min(21rem, 100%);
}

.site-header .ajustes-menu .utility-select-control {
  max-inline-size: 100%;
}

.site-header .ajustes-menu .utility-custom-dropdown {
  min-inline-size: 0;
}

.site-header .ajustes-menu .utility-select-value {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-header .ajustes-menu .a11y-switcher.nav-control {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(8.8rem, 1fr));
  gap: .85rem;
  inline-size: 100%;
  align-items: end;
  margin-block-start: .15rem;
  white-space: normal !important;
}

.site-header .ajustes-menu .a11y-switcher .a11y-field {
  min-inline-size: 0;
  margin: 0;
}

.site-header .ajustes-menu .a11y-switcher .a11y-field label {
  display: block;
  margin-block-end: .32rem;
  white-space: normal;
}

.site-header .ajustes-menu .a11y-switcher .form-select {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 2.75rem;
  background-color: var(--bg-card);
  color: var(--text-primary);
}

.site-header .ajustes-menu .a11y-reset {
  inline-size: 100%;
  min-block-size: 2.75rem;
  align-self: end;
  white-space: normal;
}

@media (max-width: 1199.98px) {
  .site-header .ajustes-menu {
    inline-size: min(42rem, calc(100vw - 2rem));
  }

  .site-header .ajustes-menu .a11y-switcher.nav-control {
    grid-template-columns: repeat(2, minmax(11rem, 1fr));
  }
}

@media (max-width: 575.98px) {
  .site-header .ajustes-menu {
    inline-size: calc(100vw - 1.5rem);
    max-inline-size: calc(100vw - 1.5rem);
    padding: 1rem !important;
  }

  .site-header .ajustes-menu > .language-switcher,
  .site-header .ajustes-menu > .theme-switcher {
    display: flex;
    inline-size: 100%;
    margin-inline-end: 0;
  }

  .site-header .ajustes-menu .a11y-switcher.nav-control {
    grid-template-columns: 1fr;
  }
}

html[data-a11y-contrast="high"] .site-header .ajustes-menu {
  border: 2px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
}