/* Paleta padrão para constelaçãos */
:root {
  --cst-cor-principal: #04C4D9;
  --cst-cor-secundaria: #3B82F6;
  --cst-cor-tercearia: #7c6ef0;
  --cst-cor-border-principal: #a8f0f7;
  --cst-cor-border-secundaria: #93c5fd;
  --cst-cor-aresta-ativa: #3B82F6;
  --cst-cor-node-inativo: rgba(255,255,255,0.12);
  --cst-cor-aresta-inativa: rgba(255,255,255,0.07);
}

/* Alto contraste */
.constelacao-svg--alto-contraste {
  --cst-cor-principal: #fff;
  --cst-cor-secundaria: #fff;
  --cst-cor-border-principal: #fff;
  --cst-cor-border-secundaria: #fff;
  --cst-cor-aresta-ativa: #fff;
  --cst-cor-node-inativo: rgba(255,255,255,0.25);
  --cst-cor-aresta-inativa: rgba(255,255,255,0.15);
}

.constelacao-svg {
  --filter-glow-principal: drop-shadow(0 0 3px var(--cst-cor-principal));
  --filter-glow-secundario: drop-shadow(0 0 2px var(--cst-cor-secundaria));
}

.constelacao-svg--alto-contraste {
  --filter-glow-principal: drop-shadow(0 0 5px var(--cst-cor-principal));
  --filter-glow-secundario: drop-shadow(0 0 3px var(--cst-cor-secundaria));
}


.cst-no {
  fill: var(--cst-cor-node-inativo);
  stroke: var(--cst-cor-stroke-inativo);
}

/* Nó ativo + principal */
.cst-no--ativo.cst-no--principal {
  fill: var(--cst-cor-principal);
  stroke: var(--cst-cor-border-principal);
}

/* Nó ativo + secundário */
.cst-no--ativo:not(.cst-no--principal) {
  fill: var(--cst-cor-secundaria);
  stroke: var(--cst-cor-border-secundaria);
}



/*--------------------------------------------------------------
# acessibilidade.css
# Widget de acessibilidade — posicionamento, painel e botão.
# Alto contraste — sobrescreve todo o projeto via body.alto-contraste.
# VLibras — posicionamento e estilo do botão.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Posicionamento do widget de acessibilidade (lado direito)
--------------------------------------------------------------*/
#acessibilidade-widget {
  position: fixed;
  bottom: 41%;
  right: 6px;
  z-index: 999;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

@media (max-width: 640px) {
  #acessibilidade-widget {
    bottom: 41%;
    right: 6px;
  }

  #btn-abrir-acessibilidade {
    width: 36px;
    height: 36px;
    font-size: 17px;
    border-radius: 6px;
  }

  #painel-acessibilidade {
    height: 36px;
    min-width: 110px;
    padding: 3px;
  }

  #painel-acessibilidade button {
    padding: 4px 8px;
    font-size: 13px;
  }
}

/*--------------------------------------------------------------
# Painel expansível
--------------------------------------------------------------*/
#painel-acessibilidade {
  display: flex;
  align-items: center;
  background: rgba(8, 12, 40, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(4, 196, 217, 0.25);
  border-radius: 10px;
  padding: 4px;
  height: 40px;
  min-width: 130px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(4, 196, 217, 0.08);
  position: relative;
  overflow: hidden;
}

#painel-acessibilidade::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(to right,
      transparent,
      rgba(4, 196, 217, 0.4),
      transparent);
  pointer-events: none;
}

#painel-acessibilidade button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  border: none;
  background: transparent;
  color: rgba(200, 198, 227, 0.75);
  font-family: 'Courier New', monospace;
}

#painel-acessibilidade button:hover {
  background: rgba(4, 196, 217, 0.1);
  color: #a8f0f7;
}

#painel-acessibilidade button span {
  width: 20px;
  text-align: center;
}

.acess-divisor {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  margin: 0 2px;
}

/*--------------------------------------------------------------
# Botão gatilho
--------------------------------------------------------------*/
#btn-abrir-acessibilidade {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(8, 12, 40, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(4, 196, 217, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(200, 198, 227, 0.75);
  font-size: 18px;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, box-shadow 0.25s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

#btn-abrir-acessibilidade:hover {
  border-color: rgba(4, 196, 217, 0.55);
  color: #a8f0f7;
  box-shadow: 0 0 18px rgba(4, 196, 217, 0.2);
}

#btn-abrir-acessibilidade:focus-visible {
  outline: 2px solid rgba(4, 196, 217, 0.6);
  outline-offset: 3px;
}

/*--------------------------------------------------------------
# VLibras — posicionado no lado esquerdo, mesma altura
--------------------------------------------------------------*/
[vw] {
  position: fixed !important;
  bottom: 41% !important;
  left: 6px !important;
  right: auto !important;
  z-index: 999 !important;
}

/* Esconde o botão padrão do VLibras */
[vw-access-button] {
  display: none !important;
}

/* Botão customizado do VLibras — injetado via JS */
#btn-vlibras {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(8, 12, 40, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(124, 110, 240, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  position: fixed;
  bottom: 41%;
  left: 6px;
  z-index: 999;
  padding: 0;
}

.body.alto-contraste #btn-vlibras svg {
  color: #fff !important;
}

#btn-vlibras svg {
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  color: rgba(200, 198, 227, 0.75);
}

#btn-vlibras:hover svg {
  color: #7c6ef0;
} 

#btn-vlibras:hover {
  border-color: rgba(124, 110, 240, 0.55);
  box-shadow: 0 0 18px rgba(124, 110, 240, 0.2);
  transform: translateY(-1px);
}

#btn-vlibras:focus-visible {
  outline: 2px solid rgba(124, 110, 240, 0.6);
  outline-offset: 3px;
}

/*--------------------------------------------------------------
# VLibras — imune ao aumento de fonte (px fixo)
--------------------------------------------------------------*/
.vlibras-widget,
[vw-plugin-wrapper] {
  font-size: 14px !important;
}

/*--------------------------------------------------------------
# Correção: webkit de sombra/partículas de fundo
# não deve vazar sobre o conteúdo das páginas internas
--------------------------------------------------------------*/
.hero-bg-elements {
  z-index: 0 !important;
}

.bg-particles {
  z-index: 0 !important;
}

/* Conteúdo das páginas internas fica sempre acima do fundo */
.pagina-interna .container,
.pagina-interna section,
.pagina-interna .section-titulo,
.primeira-sessao .container {
  position: relative;
  z-index: 1;
}

/*--------------------------------------------------------------
# Alto contraste
--------------------------------------------------------------*/
body.alto-contraste {
  background-color: #000 !important;
  color: #fff !important;
}

/* Fundo global e partículas */
body.alto-contraste .hero-bg-elements,
body.alto-contraste .bg-particles {
  display: none !important;
}

/* Seções */
body.alto-contraste .hero,
body.alto-contraste section,
body.alto-contraste .roadmap-hero,
body.alto-contraste .roadmap-content,
body.alto-contraste .primeira-sessao {
  background: #000 !important;
  background-image: none !important;
}

/* Efeitos visuais do roadmap e hero */
body.alto-contraste .rd-nebulosa__glow,
body.alto-contraste .rd-trilha-vertical,
body.alto-contraste .rd-trilha-vertical::after,
body.alto-contraste .rd-eixo-sep::after,
body.alto-contraste .roadmap-content .nebulosa-1,
body.alto-contraste .rd-planeta__halo,
body.alto-contraste .rd-planeta__anel,
body.alto-contraste #reflexo-img-1,
body.alto-contraste #reflexo-img-3,
body.alto-contraste #reflexo-img-4,
body.alto-contraste #reflexo-img-5,
body.alto-contraste #reflexo-img-6,
body.alto-contraste #reflexo-img-7,
body.alto-contraste .hero .hero-bg-elements {
  display: none !important;
  opacity: 0 !important;
}

/* Header e footer */
body.alto-contraste .header .header-container,
body.alto-contraste footer {
  background: #000 !important;
  border-color: #fff !important;
}

/* Textos */
body.alto-contraste p,
body.alto-contraste h1,
body.alto-contraste h2,
body.alto-contraste h3,
body.alto-contraste h4,
body.alto-contraste h5,
body.alto-contraste h6,
body.alto-contraste span,
body.alto-contraste li,
body.alto-contraste label,
body.alto-contraste strong,
body.alto-contraste td,
body.alto-contraste th {
  color: #fff !important;
}

body.alto-contraste span {
  border-color: #fff !important;
  filter: none !important;
}

/* Links */
body.alto-contraste a {
  color: #ff0 !important;
}

/* Cards e superfícies */
body.alto-contraste .eixo-portal,
body.alto-contraste .rd-card,
body.alto-contraste .artigo-card,
body.alto-contraste .card.shadow-sm,
body.alto-contraste .objetivos-wrapper,
body.alto-contraste .artigos-header-auth,
body.alto-contraste .conteudo-autor {
  background: #000 !important;
  border-color: #fff !important;
  backdrop-filter: none !important;
}

/* Botões genéricos */
body.alto-contraste button {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

body.alto-contraste input,
body.alto-contraste textarea,
body.alto-contraste select {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* Tabelas */
body.alto-contraste .table,
body.alto-contraste .table thead,
body.alto-contraste .table tbody tr {
  background: #000 !important;
  border-color: #fff !important;
}

/* Navmenu */
body.alto-contraste .navmenu a {
  color: #fff !important;
}

body.alto-contraste .navmenu .dropdown ul {
  background: #000 !important;
  border-color: #fff !important;
}

/*--------------------------------------------------------------
# Widget de acessibilidade — imune ao alto contraste
--------------------------------------------------------------*/
body.alto-contraste #acessibilidade-widget {
  position: fixed !important;
  bottom: 41% !important;
  right: 6px !important;
  z-index: 999 !important;
}

body.alto-contraste #btn-abrir-acessibilidade {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

body.alto-contraste #btn-abrir-acessibilidade:hover {
  background: #111 !important;
}

body.alto-contraste #painel-acessibilidade {
  background: #000 !important;
  border-color: #fff !important;
}

body.alto-contraste #painel-acessibilidade button {
  background: transparent !important;
  color: #fff !important;
  border: none !important;
}

body.alto-contraste #painel-acessibilidade button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Botão VLibras — imune */
body.alto-contraste #btn-vlibras {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
  position: fixed !important;
  bottom: 41% !important;
  left: 6px !important;
}

body.alto-contraste #btn-vlibras:hover {
  background: #111 !important;
}


body.alto-contraste .footer-back {
  background: #000 !important;
  color: #fff !important;
  border-top: 1px solid #fff !important;
  border-bottom: 1px solid #fff !important;
}

body.alto-contraste .ini-anel-trilha {
    stroke: rgba(255, 255, 255, 0.2) !important;
}

body.alto-contraste .ini-anel-progresso {
    stroke: #fff !important;
    filter: none !important;
}

body.alto-contraste .ini-anel-numero {
    color: #fff !important;
    filter: none !important;
}

/*--------------------------------------------------------------
# Alto contraste — Roadmap
--------------------------------------------------------------*/

/* Pontos da timeline */
body.alto-contraste .rd-ponto--verde,
body.alto-contraste .rd-ponto--amarelo,
body.alto-contraste .rd-ponto--roxo {
  background: #fff !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Ícones dos cards */
body.alto-contraste .rd-card__icone-wrap--verde,
body.alto-contraste .rd-card__icone-wrap--amarelo,
body.alto-contraste .rd-card__icone-wrap--roxo {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.alto-contraste .rd-icone-svg {
  filter: none !important;
  color: #fff !important;
}

/* Títulos coloridos dos cards */
body.alto-contraste .rd-card__titulo--verde,
body.alto-contraste .rd-card__titulo--amarelo,
body.alto-contraste .rd-card__titulo--roxo {
  color: #fff !important;
}

/* Bullets da lista dos cards */
body.alto-contraste .rd-nebulosa--verde .rd-card__item::before,
body.alto-contraste .rd-nebulosa--amarelo .rd-card__item::before,
body.alto-contraste .rd-nebulosa--roxo .rd-card__item::before {
  background: #fff !important;
}

/* Núcleos dos planetas / marcadores de eixo */
body.alto-contraste .rd-planeta--1 .rd-planeta__nucleo,
body.alto-contraste .rd-planeta--2 .rd-planeta__nucleo,
body.alto-contraste .rd-planeta--3 .rd-planeta__nucleo,
body.alto-contraste .rd-planeta--4 .rd-planeta__nucleo,
body.alto-contraste .rd-planeta--5 .rd-planeta__nucleo,
body.alto-contraste .rd-planeta--6 .rd-planeta__nucleo {
  background: #000 !important;
  box-shadow: 0 0 0 2px #fff !important;
}

/* Borda colorida dos cards */
body.alto-contraste .rd-nebulosa--verde .rd-card,
body.alto-contraste .rd-nebulosa--amarelo .rd-card,
body.alto-contraste .rd-nebulosa--roxo .rd-card {
  border-left-color: #fff !important;
}

/* Fio de luz dos cards */
body.alto-contraste .rd-nebulosa--verde .rd-card::before,
body.alto-contraste .rd-nebulosa--amarelo .rd-card::before,
body.alto-contraste .rd-nebulosa--roxo .rd-card::before {
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent) !important;
}

/* Glow dos cards (remove blur colorido) */
body.alto-contraste .rd-nebulosa__glow {
  display: none !important;
}

/*--------------------------------------------------------------
# Alto contraste — Indicadores (barra de progresso e tabela)
--------------------------------------------------------------*/

/* Barra de progresso do painel de eixo */
body.alto-contraste .eixo-portal__progresso-barra {
  background: rgba(255,255,255,0.15) !important;
}

body.alto-contraste .eixo-portal__progresso-fill {
  background: #fff !important;
  box-shadow: none !important;
}

body.alto-contraste .eixo-portal__progresso-pct {
  color: #fff !important;
}


/* Números e labels coloridos do painel de indicadores */
body.alto-contraste .ini-painel-numero,
body.alto-contraste .ini-cor-amarelo,
body.alto-contraste .ini-cor-vermelho {
  color: #fff !important;
  filter: none !important;
}

/* Badges do painel */
body.alto-contraste .ini-badge-concluida,
body.alto-contraste .ini-badge-andamento,
body.alto-contraste .ini-badge-nao {
  background: transparent !important;
  color: #fff !important;
  border-color: #fff !important;
}

/*--------------------------------------------------------------
# Alto contraste — Política (linha, cards, pontos)
--------------------------------------------------------------*/

/* Fio de luz dos cards de eixo */
body.alto-contraste .eixo-portal__fio {
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.45), transparent) !important;
}

/* Número e badge do cabeçalho do card */
body.alto-contraste .eixo-portal__num {
  color: #fff !important;
  filter: none !important;
}

body.alto-contraste .eixo-portal__badge {
  background: transparent !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* Porcentagem e fill no rodapé do card de eixo */
body.alto-contraste .eixo-portal__cta {
  color: rgba(255,255,255,0.6) !important;
}

body.alto-contraste .eixo-portal:hover .eixo-portal__cta {
  color: #fff !important;
}

/*--------------------------------------------------------------
# Alto contraste — Artigos (badges)
--------------------------------------------------------------*/

body.alto-contraste .artigo-badge {
  background-color: transparent !important;
  color: #fff !important;
  border-color: #fff !important;
}

body.alto-contraste .objetivos-wrapper::before {
  background: none;
}

body.alto-contraste .ini-painel {
  background: #000 !important;
  border-color: #fff !important;
}

body.alto-contraste .step-item {
  background: #000 !important;
  border-color: #fff !important;
}


body.alto-contraste .ini-badge-andamento {
  background: yellow !important;
  color: #000 !important;
}
body.alto-contraste .ini-badge-nao {
  background: red !important;
  color: #000 !important;
}
body.alto-contraste .ini-badge-concluida {
  background: green !important;
  color: #000 !important;
}

body.alto-contraste .ini-painel-label {
  color: rgb(0, 174, 255) !important;
  filter: none !important;
}

body.alto-contraste .progress-bar {
  background-color: #fff !important;
}

body.alto-contraste .table {
  background: #000 !important;
  border-color: #fff !important;
  color: #fff !important;
}


body.alto-contraste .timeline::before {
  background: #fff !important;
}

body.alto-contraste .timeline-item::before {
  background: #fff !important;
}

body.alto-contraste .timeline-date {
  color: #fff !important;
  background: #000 !important;
  border-color: #fff !important;
}


body.alto-contraste .timeline-content {
  background: #000 !important;
  border-color: #fff !important;
  color: #fff !important;
}

body.alto-contraste .navmenu > ul > li > a::before {
  background: #fff !important;
}