/* =========================================================
   Acessibilidade — botão flutuante e modos de exibição

   Os modos são aplicados como classe no <html> e agem sobre os tokens do
   portal, não sobre cada componente. Trocar a variável vale por dezenas de
   regras com !important e sobrevive a mudanças no design system.
   ========================================================= */

/* ---------- Botão flutuante e painel ---------- */
.acessibilidade {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}

.acessibilidade-botao {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--conam-teal);
  color: #fff;
  border: 2px solid var(--conam-teal-escuro);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.acessibilidade-botao:hover { background: var(--conam-teal-escuro); }
.acessibilidade-botao:focus-visible {
  outline: 3px solid var(--conam-foco);
  outline-offset: 3px;
}

/* O painel sobe a partir do botão; em telas baixas ele rola sozinho. */
.acessibilidade-menu {
  order: -1;
  background: var(--conam-superficie);
  color: var(--conam-texto);
  border: 2px solid var(--conam-teal-escuro);
  border-radius: .5rem;
  padding: .75rem;
  min-width: 232px;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
.acessibilidade-menu[hidden] { display: none; }

.acessibilidade-titulo {
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--conam-teal-escuro);
  padding-bottom: .375rem;
  border-bottom: 1px solid var(--conam-borda);
  margin-bottom: .25rem;
}

.acessibilidade-menu .ac-btn {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 40px;
  padding: .5rem .625rem;
  font-size: .8125rem;
  text-align: left;
  color: var(--conam-primario);
  background: var(--conam-superficie);
  border: 1px solid var(--conam-borda);
  border-radius: .375rem;
  cursor: pointer;
}
.acessibilidade-menu .ac-btn:hover { background: var(--conam-hover); border-color: var(--conam-foco); }
.acessibilidade-menu .ac-btn:focus-visible { outline: 3px solid var(--conam-foco); outline-offset: 2px; }

/* Marca o modo ligado, para quem usa o painel saber o que já está ativo. */
.acessibilidade-menu .ac-btn[aria-pressed="true"] {
  background: var(--conam-teal-claro);
  border-color: var(--conam-teal);
  color: var(--conam-teal-escuro);
  font-weight: 500;
}
.acessibilidade-menu .ac-btn[aria-pressed="true"]::after { content: "✓"; font-weight: 700; }

.acessibilidade-menu .ac-tamanho { display: flex; gap: .375rem; }
.acessibilidade-menu .ac-tamanho .ac-btn { flex: 1; justify-content: center; font-size: .9375rem; font-weight: 500; }

.acessibilidade-menu .ac-reset {
  justify-content: center;
  color: var(--conam-perigo);
  border-color: rgba(169, 3, 41, .35);
  margin-top: .25rem;
}
.acessibilidade-menu .ac-reset:hover { background: #fff1f3; border-color: var(--conam-perigo); }

/* =========================================================
   Modos
   ========================================================= */

/* Escala de cinza e contraste negativo: filtro sobre o invólucro do
   conteúdo. Aplicar no <html> criaria bloco de contenção e o botão
   flutuante deixaria de acompanhar a rolagem. */
html.ac-cinza .portal-conteudo { filter: grayscale(100%); }
html.ac-negativo .portal-conteudo { filter: invert(100%); }
html.ac-cinza.ac-negativo .portal-conteudo { filter: grayscale(100%) invert(100%); }

/* Alto contraste: fundo preto, texto branco, links em ciano. */
html.ac-alto-contraste {
  --conam-superficie: #000;
  --conam-canvas: #000;
  --conam-well: #111;
  --conam-texto: #fff;
  --conam-titulo: #fff;
  --conam-mudo: #e8e8e8;
  --conam-borda: #767676;
  --conam-borda-input: #767676;
  --conam-primario: #00e5ff;
  --conam-primario-borda: #00e5ff;
  --conam-hover: #1a1a1a;
  --conam-teal: #000;
  --conam-teal-escuro: #00e5ff;
  --conam-teal-claro: #1a1a1a;
  --conam-perigo: #ff8a9b;
  --bs-body-color: #fff;
  --bs-body-bg: #000;
  --bs-link-color: #00e5ff;
  --bs-link-hover-color: #7df9ff;
  --bs-border-color: #767676;
  --bs-secondary-color: #e8e8e8;
}
/* As superfícies são repintadas explicitamente, e não só pelo token.
   Texto branco sobre um fundo que continuou branco é falha grave e
   silenciosa — um componente que venha a fixar a própria cor, ou uma folha
   de estilo defasada no cache do visitante, não pode produzir isso. */
html.ac-alto-contraste .portal-cabecalho,
html.ac-alto-contraste .portal-area,
html.ac-alto-contraste .portal-area .card-body,
html.ac-alto-contraste .portal-docs,
html.ac-alto-contraste .portal-doc,
html.ac-alto-contraste .portal-contagem,
html.ac-alto-contraste .portal-aviso,
html.ac-alto-contraste .portal-rodape,
html.ac-alto-contraste .portal-select {
  background-color: #000;
}

html.ac-alto-contraste .portal-titulo,
html.ac-alto-contraste .portal-subtitulo,
html.ac-alto-contraste .portal-h2,
html.ac-alto-contraste .portal-area-titulo,
html.ac-alto-contraste .portal-area-sub,
html.ac-alto-contraste .portal-contagem,
html.ac-alto-contraste .portal-aviso,
html.ac-alto-contraste .portal-rodape { color: #fff; }

/* Links continuam em ciano: no alto contraste também é preciso distinguir
   o que é clicável do que é texto corrido. */
html.ac-alto-contraste .portal-doc { color: #00e5ff; }
html.ac-alto-contraste .portal-doc.disabled { color: #e8e8e8; }

html.ac-alto-contraste .portal-topo { background: #000; border-bottom-color: #00e5ff; }
/* O brasão é imagem do município: fica na caixa branca para continuar legível. */
html.ac-alto-contraste .portal-brasao { background: #fff; }
html.ac-alto-contraste .portal-area-num { background: #1a1a1a; color: #00e5ff; }
html.ac-alto-contraste .btn-primary {
  --bs-btn-bg: #000;
  --bs-btn-color: #00e5ff;
  --bs-btn-border-color: #00e5ff;
  --bs-btn-hover-bg: #1a1a1a;
  --bs-btn-hover-color: #7df9ff;
  --bs-btn-hover-border-color: #7df9ff;
}
html.ac-alto-contraste .portal-doc .tipo { color: #ff8a9b; }
html.ac-alto-contraste .portal-doc.disabled { color: #e8e8e8; border-color: #767676; }

/* Fundo claro: achata tudo em branco, sem o cinza de fundo. */
html.ac-fundo-claro {
  --conam-canvas: #fff;
  --conam-superficie: #fff;
  --conam-well: #fff;
  --conam-texto: #000;
  --conam-titulo: #000;
  --conam-mudo: #444;
  --conam-hover: #f0f0f0;
  --bs-body-color: #000;
  --bs-body-bg: #fff;
}

html.ac-links a { text-decoration: underline !important; }

html.ac-fonte, html.ac-fonte .portal-conteudo, html.ac-fonte .acessibilidade {
  --bs-body-font-family: Verdana, Arial, Tahoma, sans-serif;
  font-family: Verdana, Arial, Tahoma, sans-serif !important;
}

/* Com o texto ampliado, os títulos de tamanho fixo precisam acompanhar. */
html.ac-txt-override .portal-titulo,
html.ac-txt-override .portal-topo-nome,
html.ac-txt-override .portal-h2,
html.ac-txt-override .portal-area-titulo { font-size: 1.4em; }
html.ac-txt-override .portal-titulo { font-size: 1.9em; }

@media (prefers-reduced-motion: reduce) {
  .acessibilidade-botao, .acessibilidade-menu .ac-btn { transition: none !important; }
}

@media print {
  .acessibilidade, [vw] { display: none !important; }
}