/* =========================================================================
   Sistema de Acessibilidade — portado do projeto Designação 2027/SMENC.
   Convertido de Tailwind para CSS puro e adaptado à paleta da Mucura
   (fundo escuro + magenta neon). Mesmas funções, mesmos atalhos.
   ========================================================================= */

/* ---------- Botão flutuante ---------- */
#a11y-fab {
  position: fixed; left: 1.15rem; bottom: 1.15rem; z-index: 9999;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--magenta, #FF1E8E); color: #fff;
  box-shadow: 0 10px 30px rgba(255, 30, 142, .45);
  transition: transform .3s ease, background .3s ease;
}
#a11y-fab:hover { transform: scale(1.09); background: var(--magenta-claro, #FF5FB0); }
#a11y-fab svg { width: 28px; height: 28px; }

/* ---------- Painel ---------- */
#a11y-panel {
  position: fixed; left: 1.15rem; bottom: 5.4rem; z-index: 9999;
  width: 340px; max-width: calc(100vw - 2.3rem);
  max-height: 76vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--preto-2, #121215); color: var(--texto, #EDEDF2);
  border: 1px solid var(--borda, rgba(255,255,255,.09));
  border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
#a11y-panel.aberto { opacity: 1; transform: translateY(0); pointer-events: auto; }

.a11y-cabecalho {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--borda, rgba(255,255,255,.09));
}
.a11y-cabecalho h2 {
  font-family: var(--fonte-titulo, sans-serif); font-size: 1rem; font-weight: 700; margin: 0;
}
.a11y-cabecalho__titulo { display: flex; align-items: center; gap: .55rem; }
.a11y-cabecalho__titulo > span { color: var(--magenta, #FF1E8E); display: flex; }
.a11y-fechar {
  padding: .3rem; border-radius: 8px; color: var(--texto-suave, #C7C7D1);
  transition: background .2s ease, color .2s ease;
}
.a11y-fechar:hover { background: rgba(255,255,255,.07); color: #fff; }

.a11y-scroll { flex: 1; overflow-y: auto; padding: 1.1rem; display: grid; gap: 1.1rem; }

/* ---------- Tamanho da fonte ---------- */
.a11y-bloco { display: grid; gap: .55rem; }
.a11y-rotulo {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 600; color: var(--texto, #EDEDF2);
}
.a11y-rotulo svg { color: var(--magenta, #FF1E8E); }

.a11y-fonte { display: flex; align-items: center; gap: .5rem; }
.a11y-fonte button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .55rem .7rem; border-radius: 9px; font-size: .85rem; font-weight: 600;
  background: rgba(255,255,255,.06); border: 1px solid var(--borda, rgba(255,255,255,.09));
  color: var(--texto, #EDEDF2); transition: background .2s ease, border-color .2s ease;
}
.a11y-fonte button:hover:not(:disabled) { background: rgba(255,30,142,.14); border-color: var(--magenta, #FF1E8E); }
.a11y-fonte button:disabled { opacity: .4; cursor: not-allowed; }
.a11y-fonte__valor {
  width: 62px; text-align: center; font-weight: 700; font-size: .9rem;
  color: var(--magenta, #FF1E8E);
}

/* ---------- Alternâncias ---------- */
.a11y-opcoes { display: grid; gap: .5rem; }
.a11y-opcao {
  width: 100%; display: flex; align-items: flex-start; gap: .75rem; text-align: left;
  padding: .75rem; border-radius: 10px;
  background: transparent; border: 1px solid var(--borda, rgba(255,255,255,.09));
  transition: background .2s ease, border-color .2s ease;
}
.a11y-opcao:hover { background: rgba(255,255,255,.04); border-color: rgba(255,30,142,.4); }
.a11y-opcao__icone { color: var(--texto-fraco, #8A8A96); margin-top: .1rem; display: flex; transition: color .2s ease; }
.a11y-opcao__texto { flex: 1; }
.a11y-opcao__titulo { display: block; font-size: .86rem; font-weight: 600; }
.a11y-opcao__desc { display: block; font-size: .74rem; color: var(--texto-fraco, #8A8A96); margin-top: .1rem; }

.a11y-chave {
  margin-top: .15rem; width: 40px; height: 22px; border-radius: 999px; flex: none;
  background: var(--grafite, #26262E); display: flex; align-items: center;
  transition: background .2s ease;
}
.a11y-chave > span {
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transform: translateX(3px); transition: transform .2s ease;
}

.a11y-opcao[aria-checked="true"] { border-color: var(--magenta, #FF1E8E); background: rgba(255,30,142,.1); }
.a11y-opcao[aria-checked="true"] .a11y-opcao__icone { color: var(--magenta, #FF1E8E); }
.a11y-opcao[aria-checked="true"] .a11y-chave { background: var(--magenta, #FF1E8E); }
.a11y-opcao[aria-checked="true"] .a11y-chave > span { transform: translateX(21px); }

/* ---------- VLibras ---------- */
.a11y-vlibras {
  width: 100%; display: flex; align-items: flex-start; gap: .75rem; text-align: left;
  padding: .75rem; border-radius: 10px;
  background: rgba(255,30,142,.08); border: 1px solid rgba(255,30,142,.3);
  transition: background .2s ease;
}
.a11y-vlibras:hover { background: rgba(255,30,142,.16); }
.a11y-vlibras__icone { color: var(--magenta, #FF1E8E); margin-top: .1rem; display: flex; }
.a11y-vlibras__seta { color: var(--magenta, #FF1E8E); margin-top: .2rem; flex: none; width: 16px; height: 16px; }
.a11y-msg { margin-top: .4rem; font-size: .74rem; color: #FFB3B3; text-align: center; }
.a11y-msg[hidden] { display: none; }

/* ---------- Restaurar / atalho ---------- */
.a11y-reset {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1rem; border-radius: 10px; font-size: .85rem; font-weight: 600;
  border: 1px solid var(--borda, rgba(255,255,255,.09)); color: var(--texto, #EDEDF2);
  transition: background .2s ease, border-color .2s ease;
}
.a11y-reset:hover { background: rgba(255,255,255,.05); border-color: var(--magenta, #FF1E8E); }

.a11y-atalho {
  padding-top: .8rem; border-top: 1px solid var(--borda, rgba(255,255,255,.09));
  font-size: .74rem; color: var(--texto-fraco, #8A8A96); text-align: center;
}
.a11y-atalho kbd {
  padding: .12rem .4rem; border-radius: 4px; font-size: .72rem;
  background: rgba(255,255,255,.08); font-family: inherit;
}

/* Barra de rolagem discreta */
.a11y-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,30,142,.4) transparent; }
.a11y-scroll::-webkit-scrollbar { width: 8px; }
.a11y-scroll::-webkit-scrollbar-track { background: transparent; }
.a11y-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,30,142,.4); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}

/* =========================================================================
   Classes aplicadas em <html> pelo JS
   ========================================================================= */

/* ---- Alto contraste ---- */
html.high-contrast, html.high-contrast body { background: #000 !important; color: #fff !important; }
html.high-contrast section, html.high-contrast header, html.high-contrast footer,
html.high-contrast nav, html.high-contrast article, html.high-contrast aside,
html.high-contrast .cartao, html.high-contrast .formulario, html.high-contrast .canal {
  background: #000 !important; background-image: none !important; border-color: #fff !important;
}
html.high-contrast *:not(svg):not(path):not(rect):not(circle):not(line):not(polygon):not(ellipse):not(text) {
  color: #fff !important; border-color: #8a8a8a !important; text-shadow: none !important;
}
html.high-contrast a { color: #ff0 !important; -webkit-text-fill-color: #ff0 !important;
  background: transparent !important; text-decoration: underline !important; text-underline-offset: 2px; }
html.high-contrast button:not(.a11y-chave) {
  background: #000 !important; color: #ff0 !important; border: 2px solid #ff0 !important;
}
html.high-contrast svg { color: #ff0 !important; }
html.high-contrast #a11y-fab { border: 2px solid #ff0 !important; }
html.high-contrast :focus-visible { outline-color: #ff0 !important; }
/* Desliga os enfeites que atrapalham a leitura em alto contraste */
html.high-contrast .hero::before, html.high-contrast .hero::after,
html.high-contrast .cta-final::before, html.high-contrast .topo-pagina::before,
html.high-contrast .aurora, html.high-contrast .projeto__capa::after { display: none !important; }

/* ---- Escala de cinza ---- */
html.grayscale-mode { filter: grayscale(100%); }

/* ---- Destacar links ---- */
html.highlight-links a:not(.botao):not([role="button"]) {
  background-color: #ffe58a !important; color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  padding: 2px 4px !important; border-radius: 2px !important;
  text-decoration: underline !important; text-underline-offset: 2px !important;
}

/* ---- Cursor grande ---- */
html.big-cursor, html.big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M5 3l14 9-8 2-2 8z'/%3E%3C/svg%3E") 0 0, auto !important;
}
html.big-cursor a, html.big-cursor button, html.big-cursor [role="button"],
html.big-cursor input, html.big-cursor textarea, html.big-cursor select {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M12 6v12M6 12h12'/%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 24 24, pointer !important;
}

/* ---- Espaçamento de texto ---- */
html.text-spacing { letter-spacing: .12em !important; word-spacing: .16em !important; }
html.text-spacing p, html.text-spacing li, html.text-spacing span,
html.text-spacing label, html.text-spacing div { line-height: 2 !important; }

/* ---- Pausar animações ---- */
html.pause-animations, html.pause-animations *,
html.pause-animations *::before, html.pause-animations *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
/* Garante que nada fique invisível se a animação de entrada for pausada */
html.pause-animations .revelar { opacity: 1 !important; transform: none !important; }

/* ---- Fonte para dislexia ---- */
html.dyslexia-font, html.dyslexia-font * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', Arial, sans-serif !important;
}

/* ---- Guia de leitura ---- */
#a11y-reading-guide {
  position: fixed; left: 0; right: 0; height: 3rem;
  background: rgba(255, 30, 142, .16);
  border-top: 1px solid rgba(255, 30, 142, .6);
  border-bottom: 1px solid rgba(255, 30, 142, .6);
  pointer-events: none; z-index: 9998; display: none;
}

/* Em telas pequenas, painel e botão não brigam com o botão do WhatsApp */
@media (max-width: 640px) {
  #a11y-panel { bottom: 5rem; }
}