/* Componentes de tela: abertura, jornada, mapa de acessibilidade, medidores.
   Carregado em toda página junto com base.css: o protótipo tem poucas telas
   e quase todas usam estes blocos. */

/* --- abertura da home ---
   Duas colunas assimétricas: o argumento à esquerda, e à direita o próprio
   mapa de acessibilidade de uma vaga real. Mostrar o produto vale mais que
   descrevê-lo, e resolve de uma vez o vazio que havia ali. */

.abertura {
  background:
    radial-gradient(60rem 30rem at 12% -20%, var(--acento-suave), transparent 70%),
    var(--surface);
  border-bottom: var(--largura-borda) solid var(--linha);
  padding-block: var(--space-16) var(--space-12);
}
:root[data-tema^="alto-contraste"] .abertura { background: var(--surface); }
.abertura-grade {
  display: grid; gap: var(--space-12);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
@media (max-width: 960px) {
  .abertura-grade { grid-template-columns: 1fr; gap: var(--space-8); }
}
.abertura h1 { font-size: var(--texto-4xl); max-width: 16ch; }
.abertura .conduz { font-size: var(--texto-lg); max-width: 52ch; }

/* A tese fica num bloco com fundo próprio, e não num texto com barra lateral:
   é a frase que resume o projeto inteiro e precisa ler como citação. */
.abertura-tese {
  background: var(--teal-900);
  color: #fff;
  border-radius: var(--raio-xl);
  padding: var(--space-6) var(--space-7);
  margin: var(--space-8) 0;
  box-shadow: var(--sombra-2);
}
.abertura-tese p { margin: 0; max-width: none; }
.abertura-tese .marca-pergunta { display: block; opacity: .82; font-size: var(--texto-sm);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-2); }
:root[data-tema^="alto-contraste"] .abertura-tese {
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--linha);
}

/* A amostra do mapa, ao lado do argumento. */
.amostra {
  background: var(--surface);
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-3);
  overflow: hidden;
}
.amostra-topo {
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--largura-borda) solid var(--linha);
  background: var(--surface-alt);
}
.amostra-topo h2 { margin: 0 0 var(--space-1); font-size: var(--texto-lg); }
.amostra-corpo { padding: var(--space-5) var(--space-6) var(--space-6); }
.amostra-rotulo {
  font-size: var(--texto-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-suave);
  margin: var(--space-5) 0 var(--space-2);
}
.amostra-rotulo:first-child { margin-top: 0; }

/* --- números --- */

.numeros { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .numeros { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .numeros { grid-template-columns: 1fr; } }
.numero {
  background: var(--surface);
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-lg);
  padding: var(--space-6);
  box-shadow: var(--sombra-1);
}
.numero-valor {
  display: block; font-family: var(--fonte-display);
  font-size: var(--texto-3xl); font-weight: 700;
  color: var(--teal-900); line-height: 1; letter-spacing: -0.03em;
}
.numero-rotulo {
  display: block; font-size: var(--texto-sm); color: var(--ink-suave);
  margin-top: var(--space-3); max-width: 24ch;
}

/* --- jornada em 9 etapas ---
   Três por linha, exatas: com `auto-fit` a nona etapa ficava sozinha na
   última linha, e uma etapa órfã parece etapa esquecida. */

.jornada {
  list-style: none; padding: 0; margin: 0; counter-reset: etapa;
  display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .jornada { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .jornada { grid-template-columns: 1fr; } }
.jornada li {
  counter-increment: etapa;
  position: relative;
  background: var(--surface);
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-lg);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-12);
  max-width: none;
  box-shadow: var(--sombra-1);
}
/* O número da etapa é o próprio contador, desenhado como marcador, em vez de
   escrito à mão em cada item, onde qualquer reordenação deixaria a numeração
   errada sem ninguém notar. */
.jornada li::before {
  content: counter(etapa);
  position: absolute; left: var(--space-4); top: var(--space-5);
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--acento-suave);
  border: var(--largura-borda) solid var(--teal-600);
  color: var(--teal-900); font-weight: 700; font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
}
.jornada strong { display: block; color: var(--teal-900); margin-bottom: var(--space-1); }
.jornada span { color: var(--ink-suave); font-size: var(--texto-sm); }

/* --- cartão de vaga --- */

.vaga-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);
  display: flex; flex-direction: column; height: 100%;
  transition: box-shadow var(--transicao), transform var(--transicao),
              border-color var(--transicao);
}
.vaga-cartao:hover {
  box-shadow: var(--sombra-3); transform: translateY(-2px);
  border-color: var(--linha-forte);
}
.vaga-cartao h3 { margin: 0 0 var(--space-3); font-size: var(--texto-xl); }
.vaga-cartao h3 a { text-decoration: none; color: var(--teal-900); }
/* O link cobre o cartão inteiro, mas o nome acessível continua sendo só o
   título: `::after` não entra na árvore de acessibilidade. */
.vaga-cartao h3 a::after { content: ""; position: absolute; inset: 0; }
.vaga-cartao { position: relative; }
.vaga-cartao h3 a:hover { text-decoration: underline; }
.vaga-empresa { font-weight: 600; color: var(--ink); margin-bottom: var(--space-2); }

/* Metadados separados por ponto médio, gerado pelo CSS, escrever o separador
   no template faria o leitor de tela anunciar "ponto" entre cada item. */
.vaga-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  font-size: var(--texto-sm); color: var(--ink-suave); margin-bottom: var(--space-4);
}
.vaga-meta > span { display: inline-flex; align-items: center; gap: var(--space-3); }
/* O separador é só entre metadados. Um chip dentro da mesma linha é um
   rótulo com forma própria, e recebia um ponto solto à esquerda. */
.vaga-meta > span + span:not(.chip)::before { content: "·"; color: var(--linha-forte); }
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); }

/* --- página da vaga ---
   Conteúdo à esquerda, cartão de ação grudado à direita. Antes eram duas
   colunas de igual peso, e como o mapa é muito mais longo que a descrição,
   sobravam dois mil pixels de branco do lado esquerdo. */

.vaga-grade {
  display: grid; gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr) 21rem;
  align-items: start;
}
@media (max-width: 980px) { .vaga-grade { grid-template-columns: 1fr; } }
.vaga-lateral { position: sticky; top: 6rem; display: grid; gap: var(--space-4); }
@media (max-width: 980px) { .vaga-lateral { position: static; } }
.ficha { display: grid; gap: var(--space-4); margin: 0; }
.ficha > div { display: grid; gap: var(--space-1); }
.ficha dt {
  font-size: var(--texto-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-suave);
}
.ficha dd { margin: 0; font-weight: 600; }

/* --- mapa de acessibilidade --- */

.mapa { display: grid; gap: var(--space-4); }
.mapa-secao {
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-lg);
  background: var(--surface);
  padding: var(--space-6);
  box-shadow: var(--sombra-1);
}
.mapa-secao h3 {
  margin: 0 0 var(--space-4); font-size: var(--texto-lg);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
}
.mapa-secao h3 .conta {
  font-size: var(--texto-sm); font-weight: 600; color: var(--ink-suave);
  white-space: nowrap;
}
.mapa-itens {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) { .mapa-itens { grid-template-columns: 1fr; } }
.mapa-itens li {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--acento-suave);
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-md);
  font-size: var(--texto-sm);
  max-width: none;
}
/* A marca é caractere, não cor: sobrevive à impressão em preto e branco e a
   qualquer tipo de daltonismo. */
.mapa-itens li::before { content: "✓"; font-weight: 700; color: var(--ok); flex: none; }
.mapa-itens.ausentes li { background: var(--surface-alt); }
/* Círculo vazio contra o ✓ preenchido: a diferença entre "tem" e "não tem"
   continua visível em escala de cinza, e nenhum dos dois é um travessão. */
.mapa-itens.ausentes li::before { content: "○"; color: var(--ink-suave); }
.mapa-texto {
  margin: var(--space-4) 0 0; padding-top: var(--space-4);
  border-top: var(--largura-borda) solid var(--linha);
  color: var(--ink-suave); font-size: var(--texto-sm); max-width: none;
}

/* --- medidor de compatibilidade ---
   O número nunca aparece sozinho: vem com a palavra e com o detalhamento
   logo abaixo. Uma barra colorida sem texto não diz nada a quem não
   distingue a cor, e não diz a ninguém *por quê*. */

.medidor { margin: var(--space-4) 0; }
.medidor-topo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3); font-weight: 700;
}
.medidor-topo .valor { font-family: var(--fonte-display);
  font-size: var(--texto-xl); color: var(--teal-900);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.medidor-trilho {
  height: 12px;
  background: var(--surface-alt);
  border: var(--largura-borda) solid var(--linha-forte);
  border-radius: 999px;
  overflow: hidden;
  margin-top: var(--space-2);
}
.medidor-preenchido { height: 100%; background: var(--teal-600); border-radius: 999px; }
:root[data-tema^="alto-contraste"] .medidor-preenchido { background: var(--acento); }

.criterios { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: 0; }
.criterios li {
  display: flex; gap: var(--space-4); align-items: baseline; max-width: none;
  padding: var(--space-3) 0; border-bottom: var(--largura-borda) solid var(--linha);
}
.criterios li:last-child { border-bottom: 0; padding-bottom: 0; }
.criterios .peso {
  font-weight: 700; color: var(--teal-ink); white-space: nowrap;
  min-width: 4.5rem; font-size: var(--texto-sm);
}

/* --- linha do tempo da negociação --- */

.linha-tempo {
  list-style: none; padding: 0; margin: var(--space-5) 0 0;
  border-left: 2px solid var(--linha);
}
.linha-tempo li { position: relative; padding: 0 0 var(--space-6) var(--space-6); max-width: none; }
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo li::before {
  content: "";
  position: absolute; left: -7px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--teal-600);
}
.linha-tempo .autor { font-weight: 700; color: var(--teal-900); }
.linha-tempo .quando { font-size: var(--texto-sm); color: var(--ink-suave); margin-left: var(--space-2); }
.linha-tempo p { margin: var(--space-2) 0 0; }

/* --- selo de privacidade --- */

.selo-privado {
  border: 2px dashed var(--linha-forte);
  border-radius: var(--raio-lg);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-alt);
}
.selo-privado > :last-child { margin-bottom: 0; }
.selo-privado-titulo { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.selo-privado-titulo::before { content: "🔒"; }

/* --- estado vazio ---
   Uma frase solta no meio do branco parece tela quebrada. O estado vazio diz
   o que aconteceu e oferece o próximo passo. */

.vazio {
  border: 2px dashed var(--linha-forte);
  border-radius: var(--raio-xl);
  background: var(--surface);
  padding: var(--space-10) var(--space-8);
  text-align: center;
}
.vazio-titulo { font-weight: 700; color: var(--teal-900); font-size: var(--texto-lg);
  margin: 0 0 var(--space-2); }
.vazio p { margin-inline: auto; color: var(--ink-suave); }
.vazio .acoes { justify-content: center; }

/* --- documento do currículo --- */

.documento {
  background: #fff; color: #000;
  padding: var(--space-10);
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-2);
  max-width: 48rem;
}
.documento h1 { font-size: var(--texto-2xl); margin-bottom: var(--space-2); color: #0E4A55; }
.documento h2 {
  font-size: var(--texto-base); text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 1px solid #000; padding-bottom: var(--space-1);
  margin-top: var(--space-8); color: #0E4A55;
}

/* --- passos do formulário de vaga --- */

.passos { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0;
  margin: 0 0 var(--space-8); }
.passos li { max-width: none; }
.passos a, .passos span {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--largura-borda) solid var(--linha); border-radius: 999px;
  text-decoration: none; font-size: var(--texto-sm); font-weight: 600;
  color: var(--ink-suave); background: var(--surface);
}
.passos .feito { border-color: var(--ok); color: var(--ok); background: var(--ok-fundo); }
.passos .feito::before { content: "✓"; font-weight: 700; }
.passos .falta { border-color: var(--atencao); color: var(--atencao); background: var(--atencao-fundo); }
.passos .falta::before { content: "!"; font-weight: 700; }

/* --- cabeçalho de página --- */

.pagina-topo { margin-bottom: var(--space-8); }
.pagina-topo h1 { margin-bottom: var(--space-3); }
.voltar {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--texto-sm); font-weight: 600; text-decoration: none;
  margin-bottom: var(--space-4);
}
.voltar::before { content: "←"; }
.voltar:hover { text-decoration: underline; }

/* --- bloco "do que eu preciso" ---
   Os 35 itens abriam, cada um, três campos, marcados ou não. A tela tinha
   onze mil pixels de altura, e chegar ao botão de salvar exigia rolar por
   dezenas de formulários vazios. Agora o item fechado é só a caixa e o
   rótulo, em duas colunas; marcado, ele ocupa a linha inteira e revela os
   detalhes.

   Feito com `:has()`, sem JavaScript. Onde `:has()` não existir, tudo aparece
   aberto, que é exatamente o comportamento anterior, ou seja, degrada para
   algo que funciona. */

.apoios-lista {
  display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 760px) { .apoios-lista { grid-template-columns: 1fr; } }

.apoio {
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-lg);
  background: var(--surface);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--transicao), background-color var(--transicao),
              box-shadow var(--transicao);
}
.apoio:has(input[type="checkbox"]:checked) {
  grid-column: 1 / -1;
  border-color: var(--teal-600);
  background: var(--acento-suave);
  box-shadow: var(--sombra-1);
}
.apoio > .opcao {
  border: 0; background: none; margin: 0; padding: 0;
}
.apoio > .opcao:hover { background: none; }

.apoio-detalhes { display: none; }
.apoio:has(input[type="checkbox"]:checked) .apoio-detalhes {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--largura-borda) solid var(--linha);
}
@media (max-width: 680px) {
  .apoio:has(input[type="checkbox"]:checked) .apoio-detalhes { grid-template-columns: 1fr; }
}
.apoio-detalhes .campo { margin-bottom: 0; }
.apoio-detalhes .opcao { grid-column: 1 / -1; margin-bottom: 0; background: var(--surface); }

/* Sem suporte a :has(), o navegador ignora as regras acima e os detalhes
   ficam sempre visíveis: o comportamento antigo, que funciona. */
@supports not selector(:has(*)) {
  .apoio-detalhes { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
  .apoios-lista { grid-template-columns: 1fr; }
}

/* --- grade de itens do mapa, no formulário da empresa --- */
.itens-mapa {
  display: grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 760px) { .itens-mapa { grid-template-columns: 1fr; } }
.itens-mapa .opcao { margin-bottom: 0; }

/* --- lista de apoios de uma pessoa, na tela da empresa ---
   Não é a mesma coisa que a lista de recursos de uma vaga: aqui cada item
   pode trazer a marca de "essencial" e uma observação escrita pela pessoa.
   Com o layout em linha da `.mapa-itens`, os três disputavam a mesma largura
   e o rótulo quebrava letra a letra. */

.apoios-declarados {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 860px) { .apoios-declarados { grid-template-columns: 1fr; } }
.apoios-declarados li {
  display: grid; gap: var(--space-2);
  align-items: start;
  padding: var(--space-4);
  background: var(--acento-suave);
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-md);
  max-width: none;
}
.apoios-declarados .apoio-nome { font-weight: 600; }
.apoios-declarados .apoio-nome::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.apoios-declarados .apoio-obs {
  grid-column: 1 / -1;
  font-size: var(--texto-sm); color: var(--ink-suave);
  margin: 0; padding-top: var(--space-2);
  border-top: var(--largura-borda) solid var(--linha);
  max-width: none;
}
.apoios-declarados .chip { justify-self: start; }

/* --- portas de entrada da demonstração ---
   Catorze contas empilhadas numa coluna davam quatro mil pixels de rolagem
   na primeira tela que alguém vê ao conhecer a plataforma. Agrupadas por
   papel e em grade, a escolha cabe numa tela. */

.portas {
  display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr);
  margin-bottom: var(--space-10);
}
.portas-compactas { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .portas-compactas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) { .portas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .portas.portas-compactas { grid-template-columns: 1fr; } }

.porta {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--surface);
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-lg);
  padding: var(--space-5);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicao), transform var(--transicao),
              border-color var(--transicao);
}
.porta:hover {
  box-shadow: var(--sombra-3); transform: translateY(-2px);
  border-color: var(--linha-forte);
}
/* O corpo cresce e o formulário desce: os botões de uma fileira ficam
   alinhados entre si, independentemente do tamanho de cada texto. */
.porta-corpo { flex: 1; }
.porta h3 { margin: 0 0 var(--space-1); font-size: var(--texto-lg); }
.porta-local {
  font-size: var(--texto-sm); font-weight: 600; color: var(--teal-ink);
  margin: 0 0 var(--space-3);
}
.porta .pequeno { margin-bottom: var(--space-3); }
.porta .etiquetas { margin-top: 0; padding-top: 0; }
.porta-destaque { border-color: var(--teal-600); background: var(--acento-suave); }

/* --- seção do idealizador ---
   Retrato vertical à esquerda, texto à direita. A caixa da imagem tem a
   proporção declarada (3:5) para que o espaço esteja reservado antes de o
   arquivo pintar e a seção não salte quando ele chegar. */

.idealizador {
  display: grid; gap: var(--space-10);
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 860px) {
  .idealizador { grid-template-columns: 1fr; gap: var(--space-6); }
  .idealizador-retrato { max-width: 18rem; }
}
.idealizador-retrato {
  margin: 0;
  border-radius: var(--raio-xl);
  overflow: hidden;
  background: var(--surface-alt);
  border: var(--largura-borda) solid var(--linha);
  box-shadow: var(--sombra-2);
  aspect-ratio: 3 / 5;
}
.idealizador-retrato img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  display: block;
}
.idealizador-nome {
  font-family: var(--fonte-display);
  font-size: var(--texto-2xl); font-weight: 700; color: var(--teal-900);
  letter-spacing: -0.02em; margin: 0 0 var(--space-2);
}

/* --- listas editoriais ---
   Numeração e marcadores desenhados, em vez do bullet do navegador: a lista
   de princípios é conteúdo de leitura, não enumeração de sistema. */

.principios { list-style: none; padding: 0; margin: 0; counter-reset: principio; }
.principios li {
  counter-increment: principio;
  position: relative;
  padding: var(--space-5) 0 var(--space-5) var(--space-12);
  border-bottom: var(--largura-borda) solid var(--linha);
  max-width: none;
}
.principios li:last-child { border-bottom: 0; }
.principios li::before {
  content: counter(principio);
  position: absolute; left: 0; top: var(--space-5);
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: 50%;
  background: var(--acento-suave); color: var(--teal-900);
  border: var(--largura-borda) solid var(--teal-600);
  font-family: var(--fonte-display); font-weight: 700; font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
}
.principios strong { display: block; color: var(--teal-900); margin-bottom: var(--space-1); }

.nao-faz { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.nao-faz li {
  position: relative;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-10);
  background: var(--surface);
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-md);
  max-width: none;
}
.nao-faz li::before {
  content: "✕";
  position: absolute; left: var(--space-5); top: var(--space-4);
  font-weight: 700; color: var(--erro);
}

/* --- figura editorial --- */
.figura-editorial {
  margin: 0;
  border-radius: var(--raio-xl);
  overflow: hidden;
  border: var(--largura-borda) solid var(--linha);
  box-shadow: var(--sombra-3);
  background: var(--surface-alt);
}
.figura-editorial img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* --- moldura aninhada ---
   Um cartão importante não fica apoiado direto no fundo: ele mora dentro de
   uma bandeja, com um raio interno menor que o externo pela mesma medida do
   respiro. O olho lê as duas curvas como concêntricas, e a peça ganha
   materialidade sem precisar de sombra pesada.

   Reservada para as duas superfícies que carregam a tese: a amostra do mapa
   na abertura e a ficha de candidatura na página da vaga. Aplicada em tudo,
   vira maneirismo. */

.bandeja {
  padding: var(--space-2);
  background: var(--surface-alt);
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-3);
}
.bandeja > * {
  border-radius: calc(var(--raio-xl) - var(--space-2));
  box-shadow: var(--sombra-1), inset 0 1px 0 rgba(255, 255, 255, .6);
}
:root[data-tema^="alto-contraste"] .bandeja > * { box-shadow: none; }
.bandeja .amostra { border-width: var(--largura-borda); }

/* --- faixa com imagem de fundo ---
   A frase fica num bloco sólido por cima, não sobre a fotografia: texto sobre
   imagem depende do contraste do pixel que calhou de ficar atrás da letra, e
   isso não se mede nem se garante. Assim a imagem ambienta e o texto continua
   com contraste declarado. */

.faixa-imagem {
  position: relative;
  min-height: 22rem;
  display: grid; align-items: end;
  padding-block: var(--space-12);
  background: var(--teal-900);
  overflow: hidden;
}
.faixa-imagem > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .9;
}
.faixa-imagem > .container { position: relative; }
.faixa-imagem p {
  background: var(--surface);
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-3);
  padding: var(--space-6) var(--space-7);
  margin: 0; max-width: 46ch;
  font-size: var(--texto-lg);
  color: var(--ink);
}
/* Em alto contraste a fotografia sai: ela não tem contraste garantido com
   nada, e o tema existe justamente para quem precisa que tudo tenha. */
:root[data-tema^="alto-contraste"] .faixa-imagem > img { display: none; }
:root[data-tema^="alto-contraste"] .faixa-imagem { background: var(--surface); min-height: 0; }

/* Quatro números em três colunas deixavam um sozinho na última linha. Com
   exatamente quatro filhos, a grade vira 2x2 e fecha certo. A regra usa
   `:has()` para ler a quantidade, em vez de exigir uma classe em cada tela
   que alguém esqueceria de trocar ao acrescentar um indicador. */
.numeros:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
.numeros:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 520px) {
  .numeros:has(> :nth-child(4):last-child),
  .numeros:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
}

.paginacao {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  margin-top: var(--space-6);
}
/* O nome técnico da ação é identificador, não prosa: monoespaçado, para não
   ser lido como texto corrido nem quebrar no meio do ponto. */
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em;
  background: var(--surface-alt);
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-sm);
  padding: 0 var(--space-2);
  white-space: nowrap;
}

/* --- lista de vagas da organização ---
   Cada vaga era um cartão alto com três linhas de conteúdo, e a lista ocupava
   a tela inteira na vertical sem dizer mais por isso. Aqui cada uma é uma
   linha: identificação à esquerda, ações à direita. */

.lista-vagas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.lista-vagas li {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
  border: var(--largura-borda) solid var(--linha);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  max-width: none;
}
.lista-vagas h3 { margin: 0 0 var(--space-2); font-size: var(--texto-lg); }
.lista-vagas .vaga-meta { margin: 0; }
.lista-vagas-acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* O que falta para a vaga poder ir ao ar, dito na própria linha dela. */
.pendencia {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--atencao-fundo);
  border-left: 4px solid var(--atencao);
  border-radius: var(--raio-sm);
  color: var(--atencao); font-size: var(--texto-sm); font-weight: 600;
  max-width: 62ch;
}
.pendencia::before { content: "! "; font-weight: 700; }

/* --- listas de resumo dentro de cartão de painel --- */
.lista-sugestoes { list-style: none; padding: 0; margin: 0; display: grid; }
.lista-sugestoes li {
  padding: var(--space-4) 0;
  border-bottom: var(--largura-borda) solid var(--linha);
  max-width: none;
}
.lista-sugestoes li:first-child { padding-top: 0; }
.lista-sugestoes li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-sugestoes > li > a, .lista-sugestoes .pedido {
  font-weight: 700; color: var(--teal-900); display: block; margin-bottom: var(--space-2);
}
.lista-sugestoes .vaga-meta { margin: 0; }

/* --- escala de resposta ---
   Três opções curtas, lado a lado: a pessoa compara as três de uma vez, que
   é como uma escala se lê. Abaixo de 560px voltam a empilhar, porque aí a
   linha não cabe sem apertar o alvo de toque. */
.escala { padding: var(--space-5); }
.escala legend { font-size: var(--texto-base); }
.escala-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.escala-opcoes .opcao { margin-bottom: 0; }
@media (max-width: 560px) { .escala-opcoes { grid-template-columns: 1fr; } }