/* ==========================================================================
   ACESSIBILIDADE.CSS — Fundação Fênix 193
   Painel de ferramentas de acessibilidade + player AD
   Conformidade: WCAG 2.1 AA / eMAG

   Recursos do painel (todos salvos no LocalStorage — ver acessibilidade.js):
   - Aumentar / Diminuir texto ........ font-size do <html> (via JS)
   - Escala de cinza .................. html[data-a11y-gray]
   - Alto contraste (escuro/amarelo) .. html[data-a11y-theme="escuro|amarelo"]
   - Fundo claro ...................... html[data-a11y-theme="claro"]
   - Controle negativo (inverter) ..... html[data-a11y-negative]
   - Links sublinhados ................ html[data-a11y-underline]
   - Fonte legível .................... html[data-a11y-readable]
   - Redefinir

   Alto contraste, Fundo claro e Controle negativo são mutuamente exclusivos
   (o JS garante isso); os demais combinam livremente.
   ========================================================================== */

/* -------------------------------------------------
   0. GUARDA ANTI-FLASH (FOUC)
   Este arquivo é CARREGADO ANTES da primeira pintura (link normal, sem
   media="print"), ao contrário de style.css / dropdown.css / chatbot.css,
   que chegam depois. Sem estas regras, chat da LuminIA e menus dropdown
   aparecem abertos e sem estilo por alguns instantes.

   Aqui ficam só os estados INICIAIS "fechados" desses widgets, escritos
   com :where() (especificidade ZERO): enquanto o CSS definitivo não chega
   valem estas; quando ele chega, ele sobrepõe tudo sem exceção. Não
   copiar propriedades que o CSS definitivo não redefine (ex.: pointer-events
   no chatbot), senão elas "grudariam".
------------------------------------------------- */
:where(.chatbot-container) {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
}

:where(.chatbot-box) {
  position: absolute;
  bottom: 80px;
  right: 0;
  opacity: 0;
  visibility: hidden;
}

:where(.chatbot-teaser) {
  position: absolute;
  bottom: 10px;
  right: 76px;
  opacity: 0;
  visibility: hidden;
}

:where(.has-dropdown) {
  position: relative;
}

:where(.dropdown-menu) {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* VLibras (widget de terceiros): fica invisível até a página terminar de
   carregar (classe .ff-ready, adicionada por acessibilidade.js). O fallback
   por animação libera o widget após 5 s mesmo se o JS falhar. */
html:not(.ff-ready) [vw] {
  opacity: 0 !important;
  pointer-events: none !important;
  animation: ff-reveal-widget 0s linear 5s forwards;
}

@keyframes ff-reveal-widget {
  to {
    opacity: 1;
    pointer-events: auto;
  }
}

/* -------------------------------------------------
   1. VARIÁVEIS DE TEMA
   Cores herdadas da paleta oficial do site (ver :root em style.css)
   para o botão/painel combinarem com a identidade visual.
------------------------------------------------- */
:root {
  --a11y-bg: #ffffff;
  --a11y-text: #1a1a1a;
  --a11y-link: var(--red-dark, #872020);
  --a11y-focus: var(--amber, #F8BA25);
  --a11y-panel-bg: var(--navy, #313332);
  --a11y-panel-text: #ffffff;
  --a11y-btn-bg: var(--red, #E12217);
  --a11y-btn-bg-hover: var(--red-dark, #872020);
  --a11y-btn-text: #ffffff;
  --a11y-accent: var(--amber, #F8BA25);
  --a11y-readable-font: "Atkinson Hyperlegible", Verdana, Tahoma, "Segoe UI", Arial, sans-serif;
}

/* Paletas — variáveis usadas pelas regras da seção 1.1
   --a11y-bg .......... fundo da página
   --a11y-card ........ fundo de cartões/campos (elementos "soltos" sobre a página)
   --a11y-surface ..... fundo de áreas que eram escuras (barra de menu, rodapé)
   --a11y-outline ..... contorno que separa os cartões do fundo            */
html[data-a11y-theme="escuro"] {
  /* Alto contraste: fundo preto, texto branco, links dourados */
  --a11y-bg: #000000;
  --a11y-card: #121212;
  --a11y-surface: #1c1c1c;
  --a11y-outline: #ffffff;
  --a11y-text: #ffffff;
  --a11y-link: #ffd700;
  --a11y-focus: #ffd700;
}

html[data-a11y-theme="amarelo"] {
  /* Alto contraste amarelo/preto (exigência clássica eMAG) */
  --a11y-bg: #000000;
  --a11y-card: #121212;
  --a11y-surface: #1c1c1c;
  --a11y-outline: #ffff00;
  --a11y-text: #ffff00;
  --a11y-link: #ffffff;
  --a11y-focus: #ffffff;
}

html[data-a11y-theme="claro"] {
  /* Fundo claro: branco, texto escuro, links azuis */
  --a11y-bg: #ffffff;
  --a11y-card: #ffffff;
  --a11y-surface: #e9e9e9;
  --a11y-outline: #555555;
  --a11y-text: #111111;
  --a11y-link: #0033cc;
  --a11y-focus: #0033cc;
}

/* -------------------------------------------------
   1.1 PALETAS (alto contraste / fundo claro) — recoloração "inteligente"
   O acessibilidade.js analisa a cor de fundo ORIGINAL de cada elemento e
   marca (data-a11y-ctx / data-a11y-bg):
     • fundo claro ou cinza neutro ......... recolorido (preto no escuro, branco no claro)
     • fundo escuro neutro (menu, rodapé) .. vira "superfície" (cinza muito escuro / claro)
     • imagem, degradê ou cor da marca ..... PRESERVADO (hero, números, botões
       vermelhos, fotos) — esses já têm texto claro sobre fundo escuro.
   Assim o site mantém identidade e estrutura em vez de virar uma tela chapada.
------------------------------------------------- */
html[data-a11y-theme],
html[data-a11y-theme] body {
  background-color: var(--a11y-bg) !important;
  color: var(--a11y-text) !important;
}

/* Texto e bordas de tudo que está sobre fundo recolorido */
html[data-a11y-theme] [data-a11y-ctx="recolor"] {
  color: var(--a11y-text) !important;
  border-color: var(--a11y-text) !important;
  text-shadow: none !important;
}

html[data-a11y-theme] [data-a11y-bg="page"] {
  background-color: var(--a11y-bg) !important;
}

html[data-a11y-theme] [data-a11y-bg="card"] {
  background-color: var(--a11y-card) !important;
  box-shadow: 0 0 0 1px var(--a11y-outline) !important;
}

html[data-a11y-theme] [data-a11y-bg="surface"] {
  background-color: var(--a11y-surface) !important;
}

/* Links (e ícones/spans dentro deles) usam a cor de link da paleta */
html[data-a11y-theme] a[data-a11y-ctx="recolor"],
html[data-a11y-theme] a[data-a11y-ctx="recolor"] [data-a11y-ctx="recolor"] {
  color: var(--a11y-link) !important;
}

html[data-a11y-theme] ::placeholder {
  color: var(--a11y-text) !important;
  opacity: 0.75;
}

/* -------------------------------------------------
   1.2 ESCALA DE CINZA e CONTROLE NEGATIVO
   O filtro vai no <html>: no elemento raiz ele NÃO quebra elementos
   position: fixed/sticky (header, chatbot, botões flutuantes).
   No negativo, imagens/vídeos são "re-invertidos" para manter a aparência.
------------------------------------------------- */
html[data-a11y-gray] {
  filter: grayscale(1);
}

html[data-a11y-negative] {
  filter: invert(1) hue-rotate(180deg);
}

html[data-a11y-gray][data-a11y-negative] {
  filter: grayscale(1) invert(1) hue-rotate(180deg);
}

html[data-a11y-negative] :where(img, video, canvas, iframe, picture) {
  filter: invert(1) hue-rotate(180deg);
}

/* -------------------------------------------------
   1.3 LINKS SUBLINHADOS
------------------------------------------------- */
html[data-a11y-underline] a,
html[data-a11y-underline] a:hover,
html[data-a11y-underline] a:focus {
  text-decoration: underline !important;
  text-decoration-thickness: 0.08em !important;
  text-underline-offset: 0.18em !important;
}

/* -------------------------------------------------
   1.4 FONTE LEGÍVEL
   Atkinson Hyperlegible (carregada sob demanda pelo JS) com fallback
   para Verdana/Tahoma. Ícones do Font Awesome são preservados.
------------------------------------------------- */
html[data-a11y-readable] body :where(*:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands)) {
  font-family: var(--a11y-readable-font) !important;
}

/* -------------------------------------------------
   Escala de fonte global — controlada via JS, que ajusta
   diretamente o font-size do <html> (não apenas do <body>).
   Como todo o site usa rem para tipografia, espaçamento e
   componentes, esse ajuste no elemento raiz garante que a
   personalização valha em 100% do site — desktop e mobile,
   já que nenhum media query redefine o font-size do <html>.
------------------------------------------------- */
html {
  font-size: 100%;
}

/* base: 1rem = 16px; alterado via JS conforme preferência salva */

/* NOTA: não adicionamos overflow-x:hidden aqui. O próprio style.css do site
   já protege contra rolagem horizontal aplicando isso apenas ao <body>
   (nunca ao <html> ao mesmo tempo) — exatamente para preservar o
   comportamento de propagação do scroll para a viewport, do qual depende
   o position: sticky do cabeçalho. A proteção contra estouro de layout ao
   ampliar a fonte já é feita pelo limite adaptativo em getMaxScale()
   (acessibilidade.js). */

/* -------------------------------------------------
   2. FOCO VISÍVEL (obrigatório WCAG 2.4.7)
------------------------------------------------- */
:focus {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 2px !important;
}

/* Remove outline apenas para mouse, mantém para teclado */
:focus:not(:focus-visible) {
  outline: none !important;
}

:focus-visible {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 2px !important;
}

/* Dentro do painel (fundo escuro) o anel de foco é sempre âmbar */
.a11y-panel :focus-visible,
.a11y-toggle-btn:focus-visible {
  outline-color: var(--a11y-accent) !important;
}

/* Link "pular para o conteúdo" */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  background: var(--a11y-btn-bg);
  color: var(--a11y-btn-text);
  padding: 0.6em 1em;
  border-radius: 0.3em;
  z-index: 10000;
  font-weight: bold;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0.5rem;
}

/* -------------------------------------------------
   3. BOTÃO FLUTUANTE (canto inferior esquerdo — discreto)
   Fica à esquerda pois o canto inferior direito já é ocupado
   pelo chatbot LuminIA.
------------------------------------------------- */
.a11y-toggle-btn {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 9998;
  width: 3rem;
  height: 3rem;
  background: var(--a11y-btn-bg);
  color: var(--a11y-btn-text);
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow-md, 0 6px 24px rgba(0, 0, 0, .12));
  display: flex;
  align-items: center;
  justify-content: center;
}

.a11y-toggle-btn:hover,
.a11y-toggle-btn:focus {
  background: var(--a11y-btn-bg-hover);
}

/* -------------------------------------------------
   4. PAINEL — cartão compacto (popover), não sidebar
------------------------------------------------- */
.a11y-panel {
  position: fixed;
  bottom: 4.75rem;
  left: 1.25rem;
  width: 18rem;
  max-width: 88vw;
  max-height: calc(100vh - 6.5rem);
  /* telas baixas / paisagem: rola dentro do painel */
  overflow-y: auto;
  background: var(--a11y-panel-bg);
  color: var(--a11y-panel-text);
  z-index: 9999;
  padding: 0.9rem;
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: var(--shadow-lg, 0 12px 48px rgba(0, 0, 0, .18));
  transform: translateY(0.5rem) scale(0.97);
  opacity: 0;
  visibility: hidden;
  /* fora de foco quando fechado */
  pointer-events: none;
  transition: transform 0.18s ease, opacity 0.18s ease, visibility 0.18s;
}

.a11y-panel[data-open="true"] {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.a11y-panel h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.6rem 0;
  color: var(--a11y-accent);
}

.a11y-panel .a11y-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: #ffffffaa;
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.a11y-panel .a11y-close:hover {
  color: #fff;
}

.a11y-group {
  margin-bottom: 0.75rem;
}

.a11y-group:last-child {
  margin-bottom: 0;
}

.a11y-group-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #ffffffcc;
  margin-bottom: 0.35rem;
}

.a11y-font-readout {
  font-weight: 700;
  color: var(--a11y-accent);
}

/* Tamanho do texto: A− | A | A+ */
.a11y-btn-row {
  display: flex;
  gap: 0.4rem;
}

.a11y-btn {
  flex: 1;
  background: #ffffff1a;
  border: 1px solid #ffffff40;
  color: #fff;
  border-radius: var(--radius, 0.4em);
  padding: 0.4em;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 2.5rem;
  /* alvo de toque acessível */
}

.a11y-btn:hover {
  background: #ffffff33;
}

/* Opções liga/desliga: grade 2 colunas, ícone + rótulo */
.a11y-option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.a11y-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 4.2rem;
  padding: 0.5rem 0.35rem;
  background: #ffffff1a;
  border: 1px solid #ffffff40;
  color: #fff;
  border-radius: var(--radius, 0.4em);
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.a11y-option i {
  font-size: 1.15rem;
}

.a11y-option:hover {
  background: #ffffff33;
}

.a11y-option-state {
  font-size: 0.65rem;
  opacity: 0.85;
}

/* Ativo: fundo âmbar + ✓ (não depende só de cor — WCAG 1.4.1) */
.a11y-option[aria-pressed="true"] {
  background: var(--a11y-accent);
  border-color: var(--a11y-accent);
  color: #1a1a1a;
  font-weight: 700;
}

.a11y-option[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 0.15rem;
  right: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.a11y-reset-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  text-align: center;
  background: none;
  border: 1px solid #ffffff40;
  border-radius: var(--radius, 0.4em);
  color: #ffffffdd;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.55em;
  min-height: 2.5rem;
}

.a11y-reset-link:hover {
  color: var(--a11y-accent);
  border-color: var(--a11y-accent);
}

/* Overlay — fecha o painel ao tocar fora */
.a11y-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9997;
  display: none;
}

.a11y-overlay[data-open="true"] {
  display: block;
}

/* -------------------------------------------------
   5. PLAYER DE MÍDIA ACESSÍVEL
------------------------------------------------- */
.media-player {
  max-width: 50rem;
  margin: 1.5rem auto;
  background: #111;
  border-radius: 0.6em;
  overflow: hidden;
  color: #fff;
}

.media-player video {
  width: 100%;
  display: block;
  background: #000;
}

.media-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: #1a1a1a;
  flex-wrap: wrap;
}

.media-controls button {
  background: #2a2a2a;
  border: 1px solid #444;
  color: #fff;
  border-radius: 0.4em;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  font-size: 1rem;
}

.media-controls button:hover {
  background: #3a3a3a;
}

.media-controls button[aria-pressed="true"] {
  background: var(--a11y-btn-bg);
  border-color: var(--a11y-accent);
}

.media-progress {
  flex: 1;
  min-width: 8rem;
  accent-color: var(--a11y-btn-bg);
  height: 1.2rem;
}

.media-volume {
  width: 5rem;
  accent-color: var(--a11y-btn-bg);
}

.media-time {
  font-size: 0.8rem;
  min-width: 5.5rem;
  text-align: center;
}

/* Container da audiodescrição textual (para leitores de tela / legenda visual) */
.ad-live-region {
  padding: 0.5rem 0.9rem;
  background: #000;
  color: var(--a11y-accent);
  font-size: 0.9rem;
  min-height: 1.4em;
  border-top: 1px solid #333;
}