/* =====================================================================
   Portal de Vagas — Lojas 2001
   Tokens do guia de marca, iguais aos do Lista de Presentes e do Dashboard
   de Marketing, para os sistemas ficarem visualmente coerentes.
   Escrito MOBILE FIRST: as media queries só acrescentam.
   ===================================================================== */

:root {
  /* --- Marca (guia oficial) --- */
  --vermelho:     #EC3237;
  --verm-escuro:  #B12629;
  --verm-100:     #FBD6D7;
  --verm-300:     #F48487;
  --azul:         #006CB5;
  --azul-escuro:  #004A80;
  --azul-100:     #CCE2F0;
  --azul-200:     #99C4E1;
  --azul-300:     #66A7D3;
  --azul-400:     #3389C4;
  --azul-600:     #005188;
  --azul-700:     #00365B;

  /* Branco NA COR: o texto que fica em cima de azul, vermelho ou verde. E
     token, e nao `#fff` solto, porque e o par obrigatorio de toda cor forte —
     quem trocar a cor de baixo tem de conferir este de cima junto. */
  --sobre-cor: #FFFFFF;
  --cinza:     #EBEBEB;
  --bg:        #F5F6F8;
  --surface:   #FFFFFF;
  --border:    #E0E3E8;
  /* Linha entre itens de uma MESMA lista. Mais leve que --border de proposito:
     a borda desenha o limite do cartao, esta so separa irmaos dentro dele —
     usar a mesma espessura de cinza nos dois faz a lista parecer uma grade.
     Estava sendo usada em 4 lugares SEM existir: `var(--linha)` sem token
     definido nao vale nada, e a linha simplesmente nao aparecia. */
  --linha:     #EEF0F3;
  --text:      #1A1A1A;
  /* Os dois cinzas de texto são MEDIDOS, não escolhidos no olho. Sobre branco
     e sobre --bg (#F5F6F8), que é o fundo de toda tela do painel:
       --muted      6,9:1 no branco e 6,4:1 no --bg
       --muted-soft 5,1:1 no branco e 4,8:1 no --bg
     Os tons antigos (#6B7280 e #9CA3AF) davam 4,4:1 e 2,5:1 — o segundo
     reprovava em qualquer critério, e ele pinta .dica, .trilha e .kpi__nota,
     que são texto de 12 a 13px. */
  --muted:     #4E5A6B;
  --muted-soft:#656E7C;

  /* Avatar e foto de perfil. Cinza bem claro de propósito: o disco aparece em
     toda tela do painel e não pode competir com o conteúdo. O par
     texto/fundo abaixo dá 6.9:1 de contraste (AA com folga). */
  --avatar-bg:    #EDF0F4;
  --avatar-txt:   #445064;
  --avatar-borda: #DDE3EA;
  /* Texto claro SOBRE o azul da marca. O --avatar-borda estava fazendo
     este papel e reprovava: 4,26:1 em 12px. Este tom da 4,85:1. Cor de
     borda nao e cor de texto. */
  --sobre-azul-txt: #E9F1F9;

  --verde-ok:     #28A745;
  /* Verde neon: existe para o que fica SOBRE o video do hero. Os verdes de
     cima sao de interface (borda de card, etiqueta) e somem no meio de uma
     imagem em movimento. */
  --verde-neon:   #00E676;
  /* Escala do verde do card de vaga. O tom base e mais fechado que o
     --verde-ok de "deu certo": borda precisa de contraste com o branco. */
  --verde:         #1E8E4A;
  --verde-escuro:  #146634;
  --verde-300:     #7CC79B;
  --verde-100:     #D8F0E2;
  --verde-bg:     #E7F6EB;
  --amarelo-warn: #FFC107;
  --amarelo-bg:   #FFF6DE;

  /* --- Marcador afirmativo ---------------------------------------------
     O roxo NAO e enfeite: e a familia de cor dos marcadores de vaga
     afirmativa (PcD, mulheres, negros, LGBTQIA+, 40+). Estava solto no
     corpo da folha em seis tons diferentes, o que e o mesmo que nao estar
     no sistema — quem fosse mexer nao teria onde procurar. */
  --afirma:        #5B3FB0;   /* texto sobre --afirma-bg: 6,4:1 */
  --afirma-forte:  #4A2F99;   /* o mesmo, mais aceso: 8,7:1 */
  --afirma-bg:     #EFEAFB;
  --afirma-borda:  #C9B8F0;

  /* --- Dourado do aviso de atencao --------------------------------------
     O par que o --amarelo-bg pedia: amarelo claro nao carrega texto, e o
     texto escuro em cima dele precisava de nome. 5,5:1. */
  --dourado:       #8A5A08;
  --dourado-borda: #F4DFA6;
  --verde-borda:   #BCE5C7;

  /* Laranja para quando a cor PRECISA carregar informacao — fundo de contador,
     ponto de gravidade. O #FD7E14 que estava aqui dava 2,57:1 no branco: reprova
     tanto para texto (4,5:1) quanto para elemento grafico (3,0:1), e era ele
     que pintava o contador do sino com o numero em branco por cima. Este tom
     da 4,67:1 nos DOIS sentidos — serve de fundo sob texto branco e de tinta
     sobre fundo branco. */
  --laranja-escuro: #B85A00;

  /* Alvo mínimo de toque (WCAG 2.2, 2.5.8). Vale para dedo E para mouse:
     todo elemento clicável desta folha mede pelo menos isto de altura. */
  --alvo: 44px;
  /* Respiro interno do cartão. É token porque o rodapé grudento do currículo
     (.salvar-bloco) sangra até a borda com margem negativa deste mesmo valor —
     se os dois saírem de sincronia, o rodapé passa da borda e cria rolagem
     lateral. */
  --cartao-pad: 16px;

  /* Estes dois continuam com os mesmos nomes que a folha inteira ja usa, mas
     agora SAEM da escala derivada la embaixo. Mudar --raio-base reescala a
     interface toda; antes eram dois numeros soltos que ninguem ligava. */
  --raio:      var(--raio-lg);
  --raio-card: var(--raio-xl);
  --sombra:   0 1px 3px rgba(26,26,26,.07);
  --sombra-g: 0 10px 30px rgba(0,74,128,.16);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  --miolo:  1180px;
  --sidebar-larg: 264px;
  --sidebar-min:  72px;
  --topo-alt: 62px;

  --fonte: 'Mulish', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --fonte-titulo: 'Oswald', 'Arial Narrow', Arial, sans-serif;

  /* ====================================================================
     CAMADA SEMANTICA — no modelo do shadcn/ui, com os valores DA MARCA.
     ====================================================================
     A ideia que vale a pena copiar de la nao e a aparencia: e a disciplina
     do PAR. Toda superficie tem um `-txt` declarado junto, que e a cor do
     texto e do icone que ficam em cima dela. Quem trocar a cor de baixo e
     obrigado a olhar a de cima — que e exatamente o erro que a auditoria de
     contraste encontrou onze vezes nesta folha.

     Nome do papel, e nao nome da cor: `--azul-100` nao diz onde se usa;
     `--realce` diz. Os valores continuam sendo o azul e o vermelho do
     manual, e as fontes nao mudam.

     Equivalencia com o vocabulario do shadcn, para quem vier de la:
       --primaria    primary       --realce      accent
       --secundaria  secondary     --flutuante   popover
       --suave       muted         --destrutiva  destructive
       --campo       input         --anel        ring
     `card` e `background` ja existiam aqui como --surface e --bg.
  -------------------------------------------------------------------- */

  /* Acao de maior enfase e superficie de marca. 5,51:1 */
  --primaria:      var(--azul);
  --primaria-txt:  var(--sobre-cor);
  --primaria-hover: var(--azul-600);

  /* Acao preenchida de MENOR enfase — o botao que fica ao lado do primario
     sem competir com ele. 5,87:1 */
  --secundaria:     var(--cinza);
  --secundaria-txt: var(--muted);

  /* Superficie e texto de menor enfase: estado vazio, texto de apoio. 4,77:1 */
  --suave:      var(--bg);
  --suave-txt:  var(--muted-soft);

  /* REALCE e o papel que faltava: hover, foco e selecionado. Sem ele cada
     tela inventava o proprio cinza de destaque — havia --azul-100, --cinza e
     --bg fazendo o mesmo trabalho em lugares diferentes. 9,35:1 */
  --realce:      var(--azul-100);
  --realce-txt:  var(--azul-700);

  /* Superficie FLUTUANTE: painel do sino, menu de motivo, gaveta. Igual ao
     cartao hoje, mas com nome proprio — o dia em que a flutuante precisar de
     um branco levemente diferente, muda so aqui. 17,40:1 */
  --flutuante:      var(--surface);
  --flutuante-txt:  var(--text);

  /* Acao destrutiva. O vermelho de MARCA (#EC3237) da 4,14:1 com branco e
     reprova para texto de tamanho normal; este e o par que carrega palavra.
     O vermelho da marca continua na logo e nos detalhes de identidade. 6,61:1 */
  --destrutiva:      var(--verm-escuro);
  --destrutiva-txt:  var(--sobre-cor);

  /* Borda de CAMPO, separada da borda de cartao. A --border (#E0E3E8) da
     1,29:1 no branco: e bonita num cartao, mas num campo de formulario ela e
     o que diz "aqui se digita" — informacao, nao enfeite, e por isso precisa
     de 3:1 (WCAG 1.4.11). Este tom da 3,58:1. */
  --campo: #7E8899;

  /* Anel de foco. Um token, uma regra, todo elemento focavel. */
  --anel: var(--azul);

  /* Escala de raio DERIVADA de um valor. "Quero tudo um pouco menos redondo"
     passa a ser uma linha, e nao trinta. */
  --raio-base: 8px;
  --raio-sm: calc(var(--raio-base) * 0.6);
  --raio-md: calc(var(--raio-base) * 0.8);
  --raio-lg: var(--raio-base);
  --raio-xl: calc(var(--raio-base) * 1.5);
  --raio-full: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* REDE DE SEGURANÇA, NÃO CONSERTO. Todo estouro medido foi corrigido na
     causa (abas que quebram linha, min-width:0 nos itens de grade e de flex,
     e-mail que pode ser partido na ficha da equipe). Esta linha existe só para
     que um conteúdo novo e comprido não devolva a barra de rolagem lateral
     enquanto ninguém percebe.
     `clip` e não `hidden`: hidden cria um contexto de rolagem e mata o
     position:sticky do cabeçalho e do topo do painel. */
  overflow-x: clip;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  margin: 0 0 .5em;
  line-height: 1.15;
}
h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* O atributo hidden do HTML tem de vencer QUALQUER display do projeto. Sem
   esta linha, .btn{display:inline-flex} (declaração de autor) sobrescreve o
   [hidden]{display:none} do navegador e os botões "Voltar"/"Enviar" do pop-up
   de triagem apareciam todos ao mesmo tempo, na primeira pergunta. Vive aqui,
   junto do reset, para valer antes de todo o resto da folha. */
[hidden] { display: none !important; }

/* Rede de segurança contra vazamento lateral: mídia e blocos que o navegador
   dimensiona pelo conteúdo nunca passam da caixa que os contém. Não é o
   conserto de nada — cada estouro medido está corrigido na causa, mais
   abaixo —, é o que evita que um conteúdo novo estrague a tela inteira.
   O iframe fica DE FORA de propósito: o vídeo do hero é 100vw dentro de um
   .hero com overflow:hidden, e limitá-lo tiraria a cobertura sem impedir
   rolagem nenhuma. */
img, svg, video, canvas, table, pre { max-width: 100%; }
img { height: auto; display: block; }

/* Foco visível em TUDO que recebe foco. O azul da marca dá 5,5:1 sobre branco
   (o --azul-300 de antes dava 2,6:1 e sumia); sobre fundo azul o contorno
   vira branco, logo abaixo. */
:focus-visible {
  outline: 3px solid var(--anel);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible,
.barra-nav a:focus-visible,
.rodape-azul a:focus-visible,
.faixa-chamada a:focus-visible,
.vaga-card--talentos:focus-visible,
.abas a.ativo:focus-visible {
  outline-color: var(--sobre-cor);
  outline-offset: 3px;
}

.miolo { width: 100%; max-width: var(--miolo); margin: 0 auto; padding: 0 16px; }
.oculto { display: none !important; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* "Pular para o conteúdo" só serve se aparecer ao receber foco. Escondido o
   tempo todo, era um link que ninguém conseguia usar. */
a.so-leitor:focus {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  width: auto; height: auto; overflow: visible; clip: auto;
  display: inline-flex; align-items: center; min-height: var(--alvo);
  padding: 10px 18px;
  background: var(--surface); color: var(--azul-700);
  border: 2px solid var(--azul); border-radius: var(--raio);
  font-weight: 700; box-shadow: var(--sombra-g);
}

/* O alvo do "pular para o conteúdo" recebe foco por programa (tabindex="-1"),
   e um contorno em volta da tela inteira só assustaria. */
#conteudo:focus { outline: none; }

/* =====================================================================
   ALVO DE TOQUE — regra geral
   Caixa de marcar nua tem 13x13px: é o pior alvo que existe. Aqui ela cresce
   para 20px E o rótulo inteiro vira a área clicável, com 44px de altura.
   O :not([class]) poupa os rótulos que já têm desenho próprio
   (.escolha, .triagem__opcao, .prova-opcao, .opcao-cv), que são maiores.
   ===================================================================== */
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px; flex: none;
  accent-color: var(--azul); cursor: pointer;
}
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) { cursor: pointer; }
label:not([class]):has(> input[type="checkbox"]),
label:not([class]):has(> input[type="radio"]) {
  display: flex; align-items: center; gap: 10px;
  /* !important porque várias telas trazem min-height menor no atributo style,
     e alvo de toque não é assunto de página: é piso do portal. */
  min-height: var(--alvo) !important;
}

/* =====================================================================
   BOTÕES — 44px de altura mínima, alvo de toque confortável no celular
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--alvo); padding: 10px 20px;
  border: 1px solid transparent; border-radius: var(--raio);
  background: var(--primaria); color: var(--primaria-txt);
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.25;
  cursor: pointer; text-decoration: none;
  /* Rótulo longo quebra em duas linhas dentro do botão em vez de esticar a
     linha inteira: é assim que "Avisando por e-mail" para de empurrar a
     ficha da equipe para fora do cartão no celular. */
  max-width: 100%; text-align: center;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--primaria-hover); text-decoration: none; color: var(--primaria-txt); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn--vermelho { background: var(--destrutiva); color: var(--destrutiva-txt); }
.btn--vermelho:hover { background: var(--verm-300); color: var(--text); }
.btn--linha { background: transparent; color: var(--primaria); border-color: var(--azul-200); }
.btn--linha:hover { background: var(--realce); color: var(--realce-txt); }
.btn--claro { background: var(--surface); color: var(--azul); }
.btn--claro:hover { background: var(--realce); color: var(--realce-txt); }
.btn--perigo { background: transparent; color: var(--verm-escuro); border-color: var(--verm-300); }
.btn--perigo:hover { background: var(--verm-100); }
.btn--fantasma { background: transparent; color: var(--muted); }
.btn--fantasma:hover { background: var(--realce); color: var(--text); }
.btn--bloco { width: 100%; }
.btn--pequeno { min-height: 36px; padding: 6px 14px; font-size: 14px; }

/* =====================================================================
   FORMULÁRIOS
   ===================================================================== */
.campo { margin-bottom: var(--sp-4); }
.campo label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--muted); }
.dica { font-size: 13px; color: var(--muted-soft); margin-top: 4px; }

.entrada, select, textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="month"] {
  width: 100%; min-height: var(--alvo); padding: 10px 12px;
  /* --campo, e nao --border: a borda do CARTAO e enfeite, mas a borda do
     campo e o que diz "aqui se digita" — informacao, e precisa de 3:1. */
  border: 1px solid var(--campo); border-radius: var(--raio);
  background: var(--surface); color: var(--text);
  font-family: inherit;
  /* 16px evita o zoom automático do iOS ao focar o campo. Vale para TODO
     campo de texto, com ou sem a classe .entrada: quem esquece a classe não
     pode ganhar um campo que dá zoom no celular. */
  font-size: 16px;
  max-width: 100%;
}
textarea { min-height: 110px; resize: vertical; }
.entrada:focus, select:focus, textarea:focus {
  border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px rgba(0,108,181,.14);
}

/* =====================================================================
   AVISOS E ETIQUETAS
   ===================================================================== */
.aviso {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--raio);
  border: 1px solid var(--azul-200); background: var(--azul-100);
  color: var(--azul-700); font-size: 14px; margin-bottom: var(--sp-4);
}
.aviso--ok      { background: var(--verde-bg);   border-color: var(--verde-borda); color: var(--verde-escuro); }
.aviso--erro    { background: var(--verm-100);   border-color: var(--verm-300); color: var(--verm-escuro); }
.aviso--atencao { background: var(--amarelo-bg); border-color: var(--dourado-borda); color: var(--dourado); }

/* white-space normal, e não nowrap: a etiqueta às vezes é uma frase inteira
   ("3 acesso(s) · 128 candidato(s) na base") e, presa numa linha só, ela
   estourava o cartão no celular. Sem aperto a etiqueta continua em uma linha,
   porque a caixa é inline-flex e se ajusta ao conteúdo. */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 700; white-space: normal;
  background: var(--cinza); color: var(--muted);
  max-width: 100%;
}
.tag--aberta, .tag--andamento { background: var(--azul-100); color: var(--azul-600); }
.tag--ok, .tag--aprovada      { background: var(--verde-bg); color: var(--verde-escuro); }
.tag--atrasada, .tag--pendente{ background: var(--amarelo-bg); color: var(--dourado); }
.tag--erro, .tag--reprovada   { background: var(--verm-100); color: var(--verm-escuro); }
.tag--novo { background: var(--verm-escuro); color: var(--sobre-cor); }

/* Etiqueta com botão de remover (escopo do gestor). O botão cresce no celular
   até a etiqueta inteira dar 44px de altura — antes era um "×" de 12px, o
   alvo mais apertado do painel. */
.tag--removivel { padding-right: 4px; }
.tag--removivel button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; min-height: 26px; padding: 0;
  border: 0; border-radius: 50%; background: none;
  color: var(--vermelho); cursor: pointer;
}
.tag--removivel button:hover { background: var(--verm-100); }
@media (max-width: 767px) {
  /* No celular o "×" vira alvo cheio: remover escopo é ação destrutiva e
     errar o toque custa caro. */
  .tag--removivel { padding: 2px 2px 2px 14px; min-height: 48px; }
  .tag--removivel button { min-width: var(--alvo); min-height: var(--alvo); }
}

.aderencia { background: var(--verde-escuro); color: var(--sobre-cor); padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }

/* Profiler no padrão Sólides: E/C/P/A, até três círculos. */
.disc { display: inline-flex; gap: 4px; }
.disc span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--sobre-cor); font-size: 12px; font-weight: 700; }
.disc span.disc--E { background: var(--verm-escuro); }
.disc span.disc--C { background: var(--dourado); color: var(--sobre-cor); }
.disc span.disc--P { background: var(--verde-escuro); }
.disc span.disc--A { background: var(--azul); }

/* =====================================================================
   CARTÕES
   ===================================================================== */
.cartao {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio-card); box-shadow: var(--sombra);
  padding: var(--cartao-pad);
  /* Cartão é item de grade em .grade-2 e em .grade-vagas: sem min-width:0 ele
     nasce do tamanho do conteúdo e estica a coluna inteira. */
  min-width: 0;
}
.cartao + .cartao { margin-top: var(--sp-4); }
.cartao__topo {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-start; gap: 10px 12px; margin-bottom: var(--sp-4);
}
.cartao__topo > * { min-width: 0; }
.cartao__titulo { font-family: var(--fonte-titulo); font-size: 18px; margin: 0; }

/* =====================================================================
   SITE PÚBLICO — TOPO
   Duas faixas: cabeçalho branco com a marca e as ações, e barra azul de
   navegação. Ambas grudam ao rolar.
   ===================================================================== */
.topo-fixo { position: sticky; top: 0; z-index: 55; background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* Ações do cabeçalho: ícone à ESQUERDA do texto, na mesma linha.
   Entrar e Criar conta são atalhos, não a ação principal da página — por isso
   texto pequeno em peso normal e sem fundo. Quem chegou aqui vem ver vaga.
   Continua com 44px de altura para o dedo, mesmo sendo discreto. */
.cab-acao {
  position: relative; display: inline-flex; flex-direction: row;
  align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; min-width: 44px;
  color: var(--muted); text-decoration: none;
  font-family: var(--fonte); font-size: 13.5px; font-weight: 500;
  line-height: 1.2; text-transform: none; letter-spacing: 0;
  background: none; border: 0; border-radius: var(--raio);
  cursor: pointer; padding: 4px 8px;
  transition: color .15s, background .15s;
}
.cab-acao:hover { color: var(--realce-txt); background: var(--realce); text-decoration: none; }
.cab-acao svg { width: 19px; height: 19px; color: inherit; }
.cab-acao-txt { display: block; white-space: nowrap; }

/* =====================================================================
   SITE PÚBLICO — CABEÇALHO
   ===================================================================== */
.cab-site { background: var(--surface); padding: 10px 0; }
.cab-site-linha { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
/* min-width:0 no lugar de flex:none — em tela de 320px o logo em tamanho fixo
   empurrava as ações para fora e o body ganhava rolagem lateral. */
.logo-site {
  display: flex; align-items: center; min-height: var(--alvo);
  flex: 0 1 auto; min-width: 0;
}
.logo-site svg { height: 32px; width: auto; max-width: 100%; display: block; }
.logo-site:hover { text-decoration: none; }

/* Barra azul de navegação — some no celular e vira a gaveta. */
.barra-nav { background: var(--azul); display: none; }
.barra-nav-linha { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.barra-nav a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-family: var(--fonte-titulo); font-weight: 500; font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--sobre-cor); padding: 10px 15px;
}
.barra-nav a:hover, .barra-nav a.ativo { background: var(--azul-escuro); color: var(--sobre-cor); text-decoration: none; }
.barra-nav svg { width: 17px; height: 17px; flex: none; }

/* A área do candidato não tem hambúrguer nem gaveta: sem esta variante a
   barra azul sumia abaixo de 768px e o candidato ficava sem menu nenhum no
   celular. Ela QUEBRA LINHA — rolava de lado, e menu que rola de lado esconde
   metade dos itens de quem não descobre o gesto. Cinco itens cabem em duas
   linhas num aparelho de 360px com o texto encurtado logo abaixo. */
/* A quebra em linhas vale também para a barra do candidato no desktop. */
.barra-nav--cand .barra-nav-linha { flex-wrap: wrap; }
.barra-nav--cand a { flex: 0 1 auto; min-width: 0; }

.menu-site { display: none; gap: 22px; align-items: center; margin-left: auto; }
.menu-site a {
  display: inline-flex; align-items: center; min-height: var(--alvo);
  color: var(--muted); font-weight: 700; font-size: 15px;
}
.menu-site a:hover, .menu-site a.ativo { color: var(--azul); text-decoration: none; }

.cab-acoes { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }

.hamb-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--border); border-radius: var(--raio);
  background: var(--surface); cursor: pointer; color: var(--text);
}
.hamb-btn svg { width: 20px; height: 20px; }

/* Gaveta do menu público no celular */
.menu-movel {
  /* Absoluta dentro do .topo-fixo: acompanha a altura real do cabeçalho,
     que muda conforme a tira e a barra de navegação aparecem ou não. */
  position: absolute; top: 100%; left: 0; right: 0; z-index: 39;
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--sombra-g);
  transform: translateY(-120%);
  /* Fechada, a gaveta sai da tela E da ordem de tabulação: com só o transform
     ela continuava recebendo foco escondida atrás do cabeçalho. */
  visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
  padding: var(--sp-3) 16px var(--sp-4);
}
body.menu-site-aberto .menu-movel {
  transform: translateY(0);
  visibility: visible;
  transition: transform .22s ease, visibility 0s;
}
.menu-movel a {
  display: flex; align-items: center; min-height: var(--alvo);
  padding: 10px 4px; font-weight: 700;
  color: var(--text); border-bottom: 1px solid var(--border);
}
.menu-movel a:last-child { border-bottom: 0; }
.menu-movel a:hover { color: var(--azul); text-decoration: none; }
.menu-movel svg { flex: none; margin-left: 6px; }

/* =====================================================================
   HERO — mesma proporção do Lista de Presentes
   Cartão arredondado dentro do miolo (não sangra até a borda),
   altura mínima de 520px e conteúdo alinhado à esquerda.
   ===================================================================== */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--raio-card);
  /* Mais baixo no celular: 368px empurravam as vagas para fora da primeira
     tela. No desktop a altura cheia entra pela media query lá embaixo. */
  min-height: 300px;
  margin: var(--sp-4) 0 var(--sp-5);
  background: linear-gradient(115deg, var(--azul-700) 0%, var(--azul) 55%, var(--azul-400) 100%);
  display: flex; align-items: center;
}
.hero__video { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__video iframe {
  /* O iframe do YouTube não cobre a área por si só: é esticado para 16:9
     e centralizado, senão sobram tarjas nas laterais em telas altas. */
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;
  min-height: 100%; min-width: 177.77vh;
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
}
.hero__sombra { position: absolute; inset: 0; z-index: 1; background: rgba(0,54,91,.55); }
.hero__conteudo {
  position: relative; z-index: 2;
  /* Padding lateral PRÓPRIO: o .miolo de fora dá 16px na página, mas o texto
     fica em cima do vídeo/imagem e precisa de respiro contra a borda do
     cartão — sem isto o título encostava na esquerda no celular. */
  padding: var(--sp-5) 20px;
  max-width: 640px;
}
.hero h1 { font-size: 32px; color: var(--sobre-cor); margin-bottom: 10px; }
.hero p  { color: var(--avatar-bg); font-size: 16px; margin: 0 0 var(--sp-5); }
.hero__acoes { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* A faixa embaixo liga o número do hero aos cards de vaga logo abaixo. O tom
   é o neon, e não o verde de interface: aqui a linha disputa atenção com o
   VIDEO de fundo, onde o verde escuro simplesmente desaparecia. */
.hero__numero {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: var(--sp-5); color: var(--sobre-cor);
  padding-bottom: 8px; border-bottom: 3px solid var(--verde-neon);
}
.hero__numero strong { font-family: var(--fonte-titulo); font-size: 30px; line-height: 1; }
.hero__numero span { font-size: 13px; color: var(--sobre-azul-txt); text-transform: uppercase; letter-spacing: .06em; }

/* =====================================================================
   SEÇÕES E VAGAS
   ===================================================================== */
.secao { padding: var(--sp-6) 0; }
.secao--branca { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.secao__titulo { text-align: center; margin-bottom: var(--sp-5); }
.secao__titulo p { color: var(--muted); margin: 0; }

.grade-vagas { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }

/* Vaga usa o verde; o Banco de Talentos usa o azul da marca. Duas cores
   diferentes separam as duas naturezas de card sem precisar de rotulo.
   (A regra [hidden] que morava aqui subiu para o reset, no topo da folha.) */
.vaga-card {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--verde);
  border-radius: var(--raio-card);
  padding: var(--sp-5); box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.vaga-card:hover {
  border-color: var(--verde-300); border-top-color: var(--verde);
  transform: translateY(-2px);
  box-shadow: var(--sombra-g); text-decoration: none;
}
.vaga-card .tag--aberta { background: var(--verde-bg); color: var(--verde-escuro); }
.vaga-card__titulo { font-family: var(--fonte-titulo); font-size: 18px; color: var(--text); margin: 0; }
.vaga-card__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); align-items: center; }

/* Banco de talentos: cartão fixo, sempre presente na grade. */
.vaga-card--talentos {
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-700) 100%);
  border-color: var(--azul-700); border-top-color: var(--azul-200);
  color: var(--sobre-cor);
}
.vaga-card--talentos .vaga-card__titulo { color: var(--sobre-cor); }
.vaga-card--talentos p { color: var(--sobre-azul-txt); margin: 0; font-size: 14px; }
.vaga-card--talentos .tag { background: rgba(255,255,255,.18); color: var(--sobre-cor); }
.vaga-card--talentos:hover { border-color: var(--surface); border-top-color: var(--surface); }

/* =====================================================================
   TOPO PADRÃO DAS PÁGINAS INTERNAS
   Todas as telas do site usam o mesmo respiro entre o menu e o conteúdo.
   ===================================================================== */
.pagina-topo { padding: var(--sp-6) 16px var(--sp-4); }
.pagina-topo h1 { margin-bottom: 6px; }
.pagina-topo__sub,
/* 16 telas do painel usavam .painel__sub sem que ela existisse na folha: o
   paragrafo saia com o tamanho e a cor do corpo, diferente da mesma frase
   na area do candidato. */
.painel__sub { color: var(--muted); margin: 0; max-width: 78ch; }
.pagina-corpo { padding-bottom: var(--sp-7); }

/* =====================================================================
   BARRA DE FILTROS
   Empilhada no celular; em linha a partir do tablet. Empilhada no desktop
   vira uma coluna de campos largos que empurra o resultado para fora da
   primeira tela.
   ===================================================================== */
.filtros {
  display: grid; gap: var(--sp-3);
  grid-template-columns: 1fr;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio-card); box-shadow: var(--sombra);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}
/* Item de grade nasce com min-width:auto, que é o tamanho do CONTEÚDO: um
   <select> com opção longa, um e-mail ou um botão de rótulo comprido esticam
   a coluna e a grade inteira vaza da tela. Esta é a lista de TODA grade da
   folha — se nascer uma nova, ela entra aqui no mesmo dia. */
.filtros > *,
.form-grade > *,
.grade-2 > *,
.grade-vagas > *,
.vaga-grade > *,
.rodape-colunas > *,
.interesse > *,
.escolhas > *,
.graf-grade > *,
.graf-barras > *,
.blocos-cv > *,
.dupla-cv > *,
.triagem__opcoes > * { min-width: 0; }
.filtros__campo label {
  display: block; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-bottom: 5px;
}
.filtros__acao { display: flex; align-items: flex-end; }

/* =====================================================================
   PÁGINA DA VAGA
   ===================================================================== */
.vaga-topo { padding: var(--sp-6) 16px var(--sp-4); }
.trilha-site { font-size: 13px; margin: 0 0 10px; }
.vaga-selos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.vaga-grade {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
  padding-bottom: var(--sp-7);
}

/* No celular o resumo vem antes do texto: quem abre no telefone quer saber
   onde é e até quando dá tempo, não a descrição da função. */
.vaga-lateral { order: -1; }

.vaga-dados { margin: 0 0 var(--sp-4); }
.vaga-dados dt {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700; margin-top: 14px;
}
.vaga-dados dt:first-child { margin-top: 0; }
.vaga-dados dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.45; }
.vaga-codigo { font-family: ui-monospace, 'Courier New', monospace; color: var(--muted); font-size: 13px; }
.vaga-nota { font-size: 12.5px; color: var(--muted-soft); text-align: center; margin: 10px 0 0; }

.vaga-corpo .cartao h2 { font-size: 19px; margin-bottom: 12px; }
.vaga-corpo p { margin: 0 0 10px; color: var(--muted); }
.vaga-corpo p:last-child { margin-bottom: 0; }

/* Requisitos e benefícios vêm do banco como uma linha por item; viram
   lista de verdade em vez de bloco de texto corrido. */
.lista-marcada { margin: 0; padding: 0; list-style: none; }
.lista-marcada li { position: relative; padding-left: 24px; margin-bottom: 9px; color: var(--muted); }
.lista-marcada li:last-child { margin-bottom: 0; }
.lista-marcada li::before {
  content: ''; position: absolute; left: 4px; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho);
}
.lista-marcada--ok li::before { background: var(--verde-ok); }

.lista-vagas { list-style: none; margin: 0; padding: 0; }
.lista-vagas li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.lista-vagas li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-vagas span { color: var(--muted-soft); font-size: 13px; white-space: nowrap; }

/* =====================================================================
   RODAPÉ AZUL
   ===================================================================== */
.rodape-azul { background: var(--azul); color: var(--cinza); font-size: 13px; }
.rodape-azul a { color: var(--cinza); }
.rodape-azul a:hover { color: var(--sobre-cor); text-decoration: underline; }
.rodape-colunas { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; padding: var(--sp-6) 16px; }
.rodape-col { display: flex; flex-direction: column; gap: 8px; }
/* O rodape usava <h4> depois de um <h1>: salto de nivel em todas as 16
   paginas publicas. Virou <h2>, e o seletor passou a ser por CLASSE — o
   tamanho visual continua o mesmo, o que muda e a arvore do documento. */
.rodape-col .rodape-titulo {
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sobre-cor); margin: 0 0 4px;
}
.rodape-col span { display: block; }
/* Link de rodapé também é alvo de toque: eram 20px de altura, e é onde o
   candidato procura "Políticas" e "Área do candidato" com o polegar. */
.rodape-col a {
  display: flex; align-items: center; min-height: var(--alvo);
  overflow-wrap: anywhere;
}
.logo-rodape { background: var(--surface); border-radius: var(--raio-card); padding: 10px 14px; display: inline-block; width: fit-content; }
.logo-rodape svg { height: 38px; width: auto; display: block; }
.rodape-slogan {
  font-family: var(--fonte-titulo); font-weight: 500; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; margin-top: 10px; color: var(--sobre-azul-txt);
}

.rodape-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Seletor com o pai de propósito: `.rodape-col a { display:block }` tem
   especificidade maior que `.social-ico` sozinho e desmontava a
   centralização do ícone dentro do círculo. */
.rodape-social .social-ico {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: var(--sobre-cor);
  margin: 0; padding: 0; flex: none;
  transition: background .15s, color .15s, transform .15s;
}
.rodape-social .social-ico:hover { background: var(--surface); color: var(--azul); transform: translateY(-2px); }
.rodape-social .social-ico svg { width: 20px; height: 20px; display: block; }

.rodape-legal {
  border-top: 1px solid rgba(255,255,255,.25);
  text-align: center; padding: var(--sp-4) 0;
  font-size: 12px; color: var(--sobre-azul-txt);
  line-height: 2;
}
.rodape-legal a {
  display: inline-flex; align-items: center;
  min-height: var(--alvo); padding: 0 8px;
}


/* =====================================================================
   PÁGINAS INSTITUCIONAIS
   ===================================================================== */
.pagina-inst { max-width: 780px; padding: var(--sp-6) 16px var(--sp-7); }
.pagina-inst__topo { margin-bottom: var(--sp-5); }
.pagina-inst__intro { color: var(--muted); font-size: 16px; margin: 0; }
.pagina-inst h2 { font-size: 18px; margin-bottom: 8px; }
.pagina-inst__versao {
  text-align: center; color: var(--muted-soft);
  font-size: 12.5px; margin-top: var(--sp-5);
}

/* Faixa de chamada acima do rodapé */
.faixa-chamada { background: var(--azul-escuro); color: var(--sobre-cor); }
.faixa-chamada-linha {
  display: flex; flex-direction: column; gap: var(--sp-4);
  align-items: center; text-align: center;
  padding-top: 28px; padding-bottom: 28px;
}
.faixa-chamada span { font-weight: 700; font-size: 17px; }

/* =====================================================================
   PAINEL INTERNO
   ===================================================================== */
.painel { min-height: 100vh; }

.painel__topo {
  position: sticky; top: 0; z-index: 45;
  min-height: var(--topo-alt);
  display: flex; align-items: center; gap: 12px; padding: 6px 16px;
  background: var(--surface); border-bottom: 3px solid var(--azul);
}
/* Medido em 36x36px: é um link, e no celular era o menor alvo do cabeçalho.
   O disco continua com 36px — quem cresce é a área clicável em volta dele. */
.painel__usuario {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  min-width: 0; min-height: var(--alvo);
  padding: 4px 6px; border-radius: var(--raio);
}
/* "Olá, Fulano" no topo, em verde.
   Verde e não azul de propósito: o azul do portal é cor de navegação (barra,
   links, botão) e mais um azul no topo virava ruído. O verde aqui é o mesmo
   dos cards de vaga — a cor que o portal usa para "está tudo certo". */
.saudacao {
  margin: 0; min-width: 0;
  font-family: var(--fonte-titulo); font-size: 16px; line-height: 1.2;
  color: var(--verde); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.saudacao strong { font-weight: 700; }
/* No celular o topo tem hambúrguer, saudação e avatar; o nome inteiro não
   cabe, e é a saudação que encolhe — o avatar é alvo de toque. */
@media (max-width: 640px) { .saudacao { font-size: 14.5px; } }

/* No cabeçalho do site a saudação vem antes dos botões de ação. */
.cab-saudacao {
  margin: 0 4px 0 0; align-self: center;
  font-family: var(--fonte-titulo); font-size: 15px;
  color: var(--verde-escuro); font-weight: 600; white-space: nowrap;
}
@media (max-width: 720px) { .cab-saudacao { display: none; } }

.painel__usuario, .painel__usuario:hover { color: inherit; text-decoration: none; }
.painel__usuario:hover { background: var(--realce); }

/* Avatar em cinza bem claro, e não em azul: ele repete em toda tela do painel
   (topo, perfil, ficha do candidato) e um disco azul saturado disputava
   atenção com o conteúdo. As iniciais em chumbo dão 6.9:1 sobre o cinza —
   folgado para AA — sem trazer a cor da marca de volta. */
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--avatar-bg); color: var(--avatar-txt);
  border: 1px solid var(--avatar-borda);
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; flex: none;
}
.painel__usuario-info { display: none; line-height: 1.2; min-width: 0; }
.painel__usuario-info strong { display: block; font-size: 14px; }
.painel__usuario-info span { font-size: 12px; color: var(--muted); }
/* Nome comprido não pode empurrar a foto para fora do cabeçalho. */
.painel__usuario-info strong, .painel__usuario-info span {
  max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--sidebar-larg); max-width: 86vw;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .22s ease;
  overflow-y: auto;
  /* A gaveta é fixa e nunca sai do fluxo, então ela também nunca poderia
     alargar a página; o overscroll evita que rolar até o fim da gaveta
     comece a rolar a página atrás dela. */
  overscroll-behavior: contain;
}
body.menu-aberto .lateral { transform: translateX(0); }

/* Gaveta fechada no celular: fora da tela E fora da ordem de tabulação.
   Só o transform não bastava — o menu continuava recebendo foco, e quem usa
   teclado dava sete Tabs no vazio antes de chegar ao conteúdo.
   `visibility` sem transição, de propósito: transição de visibility com
   duração zero e atraso NÃO chega a trocar de valor no motor do Chrome
   (medido). Quem segura a gaveta visível durante o deslize de saída é a
   classe .saindo, que o painel.js tira ao fim da animação — e, com o
   JavaScript no ar, o `inert` já tirou a gaveta do Tab antes disso. */
@media (max-width: 1023px) {
  .lateral { visibility: hidden; }
  body.menu-aberto .lateral,
  .lateral.saindo { visibility: visible; }
  /* Trava a rolagem do fundo enquanto a gaveta está aberta. Em classe, e não
     no atributo style pelo JavaScript: assim ela não sobrescreve o
     overflow-x:clip do body nem deixa resto de estilo embutido ao fechar. */
  body.menu-aberto { overflow: hidden; }
}

.lateral__marca { padding: 12px 16px; border-bottom: 1px solid var(--border); min-height: var(--topo-alt); display: flex; align-items: center; }
/* A marca é um link para a Home do painel: o alvo é a área toda, não a altura
   do desenho (28px). */
.lateral__marca a { display: flex; align-items: center; min-height: var(--alvo); }
.lateral__marca svg { height: 28px; width: auto; }
.lateral__nav { padding: 10px 8px 20px; flex: 1; }
/* Perfil, "ver o site" e sair: ficam colados no fim da gaveta, separados do
   menu de trabalho por uma linha. */
.lateral__rodape { padding: 12px 8px; border-top: 1px solid var(--border); }

.lateral__grupo { position: relative; margin-bottom: 2px; }
.lateral__item {
  display: flex; align-items: center; gap: 11px;
  /* Media: 247x42px — dois pixels abaixo do mínimo, e é o item que a equipe
     mais toca no dia. */
  min-height: var(--alvo);
  padding: 10px 12px; border-radius: var(--raio);
  color: var(--muted); font-weight: 700; font-size: 14.5px;
  width: 100%; border: 0; background: none; cursor: pointer;
  font-family: inherit; text-align: left; line-height: 1.25;
}
.lateral__item:hover { background: var(--realce); color: var(--realce-txt); text-decoration: none; }
.lateral__item.ativo { background: var(--realce); color: var(--realce-txt); }
.lateral__item.ativo::before {
  content: ''; position: absolute; left: 0; width: 3px; height: 24px;
  background: var(--azul); border-radius: 0 3px 3px 0;
}
.lateral__rotulo { min-width: 0; }
.lateral__icone { width: 20px; flex: none; text-align: center; opacity: .85; }
.lateral__seta { margin-left: auto; transition: transform .2s; font-size: 11px; opacity: .6; }
.lateral__grupo.aberto .lateral__seta { transform: rotate(90deg); }

.lateral__sub { display: none; padding: 2px 0 6px 43px; }
.lateral__grupo.aberto .lateral__sub { display: block; }
.lateral__sub a {
  display: flex; align-items: center; min-height: 44px;
  padding: 6px 10px; border-radius: 8px; color: var(--muted); font-size: 14px;
}
.lateral__sub a:hover, .lateral__sub a.ativo { background: var(--realce); color: var(--realce-txt); text-decoration: none; }

.lateral__fundo {
  position: fixed; inset: 0; z-index: 55; background: rgba(0,54,91,.45);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
body.menu-aberto .lateral__fundo { opacity: 1; pointer-events: auto; }

/* 16px em vez de 14px: é o mesmo recuo do .miolo do site, então o conteúdo
   fica alinhado quando a pessoa passa do site para o painel. */
.painel__area { padding: var(--sp-4) 16px var(--sp-7); }
.painel__cabecalho { margin-bottom: var(--sp-4); }
.painel__cabecalho h1 { margin-bottom: 2px; }
.trilha { font-size: 13px; color: var(--muted-soft); }
.trilha a { color: var(--azul); }
.painel__acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--sp-3); }

/* =====================================================================
   ABAS — etapas do funil, seções de e-mail, blocos do currículo
   Eram uma fileira única com overflow-x:auto e white-space:nowrap: as sete
   etapas do funil somavam 1172px e rolavam de lado ATÉ em tela de 1440px.
   Agora são fichas que QUEBRAM LINHA. Sem nowrap, sem rolagem, em nenhuma
   largura. A borda de baixo continua separando as abas do conteúdo, mas quem
   marca a aba atual é o preenchimento azul — sublinhado por baixo de uma
   fileira que quebra em três linhas não marcaria nada.
   ===================================================================== */
.abas {
  display: flex; flex-wrap: wrap; gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
}
.abas a {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--alvo); max-width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted);
  font-weight: 700; font-size: 14px; line-height: 1.25;
}
.abas a:hover { border-color: var(--azul-200); background: var(--realce); color: var(--realce-txt); text-decoration: none; }
.abas a.ativo { background: var(--azul); border-color: var(--azul); color: var(--sobre-cor); }
.abas .contador { color: var(--muted-soft); font-weight: 600; }
/* Branco cheio, e não branco com transparência: sobre o azul da marca o
   branco dá 5,5:1 e o branco a 85% cai para 4,4:1, abaixo do mínimo. */
.abas a.ativo .contador { color: var(--sobre-cor); }

/* KPIs em flex: com grid, total que não é múltiplo das colunas deixa buraco. */
.kpis { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.kpi {
  flex: 1 1 140px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio-card);
  padding: 14px 16px; box-shadow: var(--sombra);
  border-top: 3px solid var(--azul);
}
.kpi--alerta { border-top-color: var(--amarelo-warn); }
.kpi--perigo { border-top-color: var(--vermelho); }
.kpi__rotulo { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi__valor  { font-family: var(--fonte-titulo); font-size: 28px; line-height: 1.1; margin-top: 4px; }
.kpi__nota   { font-size: 12px; color: var(--muted-soft); }

.barra-busca { display: flex; gap: 10px; margin-bottom: var(--sp-3); flex-wrap: wrap; }
.barra-busca .entrada { flex: 1 1 200px; }

/* Icone SVG dentro do item de menu: alinhado e sem encolher. */
.lateral__icone svg, .cab-acao svg, .barra-nav svg, .btn svg { flex: none; }
.lateral__icone { display: inline-flex; align-items: center; justify-content: center; }
.lateral__seta { display: inline-flex; align-items: center; }
/* A rotacao vive no wrapper (.lateral__seta). Girar o svg TAMBEM somava
   90+90 e a seta do grupo aberto apontava para tras. */
.lateral__seta svg { transition: transform .2s; }

/* Foto de perfil no lugar das iniciais. */
.avatar--foto { object-fit: cover; padding: 0; border: 1px solid var(--avatar-borda); background: var(--avatar-bg); }
.foto-perfil {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--avatar-borda); background: var(--avatar-bg);
}
.foto-perfil--vazia {
  display: grid; place-items: center;
  background: var(--avatar-bg); color: var(--avatar-txt);
  font-family: var(--fonte-titulo); font-size: 32px;
}

/* =====================================================================
   EQUIPE DA VAGA — a linha que estourava o cartão
   Medido: esta linha pedia 351px dentro de uma caixa de 312px, e os 375px
   que sobravam eram exatamente o cartão (351 + 24 de recuo) e a grade-2
   (375 + 1 da borda = 376). Um defeito só, três estouros na conta.
   A causa: item de flex nasce com min-width:auto, ou seja, o tamanho do
   conteúdo. O conteúdo é um e-mail — palavra sem espaço que o
   `overflow-wrap: break-word` do body até quebra na hora de pintar, mas NÃO
   encolhe na hora de medir. Só `anywhere` encolhe.
   Por isso: a linha quebra (flex-wrap), os dois lados podem encolher
   (min-width:0) e o e-mail pode ser partido (overflow-wrap:anywhere).
   ===================================================================== */
.linha-equipe {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 12px; padding: 10px 0; border-bottom: 1px solid var(--border);
}
.linha-equipe > * { min-width: 0; }
.linha-equipe > *:first-child { flex: 1 1 180px; overflow-wrap: anywhere; }
.linha-equipe:last-child { border-bottom: 0; }

/* Questao de prova: enunciado com as alternativas indentadas. */
.questao { padding: 14px 0; border-bottom: 1px solid var(--border); }
.questao:last-child { border-bottom: 0; }
.questao__alternativas { list-style: none; margin: 8px 0 0; padding: 0 0 0 18px; }
.questao__alternativas li { padding: 4px 0; color: var(--muted); font-size: 14px; }
.questao__alternativas li.correta { color: var(--verde-escuro); font-weight: 700; }

/* =====================================================================
   COMPLEMENTOS DO PAINEL
   ===================================================================== */
/* Botao do menu no celular — some no desktop, onde a barra fica fixa. */
.hamburguer {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--border); border-radius: var(--raio);
  background: var(--surface); cursor: pointer;
}
.hamburguer span { display: block; width: 18px; height: 2px; background: var(--text); position: relative; }
.hamburguer span::before, .hamburguer span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text);
}
.hamburguer span::before { top: -6px; }
.hamburguer span::after  { top: 6px; }

/* Formularios do painel: 1 coluna no celular, 2 no tablet, 3 no desktop. */
.form-grade { display: grid; gap: var(--sp-3) var(--sp-4); grid-template-columns: 1fr; }
.form-grade .campo { margin-bottom: 0; }
.campo--cheio { grid-column: 1 / -1; }

/* Form inline em celula de tabela: sem ele cada form vira bloco e quebra linha. */
form.inline { display: inline-block; margin: 0; }
.acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* =====================================================================
   TABELA → CARTÕES NO CELULAR
   A tabela não rola lateralmente: deixa de ser tabela.
   ===================================================================== */
.tabela { width: 100%; border-collapse: collapse; }
.tabela thead { display: none; }
.tabela tbody tr {
  display: block; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--raio-card);
  padding: 14px; margin-bottom: 12px; box-shadow: var(--sombra);
}
.tabela tbody td {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 5px 0; border: 0; font-size: 14px;
  /* E-mail e chave de modelo são palavras longas sem espaço: sem isto a
     linha estica o cartão e o body ganha rolagem lateral no celular. */
  min-width: 0; overflow-wrap: anywhere;
}
.tabela tbody td::before {
  content: attr(data-rotulo);
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; flex: none;
}
.tabela td.principal { display: block; padding-bottom: 10px; }
.tabela td.principal::before { display: none; }
.tabela td.principal a { font-family: var(--fonte-titulo); font-size: 16px; color: var(--text); }
.tabela td.principal a:hover { color: var(--azul); }

/* Estado vazio: sempre com título, explicação e — quando existe — a saída.
   Centralizado e estreito para não virar uma linha de texto de ponta a ponta. */
/* Estado vazio na superficie SUAVE: ele nao e um cartao (nao ha conteudo),
   e o fundo mais apagado ja diz isso antes de ler o texto. */
.vazio {
  text-align: center; padding: var(--sp-6) 18px;
  background: var(--suave); color: var(--suave-txt);
  border-radius: var(--raio-md);
}
.vazio h3 { color: var(--text); }
.vazio p { max-width: 52ch; margin-left: auto; margin-right: auto; }
.vazio .btn { margin-top: var(--sp-3); }

/* =====================================================================
   TABLET — a partir de 768px
   ===================================================================== */
@media (max-width: 767px) {
  /* Só o ícone: no celular o cabeçalho tem o hambúrguer, a marca e ainda duas
     ações — com legenda a linha não cabe em 320px. O rótulo continua no
     aria-label de cada link, então o leitor de tela não perde nada. */
  .cab-acao-txt { display: none; }
  .cab-acao { width: var(--alvo); padding: 0; gap: 0; }
  .cab-acao svg { width: 21px; height: 21px; }

  /* Botão pequeno é o que mais aparece dentro de tabela; no celular ele volta
     ao alvo de toque cheio. No desktop pode continuar menor: lá o alvo é a
     ponta do ponteiro, não a polpa do dedo. */
  .btn--pequeno { min-height: var(--alvo); }

  /* Abas mais estreitas para caber mais fichas por linha — as sete etapas do
     funil ocupam três linhas num aparelho de 390px, e nenhuma delas corta. */
  .abas { gap: 6px; padding-bottom: 10px; }
  .abas a { padding: 8px 12px; font-size: 13.5px; }

  /* Menu da área do candidato: cinco itens em duas linhas. Com o tamanho do
     desktop eles precisariam de três. */
  .barra-nav--sempre a { padding: 8px 10px; font-size: 11.5px; gap: 6px; }
  .barra-nav--sempre svg { width: 16px; height: 16px; }

  /* Link solto dentro de célula de tabela era o menor alvo do painel: em
     /painel/cargos são dezenas deles, um por cargo, com 21px de altura. */
  .tabela tbody td a:not(.btn) {
    display: inline-flex; align-items: center;
    min-height: var(--alvo);
  }
  .lista-vagas li { align-items: center; }
  .lista-vagas a { display: inline-flex; align-items: center; min-height: var(--alvo); }

  /* Trilha e migalhas: links de 16px de altura no meio de uma linha de texto. */
  .trilha a, .trilha-site a {
    display: inline-flex; align-items: center; min-height: var(--alvo);
  }

  /* Dois alvos colados erram tanto quanto um alvo pequeno. */
  .acoes-topo, .item-cv__acoes, .prova-convite { gap: 10px; }
}

@media (min-width: 768px) {
  h1 { font-size: 30px; }

  /* Cartão respira mais a partir do tablet. No celular, 24px de recuo dos dois
     lados comem 48 dos 358px úteis — quase um sétimo da tela em margem. */
  :root { --cartao-pad: var(--sp-5); }

  .menu-site { display: flex; }
  .hamb-btn { display: none; }
  .menu-movel { display: none; }
  .tira-zap { display: inline; }
  .tira-dir .tira-link-texto { display: inline; }

  .hero { min-height: 455px; }

  .filtros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }
  .form-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros__campo--largo { grid-column: 1 / -1; }
  .barra-nav { display: block; }
  .cab-site { padding: 14px 0; }
  .cab-site-linha { gap: 20px; }
  .cab-acoes { gap: 8px; }
  .logo-site svg { height: 52px; }
  .rodape-colunas { padding: var(--sp-6) 20px; }
  .hero h1 { font-size: 40px; }

  .grade-vagas { grid-template-columns: repeat(2, 1fr); }
  .rodape-colunas { grid-template-columns: repeat(2, 1fr); }
  .faixa-chamada-linha { flex-direction: row; justify-content: space-between; text-align: left; padding-top: 38px; padding-bottom: 38px; }
  .faixa-chamada span { font-size: 19px; }
  .painel__area { padding: var(--sp-5) var(--sp-5) var(--sp-7); }
  .painel__usuario-info { display: block; }

}

/* =====================================================================
   DESKTOP — a partir de 1024px
   ===================================================================== */
@media (min-width: 1024px) {
  .hero h1 { font-size: 46px; }

  .lateral { transform: translateX(0); }
  .lateral__fundo { display: none; }
  .hamburguer { display: none; }
  .painel__topo, .painel__area { margin-left: var(--sidebar-larg); }
  .painel__topo { padding: 0 var(--sp-5); }

  body.lateral-recolhida .lateral { width: var(--sidebar-min); }
  body.lateral-recolhida .lateral__rotulo,
  body.lateral-recolhida .lateral__seta,
  body.lateral-recolhida .lateral__sub { display: none; }
  body.lateral-recolhida .lateral__item { justify-content: center; padding: 12px 0; }
  body.lateral-recolhida .painel__topo,
  body.lateral-recolhida .painel__area { margin-left: var(--sidebar-min); }

  .grade-vagas { grid-template-columns: repeat(3, 1fr); }
  .rodape-colunas { grid-template-columns: 1.2fr 1fr 1fr; }
  /* O piso de 300px na coluna da direita não é gosto, é medida: em 1024px de
     tela, com a barra lateral de 264px, "2fr 1fr" deixava a coluna direita com
     227px — menos que o conteúdo mínimo do cartão da equipe (o <select> de
     incluir tem min-width:180px e a etiqueta de competência pede ~200px), e a
     página inteira voltava a vazar. Com o piso, a coluna da esquerda cede. */
  .grade-2 {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: var(--sp-4); align-items: start;
  }

  /* A .grade-2 serve a DOIS papeis, e so um deles quer colunas desiguais.
     Quando a esquerda e' o conteudo e a direita e' apoio (a equipe da vaga, o
     resumo do candidato), o 2fr/1fr esta certo: o peso e' diferente mesmo.
     Quando os dois lados sao GRAFICO, nao ha hierarquia entre eles — "Volume
     de candidaturas" nao vale mais que "Origem" — e a assimetria vira ruido:
     a rosca fica apertada num terco enquanto a barra sobra nos dois. Aqui as
     colunas sao iguais. */
  .grade-2--iguais { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Texto a esquerda, resumo a direita. A ordem no HTML e a do celular;
     aqui o posicionamento explicito inverte sem mexer na marcacao. */
  .form-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Busca ocupa o dobro dos selects: é o campo que mais recebe digitação. */
  .filtros { grid-template-columns: 2fr 1.2fr 1fr 1fr auto; }
  .filtros__campo--largo { grid-column: auto; }
  .filtros__acao .btn { width: auto; min-width: 120px; }

  .vaga-grade { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
  .vaga-corpo   { grid-column: 1; grid-row: 1; }
  .vaga-lateral { grid-column: 2; grid-row: 1; order: 0; }
  .vaga-resumo  { position: sticky; top: 170px; }
}

/* Quem pediu menos movimento no sistema operacional recebe as mesmas telas
   sem nenhuma transição — inclusive a gaveta, que passa a abrir e fechar de
   uma vez. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .lateral, .painel__topo, .cab-site, .barra-nav, .rodape-azul, .faixa-chamada, .btn { display: none !important; }
  .painel__area { margin: 0 !important; padding: 0 !important; }
}

/* Reaproveita o chevron para baixo como seta para cima: um desenho so. */
.gira-180 { transform: rotate(180deg); }

/* =====================================================================
   BANCO DE TALENTOS
   Linhas de interesse (area + cargo) e listas de escolha em caixa.
   Mobile first: uma coluna, alvo de toque de 44px, e so entao as colunas.
   ===================================================================== */
.interesses { display: grid; gap: var(--sp-3); }
.interesse {
  display: grid; gap: var(--sp-3); grid-template-columns: 1fr;
  padding: 12px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--raio-card);
}
.interesse .campo { margin-bottom: 0; }

.escolhas { display: grid; gap: 8px; grid-template-columns: 1fr; }

/* Dois niveis de classe de proposito: .campo label ja define display de
   bloco e peso 700 para os rotulos, e a caixa de escolha e um label. */
.escolhas .escolha {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; margin: 0; padding: 8px 12px;
  font-size: 14.5px; font-weight: 500; line-height: 1.3;
  color: var(--text); text-transform: none; letter-spacing: normal;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--raio);
  cursor: pointer;
}
.escolhas .escolha:hover { border-color: var(--azul-200); background: var(--realce); }
.escolhas .escolha:has(input:checked) { border-color: var(--azul); background: var(--azul-100); }
.escolhas .escolha input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--azul); }
.escolhas .escolha small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }

/* Uma frase inteira por linha nao cabe em coluna estreita. */
.escolhas--largas { grid-template-columns: 1fr; }

/* Etiquetas dentro de celula de tabela (interesses do candidato). */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

@media (min-width: 768px) {
  .interesse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .escolhas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .escolhas--largas { grid-template-columns: 1fr; }
}

@media (min-width: 1024px) {
  .escolhas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .escolhas--largas { grid-template-columns: 1fr; }
}

/* =====================================================================
   FORMULÁRIO DE TRIAGEM DA VAGA
   Sai do servidor como um cartão comum, com todas as perguntas — é a
   versão que funciona sem JavaScript. Com JavaScript, o site.js move esta
   mesma seção para .triagem-fundo e mostra uma pergunta por vez.
   ===================================================================== */
.triagem__enunciado {
  display: block;
  font-family: var(--fonte-titulo); font-size: 19px; line-height: 1.25;
  color: var(--text); margin: 0 0 6px; padding: 0;
}
.triagem__opcional { font-family: var(--fonte); font-size: 13px; font-weight: 400; color: var(--muted-soft); }
.triagem__ajuda { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
.triagem__intro { color: var(--muted); margin: 0 0 var(--sp-4); }

.triagem__grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.triagem__opcoes { display: grid; gap: 8px; }

/* Alvo de toque: a linha inteira marca a opção, não só o quadradinho. */
.triagem__opcao {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--raio);
  background: var(--surface); cursor: pointer; font-size: 15px;
}
.triagem__opcao:hover { border-color: var(--azul-200); background: var(--realce); }
.triagem__opcao input { width: 20px; height: 20px; flex: none; accent-color: var(--azul); }
.triagem__opcao input:checked + span { font-weight: 700; color: var(--azul-600); }
.triagem__opcao:has(input:checked) { border-color: var(--azul); background: var(--azul-100); }

.triagem__passo + .triagem__passo { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.triagem__passo textarea.entrada { min-height: 110px; }

.triagem__erro {
  display: flex; align-items: center; gap: 6px;
  color: var(--verm-escuro); font-size: 13.5px; font-weight: 700;
  margin: 10px 0 0;
}

.triagem__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-5); }
.triagem__acoes .btn { flex: 1 1 auto; }

/* Progresso: só aparece na versão pop-up, onde há uma pergunta por vez. */
.triagem__progresso { margin-bottom: var(--sp-4); }
.triagem__barra { height: 6px; border-radius: 3px; background: var(--cinza); overflow: hidden; }
.triagem__fita { height: 100%; background: var(--azul); border-radius: 3px; transition: width .2s ease; }
.triagem__contagem { font-size: 13px; color: var(--muted); margin: 6px 0 0; }

.triagem__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.triagem__titulo { font-size: 21px; margin: 0 0 var(--sp-3); }
.triagem__fechar {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: none; margin: -8px -8px 0 0;
  border: 0; border-radius: var(--raio); background: transparent;
  color: var(--muted); cursor: pointer;
}
.triagem__fechar:hover { background: var(--realce); color: var(--text); }

/* ---- modo pop-up (só com JavaScript) ---- */
.triagem-fundo {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 54, 91, .62);
  display: flex; align-items: center; justify-content: center;
}
.triagem-fundo[hidden] { display: none; }
body.triagem-aberta { overflow: hidden; }

/* No celular o pop-up é a tela inteira: meia tela em formulário de várias
   perguntas deixa o teclado cobrindo o botão de avançar. */
.triagem--modal {
  margin: 0; border-radius: 0; box-shadow: none;
  width: 100%; height: 100%; max-height: 100%;
  display: flex; flex-direction: column; padding: 0;
}
.triagem--modal .triagem__caixa {
  display: flex; flex-direction: column; min-height: 0; height: 100%;
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.triagem--modal .triagem__form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.triagem--modal .triagem__passos { flex: 1; }
.triagem--modal .triagem__passo + .triagem__passo { margin-top: 0; padding-top: 0; border-top: 0; }

@media (min-width: 768px) {
  .triagem-fundo { padding: 20px; }
  .triagem--modal {
    width: 100%; max-width: 620px; height: auto; max-height: calc(100vh - 40px);
    border-radius: var(--raio-card); box-shadow: var(--sombra-g);
  }
  .triagem--modal .triagem__caixa { padding: var(--sp-5); }
}

/* ---- editor de perguntas no painel ---- */
.triagem-opcao-linha { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.triagem-opcao-linha .entrada { flex: 1; min-width: 0; }

/* =====================================================================
   CURRÍCULO DO CANDIDATO
   Um bloco por tela: no celular a pessoa vê um assunto de cada vez, os
   campos ficam em coluna única e o botão de salvar acompanha a rolagem
   até o fim do bloco.
   ===================================================================== */

/* ---- barra de completude ---- */
.progresso { height: 10px; background: var(--cinza); border-radius: 999px; overflow: hidden; }
.progresso > span { display: block; height: 100%; background: var(--azul); border-radius: 999px; }
.progresso-linha { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-3); }
.progresso-linha .progresso { flex: 1; min-width: 0; }
.progresso-linha strong { font-family: var(--fonte-titulo); font-size: 16px; color: var(--azul); }

/* Lista do que falta: cada item é um link, porque o número sozinho não diz
   onde clicar — era esse o buraco da tela antiga. */
.faltando { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.faltando a {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--azul-200); border-radius: 999px;
  background: var(--azul-100); color: var(--azul-600);
  font-weight: 700; font-size: 13.5px;
}
.faltando a:hover { background: var(--azul-200); color: var(--azul-700); text-decoration: none; }

/* ---- índice dos blocos ---- */
.blocos-cv { display: grid; gap: 10px; grid-template-columns: 1fr; }
.bloco-cv {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--raio-card);
  background: var(--surface); color: var(--text);
}
.bloco-cv:hover { border-color: var(--azul-200); background: var(--realce); text-decoration: none; }
.bloco-cv__ico {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--cinza); color: var(--muted);
}
.bloco-cv--feito .bloco-cv__ico { background: var(--verde-bg); color: var(--verde-escuro); }
.bloco-cv__texto { min-width: 0; }
.bloco-cv__texto strong { display: block; font-size: 15px; }
.bloco-cv__texto span { display: block; font-size: 13px; color: var(--muted); }
.bloco-cv__estado { margin-left: auto; flex: none; color: var(--muted-soft); }
.bloco-cv--feito .bloco-cv__estado { color: var(--verde-ok); }

/* ---- faixa de navegação entre blocos ---- */
.abas--cv a { display: inline-flex; align-items: center; gap: 7px; }
.abas--cv .aba-feito { display: inline-flex; color: var(--verde-ok); flex: none; }
.abas--cv svg { flex: none; }
/* Sobre a ficha azul, o verde do "bloco preenchido" some. */
.abas--cv a.ativo .aba-feito { color: var(--sobre-cor); }

/* ---- formulário do bloco ---- */
.dupla-cv { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }

.campo .opcao-cv {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; margin-bottom: 0;
  font-weight: 600; font-size: 15px; color: var(--text); cursor: pointer;
}
.campo .opcao-cv input { width: 20px; height: 20px; flex: none; margin: 0; }

/* Botão de salvar colado no fim do bloco: no celular ele acompanha a rolagem
   para não obrigar a percorrer o formulário inteiro de volta. */
.salvar-bloco {
  position: sticky; bottom: 0; z-index: 4;
  /* A margem negativa TEM de ser o recuo do cartão. Com número fixo, o dia em
     que o cartão mudasse de recuo este rodapé passaria da borda e a página
     ganharia rolagem lateral. */
  margin: var(--sp-4) calc(var(--cartao-pad) * -1) calc(var(--cartao-pad) * -1);
  padding: var(--sp-3) var(--cartao-pad);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--raio-card) var(--raio-card);
}

/* ---- itens de lista (experiência, formação, curso, idioma) ---- */
.item-cv { padding: 14px 0; border-bottom: 1px solid var(--border); }
.item-cv:first-of-type { padding-top: 0; }
.item-cv:last-child { border-bottom: 0; padding-bottom: 0; }
.item-cv__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.item-cv__titulo { font-family: var(--fonte-titulo); font-size: 16px; margin: 0; }
.item-cv__meta { color: var(--muted); font-size: 13.5px; margin: 3px 0 0; }
/* O texto foi digitado com quebras de linha; sem isto ele vira um parágrafo só. */
.item-cv__texto { color: var(--muted); font-size: 14px; margin: 8px 0 0; white-space: pre-line; }
.item-cv__acoes { display: flex; gap: 8px; flex: none; }
.item-cv__acoes .btn { min-height: 44px; }

/* ---- competências: etiqueta com nível e remover ---- */
.competencias-cv { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* O chip cresce de 44 para 48px porque o botão de remover passou a ocupar os
   44px inteiros: 44 do botão + 2 de folga em cima e embaixo. */
.competencia-cv {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-height: 48px; max-width: 100%; padding: 2px 2px 2px 14px;
  border: 1px solid var(--azul-200); border-radius: 999px; background: var(--azul-100);
}
.competencia-cv strong { font-size: 14px; color: var(--azul-700); }
.competencia-cv > span { font-size: 12.5px; color: var(--azul-600); }
.competencia-cv__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--alvo); height: var(--alvo); flex: none; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--vermelho); cursor: pointer;
}
.competencia-cv__x:hover { background: var(--verm-100); }

/* ---- currículo em PDF ---- */
.arquivo-cv {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px; border: 1px solid var(--border); border-radius: var(--raio-card);
  background: var(--bg);
}
.arquivo-cv__ico { color: var(--vermelho); flex: none; }
.arquivo-cv__texto { flex: 1 1 180px; min-width: 0; }
.arquivo-cv__texto strong { display: block; font-size: 15px; word-break: break-word; }
.arquivo-cv__texto span { display: block; font-size: 13px; color: var(--muted); }

/* ---- ida e volta entre blocos ---- */
.passos-cv { display: flex; justify-content: space-between; gap: 10px; margin-top: var(--sp-4); }
.passos-cv .btn { min-height: 44px; }

@media (min-width: 768px) {
  .blocos-cv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .salvar-bloco { position: static; }
  .salvar-bloco .btn--bloco { width: auto; min-width: 240px; }
  .item-cv__acoes .btn { min-height: 36px; }
}

/* =====================================================================
   PROVAS
   Mobile primeiro: alvo de toque de 44px na alternativa, porque a prova é
   respondida no celular e errar a alternativa por um dedo grande custa nota.
   ===================================================================== */

/* Linha de prova pendente na área do candidato. */
.prova-linha {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.prova-linha:last-of-type { border-bottom: 0; }
.prova-linha__texto { flex: 1 1 220px; min-width: 0; }
.prova-linha__acao  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Topo da tela de resposta: barra de progresso e relógio lado a lado. */
.prova-topo {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.prova-topo .progresso { flex: 1 1 180px; }
.prova-relogio {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 14px;
  color: var(--azul-600); background: var(--azul-100);
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
/* Últimos minutos: o vermelho da marca, sem piscar (distrai quem escreve). */
.prova-relogio.acabando { background: var(--verm-100); color: var(--verm-escuro); }

.prova-enunciado {
  display: block; padding: 0; margin: 0 0 var(--sp-4);
  font-family: var(--fonte-titulo); font-size: 20px; font-weight: 500;
  line-height: 1.35; color: var(--text);
}

.prova-opcao {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: var(--raio);
  background: var(--surface); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.prova-opcao:hover { border-color: var(--azul-300); }
.prova-opcao:has(input:checked) { border-color: var(--azul); background: var(--azul-100); }
.prova-opcao:focus-within { outline: 2px solid var(--azul); outline-offset: 2px; }
.prova-opcao input { width: 20px; height: 20px; flex: none; accent-color: var(--azul); }
.prova-opcao__letra {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--cinza); color: var(--muted);
  font-family: var(--fonte-titulo); font-size: 13px; font-weight: 600;
}
.prova-opcao:has(input:checked) .prova-opcao__letra { background: var(--azul); color: var(--sobre-cor); }
.prova-opcao__texto { flex: 1; line-height: 1.4; }

/* "Avançar" vem antes na marcação para responder ao Enter; aqui o voltar
   assume o lugar da esquerda, que é onde a pessoa procura por ele. */
.prova-navega { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--sp-5); }
.prova-navega__segue { order: 2; flex: 1 1 180px; }
.prova-navega__volta { order: 1; }

/* Bloco "Provas desta vaga", no painel. */
.prova-bloco { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.prova-bloco:last-child { border-bottom: 0; padding-bottom: 0; }
.prova-bloco__topo {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.prova-convite {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: var(--sp-3);
}

/* Resposta dissertativa na tela de correção: bloco citado, não campo. */
.correcao-resposta {
  margin: 10px 0; padding: 12px 14px;
  background: var(--bg); border-left: 3px solid var(--azul-200);
  border-radius: 0 var(--raio) var(--raio) 0;
  color: var(--text); line-height: 1.5; white-space: normal;
}

/* =====================================================================
   ACESSIBILIDADE DE USO — o que vale para as três camadas
   Vale igual para quem administra, para quem se candidata e para o
   funcionário que acompanha a vaga: o alvo tem 44px, o foco aparece e nada
   depende de enxergar uma cor.
   ===================================================================== */

/* O foco tem de cercar o RÓTULO inteiro, não a caixinha de 20px dentro dele:
   quem navega por teclado precisa ver qual opção está selecionada, e a caixa
   sozinha some no meio da linha. */
.escolhas .escolha:has(input:focus-visible),
.triagem__opcao:has(input:focus-visible),
.prova-opcao:has(input:focus-visible),
.campo .opcao-cv:has(input:focus-visible),
label:not([class]):has(input:focus-visible) {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: var(--raio);
}
/* Com o rótulo já contornado, o contorno da caixinha vira ruído. */
.escolhas .escolha input:focus-visible,
.triagem__opcao input:focus-visible,
.prova-opcao input:focus-visible,
.campo .opcao-cv input:focus-visible { outline: none; }

/* Botão só de ícone precisa ser quadrado de 44px — com o padding de texto ele
   fica alto e estreito, e o dedo erra na horizontal. O rótulo desses botões
   vive no aria-label; sem ele, o leitor de tela anuncia "botão" e mais nada. */
.btn:has(> svg:only-child) {
  min-width: var(--alvo);
  padding-left: 10px; padding-right: 10px;
}

/* Nenhum bloco de conteúdo encosta na borda da tela nem vaza dela. */
.painel__area > *, .pagina-corpo > * { max-width: 100%; }

/* Texto longo sem espaço (e-mail, chave de modelo, URL de vaga) quebra em vez
   de esticar a caixa. Só onde ele de fato aparece: `anywhere` aplicado à toa
   deixa o texto comum com quebras feias no meio da palavra. */
.arquivo-cv__texto strong,
.bloco-cv__texto span,
.item-cv__meta,
.correcao-resposta { overflow-wrap: anywhere; }

/* =====================================================================
   CONTEUDO DO SITE (painel) e SECOES LIVRES (home)
   ===================================================================== */

/* Linha de seção/página na tela de conteúdo. Em coluna no celular: os cinco
   botões de ação lado a lado numa tela de 390px seriam alvos de 20px. */
.linha-secao {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.linha-secao:last-child { border-bottom: 0; }
.linha-secao__info { min-width: 0; flex: 1 1 240px; }
.linha-secao__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.linha-secao__acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.linha-secao--off { opacity: .6; }
.linha-secao--off .linha-secao__info strong { text-decoration: line-through; }

@media (max-width: 640px) {
  .linha-secao { flex-direction: column; align-items: stretch; }
  .linha-secao__acoes { justify-content: flex-start; }
}

/* Rótulo de um grupo de opções. É um <span>, e não um <label>: label sem
   campo associado é anunciado como rótulo órfão pelo leitor de tela. */
.rotulo-grupo {
  display: block; font-weight: 600; font-size: 14px;
  color: var(--text); margin-bottom: 8px;
}

/* Opção de radio/checkbox: a ÁREA TODA é clicável, com 44px de altura.
   Um input de 13x13 solto é o pior alvo de toque que existe. */
.escolhas { display: flex; flex-wrap: wrap; gap: 8px; }
.escolha {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--raio);
  cursor: pointer; font-weight: 400; background: var(--surface);
}
.escolha:hover { border-color: var(--azul-200); }
.escolha input { width: 20px; height: 20px; flex: none; accent-color: var(--azul); }
.escolha:focus-within { outline: 2px solid var(--azul); outline-offset: 2px; }

.previa { margin-bottom: 12px; }
.previa-img {
  display: block; max-width: 100%; height: auto;
  border-radius: var(--raio); border: 1px solid var(--border); margin-bottom: 12px;
}

.acoes-rodape {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: var(--sp-4);
}

/* Vídeo da vaga e das seções: proporção fixa em vez de altura em pixel, para
   não sobrar tarja preta em tela estreita. */
.video-vaga, .secao-livre__video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--raio); overflow: hidden; background: #000;
}
.video-vaga iframe, .secao-livre__video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ---- seções livres na home ---- */
.secao-livre { padding: var(--sp-6) 0; }
.secao-livre--claro  { background: var(--bg); }
.secao-livre--azul   { background: var(--azul); color: var(--sobre-cor); }
.secao-livre--azul h2, .secao-livre--azul h3 { color: var(--sobre-cor); }
.secao-livre--azul p { color: var(--azul-100); }
.secao-livre--azul .btn { background: var(--surface); color: var(--azul); border-color: var(--surface); }

.secao-livre__titulo { margin: 0 0 6px; }
.secao-livre__sub { color: var(--muted); margin: 0 0 var(--sp-4); font-size: 17px; }
.secao-livre--azul .secao-livre__sub { color: var(--azul-100); }
.secao-livre__texto--estreita { max-width: 62ch; }

.secao-livre__dupla { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 860px) {
  .secao-livre__dupla { grid-template-columns: 1fr 1fr; }
  .secao-livre__dupla--direita .secao-livre__img { order: 2; }
}
.secao-livre__img { margin: 0; min-width: 0; }
.secao-livre__img img {
  display: block; width: 100%; height: auto;
  border-radius: var(--raio-card); box-shadow: var(--sombra);
}

.secao-livre__destaques { display: grid; gap: var(--sp-4); }
@media (min-width: 700px)  { .secao-livre__destaques { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .secao-livre__destaques { grid-template-columns: repeat(3, 1fr); } }
.destaque-item { min-width: 0; }
.destaque-item h3 { margin: 0 0 4px; font-size: 17px; }
.destaque-item p  { margin: 0; color: var(--muted); }

/* Banner por imagem, alternativa ao vídeo de fundo. */
.hero__imagem { position: absolute; inset: 0; overflow: hidden; }
.hero__imagem img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------
   "Publicada há N dias" no card da vaga.
   Quem procura emprego lê a lista para saber o que é RECENTE; a data exata
   fica no `title`, para quem precisa conferir. O rodapé separa o tempo dos
   selos de modalidade e contrato — misturar os dois vira uma fileira de
   etiquetas que ninguém distingue.
   --------------------------------------------------------------------- */
.vaga-card__rodape {
  margin-top: auto;                 /* cola no fim do card, alinhando a grade */
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.vaga-card__quando {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted-soft);
}
.vaga-card__quando svg { flex: none; opacity: .75; }

/* Selo de vaga recente. Sete dias, e não trinta: numa rede que abre poucas
   vagas por mês, "Nova" em tudo deixa de significar alguma coisa. */
.tag--nova {
  background: var(--verde-100); color: var(--verde-escuro);
  font-weight: 700;
}

.vaga-card--talentos .vaga-card__rodape { border-top-color: rgba(255,255,255,.25); }
.vaga-card--talentos .vaga-card__quando { color: var(--sobre-azul-txt); }

/* Selo da prova que veio pronta da biblioteca. Azul e não cinza: precisa se
   distinguir das outras etiquetas na mesma linha, senão o RH não percebe que
   aquela prova não é dele e tenta editar. */
.tag--modelo {
  background: var(--azul-100); color: var(--azul-700);
  border: 1px solid var(--azul-200); font-weight: 700;
}

/* =====================================================================
   SANFONAS (departamentos/cargos) e COLABORADORES
   <details> nativo: abre e fecha sem JavaScript e o teclado já funciona.
   ===================================================================== */
.acordeao {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio-card); box-shadow: var(--sombra);
  margin-bottom: var(--sp-4); overflow: hidden;
}
.acordeao__cab {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px var(--sp-5); min-height: 56px;
  cursor: pointer; list-style: none; user-select: none;
}
.acordeao__cab::-webkit-details-marker { display: none; }
.acordeao__cab:hover { background: var(--bg); }
.acordeao__cab:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; }
.acordeao__seta { display: inline-flex; color: var(--muted); transition: transform .18s; }
.acordeao[open] > .acordeao__cab .acordeao__seta { transform: rotate(90deg); }
.acordeao__titulo {
  font-family: var(--fonte-titulo); font-size: 18px; color: var(--text);
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  /* Sem isto o titulo do acesso ("Ana · 02/09 11:20") era cortado com
     reticencias no meio da hora: 23 de 40 caracteres visiveis. */
  flex-wrap: wrap; white-space: normal; overflow-wrap: anywhere;
}
.acordeao__meta { margin-left: auto; font-size: 13px; color: var(--muted); }
@media (max-width: 720px) {
  .acordeao__meta { margin-left: 0; flex-basis: 100%; }
}
.acordeao__corpo { padding: 0 var(--sp-5) var(--sp-5); border-top: 1px solid var(--border); }
.acordeao__corpo > :first-child { margin-top: var(--sp-4); }
@media (max-width: 640px) {
  .acordeao__meta { margin-left: 28px; width: 100%; }
  .acordeao__corpo { padding: 0 var(--sp-4) var(--sp-4); }
}

.colab { margin-top: 8px; }
.colab__resumo {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 4px 10px; margin-left: -10px;
  font-size: 13px; color: var(--azul); cursor: pointer;
  list-style: none; border-radius: var(--raio); user-select: none;
}
.colab__resumo::-webkit-details-marker { display: none; }
.colab__resumo:hover { background: var(--realce); }
.colab__resumo:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.colab__seta { display: inline-flex; transition: transform .18s; opacity: .7; }
.colab[open] .colab__seta { transform: rotate(180deg); }
.colab__lista {
  list-style: none; margin: 6px 0 0; padding: 10px 12px;
  background: var(--bg); border-radius: var(--raio);
  display: grid; gap: 8px;
}
.colab__lista li {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 13.5px; min-width: 0;
}
.colab__meta { color: var(--muted-soft); font-size: 12.5px; }

/* =====================================================================
   "POR QUE TRABALHAR AQUI" EM CARDS COM ÍCONE
   ===================================================================== */
.sobre-cards { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .sobre-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sobre-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sobre-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio-card);
  padding: var(--sp-5); box-shadow: var(--sombra); min-width: 0;
}
/* Mesmo verde da borda do card de vaga: os dois blocos convivem na home, e
   com o ícone em azul pareciam de sistemas diferentes. */
.sobre-card__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 12px;
  background: var(--verde-bg); color: var(--verde-escuro);
}
.sobre-card h3 { margin: 0 0 6px; font-size: 17px; }
.sobre-card p { margin: 0; color: var(--muted); font-size: 14.5px; }
.sobre-cards--previa { margin-bottom: var(--sp-4); }
.sobre-cards--previa .sobre-card { box-shadow: none; background: var(--bg); }

/* =====================================================================
   RAIO-X DO CURRÍCULO: verde preenchido, vermelho faltando
   ===================================================================== */
.pendencias { display: flex; flex-wrap: wrap; gap: 8px; }
.pendencia {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 14px; border-radius: 22px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent;
}
.pendencia--ok {
  background: var(--verde-bg); color: var(--verde-escuro); border-color: var(--verde-borda);
}
.pendencia--falta {
  background: var(--verm-100); color: var(--verm-escuro); border-color: #F3B9BC;
}
.pendencia:hover { text-decoration: none; filter: brightness(.97); }
.pendencia:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* =====================================================================
   ÁREA DO CANDIDATO: hambúrguer no celular
   ===================================================================== */
.hamb-btn--cand { display: inline-flex; }
@media (max-width: 767px) {
  /* A barra fica escondida até o botão abrir. Continua no fluxo (empurra o
     conteúdo), então não precisa de véu nem de trava de rolagem. */
  .barra-nav--cand { display: none; }
  .barra-nav--cand.aberta { display: block; }
  .barra-nav--cand .barra-nav-linha {
    display: grid; grid-template-columns: 1fr; gap: 2px; padding: 8px 12px;
  }
  .barra-nav--cand a { min-height: 48px; justify-content: flex-start; }
}
@media (min-width: 768px) {
  .hamb-btn--cand { display: none; }
  .barra-nav--cand { display: block; }
}

/* =====================================================================
   MAPA DA TELA DE CONTEÚDO
   ===================================================================== */
.mapa-conteudo {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-4);
}
.mapa-conteudo a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 14px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13.5px; font-weight: 600; color: var(--text);
}
.mapa-conteudo a:hover { border-color: var(--azul-200); text-decoration: none; }

/* Botão do assistente de IA embaixo da área de texto da vaga. */
.ia-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.ia-aviso { margin: 0; color: var(--verde-escuro); }

/* =====================================================================
   ORGANOGRAMA
   O desenho vem posicionado do servidor (x/y/largura/altura em pixels). Aqui
   o CSS so pinta: nao decide geometria, nao empilha e nao quebra linha. Foi
   o CSS decidindo o layout que fazia o desenho antigo sair cortado.
   ===================================================================== */
.org-barra {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; padding: 10px 14px;
}
.org-barra__grupo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.org-barra__grupo--fim { margin-left: auto; }
.org-barra__rotulo {
  font-size: 12px; color: var(--muted-soft);
  text-transform: uppercase; letter-spacing: .05em; margin-right: 2px;
}
.org-barra__zoom {
  font-size: 13px; color: var(--muted); min-width: 46px; text-align: right;
  font-variant-numeric: tabular-nums;
}

.org-cartao { padding: 10px 12px var(--sp-4); }

/* O visor recorta; quem encolhe e o palco, por transform. Assim o desenho
   inteiro sempre cabe na largura, e o zoom nao muda posicao nenhuma. */
.org-visor {
  overflow: auto; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--raio-card);
  padding: var(--sp-4);
  /* Alto o bastante para o desenho respirar: com a altura colada no conteudo
     o organograma ficava espremido numa faixa fina no meio da tela. */
  min-height: 62vh;
}
@media (max-width: 720px) { .org-visor { min-height: 50vh; } }
.org-caixa { position: relative; }
.org-palco { position: absolute; top: 0; left: 0; transform-origin: top left; }

.org-linha { position: absolute; background: var(--azul-200); }

.org-cartao-no {
  position: absolute; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border);
  border-top: 4px solid var(--org-cor, var(--azul));
  border-radius: 10px; box-shadow: var(--sombra);
  padding: 8px 10px; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px;
}
.org-cartao-no--editando {
  outline: 3px solid var(--amarelo-warn); outline-offset: 2px;
}
.org-cartao-no__nivel {
  /* Era 10,5px, e o quadro ainda encolhe com o zoom: o nome do nivel
     (Direcao, Gerencia, Supervisao) virava mancha. */
  font-size: 12px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--org-cor, var(--azul));
}
.org-cartao-no__nome {
  font-family: var(--fonte-titulo); font-size: 14.5px; line-height: 1.15;
  color: var(--text);
  /* Nome longo corta em duas linhas com reticencias: cartao de organograma
     tem tamanho fixo, e deixar o texto vazar sobrepunha o cartao vizinho. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.org-cartao-no__apoio {
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Uma fileira so, no rodape do cartao, sempre na mesma ordem. Some ate o
   mouse chegar perto para o desenho ficar limpo; no toque fica sempre
   visivel, porque la nao existe "chegar perto". */
.org-acoes {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 1px; justify-content: center;
  padding: 3px 4px; background: linear-gradient(to top, var(--surface) 70%, transparent);
  opacity: 0; transition: opacity .12s;
}
.org-cartao-no:hover .org-acoes,
.org-cartao-no:focus-within .org-acoes { opacity: 1; }
@media (hover: none) { .org-acoes { opacity: 1; } }

.org-acao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.org-acao:hover { background: var(--realce); color: var(--realce-txt); text-decoration: none; }
.org-acao--perigo:hover { background: var(--verm-100); color: var(--verm-escuro); }
.org-acoes .inline { display: inline-flex; }

/* Paleta do editor: bolinhas de verdade, com radio por baixo — funciona no
   teclado e sem JS, e a pessoa ve a cor em vez de ler o nome dela. */
.org-paleta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.org-cor {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--org-cor); cursor: pointer;
  border: 3px solid transparent; box-shadow: 0 0 0 1px var(--border) inset;
  display: inline-block; position: relative;
}
.org-cor input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.org-cor:has(input:checked) { border-color: var(--text); transform: scale(1.08); }
.org-cor:has(input:focus-visible) { outline: 3px solid var(--azul); outline-offset: 2px; }

@media (max-width: 720px) {
  .org-barra__grupo--fim { margin-left: 0; }
  .org-visor { padding: var(--sp-3); }
}

/* =====================================================================
   MARCADORES DE VAGA
   Etiqueta com cor por GRUPO: acessibilidade em azul, afirmativa em roxo,
   publico em verde. A cor separa os tres sem precisar ler — e ler todas as
   etiquetas era exatamente o que o card nao pode exigir.
   ===================================================================== */
.vaga-card__marcadores { display: flex; flex-wrap: wrap; gap: 6px; }
.marcador {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; line-height: 1.5;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.marcador svg { flex: none; }
.marcador--pcd        { background: var(--azul-100);  color: var(--azul-600); }
.marcador--afirmativa { background: var(--afirma-bg);          color: var(--afirma); }
.marcador--publico    { background: var(--verde-bg);  color: var(--verde-escuro); }
.marcador--mais       { background: var(--bg);        color: var(--muted); }

/* Na pagina da vaga o marcador vira linha explicada: e onde a pessoa decide
   se a vaga e para ela, e "afirmativa" sozinho nao diz o que significa. */
.marcadores-vaga { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: 8px; }
.marcador-linha {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--raio); font-size: 14px;
  background: var(--bg); border-left: 4px solid var(--border);
}
.marcador-linha--pcd        { background: var(--azul-100); border-left-color: var(--azul); }
.marcador-linha--afirmativa { background: var(--afirma-bg);         border-left-color: var(--afirma); }
.marcador-linha--publico    { background: var(--verde-bg); border-left-color: var(--verde); }
.marcador-linha__ico { display: inline-flex; padding-top: 1px; }
.marcador-linha__texto { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }

/* Caixa de selecao em formato de pilula, para lista de marcadores no admin:
   ocupa menos altura que uma coluna de checkbox e deixa a lista ser lida de
   relance. */
.escolha--pilula {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); cursor: pointer; min-height: var(--alvo); margin: 0;
}
.escolha--pilula:hover { border-color: var(--azul-200); background: var(--realce); }
.escolha--pilula:has(input:checked) {
  border-color: var(--azul); background: var(--azul-100); color: var(--azul-600); font-weight: 600;
}

/* Pop-over do motivo de desclassificacao: a lista precisa caber sem empurrar
   a linha da tabela, entao ela flutua sobre o conteudo. E <details>, nao JS:
   fecha com Esc e funciona no teclado de graca. */
.menu-motivo { position: relative; display: inline-block; }
.menu-motivo > summary { list-style: none; cursor: pointer; }
.menu-motivo > summary::-webkit-details-marker { display: none; }
.menu-motivo__caixa {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  width: 290px; max-width: 78vw; text-align: left;
  background: var(--flutuante); border: 1px solid var(--border);
  border-radius: var(--raio-card); box-shadow: var(--sombra-g);
  padding: 12px 14px;
}
.menu-motivo__caixa .escolha { font-size: 13.5px; }

/* Divisoria de secao dentro de uma tela longa: as metricas tem dez blocos, e
   sem um respiro entre "o que aconteceu" e "por que aconteceu" a tela vira
   uma pilha de cartoes iguais. */
.secao-painel {
  font-family: var(--fonte-titulo); font-size: 20px;
  margin: var(--sp-6) 0 var(--sp-3); padding-top: var(--sp-4);
  border-top: 2px solid var(--border);
}

/* Botao do assistente de IA. Ele estava como "fantasma", que e o estilo do
   que quase nao se ve — e o botao mais util do formulario da vaga nao pode
   ser o mais apagado. Ganha cor propria, e nao a azul dos botoes de acao,
   para nao competir com "Salvar": e uma OFERTA, nao o caminho principal. */
.btn--ia {
  background: linear-gradient(135deg, var(--afirma-bg), var(--avatar-bg));
  border: 1px solid var(--afirma-borda); color: var(--afirma); font-weight: 700;
}
.btn--ia:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--afirma-bg), var(--avatar-borda));
  border-color: var(--afirma-borda); color: var(--afirma-forte);
}
.btn--ia svg { color: var(--afirma); }
.btn--ia:disabled { opacity: .6; }

/* =====================================================================
   CURRICULO NA TELA
   Desenhado como FOLHA, e nao como mais um cartao do portal: a pessoa
   preencheu nove blocos separados e precisa ver o resultado do jeito que o
   recrutador le. As medidas acompanham o desenho do arquivo baixado.
   ===================================================================== */
.cv-folha {
  background: var(--surface); border-radius: var(--raio-card); box-shadow: var(--sombra-g);
  overflow: hidden; max-width: 820px; margin: 0 auto var(--sp-6);
}
.cv-topo { background: #243B53; padding: 26px 44px 22px; border-bottom: 6px solid var(--azul); }
.cv-nome { font-family: var(--fonte-titulo); font-size: 30px; color: var(--sobre-cor); margin: 0; line-height: 1.1; }
.cv-contato { color: var(--azul-200); font-size: 13px; margin: 10px 0 0; word-break: break-word; }
.cv-corpo { padding: 30px 44px 36px; }
.cv-resumo {
  font-family: var(--fonte-titulo); font-style: italic; font-size: 15.5px;
  color: var(--avatar-txt); margin: 0 0 var(--sp-5); line-height: 1.55;
}
.cv-secao { margin-bottom: var(--sp-5); }
.cv-secao__titulo {
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--azul); margin: 0 0 4px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.cv-item { position: relative; padding: 12px 0 4px; }
.cv-item__lado { float: right; font-size: 12px; color: var(--muted-soft); margin-left: 12px; }
.cv-item__titulo { font-family: var(--fonte-titulo); font-size: 16px; color: var(--text); }
.cv-item__apoio { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.cv-item__texto { font-size: 14px; color: var(--avatar-txt); margin: 6px 0 0; padding-left: 12px; line-height: 1.55; }
.cv-etiquetas { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 0 4px; }
.cv-etiqueta {
  background: var(--bg); color: #20537F; font-size: 12.5px;
  padding: 4px 11px; border-radius: 999px;
}
.cv-barra { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.cv-barra__rotulo { width: 108px; flex: none; color: var(--text); }
.cv-barra__trilho { flex: 1; height: 9px; background: var(--avatar-bg); border-radius: 5px; overflow: hidden; }
.cv-barra__cheio  { display: block; height: 100%; background: var(--azul); }
.cv-barra__valor  { width: 40px; text-align: right; color: var(--muted); }
.cv-assinatura {
  font-size: 11px; color: var(--muted-soft); margin: var(--sp-5) 0 0;
  padding-top: 10px; border-top: 1px solid var(--border); display: inline-block;
}
@media (max-width: 720px) {
  .cv-topo  { padding: 20px 22px 18px; }
  .cv-nome  { font-size: 23px; }
  .cv-corpo { padding: 22px 22px 26px; }
  .cv-item__lado { float: none; display: block; margin: 0 0 2px; }
}

/* Topo do curriculo com retrato: a foto empurra o texto, e sem foto o texto
   ocupa a largura toda — reservar o espaco sempre deixaria um buraco. */
.cv-topo--foto { display: flex; gap: 22px; align-items: flex-start; }
.cv-retrato {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid rgba(255,255,255,.35);
}
.cv-endereco { color: var(--azul-200); font-size: 12.5px; margin: 5px 0 0; }
.cv-pessoais { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cv-pessoal {
  background: rgba(255,255,255,.14); color: var(--avatar-borda);
  font-size: 11.5px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 560px) {
  .cv-topo--foto { flex-direction: column; gap: 14px; }
}

/* =====================================================================
   GRAFICOS
   Um visual so para o painel inteiro: mesma legenda, mesma altura de barra,
   mesmo espacamento. Antes cada tela desenhava as suas, e o mesmo dado saia
   diferente em cada lugar.
   ===================================================================== */
.graf-vazio { color: var(--muted-soft); margin: 12px 0 0; font-size: 14px; }

/* --- rosca --- */
.graf-rosca { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; margin-top: 10px; }
.graf-rosca__svg { width: 150px; height: 150px; flex: none; }
.graf-rosca__total {
  font-family: var(--fonte-titulo); font-size: 26px; fill: var(--text);
}
/* Era 9px: abaixo do piso de 12px do projeto, e este texto e' o rotulo do
   numero grande — quem nao le nao sabe se aquele 3 sao respostas ou pessoas. */
.graf-rosca__unidade { font-size: 12px; fill: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* --- legenda --- */
.graf-legenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 190px; display: grid; gap: 7px; }
.graf-legenda--linha { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.graf-legenda__item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.graf-legenda__rotulo { flex: 1; min-width: 0; color: var(--muted); }
.graf-legenda__pct { color: var(--muted-soft); width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.graf-ponto { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* --- barras --- */
.graf-barras { display: grid; gap: 13px; margin-top: 12px; }
.graf-barra__topo { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; align-items: baseline; }
.graf-barra__rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.graf-barra__topo strong { font-variant-numeric: tabular-nums; }
.graf-barra__trilho { height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; margin-top: 5px; }
.graf-barra__cheio  { height: 100%; border-radius: 5px; transition: width .25s; }
.graf-barra__nota   { font-size: 12px; color: var(--muted-soft); margin-top: 3px; }

/* --- colunas --- */
.graf-colunas {
  display: flex; gap: 18px; align-items: flex-end; margin-top: 16px;
  overflow-x: auto; padding-bottom: 4px;
}
.graf-coluna { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 54px; }
.graf-coluna__barras { display: flex; gap: 5px; align-items: flex-end; height: 132px; }
.graf-coluna__b {
  width: 20px; border-radius: 4px 4px 0 0; position: relative;
  display: flex; justify-content: center;
}
.graf-coluna__b span {
  position: absolute; top: -18px; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.graf-coluna__rotulo { font-size: 12px; color: var(--muted-soft); }

/* --- linha --- */
.graf-linha svg { width: 100%; height: 190px; display: block; }
.graf-eixo { font-size: 10px; fill: var(--muted-soft); }
.graf-linha__pe {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--muted-soft); margin-top: 2px; flex-wrap: wrap;
}
.graf-linha__pe span:nth-child(2) { color: var(--muted); font-weight: 600; }

@media (max-width: 560px) {
  .graf-rosca { justify-content: center; }
  .graf-rosca__svg { width: 128px; height: 128px; }
  .graf-linha__pe span:nth-child(2) { order: 3; width: 100%; text-align: center; }
}

/* Conversao por canal, embaixo da rosca de origem: o volume esta no grafico,
   e aqui fica o que ele nao mostra — canal que traz muita gente e contrata
   pouca. */
.met-conversao { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: 6px; }
.met-conversao li { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.met-conversao__nome { font-weight: 600; color: var(--text); }
.met-conversao__num  { color: var(--muted); }

/* =====================================================================
   EDITOR DE PAGINA INSTITUCIONAL
   A regua de formatacao por EXEMPLO, lado a lado, e a previa ao vivo.
   Descrever a formatacao em palavras ja falhou uma vez nesta tela.
   ===================================================================== */
.regua-formato { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .regua-formato { grid-template-columns: 1fr 1fr; } }
.regua-formato__rotulo {
  display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-soft); margin-bottom: 6px;
}
.regua-formato__exemplo {
  margin: 0; padding: 12px 14px; background: var(--bg); border-radius: var(--raio);
  border: 1px solid var(--border); font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; color: var(--text);
}
.regua-formato__saida {
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio);
}
.regua-formato__saida h4 {
  font-family: var(--fonte-titulo); font-size: 15px; margin: 12px 0 4px; color: var(--azul-600);
}
.regua-formato__saida h4:first-child { margin-top: 0; }
.regua-formato__saida p { margin: 0 0 6px; font-size: 13.5px; color: var(--muted); }
.regua-formato__regras { margin: var(--sp-4) 0 0; padding-left: 20px; display: grid; gap: 6px;
  font-size: 13.5px; color: var(--muted); }

.previa-pagina {
  margin-top: var(--sp-4); border: 2px dashed var(--azul-200);
  border-radius: var(--raio-card); overflow: hidden; background: var(--surface);
}
.previa-pagina__marca {
  background: var(--azul-100); color: var(--azul-600);
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 7px 16px;
}
.previa-pagina__corpo { padding: 18px 22px 22px; }
.previa-pagina__corpo h4 {
  font-family: var(--fonte-titulo); font-size: 17px; color: var(--text);
  margin: var(--sp-4) 0 6px; padding-top: 10px; border-top: 1px solid var(--border);
}
.previa-pagina__corpo h4:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.previa-pagina__corpo p { margin: 0 0 8px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* =====================================================================
   ALVO DE TOQUE EM LINK DE ITEM
   Link que E a acao da linha (nome da vaga numa lista, nome do candidato)
   media 16 a 23px de altura no celular — abaixo dos 44px que o dedo precisa.
   O padding vertical resolve sem mudar nada no desktop, onde o mouse acerta
   qualquer coisa. NAO vale para link dentro de frase (.dica a, .painel__sub a):
   la o alvo grande quebraria o paragrafo.
   ===================================================================== */
@media (hover: none), (max-width: 720px) {
  /* :not(.btn) porque a regra alcancava botao dentro de lista e o achatava:
     o "ver vaga" perdia o fundo e virava texto com padding. */
  .cartao .linha-secao__info > a:not(.btn),
  .cartao ol a:not(.btn),
  .cartao ul li > a:not(.btn),
  .met-lista a:not(.btn),
  .item-link:not(.btn) {
    display: inline-block;
    padding: 9px 0;
    min-height: 26px;
  }
  /* Link solto dentro de um bloco de lista do painel (vagas paradas,
     desistencias recentes): o alvo cresce sem empurrar o layout. */
  .cartao > div > a[class=""],
  .cartao > div > a:not([class]) { display: inline-block; padding: 8px 0; }
}
.item-link { font-weight: 700; }

/* O .aviso e flex para alinhar icone e texto. Texto SOLTO dentro de um flex
   vira um item anonimo com min-width:auto, e ele nao encolhe: no celular o
   aviso do organograma vazava 51px para fora do proprio cartao. Aviso que e
   so texto nao precisa de flex — foi a mesma armadilha de min-width que ja
   quebrou o layout da equipe. */
p.aviso, .aviso--texto { display: block; }
.aviso > * { min-width: 0; }

/* --- cartao do organograma com pessoa e foto --- */
.org-cartao-no__corpo { display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
.org-cartao-no__texto { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.org-cartao-no__pessoa {
  font-size: 12px; color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-retrato {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid var(--org-cor, var(--azul));
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.org-retrato--letras {
  font-family: var(--fonte-titulo); font-size: 14px; color: var(--org-cor, var(--azul));
  background: var(--surface);
}
.org-retrato--grande { width: 72px; height: 72px; border-width: 3px; }
.org-retrato--vazio  { border-style: dashed; color: var(--muted-soft); }

/* Bloco de "quem ocupa" no editor: a foto ao lado dos campos, para a pessoa
   ver o retrato enquanto escreve o nome. */
.org-pessoa-bloco {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-4); margin-top: var(--sp-3);
  background: var(--bg); border-radius: var(--raio-card);
}

/* Chamada que substitui o formulario quando ninguem esta montando. */
.org-chamada {
  display: flex; gap: var(--sp-4); align-items: center;
  justify-content: space-between; flex-wrap: wrap;
}

@media (max-width: 560px) {
  .org-pessoa-bloco { flex-direction: column; align-items: center; text-align: center; }
  .org-pessoa-bloco .campo { text-align: left; width: 100%; }
}

/* ---------------------------------------------------------------------------
   Legenda dos tipos de administrador (Configuracoes > Usuarios).
   Grade que quebra sozinha: 3 colunas no desktop, 1 no celular. O papel
   super_admin ganha destaque porque e o unico que alcanca tudo — quem esta
   escolhendo precisa enxergar isso antes de clicar.
--------------------------------------------------------------------------- */
.legenda-papeis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.legenda-papel {
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 14px;
  background: var(--surface);
}

.legenda-papel--destaque {
  border-color: var(--verde-300);
  background: var(--verde-bg);
}

.legenda-papel__nome {
  font-family: var(--fonte-titulo);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.legenda-papel__resumo {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0 0 10px;
}

.legenda-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.4;
}

.legenda-lista li {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  padding: 3px 0;
  color: var(--text);
}

.legenda-lista__nao { color: var(--muted-soft); }

/* O sinal nao pode encolher nem esticar: sem isto o flex espreme o icone
   quando a linha tem texto longo. */
.legenda-lista__sinal {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 50%;
}

.legenda-lista__sinal--sim { background: var(--verde-100); color: var(--verde-escuro); }
.legenda-lista__sinal--nao { background: var(--verm-100);  color: var(--verm-escuro); }

/* ---------------------------------------------------------------------------
   Saudacao no bloco do usuario (canto direito do topo).
   Antes ela vivia solta a esquerda TAMBEM: a mesma pessoa anunciada duas vezes
   na mesma barra. Ficou so aqui, colada no nome — e verde, como sempre foi.
--------------------------------------------------------------------------- */
.painel__usuario-ola { color: var(--verde-escuro); font-weight: 700; }

/* Recolher/expandir: os dois icones ficam no HTML e so um aparece. O estado
   mora no <body>, entao a troca acontece junto com a lateral, sem JS extra. */
.btn-recolher__icone { display: inline-flex; }
.btn-recolher__icone--expandir { display: none; }
body.lateral-recolhida .btn-recolher__icone--recolher { display: none; }
body.lateral-recolhida .btn-recolher__icone--expandir { display: inline-flex; }

/* ---------------------------------------------------------------------------
   Versoes (Configuracoes > Versoes).
   Cada bloco do numero tem uma cor propria e ela se repete em tudo: na legenda,
   na escolha do tipo e na etiqueta de cada versao da lista. Assim a pessoa
   aprende a regra uma vez e reconhece depois, sem reler.
--------------------------------------------------------------------------- */
.ver-bloco--maior    { background: var(--verm-100);   color: var(--verm-escuro); }
.ver-bloco--menor    { background: var(--verde-100);  color: var(--verde-escuro); }
.ver-bloco--correcao { background: var(--azul-100);   color: var(--azul-700); }

.ver-atual {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.ver-atual__rotulo {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-soft); font-weight: 700;
}
.ver-atual__numero {
  font-family: var(--fonte-titulo); font-size: 30px; line-height: 1.1; color: var(--text);
}

.ver-atual__blocos { display: flex; align-items: flex-start; gap: 4px; }
.ver-atual__bloco  { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ver-atual__digito {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 8px;
  border-radius: var(--raio);
  font-family: var(--fonte-titulo); font-size: 20px;
}
/* Diz o que cada digito da versao significa (Geral, Cumulativa, Correcao):
   e' legenda, e legenda que nao se le nao e' legenda. */
.ver-atual__legenda { font-size: 12px; color: var(--muted); font-weight: 700; }
/* O ponto acompanha a altura do digito, nao a da coluna inteira. */
.ver-atual__ponto {
  font-family: var(--fonte-titulo); font-size: 22px; color: var(--muted-soft);
  line-height: 40px;
}

.ver-tipos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
}
.ver-tipo {
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--raio); padding: 14px; background: var(--surface);
}
.ver-tipo--maior    { border-left-color: var(--vermelho); }
.ver-tipo--menor    { border-left-color: var(--verde); }
.ver-tipo--correcao { border-left-color: var(--azul); }

.ver-tipo__nome {
  font-family: var(--fonte-titulo); font-size: 15px; color: var(--text);
  display: flex; align-items: baseline; gap: 6px;
}
.ver-tipo__apelido { font-family: var(--fonte); font-size: 12px; color: var(--muted-soft); }
.ver-tipo__posicao { font-size: 12px; color: var(--muted-soft); margin-bottom: 6px; }
.ver-tipo__quando  { font-size: 13px; line-height: 1.45; color: var(--muted); margin: 0 0 10px; }
.ver-tipo__exemplo {
  font-size: 13px; color: var(--text);
  padding-top: 8px; border-top: 1px dashed var(--border);
}

/* Escolha do tipo: cartao inteiro clicavel, nao so a bolinha do radio. */
.ver-escolha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px;
}
.ver-escolha__opcao {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "radio nome num" ".     quando quando";
  gap: 4px 8px; align-items: center;
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--raio); padding: 12px;
  cursor: pointer; font-weight: 400;
}
.ver-escolha__opcao input { grid-area: radio; margin: 0; }
.ver-escolha__nome   { grid-area: nome; font-weight: 700; font-size: 14px; }
.ver-escolha__num    { grid-area: num; font-size: 13px; color: var(--muted-soft); font-weight: 700; }
.ver-escolha__quando { grid-area: quando; font-size: 12px; line-height: 1.4; color: var(--muted); }
.ver-escolha__opcao:has(input:checked) { background: var(--bg); border-color: var(--azul-300); }
.ver-escolha__opcao:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }

.ver-numero { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 44px; }
.ver-numero__valor {
  font-family: var(--fonte-titulo); font-size: 22px; color: var(--text);
}
.ver-numero__manual {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 400; color: var(--muted); cursor: pointer;
}

.ver-etiqueta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Sino de alertas na barra superior.
   O painel abre ancorado a direita do botao. Em tela estreita ele vira uma
   faixa que ocupa a largura util: dropdown de 380px no celular sairia da tela
   pela direita, que e justamente o lado em que o botao fica.
--------------------------------------------------------------------------- */
.sino { position: relative; margin-left: auto; }

.sino__botao {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--alvo); height: var(--alvo);
  border: 1px solid transparent; border-radius: var(--raio);
  background: none; color: var(--muted); cursor: pointer;
}
.sino__botao:hover { background: var(--bg); color: var(--text); }
.sino__botao:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.sino[data-aberto="1"] .sino__botao { background: var(--bg); border-color: var(--border); color: var(--text); }

/* O contador monta sobre o canto do sino. min-width para "99+" nao espremer. */
.sino__contador {
  position: absolute; top: 2px; right: 0;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--laranja-escuro); color: var(--sobre-cor);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.sino__contador--erro { background: var(--verm-escuro); }

.sino__painel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  width: 380px; max-width: calc(100vw - 24px);
  background: var(--flutuante); color: var(--flutuante-txt);
  border: 1px solid var(--border); border-radius: var(--raio-card);
  box-shadow: var(--sombra-g);
  overflow: hidden;
}
.sino__painel[hidden] { display: none; }

.sino__topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.sino__topo strong { font-family: var(--fonte-titulo); font-size: 14px; }
.sino__resumo { font-size: 12px; color: var(--muted-soft); }

.sino__lista { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.sino__lista li + li { border-top: 1px solid var(--linha); }

.sino__item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; text-decoration: none; color: inherit;
}
a.sino__item:hover { background: var(--bg); }

/* A cor do ponto e a unica coisa que diz a gravidade de relance. */
.sino__ponto { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.sino__item--erro    .sino__ponto { background: var(--vermelho); }
.sino__item--atencao .sino__ponto { background: var(--laranja-escuro); }
.sino__item--info    .sino__ponto { background: var(--azul); }

.sino__corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sino__titulo { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.35; }

.sino__vezes {
  display: inline-block; margin-left: 4px; padding: 1px 6px;
  border-radius: 999px; background: var(--verm-100); color: var(--verm-escuro);
  font-size: 11px; font-weight: 700;
}
.sino__detalhe { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.sino__quando  { font-size: 12px; color: var(--muted); }

.sino__vazio { padding: 26px 16px; text-align: center; color: var(--muted-soft); }
.sino__vazio svg { color: var(--verde); }
.sino__vazio p { margin: 8px 0 2px; font-weight: 700; color: var(--text); font-size: 14px; }
.sino__vazio span { font-size: 12px; }

.sino__rodape {
  display: flex; align-items: center; gap: 5px;
  padding: 9px 14px; border-top: 1px solid var(--border);
  background: var(--bg); font-size: 12px; color: var(--muted);
}

/* Sem o sino, o bloco do usuario e quem empurra tudo para a direita. Com ele,
   quem faz isso e o proprio sino — senao os dois brigam pelo espaco. */
.sino ~ .painel__usuario { margin-left: 0; }

/* Em tela estreita o painel nao pode se ancorar no botao: o sino ja fica perto
   da borda direita, entao um dropdown de 380px medido a partir DELE comeca
   fora da tela pela esquerda (-52px, medido no celular). Preso a viewport, ele
   ocupa a largura util e nao depende de onde o botao esta. */
@media (max-width: 640px) {
  .sino__painel {
    position: fixed;
    top: var(--topo-alt);
    left: 12px; right: 12px;
    width: auto; max-width: none;
  }
  .sino__lista { max-height: calc(100vh - var(--topo-alt) - 120px); }
}

/* Os tres atalhos de numero viraram BOTAO (antes eram radio): o campo de texto
   e que manda, e eles so o preenchem. aria-pressed marca qual esta valendo. */
button.ver-escolha__opcao {
  grid-template-areas: "num nome" "quando quando";
  grid-template-columns: auto 1fr;
  text-align: left; background: var(--surface); font: inherit;
}
button.ver-escolha__opcao[aria-pressed="true"] {
  background: var(--bg); border-color: var(--azul-300);
}
button.ver-escolha__opcao:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.ver-escolha__num  { font-family: var(--fonte-titulo); font-size: 15px; color: var(--text); }
.ver-escolha__nome { color: var(--muted); font-weight: 700; font-size: 12px; }

.ver-numero__campo { max-width: 190px; font-family: var(--fonte-titulo); font-size: 17px; }
.ver-numero select { max-width: 220px; }

/* Versao anterior a regra: so o numero, sem cor de tipo. */
.ver-etiqueta--simples {
  background: var(--cinza); color: var(--muted);
}

/* Sites de emprego: uma linha por portal, com o endereco pronto para copiar. */
.feed-linha {
  padding: 14px 0; border-top: 1px solid var(--linha);
}
.feed-linha:first-of-type { border-top: 0; }
.feed-linha__nome { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.feed-linha__nome strong { font-family: var(--fonte-titulo); font-size: 15px; }
.feed-linha__nome span   { font-size: 12px; color: var(--muted-soft); }
.feed-linha__url {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0 4px;
}
/* O campo cresce e os botoes ficam do tamanho deles: sem o min-width:0 o input
   nao encolhe e empurra os botoes para fora no celular. */
.feed-linha__url .entrada { flex: 1 1 260px; min-width: 0; font-size: 13px; }
.feed-linha__onde { margin: 0; }

/* Acoes dentro do aviso de erro do e-mail. */
.email-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---------------------------------------------------------------------------
   Documentacao do projeto.
--------------------------------------------------------------------------- */
.doc-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px; flex: 1 1 420px;
}
.doc-numero {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: var(--raio); background: var(--bg);
}
.doc-numero strong { font-family: var(--fonte-titulo); font-size: 19px; color: var(--text); }
/* O rotulo do numero: sem ele, "23" nao diz se sao vagas ou candidatos. */
.doc-numero span   { font-size: 12px; color: var(--muted); line-height: 1.3; }

.doc-panorama {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;
}
.doc-bloco h3 {
  font-family: var(--fonte-titulo); font-size: 15px; margin: 0 0 6px; color: var(--text);
}
.doc-bloco p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* Grupo de rotas fechado por padrao: a lista inteira de uma vez seria uma
   parede de 130 linhas, e ninguem le parede. */
.doc-grupo { border-top: 1px solid var(--linha); }
.doc-grupo:first-of-type { border-top: 0; }
.doc-grupo > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 4px; cursor: pointer; list-style: none;
  min-height: var(--alvo);
}
.doc-grupo > summary::-webkit-details-marker { display: none; }
/* O triangulo e desenhado a mao para poder girar: o marcador nativo nao anima
   e some no Safari. */
.doc-grupo > summary::before {
  content: ''; width: 0; height: 0; flex: 0 0 auto;
  border-left: 5px solid var(--muted-soft);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .15s;
}
.doc-grupo[open] > summary::before { transform: rotate(90deg); }
.doc-grupo > summary strong { font-size: 14px; }
.doc-grupo .tabela { margin-bottom: 12px; }

.doc-tarefa { padding: 12px 0; border-top: 1px solid var(--linha); }
.doc-tarefa:first-of-type { border-top: 0; }
.doc-tarefa__topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.doc-tarefa__topo code { font-size: 13px; }
.doc-tarefa p { margin: 0 0 4px; font-size: 13.5px; color: var(--muted); }

/* ---------------------------------------------------------------------------
   Funil da vaga: passo a passo em vez de abas soltas.
   As abas antigas nao mostravam PROGRESSO — eram links iguais lado a lado, e a
   pessoa nao via em que ponto do processo estava olhando. Aqui cada etapa e um
   passo numerado, o atual em destaque e os ja vencidos em verde.
--------------------------------------------------------------------------- */
.funil {
  display: flex; gap: 0; overflow-x: auto; margin-bottom: var(--sp-4);
  padding-bottom: 4px; -webkit-overflow-scrolling: touch;
}

.funil__passo {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto; position: relative;
  padding: 10px 18px 10px 14px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); text-decoration: none; font-size: 13.5px;
  min-height: var(--alvo);
}
.funil__passo + .funil__passo { border-left: 0; }
.funil__passo:first-child { border-radius: var(--raio) 0 0 var(--raio); }
.funil__passo:last-child  { border-radius: 0 var(--raio) var(--raio) 0; }

/* A seta entre passos e feita com duas bordas giradas: sem imagem, sem
   pseudo-elemento que quebre no leitor de tela. */
.funil__passo:not(:last-child)::after {
  content: ''; position: absolute; right: -7px; top: 50%; z-index: 1;
  width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg);
  background: inherit;
  border-top: 1px solid var(--border); border-right: 1px solid var(--border);
}

.funil__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  background: var(--cinza); color: var(--muted);
  font-size: 12px; font-weight: 700;
}
.funil__nome  { white-space: nowrap; }
.funil__conta { font-weight: 700; color: var(--text); }

.funil__passo--tras { background: var(--verde-bg); border-color: var(--verde-300); }
.funil__passo--tras .funil__num { background: var(--verde-100); color: var(--verde-escuro); }
.funil__passo--tras::after { border-color: var(--verde-300); }

.funil__passo--aqui {
  background: var(--azul); border-color: var(--azul); color: var(--sobre-cor); font-weight: 700;
}
.funil__passo--aqui .funil__num   {
  /* Disco MAIS ESCURO que o passo, e nao mais claro. Branco 25% sobre o azul
     mistura para #4091C8 e o numero branco em cima fica em 3,44:1 — reprova
     para texto de 12px. O tom escuro da 9,17:1 e ainda le como "dentro" do
     passo azul. */
  background: var(--azul-escuro); color: var(--sobre-cor);
}
.funil__passo--aqui .funil__conta { color: var(--sobre-cor); }
.funil__passo--aqui::after { border-color: var(--azul); }

.funil__passo:hover:not(.funil__passo--aqui) { background: var(--bg); }
.funil__passo:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; z-index: 2; }

/* ------------------------------------------------------- selecao em lote */
.col-marca { width: 36px; text-align: center; }
.col-marca input { width: 18px; height: 18px; cursor: pointer; }

/* A barra ocupa espaco sempre (senao a tabela pula quando ela aparece), mas so
   fica visivel e clicavel com alguem marcado. */
.lote {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  border: 1px dashed var(--border); border-radius: var(--raio);
  background: var(--bg); opacity: .5;
  transition: opacity .12s, border-color .12s, background .12s;
}
.lote:not(.lote--ativa) .lote__acoes { pointer-events: none; }
.lote--ativa {
  opacity: 1; border-style: solid; border-color: var(--azul-300); background: var(--surface);
}
.lote__contagem { font-size: 13.5px; color: var(--muted); }
.lote__contagem strong { font-family: var(--fonte-titulo); font-size: 17px; color: var(--text); }
.lote__acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.linha-marcada > td { background: var(--realce); }
/* Quem acabou de se mover fica marcado por um instante: sem isso a lista volta
   igual e nao ha sinal de que algo aconteceu. */
.linha-moveu > td { background: var(--verde-bg); }

@media (max-width: 640px) {
  .lote__acoes { margin-left: 0; width: 100%; }
}

/* O botao da linha ganhou o nome da etapa de destino e passou a quebrar letra
   a letra dentro da coluna estreita de Acoes. Botao nao quebra: quem cede e a
   largura da coluna, e a tabela ja rola de lado quando precisa. */
.tabela td[data-rotulo="Ações"] { min-width: 190px; }
.tabela td[data-rotulo="Ações"] .btn,
.lote__acoes .btn { white-space: nowrap; }

/* No celular a celula vira bloco e ai a largura minima atrapalha. */
@media (max-width: 860px) {
  .tabela td[data-rotulo="Ações"] { min-width: 0; }
}

/* Etiqueta de status nao quebra: espremida entre colunas ela virava uma coluna
   de letras. Quem cede e a largura da tabela, que ja rola de lado. */
.tabela .tag { white-space: nowrap; }
.tabela td[data-rotulo="Ações"] { min-width: 0; }
.tabela td[data-rotulo="Contato"] { min-width: 190px; }

/* Origem e uma palavra so ("Indicacao", "InfoJobs") — quebrar no meio dela nao
   ganha espaco nenhum e so atrapalha a leitura. */
.tabela td[data-rotulo="Origem"] { white-space: nowrap; }

/* Barra "Candidaturas por vaga": a trilha e sempre cheia (e a referencia), e a
   fita dentro dela mede o volume DESTA vaga contra a mais procurada. As cores
   dentro da fita sao a composicao. Sem a trilha, uma fita de 9% pareceria um
   erro de renderizacao em vez de "esta vaga atrai pouco". */
.vaga-fita {
  height: 12px; margin-top: 6px;
  border-radius: 6px; background: var(--cinza); overflow: hidden;
}
.vaga-fita__cheia {
  display: flex; height: 100%; border-radius: 6px; overflow: hidden;
  min-width: 3%;   /* volume minusculo ainda precisa ser visto */
  transition: width .2s;
}

/* Bolinha de legenda: a cor tem de aparecer junto do nome, senao a pessoa
   precisa adivinhar qual pedaco e qual. */
.legenda-ponto {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  vertical-align: baseline; margin-right: 1px;
}

/* Etapa que nenhuma vaga do recorte tem. Fica visivel — some-la faria a regua
   do funil mudar de tamanho conforme o filtro, e ninguem entenderia por que. */
.met-etapa--ausente {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 10px 0; color: var(--muted-soft);
  border-top: 1px dashed var(--border);
}
.met-etapa--ausente > span:first-child { font-weight: 700; }
.met-etapa__nota { font-size: 12.5px; font-style: italic; }

/* Nome de lugar nao se parte no meio: "Carpin a/PE" nao e uma cidade. O
   `overflow-wrap: break-word` do body so age quando a palavra NAO CABE, entao
   o que isto diz e "prefira alargar a coluna a partir a palavra" — e a tabela
   ja rola de lado quando precisa. */
.tabela td[data-rotulo="Cidade"],
.tabela td[data-rotulo="Filial"],
.tabela td[data-rotulo="Unidade"] { white-space: nowrap; }

@media (max-width: 860px) {
  /* Em celular a celula vira bloco com largura total: ai pode quebrar. */
  .tabela td[data-rotulo="Cidade"],
  .tabela td[data-rotulo="Filial"],
  .tabela td[data-rotulo="Unidade"] { white-space: normal; }
}

/* ===========================================================================
   VARIANTES E TAMANHOS — a lista fechada do shadcn/ui, com as cores da marca.

   A folha tinha primario, contorno, fantasma e perigo. Faltavam os dois que
   mais fazem falta no dia a dia: o SECUNDARIO (preenchido, de menor enfase,
   para ficar ao lado do primario sem competir) e o LINK (acao que e texto).
   Sem eles, toda vez que uma tela precisava de um terceiro peso, alguem
   escolhia uma cor a mao — que e como se acumulam dez botoes diferentes.
=========================================================================== */

/* Preenchido, de menor enfase. O par ao lado do primario. */
.btn--secundaria {
  background: var(--secundaria); color: var(--secundaria-txt);
  border-color: transparent;
}
.btn--secundaria:hover { background: var(--realce); color: var(--realce-txt); }

/* Acao que e TEXTO. Nao confundir com fantasma: o fantasma tem area de
   clique e ganha fundo no hover; o link e sublinhado e nao tem caixa. */
.btn--link {
  background: transparent; color: var(--primaria);
  border-color: transparent; padding-left: 4px; padding-right: 4px;
  min-height: auto; text-decoration: underline; text-underline-offset: 3px;
}
.btn--link:hover { background: transparent; color: var(--azul-600); }

/* --- tamanhos ----------------------------------------------------------
   O alvo de 44px vale para tudo que se toca. Os tamanhos menores existem
   para botao DENTRO de linha de tabela, onde 44px empurraria a linha; nesses
   o alvo e garantido pela altura da propria linha. No celular todos voltam
   para 44px (ja havia regra para o pequeno; agora vale para os tres). */
.btn--xs     { min-height: 28px; padding: 3px 10px; font-size: 12.5px; gap: 5px; }
.btn--grande { min-height: 52px; padding: 14px 28px; font-size: 16px; }

/* Botao que e so icone: quadrado, sem rotulo visivel. Exige aria-label. */
.btn--icone {
  min-height: var(--alvo); width: var(--alvo);
  padding: 0; flex: 0 0 auto;
}
.btn--icone.btn--pequeno { min-height: 36px; width: 36px; }

@media (max-width: 860px) {
  .btn--xs { min-height: var(--alvo); padding: 6px 14px; font-size: 14px; }
}

/* ===========================================================================
   ANATOMIA DO CARTAO — as partes que o shadcn define, para todo cartao ter
   as mesmas. O topo e o titulo ja existiam; faltavam descricao, area de acao,
   corpo e rodape, e por isso cada tela improvisava com style inline.
=========================================================================== */

.cartao__desc {
  margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--suave-txt);
}
/* A acao vive no topo, encostada a direita — e o lugar onde o olho procura. */
.cartao__acao { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cartao__corpo { display: grid; gap: var(--sp-3); }
.cartao__rodape {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--linha);
}
.cartao__rodape--fim { justify-content: flex-end; }

/* ===========================================================================
   PASSE VISUAL — o acabamento que o shadcn/ui tem e que faltava aqui.

   Nada de cor nova: a paleta e a mesma, as fontes sao as mesmas. O que muda e
   RITMO — peso do cabecalho, respiro das celulas, altura das pastilhas,
   profundidade dos campos. Vem no fim da folha de proposito, para vencer as
   regras anteriores sem eu ter de reescrever cada uma.
=========================================================================== */

/* --- Tabela ------------------------------------------------------------
   O cabecalho ganha superficie propria em vez de so uma linha embaixo: e o
   que separa "isto e rotulo" de "isto e dado" antes de qualquer leitura. */
@media (min-width: 861px) {
  .tabela thead th {
    background: var(--suave);
    color: var(--suave-txt);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 1;
  }
  .tabela thead th:first-child { border-top-left-radius: var(--raio-md); }
  .tabela thead th:last-child  { border-top-right-radius: var(--raio-md); }

  /* Linha separada por divisoria leve, nao por borda de container. A ultima
     nao leva linha: separador depois do ultimo item nao separa nada. */
  .tabela tbody tr { border-bottom: 1px solid var(--linha); }
  .tabela tbody tr:last-child { border-bottom: 0; }
  .tabela tbody td { padding: 14px; }
  .tabela td.principal { padding: 14px; }

  /* O primeiro dado da linha e a ancora: peso maior, cor cheia. */
  .tabela td.principal a { font-size: 15px; font-weight: 600; }
}

/* --- Pastilha ----------------------------------------------------------
   Altura fixa e uma linha so. Pastilha que quebra em duas empurra a linha da
   tabela e faz a lista inteira dancar. */
.tag {
  height: 23px; padding: 0 9px; font-size: 12px; letter-spacing: .01em;
  border-radius: var(--raio-full); white-space: nowrap;
}
/* No celular a pastilha e' o rotulo de status da linha inteira, e 11,5px
   com o braco esticado nao se le. */
@media (max-width: 767px) {
  .tag { height: 24px; font-size: 12.5px; padding: 0 10px; }
}
.tag svg { flex: none; }

/* --- Campo -------------------------------------------------------------
   Sombra interna minima: da a impressao de reentrancia, que e o que faz o
   campo parecer campo. E o foco vira o anel, sem a borda mudar de cor — borda
   que muda desloca o conteudo em 1px e o campo pula. */
.entrada, select, textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="month"] {
  box-shadow: inset 0 1px 2px rgba(26, 26, 26, .05);
  border-radius: var(--raio-md);
  transition: border-color .12s, box-shadow .12s;
}
.entrada:focus, select:focus, textarea:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
  border-color: var(--anel);
  box-shadow: inset 0 1px 2px rgba(26, 26, 26, .05), 0 0 0 3px var(--realce);
  outline: none;
}
.entrada::placeholder, textarea::placeholder { color: var(--suave-txt); opacity: 1; }

/* --- Cartao ------------------------------------------------------------
   Borda mais leve e sombra quase ausente: o que separa o cartao do fundo e o
   contraste entre o branco e o cinza da pagina, nao a moldura. Cartao com
   borda forte E sombra parece recortado e colado por cima. */
.cartao {
  border: 1px solid var(--linha);
  box-shadow: 0 1px 2px rgba(26, 26, 26, .04);
}
.cartao__topo {
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--linha);
}
.cartao__titulo { font-size: 17px; letter-spacing: .01em; }

/* Cartao que so tem cabecalho nao precisa de linha separando de nada. */
.cartao > .cartao__topo:last-child {
  padding-bottom: 0; margin-bottom: 0; border-bottom: 0;
}

/* --- Botao -------------------------------------------------------------
   Peso 600 em vez de 700 e corpo um pouco menor: o botao para de gritar mais
   alto que o titulo da tela. */
.btn {
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  border-radius: var(--raio-md);
  box-shadow: 0 1px 2px rgba(26, 26, 26, .05);
}
.btn--fantasma, .btn--link { box-shadow: none; }
.btn--linha { box-shadow: none; border-color: var(--border); }
.btn--linha:hover { border-color: var(--azul-200); }

/* --- Abas --------------------------------------------------------------
   Aba nao selecionada perde a borda: um conjunto de abas com todas emolduradas
   compete com o conteudo. Fica so a selecionada marcada. */
.abas a { border-color: transparent; box-shadow: none; }
.abas a:hover { border-color: var(--border); }

/* ===========================================================================
   COMPONENTES NOVOS — os da lista do shadcn que resolvem buraco real aqui.
=========================================================================== */

/* --- Spinner -----------------------------------------------------------
   O botao "Escrever com IA" espera ate 27 segundos. Ele ja trocava o rotulo
   para "Escrevendo...", mas texto parado por meio minuto parece travado. Uma
   coisa girando diz "esta vivo" sem precisar ler. */
.spinner {
  display: inline-block; width: 1em; height: 1em; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: girar .6s linear infinite;
  vertical-align: -0.125em;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Quem respeita "reduzir movimento" nao ve giro — ve pulso. O aviso continua,
   sem o movimento que dispara enxaqueca e enjoo em quem tem sensibilidade. */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: pulsar 1.2s ease-in-out infinite; }
  @keyframes pulsar { 50% { opacity: .3; } }
}

.btn[data-ocupado] { pointer-events: none; opacity: .8; }

/* --- Dialogo -----------------------------------------------------------
   Substitui o confirm() do navegador. O nativo nao deixa explicar a
   consequencia, nao aceita a marca e em alguns navegadores nem diz de qual
   pagina veio. Usa o <dialog> do HTML: modal, foco preso e Esc ja vem de
   graca, sem uma linha de JavaScript para isso. */
.dialogo {
  border: 0; padding: 0; max-width: 440px; width: calc(100vw - 32px);
  border-radius: var(--raio-xl);
  background: var(--flutuante); color: var(--flutuante-txt);
  box-shadow: var(--sombra-g);
}
.dialogo::backdrop { background: rgba(26, 42, 60, .45); }
.dialogo__corpo { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.dialogo__titulo {
  font-family: var(--fonte-titulo); font-size: 18px; margin: 0 0 8px; color: var(--text);
}
.dialogo__texto { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.dialogo__acoes {
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
}
@media (max-width: 480px) {
  /* No celular os dois botoes ocupam a linha inteira: alvo maior e sem risco
     de tocar em "confirmar" querendo tocar em "cancelar". */
  .dialogo__acoes { flex-direction: column-reverse; }
  .dialogo__acoes .btn { width: 100%; }
}

/* --- Grupo de campo ----------------------------------------------------
   Prefixo e sufixo colados ao campo: "R$" antes do salario e "%" depois do
   percentual. Sem isso a unidade vive no rotulo ("Salario - de (R$)") e some
   da vista assim que a pessoa comeca a digitar. */
.grupo-campo { display: flex; align-items: stretch; }
.grupo-campo__fixo {
  display: inline-flex; align-items: center; padding: 0 10px;
  background: var(--suave); color: var(--suave-txt);
  border: 1px solid var(--campo);
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.grupo-campo__fixo:first-child {
  border-right: 0; border-radius: var(--raio-md) 0 0 var(--raio-md);
}
.grupo-campo__fixo:last-child {
  border-left: 0; border-radius: 0 var(--raio-md) var(--raio-md) 0;
}
.grupo-campo .entrada { border-radius: 0; }
.grupo-campo__fixo:first-child + .entrada { border-radius: 0 var(--raio-md) var(--raio-md) 0; }
.grupo-campo .entrada:has(+ .grupo-campo__fixo) { border-radius: var(--raio-md) 0 0 var(--raio-md); }
/* O foco tem de acender o grupo INTEIRO, senao o anel corta no meio. */
.grupo-campo:focus-within .grupo-campo__fixo { border-color: var(--anel); }

/* --- Combobox ----------------------------------------------------------
   Sao 645 cidades em Sao Paulo. Um <select> com 645 opcoes obriga a rolar ou
   a adivinhar a primeira letra; aqui se digita e a lista filtra. O <select>
   continua no formulario por baixo — se o JavaScript nao rodar, o campo
   funciona como sempre funcionou. */
.combo { position: relative; }
.combo__campo { width: 100%; }
.combo__lista {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 280px; overflow-y: auto;
  background: var(--flutuante); color: var(--flutuante-txt);
  border: 1px solid var(--border); border-radius: var(--raio-md);
  box-shadow: var(--sombra-g);
  list-style: none; margin: 0; padding: 4px;
}
.combo__lista[hidden] { display: none; }
.combo__item {
  padding: 8px 10px; border-radius: var(--raio-sm); cursor: pointer;
  font-size: 14px; line-height: 1.3;
}
.combo__item[aria-selected="true"], .combo__item:hover {
  background: var(--realce); color: var(--realce-txt);
}
.combo__vazio { padding: 10px; color: var(--suave-txt); font-size: 13.5px; }

/* Botao, pastilha e link de acao dentro de tabela NUNCA quebram no meio da
   palavra: "Edi tar" e "Ativ a" nao sao palavras. Quem cede e a largura da
   coluna, e a tabela ja rola de lado quando precisa. */
.tabela .btn,
.tabela .tag,
.tabela td > a:only-child { white-space: nowrap; }

@media (max-width: 860px) {
  /* No celular a celula vira bloco de largura inteira e pode quebrar. */
  .tabela .btn, .tabela .tag, .tabela td > a:only-child { white-space: normal; }
}

/* ===========================================================================
   ALINHAMENTO DE FORMULARIO — campos lado a lado com rotulos de alturas
   diferentes.

   O caso: "E-mail de contato do RH" cabe em uma linha e "WhatsApp exibido na
   tira do topo e no rodape" ocupa duas. Cada .campo empilha rotulo + campo por
   conta propria, entao o campo da direita comeca uma linha abaixo do da
   esquerda. Fica torto, e ninguem escreve rotulo pensando nisso.

   A correcao e SUBGRID: cada .campo passa a ocupar duas faixas da grade do
   formulario — uma para o rotulo, outra para o controle — em vez de ter grade
   propria. Assim TODOS os rotulos de uma mesma linha dividem a mesma faixa, e
   todos os controles dividem a seguinte. O rotulo mais alto define a altura da
   faixa e os outros se alinham nela sozinhos.

   Reserva para navegador sem subgrid: o rotulo ganha altura minima de duas
   linhas. Gasta um pouco de espaco vertical, mas nao deixa torto.
=========================================================================== */

/* A correcao NAO e subgrid.
   Tentei: `.campo` ocupando duas faixas da grade, rotulo na primeira e
   controle na segunda. Funcionou em 30 das 31 linhas e QUEBROU o resto — cada
   .campo tem um numero diferente de filhos (rotulo, controle, dica, as vezes
   um segundo rotulo envolvendo uma caixa de marcar), e forcar todos eles na
   segunda faixa empilha dois itens na MESMA celula. Na tela de usuarios a dica
   ficou escrita por cima do campo.

   O que funciona sem depender da estrutura: reservar altura para DUAS linhas
   de rotulo. O rotulo curto ocupa uma e sobra espaco; o de duas linhas cabe; e
   os controles de uma mesma linha comecam todos na mesma altura, sempre.
   Custa uma linha de respiro nas grades em que todo rotulo e curto — e um
   preco menor do que uma linha torta ou, pior, um texto sobre o outro. */
.form-grade > .campo > label:first-child {
  min-height: calc(1.3em * 2);
  display: flex;
  align-items: flex-end;
  margin-bottom: 6px;
}

/* Coluna unica nao tem o que alinhar, e a reserva so gastaria altura. */
@media (max-width: 640px) {
  .form-grade > .campo > label:first-child {
    min-height: 0; display: block;
  }
}



/* Grade de campos cuja EXPLICACAO e longa (a tela de Configuracoes: cada
   parametro vem com uma frase inteira descrevendo o que faz).

   Tres colunas ali nao funcionam por dois motivos, e o segundo e o que
   importa: rotulo de nove linhas ao lado de um de tres deixa os campos em
   alturas diferentes, e nenhuma reserva de altura conserta uma diferenca
   dessas. Texto explicativo tambem nao se le bem em coluna estreita.
   Uma coluna, campo com largura de leitura. */
.form-grade--texto { grid-template-columns: 1fr; gap: var(--sp-4); }
.form-grade--texto > .campo > label:first-child {
  min-height: 0; display: block; margin-bottom: 4px;
}
.form-grade--texto > .campo .entrada,
.form-grade--texto > .campo select { max-width: 560px; }
.form-grade--texto > .campo textarea { max-width: 100%; }
.form-grade--texto > .campo .dica { max-width: 68ch; }

/* ===========================================================================
   ESPIA — a previa da vaga ao passar o mouse no card.

   O card diz titulo, lugar e contrato. Nao diz o que a pessoa vai FAZER, que e
   o que decide o clique — e quem procura emprego abre uma vaga, volta, abre
   outra, volta. A espia adianta o comeco da descricao, a faixa salarial e
   quantas posicoes ha.

   SO NO MOUSE. `(hover: hover) and (pointer: fine)` deixa o toque de fora: no
   celular nao existe "passar por cima", e uma caixa que abrisse ao tocar
   roubaria o toque do proprio link. La a informacao segue na pagina da vaga,
   a um toque.
=========================================================================== */
.espia { display: none; }

@media (hover: hover) and (pointer: fine) {
  .vaga-card { position: relative; }

  .espia {
    display: block;
    position: absolute; left: 0; right: 0; top: calc(100% - 8px); z-index: 30;
    padding: 14px 16px 12px;
    background: var(--flutuante); color: var(--flutuante-txt);
    border: 1px solid var(--border); border-radius: var(--raio-md);
    box-shadow: var(--sombra-g);
    /* Nasce invisivel E sem receber ponteiro: uma caixa transparente por cima
       do card seguinte roubaria o hover dele. */
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-4px);
    /* O atraso de 350ms na ENTRADA e o que impede a caixa de piscar quando o
       ponteiro so atravessa a grade a caminho de outra coisa. Na saida nao ha
       atraso: sumir tem de ser imediato. */
    transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
  }

  .vaga-card:hover .espia,
  .vaga-card:focus-visible .espia {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition-delay: .35s, .35s, 0s;
  }

  /* SEMPRE para baixo. Havia uma regra que abria para cima "na ultima faixa"
     usando nth-last-child(-n+3) — e o card do Banco de Talentos e o 4o filho
     da grade, entao a regra pegava os cards 2 e 3, que estao na PRIMEIRA
     linha, e a previa deles subia por cima do heroi. Heuristica de posicao por
     nth-child nao sabe onde a linha quebra; para baixo funciona sempre, e a
     pagina rola. A caixa tem a largura do card, entao tambem nao vaza de lado. */

  /* O card SEGUINTE vem depois no DOM e pintava por cima da previa. Subir o
     z-index do card em hover poe a previa acima de todos os irmaos. */
  .vaga-card:hover, .vaga-card:focus-visible { z-index: 31; }

  .espia__resumo {
    margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted);
  }
  .espia__fatos { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
  .espia__fato {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; font-weight: 700; color: var(--text);
  }
  .espia__fato svg { color: var(--primaria); flex: none; }
  .espia__leia {
    display: block; font-size: 12.5px; font-weight: 700; color: var(--primaria);
  }
}

/* Quem pediu menos movimento ve a caixa aparecer sem deslizar. */
@media (prefers-reduced-motion: reduce) {
  .espia { transition: opacity .01s !important; transform: none !important; }
}

/* Estado vazio da home: mais generoso que o do painel, porque aqui ele e a
   unica coisa na secao e fala com quem chegou de fora. */
.vazio--home { padding: var(--sp-7) var(--sp-5); max-width: 620px; margin: 0 auto; }
.vazio--home svg { color: var(--primaria); opacity: .7; }
.vazio--home h3 { margin: 12px 0 6px; font-size: 20px; }
.vazio--home p { color: var(--muted); }

/* =====================================================================
   v1.25 — triagem de verdade, marcadores lado a lado, botao do WhatsApp
   ===================================================================== */

/* Na pagina da vaga os marcadores explicados ficam ate 2 por linha: um
   embaixo do outro, tres marcadores empurravam a descricao para fora da
   primeira tela. Um so ocupa a linha inteira. */
@media (min-width: 640px) {
  .marcadores-vaga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marcadores-vaga > .marcador-linha:only-child { grid-column: 1 / -1; }
}

/* Botao do WhatsApp: verde do canal e o nome do canal no rotulo. E o
   mesmo par da etiqueta de sucesso (verde-bg / verde-escuro, 4,5:1); no
   hover inverte — contraste e simetrico, branco sobre verde-escuro passa
   igual. */
.btn--whats { background: var(--verde-bg); color: var(--verde-escuro); border-color: var(--verde); }
.btn--whats svg { color: var(--verde-escuro); }
.btn--whats:hover { background: var(--verde-escuro); color: var(--sobre-cor); border-color: var(--verde-escuro); }
.btn--whats:hover svg { color: var(--sobre-cor); }
.btn--whats-vivo { box-shadow: 0 0 0 3px var(--verde-bg); }

/* Editor de pergunta: a resposta que desclassifica fica marcada em
   vermelho ao lado do proprio texto, para o corte ser lido junto dela. */
.escolha--corte { font-size: 13.5px; }
.escolha--corte input { accent-color: var(--verm-escuro); }
.escolha--corte:has(input:checked) { border-color: var(--verm-300); background: var(--verm-100); color: var(--verm-escuro); }
.triagem-opcao-linha .escolha--corte { min-height: 40px; padding: 4px 10px; white-space: nowrap; }
.editor-pergunta [data-so-tipos][hidden] { display: none; }
a.tag { text-decoration: none; }
a.tag:hover { filter: brightness(.95); }

/* Quadro de respostas: a coluna do candidato fica fixa na rolagem
   horizontal, e a celula que cortou vai em vermelho. */
.resp-dist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tabela--respostas th, .tabela--respostas td { min-width: 140px; vertical-align: top; }
.tabela--respostas th:first-child, .tabela--respostas td:first-child {
  position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 180px;
}
.tabela--respostas td.resp--corta { color: var(--verm-escuro); font-weight: 700; }
.tabela--respostas tr.resp-cortado td.principal { box-shadow: inset 4px 0 0 var(--verm-300); }
@media (max-width: 860px) {
  .tabela--respostas th:first-child, .tabela--respostas td:first-child { position: static; min-width: 0; }
}

/* =====================================================================
   QA rodada 1 — tabela, alvo de toque e indicio de rolagem
   ===================================================================== */

/* A tabela so volta a ser TABELA no desktop.
   Ela voltava em 768px, e entre 768 e 1023 o painel ainda nao tem a coluna
   lateral colapsada nem largura util: as sete colunas do funil da vaga
   espremiam a linha ate 642px de altura, com o nome do candidato quebrando em
   nove linhas, e as colunas da ponta (Acoes, Cadastro) saiam da vista sem
   nenhum sinal de que era possivel rolar. Ate 1023px vale a lista de cartoes,
   que ja existe e nao esconde nada. */
@media (min-width: 1024px) {
  .tabela thead { display: table-header-group; }
  .tabela thead th {
    text-align: left; padding: 10px 12px; font-size: 12.5px;
    color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--border);
  }
  .tabela tbody tr {
    display: table-row; background: var(--surface); border: 0;
    border-bottom: 1px solid var(--border); border-radius: 0;
    padding: 0; margin: 0; box-shadow: none;
  }
  .tabela tbody tr:hover { background: var(--realce); }
  .tabela tbody td { display: table-cell; padding: 13px 12px; vertical-align: middle; }
  .tabela tbody td::before { display: none; }
  .tabela td.principal { display: table-cell; padding: 13px 12px; }
}

/* Quando mesmo assim a tabela passa da largura, a caixa rola — e AGORA diz
   que rola: as duas sombras laterais sao pintadas com background-attachment
   local, entao elas somem sozinhas quando a rolagem chega ao fim daquele lado.
   Sem isto a coluna de acoes simplesmente nao existia para quem olhava. */
.tabela-envolve {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio-card); box-shadow: var(--sombra);
  max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  background-image:
    linear-gradient(to right, var(--surface) 30%, rgba(0, 0, 0, 0)),
    linear-gradient(to right, rgba(0, 0, 0, 0), var(--surface) 70%),
    linear-gradient(to right, rgba(2, 32, 71, .13), rgba(2, 32, 71, 0)),
    linear-gradient(to left,  rgba(2, 32, 71, .13), rgba(2, 32, 71, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* A barra do funil tambem rola de lado sem avisar: com sete etapas so a
   primeira e meia cabiam, e nada dizia que havia mais. */
.funil {
  background-image:
    linear-gradient(to right, var(--bg) 30%, rgba(0, 0, 0, 0)),
    linear-gradient(to right, rgba(0, 0, 0, 0), var(--bg) 70%),
    linear-gradient(to right, rgba(2, 32, 71, .12), rgba(2, 32, 71, 0)),
    linear-gradient(to left,  rgba(2, 32, 71, .12), rgba(2, 32, 71, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 30px 100%, 30px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* ---------------------------------------------------------------------
   Alvo de toque por PONTEIRO, nao por largura.
   As regras de 44px estavam presas a max-width:767px, entao um tablet de
   820px em pe — dedo, nao mouse — recebia os alvos de 36px do desktop.
   O que decide o tamanho do alvo e a polpa do dedo, e nao a largura da tela.
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn--pequeno, .btn--xs { min-height: var(--alvo); padding: 8px 14px; }

  /* Caixa de selecao de candidato no funil: 18x18 e o pior alvo que existe,
     e a coluna inteira e' area morta em volta dela. */
  .col-marca { position: relative; }
  .col-marca input[type="checkbox"] { width: 24px; height: 24px; }

  /* Acao do organograma: 26x24 encolhido pelo zoom do quadro virava 10x10. */
  .org-acao { width: 34px; height: 34px; }

  /* Nas tabelas, so o texto do nome era clicavel dentro de uma linha de 78px. */
  .tabela td.principal > a { display: inline-block; padding: 8px 0; }

  /* Pastilha que e link (filtro rapido), telefone de loja, resumo de menu. */
  a.tag, .tag-link { min-height: 32px; padding: 0 12px; }
  .lojas-tel, a[href^="tel:"] { display: inline-flex; align-items: center; min-height: var(--alvo); }
  summary.btn, .menu-motivo > summary { min-height: var(--alvo); }
}

/* Campo de arquivo nativo tem 21px de altura e nenhum estilo: desalinha na
   grade e fica muito abaixo do alvo minimo. O seletor ::file-selector-button
   e o unico jeito de dar aparencia de botao ao gatilho nativo. */
input[type="file"] {
  display: block; width: 100%; max-width: 100%;
  min-height: var(--alvo); padding: 6px 10px;
  border: 1px solid var(--campo); border-radius: var(--raio);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px;
}
input[type="file"]:focus-visible { outline: 2px solid var(--anel); outline-offset: 1px; }
input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 7px 14px; min-height: 32px;
  border: 1px solid var(--azul-200); border-radius: var(--raio);
  /* --primaria sobre --realce da 4,12:1 e aqui ha texto: o par escuro
     resolve sem mudar a familia de cor. */
  background: var(--realce); color: var(--azul-600);
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--azul-100); }

/* Marca de campo obrigatorio. O asterisco e' aria-hidden: o `required` do
   proprio campo ja diz isso a quem usa leitor de tela, e ouvir "asterisco"
   depois do nome do campo so atrapalha. */
.obrigatorio { color: var(--verm-escuro); font-weight: 700; }

/* ---------------------------------------------------------------------
   Largura de leitura.
   A descricao da vaga e o texto do banco de talentos ocupavam a coluna
   inteira: 100 e 94 caracteres por linha, medidos a 1280px. O conforto de
   leitura fica entre 45 e 75; acima de 90 o olho erra a linha ao voltar para
   a esquerda e a pessoa rele o mesmo trecho.

   Vale para PARAGRAFO e LISTA, nao para o bloco: o cartao continua com a
   largura da coluna, e so o texto corrido dentro dele e' limitado — senao
   sobraria uma faixa branca do lado direito de cada cartao.
   --------------------------------------------------------------------- */
.vaga-corpo p,
.vaga-corpo li,
.pagina-inst p,
.pagina-inst li,
.cartao > p,
.cartao ol li,
.pagina-topo__sub,
.painel__sub,
.dica { max-width: 68ch; }

/* A dica costuma ficar sob um campo estreito, onde o limite nem chega a valer;
   ela entra na lista por causa das telas de configuracao e do dashboard, em que
   a mesma classe carrega um paragrafo de largura inteira (144 caracteres por
   linha, medidos na visao geral). */

/* Texto de apoio de secao, que fica centralizado sob o titulo. */
.secao__titulo p { max-width: 68ch; margin-left: auto; margin-right: auto; }

/* =====================================================================
   Quadros de resposta: triagem e provas
   ===================================================================== */

/* Um grafico por pergunta, lado a lado. `auto-fit` com um minimo em vez de
   numero fixo de colunas: com duas perguntas sao duas colunas largas, com seis
   sao tres por linha, e no celular vira uma so — sem media query nenhuma. */
.graf-grade {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.graf-cartao {
  border: 1px solid var(--border); border-radius: var(--raio-card);
  padding: var(--sp-4); background: var(--surface); min-width: 0;
}
.graf-cartao__titulo {
  font-family: var(--fonte-titulo); font-size: 15.5px; margin: 0;
  color: var(--text); line-height: 1.35;
}
.graf-cartao__nota { color: var(--muted); font-size: 13px; margin: 4px 0 12px; }

/* Texto livre nao vira grafico: contar quantas vezes cada frase apareceu nao
   diz nada quando cada resposta e diferente. Vale a lista do que foi escrito. */
.resp-livres { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.resp-livres li {
  background: var(--bg); border-radius: var(--raio); padding: 8px 10px;
  font-size: 13.5px; color: var(--text); border-left: 3px solid var(--border);
}

/* Nota com barra: a barra deixa comparar de relance, o numero diz quanto foi.
   Os dois juntos, porque a cor sozinha nao pode carregar a informacao. */
.nota-linha { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.nota-trilho {
  flex: 1 1 auto; min-width: 44px; height: 8px;
  background: var(--cinza); border-radius: var(--raio-full); overflow: hidden;
}
.nota-cheio { display: block; height: 100%; border-radius: var(--raio-full); }
.nota-linha strong { font-variant-numeric: tabular-nums; font-size: 14px; }

/* =====================================================================
   "O que o candidato responde": triagem e prova como duas etapas
   ===================================================================== */

/* Cada etapa e' um degrau numerado, e nao um cartao solto: a numeracao diz que
   uma vem antes da outra — a triagem ao se candidatar, a prova depois. */
.etapa-resposta { padding: var(--sp-4) 0; border-top: 1px solid var(--border); }
.etapa-resposta:first-of-type { border-top: 0; padding-top: 0; }
.etapa-resposta__cab {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.etapa-resposta__cab > div { flex: 1 1 220px; min-width: 0; }
.etapa-resposta__cab > .tag { flex: none; }
.etapa-resposta__num {
  flex: none; width: 26px; height: 26px; border-radius: var(--raio-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--realce); color: var(--azul-600);
  font-family: var(--fonte-titulo); font-size: 14px; font-weight: 700;
}

/* A prova vira sanfona: fechada, ela e' uma linha com titulo e contagem; so
   abre a que pede alguma coisa. Antes as sete etiquetas de cada prova saiam
   todas de uma vez e a tela virava um muro. */
.prova-bloco { border: 1px solid var(--border); border-radius: var(--raio-card); margin-bottom: 10px; }
.prova-bloco:last-child { margin-bottom: 0; }
.prova-bloco__cab {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px var(--sp-4); cursor: pointer; list-style: none;
  min-height: var(--alvo); border-radius: var(--raio-card);
}
.prova-bloco__cab::-webkit-details-marker { display: none; }
.prova-bloco__cab:hover { background: var(--bg); }
.prova-bloco__cab:focus-visible { outline: 3px solid var(--anel); outline-offset: -3px; }
.prova-bloco[open] > .prova-bloco__cab { border-bottom: 1px solid var(--border); border-radius: var(--raio-card) var(--raio-card) 0 0; }
.prova-bloco[open] > .prova-bloco__cab .acordeao__seta { transform: rotate(90deg); }
.prova-bloco__corpo { padding: var(--sp-4); }

/* Linha da prova que pede leitura: a faixa a esquerda basta, e a palavra que
   explica o motivo esta na propria linha — cor nenhuma carrega o recado. */
.prova-pede > td.principal { box-shadow: inset 3px 0 0 var(--amarelo-warn); }

/* =====================================================================
   Simplificacao das telas longas
   ===================================================================== */

/* Versoes: 49 cartoes abertos viravam 17 mil pixels. Cada um vira sanfona;
   so o mais recente nasce aberto. */
.ver-item { padding: 0; }
.ver-item__cab {
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--sp-4) var(--cartao-pad); cursor: pointer; list-style: none;
  min-height: var(--alvo); margin: 0; border-bottom: 0;
}
.ver-item__cab::-webkit-details-marker { display: none; }
.ver-item__cab:hover { background: var(--bg); }
.ver-item__cab:focus-visible { outline: 3px solid var(--anel); outline-offset: -3px; }
.ver-item__cab .cartao__titulo { flex: 1 1 auto; min-width: 0; }
.ver-item[open] > .ver-item__cab { border-bottom: 1px solid var(--border); }
.ver-item[open] > .ver-item__cab .acordeao__seta { transform: rotate(90deg); }
.ver-item > p { padding: 0 var(--cartao-pad); }
.ver-item > p:last-child { padding-bottom: var(--sp-5); }

/* Configuracoes: um unico "Salvar" a 6.755px do topo. A barra desce junto com
   a rolagem, com a sombra do lado de cima para nao parecer colada no conteudo.
   `position: sticky` e nao `fixed`: ela pertence ao formulario, e some quando
   a pessoa chega ao fim da pagina de verdade. */
.salvar-fixo {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  justify-content: space-between;
  margin: var(--sp-4) 0 0; padding: 12px var(--cartao-pad);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio-card); box-shadow: 0 -6px 18px rgba(2, 32, 71, .10);
}
.salvar-fixo__nota {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 13.5px; min-width: 0;
}
.salvar-fixo__nota svg { flex: none; color: var(--primaria); }
@media print { .salvar-fixo { position: static; box-shadow: none; } }

/* Sumario da documentacao: gruda no topo enquanto a pessoa desce as sete
   secoes. Rola de lado no celular em vez de quebrar em quatro linhas. */
.doc-sumario {
  position: sticky; top: 0; z-index: 15;
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: var(--sp-4); padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio-card); box-shadow: var(--sombra);
}
.doc-sumario a {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 0 12px; border-radius: var(--raio-full);
  font-size: 13.5px; font-weight: 700; color: var(--muted); text-decoration: none;
}
.doc-sumario a:hover { background: var(--realce); color: var(--realce-txt); }
/* O alvo do link e o cartao inteiro; sem isto o cabecalho dele fica escondido
   atras do proprio sumario grudado. */
[id^="doc-"], [id^="cfg-"], [id^="met-"] { scroll-margin-top: 84px; }
@media (max-width: 767px) {
  .doc-sumario { flex-wrap: nowrap; overflow-x: auto; }
  .doc-sumario a { flex: none; min-height: var(--alvo); }
}
@media (pointer: coarse) { .doc-sumario a { min-height: var(--alvo); } }

/* Link dentro de caixa de aviso.
   O aviso tem fundo colorido, e o azul de link (--primaria) sobre o azul-100
   do aviso da 4,12:1 — abaixo do minimo para texto. E' o mesmo caso do botao
   do campo de arquivo: cor de marca sobre fundo claro da mesma familia. O par
   escuro resolve sem trocar a familia. */
.aviso a { color: var(--azul-600); }
.aviso--atencao a { color: var(--dourado); }
.aviso--erro a { color: var(--verm-escuro); }