/* accessibility.css — Sprint A11Y A1 (2026-05-27)
   Baseline WCAG 2.1 AA + 4 toggles opt-in (fonte, contraste, motion, LIBRAS).
   Persistência via localStorage em accessibility.js. */

/* ====== 1. Focus-visible universal ======
   :focus-visible mostra outline SÓ em navegação por teclado. */
:focus-visible {
  outline: 3px solid #1d4ed8 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
[data-bs-theme="dark"] :focus-visible {
  outline-color: #60a5fa !important;
}
/* Override de outline:none que CSS legado faz pra .btn — mantém só em mouse */
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #1d4ed8 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.25) !important;
}

/* ====== 2. Reduzir movimento — respeita OS por default ====== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Opt-in via classe (force override mesmo sem OS pref) */
.a11y-reduce-motion *,
.a11y-reduce-motion *::before,
.a11y-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ====== 3. Fonte maior (escala via :root font-size) ======
   Bootstrap usa rem em quase tudo — alterar :root font-size escala TUDO. */
html.a11y-fs-large { font-size: 112.5%; }     /* ~18px de 16px */
html.a11y-fs-xlarge { font-size: 125%; }      /* ~20px de 16px */

/* ====== 4. Alto contraste — paleta forte ======
   Não toca botões primários (mantém branding). Foco em texto/borda/link. */
html.a11y-high-contrast {
  --bs-body-bg: #fff;
  --bs-body-color: #000;
  --bs-border-color: #000;
  --bs-secondary-color: #1a1a1a;
  --bs-tertiary-bg: #f5f5f5;
  --bs-tertiary-color: #000;
  --bs-link-color: #0000ee;
  --bs-link-hover-color: #551a8b;
  --bs-emphasis-color: #000;
}
html.a11y-high-contrast[data-bs-theme="dark"] {
  --bs-body-bg: #000;
  --bs-body-color: #fff;
  --bs-border-color: #fff;
  --bs-secondary-color: #e5e5e5;
  --bs-tertiary-bg: #0a0a0a;
  --bs-tertiary-color: #fff;
  --bs-link-color: #ffff00;
  --bs-link-hover-color: #fff;
  --bs-emphasis-color: #fff;
}
html.a11y-high-contrast a:not(.btn):not(.nav-menu-link),
html.a11y-high-contrast .dropdown-item {
  text-decoration: underline;
}
html.a11y-high-contrast input,
html.a11y-high-contrast select,
html.a11y-high-contrast textarea {
  border: 2px solid currentColor !important;
}

/* ====== 5. Skip link (acessibilidade keyboard) ======
   Aparece quando user pressiona Tab no carregamento da página. */
.a11y-skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: #1d4ed8;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  z-index: 99999;
  font-weight: 600;
  font-size: 0.9rem;
  transition: top 0.2s;
}
.a11y-skip-link:focus,
.a11y-skip-link:focus-visible {
  top: 8px;
  color: #fff;
  outline: 3px solid #fbbf24 !important;
}

/* ====== 6. Dropdown de acessibilidade (mesma marca em portal+dashboard) ====== */
.a11y-dropdown-menu {
  min-width: 280px;
  padding: 14px;
}
/* Quando aparece dentro do offcanvas mobile (sidebar 280px), remove min-width
   pra não estourar e ajusta padding pra ficar consistente com items acima. */
.offcanvas .a11y-dropdown-menu {
  min-width: 0 !important;
  width: 100%;
  padding: 0 !important;
}
.offcanvas .a11y-section-label {
  margin-top: 4px;
}
.a11y-dropdown-menu .a11y-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--bs-secondary-color, #6c757d);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 0;
}
.a11y-dropdown-menu .a11y-fs-group {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.a11y-dropdown-menu .a11y-fs-btn {
  flex: 1;
  padding: 8px 6px;
  border: 1.5px solid var(--bs-border-color, #dee2e6);
  background: transparent;
  border-radius: 8px;
  color: var(--bs-body-color, #212529);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  transition: all 0.15s;
  font-family: inherit;
}
.a11y-dropdown-menu .a11y-fs-btn:hover {
  background: var(--bs-tertiary-bg, #f8f9fa);
  border-color: #1d4ed8;
}
.a11y-dropdown-menu .a11y-fs-btn.active {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}
.a11y-dropdown-menu .a11y-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  border-radius: 6px;
}
.a11y-dropdown-menu .a11y-toggle-row:hover {
  background: var(--bs-tertiary-bg, #f8f9fa);
}
.a11y-dropdown-menu .a11y-toggle-row label {
  font-size: 0.88rem;
  cursor: pointer;
  margin: 0;
  flex: 1;
  user-select: none;
}
.a11y-dropdown-menu .a11y-toggle-row input[type="checkbox"] {
  cursor: pointer;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}
.a11y-dropdown-menu .a11y-divider {
  border: 0;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  margin: 10px 0;
}
.a11y-dropdown-menu .a11y-footnote {
  font-size: 0.7rem;
  color: var(--bs-secondary-color, #6c757d);
  margin: 8px 0 0 0;
  line-height: 1.3;
}

/* ====== 7. Touch targets mínimos 44×44 em mobile (WCAG 2.5.5) ====== */
@media (max-width: 991.98px) {
  .nav-top-btn,
  .header-icon-btn,
  .icon-btn-plain {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ====== 8. VLibras widget — z-index baixo pra não cobrir modais críticos ====== */
[vw] {
  z-index: 1040;
}
[vw-access-button] {
  /* Ajuste fino pra não colidir com botões flutuantes (bug report, suporte) */
  bottom: 90px !important;
}
@media (max-width: 768px) {
  [vw-access-button] {
    bottom: 70px !important;
  }
}
/* Opt-out: esconde widget sem desconectar (preserva state se user reabrir) */
html.a11y-vlibras-off [vw] {
  display: none !important;
}