/* Vagas Sem Barreiras, base.

   Regras que atravessam a folha inteira:
   - nada comunica só por cor: todo estado tem texto e forma;
   - foco sempre visível, com halo para funcionar sobre qualquer fundo;
   - nada nasce escondido esperando animação;
   - alvo de toque nunca menor que 44px. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fonte);
  font-size: var(--texto-base);
  line-height: var(--altura-linha);
  -webkit-text-size-adjust: 100%;
}

/* --- fundamentos de acessibilidade --- */

.pular-para-conteudo {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  background: var(--teal-900);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--raio) var(--raio);
  font-weight: 700;
  text-decoration: none;
  transition: top .15s ease;
}
.pular-para-conteudo:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  /* O halo garante o contraste do contorno mesmo quando o elemento está
     sobre um fundo da mesma família de cor do foco. */
  box-shadow: 0 0 0 5px var(--foco-halo);
  border-radius: var(--raio-sm);
}

.so-leitor-de-tela {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- estrutura --- */

.container {
  width: min(100% - 2 * var(--space-5), var(--container));
  margin-inline: auto;
}
.estreito { max-width: 760px; }
main { display: block; }
main:focus { outline: none; }

/* O respiro de baixo é maior que o de cima de propósito: opticamente, padding
   simétrico faz a seção parecer colada no que vem depois. */
.secao { padding-block: var(--space-12) var(--space-16); }
.secao + .secao { padding-top: 0; }

/* Faixa com fundo próprio, para dar ritmo a páginas longas. A diferença é
   pequena de propósito: um bloco escuro no meio de uma página clara lê como
   erro de montagem, não como seção. */
.faixa { background: var(--surface); border-block: var(--largura-borda) solid var(--linha); }
.faixa + .faixa { border-top: 0; }

/* --- tipografia --- */

h1, h2, h3, h4 {
  margin: 0 0 var(--space-4);
  color: var(--teal-900);
  font-family: var(--fonte-display);
  font-weight: 700;
  /* `balance` evita a palavra órfã sozinha na última linha de um título -
     o defeito tipográfico que mais aparece em título de duas linhas. */
  text-wrap: balance;
}
/* Título grande pede entrelinha menor e letra mais junta; título pequeno pede
   o contrário. Usar o mesmo par para os dois é o que faz um h1 parecer um
   parágrafo em negrito. */
h1 { font-size: var(--texto-3xl); line-height: 1.12; letter-spacing: -0.021em; }
h2 { font-size: var(--texto-2xl); line-height: 1.18; letter-spacing: -0.015em;
     margin-top: var(--space-10); }
h3 { font-size: var(--texto-xl); line-height: 1.25; letter-spacing: -0.008em;
     margin-top: var(--space-6); }
h4 { font-size: var(--texto-lg); line-height: 1.3; }

p, li { max-width: var(--medida); }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }

/* Etiqueta acima do título: dá contexto sem gastar uma linha de título. */
.sobretitulo {
  display: block;
  font-size: var(--texto-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: var(--space-3);
}
.conduz { font-size: var(--texto-lg); color: var(--ink-suave); line-height: 1.55; }

/* Todo número que se compara com outro número vira tabular: sem isso as
   colunas de um painel dançam de linha para linha. */
.numero-valor, td.peso, time.tabular { font-variant-numeric: tabular-nums; }
.pequeno { font-size: var(--texto-sm); color: var(--ink-suave); }
.muito-pequeno { font-size: var(--texto-xs); color: var(--ink-suave); }

a { color: var(--teal-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--teal-900); }

hr { border: 0; border-top: 2px solid var(--linha); margin: var(--space-8) 0; }

/* --- cabeçalho --- */

.topo {
  background: var(--surface);
  border-bottom: var(--largura-borda) solid var(--linha);
  position: sticky; top: 0; z-index: 20;
}
.topo .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding-block: var(--space-3);
}
.marca {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--fonte-display);
  font-weight: 700; font-size: var(--texto-lg); letter-spacing: -0.015em;
  color: var(--teal-900); text-decoration: none;
  margin-right: var(--space-4);
}
.marca-simbolo { width: 2.1rem; height: 2.1rem; flex: none; color: var(--teal-600); }
.marca strong { color: var(--teal-900); }

.navegacao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.navegacao-conta { margin-left: auto; padding-left: var(--space-4);
                   border-left: var(--largura-borda) solid var(--linha); }
.navegacao a, .navegacao button {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--raio-sm);
  color: var(--ink-suave); text-decoration: none; font-weight: 600;
  font-size: var(--texto-sm);
  border: 0; background: none; cursor: pointer; font-family: inherit;
  transition: background-color var(--transicao), color var(--transicao);
}
.navegacao a:hover, .navegacao button:hover {
  background: var(--surface-alt); color: var(--teal-900);
}
/* A página atual é marcada por **texto e forma** (peso + filete embaixo), não
   só por cor: quem não distingue o teal do cinza continua sabendo onde está.
   O `aria-current` faz o mesmo para quem ouve a página. */
.navegacao a[aria-current="page"] {
  color: var(--teal-900); font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--teal-600);
  border-radius: var(--raio-sm) var(--raio-sm) 0 0;
}
.navegacao .btn { min-height: 40px; }

/* Sub-navegação do papel: aparece só para quem está autenticado, numa faixa
   própria. Antes, os onze links do administrador dividiam a mesma linha com a
   marca, e nenhum deles parecia mais importante que os outros. */
.contexto {
  background: var(--surface-alt);
  border-bottom: var(--largura-borda) solid var(--linha);
}
.contexto .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
  padding-block: var(--space-1);
}
.contexto-papel {
  font-size: var(--texto-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-suave);
  margin-right: var(--space-3); padding-block: var(--space-2);
}
.contexto a {
  padding: var(--space-2) var(--space-3); border-radius: var(--raio-sm);
  font-size: var(--texto-sm); font-weight: 600; text-decoration: none;
  color: var(--teal-ink); min-height: 38px; display: inline-flex; align-items: center;
  white-space: nowrap;
  transition: background-color var(--transicao);
}
/* Com nove destinos, a faixa quebrava em duas linhas em 1280px. Rolagem
   horizontal resolve sem esconder nada, e com `scrollbar-width: thin` ela
   não rouba altura. O `Tab` continua alcançando todos, e o navegador rola
   sozinho até o item focado. */
@media (min-width: 761px) {
  .contexto .container {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;
  }
}
.contexto a:hover { background: var(--surface); }
.contexto a[aria-current="page"] {
  background: var(--surface); color: var(--teal-900); font-weight: 700;
  box-shadow: inset 0 0 0 var(--largura-borda) var(--linha);
}

/* --- barra de acessibilidade ---
   Recolhida por padrão: expandida, as oito opções eram a primeira coisa que
   se via em toda página, antes do nome da plataforma. Continua sendo um
   `<details>` + `<form>`, ou seja, **funciona sem JavaScript**, que é o
   ponto: quem mais depende destes recursos tem mais chance de estar num
   navegador onde o script não rodou. */

.barra-acessibilidade {
  background: var(--teal-900);
  color: #fff;
  font-size: var(--texto-sm);
}
:root[data-tema^="alto-contraste"] .barra-acessibilidade {
  background: var(--surface); color: var(--ink);
  border-bottom: 2px solid var(--linha);
}
.barra-acessibilidade .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
}
.acessibilidade-resumo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 38px; cursor: pointer; font-weight: 700;
  border-radius: var(--raio-sm); list-style: none;
}
.acessibilidade-resumo:-webkit-details-marker { display: none; }
.acessibilidade-resumo::before { content: "⊕"; font-size: 1.1em; }
details[open] > .acessibilidade-resumo::before { content: "⊖"; }
.acessibilidade-resumo:hover { background: rgba(255, 255, 255, .14); }
:root[data-tema^="alto-contraste"] .acessibilidade-resumo:hover { background: var(--surface-alt); }
.acessibilidade-estado { font-weight: 400; opacity: .85; }

.acessibilidade-painel {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) 0 var(--space-4);
}
.acessibilidade-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.barra-acessibilidade .rotulo-grupo { font-weight: 700; }
.barra-acessibilidade button {
  min-height: 38px;
  padding: var(--space-1) var(--space-3);
  border: 2px solid rgba(255, 255, 255, .5);
  background: transparent; color: #fff;
  border-radius: var(--raio-sm);
  font-family: inherit; font-size: var(--texto-sm); font-weight: 600;
  cursor: pointer; transition: background-color var(--transicao);
}
.barra-acessibilidade button:hover { background: rgba(255, 255, 255, .18); }
.barra-acessibilidade button[aria-pressed="true"] {
  background: #fff; color: var(--teal-900); border-color: #fff;
}
/* O estado ativo não é dito só pela cor: o ✓ aparece para quem não distingue
   o contraste do botão pressionado. */
.barra-acessibilidade button[aria-pressed="true"]::before { content: "✓ "; }
.barra-acessibilidade a { color: #fff; }
:root[data-tema^="alto-contraste"] .barra-acessibilidade button {
  color: var(--ink); border-color: var(--linha);
}
:root[data-tema^="alto-contraste"] .barra-acessibilidade button[aria-pressed="true"] {
  background: var(--acento); color: #000;
}
:root[data-tema^="alto-contraste"] .barra-acessibilidade a { color: var(--teal-ink); }

/* --- botões --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: var(--alvo);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--raio-sm);
  border: 2px solid transparent;
  font-family: inherit; font-size: var(--texto-base); font-weight: 700;
  line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao),
              box-shadow var(--transicao), transform var(--transicao);
}
/* Resposta física ao toque: o botão afunda 1px ao ser pressionado. É o tipo
   de detalhe que ninguém nota quando existe e que faz a interface parecer
   morta quando falta. Cai inteiro sob `prefers-reduced-motion`. */
.btn:active { transform: translateY(1px); }
.btn-primario {
  background: var(--teal-900); color: #fff; box-shadow: var(--sombra-1);
}
.btn-primario:hover { background: #0a3f49; color: #fff; box-shadow: var(--sombra-2); }
.btn-secundario {
  background: var(--surface); color: var(--teal-ink); border-color: var(--teal-600);
}
.btn-secundario:hover {
  background: var(--acento-suave); color: var(--teal-900); box-shadow: var(--sombra-1);
}
.btn-fantasma { background: transparent; color: var(--teal-ink); border-color: var(--linha-forte); }
.btn-fantasma:hover { background: var(--surface-alt); border-color: var(--teal-600); }
.btn-pequeno { min-height: 38px; padding: var(--space-2) var(--space-4); font-size: var(--texto-sm); }
.btn-largo { width: 100%; }
.btn[disabled].btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* --- cartões e listas --- */

.cartao {
  background: var(--surface);
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-lg);
  padding: var(--space-6);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicao), transform var(--transicao),
              border-color var(--transicao);
}
/* Cartões empilhados no fluxo normal ganham respiro entre si. Dentro de uma
   grade, não: ali quem separa é o `gap`, e a margem empurrava o segundo
   cartão doze pixels para baixo do primeiro, desalinhando a fileira inteira. */
.cartao + .cartao { margin-top: var(--space-4); }
.grade > .cartao + .cartao,
.grade > * > .cartao + .cartao { margin-top: 0; }
.cartao h3, .cartao h2 { margin-top: 0; }
.cartao > :last-child { margin-bottom: 0; }

/* Só cartão que leva a algum lugar reage ao ponteiro. Elevar um cartão que
   não é clicável promete uma interação que não existe. */
.cartao-clicavel:hover {
  box-shadow: var(--sombra-3); transform: translateY(-2px);
  border-color: var(--linha-forte);
}

/* Grades com número **exato** de colunas, e não `auto-fit`. Com auto-fit, seis
   cartões viravam quatro mais dois, a jornada de nove virava 4+4+1 e as vagas
   3+1, e a última linha com um item solto é o que faz uma página parecer
   montada às pressas. Aqui a coluna cai de 3 para 2 e de 2 para 1 em pontos
   escolhidos. */
.grade { display: grid; gap: var(--space-5); }

.grade-2 { grid-template-columns: repeat(2, 1fr); }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .grade-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .grade-2, .grade-3 { grid-template-columns: 1fr; }
}

/* Conteúdo de altura variável dentro de um cartão: o rodapé desce para a base
   e os botões de uma fileira de cartões ficam alinhados entre si. */
.cartao-corpo { display: flex; flex-direction: column; height: 100%; }
.cartao-corpo > .cartao-rodape { margin-top: auto; padding-top: var(--space-4); }
.grade > .cartao { height: 100%; }

/* Por padrão os cartões de uma fileira têm a mesma altura, é o que alinha os
   botões entre eles. Num painel, porém, blocos de conteúdos diferentes
   esticados até a altura do maior deixam um vazio no meio do cartão curto:
   ali o certo é cada um terminar onde acaba.

   Precisa vir **depois** de `.grade > .cartao`: as duas regras têm a mesma
   especificidade, e num empate vence a última declarada. Antes disto a classe
   parecia não ter efeito nenhum. */
.grade-inicio { align-items: start; }
.grade-inicio > .cartao { height: auto; }
.lista-limpa { list-style: none; padding: 0; margin: 0; }
.lista-limpa li + li { margin-top: var(--space-3); }

/* --- chips de estado ---
   A cor reforça; quem informa é a palavra. Cada chip tem borda e ícone
   textual próprios, para continuar legível em tons de cinza. */

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--raio-sm);
  border: var(--largura-borda) solid var(--linha-forte);
  background: var(--surface-alt);
  color: var(--ink);
  font-size: var(--texto-sm); font-weight: 600;
  line-height: 1.4;
}
/* O ícone do chip é um caractere, e não um arquivo: sobrevive à impressão em
   preto e branco, à escala de cinza e ao leitor de tela, que o ignora, já
   que o estado também está escrito por extenso ao lado. */
.chip::before { font-weight: 700; }
.chip-ok { background: var(--ok-fundo); border-color: var(--ok); color: var(--ok); }
.chip-ok::before { content: "✓"; }
.chip-analise { background: var(--acento-suave); border-color: var(--teal-600); color: var(--teal-ink); }
.chip-analise::before { content: "◔"; }
.chip-atencao { background: var(--atencao-fundo); border-color: var(--atencao); color: var(--atencao); }
.chip-atencao::before { content: "!"; }
.chip-neutro::before { content: "•"; }
.chip-rascunho::before { content: "✎"; }
.chip-essencial {
  background: var(--atencao-fundo); border-color: var(--atencao); color: var(--atencao);
}
.chip-essencial::before { content: "★"; }

/* --- avisos --- */

.aviso {
  border: var(--largura-borda) solid var(--teal-600);
  border-left-width: 6px;
  background: var(--acento-suave);
  color: var(--ink);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--raio-md);
  margin-bottom: var(--space-5);
}
.aviso > :last-child { margin-bottom: 0; }
.aviso-ok { border-color: var(--ok); background: var(--ok-fundo); }
.aviso-atencao { border-color: var(--atencao); background: var(--atencao-fundo); }
.aviso-erro { border-color: var(--erro); background: var(--erro-fundo); }
.aviso-titulo { font-weight: 700; margin-bottom: var(--space-2); }

/* --- formulários --- */

fieldset {
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-lg);
  padding: var(--space-6);
  margin: 0 0 var(--space-6);
  background: var(--surface);
}
legend {
  font-family: var(--fonte-display);
  font-weight: 700; padding-inline: var(--space-3); color: var(--teal-900);
  font-size: var(--texto-lg); letter-spacing: -0.01em;
}

.campo { margin-bottom: var(--space-5); }
.campo label.rotulo {
  display: block; font-weight: 700; margin-bottom: var(--space-2);
}
.campo-opcional { font-weight: 400; color: var(--ink-suave); }
.campo-ajuda { font-size: var(--texto-sm); color: var(--ink-suave); margin: 0 0 var(--space-2); }
.campo input.campo select.campo textarea, input[type="text"], input[type="email"],
input[type="password"], input[type="date"], input[type="search"], input[type="tel"],
select, textarea {
  width: 100%;
  min-height: var(--alvo);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--linha-forte);
  border-radius: var(--raio-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit; font-size: var(--texto-base);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--teal-600); }
textarea { min-height: 7rem; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  border-color: var(--foco);
}
.campo-com-erro input, .campo-com-erro select, .campo-com-erro textarea {
  border-color: var(--erro);
  /* A borda vermelha não está sozinha: há o texto do erro abaixo e o ⚠ nele. */
  border-width: 3px;
}
.campo-erro { color: var(--erro); font-weight: 700; margin: var(--space-2) 0 0; }
.campo-erro::before { content: "⚠ "; }

.opcao {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-md);
  background: var(--surface);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao);
}
.opcao:hover { background: var(--acento-suave); border-color: var(--teal-600); }
.opcao input { width: 1.4rem; height: 1.4rem; min-height: 0; flex: none; margin-top: .15rem; accent-color: var(--teal-900); }
.opcao-texto { flex: 1; }
.opcao-titulo { font-weight: 700; display: block; }
.opcao:has(input:checked) { border-color: var(--teal-600); background: var(--acento-suave); }
.opcao:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }

.resumo-erros {
  border: 3px solid var(--erro);
  background: var(--erro-fundo);
  border-radius: var(--raio);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.resumo-erros h2 { color: var(--erro); font-size: var(--texto-lg); margin-top: 0; }

/* --- tabelas --- */

.tabela-envolvida { overflow-x: auto; }
table {
  border-collapse: collapse; width: 100%;
  background: var(--surface);
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-lg);
  overflow: hidden;
}
caption {
  text-align: left; font-weight: 600; padding-bottom: var(--space-3);
  color: var(--ink-suave); font-size: var(--texto-sm);
}
th, td {
  text-align: left; padding: var(--space-4);
  border-bottom: var(--largura-borda) solid var(--linha); vertical-align: top;
}
thead th {
  background: var(--surface-alt); color: var(--teal-900);
  font-size: var(--texto-sm); letter-spacing: 0.02em;
}
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--transicao); }
tbody tr:hover { background: var(--acento-suave); }
tbody th[scope="row"] { background: transparent; font-weight: 700; }

/* --- rodapé --- */

.rodape {
  margin-top: var(--space-20);
  background: var(--teal-900);
  color: #fff;
  padding-block: var(--space-12);
}
.rodape-topo {
  display: flex; flex-wrap: wrap; gap: var(--space-8);
  justify-content: space-between; align-items: flex-start;
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  margin-bottom: var(--space-6);
}
:root[data-tema^="alto-contraste"] .rodape-topo { border-bottom-color: var(--linha); }
.rodape .marca { color: #fff; margin: 0; }
.rodape .marca-simbolo { color: var(--acento); }
.rodape .marca strong { color: #fff; }
:root[data-tema^="alto-contraste"] .rodape .marca,
:root[data-tema^="alto-contraste"] .rodape .marca strong { color: var(--ink); }
.rodape-tese { max-width: 46ch; margin: var(--space-3) 0 0; opacity: .92; }
:root[data-tema^="alto-contraste"] .rodape {
  background: var(--surface); color: var(--ink); border-top: 2px solid var(--linha);
}
.rodape a { color: #fff; }
:root[data-tema^="alto-contraste"] .rodape a { color: var(--teal-ink); }
.rodape ul { display: grid; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.rodape nav h2 {
  font-size: var(--texto-sm); text-transform: uppercase; letter-spacing: 0.08em;
  color: #fff; opacity: .8; margin: 0 0 var(--space-3);
}
:root[data-tema^="alto-contraste"] .rodape nav h2 { color: var(--ink); }
.rodape li { max-width: none; }

/* --- mensagens do sistema --- */
.mensagens { margin-block: var(--space-5); }

/* --- impressão --- */
@media print {
  .topo, .rodape, .barra-acessibilidade, .pular-para-conteudo, .contexto,
  .nao-imprimir { display: none !important; }
  body { background: #fff; color: #000; }
  .cartao { border: 1px solid #000; box-shadow: none; }
}

/* No tema de alto contraste o símbolo herdava `--teal-600`, que lá é um azul
   quase preto: o desenho sumia dentro do fundo. Ele passa a usar a cor do
   texto da marca, e os arcos perdem a transparência: 35% de amarelo sobre
   preto é um marrom apagado, e a graduação que dá profundidade no tema claro
   vira ilegibilidade aqui. */
:root[data-tema^="alto-contraste"] .marca-simbolo,
:root[data-tema^="alto-contraste"] .rodape .marca-simbolo { color: var(--teal-900); }
:root[data-tema^="alto-contraste"] .marca-simbolo path { opacity: 1; }

/* ⚠️ O botão primário usa `--teal-900` como fundo e branco como texto. Nos
   temas de alto contraste `--teal-900` vira o amarelo (ou o azul-escuro) de
   destaque, e o texto branco por cima ficava **ilegível**, 1,07:1 no tema
   escuro. O texto passa a ser a cor do fundo da página, que é o oposto
   exato do destaque: 19,6:1 no escuro e 18,1:1 no claro.

   Descoberto numa captura com alto contraste e fonte a 150%, não pelo
   teste, que media o texto branco apenas no tema padrão. O teste foi
   corrigido junto (ver `test_contraste.py`). */
:root[data-tema^="alto-contraste"] .btn-primario {
  color: var(--bg);
  border-color: var(--teal-900);
}
:root[data-tema^="alto-contraste"] .btn-primario:hover {
  background: var(--bg); color: var(--teal-900);
}
:root[data-tema^="alto-contraste"] .abertura-tese .marca-pergunta { opacity: 1; }