/* ==========================================================================
   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: 112.5%;
}

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

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

/* 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;
  }
}