/* =============================================================================
   VORH Brasil — sistema visual
   -----------------------------------------------------------------------------
   Referência: a ficha de registro militar. Papel, filetes, rótulos em versalete
   monoespaçado, dados alinhados. Nada flutua sem motivo; cartão só existe onde
   há um objeto real (uma pessoa, uma vaga). Verde-oliva e latão vêm do brasão.

   Ordem do arquivo:
     1. tokens
     2. reset e base
     3. tipografia
     4. layout
     5. componentes
     6. formulários
     7. tabelas e listas
     8. sobreposições (modal, drawer, toast)
     9. movimento
   ========================================================================== */

/* == 1. tokens ============================================================= */
:root {
  /* Cor — derivada do brasão, não de paleta genérica */
  --oliva:        #2f5d3f;
  --oliva-escuro: #1c3a28;
  --oliva-claro:  #e6ede7;
  --latao:        #b8862b;
  --latao-tinta:  #8a6420;   /* latão para texto: 4,8:1 sobre o papel */
  --latao-claro:  #f4ead3;

  --tinta:        #14201b;   /* texto principal, verde-preto */
  --grafite:      #576059;   /* texto secundário */
  --filete:       #d8d3c6;   /* linhas */
  --filete-forte: #b9b2a1;

  --papel:        #f4f2ec;   /* fundo da página */
  --papel-claro:  #fbfaf6;   /* superfícies */
  --branco:       #ffffff;

  --alerta:       #9a3412;
  --alerta-fundo: #fbeae4;
  --atencao:      #8a6100;
  --atencao-fundo:#fbf3dd;
  --sucesso:      #2f5d3f;
  --sucesso-fundo:#e6ede7;

  /* Tipografia */
  --fonte-titulo: "Bitter", Georgia, "Times New Roman", serif;
  --fonte-texto:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-dado:   "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-rotulo:  0.6875rem;                              /* 11px, versalete */
  --t-apoio:   0.8125rem;                              /* 13px */
  --t-corpo:   1rem;
  --t-guia:    1.125rem;
  --t-h3:      clamp(1.125rem, 0.5vw + 1rem,   1.375rem);
  --t-h2:      clamp(1.5rem,   1.2vw + 1.1rem, 2rem);
  --t-h1:      clamp(2rem,     2.6vw + 1.2rem, 3.25rem);

  /* Espaço — escala de 4 */
  --e1: 0.25rem;  --e2: 0.5rem;   --e3: 0.75rem;  --e4: 1rem;
  --e5: 1.5rem;   --e6: 2rem;     --e7: 3rem;     --e8: 4rem;   --e9: 6rem;

  /* Forma — cantos discretos; documento não é botão de app */
  --r-pequeno: 2px;
  --r-medio:   3px;
  --r-selo:    999px;

  --largura: 76rem;
  --medida:  68ch;

  /* Elevação: quase nada. Profundidade vem do filete, não da sombra. */
  --sombra-baixa: 0 1px 2px rgba(20, 32, 27, 0.06);
  --sombra-alta:  0 12px 32px rgba(20, 32, 27, 0.14);

  /* Movimento — durações por tipo de interação, não um valor único.
     Uma microinteração e a entrada de um drawer não devem durar o mesmo tempo. */
  --mov-micro:     140ms;   /* hover, foco, troca de estado */
  --mov-popover:   180ms;   /* dropdown, popover, tooltip */
  --mov-sobrepor:  240ms;   /* modal, gaveta */
  --mov-etapa:     300ms;   /* transição entre etapas de formulário */
  --mov-editorial: 480ms;   /* revelação de seção */

  /* Curvas: entrada desacelera, saída acelera. */
  --ease-padrao:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-entrada: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-saida:   cubic-bezier(0.7, 0, 0.84, 0);

  /* Nomes antigos mantidos enquanto os componentes migram. */
  --mov-rapido: var(--mov-micro);
  --mov-medio:  var(--mov-sobrepor);
  --mov-curva:  var(--ease-padrao);

  /* Camadas — z-index declarado, nunca número mágico espalhado pelo CSS. */
  --z-base:      1;
  --z-sticky:    40;
  --z-gaveta:    50;
  --z-modal:     60;
  --z-toast:     70;
  --z-pular:     100;
}

/* == 2. reset e base ======================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* O cabeçalho é fixo. Sem este recuo, âncoras — inclusive "Pular para o
     conteúdo" — param com o alvo escondido atrás dele. */
  scroll-padding-top: calc(var(--e8) + var(--e4));
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

:where(p, li) { overflow-wrap: break-word; }

/* Foco visível sempre — não removemos o outline em lugar nenhum. */
:focus-visible {
  outline: 2px solid var(--latao);
  outline-offset: 2px;
  border-radius: var(--r-pequeno);
}

::selection { background: var(--latao-claro); color: var(--tinta); }

.pular-para-conteudo {
  position: absolute;
  left: var(--e4);
  top: calc(-1 * var(--e9));
  z-index: 100;
  background: var(--oliva-escuro);
  color: var(--branco);
  padding: var(--e3) var(--e5);
  text-decoration: none;
  transition: top var(--mov-rapido) var(--mov-curva);
}
.pular-para-conteudo:focus { top: var(--e4); }

.apenas-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* == 3. tipografia ========================================================= */
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--e4);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-guia); }

p { margin: 0 0 var(--e4); max-width: var(--medida); }

a { color: var(--oliva); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--oliva-escuro); }

strong { font-weight: 600; }

/* O rótulo de ficha: versalete monoespaçado. Estrutura, não decoração —
   ele nomeia o campo que vem em seguida. */
.rotulo {
  display: block;
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-bottom: var(--e2);
}
.rotulo--latao { color: var(--latao-tinta); }

.guia {
  font-size: var(--t-guia);
  color: var(--grafite);
  max-width: var(--medida);
}

.apoio { font-size: var(--t-apoio); color: var(--grafite); }

.dado {
  font-family: var(--fonte-dado);
  font-variant-numeric: tabular-nums;
}

/* == 4. layout ============================================================= */
.faixa { width: min(var(--largura), 100% - var(--e6)); margin-inline: auto; }
.faixa--estreita { width: min(46rem, 100% - var(--e6)); margin-inline: auto; }

.secao { padding-block: var(--e8); }
.secao--compacta { padding-block: var(--e6); }
.secao + .secao { border-top: 1px solid var(--filete); }

.grade { display: grid; gap: var(--e5); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* Abertura de página: texto e ficha lado a lado, empilhados no celular. */
.abertura { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--e7); }
@media (max-width: 56rem) { .abertura { grid-template-columns: 1fr; gap: var(--e6); } }

/* Abertura de seção: rótulo, título e linha de apoio empilhados, todos na
   mesma margem. Substituiu `.secao-topo`, um grid que jogava o rótulo numa
   calha de 12rem e começava o título ~200px à direita — as duas metades do
   mesmo cabeçalho ficavam desalinhadas entre si.
   (Estas regras já se perderam uma vez: a remoção do `.secao-topo` foi feita
   com um regex cujo `.*?` atravessou blocos vizinhos e as engoliu junto, sem
   erro — CSS ausente não avisa. Se sumirem de novo, o sintoma é título sem
   respiro e os números da home empilhados sem filete.) */
.pagina-topo { margin-bottom: var(--e6); max-width: 62ch; }
.pagina-topo > h1,
.pagina-topo > h2 { margin-block: var(--e2) var(--e3); }
.pagina-topo > :last-child { margin-bottom: 0; }

/* -- Provas em número --
   Os três indicadores da abertura. Antes eram linhas de uma tabela, que
   comparava valores que não se comparam entre si e trazia o peso visual de
   uma grade de dados para o meio da página inicial. */
.provas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e5);
  margin: 0;
}
.prova {
  border-left: 3px solid var(--latao);
  padding-left: var(--e4);
}
.prova__numero {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h2);
  line-height: 1.1;
  color: var(--oliva-escuro);
}
.prova dd { margin: var(--e2) 0 0; display: grid; gap: var(--e1); }
.prova dd strong { font-size: var(--t-corpo); }
.provas__nota { margin-top: var(--e5); }

/* Lista com marcador em latão, sem bullet padrão. */
.lista-marcada { list-style: none; margin: 0 0 var(--e4); padding: 0; display: grid; gap: var(--e2); }
.lista-marcada li { padding-left: var(--e5); position: relative; }
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: var(--e3); height: 1px;
  background: var(--latao);
}

.pilha { display: flex; flex-direction: column; gap: var(--e4); }
.linha { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.linha--fim { justify-content: flex-end; }
.linha--entre { justify-content: space-between; }

/* == 5. componentes ======================================================== */

/* -- Cabeçalho do site -- */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papel-claro);
  border-bottom: 1px solid var(--filete);
}

/* O fundo do topo (#fbfaf6) e o da página (#f4f2ec) são quase iguais, e um
   filete de 1px não bastava para separar as duas camadas: ao rolar, o
   conteúdo parecia atravessar o cabeçalho em vez de passar por baixo dele.
   A sombra só aparece depois que a página sai do topo, então no repouso o
   cabeçalho continua discreto. */
.topo::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: var(--e3);
  background: linear-gradient(to bottom, rgb(28 26 22 / 0.08), transparent);
  opacity: 0;
  transition: opacity var(--mov-rapido) var(--mov-curva);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .topo::after {
    animation: topo-descolou linear both;
    animation-timeline: scroll();
    animation-range: 0 var(--e6);
  }
}
@keyframes topo-descolou {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.topo__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding-block: var(--e3);
}
.topo__marca { display: flex; align-items: center; gap: var(--e3); text-decoration: none; }
.topo__marca img { max-height: 40px; width: auto; }
.topo__marca span {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  color: var(--tinta);
  font-size: var(--t-corpo);
  line-height: 1.1;
}
.topo__marca small {
  display: block;
  font-family: var(--fonte-dado);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafite);
  font-weight: 400;
}

.navegacao { display: flex; align-items: center; gap: var(--e5); }
.navegacao a:not(.botao) {
  text-decoration: none;
  color: var(--tinta);
  font-size: var(--t-apoio);
  font-weight: 600;
  padding-block: var(--e2);
  border-bottom: 2px solid transparent;
}
.navegacao a:not(.botao):hover,
.navegacao a[aria-current="page"] { border-bottom-color: var(--latao); }

.abrir-menu {
  display: none;
  background: none;
  border: 1px solid var(--filete-forte);
  border-radius: var(--r-pequeno);
  padding: var(--e2) var(--e3);
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--tinta);
}

@media (max-width: 62rem) {
  .abrir-menu { display: inline-flex; align-items: center; gap: var(--e2); }
  .navegacao {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e3);
    background: var(--papel-claro);
    border-bottom: 1px solid var(--filete);
    padding: var(--e5) max(var(--e4), 50% - var(--largura) / 2) var(--e6);
  }
  .topo[data-menu="aberto"] .navegacao { display: flex; }
  .topo[data-menu="aberto"] { position: relative; }
  .navegacao .botao { justify-content: center; }
}

/* -- Botões -- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  font-family: var(--fonte-texto);
  font-size: var(--t-apoio);
  font-weight: 600;
  line-height: 1;
  padding: 0.75rem var(--e5);
  border: 1px solid transparent;
  border-radius: var(--r-medio);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mov-rapido) var(--mov-curva),
              border-color var(--mov-rapido) var(--mov-curva),
              color var(--mov-rapido) var(--mov-curva);
}
.botao--principal { background: var(--oliva-escuro); color: var(--branco); }
.botao--principal:hover { background: var(--oliva); color: var(--branco); }

.botao--contorno { background: transparent; color: var(--tinta); border-color: var(--filete-forte); }
.botao--contorno:hover { border-color: var(--oliva); color: var(--oliva); background: var(--oliva-claro); }

.botao--texto { background: none; padding-inline: 0; color: var(--oliva); }
.botao--texto:hover { color: var(--oliva-escuro); text-decoration: underline; }

/* Ação dentro de linha de tabela. O botão em tamanho cheio empurra a altura
   da linha e domina a leitura, que ali é dos dados, não da ação. Continua
   acima do alvo mínimo de toque por causa do padding vertical. */
.botao--miudo {
  padding: 0.3rem var(--e3);
  font-size: var(--t-apoio);
}

.botao--perigo { background: var(--alerta); color: var(--branco); }
.botao--perigo:hover { background: #7c2d12; }

.botao[disabled], .botao[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* -- Ficha: o componente que carrega a identidade do produto --
   Uma pessoa ou uma vaga é um registro. Filete superior em latão, rótulos na
   canaleta, dados alinhados. Aparece igual no site, no portal e no backoffice. */
.ficha {
  background: var(--papel-claro);
  border: 1px solid var(--filete);
  border-top: 3px solid var(--latao);
  border-radius: 0 0 var(--r-medio) var(--r-medio);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  transition: border-color var(--mov-rapido) var(--mov-curva);
  /* Item de grid e de flex nasce com `min-width: auto`, que é "não encolha
     abaixo do seu conteúdo". Uma tabela larga dentro da ficha então empurra a
     caixa para fora da coluna, e o desenho vaza por cima do vizinho em vez de
     se ajustar. `min-width: 0` devolve ao card o direito de encolher; quem
     não couber rola dentro do próprio conteúdo. */
  min-width: 0;
}

/* Numa fila de cartões, o conteúdo varia — um perfil tem cinco competências,
   o vizinho tem uma. Sem isto a ação de cada cartão para onde o texto acabou,
   e a linha de botões sai escalonada, como se cada cartão estivesse torto. O
   grid já iguala a altura das caixas; `margin-top: auto` empurra a ação para
   a base dessa altura. Vale só para cartão dentro de grade: a ficha usada
   como bloco de formulário não deve ter o botão descolado do último campo. */
.grade > .ficha > .botao:last-child,
.grade > .ficha > .linha:last-child { margin-top: auto; }
a.ficha, a.ficha:hover, .ficha__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.ficha__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}
.ficha__titulo a { text-decoration: none; color: inherit; }
.ficha__titulo a:hover { color: var(--oliva); text-decoration: underline; text-decoration-color: var(--latao); }
.ficha__id {
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
  letter-spacing: 0.1em;
  color: var(--grafite);
  white-space: nowrap;
}

/* Linhas de dado da ficha: rótulo à esquerda, valor à direita, filete entre elas */
.ficha__campos { display: grid; gap: 0; margin: 0; }
.ficha__campo {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--e3);
  padding-block: var(--e2);
  border-top: 1px solid var(--filete);
  align-items: baseline;
}
.ficha__campo dt {
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafite);
}
.ficha__campo dd { margin: 0; font-size: var(--t-apoio); }

@media (max-width: 30rem) {
  .ficha__campo { grid-template-columns: 1fr; gap: 0; }
}

/* -- Selos e etiquetas -- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem var(--e2);
  border: 1px solid var(--filete-forte);
  border-radius: var(--r-pequeno);
  color: var(--grafite);
  background: var(--branco);
  white-space: nowrap;
}
.selo--oliva   { background: var(--oliva-claro);   border-color: var(--oliva);   color: var(--oliva-escuro); }
.selo--latao   { background: var(--latao-claro);   border-color: var(--latao);   color: #6b4e14; }
.selo--alerta  { background: var(--alerta-fundo);  border-color: var(--alerta);  color: var(--alerta); }
.selo--atencao { background: var(--atencao-fundo); border-color: var(--atencao); color: var(--atencao); }

.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.etiqueta {
  font-size: var(--t-apoio);
  padding: 0.15rem var(--e2);
  background: var(--oliva-claro);
  color: var(--oliva-escuro);
  border-radius: var(--r-pequeno);
}

/* -- Percurso --
   Lista numerada usada só onde a ordem é informação: um processo que acontece
   nesta sequência. O número fica na canaleta, alinhado ao filete. */
.percurso { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.percurso > li {
  display: grid;
  grid-template-columns: minmax(0, 4rem) minmax(0, 1fr);
  gap: var(--e5);
  padding-block: var(--e5);
  border-top: 1px solid var(--filete);
}
.percurso > li:last-child { border-bottom: 1px solid var(--filete); }
.percurso__marca {
  font-family: var(--fonte-dado);
  font-size: var(--t-guia);
  font-weight: 500;
  color: var(--latao-tinta);
  letter-spacing: 0.05em;
}
/* O item tem três filhos — número, título e descrição — num grid de duas
   colunas. Sem esta regra o número ocupa a primeira célula, o título a
   segunda, e a descrição cai na linha de baixo dentro da coluna de 4rem,
   espremida a uma palavra por linha. Tudo que não é o número vive na segunda
   coluna. */
.percurso > li > :not(.percurso__marca) { grid-column: 2; }
@media (max-width: 40rem) {
  .percurso > li > :not(.percurso__marca) { grid-column: 1; }
}
.percurso h3 { margin-bottom: var(--e2); }
.percurso p { margin-bottom: 0; }

/* A canaleta de 4rem foi medida para números de etapa ("01"). O histórico
   profissional do talento põe um intervalo de datas na mesma marca
   ("03/2019 — 07/2023"), que não cabe e quebrava em quatro linhas. O
   modificador alarga a canaleta só onde a marca é data. */
.percurso--datas > li { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); }

@media (max-width: 40rem) {
  .percurso > li { grid-template-columns: 1fr; gap: var(--e2); }
  .percurso--datas > li { grid-template-columns: 1fr; }
}

/* -- Perguntas (details/summary nativo) --
   Sem JavaScript: o navegador já sabe abrir e fechar, e o teclado já funciona. */
.perguntas { border-top: 1px solid var(--filete); }
.perguntas details { border-bottom: 1px solid var(--filete); }
.perguntas summary {
  cursor: pointer;
  padding: var(--e4) var(--e5) var(--e4) 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-guia);
  font-weight: 600;
  list-style: none;
  position: relative;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: "+";
  position: absolute;
  right: 0; top: var(--e4);
  font-family: var(--fonte-dado);
  color: var(--latao-tinta);
  font-size: var(--t-guia);
}
.perguntas details[open] summary::after { content: "–"; }
.perguntas summary:hover { color: var(--oliva); }
.perguntas details > p { padding-bottom: var(--e4); margin-bottom: 0; }

/* -- Texto corrido de páginas legais -- */
.texto-legal h2 { margin-top: var(--e7); }
.texto-legal h3 { margin-top: var(--e5); }
.texto-legal ul { padding-left: var(--e5); display: grid; gap: var(--e2); margin-bottom: var(--e4); }

/* -- Avisos -- */
.aviso {
  display: flex;
  gap: var(--e3);
  padding: var(--e4);
  border-left: 3px solid var(--grafite);
  background: var(--branco);
  font-size: var(--t-apoio);
}
.aviso > :last-child { margin-bottom: 0; }
.aviso--sucesso { border-left-color: var(--sucesso); background: var(--sucesso-fundo); }
.aviso--alerta  { border-left-color: var(--alerta);  background: var(--alerta-fundo); }
.aviso--atencao { border-left-color: var(--atencao); background: var(--atencao-fundo); }

/* -- Estado vazio: convite para agir, nunca só "nada encontrado" -- */
.vazio {
  border: 1px dashed var(--filete-forte);
  border-radius: var(--r-medio);
  padding: var(--e7) var(--e5);
  text-align: center;
  background: var(--papel-claro);
}
.vazio h3 { margin-bottom: var(--e2); }
.vazio p { margin-inline: auto; }

/* -- Paginação -- */
.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  margin-top: var(--e6);
  padding-top: var(--e4);
  border-top: 1px solid var(--filete);
}
.paginacao__posicao {
  font-family: var(--fonte-dado);
  font-size: var(--t-apoio);
  color: var(--grafite);
}

/* -- Chips de filtro ativo --
   Mostram o que está filtrando agora e permitem tirar um critério por vez, sem
   voltar ao formulário. Cada um é um link: funciona sem JavaScript. */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e4);
}
.chips .rotulo { margin: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 0.2rem var(--e3);
  border: 1px solid var(--oliva);
  border-radius: var(--r-selo);
  background: var(--oliva-claro);
  color: var(--oliva-escuro);
  font-size: var(--t-apoio);
  text-decoration: none;
  transition: background var(--mov-micro) var(--ease-padrao);
}
.chip:hover { background: var(--branco); color: var(--alerta); border-color: var(--alerta); }

/* -- Avisos flutuantes (toast) --
   Empilham no canto, somem sozinhos, param de sumir sob o ponteiro. */
.avisos-flutuantes {
  position: fixed;
  inset: auto var(--e4) var(--e4) auto;
  z-index: var(--z-toast);
  display: grid;
  gap: var(--e2);
  width: min(24rem, calc(100vw - var(--e6)));
}
.toast {
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--sombra-alta);
  animation: entrar-do-lado var(--mov-sobrepor) var(--ease-entrada);
}
@keyframes entrar-do-lado {
  from { opacity: 0; transform: translateX(1rem); }
  to   { opacity: 1; transform: none; }
}

to   { background-position: -200% 0; }
}

/* -- Estado de requisição em voo --
   O bloco fica levemente apagado e ganha um filete que avança no topo. Sem
   spinner girando no meio da tela. */
.htmx-request#resultado-vagas,
.htmx-request#resultado-talentos {
  position: relative;
  opacity: 0.55;
  transition: opacity var(--mov-micro) var(--ease-padrao);
}
.htmx-request#resultado-vagas::before,
.htmx-request#resultado-talentos::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--latao), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: filete-avanca 900ms linear infinite;
}
@keyframes filete-avanca {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}

/* -- Cabeçalho após rolagem -- */
.topo[data-rolado] { box-shadow: 0 1px 0 var(--filete-forte), var(--sombra-baixa); }

/* -- Aviso de cookies --
   Discreto e ancorado ao canto; não bloqueia a leitura da página. */
.aviso-cookies {
  position: fixed;
  inset: auto var(--e4) var(--e4) auto;
  z-index: 50;
  width: min(28rem, calc(100vw - var(--e6)));
  background: var(--papel-claro);
  border: 1px solid var(--filete-forte);
  border-top: 3px solid var(--latao);
  border-radius: 0 0 var(--r-medio) var(--r-medio);
  padding: var(--e4);
  box-shadow: var(--sombra-alta);
}
.aviso-cookies p { margin-bottom: var(--e3); max-width: none; }

/* -- Rodapé -- */
.rodape {
  margin-top: var(--e9);
  border-top: 3px solid var(--oliva-escuro);
  background: var(--papel-claro);
  padding-block: var(--e7) var(--e5);
}
.rodape__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--e6);
}
.rodape__titulo {
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafite);
  font-weight: 500;
  margin-bottom: var(--e3);
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.rodape a { font-size: var(--t-apoio); text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  justify-content: space-between;
  margin-top: var(--e6);
  padding-top: var(--e4);
  border-top: 1px solid var(--filete);
  font-size: var(--t-apoio);
  color: var(--grafite);
}
.rodape__lema {
  font-family: var(--fonte-titulo);
  font-style: italic;
  color: var(--oliva);
}

/* == 6. formulários ======================================================== */
.campo { display: grid; gap: var(--e2); margin-bottom: var(--e4); }
.campo > label {
  font-size: var(--t-apoio);
  font-weight: 600;
}
.campo__ajuda { font-size: var(--t-apoio); color: var(--grafite); }
.campo__erro  { font-size: var(--t-apoio); color: var(--alerta); font-weight: 600; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="date"], input[type="number"],
select, textarea {
  width: 100%;
  font: inherit;
  font-size: var(--t-apoio);
  color: var(--tinta);
  background: var(--branco);
  border: 1px solid var(--filete-forte);
  border-radius: var(--r-pequeno);
  padding: 0.6rem var(--e3);
  transition: border-color var(--mov-rapido) var(--mov-curva);
}
input:hover, select:hover, textarea:hover { border-color: var(--grafite); }
input:focus, select:focus, textarea:focus { border-color: var(--oliva); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--alerta);
}
textarea { min-height: 8rem; resize: vertical; }
::placeholder { color: #8e948d; }

fieldset { border: 0; margin: 0 0 var(--e5); padding: 0; }
legend { padding: 0; margin-bottom: var(--e3); }

.campo__rotulo { font-size: var(--t-apoio); font-weight: 600; }
.campo__obrigatorio { color: var(--alerta); font-weight: 400; }
.campo--invalido > label { color: var(--alerta); }

/* Marcadores: caixas de seleção múltipla apresentadas como etiquetas.
   Continuam sendo <input type="checkbox"> — o teclado e o leitor de tela
   funcionam sem nenhum script. */
.marcadores { display: flex; flex-wrap: wrap; gap: var(--e2); }
/* .marcadores label cobre o CheckboxSelectMultiple padrão do Django, que
   não aceita classe por item sem widget customizado. */
.marcador, .marcadores label {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 0.35rem var(--e3);
  border: 1px solid var(--filete-forte);
  border-radius: var(--r-medio);
  background: var(--branco);
  font-size: var(--t-apoio);
  cursor: pointer;
  transition: border-color var(--mov-rapido) var(--mov-curva),
              background var(--mov-rapido) var(--mov-curva);
}
.marcador:hover, .marcadores label:hover { border-color: var(--oliva); }
.marcador input, .marcadores label input { accent-color: var(--oliva); margin: 0; }
.marcador:has(input:checked), .marcadores label:has(input:checked) { background: var(--oliva-claro); border-color: var(--oliva); }
.marcador:has(input:focus-visible), .marcadores label:has(input:focus-visible) { outline: 2px solid var(--latao); outline-offset: 2px; }
.marcador--linha { align-items: flex-start; width: 100%; padding: var(--e4); }
.marcador--linha input { margin-top: 0.2em; }

/* Etapas do formulário */
form[data-etapas] fieldset[data-etapa][hidden] { display: none; }
.acoes-etapas { margin-top: var(--e6); padding-top: var(--e5); border-top: 1px solid var(--filete); }
legend h2 { margin-bottom: var(--e2); }

/* Barra de filtros: horizontal no desktop, empilhada no celular */
.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--e3);
  align-items: start;
  padding: var(--e4);
  background: var(--papel-claro);
  border: 1px solid var(--filete);
  border-radius: var(--r-medio);
  margin-bottom: var(--e5);
}
/* Cada campo é uma pilha [rótulo, controle, ajuda]. Alinhar pelo fim fazia o
   **último** elemento encostar na linha de base — então um campo com texto de
   ajuda empurrava o próprio controle para cima, e a barra saía com um input
   fora de linha em relação aos vizinhos.
   Aqui os campos são ancorados pelo topo, com a faixa do rótulo em altura
   fixa: os controles começam todos na mesma altura, e a ajuda passa a pender
   abaixo sem deslocar ninguém. */
.filtros .campo {
  margin-bottom: 0;
  display: grid;
  grid-template-rows: 1.4rem auto auto;
}
.filtros__acoes { display: flex; gap: var(--e2); align-items: end; }

/* Etapas de formulário longo */
.etapas { display: flex; flex-wrap: wrap; gap: var(--e4); margin-bottom: var(--e6); padding: 0; list-style: none; }
.etapas li {
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafite);
  padding-top: var(--e2);
  border-top: 2px solid var(--filete);
  flex: 1 1 8rem;
}
.etapas li[aria-current="step"] { color: var(--oliva-escuro); border-top-color: var(--latao); font-weight: 600; }
.etapas li[data-concluida] { color: var(--oliva); border-top-color: var(--oliva); }

/* == 7. tabelas ============================================================ */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--filete); border-radius: var(--r-medio); }

table.tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--papel-claro);
  font-size: var(--t-apoio);
}
.tabela caption {
  text-align: left;
  padding: var(--e3) var(--e4);
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafite);
  border-bottom: 1px solid var(--filete);
}
.tabela th, .tabela td { padding: var(--e3) var(--e4); text-align: left; vertical-align: top; }
.tabela thead th {
  font-family: var(--fonte-dado);
  font-size: var(--t-rotulo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--grafite);
  border-bottom: 1px solid var(--filete-forte);
  white-space: nowrap;
}
.tabela tbody tr + tr td { border-top: 1px solid var(--filete); }
.tabela tbody tr:hover { background: var(--branco); }
.tabela td.numero { font-family: var(--fonte-dado); font-variant-numeric: tabular-nums; text-align: right; }

/* == 8. sobreposições ====================================================== */
dialog.modal {
  border: 1px solid var(--filete-forte);
  border-top: 3px solid var(--latao);
  border-radius: 0 0 var(--r-medio) var(--r-medio);
  padding: var(--e6);
  max-width: min(34rem, calc(100vw - var(--e6)));
  background: var(--papel-claro);
  color: var(--tinta);
  box-shadow: var(--sombra-alta);
}
dialog.modal::backdrop { background: rgba(20, 32, 27, 0.45); }
.modal__acoes { display: flex; justify-content: flex-end; gap: var(--e3); margin-top: var(--e5); }

dialog.gaveta {
  border: 0;
  border-left: 1px solid var(--filete-forte);
  margin: 0 0 0 auto;
  height: 100vh;
  max-height: 100vh;
  width: min(30rem, 100vw);
  max-width: 100vw;
  padding: var(--e6);
  background: var(--papel-claro);
  color: var(--tinta);
  overflow-y: auto;
}
dialog.gaveta::backdrop { background: rgba(20, 32, 27, 0.35); }

/* == 9. movimento ==========================================================
   Movimento com função: indicar carregamento, preservar contexto na troca de
   página e confirmar ação. Nada anima só para animar. */

@view-transition { navigation: auto; }

.htmx-swapping { opacity: 0.5; transition: opacity var(--mov-rapido) var(--mov-curva); }

/* -- Entrada de conteúdo trocado pelo HTMX --
   Filtrar o mural troca só o bloco de resultados. Sem transição, a lista nova
   aparece de estalo e não fica claro que ela mudou — o olho não acompanha o
   que não se move. Deslocamento curto: é confirmação de que a troca ocorreu,
   não animação de entrada. */
.htmx-added, .htmx-settling {
  animation: assentar var(--mov-etapa) var(--ease-entrada) both;
}
@keyframes assentar {
  from { opacity: 0; transform: translateY(0.375rem); }
  to   { opacity: 1; transform: none; }
}

/* -- Confirmação de ação --
   Aplicada por JavaScript ao elemento que acabou de mudar de estado: uma
   solicitação autorizada, uma vaga pausada. Marca o que mudou sem tirar a
   pessoa do lugar onde ela estava. */
.confirmado {
  animation: confirmar var(--mov-sobrepor) var(--ease-padrao);
}
@keyframes confirmar {
  0%   { background: var(--sucesso-fundo); }
  100% { background: transparent; }
}

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

/* == impressão ============================================================= */
@media print {
  .topo, .rodape, .filtros, .paginacao { display: none; }
  body { background: #fff; }
  .ficha { break-inside: avoid; border-color: #999; }
}