/* =====================================================================
   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;
  /* Par da --verde-borda: a irma `.pendencia--ok` usava token e a
     `.pendencia--falta` tinha o hex cru na regra. */
  --verm-borda:   #F3B9BC;
  --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;
  /* O verde que enche a barra do botao enquanto a pagina carrega.
     E o mesmo tom do --verde-neon que sublinha o numero de vagas na home:
     desde que a barra desceu para a base do botao, nada passa atras do
     rotulo, e a cor deixou de precisar aguentar texto por cima. Livre
     disso, ela pode ser o verde vivo da marca — 3,3:1 contra o azul do
     botao, acima dos 3:1 que elemento grafico precisa ter, e visivel de
     relance, que e a unica funcao dela. */
  --verde-carrega: #00E676;

  /* A faixa de chamada: a FOTO e o quanto de azul cobre ela. Os dois vem
     do painel (Configuracoes -> Site) e sao escritos no `style` da propria
     faixa. Ficam declarados aqui pelo padrao — sem foto e com meio veu —
     porque `var()` sem token definido faz o navegador DESCARTAR a
     propriedade inteira, em silencio, e porque o auditor da folha nao tem
     como saber de variavel escrita no HTML. */
  --faixa-foto: none;
  --faixa-veu: .5;

  /* 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; }
/* O portal tem um tema so, o claro. Sem esta linha o navegador de quem
   esta com o aparelho no modo escuro repinta formulario, barra de rolagem
   e a propria barra do topo por conta propria — e o azul da moldura sai
   diferente do azul da pagina. */
html { color-scheme: light; -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; }

/* ---------------------------------------------------------------------
   Botao que enche de verde enquanto a pagina carrega.

   Serve para o clique que sai da pagina (entrar, salvar a senha): entre o
   clique e a tela seguinte ha um vazio em que nada acontece, e a pessoa
   clica de novo. O verde subindo diz "ja foi".

   Ele NAO mede a pagina — ninguem sabe quanto o servidor vai demorar. Ele
   confirma o clique, e por isso o JS segura o envio ate a cor cobrir o
   botao inteiro (0,9s). Sem essa espera o efeito nunca era visto: a
   resposta chega em ~100ms e a tela trocava com o verde na metade.

   As cores sao as do quadro de icone verde do site: fundo --verde-bg e
   rotulo --verde-escuro. E' o MESMO par do botao do WhatsApp e da etiqueta
   de sucesso, ja aprovado em 4,5:1 — o botao carregando nao inventa uma
   dupla de cores nova, ele veste uma que o sistema ja usa.
   --------------------------------------------------------------------- */
.btn--carrega { position: relative; overflow: hidden; isolation: isolate; }
/* O rotulo e o icone alinhados pelo MEIO. Sem isto o texto assenta na
   linha de base e a seta fica um fio mais baixa que as letras — some no
   olhar rapido, mas e' o que faz o botao parecer torto. */
.btn__texto {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn__texto svg { flex: none; }
.btn--carrega > .btn__texto { position: relative; z-index: 1; }

/* A BARRA FICA NA BASE, e nao atras do rotulo.

   A primeira versao pintava o botao inteiro de verde e enchia por cima.
   Funcionava, mas o botao trocava de cor no clique — some' o azul da acao
   principal justo quando a pessoa esta olhando para ele.

   Manter o azul E encher por tras do texto nao da': o rotulo e' branco, e
   nenhum verde serve para os dois papeis ao mesmo tempo. Medido: o verde
   claro (#A6E4BE) tem 3,79:1 contra o azul — enxerga-se bem —, mas o
   branco em cima dele cai para 1,45:1, ilegivel. O verde escuro inverte o
   problema: branco em cima da 7:1, so' que a barra em si fica com 1,28:1
   contra o azul e ninguem ve ela andar.

   Barra de 4px na base resolve os dois: nada passa atras do texto, o
   rotulo continua branco sobre azul (5,51:1) e a barra usa o verde claro,
   que e' o tom com mais contraste contra o fundo do botao. */
.btn--carrega::before {
  content: ''; position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--verde-carrega);
  transform: scaleX(0); transform-origin: left center;
}
/* Sem troca de cor: o botao continua sendo o botao. O que muda e' o
   cursor, a barra que anda e o clique que para de valer. */
.btn--carrega.esta-carregando { cursor: progress; }
/* pointer-events em vez de [disabled]: botao desabilitado nao envia o
   proprio name/value, e um dia algum formulario vai depender disso. */
.btn--carrega.esta-carregando { pointer-events: none; }
.btn--carrega.esta-carregando::before { animation: btn-enche .9s cubic-bezier(.3,.7,.4,1) forwards; }
@keyframes btn-enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Quem pediu menos movimento continua vendo que o clique pegou: o verde
   entra de uma vez, sem correr. */
@media (prefers-reduced-motion: reduce) {
  .btn--carrega.esta-carregando::before { animation: none; transform: scaleX(1); }
}

/* Cabecalho da porta interna: so' a logo, no meio. */
.cab-site--so-logo .cab-site-linha { justify-content: center; }

.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); }
/* (v1.97.1) QA L2: o hover repõe a cor do texto. O `.btn:hover` (0,2,0)
   vencia o `color` do `.btn--perigo` (0,1,0) e o rótulo ficava BRANCO sobre
   o rosa (1,3:1) — no celular o hover "gruda" depois do toque. Vermelho
   escuro sobre --verm-100 dá 4,9:1. */
.btn--perigo:hover { background: var(--verm-100); color: var(--verm-escuro); }
.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); }
/* (v1.97.1) QA L17e — grupo de opções (<fieldset class="campo">) sem a
   moldura e a legenda do navegador: na pesquisa da ação do Endomarketing,
   "Anonimato" saía com a borda cinza e a legenda cortando a borda, diferente
   dos outros grupos da tela. Fica com a cara do rótulo de campo. O :where()
   deixa o peso em zero: os grupos com desenho próprio (.org-cores,
   .questionario-comeco, .endo-escolhas) continuam mandando. */
:where(fieldset.campo) { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
:where(fieldset.campo) > :where(legend) {
  padding: 0; margin-bottom: 6px;
  font-size: 14px; font-weight: 700; color: var(--tinta, 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
   ===================================================================== */
/* BLOCO, e nao flex. A regra era flex para alinhar um icone ao lado do
   texto, mas so' 5 dos 87 avisos do portal tem icone — e nos outros 82 o
   flex partia a frase: "<strong>A fila parou.</strong> A mensagem mais
   antiga..." virava duas COLUNAS lado a lado, porque texto solto dentro de
   um flex vira um item anonimo. Quem precisa do icone alinhado pede
   .aviso--icone e envolve o texto num elemento. */
.aviso {
  display: block;
  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); }
/* Primeiro emprego. Laranja, e nao verde nem azul: nao e' "deu certo" nem
   "informacao" — e' uma caracteristica da pessoa que o RH procura nas vagas
   de entrada, e precisa saltar da ficha. O par e' o mesmo ja usado no sino:
   --laranja-escuro da 4,67:1 nos dois sentidos. */
.tag--primeiro { background: var(--laranja-escuro); color: var(--sobre-cor); }
.tag--primeiro svg { flex: none; }

/* 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;
}
/* MEDIDO PELO CARTAO, NAO PELA JANELA. `177.77vh` usa a altura da TELA: no
   celular (812px) o iframe nascia com 1.443px de largura para cobrir um
   cartao de 300px de altura — um player do YouTube quase cinco vezes mais
   largo que a propria tela. Com a camada como container de tamanho, `cqw` e
   `cqh` sao a largura e a altura DELA, e o 16:9 cobre o cartao na medida
   exata. Navegador sem unidade de container fica com a regra de cima. */
.hero__video { container-type: size; }
@supports (width: 1cqw) {
  .hero__video iframe {
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    min-width: 0; min-height: 0;
  }
}
/* SEM OS CONTROLES DO YOUTUBE (v1.60.1). O player nasce invisivel e so
   aparece depois que o YouTube recolhe titulo, botao do meio e logo; na volta
   do loop um segundo player entra por cima (site.js). Some rapido (.35 s) e
   aparece devagar (.9 s): quem manda e' a regra do estado de destino. */
.hero__video iframe { opacity: 0; transition: opacity .35s ease; }
.hero__video iframe.hero__player--visivel { opacity: 1; transition-duration: .9s; }
/* A capa do proprio video cobre a espera — e e' o que fica para quem pediu
   menos movimento. Fica por baixo dos players (vem antes deles no DOM). */
.hero__capa {
  position: absolute; inset: 0;
  background: center / cover no-repeat;
  opacity: 0; transition: opacity .6s ease;
}
.hero__capa--pronta { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__video iframe, .hero__capa { transition: none; }
}
.hero__sombra { position: absolute; inset: 0; z-index: 1; background: rgba(0,54,91,.55); }

/* ---------------------------------------------------------------------
   MOVIMENTO NA ROLAGEM

   Duas coisas, e as duas so' existem quando ha JavaScript: o rolagem.js e'
   quem poe `.anima-ligada` no <html> e `.hero-parallax` na camada de fundo.
   Sem ele, nada aqui casa com nada e a pagina fica como sempre foi — que e'
   a razao de esconder-para-revelar NUNCA nascer no HTML.
   --------------------------------------------------------------------- */

/* A camada de fundo do topo cresce um pouco para haver de onde tirar o
   deslocamento; sem a folga, empurrar o fundo descobriria a borda de cima.
   `will-change` so' aqui: e' a unica camada que se move. */
.hero-parallax {
  transform: translate3d(0, 0, 0);
  scale: 1.12;
  will-change: transform;
}

/* Entrada das secoes. So' opacidade e deslocamento — as duas propriedades
   que o navegador anima sem refazer o layout a cada quadro. */
.anima-ligada [data-anima] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.7,.3,1);
}
.anima-ligada [data-anima].anima--dentro {
  opacity: 1;
  transform: none;
}

/* Variantes. Cada uma diz de ONDE a coisa vem, e isso tem significado: os
   blocos de imagem+texto alternam lado na tela, entao entrar pelo lado em
   que ja estao explica o layout em vez de so' enfeitar. */
.anima-ligada [data-anima="esquerda"] { transform: translate3d(-26px, 0, 0); }
.anima-ligada [data-anima="direita"]  { transform: translate3d( 26px, 0, 0); }
/* Zoom curto para imagem: 1.04 e' o limite antes de a foto "pular". */
.anima-ligada [data-anima="escala"] { transform: scale(.96); }
.anima-ligada [data-anima="escala"].anima--dentro { transform: none; }

/* No celular, entrada lateral vira deslocamento vertical: a tela e' estreita
   e 26px para o lado empurram a linha do texto para fora do enquadramento. */
@media (max-width: 767px) {
  .anima-ligada [data-anima="esquerda"],
  .anima-ligada [data-anima="direita"] { transform: translate3d(0, 18px, 0); }
}

/* Um atraso curto por vizinho, para a fileira entrar em cascata em vez de
   piscar inteira. O indice vem do HTML (--i). */
.anima-ligada [data-anima][style*="--i"] { transition-delay: calc(var(--i, 0) * 70ms); }

/* ROLAGEM SUAVE nos links internos ("Candidatar-me" leva ao formulario da
   triagem no fim da pagina). Uma linha, nativa, sem biblioteca — e o bloco
   de `prefers-reduced-motion` la' em cima ja' devolve `scroll-behavior: auto`
   para quem pediu menos movimento. */
html { scroll-behavior: smooth; }

/* Onde o link interno PARA: sem isto o alvo encosta na borda de cima e fica
   escondido atras do cabecalho grudento. */
[id] { scroll-margin-top: 96px; }
/* (v1.97.1) QA L11: no SITE, a partir de 768px, o cabeçalho grudado
   (.topo-fixo: logo + barra azul) tem 124px, e o alvo parava em y=96 — 28px
   escondidos atrás dele (#email-dica do pedido da LGPD, grupos da avaliação
   por link). O painel e as áreas do candidato e do colaborador usam
   body.painel, com a barra de 62px, e ficam como estão. */
@media (min-width: 768px) {
  body:not(.painel) [id] { scroll-margin-top: 140px; }
}

/* Quem pediu menos movimento nao ve nada disto — nem a folga do parallax,
   que sem o transform correspondente apenas cortaria a imagem. */
@media (prefers-reduced-motion: reduce) {
  .hero-parallax { scale: 1; transform: none; will-change: auto; }
  .anima-ligada [data-anima] { opacity: 1; transform: none; transition: none; }
}
.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(--sobre-azul-txt); 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 { text-decoration: none; }
/* (v2.24.0) Só o cartão do Banco de Talentos mantém o hover de levantar; os cartões de vaga usam o
   "spotlight" (luz que segue o mouse), em tema.css. */
.vaga-card--talentos:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-g);
}
.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; }
/* ESCURECE, NAO CLAREIA. O veu branco de .18 sobre o azul da marca mistura
   para rgb(46,135,194); texto branco em cima cai para 3,92:1 e reprova. O
   mesmo destaque com preto translucido da 7,9:1 e fica igual aos olhos. */
.vaga-card--talentos .tag { background: rgba(0,0,0,.22); 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 > *,
/* (v1.84.0) Editor de opções e resumo das opções. */
.opcoes-editor__lista > *,
.opcoes-resumo > *,
.opcoes-resumo-grade > *,
.pesquisa-grade__opcoes > * { min-width: 0; }

/* A MARGEM ENTRE CARTOES NAO VALE DENTRO DE GRADE.
   `.cartao + .cartao { margin-top }` foi escrita para cartoes EMPILHADOS,
   um sob o outro. Mas o seletor de irmao adjacente nao sabe se o pai e' uma
   grade: numa linha de duas colunas, o segundo cartao continua sendo irmao do
   primeiro e nascia 16px mais baixo que ele. O efeito e' sutil e estava em
   toda tela de duas colunas do portal — medido: cartao 1 no topo 46, cartao 2
   no topo 62. Dentro de grade quem espaca e' o `gap`. */
.filtros > .cartao + .cartao,
.form-grade > .cartao + .cartao,
.grade-2 > .cartao + .cartao,
.grade-vagas > .cartao + .cartao,
.vaga-grade > .cartao + .cartao,
.doc-lista > .cartao + .cartao,
.kpis > .cartao + .cartao { margin-top: 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);
}
/* (v2.37.2) Pedido do dono de 30/10/2026: Requisitos e Benefícios (e a lista da descrição) todos com o ponto vermelho. */
.lista-marcada--ok li::before { background: var(--vermelho); }

.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; }
/* (v1.97.1) QA L5 — "Outras vagas abertas" a 320px: o link é item de flex e
   nascia com a largura da MAIOR palavra ("CARREGADOR/DESCARREGADOR"), e a
   cidade ia de x=294 a 362 — cortada, porque o body tem overflow-x: clip e a
   página não rola. O link cede (min-width: 0) e só parte palavra se ela
   sozinha não couber na linha; a cidade não encolhe. Na tela estreita, título
   comprido manda a cidade para baixo dele, em vez de espremer os dois. */
.lista-vagas a { min-width: 0; overflow-wrap: anywhere; }
.lista-vagas span { flex: none; }
@media (max-width: 479.98px) {
  .lista-vagas li { flex-wrap: wrap; row-gap: 0; }
}
/* No toque, a regra geral `.cartao ul li > a:not(.btn)` (inline-block, 26px)
   vence o alvo de 44px do .lista-vagas: com o título numa linha só, o link
   ficava com 41px de altura. Este seletor, mais específico, devolve os 44. */
@media (hover: none), (max-width: 720px) {
  .cartao .lista-vagas > li > a:not(.btn) { display: flex; align-items: center; min-height: var(--alvo); }
}

/* =====================================================================
   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; }
/* Slogan em DUAS linhas. Numa linha so' ele atravessava a coluna inteira
   e virava uma regua de texto em caixa alta — que se le' letra por letra,
   nao de relance. Com largura de leitura ele quebra sozinho e ganha ar. */
.rodape-slogan {
  font-family: var(--fonte-titulo); font-weight: 500; font-size: 12.5px;
  letter-spacing: .08em; text-transform: uppercase;
  margin-top: 12px; color: var(--sobre-azul-txt);
  /* 34ch da' DUAS linhas com o texto de hoje (59 caracteres em caixa alta
     com espacamento). Medido, nao chutado: 28ch quebrava em tres, e daqui
     para cima ate' 44ch continua em duas — 34 fica no meio dessa faixa,
     entao um slogan um pouco maior ou menor nao vira tres linhas. */
  max-width: 34ch; line-height: 1.7;
}

.rodape-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-4); }
/* 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. */
/* O circulo continua com 44px — e' o alvo minimo de toque, e reduzi-lo
   para "ficar mais bonito" quebraria a regra que vale em toda a folha.
   O que muda e' o CONTORNO: com fundo a 12% de branco sobre o azul o
   circulo mal se enxergava, e os icones pareciam soltos no meio do nada.
   A borda desenha o botao sem clarear o fundo. */
.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,.10); color: var(--sobre-cor);
  border: 1px solid rgba(255,255,255,.28);
  margin: 0; padding: 0; flex: none;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.rodape-social .social-ico:hover {
  background: var(--surface); color: var(--azul);
  border-color: var(--surface); transform: translateY(-2px);
}
/* 19px num circulo de 44: o glifo respira sem ficar perdido. */
.rodape-social .social-ico svg { width: 19px; height: 19px; display: block; }

/* (v1.70.1) padding-block, e não o atalho "padding: X 0": o elemento também é
   .miolo (layout/site.php), e o atalho zerava os 16px laterais dele — em 320px
   o texto do rodapé ia de x=4 a x=316, colado nas bordas da tela. */
.rodape-legal {
  border-top: 1px solid rgba(255,255,255,.25);
  text-align: center; padding-block: var(--sp-4);
  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;
}
/* (v1.97.1) QA L17d — abaixo de 480px a fileira de links quebra e o "·"
   ficava pendurado no fim da linha ("Políticas · LGPD ·"). Ali os pontos
   somem (layout/site.php os embrulha em .rodape-legal__sep): os 16px de
   respiro de cada link já separam um do outro. */
@media (max-width: 479.98px) {
  .rodape-legal__sep { display: none; }
}


/* =====================================================================
   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é */
/* =====================================================================
   NOSSAS LOJAS
   ===================================================================== */
/* "4 unidades em Carpina, Goiana e Abreu e Lima" — a pergunta que a pessoa
   faz antes de ler cartao nenhum. */
/* Uma coluna no celular, duas a partir do tablet. `stretch` e o rodape
   grudado embaixo: sem os dois, um cartao com horario de domingo fica mais
   alto que o vizinho e a fileira vira um degrau, com os botoes em alturas
   diferentes. */
.grade-lojas {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr; align-items: stretch;
}
.grade-lojas > * { min-width: 0; }

.loja-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--raio-card);
  background: var(--surface); overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.loja-card:hover {
  border-color: var(--azul-200);
  box-shadow: var(--sombra-g); transform: translateY(-2px);
}

/* A proporcao vem do aspect-ratio, e nao de altura fixa: assim a foto
   reserva o espaco ANTES de carregar e a pagina nao pula quando ela chega. */
.loja-card__foto { aspect-ratio: 2 / 1; background: var(--cinza); }
.loja-card__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sem foto cadastrada: a marca no lugar, para a fileira nao ficar com um
   cartao mais baixo que os vizinhos. */
.loja-card__foto--vazia {
  display: grid; place-items: center;
  /* --azul-300 sobre --azul-100 mede 1,95:1 e some contra o proprio fundo.
     --azul-600 da' 6,20:1: passa na regra de icone (3:1) e tambem na de texto
     (4,5:1), entao o auditor para de apontar a linha como duvidosa. */
  background: var(--azul-100); color: var(--azul-600);
}

.loja-card__corpo {
  display: flex; flex-direction: column; flex: 1;
  padding: var(--cartao-pad);
}
.loja-card__topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: var(--sp-3);
}
.loja-card__nome { font-size: 17px; margin: 0; }

/* Icone e texto, e nao emoji: o alfinete e o relogio do site viram quadrado
   em fonte que nao os tem, e o leitor de tela anuncia o nome do simbolo no
   meio do endereco. */
.loja-dados { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.loja-dados li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14px; color: var(--muted); line-height: 1.5;
}
.loja-dados svg { flex: none; margin-top: 2px; color: var(--azul); }
.loja-dados a { font-weight: 700; }
/* A cidade abre o bloco do endereco: e' o que decide se a loja serve para
   quem esta procurando trabalho perto de casa. */
.loja-cidade { display: block; color: var(--text); font-weight: 700; }
.loja-hora { display: block; }
.loja-hora b { font-weight: 700; color: var(--text); }

/* `margin-top:auto` e o que alinha os botoes de todos os cartoes da mesma
   fileira, mesmo quando um deles tem uma linha de horario a mais. */
.loja-card__acoes {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: auto; padding-top: var(--sp-4);
}

/* Fecho da pagina. Duas correcoes de alinhamento:

   1. Ele encostava na ultima fileira de cartoes (margin-top zero), e sem
      respiro parecia mais um cartao de loja, so' que sem foto.
   2. O paragrafo herda a largura de leitura (~612px) da folha; com
      `text-align: center` mas sem margem automatica, esse bloco ficava
      encostado a esquerda dentro de um cartao de 1148px, e o texto
      centrado nele saia visivelmente fora do eixo do titulo e do botao. */
.lojas-rodape {
  margin-top: var(--sp-6);
  text-align: center; background: var(--azul-100); border-color: var(--azul-200);
}
.lojas-rodape h2 { margin-bottom: 6px; }
.lojas-rodape p {
  color: var(--muted); margin: 0 auto var(--sp-5);
  max-width: 46ch;
}

@media (min-width: 620px) {
  .grade-lojas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .grade-lojas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Empilhado nao ha "fileira": esticar faria um cartao herdar a altura de
   um vizinho que nem esta mais ao lado. */
@media (max-width: 619px) {
  .grade-lojas { align-items: start; }
}

/* ---------------------------------------------------------------------
   FAIXA DE CHAMADA COM FOTO

   A foto entra atras, e sobre ela vem um veu azul cuja opacidade e'
   configurada em Configuracoes (--faixa-veu, escrito no HTML).

   O VEU SOZINHO NAO BASTA, e este e' o ponto: com 50% de azul sobre as
   areas claras da foto (a parede, o jaleco branco) o texto branco cai
   para 2,6:1 — reprova em qualquer medida. Por isso ha, ALEM do veu, um
   degrade fixo do lado em que o texto fica; ali o azul chega a ~86% e o
   contraste sobe para 6,4:1, independentemente do que a pessoa escolher
   no painel. A foto continua visivel do outro lado, onde so' ha o botao
   branco, que tem fundo proprio e nao depende dela.

   Sem foto configurada, nada disto existe e a faixa e' o azul de sempre.
   --------------------------------------------------------------------- */
.faixa-chamada {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--azul-escuro); color: var(--sobre-cor);
}
.faixa-chamada--foto::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--faixa-foto);
  background-size: cover;
  /* 40% e' onde os rostos estao na foto. Com `cover` numa faixa larga e
     baixa, a imagem e' recortada em cima e embaixo — centralizar cortava a
     testa e o queixo das tres pessoas. */
  background-position: center 40%;
}
.faixa-chamada--foto::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(0, 74, 128, .72) 0%,
      rgba(0, 74, 128, .34) 44%,
      rgba(0, 74, 128, 0)   70%),
    rgba(0, 74, 128, var(--faixa-veu, .5));
}
.faixa-chamada--foto .faixa-chamada-linha { position: relative; z-index: 2; }

/* No celular o texto fica CENTRALIZADO e ocupa a largura toda, entao o
   degrade lateral nao cobre onde ele esta: ali o veu extra e' parelho. */
/* ---------------------------------------------------------------------
   NO CELULAR, OUTRO RECORTE DA MESMA FOTO.

   A original e' 5:1 e a faixa no celular fica perto de 2:1 — nao existe
   enquadramento que caiba os tres sem cortar rosto. Entao o que muda e' a
   IMAGEM, e nao o layout: `faixa-chamada-mobile.jpg` e' um recorte de
   474x253 (a mesma proporcao da faixa) com duas das tres pessoas inteiras.
   Meia cara e' pior que uma pessoa a menos.

   Com a proporcao batendo, `cover` nao corta nada, e a foto volta a ser
   fundo com o texto por cima — que e' o efeito que a faixa tem no desktop.

   O PHP so' escreve --faixa-foto-mobile quando o arquivo existe; sem ele,
   cai na foto normal.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  .faixa-chamada--foto::before {
    background-image: var(--faixa-foto-mobile, var(--faixa-foto));
    background-position: center;
  }

  /* Veu parelho: no celular o texto e' centralizado e ocupa a largura
     toda, entao o degrade lateral do desktop nao cobriria onde ele esta.
     .56 + .5 da 0,78 de azul — 5,2:1 com o texto branco, e a foto ainda
     aparece por tras. */
  .faixa-chamada--foto::after {
    background:
      linear-gradient(rgba(0, 74, 128, .56), rgba(0, 74, 128, .56)),
      rgba(0, 74, 128, var(--faixa-veu, .5));
  }

  /* Altura na proporcao do recorte, para `cover` nao ter o que cortar. */
  .faixa-chamada--foto { min-height: calc(100vw / 1.875); }

  /* CENTRALIZAR O CONTEUDO, e enxugar a altura.

     A faixa era bloco comum: o texto e o botao encostavam no topo e o
     espaco sobrava todo embaixo, o que fazia a faixa parecer alta demais
     mesmo quando nao era. Vira flex com `align-items: center` e o conteudo
     passa a ocupar o meio.

     O respiro tambem cai de 28 para 20px em cima e embaixo: no celular a
     faixa concorre com o polegar, e o que estava sobrando era margem, nao
     conteudo. `min-height` continua mandando no piso — a faixa nao fica
     mais baixa que a proporcao da foto. */
  .faixa-chamada { display: flex; align-items: center; }
}
.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; }

/* Tela muito larga estica mais a foto, entao sobra menos altura visivel
   dela: sem este degrau, o corte volta a encostar nos rostos acima de
   ~1600px. */
@media (min-width: 1600px) {
  .faixa-chamada--foto { min-height: 250px; }
}

/* =====================================================================
   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. */
/* GRADE, e nao flex-wrap.

   Com `flex: 1 1 140px` cada FILEIRA se estica sozinha para preencher a
   largura: a tela do painel tem um grupo de 4 cartoes e outro de 7, logo
   abaixo, e os de cima saiam com o dobro da largura dos de baixo. Duas
   fileiras de cartoes iguais em conteudo e diferentes em tamanho leem como
   dois blocos sem relacao — e sao o mesmo bloco.

   `auto-fill` (e nao `auto-fit`) e o detalhe que resolve: ele mantem as
   colunas vazias no lugar, entao o grupo de 4 ocupa 4 colunas da MESMA
   grade que o grupo de 7 e os cartoes acabam do mesmo tamanho, alinhados em
   coluna de cima a baixo. `auto-fit` colapsaria as vazias e o problema
   voltaria. */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-4);
  align-items: stretch;
}
.kpi {
  min-width: 0;
  display: flex; flex-direction: column;
  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); }
/* Duas linhas reservadas no rotulo, alinhadas pela BASE. "Tempo de
   fechamento" ocupa duas linhas e "Candidaturas" uma so: sem a reserva, o
   numero de um cartao nascia 16px abaixo do numero do vizinho, e a fileira
   inteira ficava torta. A entrelinha vai fixa junto — sem ela a conta usa o
   `normal` da fonte, que em caixa alta com espacamento passa de 1.3em. */
.kpi__rotulo {
  font-size: 12.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.3; min-height: calc(1.3em * 2);
  display: flex; align-items: flex-end;
}
.kpi__valor  { font-family: var(--fonte-titulo); font-size: 28px; line-height: 1.1; margin-top: 6px; }
/* A nota desce para o fim do cartao: os cartoes tem alturas iguais pela
   grade, e a nota flutuando no meio do vazio denunciava o espaco sobrando. */
.kpi__nota   { font-size: 12px; color: var(--muted-soft); margin-top: auto; padding-top: 4px; }

.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; }

/* FILTRO DE PERIODO da Visao geral. Mobile-first: atalhos, cidade e datas
   ocupam cada um a linha inteira, e so' no desktop voltam a dividir a linha.
   Antes os atalhos tinham `flex:1` (base zero) e dividiam a linha com o
   seletor de cidade — sobravam 126px para seis botoes, um por linha. */
.periodo { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.periodo__atalhos { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; min-width: 0; }
.periodo__local { margin: 0; flex: 1 1 100%; min-width: 0; }
.periodo__local select { width: 100%; }
.periodo__datas { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; flex: 1 1 100%; min-width: 0; }
.periodo__datas .campo { margin: 0; flex: 1 1 130px; min-width: 0; }
.periodo__datas .entrada { width: 100%; }
@media (min-width: 1024px) {
  .periodo__atalhos { flex: 1 1 360px; }
  .periodo__local { flex: 0 1 200px; }
  .periodo__datas { flex: 0 1 auto; flex-wrap: nowrap; }
  .periodo__datas .campo { flex: 0 1 150px; }
}

/* 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 {
  /* QUEBRA LINHA QUANDO NAO CABE AO LADO DO ROTULO. Sem isto o conteudo
     encolhia ate o minimo ao lado de "CONTATO": em 320px o e-mail do
     candidato saia letra a letra numa coluna de 61px, "Avisar no WhatsApp"
     virava tres linhas em 77px e "· Loja Carpina" ficava com 40px. Agora o
     que nao cabe desce inteiro para a linha de baixo. */
  flex-wrap: wrap; row-gap: 4px;
}
.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);
}
/* h2, e nao h3: o bloco vazio fica logo abaixo do <h1> da tela, e pular
   um nivel de titulo quebra a navegacao de quem usa leitor de tela. O
   h3 continua na regra por causa das telas que aninham o bloco dentro
   de um cartao que ja tem titulo proprio. */
.vazio h2, .vazio h3 { color: var(--text); font-size: 17px; margin: 0 0 6px; }
.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); }
  /* ALTURA SUFICIENTE PARA O ROSTO INTEIRO.

     A foto e' 1280x253. Numa faixa de 1800px de largura, `cover` a escala
     para 356px de altura — com os ~150px que a faixa tinha, mais da metade
     da imagem ficava fora e o corte caia bem no meio das caras.

     210px mostram ~150px da foto original, e a faixa de rostos ocupa ~120px
     dela: cabe inteira, com folga em cima e embaixo. */
  .faixa-chamada--foto { min-height: 210px; display: flex; align-items: center; }
  .faixa-chamada--foto .miolo { width: 100%; }
  .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));
    /* STRETCH aqui, e nao no .grade-2 acima. A diferenca nao e' capricho:
       quando a direita e' APOIO (2fr/1fr), esticar o cartao curto ate' a
       altura do longo cria uma caixa alta e vazia. Quando as duas colunas
       sao IGUAIS, os cartoes sao pares — e um do lado do outro com alturas
       diferentes deixa a linha em degrau, que parece pagina quebrada.
       Medido antes de mexer: 173px contra 331px, degrau de 158. */
    align-items: stretch;
  }
  /* Esticar sozinho nao basta: o cartao curto viraria uma caixa alta com o
     botao boiando no meio do vazio. Vira coluna, e a barra de acoes desce
     para o rodape — ai' a altura igual PARECE intencao, e os botoes dos dois
     cartoes caem na mesma linha. */
  .grade-2--iguais > .cartao { display: flex; flex-direction: column; }
  .grade-2--iguais > .cartao > .acoes-rodape { margin-top: auto; }

  /* 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 ---- */
/* overflow visivel: a bolinha da ponta fica METADE fora da barra, e com
   overflow:hidden ela sairia cortada ao meio. O arredondado do trecho
   preenchido vem do border-radius dele proprio. */
.progresso { height: 10px; background: var(--cinza); border-radius: 999px; }
.progresso > span {
  display: block; height: 100%; position: relative;
  background: var(--azul); border-radius: 999px;
  transition: width .4s ease;
}
/* A bolinha que pisca na ponta: diz que a barra esta VIVA, que ainda ha o
   que preencher. Ela some quando o curriculo chega a 100% — piscar num
   trabalho terminado seria pedir uma acao que nao existe mais. */
.progresso > span::after {
  content: ''; position: absolute; right: -4px; top: 50%;
  width: 14px; height: 14px; margin-top: -7px;
  border-radius: 50%; background: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-100);
  animation: ponta-pulsa 2s ease-in-out infinite;
}
.progresso[aria-valuenow="100"] > span::after { display: none; }
@keyframes ponta-pulsa {
  0%, 100% { box-shadow: 0 0 0 3px var(--azul-100); }
  50%      { box-shadow: 0 0 0 7px var(--azul-100); }
}
@media (prefers-reduced-motion: reduce) {
  .progresso > span::after { animation: none; }
  .progresso > span { transition: none; }
}
.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); }

/* Bloco com campo faltando: a borda esquerda marca sem pintar o cartao
   inteiro de vermelho. Dez cartoes em vermelho viram uma tela de alarme, e
   aqui nao ha erro nenhum — ha coisa por fazer. */
.bloco-cv--falta { border-left: 3px solid var(--laranja-escuro); }
.bloco-cv--falta .bloco-cv__texto span { color: var(--laranja-escuro); }

/* ---- 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); }

/* Cartao do que nao pode esperar (prova com prazo). A borda de cima o
   separa dos demais sem gritar: dentro dele o conteudo ja e' urgente, e
   pintar o cartao inteiro faria a tela toda parecer um alerta. */
.cartao--urgente { border-top: 3px solid var(--laranja-escuro); }

/* Os botoes de ver e baixar o curriculo. Todos do MESMO peso: nenhum deles
   e' o avanco desta tela — o avanco esta nos blocos la' em cima. */
.cv-acoes {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
/* No celular eles empilham inteiros. Lado a lado, dois cabiam e o terceiro
   descia sozinho, e a linha quebrada fazia o grupo parecer desalinhado. */
@media (max-width: 519px) {
  .cv-acoes { flex-direction: column; align-items: stretch; }
  .cv-acoes .btn { width: 100%; }
}

/* Cartao da foto: retrato a esquerda, envio a direita; empilha no celular
   pelo proprio flex-wrap.

   Chama-se `retrato` e nao `foto-perfil` porque `.foto-perfil` JA EXISTE
   la' em cima como a imagem redonda de 96px — e a colisao achatava este
   cartao em 96px de altura, com o formulario de envio saindo por cima do
   cartao seguinte. */
.retrato { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.retrato__img {
  width: 96px; height: 96px; flex: none;
  object-fit: cover; font-size: 30px;
}
.retrato__acoes { flex: 1 1 260px; min-width: 0; }

/* A estrela de campo obrigatorio.
   <abbr> e nao <span>: o navegador ja mostra o title dele ao passar o
   mouse, sem uma linha de JavaScript. text-decoration:none tira o
   sublinhado pontilhado que alguns navegadores poem em abbr[title] — aqui
   ele so sujaria a estrela. */
.obrig {
  color: var(--destrutiva);
  font-weight: 700;
  text-decoration: none;
  margin-left: 2px;
  cursor: help;
}

/* ---- 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; }

/* A caixa que vive COLADA num campo ("Este numero tem WhatsApp"), e nao
   como pergunta propria: pesa menos que o rotulo do campo acima dela,
   senao a caixa parece a pergunta principal e o campo, o detalhe. */
.campo .opcao-cv--miudo {
  margin-top: 6px;
  font-weight: 400; font-size: 14px; color: var(--muted);
}
.campo .opcao-cv--miudo input { width: 18px; height: 18px; }

/* 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);
}

/* As duas acoes do rodape, lado a lado no desktop e empilhadas no celular.
   O cheio e' o que se faz agora; o contornado e' a saida. */
.salvar-bloco__acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.salvar-bloco__acoes .btn { flex: 1 1 auto; min-width: 0; }
@media (min-width: 768px) {
  .salvar-bloco__acoes .btn { flex: 0 0 auto; min-width: 240px; }
  .salvar-bloco__acoes .proximo-bloco { min-width: 0; }
}

/* O passo adiante nos blocos de lista. Era um link de texto e passava
   despercebido — a pessoa ficava adicionando itens sem achar a saida.
   Contornado ele e' claramente um botao, e claramente o secundario. */
.proximo-bloco { gap: 6px; font-size: 14px; }
.proximo-bloco svg { flex: none; }

/* O relogio da gravacao automatica. Cinza enquanto conta ("salvando em
   7s"), verde quando ja esta guardado — a cor e' o que se le de relance,
   sem parar de digitar para ler a frase. */
.salvo-auto {
  margin: 10px 0 0;
  font-size: 13px; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.salvo-auto::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted); flex: none;
}
.salvo-auto--ok { color: var(--verde-escuro); }
.salvo-auto--ok::before { background: var(--verde); }

/* ---- 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; }
  /* flex-basis: auto, e este e' o conserto de um defeito que estava no
     portal inteiro. O `flex: 1 1 240px` la' de cima foi escrito para a
     direcao LINHA, onde 240px e' uma largura minima. Ao virar COLUNA aqui,
     o mesmo 240px passa a valer como ALTURA: cada linha de lista no celular
     nascia com 240px de bloco de texto + o bloco de botoes, ~325px de
     altura para mostrar um titulo e uma etiqueta. Tres itens ja' enchiam a
     tela inteira. */
  .linha-secao__info { flex-basis: auto; }
}

/* 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; }
/* (v1.99.0) QA L3: o texto da opção é item de flex e nascia com min-width:auto
   — um e-mail comprido ("Avisar por e-mail (...)", na ficha) virava a largura
   mínima e passava da caixa e da tela a 320. O texto encolhe e quebra dentro
   da caixa; break-word só parte palavra que não cabe sozinha na linha. Na
   linha de ações do Perfil Comportamental a caixa também é item de flex. */
.escolha > span { min-width: 0; overflow-wrap: break-word; }
.meu-perfil__acao > .escolha { min-width: 0; }

/* (v1.84.0) A CAUSA do zigue-zague das escolhas: o `.escolhas { display:flex;
   flex-wrap }` logo acima vem DEPOIS da grade do `.escolhas` da seção
   "Linhas de interesse" e tem o mesmo peso, então vence — e leva junto o
   `.escolhas--largas` (uma frase por linha), que nunca teve efeito (a tela da
   LGPD chegou a remendar com style="flex-direction:column"). Os modificadores
   ganham DUAS classes e passam a valer: uma opção abaixo da outra, em
   qualquer largura. `--coluna` é o nome para grupo cujo conteúdo são textos
   de resposta (decisão do dono de 29/09: quem responde vê as opções uma
   abaixo da outra). O `.escolhas` puro continua como estava. */
.escolhas.escolhas--largas,
.escolhas.escolhas--coluna { display: grid; grid-template-columns: minmax(0, 1fr); }

.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: var(--verm-borda);
}
.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;
}
/* (v1.67.0) "− 100% +" num bloco que nao parte: a 320px o grupo do zoom se
   partia em duas linhas ("− Caber na tela" / "+ 70%"). */
.org-barra__zoomctl { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.org-barra__zoomctl .org-barra__zoom { min-width: 40px; text-align: center; }
/* O "−" media 42,5px de largura: 44 no minimo, como todo alvo. */
.org-barra__zoomctl .btn { min-width: var(--alvo); padding-left: 0; padding-right: 0; }
/* A nota do que o Sentido e o "Completar" fazem: visivel, porque o title so
   aparece com mouse. Ocupa a linha inteira no fim da barra. */
.org-barra__nota { flex: 1 1 100%; margin: 0; }
@media (max-width: 480px) { .org-barra__nota { display: none; } }
/* (v1.67.0) No celular, cada rotulo (Sentido, Zoom, Baixar) na propria
   linha, com os botoes do grupo inteiros embaixo dele. Ao lado do rotulo
   eles quebravam um por linha, e a barra chegava a 444px a 320. */
@media (max-width: 480px) {
  .org-barra { gap: 10px; }
  .org-barra__grupo { flex: 1 1 100%; row-gap: 2px; }
  .org-barra__rotulo { flex: 1 1 100%; }
  /* "− 100% +" e "Caber na tela" numa linha so a 320px. */
  .org-barra .btn--pequeno { padding-left: 10px; padding-right: 10px; }
  .org-barra__zoomctl { gap: 0; }
}

.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; }

/* (v1.67.0) --azul-400 e nao --azul-200: a linha diz "quem responde a quem",
   e objeto grafico necessario pede 3:1 (WCAG 1.4.11). O --azul-200 dava
   1,71:1 sobre o --bg do visor; o --azul-400 da 3,52:1. O PNG/PDF nao muda:
   o canvas usa o proprio #B5D4F4 (painel.js). */
.org-linha { position: absolute; background: var(--azul-400); }

.org-cartao-no {
  position: absolute; box-sizing: border-box;
  /* (v1.67.0) z-index 0: cada cartao vira o proprio contexto de
     empilhamento, e o link esticado de "editar" (z 1), a ficha e a fileira
     de acoes (z 2) se ordenam so dentro dele. */
  z-index: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-top: 4px solid var(--org-cor, var(--azul));
  border-radius: 10px; box-shadow: var(--sombra);
  /* Topo de 4px (v1.62.1): com 8px, nivel + nome em duas linhas + pessoa +
     unidade nao cabiam nos 88px do cartao (CARTAO_A) e a unidade era cortada
     pelo overflow. Conta com line-height 1.25 e o texto sem vao (v. abaixo):
     4 (faixa) + 4 + 15 (nivel) + 33,35 (nome, 2 x 14,5 x 1,15) + 15 (pessoa)
     + 14,4 (unidade) = 85,7, antes do recorte em 87 (88 - 1 da borda).
     (v1.67.0) Cartao SEM unidade (os diretores): sobra a linha dela, e a
     pessoa ganha 2 — 4 + 4 + 15 + 33,35 + 30 = 86,35. No cartao CHEIO
     (pessoa + unidade) a pessoa segue em 1 linha. Trocar o orcamento (nome
     em 1 linha, pessoa em 2) foi medido e descartado: 16 dos 21 cartoes de
     Carpina viravam "GERENTE…" e "SUPERVISOR DE…", e a pessoa de nome longo
     continuava cortada na 2a linha. O texto inteiro vai no title. */
  padding: 4px 10px 8px; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px;
}
/* (v1.67.0) --anel (5,09:1) no lugar do --amarelo-warn (1,51:1): o contorno
   e o unico sinal de "este e o cartao em edicao". */
.org-cartao-no--editando {
  outline: 3px solid var(--anel); outline-offset: 2px;
}
/* Voltou do salvar ou do mover (#no-N): o cartao que mudou fica marcado. */
.org-cartao-no:target { outline: 3px solid var(--anel); outline-offset: 2px; }

/* (v1.67.0) O cartao inteiro e o alvo de "editar": um link esticado por
   cima dele. Com o zoom de 0,7 o cartao ainda rende 118x62px, bem acima dos
   44 do toque — o lapis antigo caia para 12x24. O anel de foco fica POR
   DENTRO, porque o cartao corta o que passa da borda (overflow). */
.org-cartao-no__editar {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; cursor: pointer;
}
.org-cartao-no__editar:focus-visible { outline: 3px solid var(--anel); outline-offset: -3px; }
/* Nas tres bordas, nao no atalho border-color: a de cima e a cor do nivel. */
.org-cartao-no:hover { border-right-color: var(--azul-200); border-bottom-color: var(--azul-200); border-left-color: var(--azul-200); }
/* A ficha da pessoa continua clicavel por cima do link esticado. */
.org-cartao-no__pessoa a { position: relative; z-index: 2; }
.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));
  /* 1.25 e nao o 1.5 herdado (v1.62.1): a conta de altura esta em .org-cartao-no. */
  line-height: 1.25;
}
.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: 12px; color: var(--muted); line-height: 1.25; /* v1.62.1; (v1.78.1) era 11,5px, mínimo é 12px */
  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 {
  /* (v1.67.0) No alto e sem pegar o mouse no vão: no rodapé ela cobria o
     nome da pessoa, e só 5 de 17 links de ficha eram clicáveis. */
  position: absolute; left: 0; right: 0; top: 4px; bottom: auto;
  pointer-events: none;
  /* (v1.67.0) z 2: por cima do link esticado de "editar" (z 1). */
  z-index: 2;
  display: flex; gap: 1px; justify-content: flex-start;
  padding: 3px 4px; background: linear-gradient(to bottom, var(--surface) 70%, transparent);
  opacity: 0; transition: opacity .12s;
}
.org-acoes .org-acao, .org-acoes form { pointer-events: auto; }
/* No toque o link da ficha seria um alvo de 15px em cima do "editar": ali o
   cartão inteiro abre o editor, que tem o botão "Abrir ficha". */
@media (hover: none) { .org-cartao-no__pessoa a { position: static; } }
.org-cartao-no:hover .org-acoes,
.org-cartao-no:focus-within .org-acoes { opacity: 1; }
/* (v1.67.0) No toque a fileira NAO aparece. Sempre visivel, ela cobria a
   pessoa e a unidade (40px pintados sobre os 88 do cartao), e os 6 alvos
   em 158px encolhiam para 17px — 12px com o zoom. Tocar no cartao abre o
   editor, e la estao as mesmas acoes com texto e 44px. display:none tambem
   tira as paradas de Tab que ninguem via. */
@media (hover: none) { .org-acoes { display: none; } }
/* A lixeira longe das setas: com 5 alvos em 158px sobra espaco. */
.org-acoes__remover { margin-left: auto; }

.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;
  /* (v1.67.0) O <a> encolhia ate o icone (min-width:auto de item flex). */
  flex-shrink: 0;
}
.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); }
/* (v1.67.0) Anel por dentro: com offset positivo ele passava 2px da borda de
   baixo do cartao e era cortado pelo overflow. */
.org-acao:focus-visible { outline-offset: -3px; }
.org-acoes .inline { display: inline-flex; }
/* Seta de "para a esquerda": o icone da direita espelhado. */
.org-espelho { transform: scaleX(-1); }

/* 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; }
/* (v1.67.0) "Automatica": a cor do nivel escolhido (painel.js troca o
   --org-cor quando o Nivel muda), com um "A" para nao se confundir com a
   bolinha da mesma cor. Branco sobre as oito cores passa de 5,4:1. */
/* .org-paleta na frente: o `.campo label { display:block }` da folha vencia. */
.org-paleta > .org-cor--auto { display: inline-flex; align-items: center; justify-content: center; }
.org-cor__letra {
  font-family: var(--fonte-titulo); font-size: 14px; line-height: 1;
  color: var(--sobre-cor); pointer-events: none;
}
/* O grupo de cores e um fieldset (tem nome para o leitor de tela); sem a
   moldura e o recuo que o navegador poe nele. */
.org-cores { border: 0; padding: 0; margin: var(--sp-4) 0 0; min-width: 0; }
.org-cores > legend {
  padding: 0; font-weight: 700; font-size: 14px; color: var(--tinta, var(--muted));
  margin-bottom: 6px;
}
/* 44px no dedo, como todo alvo da casa. */
@media (pointer: coarse) { .org-cor { width: 44px; height: 44px; } }

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

/* ---------------------------------------------------------------------
   Editor do organograma (v1.67.0)
   --------------------------------------------------------------------- */
.org-editor [hidden] { display: none !important; }
.org-editor__cab { flex: 1 1 320px; min-width: 0; }
.org-editor__quem { font-family: var(--fonte); font-weight: 600; color: var(--muted); }
.org-editor__onde { margin: 4px 0 0; }
.org-editor__links { display: flex; flex-wrap: wrap; gap: 6px; }
.org-editor__erro { margin: 0 0 var(--sp-4); }
.org-editor__erro a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.org-editor__erro:focus { outline: 3px solid var(--anel); outline-offset: 2px; }
.org-editor__aviso { margin: 0 0 8px; }
/* A faixa "Este cartao": as acoes do cartao com texto, que no toque nao
   aparecem mais no proprio cartao. */
.org-editor__acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 0 0 var(--sp-4); margin: 0 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.org-editor__acoes .inline { display: inline-flex; }
.org-editor__acoes .btn svg { flex: none; }
.org-editor__remover { margin-left: auto; }
/* No celular, duas colunas em vez de cinco botoes empilhados (~300px de
   faixa antes do formulario, medido a 320px). O rotulo pode quebrar em
   duas linhas dentro do botao, que continua com 44px ou mais. */
@media (max-width: 560px) {
  .org-editor__acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-editor__acoes > .org-barra__rotulo { grid-column: 1 / -1; }
  .org-editor__acoes .btn { width: 100%; padding-left: 10px; padding-right: 10px; }
  .org-editor__remover { margin-left: 0; }
}
/* A segunda grade (Departamento, Cargo, Loja) desgruda da primeira. */
.org-editor .form-grade + .form-grade { margin-top: var(--sp-4); }
/* Responde a e o texto da Diretoria ocupam duas colunas: as opcoes sao
   longas ("GERENTE DE LOJA (JOSE) › SUPERVISOR… — MARIA · FILIAL 1"). */
@media (min-width: 1024px) { .org-editor__largo { grid-column: span 2; } }
/* Rotulo sem campo (a nota da Diretoria), com a mesma cara e a mesma
   reserva de duas linhas do <label> da grade — senao a nota sobe. */
.org-rotulo { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--tinta, var(--muted)); }
@media (min-width: 641px) {
  .form-grade > .campo > .org-rotulo:first-child {
    min-height: calc(1.3em * 2); display: flex; align-items: flex-end;
  }
}
.org-editor .entrada[aria-invalid="true"],
.org-editor select[aria-invalid="true"] + .busca-sel__campo,
.org-editor select[aria-invalid="true"] { border-color: var(--verm-escuro); }
.org-mais { box-shadow: none; margin-top: var(--sp-4); }

/* Anel de foco em DOIS tons nos botoes desta tela. A regra geral da folha
   pinta o anel do .btn e da aba ativa de BRANCO com 3px de afastamento — e
   ele cai FORA do botao, sobre o fundo branco da pagina: branco no branco
   (medido nas paradas 20, 25, 27-34 do editor). Aqui o anel e azul e um
   halo branco de 2px encosta no botao: aparece em qualquer fundo. Fica
   restrito ao organograma nesta versao — a regra geral (app.css, anel do
   .btn) e o mesmo defeito no portal inteiro e fica para uma entrega propria. */
.org-barra .btn:focus-visible,
.org-editor .btn:focus-visible,
.org-chamada .btn:focus-visible,
.org-modelo .btn:focus-visible,
.org-abas a.ativo:focus-visible {
  outline: 3px solid var(--anel); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--sobre-cor);
}

/* =====================================================================
   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: 12px; /* (v2.47.0) T6: era 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: 12px; /* (v2.47.0) T6: era 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; }
/* O numero e o rotulo empilhados: o numero dentro do anel, o rotulo
   embaixo dele. Antes os dois eram <text> no centro do SVG, e o rotulo
   nao cabia no buraco (64 unidades) — saia por cima do anel. */
.graf-rosca__centro {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: none;
}
.graf-rosca__svg { width: 150px; height: 150px; flex: none; display: block; }
/* Corpo maior, agora que ele tem o centro inteiro para si. */
.graf-rosca__total {
  font-family: var(--fonte-titulo); font-size: 30px; fill: var(--text);
}
/* Fora do SVG: e' <p>, e nao <text>, entao cabe inteiro e quebra linha se
   precisar. 12px continua sendo o piso do projeto. */
.graf-rosca__unidade {
  margin: 0; max-width: 150px; text-align: center;
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; line-height: 1.3;
}

/* --- 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; flex: 1 0 44px; min-width: 44px; }
.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 (v1.56: sem distorção) ---
   O SVG estica para a largura da caixa e leva só o que não deforma (área,
   linha e grade de traço fixo); números do eixo e pontos são HTML por cima,
   posicionados em %, e ficam redondos e legíveis em qualquer largura. */
.graf-linha__quadro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.graf-linha__eixos { position: relative; height: 190px; min-width: 22px; }
.graf-linha__eixo {
  position: absolute; right: 0; transform: translateY(-50%);
  font-size: 12px; line-height: 1; color: var(--muted-soft); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.graf-linha__plot { position: relative; height: 190px; }
.graf-linha__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.graf-linha__pontos { position: absolute; inset: 0; pointer-events: none; }
.graf-linha__ponto {
  position: absolute; box-sizing: border-box; width: 9px; height: 9px;
  border: 2px solid var(--azul); border-radius: 50%; background: #FFFFFF;
  transform: translate(-50%, -50%); pointer-events: auto;
}
.graf-linha__ponto--pico { width: 13px; height: 13px; border-width: 3px; }
.graf-eixo { font-size: 12px; 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; }
  .graf-linha__eixos, .graf-linha__plot { height: 160px; }
}

/* --- animação dos gráficos (v1.56, assets/js/graficos.js) ---
   De onde cada barra cresce: da esquerda, e a coluna da base. */
.graf-barra__cheio, .met-trilho > span, .nota-cheio, .vaga-fita__cheia, .cv-barra__cheio, .medidor__parte { transform-origin: left center; }
.graf-coluna__b, .met-col__pilha { transform-origin: center bottom; }
/* O estado ANTES da animação. Só vale com html.graf-anima, que uma linha no
   <head> liga antes da primeira pintura (e desliga sozinha se o script não
   vier); o script marca data-graf em cada peça quando a anima. Quem pede menos
   movimento nunca recebe a classe e vê tudo pronto. */
html.graf-anima :is(.graf-barra__cheio, .met-trilho > span, .nota-cheio, .vaga-fita__cheia, .cv-barra__cheio, .medidor__parte):not([data-graf]) { transform: scaleX(0); }
html.graf-anima :is(.graf-coluna__b, .met-col__pilha):not([data-graf]) { transform: scaleY(0); }
html.graf-anima .graf-rosca__arco:not([data-graf]) { stroke-dasharray: 0 400; }
html.graf-anima .graf-linha__plot:not([data-graf]) { clip-path: inset(0 100% 0 0); }
html.graf-anima :is(.radar__atual, .radar__desejado):not([data-graf]) { opacity: 0; }

/* 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 .regua-formato__h {
  font-family: var(--fonte-titulo); font-size: 15px; margin: 12px 0 4px; color: var(--azul-600);
}
.regua-formato__saida .regua-formato__h: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; }

/* O aviso com icone: aqui o flex e' o certo, e o TEXTO tem de estar dentro
   de um elemento (span ou div). Solto, ele vira um segundo item e volta a
   quebrar em colunas — foi exatamente esse o defeito de antes. */
.aviso--icone {
  display: flex; gap: 10px; align-items: flex-start;
}
.aviso--icone > svg { flex: none; }

/* --- cartao do organograma com pessoa e foto --- */
.org-cartao-no__corpo { display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
/* Sem vao entre as linhas (v1.62.1): os 3px entram na conta de altura do
   cartao (ver .org-cartao-no), e o line-height 1.25 ja separa uma da outra. */
.org-cartao-no__texto { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0; }
.org-cartao-no__pessoa {
  font-size: 12px; color: var(--text); font-weight: 600; line-height: 1.25; /* v1.62.1 */
  /* (v1.67.0) Ate 2 linhas quando o cartao nao tem unidade (era sempre 1
     com reticencias): "Heriberto Coutinho" nao cabe em 97px. A conta de
     altura esta em .org-cartao-no. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
/* Com unidade, 1 linha: nao ha altura para 2 (o title leva o nome todo). */
.org-cartao-no--cheio .org-cartao-no__pessoa {
  display: block; white-space: nowrap; 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-4);
  background: var(--bg); border-radius: var(--raio-card);
}
/* (v1.67.0) Os campos ao lado do retrato: quem ocupa (do cadastro), o nome
   digitado e a foto — nessa ordem, o cadastro primeiro. */
.org-pessoa-bloco__campos { flex: 1; min-width: 0; }
.org-pessoa-bloco__campos > .campo { margin-bottom: 12px; }
.org-pessoa-bloco__campos > .campo:last-child { margin-bottom: 0; }

/* 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(min(100%, 240px), 1fr)); /* (v2.47.0) cabe em 320px */
  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(min(100%, 230px), 1fr)); gap: 12px; /* (v2.47.0) cabe em 320px */
}
.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(min(100%, 230px), 1fr)); gap: 10px; /* (v2.47.0) cabe em 320px */
}
.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);
  /* (v1.78.1) era 11px; com 12px "99+" ainda cabe (min-width 18px + padding 0 5px). */
  font-size: 12px; 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: 12px; /* (v2.47.0) T6: era 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; }

/* O "olhinho" da senha (v1.57, assets/js/senha-olho.js): o botão mora dentro
   do campo, à direita, e o texto ganha recuo para nunca passar por baixo dele. */
.senha-olho { position: relative; display: block; }
.senha-olho > input { padding-right: 52px; }
.senha-olho__botao {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--alvo); min-height: var(--alvo);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--muted); border-radius: 0 12px 12px 0; cursor: pointer;
}
.senha-olho__botao:hover { color: var(--azul); background: var(--realce); }
.senha-olho__botao[aria-pressed="true"] { color: var(--azul); }

/* "Ver como" (v1.55): quem é administrador E colaborador alterna entre os dois
   painéis sem sair da conta. Quando existe, é ele quem empurra o resto para a
   direita — o sino e o usuário vêm logo depois, sem brigar pelo espaço. */
.ver-como {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
}
.ver-como ~ .sino, .ver-como ~ .painel__usuario { margin-left: 0; }
.ver-como__rotulo { padding: 0 6px 0 10px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ver-como__opcao {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--alvo); padding: 0 14px;
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap;
  text-decoration: none; transition: background-color .15s ease, color .15s ease;
}
.ver-como__opcao:hover { background: var(--realce); color: var(--realce-txt); text-decoration: none; }
.ver-como__opcao[aria-current="page"] { background: var(--azul); color: var(--sobre-cor); }
@media (max-width: 719.98px) {
  /* No celular fica só o ícone de cada lado; o nome segue no aria-label e no title.
     Dois CÍRCULOS perfeitos (v1.61.1): com padding lateral o ativo virava uma
     pílula torta ao lado de um ícone solto. */
  .ver-como { gap: 3px; padding: 2px; }
  .ver-como__rotulo, .ver-como__opcao span { display: none; }
  .ver-como__opcao {
    /* 44px (v1.62.1): o círculo de 40px ficava abaixo do --alvo no celular. */
    width: var(--alvo); height: var(--alvo); min-height: var(--alvo); padding: 0;
    justify-content: center; border-radius: 50%;
  }
  .ver-como__opcao svg { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) { .ver-como__opcao { transition: none; } }

/* 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(min(100%, 260px), 1fr)); gap: 14px; /* (v2.47.0) cabe em 320px */
}
.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 barra de acoes em lote ja' ocupa a linha inteira e nao ha'
   coluna para ceder: "Avancar para Analise comportamental" tinha 248px de
   texto num botao de 228px e passava da borda. Aqui ele quebra.
   TEM DE VIR DEPOIS da regra de cima: mesma especificidade, e a de baixo
   vence — posta antes, ela simplesmente nao valia. */
@media (max-width: 640px) {
  .lote__acoes .btn { white-space: normal; }
}

/* (v1.97.1) QA L1 — "Avançar para outra etapa" e "Desclassificar" no
   celular. A caixa do .menu-motivo flutua ancorada na borda DIREITA do botão
   (right: 0; 290px); na barra de lote em coluna e na linha do funil em
   cartão o botão fica encostado à esquerda, e a caixa crescia para FORA da
   tela pela esquerda: a 375px o "Confirmar" do lote ia de x=-98 a 2, e a
   página não rola para lá (não havia como desclassificar em lote no
   celular). Até 640px ela abre NO FLUXO, na largura toda — o mesmo desenho
   da ficha do candidato (tema.css, .ficha-cand__acoes). Acima disso continua
   flutuando, que é onde cabe. */
@media (max-width: 640px) {
  .lote__acoes .menu-motivo[open],
  .acoes-topo .menu-motivo[open] { display: block; flex-basis: 100%; }
  .acoes-topo > form:has(> .menu-motivo[open]) { flex-basis: 100%; }
  .tabela td > .acoes-topo:has(.menu-motivo[open]) { flex-basis: 100%; }
  .lote__acoes .menu-motivo__caixa,
  .acoes-topo .menu-motivo__caixa {
    position: static; width: auto; max-width: none;
    margin-top: 8px; box-shadow: none;
  }
}

/* No celular a celula vira bloco e ai a largura minima atrapalha. */
/* (v2.47.0) T2: era 860px, junto com o cartão da tabela */ @media (max-width: 1023.98px) {
  .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; }
/* (v2.34.0) QA de 29/10: com a unidade junto ("FILIAL 1 - MATRIZ · Carpina - PE"), a linha inteira sem quebra
   passava de 210 px e empurrava a tabela para fora a 1280 (Admissão, Quem saiu). Agora quebra SÓ entre palavras
   (keep-all + sem overflow-wrap): "Carpina" continua inteiro, e a unidade desce para a linha de baixo. */
/* (v2.47.0) T2: era 861px; a tabela só volta a ser tabela em 1024px */ @media (min-width: 1024px) {
  .tabela td[data-rotulo="Cidade"],
  .tabela td[data-rotulo="Filial"],
  .tabela td[data-rotulo="Unidade"],
  .tabela td[data-rotulo="Onde"] { white-space: normal; word-break: keep-all; overflow-wrap: normal; min-width: 7rem; }
}

/* (v2.47.0) T2: era 860px, junto com o cartão da tabela */ @media (max-width: 1023.98px) {
  /* 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. */
/* (v2.47.0) T2: era 861px; a tabela só volta a ser tabela em 1024px */ @media (min-width: 1024px) {
  .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 {
  /* ALTURA MINIMA, NAO FIXA, E QUEBRA LIBERADA. Esta regra repetia `.tag`
     com `height: 23px` e `white-space: nowrap`, anulando o `max-width: 100%`
     e o `white-space: normal` da regra base: a etiqueta-link "Assistente de
     Contabilidade · Analise de curriculo" tinha 312px de texto numa caixa de
     288px e empurrava a ficha do candidato 8px para fora da tela em 320px.
     Etiqueta curta continua numa linha so' — ela so' quebra quando e' mais
     larga que o espaco que tem. */
  min-height: 23px; padding: 2px 9px; font-size: 12px; letter-spacing: .01em;
  border-radius: var(--raio-full); white-space: normal; line-height: 1.3;
}
/* 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 { min-height: 24px; font-size: 12.5px; padding: 2px 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%; }
}

/* O popup da senha do primeiro acesso e' um `.dialogo` com formulario
   dentro. So' precisa de mais largura — dois campos com rotulo e dica nao
   cabem confortavelmente nos 440px de um dialogo de confirmar — e de um
   respiro entre o texto e o primeiro campo. */
.dialogo--senha { max-width: 480px; }
.dialogo--senha .dialogo__texto { margin-bottom: var(--sp-4); }
.dialogo--senha .campo:last-child { margin-bottom: 0; }
/* O selo "Primeiro acesso" e' o mesmo da tela cheia; aqui ele so' nao
   pode empurrar o titulo. */
.dialogo--senha .entrar-porta { margin-top: 0; }

/* --- 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; }

/* (v2.47.0) T2: era 860px, junto com o cartão da tabela */ @media (max-width: 1023.98px) {
  /* 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; }

/* ===========================================================================
   TRECHO E FATOS FIXOS NO CARD DA VAGA (08/10/2026)

   Antes era a "espia": uma caixa que abria ao passar o mouse, cobria o card
   de baixo, cortava o texto no meio da palavra e nao existia no celular.
   Informacao que so aparece ao passar o mouse nao existe para quem esta no
   toque (a maioria) nem para quem usa o teclado. Agora o trecho do que a
   pessoa vai fazer e os fatos que decidem o clique (salario, posicoes,
   prazo) ficam SEMPRE no card; o texto tem no maximo 3 linhas, e o rodape
   (margin-top:auto) alinha o "Publicada ha..." e o "Ver vaga" na base de
   todos os cards da fileira.
=========================================================================== */
.vaga-card__resumo {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vaga-card__fatos { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.vaga-card__fato {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--text);
}
.vaga-card__fato svg { color: var(--primaria); flex: none; }
.vaga-card__ver {
  margin-left: auto; font-size: 13px; font-weight: 700; color: var(--primaria);
  white-space: nowrap;
}
.vaga-card:hover .vaga-card__ver { text-decoration: underline; }
/* A "espia" (prévia ao passar o mouse) saiu em 08/10/2026; as classes velhas ficam
   escondidas só para uma página guardada em cache não mostrar a caixa sem estilo. */
.espia, .espia__resumo, .espia__fatos, .espia__fato, .espia__leia { display: none; }

/* 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); }
/* (v1.78.1) Botao do WhatsApp DESLIGADO (boas-vindas de quem nao tem conta,
   AdmissaoControlador): o hover nao inverte a cor, senao o botao parece que
   vai funcionar. Fica com as cores de repouso; o .btn[disabled] ja poe a
   opacidade e o cursor de "nao pode". */
.btn--whats[disabled]:hover { background: var(--verde-bg); color: var(--verde-escuro); border-color: var(--verde); }
.btn--whats[disabled]:hover svg { color: var(--verde-escuro); }

/* 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); }
/* (v2.47.0) T2: era 860px, junto com o cartão da tabela */ @media (max-width: 1023.98px) {
  .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; }
  /* (v1.70.1) O overflow-wrap:anywhere da célula foi feito para o CARTÃO do
     celular (e-mail longo). Na tabela ele derrubava a largura mínima da
     célula para 1 caractere, e as colunas nowrap (Nome, Unidade, Ações)
     espremiam as outras: medido a 1280, Pessoa com 74px e 134 palavras
     partidas na Experiência, Cargo com 68px e 1110 em Quem saiu. Aqui vale a
     regra das linhas "Nome de lugar nao se parte": prefere-se alargar a coluna
     a partir a palavra. Só nas tabelas que ROLAM de lado (.tabela-envolve,
     .tabela-rolagem), onde a sobra vira rolagem com as sombras laterais; as
     poucas tabelas soltas continuam como estavam, para não vazar o cartão. */
  .tabela-envolve .tabela tbody td,
  .tabela-rolagem .tabela tbody td { overflow-wrap: break-word; }
  /* (v1.78.1) Quando a tabela não cabe, o layout automático deixava a coluna
     do NOME (td.principal, a única que quebra) com a largura da maior
     palavra: 97px em Admissão, 98px nos desligados e 100px no funil da vaga,
     com o nome em 3 a 8 linhas. Com um piso de 11rem o nome fica em 1 a 3
     linhas e a sobra vira rolagem do quadro (com as sombras laterais). Fica
     dentro deste media: no cartão do celular a célula já tem a largura toda.
     (v1.78.1) Fora o quadro de respostas da triagem: lá a coluna fixa do
     candidato tem 180px (.tabela--respostas td:first-child), e este piso,
     mais específico, a baixava para 176px. */
  .tabela-envolve .tabela:not(.tabela--respostas) td.principal,
  .tabela-rolagem .tabela:not(.tabela--respostas) td.principal { min-width: 11rem; }
}

/* 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;
}
/* (v1.97.1) QA L3 — AS SOMBRAS NÃO APARECIAM. Elas são pintadas no FUNDO do
   .tabela-envolve, e no computador (1024px+) cada linha tem fundo opaco
   (`.tabela tbody tr { background: var(--surface) }`, no bloco da tabela
   acima): a linha cobria a sombra, e a coluna da ponta (Status, Ações no
   funil da vaga a 1280) era cortada seca, sem aviso de que a tabela rola.
   Dentro do quadro a linha fica transparente — o quadro já pinta
   var(--surface) — e o hover continua com a cor dele. */
@media (min-width: 1024px) {
  .tabela-envolve .tabela tbody tr:not(:hover) { background: transparent; }
}

/* 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; }
  /* (v1.78.1) A caixa de 24x24 continuava sendo o alvo inteiro (50 caixas
     medidas a 320px): o rótulo .so-leitor tinha 1x1. Agora a célula tem no
     mínimo 44x44 e o rótulo que já existe cobre a célula toda (transparente),
     então o toque em qualquer ponto dela marca a caixa, e o leitor de tela
     continua lendo "Selecionar ...". td.col-marca porque o
     `.tabela tbody td { min-width: 0 }` vence o .col-marca sozinho. */
  .tabela tbody td.col-marca { min-width: var(--alvo); min-height: var(--alvo); }
  .col-marca > label.so-leitor {
    inset: 0; width: auto; height: auto; clip: auto; opacity: 0; cursor: pointer;
  }

  /* 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); }
/* (v1.97.1) QA L17c — a 320px o botão e o "Nenhum arquivo escolhido" não
   cabem lado a lado (Dados pessoais do candidato), e o navegador cortava o
   texto dele no meio ("Nen…olhido"). Na tela estreita o botão fica em cima
   e o nome do arquivo, inteiro, embaixo. */
@media (max-width: 479.98px) {
  input[type="file"]::file-selector-button { display: block; margin: 0 0 6px; }
}

/* 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; }
/* Mesmo caso da seta de Versoes: com base de 220px o titulo nao cabia ao lado
   do numero (26px) em 254px e descia, deixando o numero sozinho numa linha.
   No celular o titulo ocupa o resto da primeira linha e a etiqueta desce,
   alinhada embaixo dele. */
@media (max-width: 640px) {
  .etapa-resposta__cab > div { flex-basis: calc(100% - 38px); }
  .etapa-resposta__cab > .tag { margin-left: 38px; }
}
.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; }
/* TEM DE QUEBRAR LINHA. No celular o `.acordeao__meta` ganha `flex-basis:
   100%` justamente para descer para a linha de baixo — mas este cabecalho era
   `nowrap`, entao o meta ficava na MESMA linha, tomava 252px e o nome da
   prova (flex:1, base zero) sobrava com 0px: "Raciocinio logico basico" saia
   uma letra por linha, numa coluna de 11px. */
.prova-bloco__cab { flex-wrap: wrap; }
.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; }
/* A SETA NAO PODE FICAR SOZINHA. Com base `auto` o titulo pede a largura do
   texto inteiro, nao cabe ao lado da seta de 15px e desce — no celular a seta
   ficava numa linha e o titulo na de baixo (medido: os dois em x=33). No
   celular o titulo ocupa exatamente o resto da primeira linha e a etiqueta
   da versao desce, alinhada embaixo dele; no desktop tudo divide uma linha. */
@media (max-width: 640px) {
  .ver-item__cab .cartao__titulo { flex: 1 1 calc(100% - 25px); }
  .ver-item__cab .ver-etiqueta { margin-left: 25px; }
}
@media (min-width: 641px) {
  .ver-item__cab .cartao__titulo { flex: 1 1 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); }

/* =====================================================================
   Entrar — a mesma tela nas duas portas
   ===================================================================== */
/* ---------------------------------------------------------------------
   TELA DE ENTRAR

   Antes era um cartao branco solto no meio do cinza — funcionava, e nao
   dizia nada. A porta de um sistema e' a primeira coisa que a pessoa ve
   todo dia de manha; vale ela ter cara de alguma coisa.

   Duas metades: o painel da marca (que muda de texto conforme a porta,
   rh ou vagas) e o formulario. No celular o painel some — a pessoa esta
   ali para entrar, e empurrar o campo de e-mail para baixo da dobra por
   causa de um enfeite seria trocar o util pelo bonito.
   --------------------------------------------------------------------- */
.entrar-tela {
  max-width: 900px; margin: var(--sp-6) auto; 
  display: grid; grid-template-columns: 1fr;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--raio-card);
  box-shadow: var(--sombra-g); overflow: hidden;
}
@media (min-width: 880px) {
  .entrar-tela { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

/* --- o painel da marca --- */
.entrar-marca {
  display: none;
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--sp-7) var(--sp-6);
  background: var(--azul-escuro); color: var(--sobre-cor);
  flex-direction: column; justify-content: center;
}
@media (min-width: 880px) { .entrar-marca { display: flex; } }

/* O simbolo da marca como grafismo, sangrando pela borda. Decorativo: fica
   atras do texto (z-index 0) e nao concorre com ele. */

/* Um brilho no canto de cima, para o azul chapado ganhar profundidade sem
   virar degrade chamativo. */
.entrar-marca::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.16), transparent 60%);
}
.entrar-marca > * { position: relative; z-index: 1; }

/* DEPOIS do seletor generico acima, e com a mesma especificidade — em
   empate vence quem vem por ultimo. Escrito antes, o grafismo voltava a
   position: relative, entrava no fluxo e empurrava o texto do painel. */
.entrar-marca .entrar-marca__grafismo {
  position: absolute; z-index: 0; right: -55px; bottom: -55px;
  width: 210px; height: 210px; opacity: .08;
  pointer-events: none;
}
.entrar-marca__grafismo svg { width: 100%; height: 100%; display: block; }

.entrar-marca__titulo {
  font-family: var(--fonte-titulo); font-size: 30px; line-height: 1.15;
  margin: 0 0 12px; color: var(--sobre-cor);
}
.entrar-marca__texto {
  margin: 0; font-size: 15px; line-height: 1.6;
  color: var(--sobre-azul-txt); max-width: 34ch;
}

/* --- o lado do formulario --- */
.entrar-caixa { padding: var(--sp-7) var(--sp-5); }
@media (min-width: 880px) { .entrar-caixa { padding: var(--sp-7) var(--sp-6); } }
.entrar-caixa h1 { text-align: center; margin: 0; }
.entrar-sub { text-align: center; color: var(--muted); margin: 6px 0 var(--sp-5); }
.entrar-link { text-align: center; margin-top: 14px; font-size: 14px; }
.entrar-rodape {
  text-align: center; margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid var(--border); color: var(--muted); font-size: 14px;
}
.entrar-rodape p { margin: 0 0 8px; }
.entrar-rodape p:last-child { margin-bottom: 0; }

/* A marca da porta interna, acima do titulo. Ela responde a pergunta que quem
   digitou rh.lojas2001.com faz primeiro: "cheguei no lugar certo?". Vem em
   pastilha e com cadeado — palavra E forma, porque cor sozinha nao conta. */
/* Pastilha da porta, acima do titulo.

   `inline-flex` com margem automatica, e nao `flex`: em bloco ela esticava
   de ponta a ponta do cartao e ficava do tamanho exato do botao Entrar,
   logo abaixo — dois retangulos cheios, um azul claro e um azul escuro,
   com o mesmo desenho. No celular chegava a parecer um botao desligado, e
   houve quem tentasse clicar. Ela e' um SELO: tem de ter o tamanho do que
   esta escrito nela.

   O contorno faz o resto do trabalho. Fundo claro sozinho, sobre o branco
   do cartao, some; com 1px de borda a pastilha tem forma propria mesmo
   para quem enxerga pouca diferenca de cor. */
.entrar-porta {
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content; margin: 0 auto 12px; padding: 5px 12px 5px 10px;
  background: var(--azul-100); color: var(--azul-600);
  border: 1px solid var(--azul-200); border-radius: var(--raio-full);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
}
/* O cadeado sai em 85% do tom do texto: ele acompanha a palavra, nao
   disputa com ela. Continua acima de 3:1 contra o fundo da pastilha. */
.entrar-porta svg { flex: none; opacity: .85; }

/* Centraliza a pastilha quando ela e' filha direta do bloco do formulario
   (o <p> ocupa a linha toda; o `margin: auto` acima e' que a centra). */
.entrar-caixa > .entrar-porta { display: flex; }

/* Rodape da porta interna: uma linha. Nao ha o que divulgar para quem ja
   trabalha aqui — so a saida para o portal de vagas, se a pessoa se enganou
   de endereco. */
/* A PORTA INTERNA E UMA COLUNA DE ALTURA CHEIA.

   Sem isto o `margin-top: auto` do rodape nao tinha contra o que empurrar:
   ele so' funciona dentro de um flex container, e o body era bloco comum.
   Resultado: na tela de entrar, que e' curta, o rodape parava logo abaixo
   do cartao e sobrava um palmo de cinza embaixo dele.

   100svh, e nao 100vh: no celular o `vh` conta a altura COM a barra do
   navegador recolhida, entao a pagina ficava alta demais e nascia com
   rolagem de alguns pixels sem ter conteudo nenhum ali. O `vh` fica de
   reserva para quem nao entende a unidade nova. */
body.porta-interna {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
}
body.porta-interna > main { flex: 1 0 auto; }

/* Rodape da porta interna: duas pontas numa linha so, e empilhado no
   celular. Discreto de proposito — quem esta aqui veio trabalhar, nao
   navegar pelo rodape. */
.rodape-interno {
  border-top: 1px solid var(--border); background: var(--surface);
  padding: var(--sp-4) 0; margin-top: auto;
  color: var(--muted); font-size: 13.5px;
}
.rodape-interno__linha {
  display: flex; flex-wrap: wrap; gap: 10px var(--sp-5);
  align-items: center; justify-content: space-between;
}
.rodape-interno p { margin: 0; }

.rodape-interno__marca {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text);
}
/* O simbolo em azul da marca, pequeno: identifica sem competir com o
   logo do cabecalho. */
.rodape-interno__simbolo { display: inline-flex; width: 18px; height: 18px; color: var(--azul); }
.rodape-interno__simbolo svg { width: 100%; height: 100%; display: block; }

.rodape-interno__meta {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px var(--sp-4);
}
.rodape-interno a { color: var(--azul-600); text-decoration: none; }
.rodape-interno a:hover { text-decoration: underline; }

/* No celular as duas pontas viram duas linhas centradas: lado a lado elas
   quebrariam no meio de "Acesso interno". */
@media (max-width: 620px) {
  .rodape-interno__linha { flex-direction: column; justify-content: center; text-align: center; }
}

/* ---------------------------------------------------------------------
   CONFIGURACOES -> MENU DO SISTEMA

   A lista tem a forma do proprio menu: grupo em cima, filhos recuados.
   Sem esse recuo a tela vira uma coluna de quarenta caixas iguais, e nao
   da' para saber o que e' grupo e o que esta' dentro de que.
   --------------------------------------------------------------------- */
.menu-grupo { border-top: 1px solid var(--border); padding: 4px 0; }
.menu-grupo:first-of-type { border-top: 0; }

.menu-linha {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 4px 6px; border-radius: var(--raio-sm);
  cursor: pointer; font-size: 14px;
}
.menu-linha:hover { background: var(--bg); }
.menu-linha input { flex: none; width: 17px; height: 17px; }
.menu-linha--grupo { font-weight: 700; }
.menu-linha--sub { padding-left: 34px; font-weight: 400; }
.menu-linha__icone { display: inline-flex; color: var(--azul); }
.menu-linha__nome { flex: 1 1 auto; min-width: 0; }
/* A etiqueta "sempre no menu" (120px) nao podia descer e deixava 55px para
   o nome em 320px — "Visao geral" quebrava em duas. Com a quebra liberada, a
   etiqueta desce quando nao cabe e encosta a direita. */
.menu-linha { flex-wrap: wrap; }
.menu-linha > .tag { margin-left: auto; }

/* A rota so' interessa a quem esta conferindo: fica discreta, e some no
   celular, onde ela empurraria o nome do item para duas linhas. */
.menu-linha__rota {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--muted-soft);
}
@media (max-width: 700px) { .menu-linha__rota { display: none; } }

/* Item que nao pode ser desligado: a caixa continua marcada, mas o cinza
   diz que nao adianta clicar. */
.menu-linha input:disabled { cursor: not-allowed; }
.menu-linha:has(input:disabled) { cursor: default; color: var(--muted); }

/* Previa da foto da unidade, na tela de Filiais. Miniatura na mesma
   proporcao do cartao publico (2:1), para o RH ver o recorte que vai
   valer, e nao a imagem inteira. */
.foto-loja {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.foto-loja img {
  width: 160px; aspect-ratio: 2 / 1; object-fit: cover; flex: none;
  border-radius: var(--raio-sm); border: 1px solid var(--border);
  background: var(--cinza);
}

/* ---------------------------------------------------------------------
   ENTRADA DA TELA DE LOGIN

   Sem biblioteca: sao duas @keyframes e um punhado de atrasos. GSAP aqui
   seriam 70 KB de JavaScript para animar seis elementos que ja' estao na
   tela — e esta e' a pagina que a pessoa abre com pressa, de manha.

   So' transform e opacity: as duas propriedades que o navegador anima sem
   recalcular layout, entao roda liso ate' em celular velho.

   O bloco inteiro esta dentro de `prefers-reduced-motion: no-preference`.
   Quem pediu menos movimento no proprio aparelho — em geral por causa de
   enxaqueca ou vertigem — recebe a tela pronta, sem um quadro de
   animacao, e nao uma versao "mais lenta".
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes entrar-sobe {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes entrar-lado {
    from { opacity: 0; transform: translate3d(-16px, 0, 0); }
    to   { opacity: 1; transform: none; }
  }

  /* 420ms e a curva com desaceleracao no fim: o bloco "assenta" em vez de
     parar seco. Acima de ~500ms a tela passa a parecer lenta. */
  .entrar-tela {
    animation: entrar-sobe .42s cubic-bezier(.22, 1, .36, 1) both;
  }

  /* O painel entra pelo lado, o formulario de baixo: direcoes diferentes
     separam as duas metades sem precisar de linha divisoria. */
  /* :not() no grafismo — ele nao entra na coreografia. O keyframe termina
     em opacity:1, e o modo "both" faz esse valor GRUDAR no elemento depois
     de terminar: a marca d'agua, que devia ficar em 8%, aparecia opaca por
     cima do texto. */
  .entrar-marca > *:not(.entrar-marca__grafismo) {
    animation: entrar-lado .5s cubic-bezier(.22, 1, .36, 1) both;
  }
  .entrar-marca > *:nth-child(2) { animation-delay: .07s; }

  /* Escalonamento curto (55ms) e so' nos primeiros: passando disso, o
     ultimo item chega tarde demais e a tela parece travada. */
  .entrar-caixa > *,
  .entrar-caixa form > * {
    animation: entrar-sobe .38s cubic-bezier(.22, 1, .36, 1) both;
  }
  .entrar-caixa > *:nth-child(2)      { animation-delay: .06s; }
  .entrar-caixa > *:nth-child(3)      { animation-delay: .12s; }
  .entrar-caixa > *:nth-child(n+4)    { animation-delay: .18s; }
  .entrar-caixa form > *:nth-child(3) { animation-delay: .06s; }
  .entrar-caixa form > *:nth-child(4) { animation-delay: .12s; }
}

/* O campo em foco ganha um halo, alem do anel padrao: numa tela de duas
   caixas, saber em qual delas se esta digitando e' metade da tarefa. */
.entrar-caixa .entrada {
  transition: border-color .15s ease, box-shadow .15s ease;
}
.entrar-caixa .entrada:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 4px rgba(0, 108, 181, .14);
}


/* =====================================================================
   PAINEL: MOVIMENTO E MICRO-INTERACAO

   Painel interno nao e' vitrine: quem abre esta tela abre dezenas de vezes
   por dia, e efeito que impressiona na primeira vez irrita na vigesima. O
   catalogo (Hover Micro-interaction, tier "subtle") da' o teto: 150-250ms,
   deslocamento de poucos pixels, e nada que atrase a leitura.

   Por isso aqui NAO tem: entrada em cascata longa, escala nos cartoes,
   sombra que salta. Tem tres coisas, e cada uma responde a uma pergunta que
   a pessoa faz com o olho:

   1. "A tela terminou de carregar?" — os blocos entram juntos, uma vez.
   2. "Este cartao e' clicavel?" — so' o que E' clicavel se mexe no hover.
   3. "Quanto isso vale?" — as barras crescem do zero, entao a comparacao
      entre elas fica visivel antes de a pessoa ler os numeros.

   Tudo dentro de prefers-reduced-motion: no-preference.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @keyframes painel-entra {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: none; }
  }

  /* UMA entrada para a tela inteira, e nao uma por cartao: o painel tem
     telas com vinte blocos, e escalonar todos faria o ultimo aparecer meio
     segundo depois — tempo em que a pessoa ja' esta tentando clicar nele. */
  .painel__cabecalho,
  .painel__area > .cartao,
  .painel__area > .kpis,
  .painel__area > .grade-2,
  .painel__area > .grade-vagas {
    animation: painel-entra .28s cubic-bezier(.22, 1, .36, 1) both;
  }
  .painel__area > *:nth-child(2) { animation-delay: .04s; }
  .painel__area > *:nth-child(n+3) { animation-delay: .08s; }

  /* As barras dos graficos crescem da esquerda. `transform` e nao `width`:
     largura recalcula layout a cada quadro e trava em maquina fraca. */
  @keyframes barra-cresce {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  .barra-comp > span,
  .kpi-barra > i,
  .painel__area [style*="background:var(--azul-300)"],
  .painel__area [style*="background:var(--azul)"] {
    transform-origin: left center;
  }
}

/* --- micro-interacao ---------------------------------------------------

   So' no que LEVA A ALGUM LUGAR. Cartao que apenas informa nao se mexe: dar
   retorno de hover a um bloco que nao responde ao clique e' prometer uma
   acao que nao existe, e a pessoa clica duas vezes antes de desistir. */
a.cartao,
.cartao a.linha-secao,
.lista-clicavel > a {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.cartao:hover,
.cartao a.linha-secao:hover,
.lista-clicavel > a:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-g);
  border-color: var(--azul-200);
}

/* O KPI ganha um realce discreto na faixa de cima quando o ponteiro passa —
   ele nao e' clicavel, entao nao sobe nem ganha sombra; so' confirma qual
   deles a pessoa esta lendo numa fileira de seis. */
.kpi { transition: border-top-width .15s ease, background .15s ease; }
.kpi:hover { border-top-width: 4px; background: var(--bg); }

/* Botao: o retorno de clique que faltava. 90ms, porque passar disso faz o
   botao parecer lento justamente no instante em que ele tem de parecer
   rapido. */
.btn { transition: background .15s ease, color .15s ease, border-color .15s ease, transform .09s ease; }
.btn:active { transform: translateY(1px); }

/* Linha de tabela: o alvo do olho ao correr a lista. `--realce` e' o token
   do estado interativo, o mesmo do item de menu sob o cursor. */
.tabela tbody tr { transition: background .12s ease; }
.tabela tbody tr:hover { background: var(--realce); }


/* ---------------------------------------------------------------------
   PAINEL DE DADOS: HIERARQUIA

   O catalogo devolve "Minimalism & Swiss Style" para painel administrativo,
   e o que isso quer dizer na pratica nao e' cor: e' grade rigorosa e
   hierarquia por TAMANHO E PESO, nao por enfeite. Duas coisas aqui.
   --------------------------------------------------------------------- */

/* Titulo de grupo de indicadores. Pequeno de proposito: ele orienta, nao
   compete com os numeros — que sao o assunto. O complemento em peso normal
   diz o recorte ("Ultimos 30 dias", "nao muda com o periodo") sem precisar
   de uma segunda linha. */
.kpis__titulo {
  font-family: var(--fonte); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 8px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.kpis__titulo span {
  font-weight: 400; letter-spacing: 0; text-transform: none;
  font-size: 12.5px; color: var(--muted-soft);
}

/* Legenda de grafico: uma linha, itens que nao quebram no meio. Substitui o
   paragrafo explicativo que ocupava quatro linhas dentro do cartao. */
.legenda {
  list-style: none; margin: 0 0 var(--sp-3); padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px var(--sp-4);
  font-size: 13px; color: var(--muted);
}
.legenda li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* O detalhe fica recolhido: quase ninguem precisa dele duas vezes, e quem
   precisa acha. `summary` com alvo de 44px porque e' um controle. */
.legenda-detalhe { margin: 0 0 var(--sp-4); }
.legenda-detalhe > summary {
  cursor: pointer; font-size: 13px; color: var(--azul-600);
  display: inline-flex; align-items: center; min-height: 32px;
}
.legenda-detalhe > summary:hover { text-decoration: underline; }


/* =====================================================================
   METRICAS DE RECRUTAMENTO

   ESTAS REGRAS NAO EXISTIAM. A tela usava treze classes — met-degrau,
   met-trilho, met-passagem, met-grafico, met-col, met-eixo, met-numeros,
   met-numero, met-rotulo, met-legenda, met-nota, met-recorte, met-etapa —
   e nenhuma delas tinha uma linha de estilo. O HTML estava certo; o
   navegador desenhava tudo em fluxo bruto, um <div> embaixo do outro, sem
   altura, sem espaco e sem alinhamento. Dai o texto encostando no grafico:
   a barra nao tinha altura declarada e o rotulo seguinte subia por cima.

   E o tipo de defeito que so aparece com a tela aberta — auditoria de
   contraste e lint de sintaxe passam os dois, porque nao ha erro nenhum
   no arquivo: ha uma regra que nunca foi escrita.
   ===================================================================== */

/* --- linha de recorte, abaixo do filtro --- */
.met-recorte {
  margin: 0 0 var(--sp-4); font-size: 13.5px; color: var(--muted);
  line-height: 1.6;
}

/* --- funil de conversao ------------------------------------------------
   Cada degrau e' rotulo + numero em cima, barra embaixo. A barra tem
   ALTURA DECLARADA (10px) — sem isso ela colapsava para zero e o degrau
   seguinte encostava no anterior. */
.met-degrau { margin: 0 0 var(--sp-3); }
.met-degrau__linha {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  font-size: 14px; margin-bottom: 5px;
}
.met-degrau__valor {
  font-family: var(--fonte-titulo); font-size: 15px; white-space: nowrap;
}
.met-trilho {
  height: 10px; border-radius: var(--raio-full);
  background: var(--bg); border: 1px solid var(--border);
  overflow: hidden;
}
.met-trilho > span {
  display: block; height: 100%;
  background: var(--azul); border-radius: var(--raio-full);
}
.met-trilho--verde > span { background: var(--verde-ok); }

/* A passagem entre dois degraus: recuada e menor, para se ler como nota
   entre as barras, e nao como mais um degrau. */
.met-passagem {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0 0 var(--sp-3) 22px;
  font-size: 12.5px; color: var(--muted-soft); line-height: 1.5;
}
.met-passagem svg { flex: none; margin-top: 2px; color: var(--muted-soft); }

/* Etapa que nenhuma vaga do recorte tem. */
.met-etapa {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 var(--sp-3); font-size: 14px;
}
.met-etapa--ausente { color: var(--muted-soft); }

.met-nota {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted-soft); line-height: 1.6;
  max-width: 68ch;
}

/* --- grafico de colunas ------------------------------------------------
   `align-items: flex-end` e' o que faz as colunas crescerem do chao. A
   altura fixa do grafico e' obrigatoria: as colunas usam altura em %, e
   porcentagem de um pai sem altura da zero. */
.met-grafico {
  display: flex; align-items: flex-end; gap: 4px;
  height: 180px; margin: var(--sp-4) 0 0;
  padding: 0 2px;
  border-bottom: 1px solid var(--border);
}
.met-grafico--denso { gap: 2px; }

.met-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.met-col__pilha {
  display: flex; flex-direction: column-reverse; justify-content: flex-start;
  width: 100%; min-height: 2px;
  background: var(--azul-400); border-radius: 3px 3px 0 0;
  overflow: hidden;
}
/* Semana sem candidatura: um fio, e nao nada. Coluna ausente lê como falha
   de carregamento; um fio lê como zero. */
.met-col__pilha--zero { background: var(--border); height: 2px !important; }
.met-col__verde { display: block; width: 100%; background: var(--verde); }

.met-eixo {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  margin-top: 6px; font-size: 12px; color: var(--muted-soft);
}

.met-legenda {
  display: flex; flex-wrap: wrap; gap: 6px var(--sp-4);
  margin-top: var(--sp-3); font-size: 12.5px; color: var(--muted);
}
.met-legenda span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.met-legenda i {
  width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block;
}

/* --- numeros soltos (tempo ate contratar) --- */
.met-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-4); margin: var(--sp-4) 0 0;
}
.met-rotulo {
  font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; line-height: 1.3;
}
.met-numero {
  font-family: var(--fonte-titulo); font-size: 26px; line-height: 1.15; margin-top: 4px;
}
.met-numero small { font-size: 14px; color: var(--muted); font-family: var(--fonte); }


/* =====================================================================
   MATRIZ 9-BOX

   Grade de 4 colunas por 4 linhas: a primeira coluna e a ultima linha sao
   os eixos, o resto sao as nove caixas. Potencial ALTO em cima e desempenho
   crescendo para a direita — e' como o 9-box e desenhado em todo lugar, e
   inverter um eixo faria o RH ler o quadro ao contrario.
   ===================================================================== */
.box9 {
  display: grid;
  grid-template-columns: 92px repeat(3, minmax(0, 1fr));
  gap: 8px; margin-top: var(--sp-4);
}

.box9__eixo {
  display: flex; flex-direction: column; justify-content: center;
  font-size: 12px; color: var(--muted); line-height: 1.3; /* (v1.78.1) era 11,5px */
}
/* (v1.78.1) O rótulo "Potencial" tinha 10,5px, abaixo do mínimo de 12px. */
.box9__eixo span { text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
.box9__eixo strong { font-size: 13px; color: var(--text); }
.box9__eixo--x { align-items: center; text-align: center; padding-top: 4px; }

.box9__caixa {
  display: flex; flex-direction: column; gap: 6px;
  min-height: 132px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--raio);
  background: var(--surface);
}
/* A cor diz o que fazer, e nunca sozinha: cada caixa tem NOME e frase de
   acao escritos. Cor como unico portador da informacao reprova na regra 10
   do catalogo — e nao serve a quem nao distingue verde de vermelho. */
.box9__caixa--boa     { background: var(--verde-bg);   border-color: var(--verde-borda); }
.box9__caixa--atencao { background: var(--amarelo-bg); border-color: var(--dourado-borda); }
.box9__caixa--ruim    { background: var(--verm-100);   border-color: var(--verm-300); }
/* (v1.78.1) A caixa vazia era apagada com opacidade de 72%, e a frase de ação
   dela caía para 2,9 a 3,6:1. Agora ela fica em cor cheia e o "vazia" é dito
   pela borda tracejada (e pelo 0 da contagem, que já estava lá). */
.box9__caixa--vazia   { opacity: 1; border-style: dashed; }

.box9__topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 13px;
}
.box9__conta {
  font-family: var(--fonte-titulo); font-size: 17px; color: var(--text);
}
.box9__gente { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
/* (v1.78.1) Sem limite, a caixa do meio com 64 pessoas esticava a fileira
   para 5.007px, e as vizinhas (0 a 3 pessoas) esticavam junto: a matriz
   passava de 7.000px e não dava para ver o quadro inteiro. A lista rola
   dentro da própria caixa; todos os nomes continuam lá, e a contagem fica
   visível no topo. O margin-top:auto da .box9__acao continua valendo.
   (v1.78.1) Sem overscroll-behavior:contain: a lista ocupa a largura toda a
   320px, e o contain prendia o dedo (e a roda do mouse) nela ao chegar ao
   fim, sem passar a rolagem para a página. */
.box9__gente { max-height: 18rem; overflow-y: auto; }
.box9__gente li {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio-sm); padding: 4px 7px; font-size: 12.5px;
  display: grid; gap: 1px;
}
.box9__nome  { font-weight: 600; color: var(--text); }
.box9__cargo { color: var(--muted-soft); font-size: 12px; } /* (v1.78.1) era 11,5px */

/* A frase de acao desce para o pe' da caixa: ela e' o que se le POR ULTIMO,
   depois de ver quem esta ali. */
.box9__acao {
  margin: auto 0 0; font-size: 12px; color: var(--muted); line-height: 1.4; /* (v1.78.1) era 11,5px */
}

/* No celular a grade de nove nao cabe: vira uma coluna, e o eixo Y some
   porque cada caixa ja' diz o nome dela. */
@media (max-width: 780px) {
  .box9 { grid-template-columns: 1fr; }
  .box9__eixo--y { display: none; }
  .box9__eixo--x { display: none; }
  .box9__caixa { min-height: 0; }
}


/* ---------------------------------------------------------------------
   PESQUISA DE CLIMA (a tela de quem responde)

   A escala aparece inteira em cada afirmacao, e nao uma vez no topo: ler
   "concordo totalmente" ao lado do que se esta marcando e' o que evita a
   resposta trocada.
   --------------------------------------------------------------------- */
.pesquisa-dimensao {
  font-family: var(--fonte-titulo); font-size: 15px;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--azul-600); margin: var(--sp-6) 0 var(--sp-3);
}
.pesquisa-dimensao:first-of-type { margin-top: var(--sp-4); }

.pesquisa-item { margin-bottom: var(--sp-3); }
.pesquisa-afirmacao {
  margin: 0 0 var(--sp-4); font-size: 16px; line-height: 1.5; color: var(--text);
}

/* Cinco opcoes em coluna no celular e em linha a partir do tablet. Cada uma
   e' um alvo de 44px inteiro — a pessoa clica no rotulo, e nao na bolinha. */
.pesquisa-escala { display: grid; gap: 8px; }
@media (min-width: 700px) {
  .pesquisa-escala { grid-template-columns: repeat(5, 1fr); }
}
.pesquisa-opcao {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--raio);
  cursor: pointer; font-size: 13.5px; line-height: 1.3;
  transition: border-color .15s, background .15s;
}
@media (min-width: 700px) {
  .pesquisa-opcao { flex-direction: column; text-align: center; gap: 4px; padding: 10px 8px; }
}
.pesquisa-opcao:hover { border-color: var(--azul-200); background: var(--realce); }
/* :has() marca a opcao escolhida sem uma linha de JavaScript. */
.pesquisa-opcao:has(input:checked) {
  border-color: var(--azul); background: var(--azul-100);
}
.pesquisa-opcao:has(input:focus-visible) { outline: 2px solid var(--anel); outline-offset: 2px; }
.pesquisa-opcao input { flex: none; }
.pesquisa-opcao__num { font-family: var(--fonte-titulo); font-size: 16px; color: var(--azul-600); }
.pesquisa-opcao__rot { color: var(--muted); }

/* eNPS: onze numeros numa regua. */
.pesquisa-nps { display: flex; flex-wrap: wrap; gap: 6px; }
.pesquisa-nps__op { flex: 1 1 52px; }
.pesquisa-nps__op input { position: absolute; opacity: 0; pointer-events: none; }
.pesquisa-nps__op span {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; border: 1px solid var(--border); border-radius: var(--raio);
  font-family: var(--fonte-titulo); font-size: 16px; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.pesquisa-nps__op:hover span { border-color: var(--azul-200); background: var(--realce); }
.pesquisa-nps__op input:checked + span {
  background: var(--azul); border-color: var(--azul); color: var(--sobre-cor);
}
.pesquisa-nps__op input:focus-visible + span { outline: 2px solid var(--anel); outline-offset: 2px; }
.pesquisa-nps__pes {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  margin-top: 8px; font-size: 12.5px; color: var(--muted-soft);
}


/* ---------------------------------------------------------------------
   TELA DE ERRO

   Antes o numero do erro era o elemento maior da tela, em azul claro, e
   embaixo dele dois botoes lado a lado. O catalogo e' direto sobre isto
   (Feedback > Error Recovery): erro precisa de UM caminho de saida claro,
   e nao de uma escolha. E o numero, que nao diz nada a quem le, nao pode
   ser o que ocupa mais espaco.

   O que a tela faz agora: o codigo vira etiqueta pequena, o texto explica
   de quem foi a culpa (em 500 e' nossa, e esta escrito assim), e ha um
   unico botao.
   --------------------------------------------------------------------- */
.erro-tela {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-7) 16px;
  min-height: 52vh;
}

.erro-caixa {
  max-width: 460px; width: 100%; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio-card); box-shadow: var(--sombra-g);
  padding: var(--sp-7) var(--sp-6);
}

/* O codigo em pastilha: identifica sem gritar. Fundo com o azul mais claro
   da marca e texto em --azul-600, que da 6,2:1 — le-se bem, e continua
   sendo o menor elemento da tela. */
.erro-selo {
  display: inline-block; margin-bottom: var(--sp-4);
  padding: 4px 12px; border-radius: var(--raio-full);
  background: var(--azul-100); color: var(--azul-600);
  border: 1px solid var(--azul-200);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; letter-spacing: .08em;
}

.erro-titulo {
  font-size: 26px; line-height: 1.2; margin: 0 0 10px;
}
.erro-texto {
  margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6;
}
.erro-hora {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted-soft);
}
/* Um botao so, em bloco: nao ha o que escolher numa tela de erro. */
.erro-botao { margin-top: var(--sp-5); width: 100%; justify-content: center; }

@media (min-width: 520px) {
  .erro-botao { width: auto; min-width: 220px; }
}


/* ---------------------------------------------------------------------
   FAIXA DE CHAMADA NO CELULAR: ALTURA E RESPIRO

   Estas regras vivem no FIM da folha de proposito. A regra geral de
   `.faixa-chamada-linha` (padding 28px) esta escrita depois do bloco de
   media query la' em cima, e com a mesma especificidade vence quem vem por
   ultimo — escrever aqui e' mais honesto que inflar seletor so' para
   ganhar a disputa.

   A ALTURA. Ela saia de `100vw / 1.875`, a proporcao do recorte mobile:
   num telefone de 375px da' 200px, aceitavel, mas num aparelho largo ou em
   paisagem de 510px ja' passava de 270 — quase um terco da tela ocupado por
   uma faixa de passagem. O teto de 220px corta um pouco das laterais da
   foto, e nao dos rostos: o recorte mobile tem as duas pessoas ao centro
   justamente para aguentar isso.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  .faixa-chamada--foto { min-height: min(calc(100vw / 1.875), 220px); }

  .faixa-chamada-linha {
    width: 100%;
    padding-top: 20px; padding-bottom: 20px;
    gap: var(--sp-3);
  }

  /* Duas linhas de titulo ja' e' o limite util aqui: abaixo disso a chamada
     vira paragrafo, e ninguem le faixa de passagem como paragrafo. */
  .faixa-chamada span { font-size: 16px; line-height: 1.35; }
}


/* ---------------------------------------------------------------------
   QUADRO DE PERMISSOES DO PAPEL (tela de Usuarios)

   Duas colunas: o que o papel pode e o que nao pode. A segunda existe
   porque e' a que evita o erro — quem cria um acesso raramente se pergunta
   o que a pessoa NAO vai conseguir fazer, e e' disso que nasce o chamado
   "fulano nao consegue ver X".
   --------------------------------------------------------------------- */
.papel-quadro {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--raio); padding: 14px 16px;
}
.papel-quadro__resumo {
  margin: 0 0 12px; font-size: 14px; color: var(--text); font-weight: 600;
}
.papel-quadro__listas {
  display: grid; gap: var(--sp-4);
}
@media (min-width: 620px) {
  .papel-quadro__listas { grid-template-columns: 1fr 1fr; }
}
.papel-quadro__rotulo {
  display: block; margin-bottom: 4px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em; /* (v1.78.1) era 11,5px */
}
/* Verde e vermelho ESCUROS: sao rotulos de texto, e precisam de 4,5:1 —
   a cor de borda da mesma familia reprovaria aqui. */
.papel-quadro__rotulo--pode { color: var(--verde-escuro); }
.papel-quadro__rotulo--nao  { color: var(--verm-escuro); }
.papel-quadro ul {
  margin: 0; padding-left: 18px;
  display: grid; gap: 3px;
  font-size: 13px; color: var(--muted); line-height: 1.45;
}
.papel-quadro .aviso { margin: var(--sp-4) 0 0; }

/* ---------------------------------------------------------------------
   PAINEL DO COLABORADOR
   ---------------------------------------------------------------------
   Duas coisas so': o cabecalho de identidade ("bom dia, fulano" com cargo,
   unidade, gestor e tempo de casa) e o formulario de uma linha que libera
   acesso na lista de colaboradores. Todo o resto reusa cartao, kpi,
   linha-secao, met-degrau e tabela — que ja' passaram pela auditoria de
   contraste e ja' sabem se comportar no celular.

   O cabecalho usa <dl>, e nao uma tabela: sao pares rotulo/valor, que e'
   exatamente o que uma lista de definicoes e'. Leitor de tela anuncia o
   rotulo junto do valor sem precisar de header de coluna.
   --------------------------------------------------------------------- */
.eu-cabeca {
  display: grid; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.eu-cabeca__ola {
  font-size: 14px; color: var(--muted); margin-bottom: 2px;
}
.eu-cabeca__nome {
  margin: 0; line-height: 1.15;
}
.eu-cabeca__meta {
  margin: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.eu-cabeca__meta > div {
  background: var(--surface); border: 1px solid var(--linha);
  border-radius: var(--raio-lg); padding: 10px 12px;
  min-width: 0;
}
.eu-cabeca__meta dt {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em; /* (v1.78.1) era 11,5px */
  color: var(--muted); margin-bottom: 3px;
}
.eu-cabeca__meta dd {
  margin: 0; font-weight: 600; font-size: 14px; line-height: 1.35;
  /* Nome de gestor e nome de cargo sao longos e quebram a coluna inteira
     quando nao tem para onde ir. */
  overflow-wrap: anywhere;
}

/* O formulario de liberar acesso vive DENTRO de uma celula de tabela, e por
   isso e' de uma linha so' com o campo encolhendo antes do botao: numa
   tabela de sete colunas, um campo de largura fixa empurra as outras. */
.liberar-acesso {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.liberar-acesso .entrada {
  flex: 1 1 150px; min-width: 0; max-width: 220px;
  font-size: 13px; padding: 6px 8px;
}

/* ---------------------------------------------------------------------
   DOCUMENTAÇÃO DE ADMISSÃO
   ---------------------------------------------------------------------
   Um cartão por documento, e o cartão inteiro muda de cara quando o arquivo
   chega: a borda esquerda fica verde e o selo aparece. E' a resposta visual
   para a unica pergunta que quem esta sendo admitido faz — "ja mandei
   esse?" — e ela precisa ser respondida de relance, rolando a lista no
   celular, sem ler nada.

   Grade de largura minima 300px: no desktop viram duas ou tres colunas; no
   celular, uma. Sem media query, porque o auto-fill ja resolve.
   --------------------------------------------------------------------- */
.doc-lista {
  display: grid; gap: var(--sp-4);
  /* (v1.70.1) min(300px, 100%): em 320px sobram 288px úteis, e a trilha de
     300px empurrava o cartão 12px além da lista (4px de margem à direita
     contra 16px à esquerda) em Minha admissão e na ficha da admissão. */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  margin-bottom: var(--sp-4);
}
/* Depois de um cartao a lista colava nele: a .cartao nao tem margem de
   baixo, e o `.cartao + .cartao` que espaca a pilha nao alcanca outro tipo
   de bloco. Medido na tela da admissao: 0px entre o cartao e a lista. */
.cartao + .doc-lista { margin-top: var(--sp-4); }
.doc-item {
  background: var(--surface); border: 1px solid var(--linha);
  border-left: 3px solid var(--border);
  border-radius: var(--raio-card); padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(26, 26, 26, .04);
  min-width: 0;
}
.doc-item--ok { border-left-color: var(--verde-borda); }

.doc-item__cabeca {
  display: flex; gap: 10px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 4px;
}
.doc-item__nome {
  display: block; margin-bottom: 4px; line-height: 1.3;
  /* Nome de documento e' frase ("Certidao de nascimento dos filhos") e
     precisa poder quebrar dentro do cartao estreito. */
  overflow-wrap: anywhere;
}
.doc-item__dica {
  margin: 0 0 10px; font-size: 13px; color: var(--muted); line-height: 1.45;
}

/* Verde ESCURO no texto do selo: e' texto sobre fundo claro, e precisa de
   4,5:1 — a cor de borda da mesma familia reprovaria. */
.doc-selo {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 700;
  background: var(--verde-bg); color: var(--verde-escuro);
}
.doc-selo svg { flex: none; }

/* O campo de arquivo fica com a LINHA INTEIRA, e o botao vai para baixo.
   Lado a lado num cartao de 300px sobravam ~90px para o campo, e o nome do
   arquivo escolhido aparecia como "N..." — a pessoa nao conseguia conferir
   se pegou a foto certa antes de enviar. */
.doc-item__acao {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.doc-item__acao .entrada {
  flex: 1 1 100%; min-width: 0; font-size: 13px; padding: 6px 8px;
}
.doc-item__acao .btn { flex: 0 0 auto; }

/* ENVIO DE DOCUMENTO — TIRAR FOTO OU ANEXAR (v1.60.3).
   Sem JavaScript: os dois campos nativos, cada um com o rotulo em cima (a
   camera do celular abre pelo `capture` do primeiro). Com JavaScript
   (doc-envio.js poe .doc-envio--js): os campos somem por tras de dois botoes
   de 44px e o escolhido aparece numa previa antes do Enviar. */
.doc-envio { display: grid; gap: 10px; margin-top: 4px; }
.doc-envio__opcoes { display: grid; gap: 10px; }
.doc-envio__opcao { display: grid; gap: 4px; min-width: 0; }
.doc-envio__rotulo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--muted);
}
.doc-envio__campo { font-size: 13px; max-width: 100%; min-width: 0; }

.doc-envio--js .doc-envio__opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-envio--js .doc-envio__opcao {
  /* Sem quebra no rotulo: quando os dois nao cabem lado a lado (celular),
     cada um vai para a sua linha, na largura toda — melhor para o polegar
     que um "Anexar / arquivo" espremido em duas linhas. */
  display: inline-flex; flex: 1 1 150px; white-space: nowrap;
  position: relative; cursor: pointer;
}
.doc-envio--js .doc-envio__rotulo { color: inherit; font-size: inherit; }
.doc-envio--js .doc-envio__campo {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; pointer-events: none;
}
.doc-envio--js .doc-envio__opcao:focus-within { outline: 2px solid var(--azul); outline-offset: 2px; }
/* Com um arquivo escolhido, os botoes de escolha dao lugar a previa. */
.doc-envio--escolhido .doc-envio__opcoes { display: none; }
.doc-envio--js:not(.doc-envio--escolhido) .doc-envio__envia { display: none; }
.doc-envio__envia .btn { width: 100%; }

/* A foto na largura do cartao: a previa existe para a pessoa conferir se o
   numero do documento da para LER, e uma miniatura de 56px nao responde. */
.doc-envio__previa {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 8px 10px; min-width: 0;
  padding: 8px; border: 1px dashed var(--border); border-radius: var(--raio);
  background: var(--bg);
}
.doc-envio__previa img {
  grid-column: 1 / -1;
  width: 100%; height: auto; max-height: 220px; object-fit: contain;
  border-radius: 6px; background: var(--surface);
}
.doc-envio__nome { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.doc-envio__nome small { display: block; color: var(--muted); }

/* UM ARQUIVO POR DEPENDENTE (v1.60.4). A lista de quem ja mandou fica
   dentro do documento: o nome em cima, data e "ver" embaixo, e a acao
   (Trocar, ou a situacao no Drive do lado do DP) a direita. */
.doc-deps {
  list-style: none; margin: 4px 0 10px; padding: 0;
  display: grid; gap: 6px;
}
.doc-deps__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 2px 10px; padding: 8px 10px;
  background: var(--bg); border-radius: var(--raio);
}
.doc-deps__nome {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-weight: 700; font-size: 14px; overflow-wrap: anywhere;
}
.doc-deps__nome svg { flex: none; color: var(--verde-escuro); }
.doc-deps__meta { grid-column: 1; font-size: 12.5px; color: var(--muted); }
.doc-deps__item > .btn,
.doc-deps__item > .tag { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.doc-envio__dep { display: grid; gap: 4px; }
.doc-envio__dep label { font-weight: 700; font-size: 13.5px; }

/* Voltando de um envio (#docN), o documento nao fica atras do topo fixo, e
   o recado que o script traz para dentro dele ganha respiro. */
.doc-item { scroll-margin-top: 90px; }
.doc-item__recado { margin: 0 0 10px; }

/* Titulo de bloco na lista de documentos do DP ("Para todos", "So para quem
   tem dependentes", "Fora da lista"). Pequeno e em caixa alta, como o titulo
   dos indicadores: orienta a leitura sem competir com o nome do documento. */
.doc-bloco {
  font-family: var(--fonte); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: var(--sp-5) 0 0;
}
.doc-bloco:first-of-type { margin-top: 0; }

/* Paginacao de lista longa (Candidatos: ~14,5 mil depois do Solides).
   Alvo de 44px de altura para o dedo; a pagina atual e' texto, nao link,
   para o leitor de tela anunciar "pagina atual" em vez de um link morto. */
.paginacao {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
  margin-top: var(--sp-4);
}
.paginacao__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--raio);
  background: var(--surface); color: var(--azul-700); text-decoration: none; font-weight: 600;
}
a.paginacao__item:hover { border-color: var(--azul-200); background: var(--azul-100); }
.paginacao__item--atual { background: var(--azul); border-color: var(--azul); color: #fff; }
.paginacao__salto { color: var(--muted); padding: 0 2px; }

/* A barra inteira: "Mostrar [50] por pagina", a faixa ("1-50 de 14.493") e
   os numeros. Quebra em linhas no celular em vez de estourar a largura. */
.paginacao-barra {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border);
}
.paginacao-barra .paginacao { margin-top: 0; }
.paginacao__por { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; font-size: 14px; }
.paginacao__por label { margin: 0; font-weight: 600; }
.paginacao__por select { width: auto; min-height: 44px; }
.paginacao__faixa { font-size: 14px; color: var(--muted); }

/* O bloco de acao de uma linha do PDI: o campo de texto aparece so' quando a
   pessoa vai CONCLUIR, e nesse momento ele precisa da largura toda. Lado a
   lado com o botao, num cartao estreito, sobrariam ~80px para escrever. */
.pdi-acao {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
  min-width: 0; flex: 1 1 260px;
}
.pdi-acao .entrada { flex: 1 1 100%; min-width: 0; font-size: 13px; }
.pdi-acao .btn { flex: 0 0 auto; }

/* =====================================================================
   RETENCAO E ENGAJAMENTO (v1.43) — pesquisas, beneficios, cultura
   ===================================================================== */
/* Filtro numa linha so': os campos dividem a linha e quebram quando nao cabem. */
.filtros-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filtros-linha > .btn { flex: none; }
.tabela-rolagem { overflow-x: auto; }

/* Lista de pessoas para marcar (convite de pesquisa, beneficio em lote). */
.lista-marcar {
  display: grid; gap: 2px; max-height: 420px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--raio); padding: 4px;
}
.lista-marcar__item { padding: 8px 10px; border-radius: var(--raio-sm); align-items: flex-start; }
.lista-marcar__item:hover { background: var(--bg); }
.lista-marcar__item--off { opacity: .6; }
@media (min-width: 900px) { .lista-marcar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A pergunta e' um fieldset (o grupo de respostas tem nome para o leitor de
   tela). O legend flutuante deixa de "morar" na borda do cartao — sem isso
   ele cortaria a linha de cima, que e' o comportamento padrao do legend. */
.pesquisa-item { min-width: 0; }
.pesquisa-item > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--sp-3); }
.pesquisa-item > legend + * { clear: both; }
.pesquisa-escolhas { display: grid; gap: 4px; }
.pesquisa-grade { display: grid; gap: var(--sp-3); }
.pesquisa-grade__linha { border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.pesquisa-grade__linha:first-child { border-top: 0; padding-top: 0; }
.pesquisa-grade__rotulo { font-weight: 700; margin-bottom: 6px; }
.pesquisa-grade__opcoes { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pergunta-extra { border: 1px solid var(--border); border-radius: var(--raio); padding: 4px 12px; margin-bottom: var(--sp-3); }
.pergunta-extra > summary { cursor: pointer; font-weight: 600; font-size: 14px; min-height: var(--alvo); display: flex; align-items: center; }
.pergunta-extra[open] > summary { margin-bottom: var(--sp-2); }
.entrada--link { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.resposta-aberta {
  padding: 10px 12px; background: var(--bg); border-radius: var(--raio); margin-top: 8px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.previa-pesquisa { max-width: 760px; }
.tabela--grade th, .tabela--grade td { text-align: center; }

/* Cultura: Missao, Visao e Valores lado a lado, e a matriz SWOT 2x2. */
.mvv { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .mvv { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mvv__bloco h3 { font-family: var(--fonte-titulo); font-size: 1rem; margin: 0 0 6px; color: var(--azul-700); }
.mvv__bloco p { margin: 0; white-space: pre-wrap; }
.swot { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .swot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.swot__q { border: 1px solid var(--border); border-radius: var(--raio); padding: 12px 14px; min-width: 0; color: var(--text); }
.swot__q h3 { font-size: .95rem; margin: 0 0 2px; }
.swot__q small { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.swot__q p { margin: 0; white-space: pre-wrap; }
.swot__q--forcas        { background: var(--verde-bg);   border-color: var(--verde-borda); }
.swot__q--fraquezas     { background: var(--verm-100);   border-color: var(--verm-borda); }
.swot__q--oportunidades { background: var(--azul-100);   border-color: var(--azul-200); }
.swot__q--ameacas       { background: var(--amarelo-bg); border-color: var(--dourado-borda); }

/* Radar do perfil comportamental (atual x desejado). */
.radar { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 760px) { .radar { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }
.radar svg { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; }
.radar__anel { fill: none; stroke: var(--border); }
.radar__eixo { stroke: var(--border); }
.radar__rotulo { font-size: 12px; fill: var(--muted); font-family: var(--fonte); }
.radar__atual { fill: var(--azul); fill-opacity: .16; stroke: var(--azul); stroke-width: 2; }
.radar__desejado { fill: none; stroke: var(--verde-escuro); stroke-width: 2; stroke-dasharray: 5 4; }
.radar__legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.radar__cor { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 6px; background: var(--azul); }
.radar__cor--desejado { background: none; height: 0; border-top: 3px dashed var(--verde-escuro); }

/* Imprimir a cultura (e qualquer tela do painel): sai so' o conteudo. */
@media print {
  body.painel .lateral, body.painel .painel__topo, .nao-imprimir { display: none !important; }
  body.painel .painel__area { margin: 0 !important; padding: 0 !important; }
  body.painel .cartao { box-shadow: none; break-inside: avoid; }
}

/* v1.46 — erro junto do campo no questionário de avaliação */
.campo--erro { border-color: var(--erro, #B42318); }
.erro-campo { color: var(--erro-forte, #B42318); font-size: 14px; margin-top: 6px; }

/* ---------------------------------------------------------------------
   FUNÇÕES DO DEPARTAMENTO (v1.60.6) — a lista de marcar na tela do
   departamento. Colunas que se ajustam à largura; rolagem própria acima de
   ~12 linhas, para o botão Salvar não ir parar três telas abaixo.
   --------------------------------------------------------------------- */
.funcoes-dep { border: 0; margin: 0; padding: 0; min-width: 0; }
.funcoes-dep legend {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0; margin-bottom: 6px; font-weight: 700; font-size: 14px; color: var(--muted);
}
.funcoes-dep__grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); /* (v2.47.0) cabe em 320px */
  gap: 2px 16px; max-height: 420px; overflow: auto;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--raio);
  background: var(--surface);
}
.funcoes-dep__grade .escolha { min-height: 40px; }

/* ---------------------------------------------------------------------
   ADMISSÃO — FILTROS E ÚLTIMOS ENVIOS (v1.60.8). As 10 pessoas que
   enviaram arquivo por último ficam no topo da primeira página, com fundo
   de realce e um filete azul; abaixo da barra de cada uma, a data e a hora
   do último envio.
   --------------------------------------------------------------------- */
.adm-filtros { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.adm-filtros__acoes { display: flex; gap: 6px; align-items: center; }
.adm-grupo th {
  background: var(--bg); color: var(--muted); text-align: left;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 12px;
}
.adm-grupo th svg { vertical-align: -2px; margin-right: 4px; }
.adm-recente td { background: var(--realce-suave, var(--realce)); }
.adm-recente td:first-child { box-shadow: inset 3px 0 0 var(--azul); }
.adm-envio {
  display: flex; align-items: center; gap: 4px; margin-top: 6px;
  font-size: 12px; color: var(--muted); white-space: nowrap;
}
.adm-envio--recente { color: var(--azul-700, var(--azul)); font-weight: 700; }

/* ---------------------------------------------------------------------
   EXCLUIR E PEDIR DE NOVO (v1.60.9) — na ficha de admissão do DP. O botão
   abre um formulário curto com o motivo, que a pessoa lê na tela dela.
   --------------------------------------------------------------------- */
.doc-excluir { display: inline-block; }
.doc-excluir > summary { list-style: none; cursor: pointer; }
.doc-excluir > summary::-webkit-details-marker { display: none; }
.doc-excluir[open] > summary { margin-bottom: 8px; }
/* Aberto, o formulario ocupa a linha inteira do cartao: ao lado de "Abrir documento" ele espremia os dois. */
.doc-excluir[open] { flex: 1 1 100%; }
.doc-excluir__form {
  display: grid; gap: 6px; padding: 10px; min-width: 240px;
  border: 1px solid var(--verm-300, var(--border)); border-radius: var(--raio);
  background: var(--surface);
}
.doc-excluir__form label { font-size: 13px; font-weight: 700; }
.doc-excluir__form .btn { justify-self: start; }
.doc-deps__excluir { grid-column: 1 / -1; }
.doc-item__pedido { display: block; margin: 4px 0 8px; font-size: 13px; color: var(--verm-escuro, var(--muted)); }
.doc-item__aviso { margin: 4px 0 10px; font-size: 13.5px; }
.adm-hist--excluido .adm-hist__doc { text-decoration: line-through; color: var(--muted); }
.adm-hist__excluido { font-size: 12px; color: var(--verm-escuro, var(--muted)); }

/* ---------------------------------------------------------------------
   ESCOLHA COM BUSCA (v1.61.0) — select[data-busca] vira um campo onde se
   digita o nome; o <select> fica por baixo (vai no POST e recebe o aviso
   de "preencha este campo" do navegador).
   --------------------------------------------------------------------- */
.busca-sel { position: relative; min-width: 0; }
.busca-sel__nativo {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  opacity: 0; pointer-events: none;
}
.busca-sel__campo { width: 100%; }
/* duas classes (v1.62.1): input[type="text"] vence uma classe só e o padding não pegava */
.busca-sel .busca-sel__campo { padding-right: 40px; }
.busca-sel__limpar {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.busca-sel__limpar:hover { background: var(--realce); color: var(--text); }
.busca-sel__lista {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 320px; overflow: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}
.busca-sel__opcao { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1.3; }
.busca-sel__opcao:hover, .busca-sel__opcao--ativa { background: var(--realce); }
.busca-sel__opcao[aria-selected="true"] { font-weight: 700; }
.busca-sel__info { padding: 8px 12px; font-size: 12.5px; color: var(--muted); }
/* No toque, o × vira alvo de 44px encostado na borda direita do campo, e o
   texto do campo para antes dele (v1.62.1): 36x36 errava o dedo. */
@media (pointer: coarse) {
  .busca-sel .busca-sel__campo { padding-right: 48px; }
  .busca-sel__limpar { right: 0; width: var(--alvo); height: var(--alvo); }
}
/* (v1.99.0) QA L5: a opção da lista tinha 38px (o piso é 44, dedo E mouse);
   o texto fica no meio da linha. E o espaço do × só fica reservado quando o
   × aparece: com ele escondido (nada escolhido), a ajuda "Escolha a pessoa da
   casa…" perdia o fim a 320. (v1.99.0) O aviso de obrigatório agora cai no
   campo de busca, e não no <select> de baixo (escolha-busca.js). */
.busca-sel__opcao { min-height: var(--alvo); display: flex; align-items: center; }
.busca-sel:has(> .busca-sel__limpar[hidden]) > .busca-sel__campo { padding-right: 12px; }

/* ---------------------------------------------------------------------
   HISTÓRICO POR PESSOA (v1.61.0) — Registros e Saúde: cada pessoa é um
   acordeão; fechado diz quem é, quantos e o último; aberto mostra tudo.
   --------------------------------------------------------------------- */
.reg-topo__lado { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* minmax(0, 1fr) (v1.62.1): a coluna implícita crescia até o maior item, e
   no celular um "último em … · ASO de retorno ao trabalho" levava o cartão
   de todas as pessoas para além da tela, cortando o "Editar". */
.reg-grupos { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.reg-pessoa {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  scroll-margin-top: 90px;
}
.reg-pessoa[open] { box-shadow: 0 6px 20px rgba(0, 0, 0, .06); }
.reg-pessoa__resumo {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 60px;
  cursor: pointer; list-style: none; border-radius: 14px;
}
.reg-pessoa__resumo::-webkit-details-marker { display: none; }
.reg-pessoa__resumo:hover { background: var(--realce-suave, var(--realce)); }
.reg-pessoa__resumo:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.reg-pessoa__avatar {
  flex: none; width: 38px; height: 38px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--azul-100, var(--realce)); color: var(--azul-700, var(--azul));
  font-weight: 800; font-size: 13px;
}
.reg-pessoa__quem { flex: 1; min-width: 0; display: grid; gap: 1px; }
.reg-pessoa__nome { overflow-wrap: anywhere; }
.reg-pessoa__meta { font-size: 12.5px; color: var(--muted); }
.reg-pessoa__lado { display: grid; justify-items: end; gap: 3px; text-align: right; }
.reg-pessoa__ultimo { font-size: 12px; color: var(--muted); white-space: nowrap; }
.reg-pessoa__seta { flex: none; display: inline-flex; color: var(--muted); transition: transform .18s ease; }
.reg-pessoa[open] .reg-pessoa__seta { transform: rotate(180deg); }
.reg-pessoa__corpo { display: grid; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--border); }
.reg-pessoa__acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.reg-item { padding: 10px 12px; background: var(--bg); border-radius: 10px; }
.reg-item__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reg-item__data { font-weight: 700; font-size: 13px; margin-right: 2px; }
.reg-item__editar { margin-left: auto; font-size: 13px; font-weight: 600; }
.reg-item__titulo { margin: 6px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.reg-item__campo { margin-top: 6px; }
.reg-item__rotulo {
  display: block; font-size: 12px; /* (v2.47.0) T6: era 11.5px */ font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.reg-item__texto { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; }
@media (max-width: 600px) {
  .reg-pessoa__resumo { flex-wrap: wrap; }
  .reg-pessoa__lado { order: 3; width: 100%; justify-items: start; text-align: left; padding-left: 50px; }
  /* Aqui a linha de baixo tem a largura toda: o tipo longo quebra (v1.62.1). */
  .reg-pessoa__ultimo { white-space: normal; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .reg-pessoa__seta { transition: none; } }

/* Ficha do colaborador: o texto do registro abre ali mesmo (v1.61.0). */
.ficha-texto { margin-top: 6px; font-size: 13.5px; }
.ficha-texto > summary { cursor: pointer; color: var(--azul); font-weight: 600; width: max-content; }
.ficha-texto > p { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.ficha-restricao { margin: 6px 0 0; font-size: 13.5px; }
.ficha-rodape { margin: var(--sp-3) 0 0; font-size: 13.5px; }
.linha-secao__acao { flex: none; align-self: flex-start; font-size: 13px; font-weight: 600; }
/* Alvo de 44px no toque (v1.62.1): "Editar" do histórico e da ficha eram
   texto de 13px (34x20). O summary continua list-item para não perder o
   triângulo de abrir/fechar; a altura vem do padding (1.5em de linha +
   o que falta para 44px). */
@media (pointer: coarse) {
  .reg-item__editar, .linha-secao__acao {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--alvo); min-width: var(--alvo);
  }
  .ficha-texto > summary { line-height: 1.5; padding-block: calc((var(--alvo) - 1.5em) / 2); }
}


/* Foto na ficha (v1.62.0): a da conta ou a que veio do Solides. */
.ficha-titulo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ficha-retrato {
  flex: none; display: block; width: 64px; height: 64px; border-radius: 50%;
  overflow: hidden; border: 2px solid var(--avatar-borda); background: var(--bg);
}
.ficha-retrato img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 479.98px) { .ficha-retrato { width: 52px; height: 52px; } }

/* Meu Perfil Comportamental (v1.62.0): area do candidato e do colaborador. */
.meu-perfil__ordem { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.meu-perfil__ordem li { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.meu-perfil__nota { margin: 12px 0 0; }
.meu-perfil__acao { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.meu-perfil__aviso { margin: 12px 0 0; }
.meu-perfil__link { margin-top: 12px; }
.meu-perfil__barras { display: grid; gap: 8px; margin-top: 4px; }
.meu-perfil__barra { display: grid; grid-template-columns: auto 7.5rem 1fr 3rem; align-items: center; gap: 10px; }
.meu-perfil__nome { font-size: 14px; }
.meu-perfil__pct { text-align: right; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 479.98px) {
  .meu-perfil__barra { grid-template-columns: auto 1fr 3rem; }
  .meu-perfil__nome { display: none; }
}

/* Organograma por cidade (v1.62.0). */
.org-cidade-titulo { color: var(--muted); font-weight: 600; }
.org-antigos { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--sp-3); }
.org-antigos svg { flex: none; }

/* =====================================================================
   ENCERRAR / CANCELAR VAGA E STATUS FIXO NA EDIÇÃO (v1.63.0)
   parciais/vaga-fechar.php + vaga-fechar.js. Sem JS é um <details> que
   abre o formulário na própria linha de ações; com JS o MESMO formulário
   vai para um .dialogo. Os desfechos são cartões de 44px ou mais, com a
   área toda clicável, como o .escolha do resto do sistema.
   ===================================================================== */
.fechar-vaga { display: inline-block; }
.fechar-vaga > summary { list-style: none; cursor: pointer; }
.fechar-vaga > summary::-webkit-details-marker { display: none; }
/* Sem JS, aberto: o formulário desce para uma linha só dele, em caixa. */
.fechar-vaga[open] { flex: 1 1 100%; }
.fechar-vaga[open] > .fechar-vaga__form {
  margin-top: 10px; max-width: 560px;
  background: var(--flutuante); color: var(--flutuante-txt);
  border: 1px solid var(--border); border-radius: var(--raio-card);
}

/* O popup tem três cartões, um select, a observação e a caixa das
   candidaturas: não cabe nos 440px do diálogo de confirmar, e no celular
   deitado passa da altura da tela — rola por dentro. */
.dialogo--fechar { max-width: 560px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.fechar-vaga__opcao:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.fechar-vaga__form .dialogo__texto { margin-bottom: var(--sp-3); }

.fechar-vaga__numeros {
  list-style: none; margin: 0 0 var(--sp-4); padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: 13.5px; color: var(--muted);
}
.fechar-vaga__numeros li { display: inline-flex; align-items: center; gap: 6px; }
.fechar-vaga__numeros svg { flex: none; }
.fechar-vaga__numeros strong { color: var(--text); }

.fechar-vaga__opcoes { border: 0; margin: 0 0 var(--sp-4); padding: 0; min-width: 0; display: grid; gap: 8px; }
.fechar-vaga__opcoes legend { padding: 0; margin-bottom: 6px; font-weight: 700; font-size: 14px; color: var(--muted); }
.fechar-vaga__opcao, .fechar-vaga__cand { align-items: flex-start; margin: 0; padding: 12px 14px; }
.fechar-vaga__opcao input, .fechar-vaga__cand input { margin: 1px 0 0; }
.fechar-vaga__rotulo { display: block; color: var(--text); }
.fechar-vaga__sub { font-weight: 400; font-size: 13.5px; color: var(--muted); }
.fechar-vaga__explica { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.fechar-vaga__opcao:has(input:checked) { border-color: var(--azul); background: var(--azul-100); }
/* Cancelar é o único desfecho vermelho — o mesmo aviso do botão. */
.fechar-vaga__opcao--cancelar input { accent-color: var(--verm-escuro); }
.fechar-vaga__opcao--cancelar:has(input:checked) { border-color: var(--verm-300); background: var(--verm-100); }
.fechar-vaga__cand { margin-top: var(--sp-2); }
.fechar-vaga__cand strong { display: block; font-size: 14px; color: var(--text); }
.fechar-vaga__form select, .fechar-vaga__form textarea { width: 100%; }
.fechar-vaga__form textarea { min-height: 80px; }
.fechar-vaga__opcional { font-weight: 400; color: var(--muted-soft); }

@media (max-width: 480px) {
  /* 16px de respiro no celular: o padding cheio do diálogo come os
     cartões dos desfechos. */
  .dialogo--fechar .dialogo__corpo { padding: var(--sp-4); }
  .dialogo--fechar .dialogo__acoes { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
}

/* Ficha da vaga fechada: desfecho, motivo, observação, quem e quando. */
.vaga-fechamento { margin: 10px 0 0; }
.vaga-fechamento__obs { margin-top: 4px; white-space: pre-line; }
.vaga-fechamento__quem { margin-top: 4px; font-size: 13px; }

/* Formulário da vaga: a situação que salvar não muda é texto, não select. */
.campo__rotulo { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--muted); }
.status-fixo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: var(--alvo); }
.status-fixo__nota { font-size: 13px; color: var(--muted-soft); }

/* =====================================================================
   ANEXOS DOS MÓDULOS — TIRAR FOTO OU ANEXAR ARQUIVO (v1.65.0)
   Registro de saúde (o módulo com 'anexo' no Modulo.php): o formulário
   ganha "Tirar foto" e "Anexar arquivo" (painel/modulo.php + anexo-foto.js),
   e a lista por pessoa, a tabela e a ficha do colaborador mostram os anexos
   de cada registro. Mesmo desenho do envio da Admissão (.doc-envio), com
   nomes próprios: a Admissão não pode mudar por causa de um ajuste daqui.
   ===================================================================== */
.anexo-envio { display: grid; gap: 10px; min-width: 0; }
.anexo-envio > .campo__rotulo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
.anexo-envio > .dica { margin-top: 0; }
.anexo-envio__mais { margin: 0; }
.anexo-envio__opcoes { display: grid; gap: 10px; min-width: 0; }
/* Duas classes de propósito: `.campo label` (classe + elemento) vence uma
   classe só, e o rótulo-botão sairia com a cor apagada do rótulo de campo. */
.anexo-envio .anexo-envio__opcao { display: grid; gap: 4px; min-width: 0; margin: 0; }
.anexo-envio__rotulo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--muted);
}
.anexo-envio__rotulo svg { flex: none; }
.anexo-envio__campo { font-size: 13px; max-width: 100%; min-width: 0; }

/* Com o script: os campos somem por trás de dois botões grandes (52px, o
   dedo acerta sem mirar). Base de 200px e quebra: lado a lado no
   computador, um por linha no celular — nunca "Anexar / arquivo" espremido. */
.anexo-envio--js .anexo-envio__opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.anexo-envio.anexo-envio--js .anexo-envio__opcao {
  display: inline-flex; flex: 1 1 200px; min-height: 52px;
  position: relative; cursor: pointer; white-space: nowrap;
  color: var(--primaria-txt); font-size: 15px;
}
/* O mesmo par do .btn--linha da tema.css (azul-600, e azul-700 no hover). */
.anexo-envio.anexo-envio--js .anexo-envio__opcao.btn--linha { color: var(--azul-600); }
.anexo-envio.anexo-envio--js .anexo-envio__opcao.btn--linha:hover { color: var(--azul-700); }
.anexo-envio--js .anexo-envio__rotulo { color: inherit; font-size: inherit; }
/* min-height 0: o input[type="file"] da base tem 44px de altura mínima, e
   ela venceria o height de 1px. */
.anexo-envio--js .anexo-envio__campo {
  position: absolute; width: 1px; height: 1px; min-height: 0;
  padding: 0; border: 0; opacity: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; pointer-events: none;
}
.anexo-envio--js .anexo-envio__opcao:focus-within { outline: 2px solid var(--anel); outline-offset: 2px; }

/* A PRÉVIA, antes de salvar: a foto na largura do cartão (existe para
   responder "dá para LER o atestado?") ou o ícone do PDF; nome, tamanho e
   "Tirar" embaixo. minmax(0, 1fr): nome sem espaço não estica o cartão. */
.anexo-envio__lista {
  list-style: none; margin: 0; padding: 0; min-width: 0;
  display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr);
}
.anexo-envio__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 8px 10px; min-width: 0; padding: 8px;
  border: 1px dashed var(--border); border-radius: var(--raio); background: var(--bg);
}
.anexo-envio__miniatura {
  grid-column: 1 / -1; display: block;
  width: 100%; height: auto; max-height: 240px; object-fit: contain;
  border-radius: 6px; background: var(--surface);
}
/* Com a foto em cima, o nome ocupa o lugar do ícone. */
.anexo-envio__miniatura ~ .anexo-envio__nome { grid-column: 1 / 3; }
.anexo-envio__icone {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--azul);
}
.anexo-envio__nome { min-width: 0; font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.anexo-envio__nome small { display: block; font-size: 12.5px; color: var(--muted); }
.anexo-envio__tirar { justify-self: end; }
.anexo-envio__item--limpar { grid-template-columns: minmax(0, 1fr); padding: 0; border: 0; background: none; }
.anexo-envio__item--limpar .anexo-envio__tirar { justify-self: start; }
.anexo-envio__aviso {
  margin: 0; padding: 8px 12px; border-radius: var(--raio);
  background: var(--verm-100); color: var(--verm-escuro);
  font-size: 13.5px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere;
}

/* OS ANEXOS GUARDADOS: um link por arquivo, com 44px de alvo, que abre em
   nova aba pela rota do módulo (?anexo=ID). Nome quebra em qualquer ponto
   ("IMG_20260925_101112.jpg" não tem espaço). */
.anexo-lista {
  list-style: none; margin: 4px 0 0; padding: 0; min-width: 0;
  display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr);
}
/* Seletor longo de propósito: no toque, `.cartao ul li > a:not(.btn)` (lá em
   cima) vira todo link de lista em inline-block de 26px — o anexo encolhia
   para 40px de altura e perdia a borda lateral. Este vence por especificidade. */
.anexo-lista > li > a.anexo-lista__link:not(.btn) {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: var(--alvo);
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--raio);
  background: var(--surface); color: var(--realce-txt); text-decoration: none;
  font-size: 13.5px; line-height: 1.3;
}
.anexo-lista__link:hover { border-color: var(--azul-200); background: var(--realce); }
.anexo-lista__link:focus-visible { outline: 2px solid var(--anel); outline-offset: 2px; }
.anexo-lista__link svg { flex: none; color: var(--azul); }
.anexo-lista__nome { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.anexo-lista__meta { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
/* No celular estreito o tamanho e a data descem para a linha de baixo, em
   vez de espremer o nome até uma letra por linha. */
@media (max-width: 479.98px) {
  .anexo-lista__link { flex-wrap: wrap; row-gap: 2px; }
  .anexo-lista__nome { flex-basis: calc(100% - 24px); }
  .anexo-lista__meta { flex-basis: 100%; padding-left: 24px; white-space: normal; }
}
/* Na tabela que vira cartão, a lista ocupa a linha de baixo do rótulo. */
.tabela td > .anexo-lista { flex: 1 1 220px; margin: 0; }

/* A contagem na cabeça do registro e o bloco da ficha do colaborador. */
.anexo-tag { gap: 4px; }
.anexo-tag svg { flex: none; }
.ficha-anexos { margin-top: 8px; min-width: 0; }
.ficha-anexos__rotulo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.ficha-anexos__rotulo svg { flex: none; }

/* =====================================================================
   FORMULÁRIOS PERSONALIZADOS (v1.66.0) — lista, construtor, resultados,
   resposta individual e a página pública (/questionario/{token}).

   Só acréscimos, todos com o prefixo .questionario-. Os blocos de resposta
   reaproveitam as peças da pesquisa de clima (.pesquisa-item,
   .pesquisa-escala, .pesquisa-nps, .escolha): quem já respondeu uma
   pesquisa no portal reconhece a tela. Nada aqui passa de 320px: toda
   fileira de botões quebra linha, e os campos encolhem (min-width: 0).
   ===================================================================== */

/* --- Abas -------------------------------------------------------------
   A aba que ainda não abre (Envios, que chega na fase 2; Resultados sem
   resposta) tem o formato das outras, mas não é link — e diz por quê numa
   etiqueta, em vez de um link que leva a uma tela vazia. */
.questionario-abas { margin-top: var(--sp-3); }
.questionario-abas__off {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--alvo); max-width: 100%; padding: 8px 14px;
  border-radius: 999px; color: var(--muted-soft);
  font-weight: 700; font-size: 14px; line-height: 1.25; cursor: default;
}
.questionario-abas__off .tag { font-size: 12px; } /* (v1.78.1) era 11,5px */
@media (max-width: 767px) {
  .questionario-abas__off { flex: 1 1 auto; justify-content: center; }
}

/* --- Lista ------------------------------------------------------------- */
.questionario-novo,
.questionario-arquivados,
.questionario-dados,
.questionario-inativas { margin-bottom: var(--sp-4); }
.questionario-emuso__texto { color: var(--muted); margin: 0 0 var(--sp-3); max-width: 72ch; }
.questionario-emuso__linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.questionario-emuso__linha .campo { flex: 1 1 280px; min-width: 0; margin: 0; }
.questionario-emuso__linha select { width: 100%; max-width: 100%; }
.questionario-marcas { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.questionario-marcas .tag { display: inline-flex; align-items: center; gap: 4px; }
.questionario-marcas .tag svg { flex: none; }
.questionario-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.questionario-rodape { margin: var(--sp-3) 0 0; }
.questionario-comeco { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.questionario-comeco > legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; }
/* A caixa de escolha dentro de um .campo: `.campo label` (bloco, 700) venceria
   a .escolha por especificidade — a mesma correção do `.escolhas .escolha`. */
.questionario-comeco label.escolha,
.questionario-editor .campo label.escolha {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-weight: 500; font-size: 14.5px; line-height: 1.35; color: var(--text);
}
.questionario-comeco label.escolha { align-items: flex-start; }
.questionario-comeco .escolha input { margin-top: 2px; }
.questionario-comeco .escolha span { min-width: 0; overflow-wrap: anywhere; }

/* --- Construtor: as perguntas em cartões numerados ----------------------
   Número em pastilha à esquerda; as ações (subir, descer, editar,
   inativar) à direita no computador e embaixo no celular. Subir e descer
   são quadrados de 44px: é o alvo de toque mínimo, e a seta sozinha já diz
   o que faz (o rótulo vai no aria-label). */
.questionario-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.questionario-pergunta {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 10px var(--sp-4); min-width: 0;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--raio);
  background: var(--surface);
  scroll-margin-top: 90px;
}
/* Voltar de um POST com #pergunta-ID marca o cartão que acabou de mudar. */
.questionario-pergunta:target { border-color: var(--azul-300); box-shadow: 0 0 0 3px var(--azul-100); }
.questionario-pergunta--secao { background: var(--bg); }
.questionario-pergunta__corpo { display: flex; gap: 12px; flex: 1 1 280px; min-width: 0; }
.questionario-pergunta__num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--azul-100); color: var(--azul-600);
  font-family: var(--fonte-titulo); font-size: 15px;
}
.questionario-pergunta--secao .questionario-pergunta__num {
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.questionario-pergunta__info { flex: 1 1 auto; min-width: 0; }
.questionario-pergunta__texto { margin: 4px 0 0; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.questionario-pergunta--secao .questionario-pergunta__texto {
  font-family: var(--fonte-titulo); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--azul-600);
}
.questionario-pergunta__ajuda,
.questionario-pergunta__opcoes { margin: 6px 0 0; overflow-wrap: anywhere; }
.questionario-pergunta__acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.questionario-pergunta__acoes .btn--icone { min-height: var(--alvo); width: var(--alvo); }
.questionario-pergunta__acoes .btn:disabled { opacity: .4; cursor: not-allowed; }
.questionario-pergunta__editando { width: 100%; font-size: 1rem; margin: 0; }
.questionario-pergunta > .questionario-editor { width: 100%; }
.questionario-nova { margin: var(--sp-4) 0 0; box-shadow: none; }

/* O editor de uma pergunta (o mesmo para adicionar e para editar). */
.questionario-editor textarea { resize: vertical; }
.questionario-editor__rotulo { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.questionario-editor__fixo {
  margin: 0; padding: 10px 12px; border-radius: var(--raio);
  background: var(--bg); font-size: 14px; line-height: 1.45;
}
.questionario-editor__opcional { font-weight: 400; color: var(--muted-soft); }
.questionario-editor__info { margin: 0; }

/* Travado: a borda de cima em laranja avisa antes da leitura do texto. */
.questionario-travado { border-top: 3px solid var(--laranja-escuro); }
.questionario-travado .cartao__titulo { display: inline-flex; align-items: center; gap: 8px; }
.questionario-travado .cartao__titulo svg { flex: none; }
.questionario-nova-versao { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: var(--sp-3); }
.questionario-nova-versao .escolha { flex: 1 1 260px; min-width: 0; }

/* --- Quem responde: a peça questionario-perguntas ------------------------ */
.questionario-item__num { font-family: var(--fonte-titulo); color: var(--azul-600); margin-right: 2px; }
.questionario-item__ajuda { margin: 0 0 var(--sp-3); }
.questionario-item .erro-campo { margin: 0 0 var(--sp-3); font-weight: 600; }
/* Pergunta que voltou com erro: borda e halo vermelhos, e a frase em cima. */
.questionario-item.campo--erro { border: 1px solid var(--verm-300); box-shadow: 0 0 0 3px var(--verm-100); }
/* Sim e Não lado a lado, cada um com metade da largura — dois alvos grandes.
   (v1.84.0) Agora um abaixo do outro: a vista põe `escolhas--coluna` (grade de
   uma coluna), e este `flex` deixou de valer; fica para não sumir seletor. */
.questionario-simnao .escolha { flex: 1 1 140px; }
.questionario-data { max-width: 220px; }
/* Título de seção entre as perguntas: o mesmo desenho da dimensão da
   pesquisa de clima. */
.questionario-secao { margin: var(--sp-6) 0 var(--sp-3); }
.questionario-secao:first-child { margin-top: var(--sp-2); }
.questionario-secao__titulo {
  margin: 0; font-family: var(--fonte-titulo); font-size: 15px; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .06em; color: var(--azul-600);
}
.questionario-secao__ajuda { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

/* --- A página pública ---------------------------------------------------- */
.questionario-ola { margin: 0 0 var(--sp-3); font-size: 16px; }
.questionario-faixa { display: flex; gap: 12px; align-items: flex-start; }
.questionario-faixa > svg { flex: none; margin-top: 2px; }
.questionario-faixa__mais { margin: 6px 0 0; font-weight: 400; }
.questionario-erros { margin: 6px 0; padding-left: 20px; }
.questionario-erros a { color: inherit; text-decoration: underline; }
.questionario-envio__dica { margin-top: 0; color: var(--muted); }

/* A prévia do RH: a página pública numa moldura tracejada, para não se
   confundir com a tela do painel em volta. */
.questionario-previa {
  max-width: 820px; padding: var(--sp-4) 16px var(--sp-5);
  border: 1px dashed var(--azul-300); border-radius: var(--raio-card);
  background: var(--bg);
}
.questionario-previa .miolo { max-width: none; padding: 0; }
.questionario-previa .pagina-topo { padding: 0 0 var(--sp-3); }
.questionario-previa .pagina-corpo { padding-bottom: 0; }

/* --- Resultados ------------------------------------------------------------ */
.questionario-filtros .campo { margin: 0; flex: 1 1 150px; min-width: 0; }
.questionario-filtros .campo select,
.questionario-filtros .campo input { width: 100%; max-width: 100%; }
.questionario-filtros__acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.questionario-confidencial { margin-bottom: var(--sp-4); }
.questionario-resultado-secao {
  margin: var(--sp-6) 0 var(--sp-3); font-family: var(--fonte-titulo); font-size: 15px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--azul-600);
}
.questionario-resultado__titulo { font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.questionario-resultado__rodape { margin: var(--sp-3) 0 0; color: var(--muted); font-size: 14px; }
.questionario-mais { margin-top: var(--sp-3); }
.questionario-mais > summary {
  display: flex; align-items: center; min-height: var(--alvo);
  cursor: pointer; font-weight: 700; color: var(--azul-700);
}
.questionario-textos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.questionario-texto .resposta-aberta { margin-top: 0; }
.questionario-texto__meta { margin-top: 4px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }

/* --- Resposta individual ----------------------------------------------------- */
.questionario-resumo { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: var(--sp-3) 0 0; }
.questionario-resumo > div { min-width: 0; }
.questionario-resumo dt {
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.questionario-resumo dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.questionario-resposta { max-width: 820px; }

/* =====================================================================
   (v1.70.1) frente css — ajustes do QA de layout. Só acréscimos: nenhuma
   regra de cima foi apagada; as que mudam de efeito são vencidas aqui por
   um seletor mais específico ou por virem depois.
   ===================================================================== */

/* (v1.70.1) Filtro com 6 campos ou mais (Envios da pesquisa de desligamento:
   6; Métricas de Desligamento: 7). A grade de 5 trilhas do desktop foi feita
   para 4 campos e uma ação: a trilha "auto" ficava com o select mais largo
   (543px) e as outras com 61px — "Saída até" em duas linhas, a data mostrando
   só "dd/" e "Departament|o" partido. Com 6+ campos as trilhas ficam iguais
   (~172px) e o que não cabe desce numa segunda fileira alinhada. Os filtros
   de até 5 campos (e o .filtros--acomp do tema.css) não mudam. */
@media (min-width: 1024px) {
  .filtros:not(.filtros--acomp):has(> .campo ~ .campo ~ .campo ~ .campo ~ .campo ~ .campo) {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
}

/* (v1.70.1) Barra de gráfico no celular: o valor ("60 (45%)") não encolhe nem
   quebra — em 320px ele ficava em duas linhas com 29px de largura —, e o
   rótulo passa de uma linha com reticências para até duas: 14 de 49 motivos
   eram cortados em Métricas de Desligamento, e departamentos que só diferem
   pela cidade ficavam iguais na tela. */
.graf-barra__topo strong { flex: none; white-space: nowrap; }
@media (max-width: 767.98px) {
  .graf-barra__rotulo {
    white-space: normal;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2;
  }
}

/* (v1.70.1) O alvo de toque de "link de item" (bloco ALVO DE TOQUE EM LINK
   DE ITEM, acima) alcançava dois casos que não são link de item:
   - a pílula da lista .faltando (Minha área): virava inline-block com
     padding 9px 0 e o texto encostava na borda arredondada; aqui ela volta
     ao desenho dela (a própria pílula já tem 44px);
   - o link dentro da frase do .aviso ("Minha equipe", /colaborador): virava
     bloco de 37px no meio do parágrafo; aqui volta a ser texto corrido.
   Os seletores de cima continuam valendo para todo o resto. */
@media (hover: none), (max-width: 720px) {
  .cartao ul.faltando li > a:not(.btn) {
    display: inline-flex; padding: 8px 14px; min-height: 44px;
  }
  .cartao > .aviso > a[class=""],
  .cartao > .aviso > a:not([class]) { display: inline; padding: 0; }
}
/* (v1.70.1) No aviso o link tem a mesma cor do texto (dourado no
   .aviso--atencao): sem sublinhado ele não parecia link. */
.aviso a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }

/* (v1.70.1) Admissão, grupo "Enviaram arquivos por último": no cartão do
   celular o realce era pintado em cada td (padding lateral 0), e o nome
   encostava no filete azul enquanto cidade, datas e o botão Abrir terminavam
   na borda do tingido. Abaixo de 1024px quem pinta é a LINHA (o cartão
   inteiro, com o respiro de 14px); no desktop continua como estava. */
@media (max-width: 1023.98px) {
  .tabela tbody tr.adm-recente {
    background: var(--realce-suave, var(--realce));
    box-shadow: inset 3px 0 0 var(--azul), var(--sombra-cartao, var(--sombra));
  }
  .adm-recente td,
  .adm-recente td:first-child { background: none; box-shadow: none; }
}

/* (v1.70.1) Linha "fora de uso" (Motivos de demissão, admissão, benefícios,
   conteúdo, lojas, cultura, locais...): a opacidade de 60% na LINHA inteira
   apagava também o que continua ativo — o contador que abre a lista, Excel,
   PDF, Editar — com contraste de 2,4 a 3,2:1. Só o nome (já riscado) fica
   apagado, em --muted (6,9:1); etiquetas e botões voltam à cor cheia. Vale
   para a .linha-secao; as linhas de tabela com a mesma classe (Competências,
   Winthor) não têm o nome em <strong> e continuam como estavam. */
.linha-secao.linha-secao--off { opacity: 1; }
.linha-secao.linha-secao--off .linha-secao__info > strong { color: var(--muted); }
/* (v1.70.1) Plano de carreira: o nome é link (a.item-link), não <strong>. */
.linha-secao.linha-secao--off .linha-secao__info > a.item-link { color: var(--muted); }
/* (v1.78.1) A mesma correção nas linhas de TABELA (Competências e Winthor):
   a linha inteira a 60% deixava "Ativar" com 2,8:1, "Editar" com ~3,2:1 e a
   etiqueta "Desativada" com 2,5:1. Só o nome (td.principal) fica em --muted;
   botões e etiquetas voltam à cor cheia, e a etiqueta de situação (ou o
   "saiu do ERP") continua dizendo o estado. */
tr.linha-secao--off { opacity: 1; }
tr.linha-secao--off td.principal { color: var(--muted); }
/* (v1.78.1) Na tabela "Funções do ERP" (winthor.php) não há palavra que diga
   que a função saiu do ERP: a etiqueta de "Vira o cargo" é o destino, não o
   estado. Sem os 60% da linha, o aviso ficava só na cor. O nome vai riscado,
   como o <strong> da .linha-secao--off. Só nesta coluna: nos setores o
   td.principal tem a .dica "saiu do ERP", que o risco atravessaria.
   O "ç" e o "ã" vão escapados (\e7 \e3) para o seletor não depender do
   charset com que o arquivo é servido. */
tr.linha-secao--off td.principal[data-rotulo="Fun\0000e7\0000e3o no ERP"] { text-decoration: line-through; }
/* (v1.78.1) A célula da função agora também traz a .dica "saiu do ERP em
   {data}" (winthor.php), e o nome vem num <span>. O risco passa para o
   <span>, para não atravessar a dica, como nos setores. Navegador sem :has
   continua com a regra de cima (a célula toda riscada, ainda legível). */
tr.linha-secao--off td.principal[data-rotulo="Fun\0000e7\0000e3o no ERP"]:has(> .dica) { text-decoration: none; }
tr.linha-secao--off td.principal[data-rotulo="Fun\0000e7\0000e3o no ERP"]:has(> .dica) > span:first-child { text-decoration: line-through; }

/* (v1.70.1) Régua de 0 a 10 (eNPS, prévia e /questionario/{token}): com
   flex-wrap, os itens da última fileira esticavam para ocupar a sobra — em
   320px o 9 e o 10 tinham 101px e o resto 65px. Numa escala de avaliação peso
   visual diferente induz a resposta. Em grade, todas as trilhas têm a mesma
   largura em todas as fileiras; auto-fit (e não auto-fill) para a régua
   continuar ocupando a linha inteira no desktop, alinhada com a legenda
   "0 — de jeito nenhum / 10 — com certeza". O flex do item fica sem efeito. */
.pesquisa-nps { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 6px; }

/* =====================================================================
   (v1.82.0) A FICHA DO SÓLIDES NA FICHA DO COLABORADOR
   (painel/colaborador-ficha.php e app/nucleo/FichaDp.php; migração 096)
   O desenho funcional da ficha de lá — rótulo pequeno em CAIXA ALTA e o
   valor embaixo, quatro colunas no computador, duas no celular e uma nos
   320px —, com as cores e as fontes da casa. Classes novas: nada daqui mexe
   no que a ficha já tinha.
   ===================================================================== */

/* A grade de dados dos cartões (Informações, Endereço, Dados contratuais,
   Documentos, Contatos, Dados adicionais). Item de grade com min-width: 0,
   senão um e-mail comprido estica a coluna. */
.ficha-dados {
  margin: 0; display: grid; gap: 14px 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ficha-dados > div { min-width: 0; }
.ficha-dados dt {
  margin: 0 0 3px; font-size: 12px; font-weight: 700; line-height: 1.3;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.ficha-dados dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.ficha-dados dd a { font-weight: 700; }
/* No toque, o link dentro do dado (Superior direto, Candidato) com 44px. */
@media (pointer: coarse) { .ficha-dados dd a { display: inline-flex; align-items: center; min-height: var(--alvo); } }
/* O traço do campo em branco: mais apagado que o dado, sem sumir (5,1:1). */
.ficha-dados__vazio { color: var(--muted-soft); font-weight: 400; }
@media (max-width: 1023.98px) { .ficha-dados { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px)  { .ficha-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 379.98px)  { .ficha-dados { grid-template-columns: minmax(0, 1fr); } }
/* Ao lado da pessoa, no cartão Informações, a grade tem menos largura: três. */
.ficha-dados.ficha-dados--info { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .ficha-dados.ficha-dados--info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 379.98px) { .ficha-dados.ficha-dados--info { grid-template-columns: minmax(0, 1fr); } }
/* Dentro de um "abrir" pequeno (dados médicos da saúde): duas colunas. */
.ficha-dados.ficha-dados--compacta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-top: 8px; }
@media (max-width: 379.98px) { .ficha-dados.ficha-dados--compacta { grid-template-columns: minmax(0, 1fr); } }

/* "Informações do colaborador": a pessoa à esquerda (foto, nome, situação,
   cargo, e-mail e celular) e os dados pessoais ao lado; empilha abaixo de
   900px. */
.ficha-info__grade { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .ficha-info__grade { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }
.ficha-info__pessoa { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.ficha-info__foto {
  flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--avatar-borda); background: var(--avatar-bg);
}
.ficha-info__foto--vazia { display: inline-flex; align-items: center; justify-content: center; color: var(--avatar-txt); }
.ficha-info__id { min-width: 0; }
.ficha-info__nome {
  margin: 0 0 4px; font-family: var(--fonte-titulo); font-size: 20px; line-height: 1.25;
  color: var(--tinta); overflow-wrap: anywhere;
}
.ficha-info__nome .tag { vertical-align: middle; font-family: var(--fonte); letter-spacing: 0; }
.ficha-info__cargo {
  margin: 0 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere;
}
.ficha-info__linha {
  margin: 2px 0 0; display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere;
}
.ficha-info__linha > svg { flex: none; }
.ficha-info__linha > span { min-width: 0; }
@media (max-width: 379.98px) { .ficha-info__foto { width: 56px; height: 56px; } }

/* O aviso do que é só do RH e da diretoria: cadeado + frase, sem cor de alerta
   (não é problema, é regra). */
.ficha-restrito {
  display: flex; align-items: flex-start; gap: 8px; margin: var(--sp-4) 0 0;
  padding: 10px 12px; border-radius: 12px; background: var(--bg);
  font-size: 13.5px; color: var(--muted);
}
.ficha-restrito > svg { flex: none; margin-top: 2px; }

/* O "Editar" no pé de cada cartão e os links de rodapé novos: alvo de 44px. */
.ficha-sec__rodape { margin: var(--sp-4) 0 0; }
.ficha-rodape--alvo > a { display: inline-flex; align-items: center; min-height: var(--alvo); font-weight: 600; }
/* Etiquetas e botão do topo de cartão lado a lado, quebrando no celular. */
.ficha-cartao__etiquetas { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Os blocos da ficha completa DENTRO do Cadastro (fechados de início). */
.ficha-editar { margin: 0 0 var(--sp-3); }
.ficha-editar:last-child { margin-bottom: 0; }
.ficha-editar[open] > .acordeao__cab { background: var(--linha-hover); }
.ficha-editar > .acordeao__corpo .form-grade { margin: 0; }

/* Registros: as abas Todos / Positivo / Negativo / Neutro. */
.ficha-reg-abas { margin: 0 0 var(--sp-4); }

/* Histórico do colaborador: valores longos (endereço, texto) quebram na
   célula; a faixa "1–10 de 37" fica embaixo da paginação. */
.ficha-hist__valor { overflow-wrap: anywhere; white-space: pre-line; }
.ficha-hist__faixa { margin: var(--sp-3) 0 0; max-width: none; text-align: center; }

/* Os critérios de uma avaliação do Sólides, dentro do "abrir". */
.ficha-criterios { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ficha-criterios li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ficha-criterios li > span:first-child { flex: 1 1 180px; min-width: 0; }

/* Perfil Comportamental do Sólides. */
.perfil-sol__cab { margin-bottom: var(--sp-4); }
.perfil-sol__validade { margin: 0 0 var(--sp-4); }
.perfil-sol__tabela { margin-bottom: var(--sp-4); }
.perfil-sol__letra {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px;
  background: var(--realce-suave); color: var(--azul-700); font-size: 12px; font-weight: 800;
}
/* Título de gráfico em caixa alta, centrado, como no relatório de lá. */
.perfil-sol__titulo {
  margin: var(--sp-5) 0 var(--sp-2); font-size: 13px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta); text-align: center;
}
.perfil-sol__graficos { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.perfil-sol__grafico { margin: 0; min-width: 0; }
.perfil-sol__testes { margin: 0; padding-left: 20px; font-size: 14px; }
.perfil-sol__testes li + li { margin-top: 4px; }

/* --- Grafico::linhas() (v1.82.0): várias séries, sem distorção ---
   O mesmo desenho do .graf-linha: o SVG estica e leva só grade e linhas
   (traço de espessura fixa); eixo, categorias e pontos são HTML em %. Cada
   série tem a sua cor, o seu traço e a sua forma de ponto. */
.graf-linhas { min-width: 0; }
.graf-linhas__quadro { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 6px; margin-top: 8px; }
.graf-linhas__eixos { position: relative; height: 180px; min-width: 24px; }
.graf-linhas__eixo {
  position: absolute; right: 0; transform: translateY(-50%);
  font-size: 12px; line-height: 1; color: var(--muted-soft); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.graf-linhas__plot { position: relative; height: 180px; min-width: 0; }
.graf-linhas__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.graf-linhas__grade { stroke: var(--fio); }
.graf-linhas__zero { stroke: var(--muted-soft); }
.graf-linhas__pontos { position: absolute; inset: 0; pointer-events: none; }
.graf-linhas__ponto {
  position: absolute; box-sizing: border-box; width: 10px; height: 10px;
  border: 2px solid var(--graf-cor, var(--azul)); border-radius: 50%; background: var(--surface);
  transform: translate(-50%, -50%); pointer-events: auto;
}
.graf-linhas__ponto--quadrado, .graf-linhas__ponto--quadrado-cheio { border-radius: 2px; }
.graf-linhas__ponto--losango, .graf-linhas__ponto--losango-cheio { border-radius: 1px; transform: translate(-50%, -50%) rotate(45deg); }
.graf-linhas__ponto--circulo-cheio, .graf-linhas__ponto--quadrado-cheio, .graf-linhas__ponto--losango-cheio { background: var(--graf-cor, var(--azul)); }
/* O ponto da legenda fica no fluxo, ao lado do traço. */
.graf-linhas__ponto--legenda { position: static; transform: none; flex: none; }
.graf-linhas__ponto--legenda.graf-linhas__ponto--losango,
.graf-linhas__ponto--legenda.graf-linhas__ponto--losango-cheio { transform: rotate(45deg); }
.graf-linhas__cats { position: relative; min-height: 32px; min-width: 0; }
/* Uma linha só (nowrap): posicionado perto da borda direita, o rótulo teria só
   a sobra até a borda para caber e quebraria letra a letra ("An/a"). As
   categorias do Sólides são curtas (Exe, Dom, a data do teste), e os 10% de
   respiro de cada ponta (Grafico::linhas) seguram a data no quadro. */
.graf-linhas__cat {
  position: absolute; top: 0; transform: translateX(-50%); width: max-content;
  font-size: 12px; line-height: 1.25; color: var(--muted); text-align: center; white-space: nowrap;
}
.graf-legenda--tracos { margin-top: 10px; }
.graf-legenda--tracos .graf-legenda__item { gap: 6px; }
.graf-legenda__traco { flex: none; }
@media (max-width: 560px) { .graf-linhas__eixos, .graf-linhas__plot { height: 160px; } }

/* "Ver os números": a tabela do gráfico, que rola de lado dentro do quadro. */
.graf-numeros { margin-top: 8px; font-size: 13px; }
.graf-numeros > summary {
  cursor: pointer; color: var(--azul); font-weight: 600; width: max-content; max-width: 100%;
  line-height: 1.5; padding-block: calc((var(--alvo) - 1.5em) / 2);
}
.graf-numeros__caixa { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.graf-numeros__tabela { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.graf-numeros__tabela th, .graf-numeros__tabela td {
  padding: 6px 10px; border-bottom: 1px solid var(--linha); text-align: right; white-space: nowrap;
}
.graf-numeros__tabela thead th { font-size: 12px; font-weight: 700; color: var(--muted); }
.graf-numeros__tabela th[scope="row"] { text-align: left; font-weight: 600; color: var(--text); white-space: normal; min-width: 140px; }

/* --- Grafico::radar() (v1.82.0) ---
   Quadrado que não deforma; os eixos levam um NÚMERO (a lista embaixo dá o
   nome e o valor), com o corpo mínimo de 12px em qualquer largura. */
.graf-radar { min-width: 0; }
.graf-radar__quadro { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1 / 1; margin: 8px auto 0; }
.graf-radar__quadro > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.graf-radar__anel { fill: none; stroke: var(--border); stroke-width: .3; }
.graf-radar__raio { stroke: var(--border); stroke-width: .25; }
.graf-radar__rotulos { position: absolute; inset: 0; pointer-events: none; }
.graf-radar__eixo, .graf-radar__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 5px; border-radius: var(--raio-full, 999px);
  background: var(--realce-suave); color: var(--azul-700);
  font-size: 12px; font-weight: 800; line-height: 1;
}
.graf-radar__eixo { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; }
/* O número da escala passa por cima do polígono: um halo da cor do cartão
   mantém o contraste do texto sem apagar o desenho. */
.graf-radar__escala {
  position: absolute; left: 50%; transform: translate(4px, -50%);
  font-size: 12px; line-height: 1; color: var(--muted-soft); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 2px var(--surface), 0 0 2px var(--surface), 0 0 3px var(--surface);
}
.graf-radar__lista {
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  display: grid; gap: 6px 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.graf-radar__item { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; }
.graf-radar__num { flex: none; }
.graf-radar__nome { flex: 1 1 auto; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.graf-radar__valor { flex: none; font-variant-numeric: tabular-nums; }

/* =====================================================================
   (v1.83.0) ENDOMARKETING — calendário, lista do ano e a ação
   (painel/endomarketing-*.php, app/nucleo/Endomarketing.php; migração 099)

   A COR DIZ A SITUAÇÃO E A FAIXA DIZ O TIPO, e as duas vêm escritas:
     situação (fundo)  planejada = branco com contorno tracejado (ainda é
                       ideia); confirmada = --realce; realizada = verde;
                       cancelada = cinza com o nome riscado.
     tipo (faixa)      interna = --azul; externa = --laranja-escuro; ambas =
                       as duas, metade de cada.
   A faixa é um degradê de 4px no fundo (background-image), para "ambas"
   poder ter duas cores sem outro elemento. Nenhum tom novo: só tokens.
   Tudo que clica mede 44px. Abaixo de 720px a grade do mês some e o mês
   vira lista por dia (.endo-agenda).
   ===================================================================== */

/* --- O tipo: a faixa (e o quadradinho da legenda e da lista) --- */
.endo-tipo-faixa--interna, .endo-tipo--interna { --endo-faixa: linear-gradient(var(--azul), var(--azul)); }
.endo-tipo-faixa--externa, .endo-tipo--externa { --endo-faixa: linear-gradient(var(--laranja-escuro), var(--laranja-escuro)); }
.endo-tipo-faixa--ambas,   .endo-tipo--ambas   { --endo-faixa: linear-gradient(to bottom, var(--azul) 0 50%, var(--laranja-escuro) 50% 100%); }

.endo-chip, .endo-agenda__item, .endo-faixa, .endo-form .endo-escolha {
  background-image: var(--endo-faixa, none);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 4px 100%;
}
.endo-tipo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap;
}
.endo-tipo::before {
  content: ''; flex: none; width: 10px; height: 10px; border-radius: 3px;
  background-image: var(--endo-faixa, none); background-size: 100% 100%;
}

/* --- A etiqueta de uma ação no dia (44px: duas linhas) ---
   As cores da SITUAÇÃO vêm mais abaixo, depois das bases (.endo-chip,
   .endo-agenda__item, .endo-amostra): com a mesma especificidade, a base
   escrita depois apagaria o contorno tracejado da planejada. */
.endo-chip {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-height: var(--alvo); min-width: 0; padding: 4px 8px 4px 12px;
  border: 1px solid transparent; border-radius: var(--raio-sm);
  font-size: 12.5px; line-height: 1.25; text-decoration: none;
  transition: border-color .15s ease;
}
.endo-chip:hover { text-decoration: none; border-color: currentColor; }
.endo-chip:hover .endo-chip__nome { text-decoration: underline; text-underline-offset: 2px; }
.endo-chip__nome, .endo-chip__meta { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.endo-chip__nome { font-weight: 800; }
.endo-chip__meta { font-size: 12px; }
.endo-chip--cancelada .endo-chip__nome,
.endo-agenda__item.endo-chip--cancelada .endo-agenda__nome,
.endo-chip--nao_realizada .endo-chip__nome,
.endo-agenda__item.endo-chip--nao_realizada .endo-agenda__nome { text-decoration: line-through; }

/* --- O topo do calendário: setas, mês, "Hoje" e o ir para --- */
.endo-cal__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.endo-cal__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.endo-cal__mes { margin: 0; min-width: 9ch; text-align: center; font-size: 24px; line-height: 1.2; color: var(--tinta); }
.endo-cal__mes span { color: var(--muted); font-weight: 500; }
.endo-cal__seta--ant svg { transform: rotate(180deg); }
.endo-cal__ir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.endo-cal__ir select { width: auto; min-width: 0; max-width: 100%; }
.endo-cal__resumo { margin: var(--sp-3) 0 var(--sp-2); color: var(--muted); }

.endo-legenda { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: var(--sp-3); font-size: 13px; color: var(--muted); }
.endo-legenda__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.endo-legenda__titulo { font-weight: 700; color: var(--text); }
.endo-legenda__item { display: inline-flex; align-items: center; gap: 6px; }
.endo-amostra { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1px solid transparent; }
.endo-faixa { flex: none; width: 6px; height: 16px; border-radius: 2px; background-size: 100% 100%; }

/* --- A grade do mês (uma <table> de verdade: semana × dia) --- */
.endo-cal__quadro { border: 1px solid var(--linha); border-radius: var(--raio-md); overflow: hidden; }
.endo-cal__tabela { width: 100%; table-layout: fixed; border-collapse: collapse; }
.endo-cal__tabela th {
  padding: 8px; text-align: left; background: var(--suave);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.endo-cal__tabela abbr { text-decoration: none; }
.endo-dia {
  height: 104px; padding: 6px; vertical-align: top; min-width: 0;
  border: 1px solid var(--linha); background: var(--surface);
}
.endo-cal__tabela tr > .endo-dia:first-child { border-left: 0; }
.endo-cal__tabela tr > .endo-dia:last-child { border-right: 0; }
.endo-cal__tabela tbody tr:last-child > .endo-dia { border-bottom: 0; }
.endo-dia--fds { background: var(--linha-hover, var(--surface)); }
.endo-dia--fora { background: var(--bg); }
.endo-dia__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px; margin-bottom: 4px; border-radius: var(--raio-full);
  font-family: var(--fonte-titulo); font-size: 14px; font-weight: 600; color: var(--tinta, var(--text));
}
.endo-dia--fora .endo-dia__num { color: var(--muted-soft); }
.endo-dia--hoje { box-shadow: inset 0 0 0 2px var(--azul); }
.endo-dia--hoje .endo-dia__num { background: var(--azul); color: var(--sobre-cor); }
.endo-dia__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 0; }
.endo-dia__lista > li { min-width: 0; }
.endo-dia__mais { margin-top: 4px; }
.endo-dia__mais > summary {
  list-style: none; display: flex; align-items: center; min-height: var(--alvo); padding: 0 8px;
  border-radius: var(--raio-sm); cursor: pointer; font-weight: 700; font-size: 13px; color: var(--azul-600);
}
.endo-dia__mais > summary::-webkit-details-marker { display: none; }
.endo-dia__mais > summary:hover { background: var(--realce); color: var(--realce-txt); }
.endo-dia__mais[open] > summary { margin-bottom: 4px; }

/* --- O mês em lista por dia (celular) --- */
.endo-agenda { display: none; }
.endo-agenda__dia { padding: var(--sp-3) 0; border-top: 1px solid var(--linha); }
.endo-agenda__dia:first-child { border-top: 0; padding-top: var(--sp-2); }
.endo-agenda__data {
  display: flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-2);
  font-family: var(--fonte); font-size: 15px; font-weight: 700; color: var(--text);
}
.endo-agenda__num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 38px; height: 38px; border-radius: var(--raio-full);
  background: var(--bg); color: var(--tinta, var(--text));
  font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600;
}
.endo-agenda__dia--hoje .endo-agenda__num { background: var(--azul); color: var(--sobre-cor); }
.endo-agenda__itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.endo-agenda__item {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: var(--alvo);
  padding: 10px 12px 10px 16px; border: 1px solid transparent; border-radius: var(--raio-md);
  text-decoration: none; overflow-wrap: anywhere;
}
.endo-agenda__item:hover { text-decoration: none; border-color: currentColor; }
.endo-agenda__nome { font-weight: 800; font-size: 15px; line-height: 1.3; }
.endo-agenda__meta { font-size: 13px; line-height: 1.4; }
.endo-agenda__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.endo-agenda__item .tag { background: var(--surface); }
/* Seletor longo de propósito (como o .anexo-lista): no toque e até 720px, a
   regra global `.cartao ul li > a:not(.btn)` vira todo link de lista em
   inline-block com padding 9px 0 — a etiqueta perdia o recuo da faixa e o
   texto passava por cima dela. Estes vencem por especificidade. */
.cartao .endo-dia__lista > li > a.endo-chip:not(.btn) { display: flex; min-height: var(--alvo); padding: 4px 8px 4px 12px; }
.cartao .endo-agenda__itens > li > a.endo-agenda__item:not(.btn) { display: flex; min-height: var(--alvo); padding: 10px 12px 10px 16px; }

/* --- A situação: o fundo (etiqueta do dia, item da lista e amostra da legenda) --- */
.endo-chip--planejada  { background-color: var(--surface); color: var(--text); border: 1px dashed var(--campo); }
.endo-chip--confirmada { background-color: var(--realce); color: var(--realce-txt); }
.endo-chip--realizada  { background-color: var(--verde-bg); color: var(--verde-escuro); }
.endo-chip--cancelada  { background-color: var(--bg); color: var(--muted); }
/* (v1.97.0) As situações novas (dono, 30/09/2026). As de cima ficam para
   quem ainda tiver o endereço antigo em cache; nenhuma ação usa mais. */
.endo-chip--em_andamento  { background-color: var(--realce); color: var(--realce-txt); }
.endo-chip--atrasada      { background-color: var(--amarelo-bg); color: var(--dourado); border: 1px solid var(--amarelo-warn); }
.endo-chip--concluida     { background-color: var(--verde-bg); color: var(--verde-escuro); }
.endo-chip--nao_realizada { background-color: var(--bg); color: var(--muted); }

@media (max-width: 719.98px) {
  .endo-cal__quadro { display: none; }
  .endo-agenda { display: block; }
  .endo-cal__mes { font-size: 21px; min-width: 0; }
  .endo-cal__ir { flex: 1 1 100%; }
  .endo-cal__ir select { flex: 1 1 120px; }
}
/* Pela largura do CARTÃO também: com a lateral aberta num notebook pequeno,
   a janela passa de 720px e o cartão não — sete colunas de 80px não mostram
   nome de ação nenhum. Navegador sem container query fica com a regra acima. */
.endo-cal { container: endo-cal / inline-size; }
/* (v1.97.1) QA L13: o limite era 660px. A 768px (lateral recolhida) o
   cartão tem 688px úteis e a grade saía com colunas de 99px — "Café d…" e
   "07:21 às 1…" cortados em 64px de texto. Até 780px úteis vale a lista por
   dia; a 1280 (904px úteis, colunas de 130px) a grade continua. */
@container endo-cal (max-width: 780px) {
  .endo-cal__quadro { display: none; }
  .endo-agenda { display: block; }
}

/* --- O cartão do Google Agenda --- */
.endo-google .cartao__titulo { display: inline-flex; align-items: center; gap: 8px; }
.endo-google__como { max-width: 68ch; margin: 0 0 var(--sp-4); color: var(--text); }
.endo-google__campo { margin-bottom: 0; }
.endo-google__linha { display: flex; flex-wrap: wrap; gap: 8px; }
.endo-google__linha .entrada { flex: 1 1 280px; min-width: 0; font-size: 13.5px; }
.endo-google__linha .btn { flex: 0 0 auto; }
.endo-google__acoes { margin-top: var(--sp-3); }
.endo-google__gerar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.endo-google__gerar .dica { margin: 0; }
.endo-google__uma { margin: var(--sp-4) 0 0; }
@media (max-width: 559.98px) {
  .endo-google__linha .btn, .endo-google__acoes form, .endo-google__acoes .btn { flex: 1 1 100%; width: 100%; }
}

/* --- O filtro das duas telas: campos do mesmo tamanho, que quebram sozinhos --- */
@media (min-width: 768px) {
  .filtros.endo-filtros { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}

/* --- A lista do ano --- */
.endo-grafico__nota { margin: var(--sp-3) 0 0; }
/* O valor em reais não quebra no meio ("R$" numa linha, o número na outra). */
.endo-tabela td.num { white-space: nowrap; }
.endo-tabela td.num .endo-tabela__sub { white-space: normal; }
.endo-tabela__quando { display: block; margin-top: 2px; font-family: var(--fonte); font-size: 13px; font-weight: 400; color: var(--muted); }
.endo-tabela__sub { display: block; font-size: 12px; color: var(--muted-soft); }
.endo-linha--cancelada td.principal > a { text-decoration: line-through; }
.endo-tabela td.principal > a { position: relative; }
.endo-tabela td.principal > a::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: var(--alvo); transform: translateY(-50%); }
/* (v2.47.0) T2: era 861px; a tabela só volta a ser tabela em 1024px */ @media (min-width: 1024px) { .endo-tabela .num { text-align: right; } }

/* --- A ação: cabeçalho, erros e resumo --- */
.endo-cab__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.endo-erros ul { margin: 6px 0 0; padding-left: 20px; }
.endo-erros a { font-weight: 700; }
.endo-erro { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 13.5px; font-weight: 700; color: var(--verm-escuro); }
.endo-erro svg { flex: none; margin-top: 2px; }
.endo-form .campo--com-erro .entrada,
.endo-form .campo--com-erro select,
.endo-form .campo--com-erro .busca-sel__campo { border-color: var(--verm-escuro); box-shadow: 0 0 0 1px var(--verm-escuro); }
.endo-form fieldset.campo--com-erro .endo-escolha { border-color: var(--verm-escuro); }

.endo-resumo__dados {
  margin: 0; display: grid; gap: 14px 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.endo-resumo__dados > div { min-width: 0; }
.endo-resumo__dados dt { margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.endo-resumo__dados dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.endo-roi { color: var(--verde-escuro); }
.endo-roi--negativo { color: var(--verm-escuro); }
.endo-resumo__pessoas { margin-top: var(--sp-4); }
.endo-resumo__pessoas > summary {
  display: flex; align-items: center; width: max-content; max-width: 100%; min-height: var(--alvo);
  cursor: pointer; font-weight: 700; color: var(--azul-600);
}
.endo-resumo__lista {
  list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.endo-resumo__lista li { min-width: 0; min-height: var(--alvo); display: flex; flex-direction: column; justify-content: center; font-size: 14px; }
.endo-resumo__lista .dica { display: block; margin: 0; }
/* Link solto no texto (nome na ficha, campo com erro): a área de toque de
   44px vem de um ::after, como o .num-ver — a linha não muda de altura. */
.endo-erros li { min-height: var(--alvo); padding-block: 11px; line-height: 1.4; }
.endo-resumo__dados dd a, .endo-resumo__lista a, .endo-erros a { position: relative; }
.endo-resumo__dados dd a::after, .endo-resumo__lista a::after, .endo-erros a::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: var(--alvo); transform: translateY(-50%);
}

/* --- O formulário da ação --- */
/* `.campo label { display:block }` venceria a opção de marcar: aqui ela volta a ser a linha de 44px. */
.endo-form .campo label.escolha,
.endo-pessoas .campo label.escolha { display: flex; margin-bottom: 0; font-size: 14px; font-weight: 400; color: var(--text); }
.endo-form .campo label.escolha--pilula { display: inline-flex; }
.endo-rotulo-vazio { display: block; min-height: calc(1.3em * 2); margin-bottom: 6px; font-size: 14px; line-height: 1.3; }
.endo-escolhas { min-width: 0; margin: 0; padding: 0; border: 0; }
.endo-escolhas > legend { display: flex; align-items: flex-end; margin-bottom: 6px; padding: 0; font-size: 14px; font-weight: 700; color: var(--tinta, var(--muted)); }
.endo-escolhas__opcoes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.endo-escolhas__opcoes > * { min-width: 0; }
.endo-escolhas__opcoes--nota { display: flex; flex-wrap: wrap; }
.endo-form .endo-escolha { padding-left: 16px; align-items: flex-start; }
.endo-escolha > span { display: flex; flex-direction: column; min-width: 0; }
.endo-escolha .dica { margin: 0; }
.endo-form .endo-escolha:has(input:checked) { border-color: var(--azul); background-color: var(--realce); }
.endo-form .endo-escolha input { margin-top: 2px; }
.endo-roi-caixa p { margin: 0; }
.endo-form__rodape { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- Envolvidos: a lista de marcar com busca --- */
.endo-pessoas { min-width: 0; margin: 0; padding: 0; border: 0; }

/* --- (v1.97.0) Detalhe do custo previsto: escrito ou item a item --- */
.endo-custo { min-width: 0; margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0; border: 0; border-top: 1px solid var(--border); }
.endo-custo__legenda { margin-bottom: var(--sp-2); padding: 0; font-size: 14px; font-weight: 700; color: var(--tinta, var(--muted)); }
.endo-custo__modos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-3); }
.endo-form .endo-custo__modos label.escolha--pilula { display: inline-flex; }
.endo-custo__texto { margin: 0; }
.endo-custo__tabela .entrada { width: 100%; min-width: 0; }
.endo-custo__col-qtd   { width: 90px; }
.endo-custo__col-valor { width: 170px; }
.endo-custo__col-sub   { width: 130px; white-space: nowrap; }
.endo-custo__col-tirar { width: 52px; text-align: right; }
.endo-custo__tabela tfoot th, .endo-custo__tabela tfoot td { border-top: 2px solid var(--border); }
.endo-custo__total-rot { text-align: right; padding-right: 16px; }
.endo-custo__tabela tfoot td { white-space: nowrap; }
/* Até 1023px a tabela vira cartões (regra geral de .tabela). O <tfoot> do
   total continuava linha de TABELA e prendia os cartões na largura da
   primeira coluna: aqui a tabela inteira vira bloco e o total, uma linha. */
@media (max-width: 1023.98px) {
  .endo-custo__tabela, .endo-custo__tabela tbody, .endo-custo__tabela tfoot { display: block; width: 100%; }
  .endo-custo__tabela tfoot tr { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 14px; }
  .endo-custo__tabela tfoot th, .endo-custo__tabela tfoot td { border: 0; padding: 0; }
  .endo-custo__tabela tfoot td:empty { display: none; }
  .endo-custo__tabela tbody td.endo-custo__col-tirar { width: auto; justify-content: flex-end; }
}
.endo-custo__itens > .btn { margin-top: var(--sp-2); }
.endo-form input[readonly] { background: var(--bg); }
.endo-pessoas__legenda { margin-bottom: var(--sp-3); padding: 0; font-size: 14px; font-weight: 700; color: var(--tinta, var(--muted)); }
.endo-pessoas__ferramentas { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; margin-bottom: var(--sp-3); }
.endo-pessoas__ferramentas > .campo { margin: 0; min-width: 0; }
.endo-pessoas__barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin-bottom: var(--sp-2); font-size: 14px; color: var(--muted);
}
.endo-pessoas__botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.endo-pessoas__lista { max-height: 460px; overscroll-behavior: contain; }
.endo-pessoa { font-weight: 400; }
.endo-pessoa:has(input:checked) { background: var(--realce); border-color: var(--azul-200); }
.endo-pessoa__txt { display: flex; flex-direction: column; min-width: 0; }
.endo-pessoa__txt .dica { margin: 0; }
/* (v1.90.1) QA: a dica (--muted-soft) sobre o fundo da opção marcada (--realce) dava 3,85:1; --muted dá 5,24:1. */
.endo-form .endo-escolha:has(input:checked) .dica,
.endo-pessoa:has(input:checked) .dica { color: var(--muted); }
.endo-pessoas__teto { margin: var(--sp-2) 0 0; }
.endo-externos { margin: var(--sp-4) 0 0; }
@media (min-width: 768px) {
  .endo-pessoas__ferramentas { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
}
@media (max-width: 767.98px) {
  .endo-pessoas__so .endo-rotulo-vazio { display: none; }
  .endo-pessoas__botoes, .endo-pessoas__botoes .btn { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .form-grade > .campo > .endo-rotulo-vazio { display: none; }
}

/* --- O histórico de alterações: uma linha do tempo --- */
.endo-hist__lista { list-style: none; margin: 0; padding: 0; }
.endo-hist__item { position: relative; margin-left: 6px; padding: 10px 0 12px 18px; border-left: 2px solid var(--linha); }
.endo-hist__item::before {
  content: ''; position: absolute; left: -7px; top: 16px; width: 12px; height: 12px;
  border-radius: var(--raio-full); background: var(--azul-200); border: 2px solid var(--surface);
}
.endo-hist__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.endo-hist__quando { font-size: 13px; color: var(--muted-soft); }
.endo-hist__mudancas { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--text); }
.endo-hist__texto { margin: 6px 0 0; font-size: 14px; color: var(--text); }
.endo-hist .cartao__titulo { display: inline-flex; align-items: center; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .endo-chip { transition: none; }
}

/* =====================================================================
   EDITOR DE OPÇÕES (v1.84.0) — padrão do Google Forms, em todo editor
   Decisão do dono de 29/09 (DECISOES-DO-DONO, seção 6): cada opção é uma
   linha própria, uma abaixo da outra, com "Adicionar opção" e remover.
   Peças: parciais/opcoes-editor.php (+ -linha, -modelo) e
   assets/js/opcoes-editor.js. Sem JavaScript fica a tela de antes: o
   textarea "uma por linha" ou as caixas fixas, e a alça, as setas, o
   remover e o "Adicionar" saem `hidden`.

   Linha: [alça] [marcador] [texto…………] [desclassifica | Correta | fator]
   [subir] [descer] [remover]. O marcador segue o tipo (bola = múltipla
   escolha, quadrado = caixas de seleção, número = lista suspensa e linhas
   da grade, letra = prova). No celular o texto fica na 1ª linha e o resto
   desce para a 2ª, com os alvos de 44px.
   ===================================================================== */
.opcoes-editor__nota { font-weight: 400; color: var(--muted-soft); }
.opcoes-editor__rotulo + .opcoes-editor__dica { margin: 0 0 8px; }

.opcoes-editor__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 6px; counter-reset: opcao;
}
/* A linha antiga da triagem tinha margem própria; dentro da lista quem
   separa é o gap. */
.opcoes-editor__lista > .triagem-opcao-linha { margin-bottom: 0; }
/* `flex-wrap`: o aviso da linha (opção repetida) desce para baixo dela. O
   `max-width: none` desfaz o limite de 68 caracteres do `.cartao ol li`, que
   é para texto corrido — a linha do editor é um controle e ocupa a largura
   toda do campo. */
.opcoes-editor__lista > .opcoes-editor__linha { max-width: none; }
.opcoes-editor__linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0;
  border-radius: var(--raio); counter-increment: opcao;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.opcoes-editor__linha > [data-opcao-texto] { flex: 1 1 200px; min-width: 0; }

/* Marcador: o que quem responde vai ver. Decoração (aria-hidden): o tipo
   está escrito no seletor de Tipo. */
.opcoes-editor__marca {
  flex: none; width: 18px; height: 18px;
  border: 2px solid var(--muted-soft); border-radius: var(--raio-full);
}
[data-marcador="multipla"] .opcoes-editor__marca { border-radius: var(--raio-sm); }
:is([data-marcador="lista"], [data-marcador="linha"]) .opcoes-editor__marca {
  width: auto; min-width: 18px; height: auto; border: 0;
  font-size: 14px; font-weight: 700; color: var(--muted); text-align: right;
}
:is([data-marcador="lista"], [data-marcador="linha"]) .opcoes-editor__marca::before { content: counter(opcao) "."; }
.opcoes-editor__letra {
  flex: none; min-width: 18px; text-align: center;
  font-family: var(--fonte-titulo); font-size: 16px; color: var(--muted);
}

/* Alça de arrastar: só ponteiro (mouse e dedo). Subir e descer são a
   alternativa de um toque e de teclado (WCAG 2.5.7). No toque ela tem 44px
   de largura; no mouse, 28px, que é o que a precisão do mouse pede. */
.opcoes-editor__alca {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; min-height: var(--alvo); border-radius: var(--raio-sm);
  color: var(--muted-soft); cursor: grab; touch-action: none; user-select: none;
}
.opcoes-editor__alca:hover { color: var(--text); background: var(--bg); }
@media (pointer: coarse) { .opcoes-editor__alca { width: var(--alvo); } }
.opcoes-editor--arrastando,
.opcoes-editor--arrastando * { cursor: grabbing; user-select: none; }
.opcoes-editor__linha--arrastando {
  position: relative; z-index: 1;
  background: var(--realce); box-shadow: var(--sombra-g);
  outline: 2px dashed var(--azul); outline-offset: 2px;
}

.opcoes-editor__acoes { flex: none; display: inline-flex; gap: 2px; }
.opcoes-editor__acoes .btn { min-height: var(--alvo); width: var(--alvo); color: var(--muted); }
.opcoes-editor__acoes .btn:disabled { opacity: .35; cursor: not-allowed; }
.opcoes-editor__acoes .opcoes-editor__remover:not(:disabled):hover { color: var(--verm-escuro); background: var(--verm-100); }

/* A caixa ao lado do texto (desclassifica / Correta). `.campo label` (bloco,
   700) venceria a .escolha: duas classes de propósito, a mesma correção do
   `.escolhas .escolha`. */
.opcoes-editor__extra { flex: none; }
.opcoes-editor__linha label.escolha {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  min-height: var(--alvo); padding: 4px 10px;
  font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--text); white-space: nowrap;
}
.opcoes-editor__linha .escolha--corte:has(input:checked) { color: var(--verm-escuro); }
/* A alternativa correta: a linha fica verde, com o ícone E a palavra
   "Correta" (a cor nunca vai sozinha). */
.opcoes-editor__linha:has(.opcoes-editor__correta input:checked) {
  background: var(--verde-bg); box-shadow: 0 0 0 2px var(--verde-borda);
}
.opcoes-editor__linha .opcoes-editor__correta:has(input:checked) {
  border-color: var(--verde); background: var(--surface); color: var(--verde-escuro); font-weight: 700;
}
.opcoes-editor__correta input { accent-color: var(--verde); }
/* Largura da caixa JÁ com o ícone: marcar outra alternativa não empurra as
   caixas de texto (as linhas continuam alinhadas). */
.opcoes-editor__linha .opcoes-editor__correta { min-width: 130px; }
.opcoes-editor__ok { display: none; flex: none; }
.opcoes-editor__correta:has(input:checked) .opcoes-editor__ok { display: inline-block; }
.opcoes-editor__fator { width: auto; max-width: 170px; }

/* Aviso da linha (opção repetida). Laranja escuro: 4,67:1 no branco. */
.opcoes-editor__aviso { flex-basis: 100%; margin: 0; padding-left: 4px; font-size: 13px; color: var(--laranja-escuro); }

/* "Adicionar opção": a linha fantasma embaixo da lista, com o "+" na coluna
   dos marcadores (depois da alça de 28px, ou 44px no toque). */
.opcoes-editor__rodape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 12px; margin-top: 4px;
}
.opcoes-editor__adicionar {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--alvo); margin-left: 28px; padding: 0 12px 0 8px;
  background: none; border: 0; border-radius: var(--raio);
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--azul); cursor: pointer;
}
@media (pointer: coarse) { .opcoes-editor__adicionar { margin-left: var(--alvo); } }
.opcoes-editor__adicionar:hover:not(:disabled) { background: var(--realce); color: var(--realce-txt); }
.opcoes-editor__adicionar:focus-visible { outline: 3px solid var(--anel); outline-offset: 2px; }
.opcoes-editor__adicionar:disabled { color: var(--muted-soft); cursor: not-allowed; }
.opcoes-editor__adicionar-icone { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
.opcoes-editor__contador { font-size: 13px; color: var(--muted-soft); }
.opcoes-editor__atalhos { margin: 2px 0 0; }
/* Aviso do conjunto (sem a correta, todas desclassificam, máximo…): não
   bloqueia; quem valida é o servidor. */
.opcoes-editor__alerta { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--laranja-escuro); }

@media (max-width: 639px) {
  /* 1ª linha: alça, marcador e o texto na largura que sobra; 2ª linha: a
     caixa (desclassifica / Correta / fator) e as ações, à direita. */
  .opcoes-editor__lista { gap: 8px; }
  .opcoes-editor__linha { flex-wrap: wrap; row-gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--linha); border-radius: 0; }
  .opcoes-editor__linha > [data-opcao-texto] { flex: 1 1 calc(100% - 90px); }
  .opcoes-editor__acoes { margin-left: auto; }
  /* A "Correta" e as três ações cabem numa linha só em 320px: sem o ícone
     (o fundo verde, o rádio marcado e a palavra continuam dizendo qual é). */
  .opcoes-editor__linha .opcoes-editor__correta { min-width: 0; }
  .opcoes-editor__correta:has(input:checked) .opcoes-editor__ok { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .opcoes-editor__linha { transition: none; }
}

/* --- Resumo das opções na lista de perguntas (parciais/opcoes-resumo) ---
   Uma abaixo da outra, com o marcador de quem responde; a que desclassifica
   leva a palavra, e não só a cor. */
.opcoes-resumo {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; gap: 4px; counter-reset: opcao;
}
.opcoes-resumo > li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; line-height: 1.4; color: var(--muted); counter-increment: opcao;
}
.opcoes-resumo__marca {
  flex: none; width: 14px; height: 14px; margin-top: 3px;
  border: 2px solid var(--muted-soft); border-radius: var(--raio-full);
}
.opcoes-resumo[data-marcador="multipla"] .opcoes-resumo__marca { border-radius: var(--raio-sm); }
.opcoes-resumo:is([data-marcador="lista"], [data-marcador="linha"]) .opcoes-resumo__marca {
  width: auto; min-width: 14px; height: auto; margin-top: 0; border: 0;
  font-weight: 700; color: var(--muted-soft);
}
.opcoes-resumo:is([data-marcador="lista"], [data-marcador="linha"]) .opcoes-resumo__marca::before { content: counter(opcao) "."; }
.opcoes-resumo__texto { min-width: 0; overflow-wrap: anywhere; }
.opcoes-resumo > li > .tag { flex: none; }
.opcoes-resumo__titulo { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.opcoes-resumo-grade { display: grid; gap: 0 var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .opcoes-resumo-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* "Adicionar pergunta" no ALTO da lista do construtor (v1.84.0, decisão do
   dono de 29/09: o formulário de novo registro fica acima da listagem). A
   margem que separava do fim da lista passa a separar do começo dela. */
.questionario-nova.questionario-nova--topo { margin: 0 0 var(--sp-4); }
/* (v1.84.0) Os cartões das perguntas ocupam a largura do cartão, como o
   "Adicionar pergunta" logo acima. O limite de 68 caracteres do
   `.cartao ol li` é para texto corrido; aqui ele espremia o cartão (e o
   editor aberto dentro dele) em ~550px, com uma faixa vazia à direita. */
.questionario-lista > .questionario-pergunta { max-width: none; }

/* A grade da pesquisa (quem responde): no celular as colunas de cada linha
   ficam uma abaixo da outra; no computador continuam lado a lado, alinhadas
   como tabela (decisão padrão da v1.84.0). */
@media (max-width: 639px) {
  .pesquisa-grade__opcoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
}


/* =====================================================================
   NOVO COLABORADOR — O CADASTRO COMPLETO NUMA PAGINA (v2.2.0)

   O resumo fica FIXO no alto da tela enquanto se rola: e o que responde, a
   qualquer momento, "falta alguma coisa?". Barra e lista de pendencias; o
   campo vazio marcado pelo aria-invalid ganha contorno e fundo de erro
   (cor + borda, nunca so cor).
   ===================================================================== */
.novo-colab { display: grid; gap: var(--sp-4); }
.novo-colab__resumo {
  position: sticky; top: 0; z-index: 20; margin: 0;
  border-left: 4px solid var(--azul);
}
.novo-colab__resumo-topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.novo-colab__barra { height: 8px; border-radius: var(--raio-full); background: var(--border); margin: 8px 0 0; overflow: hidden; }
.novo-colab__barra > span { display: block; height: 100%; background: var(--azul); border-radius: var(--raio-full); transition: width .2s ease; }
.novo-colab__faltam { margin: 10px 0 0; font-size: 14px; color: var(--text); }
.novo-colab__faltam a { font-weight: 700; }
.novo-colab .recomendado {
  font-size: 12px; /* (v2.47.0) T6: era 11.5px */ font-weight: 600; color: var(--muted-soft);
  text-transform: uppercase; letter-spacing: .04em; margin-left: 4px;
}
.novo-colab [aria-invalid="true"] {
  border-color: var(--vermelho); background: var(--vermelho-bg, #fdecec);
  box-shadow: 0 0 0 2px rgba(236, 50, 55, .18);
}
.novo-colab__acoes {
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  position: sticky; bottom: 0; z-index: 15; padding: 12px 0;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
@media (max-width: 640px) {
  .novo-colab__acoes .btn { flex: 1 1 100%; }
}

/* =====================================================================
   "Por que trabalhar" (home, v2.3.0; orb na v2.5.0): vidro nos cartoes +
   um orb (thinking-orbs) no canto de baixo, em parte para fora da secao. Fundo branco (--surface) para destacar do resto da pagina (cinza --bg), sem foto. So esta
   secao; o vidro precisa de algo atras para desfocar, por isso o orb.
   ===================================================================== */
.secao--porque { position: relative; isolation: isolate; overflow: hidden; background: var(--surface); border: 0; }
.secao--porque > .miolo { position: relative; z-index: 1; }
/* (v2.23.0) Fios animados (Background Paths) no lugar do orb: ver assets/js/porque-paths.js. */
.secao--porque .porque-paths { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; color: var(--azul); transform: translateZ(0); contain: strict;
  /* contido na secao: os fios somem suavemente antes da borda, sem corte seco */
  -webkit-mask-image: radial-gradient(ellipse 62% 68% at 50% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 68% at 50% 50%, #000 35%, transparent 100%); }
.porque-paths__camada { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; }
.porque-paths__camada path {
  stroke-dasharray: .16 2; opacity: .55; animation: porque-fio 60s ease-in-out infinite;
}
@keyframes porque-fio {
  0%   { stroke-dashoffset: 0; }
  50%  { stroke-dashoffset: -1; }
  100% { stroke-dashoffset: 0; }
}
.porque-paths--pausa path { animation-play-state: paused; }
@media (max-width: 767px) {
  /* Celular: as duas camadas ficam (uma desloca os fios para cima, a outra para baixo; só com uma os fios
     ficavam nos 2 primeiros cartões), mas só metade dos fios de cada uma, para animar menos traço. */
  .porque-paths__camada path:nth-child(even) { display: none; }
  /* Celular: a seção é alta e os cartões cobrem boa parte dela; fios um pouco mais longos e fortes, e a
     máscara de borda mais larga, para o efeito aparecer nos vãos entre os cartões. */
  .secao--porque .porque-paths {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
  .porque-paths__camada path { stroke-dasharray: .26 2; opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .porque-paths__camada path { animation: none; stroke-dasharray: none; opacity: .35; }
}
.secao--porque .sobre-card {
  position: relative; background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.38));
  border: 1px solid rgba(255,255,255,.95); border-radius: 22px;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 12px 30px rgba(0,54,91,.12), inset 0 1px 0 var(--sobre-cor);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .secao--porque .sobre-card { background: var(--surface); border-color: var(--border); }
}

/* "Por que trabalhar" (v2.3.2): mais respiro em cima e embaixo, para a secao
   nao ficar colada na de vagas nem na faixa de chamada. */
.secao--porque { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
@media (min-width: 768px) {
  .secao--porque { padding-top: 88px; padding-bottom: 96px; }
  .secao--porque .secao__titulo { margin-bottom: 40px; }
}

/* =====================================================================
   BUSCA DE TELAS NO TOPO DO PAINEL (v2.8.0)
   Campo fixo no cabeçalho, com sugestões das telas do menu (JS:
   assets/js/busca-telas.js). Computador: o campo aparece inteiro. Celular
   (< 720px): só a lupa; ao tocar, o campo abre sobre o topo.
   ===================================================================== */
.busca-telas { position: relative; flex: 0 1 340px; min-width: 0; margin-left: 4px; }
.busca-telas[hidden] { display: none; }
.busca-telas__abrir {
  display: none; align-items: center; justify-content: center;
  width: var(--alvo); height: var(--alvo); border: 1px solid transparent; border-radius: var(--raio);
  background: transparent; color: var(--muted); cursor: pointer;
}
.busca-telas__abrir:hover { background: var(--bg); color: var(--text); }
.busca-telas__campo { position: relative; display: flex; align-items: center; }
.busca-telas__icone { position: absolute; left: 12px; display: inline-flex; color: var(--muted-soft); pointer-events: none; }
.busca-telas__campo .busca-telas__entrada {
  width: 100%; height: 40px; padding: 0 14px 0 38px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg);
  font: inherit; font-size: 14px; color: var(--text);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.busca-telas__entrada::placeholder { color: var(--muted-soft); }
.busca-telas__campo .busca-telas__entrada:hover { border-color: var(--azul-200); }
.busca-telas__campo .busca-telas__entrada:focus { outline: none; border-color: var(--azul); background: var(--surface); box-shadow: 0 0 0 3px rgba(0,108,181,.18); }
.busca-telas__entrada::-webkit-search-cancel-button { cursor: pointer; }

.busca-telas__lista {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; min-width: 280px;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--sombra-g);
  max-height: min(60vh, 420px); overflow-y: auto;
}
.busca-telas__lista[hidden] { display: none; }
.busca-telas__item {
  display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 10px; cursor: pointer;
}
.busca-telas__item--ativo { background: var(--azul-100); }
.busca-telas__nome { font-weight: 600; color: var(--text); font-size: 14px; }
.busca-telas__grupo { font-size: 12px; color: var(--muted); }
.busca-telas__vazio { padding: 12px; font-size: 13px; color: var(--muted); }

@media (max-width: 719px) {
  .busca-telas { flex: 0 0 auto; margin-left: 0; }
  .busca-telas__abrir { display: inline-flex; }
  .busca-telas__campo { display: none; }
  /* aberta: o campo cobre o topo inteiro, com a lista logo embaixo */
  .busca-telas--aberta .busca-telas__campo {
    display: flex; position: fixed; z-index: 70; left: 8px; right: 8px; top: 8px;
  }
  .busca-telas--aberta .busca-telas__campo .busca-telas__entrada { height: 44px; background: var(--surface); box-shadow: var(--sombra-g); }
  .busca-telas--aberta .busca-telas__lista { position: absolute; top: calc(100% + 6px); }
}
@media (prefers-reduced-motion: reduce) { .busca-telas__campo .busca-telas__entrada { transition: none; } }
@media print { .busca-telas { display: none !important; } }

/* =====================================================================
   (v2.13.0) LISTA DE VAGAS E CARTÃO DE VAGA — menos filtro antes do resultado
   Auditoria visual de 23/10/2026: no celular a 1ª vaga só aparecia depois de duas telas de filtro
   (cidades empilhadas, busca e botão), e o cartão repetia a cidade três vezes.
   ===================================================================== */
.vagas-cidades { margin-bottom: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.vagas-cidades__titulo { margin: 0 0 var(--sp-2); font-size: 1rem; }
/* Cidades numa linha só, que rola de lado no celular (os botões são do tamanho do dedo, não encolhem). */
.cidades-escolha {
  display: flex; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; scrollbar-width: none;
}
.cidades-escolha::-webkit-scrollbar { display: none; }
.cidades-escolha .btn { flex: none; scroll-snap-align: start; touch-action: manipulation; }
.cidades-escolha [data-sem-vagas]:not([aria-current]) { opacity: .75; }
@media (min-width: 768px) {
  .cidades-escolha { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
}
/* Busca e botão Filtrar na MESMA linha no celular; o contrato (quando existe) desce para a linha de baixo. */
@media (max-width: 767.98px) {
  .filtros--vagas { grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-bottom: var(--sp-4); }
  .filtros--vagas .filtros__campo--largo { grid-column: 1; grid-row: 1; }
  .filtros--vagas .filtros__acao { grid-column: 2; grid-row: 1; }
  .filtros--vagas .filtros__acao .btn { width: auto; }
  .filtros--vagas .filtros__campo:not(.filtros__campo--largo) { grid-column: 1 / -1; grid-row: 2; }
}
/* Cartão: título sem palavra sozinha na última linha; setor numa linha própria; toque sem atraso. */
.vaga-card { touch-action: manipulation; }
.vaga-card__titulo { text-wrap: balance; }
.vaga-card__setor { margin-top: -4px; }
/* O Banco de Talentos ocupa a linha inteira da grade (antes ficava sozinho num quarto espaço). */
@media (min-width: 768px) {
  .grade-vagas > .vaga-card--talentos { grid-column: 1 / -1; }
  .vaga-card--talentos p { max-width: 62ch; }
}

/* ADMISSÃO DO DP REORGANIZADA (v2.17.0): linhas de documento, abas, coluna lateral e a
   Leitura automática de documentos em destaque. Só tokens do tema. */
.adm2-topo__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.adm2-barra { height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: 8px; }
.adm2-barra > i { display: block; height: 100%; background: var(--verde); border-radius: 99px; }
.adm2-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.adm2-main, .adm2-lado { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.adm2-lado > .cartao, .adm2-main > .cartao { margin: 0; }
@media (min-width: 1100px) { .adm2-grade { grid-template-columns: minmax(0, 1fr) 340px; } }

.adm2-abas { display: flex; flex-wrap: wrap; gap: 6px; }
.adm2-abas[hidden] { display: none; }
.adm2-aba { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 99px;
  padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 36px; }
.adm2-aba em { font-style: normal; opacity: .8; margin-left: 4px; }
.adm2-aba[aria-pressed="true"] { background: var(--primaria, var(--tinta)); border-color: var(--primaria, var(--tinta)); color: var(--sobre-cor); }
.adm2-aba:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.adm2-docs { padding: 0; overflow: hidden; }
.adm2-grupo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 14px 18px 8px; border-top: 1px solid var(--linha); }
.adm2-grupo:first-child { border-top: 0; }
.adm2-grupo h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.adm2-grupo span { font-size: 12.5px; color: var(--muted); }
.adm2-lista { display: flex; flex-direction: column; }
.doc-item.adm2-doc { border: 0; border-top: 1px solid var(--linha); border-radius: 0; box-shadow: none; padding: 0; background: transparent; }
.adm2-doc > summary { list-style: none; cursor: pointer; display: grid; align-items: center; gap: 12px; padding: 12px 18px;
  grid-template-columns: 26px minmax(160px, 1.5fr) minmax(120px, 1fr) minmax(170px, 1.1fr) 14px; }
.adm2-doc > summary::-webkit-details-marker { display: none; }
.adm2-doc > summary:hover { background: var(--bg); }
.adm2-doc > summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.adm2-doc[open] > summary { background: var(--bg); }
.adm2-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800;
  background: var(--border); color: var(--muted); }
.adm2-ic--ok { background: var(--verde-bg); color: var(--verde-escuro); }
.adm2-ic--erro { background: var(--verm-100); color: var(--verm-escuro); } /* (v2.47.0) T7: cor crua virou token */
.adm2-nome { font-weight: 700; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.adm2-nome small { font-weight: 600; color: var(--muted); font-size: 12px; }
.adm2-quando { font-size: 13px; color: var(--muted); }
.adm2-chip { display: inline-flex; align-items: center; border-radius: 99px; padding: 4px 10px; font-size: 12.5px; font-weight: 700; width: fit-content; line-height: 1.3; }
.adm2-chip--ok { background: var(--verde-bg); color: var(--verde-escuro); }
.adm2-chip--aviso { background: var(--amarelo-bg); color: var(--dourado); } /* (v2.47.0) T7: cor crua virou token */
.adm2-chip--erro { background: var(--verm-100); color: var(--verm-escuro); } /* (v2.47.0) T7: cor crua virou token */
.adm2-chip--neutro { background: var(--border); color: var(--muted); }
.adm2-seta { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; justify-self: center; }
.adm2-doc[open] > summary .adm2-seta, .adm2-hist[open] > summary .adm2-seta { transform: rotate(45deg); }
.adm2-corpo { padding: 6px 18px 16px 56px; background: var(--bg); }
.adm2-corpo .doc-item__recado { margin-bottom: 10px; }
.adm2-leitura { margin: 0 0 10px; }
.adm2-hist { padding: 0; }
.adm2-hist > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.adm2-hist > summary::-webkit-details-marker { display: none; }
.adm2-hist > summary .adm2-seta { margin-left: auto; }
.adm2-hist .tabela-envolve { padding: 0 8px 12px; }

/* A leitura automática em destaque: fundo na cor da marca, com o acento lima. */
.adm2-auto { background: var(--tinta); color: var(--sobre-cor); border-color: var(--tinta); }
.adm2-auto .cartao__titulo { color: var(--sobre-cor); }
.adm2-auto__num { margin: 0 0 8px; color: var(--sobre-cor); }
.adm2-auto__num strong { color: var(--lima); }
.adm2-auto__dica { margin: 0 0 12px; font-size: 13px; color: var(--sobre-azul-txt, var(--sobre-cor)); line-height: 1.45; }
.adm2-auto .btn { background: var(--lima); border-color: var(--lima); color: var(--tinta); }
.adm2-auto .btn:hover { filter: brightness(.95); }
.adm2-auto .btn:focus-visible { outline: 2px solid var(--sobre-cor); outline-offset: 2px; }

@media (max-width: 720px) {
  .adm2-doc > summary { grid-template-columns: 26px 1fr 14px; grid-template-areas: "ic nome seta" "ic quando quando" "ic chip chip"; row-gap: 4px; }
  .adm2-doc > summary > .adm2-ic { grid-area: ic; align-self: start; }
  .adm2-doc > summary > .adm2-nome { grid-area: nome; }
  .adm2-doc > summary > .adm2-quando { grid-area: quando; }
  .adm2-doc > summary > .adm2-chip { grid-area: chip; }
  .adm2-doc > summary > .adm2-seta { grid-area: seta; }
  .adm2-corpo { padding-left: 18px; }
}
@media (prefers-reduced-motion: reduce) { .adm2-seta { transition: none; } }

/* SINO COM ALERTA NOVO (v2.18.0): balança 3 vezes, pendurado pelo alto. */
@keyframes sino-toca {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(16deg); }
  30% { transform: rotate(-14deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-8deg); }
  75% { transform: rotate(4deg); }
}
.sino__botao--toca svg { transform-origin: 50% 8%; animation: sino-toca 1.1s ease-in-out .3s 3; }
@media (prefers-reduced-motion: reduce) { .sino__botao--toca svg { animation: none; } }

/* FICHA DO COLABORADOR EM ABAS (v2.19.0): cartão de identificação, abas e a coluna do Resumo. Só tokens do tema. */
.painel__cabecalho.col2-hero { background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio-card);
  padding: 18px 22px; margin-bottom: var(--sp-4); }
.col2-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.col2-meta span { display: inline-flex; gap: 6px; align-items: center; }
.col2-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.col2-abas { display: flex; gap: 4px; overflow-x: auto; background: var(--surface); border: 1px solid var(--linha);
  border-radius: 14px; padding: 6px; margin-bottom: var(--sp-4); scrollbar-width: thin; }
.col2-abas a { flex: none; padding: 9px 14px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--muted);
  text-decoration: none; display: inline-flex; gap: 6px; align-items: center; min-height: 40px; }
.col2-abas a:hover { background: var(--bg); }
.col2-abas a[aria-current="page"] { background: var(--tinta); color: var(--sobre-cor); }
.col2-abas a:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.col2-abas em { font-style: normal; font-size: 12px; /* (v2.47.0) T6: era 11.5px */ background: var(--border); color: var(--muted); border-radius: 99px; padding: 1px 7px; }
.col2-abas a[aria-current="page"] em { background: var(--lima); color: var(--tinta); }
.col2-painel[hidden] { display: none; }
.col2-painel [id] { scroll-margin-top: 90px; }
.col2-painel > .cartao + .cartao, .col2-painel > .grade-2, .col2-painel > details { margin-top: var(--sp-4); }
.col2-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.col2-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.col2-col > .cartao { margin: 0; }
@media (min-width: 1100px) { .col2-grade { grid-template-columns: minmax(0, 1fr) 340px; } }
.col2-aten { background: var(--alerta-suave, #fff8e6); border: 1px solid var(--dourado-borda); } /* (v2.47.0) T7: cor crua virou token */
.col2-aten .cartao__titulo { font-size: 1rem; }
.col2-chk { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.col2-chk li { display: flex; gap: 10px; align-items: flex-start; }
.col2-pt { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--amarelo-bg); color: var(--dourado); border: 1px solid var(--dourado-borda); } /* (v2.47.0) T7: cor crua virou token */
.col2-prog { height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; margin: 8px 0 0; }
.col2-prog > i { display: block; height: 100%; background: var(--verde); }
.col2-linha { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.col2-linha li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linha); }
.col2-linha li:first-child { border-top: 0; padding-top: 0; }
.col2-linha time { color: var(--muted); font-size: 12.5px; }

/* CARD DE DOCUMENTOS EM DESTAQUE NA FICHA (v2.19.1): fundo na cor da marca e o botão dentro dele. */
.kpis--ficha .kpi.kpi--docs { background: var(--tinta); border-color: var(--tinta); }
.kpis--ficha .kpi.kpi--docs .kpi__rotulo { color: var(--sobre-azul-txt, var(--sobre-cor)); }
.kpis--ficha .kpi.kpi--docs .kpi__rotulo::before { background: var(--lima); }
.kpis--ficha .kpi.kpi--docs .kpi__valor { color: var(--lima); }
.kpis--ficha .kpi.kpi--docs .kpi__botao { background: var(--lima); border-color: var(--lima); color: var(--tinta); margin-top: 6px; text-decoration: none; }
.kpis--ficha .kpi.kpi--docs .kpi__botao:hover { filter: brightness(.95); }
.kpis--ficha .kpi.kpi--docs .kpi__botao:focus-visible { outline: 2px solid var(--sobre-cor); outline-offset: 2px; }

/* VISÃO GERAL REORGANIZADA (v2.21.0): atalhos, "precisa de atenção", cartões que preenchem a linha e duas colunas. */
.kpis.kpis--vg { display: flex; flex-wrap: wrap; gap: 12px; }
.kpis.kpis--vg > .kpi { flex: 1 1 190px; min-width: 0; }
.kpi.kpi--vg-destaque { background: var(--tinta); border-color: var(--tinta); }
.kpi.kpi--vg-destaque .kpi__rotulo, .kpi.kpi--vg-destaque .kpi__nota { color: var(--sobre-azul-txt, var(--sobre-cor)); }
.kpi.kpi--vg-destaque .kpi__valor { color: var(--lima); }
.kpi.kpi--vg-destaque .kpi__ver, .kpi.kpi--vg-destaque a { color: var(--lima); }
.vg2-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sp-4); align-items: center; }
.vg2-atencao { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; margin-bottom: var(--sp-4); } /* (v2.47.0) cabe em 320px */
.vg2-at { position: relative; display: flex; gap: 12px; align-items: center; background: var(--alerta-suave, #fff8e6); border: 1px solid var(--dourado-borda); border-radius: 14px; padding: 12px 14px; min-width: 0; } /* (v2.47.0) T7: cor crua virou token */
.vg2-at b { font: 600 28px Oswald, sans-serif; color: var(--dourado); min-width: 40px; } /* (v2.47.0) T7: cor crua virou token */
.vg2-at span { font-size: 13.5px; line-height: 1.3; min-width: 0; }
.vg2-at small { display: block; font-size: 12.5px; margin-top: 2px; }
.vg2-at--ok { background: var(--surface); border-color: var(--linha); }
.vg2-at--ok b { color: var(--verde-escuro); }
.vg2-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; margin-top: var(--sp-4); }
.vg2-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.vg2-col > .cartao { margin: 0; }
@media (min-width: 1100px) { .vg2-grade { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.vg2-lista { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.vg2-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linha); }
.vg2-lista li:first-child { border-top: 0; }
.vg2-lista li > span:last-child { color: var(--muted); font-size: 12.5px; text-align: right; }
.vg2-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.vg2-seg button { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 99px; padding: 6px 12px;
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; min-height: 34px; }
.vg2-seg button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-cor); }
.vg2-seg button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.vg2-abas.graf-grade.vg2-abas--js { display: block; }

/* O link "ver quem" dos cartões de atenção se estica sobre o cartão (.kpi__gatilho::after, absoluto): o cartão precisa ser a referência. */
.vg2-at .kpi__gatilho::after { border-radius: 14px; }
.vg2-at small { position: relative; z-index: 1; }

/* Espaçamento da Visão geral (v2.21.2): ar entre o filtro, os atalhos, a faixa de atenção e os cartões de número. */
.vg2-atalhos { margin: var(--sp-5) 0 var(--sp-4); }
.vg2-atencao { margin-bottom: var(--sp-6, 32px); }
.vg2-atencao + .graf-dica, .vg2-atencao + .kpis__titulo { margin-top: 0; }
.vg2-grade { margin-top: var(--sp-5); }

/* BARRA DE PROGRESSO DA LEITURA AUTOMÁTICA (v2.22.0): dentro do cartão azul do DP. */
.ia-prog { margin-top: 12px; }
.ia-prog__trilho { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.ia-prog__trilho > i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--lima); transition: width .4s ease; }
.ia-prog__texto { margin: 8px 0 0; font-size: 13px; color: var(--sobre-cor); }
.ia-prog__lista { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12.5px; color: var(--sobre-azul-txt, var(--sobre-cor)); display: flex; flex-direction: column; gap: 4px; }
.ia-prog__lista li::before { content: '✓ '; color: var(--lima); font-weight: 800; }
.adm2-auto .btn:disabled { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .ia-prog__trilho > i { transition: none; } }

/* =====================================================================
   ENTRAR no modelo "Auth Switch" (21st.dev), v2.25.0
   Cartão grande e mais arredondado; o painel da marca com a borda curva (em vez da divisão reta), com a
   chamada "Criar conta" dentro dele; campos e botão em pílula, com ícone de e-mail e de cadeado. A marca
   continua a do portal (azul, Oswald/Mulish). Sem login social: o portal não tem.
   ===================================================================== */
.entrar-tela { border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 54, 91, .16); }
@media (min-width: 880px) {
  .entrar-tela { grid-template-columns: 1.08fr .92fr; min-height: 470px; }
}
.entrar-marca {
  background: linear-gradient(150deg, var(--azul) 0%, var(--azul-escuro) 100%);
}
@media (min-width: 880px) {
  .entrar-marca { border-radius: 0 0 46% 0 / 0 0 100% 0; padding-right: calc(var(--sp-6) + 6%); }
}
.entrar-marca__cta { margin-top: var(--sp-5); }
.entrar-marca__cta p { margin: 0 0 10px; font-size: 14px; color: var(--sobre-azul-txt); }
.entrar-marca__botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 28px;
  border: 2px solid rgba(255, 255, 255, .85); border-radius: 999px;
  color: var(--sobre-cor); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.entrar-marca__botao:hover { background: #fff; color: var(--azul-escuro); border-color: #fff; text-decoration: none; }
.entrar-marca__botao:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* O painel (com a chamada) aparece em todas as larguras, então o link do rodapé não repete. */
.entrar-rodape--conta { display: none; }

.entrar-caixa .entrada { border-radius: 999px; background-color: var(--bg); padding-left: 18px; }
.entrar-caixa input[name="email"], .entrar-caixa input[name="senha"], .entrar-caixa input[name="nome"],
.entrar-caixa input[name="cpf"], .entrar-caixa input[name="telefone"] { padding-left: 44px; }
.entrar-caixa .entrada:hover { border-color: var(--azul-200); }
.entrar-caixa input[name="email"], .entrar-caixa input[name="senha"], .entrar-caixa input[name="nome"],
.entrar-caixa input[name="cpf"], .entrar-caixa input[name="telefone"] {
  background-repeat: no-repeat; background-position: 16px 50%; background-size: 18px 18px;
}
.entrar-caixa input[name="email"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
.entrar-caixa input[name="senha"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}
.entrar-caixa .btn--bloco { border-radius: 999px; }
.entrar-caixa .entrada:focus { background-color: var(--surface); border-color: var(--azul); }
.entrar-caixa input[name="nome"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}
.entrar-caixa input[name="cpf"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M6 16a3 3 0 0 1 6 0M14 10h4M14 14h4'/%3E%3C/svg%3E");
}
.entrar-caixa input[name="telefone"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2' width='10' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
}

/* --- Criar conta: o painel fica na DIREITA, com a curva espelhada (v2.26.0) --- */
.entrar-tela--direita .entrar-marca__grafismo { right: auto; left: -55px; }
@media (min-width: 880px) {
  .entrar-tela--direita { grid-template-columns: .92fr 1.08fr; }
  .entrar-tela--direita .entrar-marca {
    order: 2; border-radius: 0 0 0 46% / 0 0 0 100%;
    padding-right: var(--sp-6); padding-left: calc(var(--sp-6) + 6%);
    background: linear-gradient(210deg, var(--azul) 0%, var(--azul-escuro) 100%);
  }
  .entrar-tela--direita .entrar-marca__texto { max-width: 32ch; }
}
.entrar-tela--direita .entrar-caixa { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }

/* --- CELULAR (v2.26.0): o painel aparece também, empilhado com o formulário. No Entrar fica EMBAIXO
   (o campo de e-mail continua no alto da tela), com a curva na borda de cima; no Criar conta fica EM CIMA,
   compacto, com a curva na borda de baixo. A troca animada desliza o painel na vertical. --- */
@media (max-width: 879px) {
  .entrar-marca {
    display: flex; order: 2; align-items: center; text-align: center;
    padding: calc(var(--sp-5) + 26px) var(--sp-5) var(--sp-6);
    border-radius: 50% 50% 0 0 / 44px 44px 0 0;
  }
  .entrar-marca .entrar-marca__grafismo { display: none; }
  .entrar-marca__titulo { font-size: 24px; margin-bottom: 8px; }
  .entrar-marca__texto { font-size: 14px; max-width: 34ch; }
  .entrar-marca__cta { margin-top: var(--sp-4); }
  /* Painel sem chamada (porta interna): só enfeite, fica escondido no celular. */
  .entrar-marca:not(:has(.entrar-marca__cta)) { display: none; }
  .entrar-tela--direita .entrar-marca {
    order: 0; border-radius: 0 0 50% 50% / 0 0 44px 44px;
    padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + 28px);
  }
  .entrar-tela--direita .entrar-marca__texto { display: none; }
  .entrar-tela--direita .entrar-marca__titulo { font-size: 22px; }
  .entrar-tela--direita .entrar-marca__cta { margin-top: 12px; }
}

/* Quem chegou pela troca animada: o cartão já está no lugar (a animação foi na tela anterior), então ele
   não sobe de novo; só o texto do painel aparece com um fade. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes entrar-fade { from { opacity: 0; } to { opacity: 1; } }
  .entrar-tela--chegou { animation: none; }
  .entrar-tela--chegou .entrar-marca > *:not(.entrar-marca__grafismo) { animation: entrar-fade .5s ease both; }
}

/* =====================================================================
   BOTÃO INTERATIVO (modelo "Interactive Hover Button", Magic UI / 21st.dev), v2.27.0
   Em repouso: pílula clara com um ponto azul ao lado do rótulo. No hover (e no foco por teclado, e enquanto
   o envio carrega) o ponto cresce até encher o botão, o rótulo sai deslizando para a direita e entra a
   camada com o rótulo em branco e uma seta. Usado nos botões das telas Entrar e Criar conta. O verde de
   "carregando" continua como barra na base. Marcação: .btn__texto (ponto + rótulo) e .btn__hover (aria-hidden).
   ===================================================================== */
.btn--interativo, .entrar-marca__botao { position: relative; overflow: hidden; }
.btn__ponto {
  flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--azul); transition: transform .35s ease;
}
.btn__rotulo { display: inline-block; transition: transform .3s ease, opacity .3s ease; }
.btn__hover {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; transform: translateX(48px); transition: transform .3s ease, opacity .3s ease; pointer-events: none;
}
.btn__texto { position: relative; z-index: 1; }

/* repouso: pílula clara */
.btn.btn--interativo {
  background: var(--surface); color: var(--azul-escuro); border: 2px solid var(--azul); border-radius: 999px;
}
.btn.btn--interativo .btn__hover { color: #fff; }

/* ativo: hover, foco por teclado, toque e envio em andamento */
@media (hover: hover) {
  .btn.btn--interativo:hover, .entrar-marca__botao:hover { text-decoration: none; }
  .btn.btn--interativo:hover { background: var(--surface); color: var(--azul-escuro); }
  .btn--interativo:hover .btn__ponto, .entrar-marca__botao:hover .btn__ponto { transform: scale(100); }
  .btn--interativo:hover .btn__rotulo, .entrar-marca__botao:hover .btn__rotulo { transform: translateX(48px); opacity: 0; }
  .btn--interativo:hover .btn__hover, .entrar-marca__botao:hover .btn__hover { opacity: 1; transform: translateX(0); }
}
.btn--interativo:focus-visible .btn__ponto, .entrar-marca__botao:focus-visible .btn__ponto,
.btn--interativo:active .btn__ponto, .btn--interativo.esta-carregando .btn__ponto { transform: scale(100); }
.btn--interativo:focus-visible .btn__rotulo, .entrar-marca__botao:focus-visible .btn__rotulo,
.btn--interativo:active .btn__rotulo, .btn--interativo.esta-carregando .btn__rotulo { transform: translateX(48px); opacity: 0; }
.btn--interativo:focus-visible .btn__hover, .entrar-marca__botao:focus-visible .btn__hover,
.btn--interativo:active .btn__hover, .btn--interativo.esta-carregando .btn__hover { opacity: 1; transform: translateX(0); }

/* botões do painel azul: contorno branco, ponto branco, rótulo azul-escuro quando enche */
.entrar-marca__botao:hover { background: transparent; color: var(--sobre-cor); border-color: rgba(255, 255, 255, .85); }
.entrar-marca__botao .btn__ponto { background: #fff; }
.entrar-marca__botao .btn__hover { color: var(--azul-escuro); }
.entrar-marca__botao:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .btn__ponto, .btn__rotulo, .btn__hover { transition: none; }
}

/* =====================================================================
   BANCO DE TALENTOS EM LINHAS E FICHA DO CANDIDATO (v2.28.0)
   Lista: uma pessoa por linha, na largura toda, com colunas fixas (quem é, o que procura, condições, situação,
   ações). A largura que vale é a do CARTÃO (container query), e não a da janela: o menu lateral aberto ou
   recolhido muda o espaço e a lista se acomoda sozinha. Ficha: foto/iniciais, menu anterior-atual-próximo,
   fatos numa linha, etiquetas e ações separadas, cartão do que a pessoa declarou no banco e linha do tempo.
   Só tokens do tema (fio, linha-hover, realce-suave, tinta, muted); nenhuma cor nova.
   ===================================================================== */

/* --- Lista do Banco de Talentos --- */
.bt-cartao { container-type: inline-size; container-name: bt; }
.bt-cabeca { display: none; }
.bt-lista { list-style: none; margin: 0; padding: 0; }
.bt-linha {
  display: grid; gap: 12px 20px; grid-template-columns: minmax(0, 1fr);
  margin: 0 -12px; padding: 16px 12px; border-radius: 12px;
  background-image: linear-gradient(var(--fio), var(--fio));
  background-repeat: no-repeat; background-position: 50% 0; background-size: calc(100% - 24px) 1px;
  transition: background-color .15s ease;
}
.bt-linha:first-child { background-image: none; }
.bt-linha:hover, .bt-linha:focus-within { background-color: var(--linha-hover); }

.bt-pessoa { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.bt-avatar { width: 44px; height: 44px; font-size: 15px; }
.bt-pessoa__txt { min-width: 0; }
.bt-pessoa__nome { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.bt-pessoa__nome a { color: var(--tinta); text-decoration: none; }
.bt-pessoa__nome a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bt-pessoa__sub { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; font-size: 13px; color: var(--muted-soft); }
.bt-pessoa__sub > span { overflow-wrap: anywhere; }
.bt-sobre {
  margin: 6px 0 0; max-width: 62ch; font-size: 13.5px; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bt-col { min-width: 0; font-size: 13.5px; }
.bt-col::before { content: attr(data-rotulo); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.bt-linha__local { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.bt-linha__local svg { flex: none; color: var(--muted-soft); }
.bt-linha__valor { display: block; font-size: 15px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.bt-linha__cond { margin-top: 2px; color: var(--muted); }
.bt-linha__quando { margin-top: 6px; font-size: 12.5px; color: var(--muted-soft); }
.bt-vazio { color: var(--muted-soft); }
.bt-acoes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.bt-acoes .btn { justify-content: center; white-space: nowrap; }

@container bt (min-width: 620px) {
  .bt-linha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bt-pessoa { grid-column: 1 / 3; grid-row: 1; }
  .bt-acoes { grid-column: 3; grid-row: 1; justify-content: flex-end; }
  .bt-col { grid-row: 2; }
}
@container bt (min-width: 920px) {
  .bt-cabeca, .bt-linha { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.7fr) minmax(0, 1.5fr) minmax(0, 1.6fr) 120px; }
  .bt-cabeca {
    display: grid; gap: 20px; margin: 0 -12px; padding: 0 12px 8px;
    border-bottom: 1px solid var(--fio); font-size: 12.5px; font-weight: 700; color: var(--muted);
  }
  .bt-linha { align-items: start; }
  .bt-pessoa, .bt-acoes, .bt-col { grid-column: auto; grid-row: auto; }
  .bt-col::before { display: none; }
  .bt-acoes { flex-direction: column; align-items: stretch; }
}

/* --- Panorama recolhível (por área e por cidade) --- */
.bt-panorama { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .bt-panorama { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bt-barra {
  display: block; min-height: var(--alvo); margin: 6px -8px 0; padding: 8px;
  border-radius: 10px; color: inherit; text-decoration: none; transition: background-color .15s ease;
}
.bt-barra:hover { background-color: var(--linha-hover); }
.bt-barra:focus-visible { outline: 2px solid var(--anel); outline-offset: 1px; }
.bt-barra__txt { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 13.5px; }

/* --- Ficha do candidato: cabeçalho --- */
/* (v2.47.0) M18 do QA: os 72/56px valem só na ficha do CANDIDATO (.ficha-retrato--cand, posto em
   candidato-ficha.php); a ficha do colaborador volta aos 64/52px da regra de v1.62.0. */
.ficha-retrato.ficha-retrato--cand { width: 72px; height: 72px; }
@media (max-width: 479.98px) { .ficha-retrato.ficha-retrato--cand { width: 56px; height: 56px; } }
.ficha-retrato--iniciais {
  display: grid; place-items: center; font-size: 26px; font-weight: 700;
  color: var(--avatar-txt); background: var(--avatar-bg);
}
@media (max-width: 479.98px) { .ficha-retrato--iniciais { font-size: 21px; } }
.ficha-fatos { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: var(--sp-4) 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.ficha-fatos li { display: inline-flex; align-items: center; gap: 6px; }
.ficha-fatos svg { flex: none; color: var(--muted-soft); }
/* (v2.47.0) B22 do QA: a linha de ações só na ficha do CANDIDATO (.ficha-acoes--cand) e com duas classes, para
   vencer o .ficha-acoes de tema.css (margin-top 0, carregado depois), que colava as ações nas etiquetas. As outras
   .ficha-acoes do portal ficam com a regra de tema.css. */
.ficha-etiquetas, .ficha-acoes.ficha-acoes--cand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--sp-3); }

/* --- Menu anterior / atual / próximo (estilo carrossel) --- */
.ficha-nav {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center; gap: 8px; max-width: 780px; margin-top: var(--sp-4); padding: 6px;
  background: var(--surface); border: 1px solid var(--fio); border-radius: 999px; box-shadow: var(--sombra-cartao);
}
.ficha-nav__lado {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: var(--alvo); padding: 0 14px;
  border-radius: 999px; font-size: 14px; color: var(--muted); text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.ficha-nav__lado svg { flex: none; }
.ficha-nav__lado--prox { justify-content: flex-end; text-align: right; }
a.ficha-nav__lado:hover { background-color: var(--realce-suave); color: var(--azul-700); }
a.ficha-nav__lado:focus-visible { outline: 2px solid var(--anel); outline-offset: 2px; }
.ficha-nav__lado--fim { opacity: .5; }
.ficha-nav__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-nav__atual { min-width: 0; padding: 4px 10px; border-radius: 999px; background: var(--realce-suave); text-align: center; }
.ficha-nav__atual-nome { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--tinta); }
.ficha-nav__posicao { display: block; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 599.98px) {
  .ficha-nav { gap: 4px; padding: 4px; }
  .ficha-nav__lado { gap: 4px; padding: 0 8px; font-size: 13px; }
  .ficha-nav__atual { padding: 4px 6px; }
  .ficha-nav__atual-nome { font-size: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes ficha-vem-direita { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  @keyframes ficha-vem-esquerda { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
  .ficha-nav--vem-direita .ficha-nav__atual, .ficha-nav--vem-direita .ficha-nav__lado { animation: ficha-vem-direita .38s cubic-bezier(.22, 1, .36, 1) both; }
  .ficha-nav--vem-esquerda .ficha-nav__atual, .ficha-nav--vem-esquerda .ficha-nav__lado { animation: ficha-vem-esquerda .38s cubic-bezier(.22, 1, .36, 1) both; }
  .ficha-nav--vem-direita .ficha-nav__lado--prox, .ficha-nav--vem-esquerda .ficha-nav__lado--ant { animation-delay: .06s; }
}

/* --- Ficha: experiências em linha do tempo --- */
.ficha-linha-tempo { margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.ficha-linha-tempo li { position: relative; margin-left: 5px; padding: 0 0 var(--sp-4) 20px; border-left: 2px solid var(--fio); }
.ficha-linha-tempo li:last-child { padding-bottom: 0; border-left-color: transparent; }
.ficha-linha-tempo li::before {
  content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; box-sizing: border-box;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--borda-botao);
}
.ficha-linha-tempo__atual::before { background: var(--primaria); border-color: var(--primaria); }
.ficha-linha-tempo__quando { margin-top: 2px; font-size: 13px; color: var(--muted-soft); }
.ficha-linha-tempo__desc { margin: 6px 0 0; max-width: 70ch; font-size: 14px; color: var(--muted); }

/* =====================================================================
   FILTRAR POR RAIO + BLOCO "SEM CIDADE INFORMADA" (v2.29.0, Banco de Talentos)
   O controle fica no topo do cartão de filtros: a loja no centro do raio e o raio em km (0 a 100, de 5 em 5).
   O bloco do fim da lista usa o amarelo de alerta do tema (quem não tem cidade não está "longe", está sem dado).
   ===================================================================== */
/* (v2.29.1) EM DESTAQUE: painel marinho (--tinta) com anéis de raio ao fundo, lima no controle (o acento do tema, que só
   aparece sobre marinho) e texto claro. É a primeira coisa do cartão de filtros. */
.raio {
  position: relative; min-width: 0; margin: 0 0 var(--sp-5); padding: var(--sp-5); overflow: hidden;
  border: 0; border-radius: 16px; color: var(--sobre-azul-txt);
  background:
    repeating-radial-gradient(circle at 96% -12%, rgba(255, 255, 255, .07) 0 1px, transparent 1px 46px),
    linear-gradient(135deg, var(--tinta) 0%, var(--azul-700) 100%);
  box-shadow: 0 10px 26px rgba(11, 42, 71, .24);
}
.raio__titulo {
  float: left; width: 100%; margin: 0 0 6px; padding: 0;
  display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; color: var(--sobre-cor);
}
.raio__titulo + * { clear: both; }
.raio__titulo svg { flex: none; box-sizing: content-box; padding: 7px; border-radius: 50%; color: var(--tinta); background: var(--lima); }
.raio__sub { max-width: 74ch; margin: 0 0 var(--sp-4); font-size: 14px; color: var(--sobre-azul-txt); }
.raio__sub strong { color: var(--sobre-cor); }
.raio__campos { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: end; gap: var(--sp-3) var(--sp-6, 32px); }
@media (max-width: 719.98px) { .raio__campos { grid-template-columns: minmax(0, 1fr); } }
.raio__campos .campo { margin: 0; min-width: 0; }
.raio label { color: var(--sobre-cor); }
.raio__valor { margin-left: 6px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lima); }
.raio input[type="range"] {
  display: block; width: 100%; min-height: var(--alvo); margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  accent-color: var(--lima); cursor: pointer;
}
.raio__escala { display: flex; justify-content: space-between; margin-top: -4px; font-size: 12px; color: var(--sobre-azul-txt); font-variant-numeric: tabular-nums; }
.raio__resumo { margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px solid rgba(255, 255, 255, .16); font-size: 13.5px; color: var(--sobre-azul-txt); overflow-wrap: anywhere; }
.raio :focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }
.raio--sem-loja .raio__km { opacity: .6; }

.bt-raio-nota { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; margin-left: var(--sp-3); font-size: 13px; font-weight: 600; color: var(--muted); }
.bt-raio-nota svg { flex: none; color: var(--muted-soft); }
.bt-raio-aviso { margin: 0 0 var(--sp-3); }

.cartao--sem-cidade {
  margin-top: var(--sp-5); border-top: 3px solid var(--laranja-escuro);
  background: linear-gradient(180deg, var(--alerta-suave) 0%, var(--surface) 150px);
}
.cartao--sem-cidade .cartao__titulo { display: flex; align-items: center; gap: 8px; }
.cartao--sem-cidade .cartao__titulo svg { flex: none; color: var(--laranja-escuro); }
.bt-sem-cidade__texto { max-width: 76ch; margin: 0 0 var(--sp-3); }

/* =====================================================================
   FOTO NA LISTA DE CANDIDATOS (v2.30.0): a mesma foto (ou iniciais) do Banco de Talentos, ao lado do nome.
   O link do nome mantém o alvo de toque da tabela (os seletores `td.principal > a` não alcançam o link dentro do wrapper).
   ===================================================================== */
.tab-pessoa { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tab-pessoa__foto { width: 40px; height: 40px; font-size: 14px; }
.tab-pessoa__txt { min-width: 0; }
.tabela td.principal .tab-pessoa__txt > a { display: inline-block; padding: 8px 0; }


/* ---------------------------------------------------------------------------
   (v2.32.0) Avaliação de experiência com vários gestores: um cartão por gestor
   (quem, quando, recomendação e nota num relance; parecer em citação; respostas
   ao formulário do RH em pergunta/resposta alinhadas à esquerda). Antes era uma
   tabela de 5 colunas que estourava a largura, e as respostas herdavam o
   `.lista-simples li` (flex com espaço entre os itens), o que jogava a resposta
   para o meio da linha, longe da pergunta.
   --------------------------------------------------------------------------- */
.gestor-lista { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.gestor-av {
  min-width: 0;
  border: 1px solid var(--border); border-radius: var(--raio-card);
  background: var(--surface); padding: var(--sp-4) var(--sp-5);
}
.gestor-av__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.gestor-av__nome { font-size: 16px; overflow-wrap: anywhere; }
.gestor-av__quando { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gestor-av__fatos { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin: var(--sp-3) 0 0; }
.gestor-av__fatos dt { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted); margin: 0 0 2px; }
.gestor-av__fatos dd { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.gestor-av__parecer {
  margin: var(--sp-3) 0 0; padding: 2px 0 2px var(--sp-3);
  border-left: 3px solid var(--border); color: inherit;
  overflow-wrap: anywhere; text-wrap: pretty;
}
.gestor-av__respostas { margin-top: var(--sp-3); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.gestor-av__respostas > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 14px; padding: 4px 0; border-radius: 6px;
}
.gestor-av__respostas > summary::-webkit-details-marker { display: none; }
.gestor-av__respostas > summary svg { flex: none; color: var(--muted); transition: transform .18s; }
.gestor-av__respostas[open] > summary svg { transform: rotate(90deg); }
.gestor-av__respostas > summary:focus-visible { outline: 3px solid var(--anel); outline-offset: 2px; }
.resp-lista { margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-3); }
.resp-lista__item { min-width: 0; }
.resp-lista dt { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); overflow-wrap: anywhere; text-wrap: pretty; }
.resp-lista dd {
  margin: 4px 0 0; padding-left: var(--sp-3); border-left: 3px solid var(--azul-100);
  font-size: 15px; overflow-wrap: anywhere; text-wrap: pretty;
}
.cartao--passo { margin-bottom: var(--sp-3); }
@media (max-width: 640px) {
  .gestor-av { padding: var(--sp-4); }
  .gestor-av__quando { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .gestor-av__respostas > summary svg { transition: none; } }

/* ---------------------------------------------------------------------------
   (v2.33.0) Controle de Fardamento: tipo de movimentacao em botoes de opcao
   lado a lado, amostra da cor ao lado do nome, linhas do pedido numeradas,
   saldo abaixo do minimo marcado e cadastros em linha (nome + campos + Salvar).
   --------------------------------------------------------------------------- */
.fard-tipos { display: flex; flex-wrap: wrap; gap: var(--sp-2); border: 0; margin: 0 0 var(--sp-3); padding: 0; min-width: 0; }
.fard-tipo {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px;
  background: var(--surface); touch-action: manipulation;
}
.fard-tipo:has(input:checked) { border-color: var(--azul); background: var(--azul-100); color: var(--azul-600); }
.fard-tipo:focus-within { outline: 3px solid var(--azul); outline-offset: 2px; }
/* (v2.47.0) B25 do QA: o anel só no foco de teclado. O :focus-within acima acendia também no clique; esta regra o
   apaga quando o foco não é de teclado, e o :has() com :focus-visible acende o anel com o token. */
.fard-tipo:focus-within:not(:has(input:focus-visible)) { outline: none; }
.fard-tipo:has(input:focus-visible) { outline: 3px solid var(--anel); outline-offset: 2px; }
.fard-grade { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fard-grade > * { min-width: 0; }
.fard-cor { display: inline-flex; align-items: center; gap: 6px; }
.fard-amostra { width: 14px; height: 14px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.fard-tabela td.num, .fard-tabela th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* (v2.47.0) T2: era 861px; a tabela só volta a ser tabela em 1024px */ @media (min-width: 1024px) { .fard-tabela .num { text-align: right; } }
.fard-linha--repor td { background: var(--verm-100); }
.fard-mais { color: var(--verde-escuro); }
.fard-menos { color: var(--verm-escuro); }
.fard-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.fard-filtro-check { align-self: end; }
.fard-contagem { margin-left: 6px; }
.fard-novo > summary, .fard-novo__cab {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; min-height: 44px;
}
.fard-novo__cab::-webkit-details-marker { display: none; }
.fard-novo__cab:focus-visible { outline: 3px solid var(--anel); outline-offset: 2px; border-radius: 6px; }
details[open] > .fard-novo__cab { margin-bottom: var(--sp-3); }
.fard-cidade { max-width: 320px; }
.fard-linhas { list-style: none; counter-reset: fard; margin: var(--sp-3) 0; padding: 0; display: grid; gap: var(--sp-3); }
.fard-linha {
  counter-increment: fard; position: relative; padding: var(--sp-3) var(--sp-3) var(--sp-3) 44px;
  border: 1px solid var(--border); border-radius: var(--raio-card);
}
.fard-linha::before {
  content: counter(fard); position: absolute; left: 12px; top: 14px;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--azul-100); color: var(--azul-600); font-size: 12px; font-weight: 700;
}
.fard-linha .campo { margin: 0; }
.fard-filtro-sit select { min-height: 40px; }
/* (v2.47.0) A2 do QA: min(100%, 300px), que cabe nos 288px úteis do celular de 320px. */
.fard-cadastros { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.fard-cad-lista { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: 8px; }
.fard-cad-lista > li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.fard-cad-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; }
.fard-cad-form .entrada { flex: 1 1 120px; min-width: 0; }
.fard-cad-form .fard-tam { flex: 2 1 160px; }
.fard-cad-form .fard-min { flex: 0 0 84px; }
.fard-hex { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.fard-inativo { opacity: .6; }
.fard-quem { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: 8px; }
.fard-quem > li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fard-quem > li form { margin-left: auto; }
.fard-ent { width: 96px; text-align: right; }
.fard-cancelar { margin: var(--sp-3) 0; }

/* (v2.33.1) "Ver como" do Controle de Fardamento (só o super admin): três visões em botões lado a lado. */
.fard-vercomo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 var(--sp-3); }
.fard-vercomo form { margin: 0; }
.fard-vercomo__rot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 4px; }
.fard-vercomo__op {
  min-height: 40px; padding: 6px 14px; border-radius: 999px; cursor: pointer; touch-action: manipulation;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600;
  transition: background-color .15s, border-color .15s;
}
.fard-vercomo__op:hover { border-color: var(--azul-200); background: var(--realce); }
.fard-vercomo__op.ativo { border-color: var(--azul); background: var(--azul-100); color: var(--azul-600); }
.fard-vercomo__op:focus-visible { outline: 3px solid var(--anel); outline-offset: 2px; }
.fard-vercomo__aviso { margin-bottom: var(--sp-4); }
@media (prefers-reduced-motion: reduce) { .fard-vercomo__op { transition: none; } }

/* ---------------------------------------------------------------------------
   (v2.34.0) ACOES DE LINHA COMPACTAS: a acao principal a vista e o resto num
   menu "Mais" (<details class="acoes-mais">). Sem JavaScript o menu abre na
   propria celula; com ele (painel.js) vira uma janela flutuante presa ao botao,
   em position: fixed, porque a .tabela-envolve corta o que passa da borda.
   --------------------------------------------------------------------------- */
.acoes-linha { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
/* No computador as ações EMPILHAM numa coluna estreita (a do maior botão): lado a lado elas passavam da largura
   da tabela a 1280 px e saíam cortadas (QA de 29/10). */
/* (v2.47.0) T2: era 861px; a tabela só volta a ser tabela em 1024px */ @media (min-width: 1024px) {
  .col-acoes { width: 1%; }
  .col-acoes .acoes-linha { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .col-acoes .acoes-linha > *, .col-acoes .acoes-linha > form .btn, .col-acoes .acoes-linha .acoes-mais > summary { width: 100%; justify-content: center; white-space: nowrap; }
}
.acoes-mais { position: relative; }
.acoes-mais > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.acoes-mais > summary::-webkit-details-marker { display: none; }
.acoes-mais > summary svg { transition: transform .15s; }
.acoes-mais[open] > summary svg { transform: rotate(180deg); }
.acoes-mais > summary:focus-visible { outline: 3px solid var(--anel); outline-offset: 2px; }
.acoes-mais__menu {
  display: grid; gap: 8px; margin-top: 6px; padding: 12px; min-width: 240px; max-width: min(320px, calc(100vw - 16px));
  white-space: normal; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio-card);
  box-shadow: 0 12px 32px rgba(2, 32, 71, .16);
}
.acoes-mais__menu.flutua { position: fixed; z-index: 60; margin: 0; }
.acoes-mais__menu form { margin: 0; }
.acoes-mais__menu .btn { width: 100%; justify-content: center; }
.acoes-mais__data { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.acoes-mais__data label { font-size: 13px; font-weight: 700; color: var(--muted); }
.acoes-mais__data-campos { display: flex; gap: 6px; flex-wrap: wrap; }
.acoes-mais__data-campos .entrada { flex: 1 1 140px; min-width: 0; }
.acoes-mais__data-campos .btn { width: auto; flex: none; }
/* (v2.47.0) T2: era 860px, junto com o cartão da tabela */ @media (max-width: 1023.98px) {
  .acoes-linha { justify-content: flex-start; }
  .col-acoes { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .acoes-mais > summary svg { transition: none; } }

/* (v2.34.0) Texto de abertura longo: duas linhas e o botão "Saiba mais" (painel.js). */
.painel__sub--recolhe:not(.painel__sub--aberto) {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.painel__sub-mais {
  display: inline-flex; align-items: center; min-height: 32px; margin: 2px 0 0; padding: 0;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--primaria); text-decoration: underline; text-underline-offset: 3px; touch-action: manipulation;
}
.painel__sub-mais:hover { color: var(--azul-600); }
.painel__sub-mais:focus-visible { outline: 3px solid var(--anel); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 640px) { .painel__sub-mais { min-height: 44px; } }

/* (v2.34.0) Administradores: a foto (ou as iniciais) ao lado do nome. */
.adm-linha__pessoa { display: flex; align-items: flex-start; gap: 12px; }
.adm-linha__pessoa > .avatar { margin-top: 2px; }
.adm-linha__quem { min-width: 0; flex: 1 1 auto; }

/* (v2.34.0) Candidatos da vaga: a linha de detalhe (cidade · data · origem), as etiquetas de triagem e prova, o
   contato e o WhatsApp. Eram estilos escritos à mão em cada linha. */
.cand-meta { font-size: 12px; color: var(--muted-soft); }
.cand-tag { margin-top: 4px; }
.cand-contato { font-size: 13.5px; overflow-wrap: anywhere; }
.cand-whats { margin-top: 6px; }

/* (v2.34.0) Títulos do painel quebram em linhas equilibradas (auditoria visual de 23/10). */
.painel__cabecalho h1 { text-wrap: balance; }

/* (v2.34.0) Etiqueta longa na coluna Avaliador ("2 gestores já enviaram · falta a decisão do RH") quebra a linha em
   vez de alargar a coluna e empurrar a de ações para fora da tabela (QA de 29/10). */
.tabela td[data-rotulo="Avaliador"] .tag { white-space: normal; }

/* (v2.34.0) QA de 29/10, tabelas que passavam da largura a 1280: o e-mail (coluna Acesso de Colaboradores e
   Admissão, Contato do candidato na vaga) é uma palavra só e segurava a coluna larga; no computador ele pode
   quebrar em qualquer ponto, e o Contato deixa o piso de 190 px. */
/* (v2.47.0) T2: era 861px; a tabela só volta a ser tabela em 1024px */ @media (min-width: 1024px) {
  .tabela td[data-rotulo="Acesso"], .tabela td[data-rotulo="Acesso"] .dica,
  .tabela td[data-rotulo="Onde"] .dica, .tabela td[data-rotulo="Contato"], .tabela td[data-rotulo="Contato"] *,
  .cand-contato { overflow-wrap: anywhere; }
  .tabela td[data-rotulo="Contato"] { min-width: 150px; }
}

/* (v2.34.0) Admissão a 1280 (QA de 29/10): as etiquetas de Documentos e o "último acesso" quebram a linha em vez de
   alargar a coluna. */
/* (v2.47.0) T2: era 861px; a tabela só volta a ser tabela em 1024px */ @media (min-width: 1024px) {
  .tabela td[data-rotulo="Documentos"] .tag, .tabela td[data-rotulo="Acesso"] .tag,
  .tabela td[data-rotulo="Documentos"] .dica, .tabela td[data-rotulo="Acesso"] .dica,
  .tabela td[data-rotulo="Documentos"] .adm-envio,
  .tabela td[data-rotulo="Saída"] .dica, .tabela td[data-rotulo="Forma"] .dica { white-space: normal; }
}


/* ---------------------------------------------------------------------
   (v2.37.0) Descrição da vaga formatada: barra do formulário e cores no site
   --------------------------------------------------------------------- */
.fmt-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 6px; }
.fmt-barra[hidden] { display: none; }
.fmt-btn {
  min-width: 44px; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  /* (v2.47.0) B23 do QA: --borda/--fundo/--texto não existem; os tokens reais são --border/--surface/--text. */
  border: 1px solid var(--border, #d6dbe3); border-radius: 8px; background: var(--surface, #fff); color: var(--text, #1d2433);
  font: inherit; font-size: 15px; cursor: pointer; touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease;
}
.fmt-btn:hover { background: var(--bg, #f3f5f8); border-color: #9aa6b8; }
.fmt-btn:focus-visible { outline: 3px solid var(--anel); outline-offset: 2px; } /* (v2.47.0) token do anel */
.fmt-btn--largo { font-size: 14px; }
.fmt-sep { width: 1px; height: 28px; background: var(--border, #d6dbe3); margin: 0 2px; } /* (v2.47.0) B23 */
.fmt-cor { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.fmt-cor--vermelho { background: #EC3237; }
.fmt-cor--azul { background: #006CB5; }
.texto-formatado p { margin: 0 0 10px; }
.texto-formatado p:last-child, .texto-formatado ul:last-child { margin-bottom: 0; }
.texto-formatado ul.lista-marcada { margin: 0 0 12px; }
.txt-vermelho { color: #C8202A; }
.txt-azul { color: #006CB5; }
@media (prefers-reduced-motion: reduce) { .fmt-btn { transition: none; } }


/* (v2.38.0) Etiqueta "Colaborador" na lista de candidatos da vaga: quem já trabalha na empresa, em destaque
   (azul da marca, texto branco, 6,1:1). */
.tag--colaborador {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle;
  background: #006CB5; color: #fff; font-weight: 700; letter-spacing: .02em;
}
.tag--colaborador svg { width: 13px; height: 13px; }


/* ---------------------------------------------------------------------
   (v2.39.0) Minha área → Vagas internas no visual da página da vaga do site
   --------------------------------------------------------------------- */
.vi-contagem { margin: 0 0 12px; font-weight: 600; color: var(--text); }
.vi-lista { display: grid; gap: 16px; }
.vi-vaga { padding: 22px 24px; display: grid; gap: 14px; border-top: 4px solid #006CB5; }
.vi-vaga__topo { display: grid; gap: 8px; }
.vi-vaga__titulo { margin: 0; font-family: var(--fonte-titulo); font-size: 1.45rem; font-weight: 600; line-height: 1.2; color: var(--tinta, #0f2742); text-wrap: balance; overflow-wrap: anywhere; }
.vi-vaga__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vi-vaga__tags .tag { display: inline-flex; align-items: center; gap: 4px; }
.vi-vaga__tags .tag svg { width: 13px; height: 13px; }
.tag--mista { background: #E6F0F9; color: #00528A; }
.vi-vaga__cargo { margin: 0; font-size: 14px; color: var(--muted); }
.vi-vaga__detalhes { border-top: 1px solid var(--border); padding-top: 10px; }
.vi-vaga__abrir {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none;
  font-weight: 600; color: #006CB5; touch-action: manipulation;
}
.vi-vaga__abrir::-webkit-details-marker { display: none; }
.vi-vaga__abrir svg { transition: transform .2s ease; }
.vi-vaga__detalhes[open] .vi-vaga__abrir svg { transform: rotate(180deg); }
.vi-vaga__detalhes[open] .vi-vaga__abrir span::after { content: ''; }
.vi-vaga__abrir:focus-visible { outline: 3px solid var(--anel); outline-offset: 2px; border-radius: 6px; }
.vi-vaga__corpo { display: grid; gap: 18px; padding-top: 6px; }
.vi-vaga__corpo h3 { margin: 0 0 8px; font-family: var(--fonte-titulo); font-size: 1.1rem; font-weight: 600; color: var(--tinta, #0f2742); }
.vi-vaga__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding-top: 14px; }
.vi-vaga__prazo { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.vi-vaga__feito { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vi-vaga__feito .tag { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 600px) {
  .vi-vaga { padding: 18px 16px; }
  .vi-vaga__rodape form, .vi-vaga__rodape .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vi-vaga__abrir svg { transition: none; } }


/* ---------------------------------------------------------------------
   (v2.41.0) Pop-up "Ver respostas" do Perfil Comportamental
   --------------------------------------------------------------------- */
.perfil-r__botao {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; min-height: 32px; padding: 2px 4px;
  font-size: 12.5px; font-weight: 600; color: #006CB5; text-decoration: none; white-space: nowrap; touch-action: manipulation;
}
.perfil-r__botao:hover { text-decoration: underline; }
.perfil-r__botao:focus-visible { outline: 3px solid var(--anel); outline-offset: 2px; border-radius: 6px; }
.dialogo--perfil { max-width: 620px; }
.dialogo--perfil .dialogo__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--sp-4) var(--sp-5) 0; }
.dialogo--perfil .dialogo__titulo { margin: 0; }
.dialogo--perfil .dialogo__fechar { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 8px; }
.dialogo--perfil .dialogo__fechar:hover { background: var(--bg); }
.dialogo--perfil .dialogo__corpo { max-height: min(70vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
.perfil-r__quem { margin-bottom: 14px !important; }
.perfil-r__barras { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.perfil-r__barras li { display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: 10px; }
.perfil-r__fator { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.perfil-r__trilho { height: 10px; border-radius: 999px; background: var(--bg, #eef1f5); overflow: hidden; }
.perfil-r__barra { display: block; height: 100%; border-radius: 999px; }
.perfil-r__barra--E { background: var(--verm-escuro); }
.perfil-r__barra--C { background: var(--dourado); }
.perfil-r__barra--P { background: var(--verde-escuro); }
.perfil-r__barra--A { background: var(--azul); }
.perfil-r__pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.perfil-r__sub { margin: 0 0 6px; font-family: var(--fonte-titulo); font-size: 16px; color: var(--text); }
.perfil-r__lista { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.perfil-r__lista li::marker { color: var(--muted); font-weight: 600; }
.perfil-r__perg { font-size: 14px; color: var(--text); font-weight: 600; }
.perfil-r__resp { display: flex; align-items: flex-start; gap: 8px; margin-top: 3px; font-size: 14px; color: var(--muted); }
.perfil-r__resp .disc span { width: 20px; height: 20px; font-size: 12px; /* (v2.47.0) T6: era 11px */ }
@media (max-width: 480px) {
  .perfil-r__barras li { grid-template-columns: 1fr 44px; }
  .perfil-r__trilho { grid-column: 1 / -1; grid-row: 2; }
}


/* ---------------------------------------------------------------------
   (v2.42.0) Histórico de uso: os administradores em destaque no topo
   --------------------------------------------------------------------- */
.adm-uso { border-top: 4px solid #006CB5; }
.adm-uso .cartao__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.adm-uso .cartao__titulo { display: inline-flex; align-items: center; gap: 8px; }
/* (v2.47.0) A3 do QA: min(100%, 260px) para caber no cartão a 320px sem rolar de lado. */
.adm-uso__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.adm-uso__item {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface, #fff); /* (v2.47.0) B23: --fundo não existe */
  color: inherit; text-decoration: none; touch-action: manipulation;
  transition: border-color .15s ease, background-color .15s ease;
}
.adm-uso__item:hover { border-color: #006CB5; background: #F3F8FC; }
.adm-uso__item:focus-visible { outline: 3px solid var(--anel); outline-offset: 2px; }
.adm-uso__item--ativo { border-color: #006CB5; background: #E6F0F9; box-shadow: inset 0 0 0 1px #006CB5; }
.adm-uso__txt { display: grid; gap: 3px; min-width: 0; }
.adm-uso__txt .tag { justify-self: start; }
.adm-uso__nome { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.adm-uso__quando { font-size: 12.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .adm-uso__item { transition: none; } }


/* ---------------------------------------------------------------------
   (v2.43.0) Prova: tela em abas que abre nas PERGUNTAS, lista com os
   atalhos Ver perguntas / Editar / Duplicar e o pop-up de prévia
   (painel/prova-form.php, provas.php, parciais/prova-perguntas.php,
   parciais/prova-previa*.php, assets/js/prova-previa.js).
   --------------------------------------------------------------------- */
.prova-cab__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Resumo em uma linha no lugar dos cartões de número. */
.prova-resumo { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prova-resumo__item {
  display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--fio); border-radius: var(--raio-full); background: var(--surface);
  font-size: 14px; color: var(--muted);
}
.prova-resumo__item strong { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
.prova-resumo__item--alerta { border-color: var(--verm-borda); background: var(--verm-100); color: var(--verm-escuro); }
.prova-resumo__item--alerta strong { color: var(--verm-escuro); }
.prova-resumo__item--ok { border-color: var(--verde-borda); background: var(--verde-bg); color: var(--verde-escuro); }
.prova-resumo__item--ok strong { color: var(--verde-escuro); }
.prova-resumo__item svg { flex: none; }

.prova-abas > [role="tabpanel"] > .cartao:first-child,
.prova-abas > [role="tabpanel"] > .prova-qform { margin-top: 0; }
.prova-qform { margin-bottom: var(--sp-4); }
.prova-modelo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.prova-modelo > div { flex: 1 1 360px; min-width: 0; }
.prova-dica-grupo { margin-bottom: 8px; }
.prova-codigo { font-size: 12px; color: var(--muted); }
.prova-vincular { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.prova-vincular select { flex: 1 1 260px; min-width: 0; min-height: var(--alvo); }
.prova-etapa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.prova-etapa select { min-width: 160px; min-height: var(--alvo); }

/* As perguntas: um cartão por pergunta, número em destaque, a correta em verde. */
.prova-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.prova-q {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--fio); border-radius: var(--raio-cartao);
  background: var(--surface); box-shadow: var(--sombra-cartao);
  scroll-margin-top: 96px;
}
.prova-q__topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.prova-q__num {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--tinta); color: var(--sobre-cor);
  font-family: var(--fonte-titulo); font-size: 15px; font-weight: 600;
}
.prova-q__enunciado {
  margin: 4px 0 0; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--tinta);
  white-space: pre-line; overflow-wrap: anywhere;
}
.prova-q__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.prova-q__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.prova-q__acoes .btn--icone { min-height: var(--alvo); width: var(--alvo); }
.prova-q__acoes .btn--pequeno:not(.btn--icone) { min-height: var(--alvo); }
.prova-q__alts { list-style: none; margin: 12px 0 0 44px; padding: 0; display: grid; gap: 6px; }
.prova-q__alt {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--fio); border-radius: 10px; background: var(--surface);
  font-size: 14.5px; line-height: 1.4; color: var(--text);
}
.prova-q__letra {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--fio); background: var(--tela);
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.prova-q__alt-txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.prova-q__alt--certa { border-color: var(--verde-borda); background: var(--verde-bg); }
.prova-q__alt--certa .prova-q__letra { border-color: var(--verde-ok); background: var(--verde-ok); color: var(--sobre-cor); }
.prova-q__certa { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--verde-escuro); }
.prova-q__resposta-livre,
.prova-q__nota { margin: 10px 0 0 44px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 640px) {
  .prova-q { padding: var(--sp-4); }
  .prova-q__topo { grid-template-columns: auto minmax(0, 1fr); }
  .prova-q__acoes { grid-column: 1 / -1; justify-content: flex-start; }
  .prova-q__alts, .prova-q__resposta-livre, .prova-q__nota { margin-left: 0; }
}

/* Lista de provas: o tipo foi para a linha de baixo do título e as ações são três atalhos. */
.provas__meta { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.provas__acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.provas__acoes .btn { white-space: nowrap; }

/* O pop-up "Ver perguntas". */
.dialogo--prova { --dialogo-largura: 760px; }
.dialogo--prova [data-pv-pe] { flex: none; }
.dialogo--prova [data-pv-pe]:empty { display: none; }
.dialogo--prova .prova-q { padding: var(--sp-3) var(--sp-4); box-shadow: none; }
.prova-previa__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.prova-previa__quando { margin: 0 0 var(--sp-4); font-size: 14px; color: var(--muted); }
.prova-previa__carregando { margin: var(--sp-4) 0; color: var(--muted); }
.vaga-prova-ver { margin-top: 8px; }


/* ---------------------------------------------------------------------
   (v2.45.0) Minha área: a candidatura interna esperando o currículo
   --------------------------------------------------------------------- */
.cand-int { border-top: 4px solid #006CB5; }
.cand-int .cartao__titulo { display: inline-flex; align-items: center; gap: 8px; text-wrap: balance; }
.cand-int__texto { margin: 0 0 12px; color: var(--muted); max-width: 68ch; }
.cand-int__passos { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.cand-int__passo {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
}
.cand-int__marca { display: grid; place-items: center; color: #B45309; }
.cand-int__passo--ok .cand-int__marca { color: var(--verde-escuro, #1d7a46); }
.cand-int__acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cand-int__acoes .btn[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 480px) {
  .cand-int__passo { grid-template-columns: 24px 1fr; }
  .cand-int__passo .btn { grid-column: 1 / -1; justify-self: start; }
  .cand-int__acoes form, .cand-int__acoes .btn { width: 100%; }
}


/* (v2.45.2) Ficha do candidato: aviso de que a pessoa já é colaboradora, com o link para a ficha dela. */
.ficha-colab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding: 10px 14px;
  border-radius: 10px; background: #E6F0F9; color: var(--text); font-size: 14px; }
.ficha-colab .tag--colaborador { margin-left: 0; }


/* ---------------------------------------------------------------------
   (v2.46.0) Atalhos nas listas: modelos de triagem (Ver perguntas /
   Editar / Duplicar ao lado do nome), pesquisas, ações de endomarketing,
   admissão (Cobrar no WhatsApp) e ciclos de avaliação (Resultados /
   Lembrar quem falta). O pop-up é o da prova (.dialogo--prova, .prova-q).
   --------------------------------------------------------------------- */
.form-mod { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; margin-bottom: var(--sp-4); }
.form-mod > .acordeao { min-width: 0; margin-bottom: 0; }
.form-mod__atalhos { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; padding: 8px 0; }
.form-mod__atalhos .btn { white-space: nowrap; }
@media (max-width: 900px) {
  .form-mod { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .form-mod__atalhos { justify-content: flex-start; padding: 0; }
}

/* Triagem no pop-up: a opção que desclassifica, em vermelho e com a palavra. */
.prova-q__alt--corta { border-color: var(--verm-borda); background: var(--verm-100); }
.prova-q__corta { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--verm-escuro); }
.prova-q__ajuda { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }

.endo-tabela__acoes,
.adm-atalhos,
.ciclo-atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.endo-tabela__acoes .btn,
.adm-atalhos .btn,
.ciclo-atalhos .btn { white-space: nowrap; }


/* ---------------------------------------------------------------------
   (v2.47.0) QA de 02/11: computador E celular (até 320px). Regras pontuais;
   nada acima foi apagado. Os anéis de foco das regras de v2.28 a v2.46
   passaram para var(--anel) (sugestão 7); a lima fica só no painel marinho
   (.raio e o primeiro kpi escuro).
   --------------------------------------------------------------------- */

/* M19 e B24: alvo de toque de 44px no celular e no tablet. "Ver respostas" do Perfil, "Respostas" dos gestores,
   "Ver como" e o filtro de situação do Fardamento, a amostra de cor do cadastro, e os botões de aba/segmento que
   tinham 34 a 42px (Admissão, ficha do colaborador, Visão geral, legenda, Entrar). */
@media (pointer: coarse) {
  .perfil-r__botao,
  .gestor-av__respostas > summary,
  .fard-vercomo__op,
  .fard-filtro-sit select,
  .adm2-aba,
  .col2-abas a,
  .vg2-seg button,
  .legenda-detalhe > summary,
  .entrar-marca__botao,
  .triagem-opcao-linha .escolha--corte,
  .funcoes-dep__grade .escolha,
  .doc-sumario a { min-height: var(--alvo); }
  .fard-hex { width: var(--alvo); height: var(--alvo); }
  .painel__sub-mais { min-height: var(--alvo); }
}

/* Campo de texto com menos de 16px dá zoom sozinho no iPhone ao receber o foco. A regra base (16px) perdia para
   regras de classe com 13 a 14px (busca de telas, linha do feed, ação do PDI, Google do endomarketing...). Só em tela
   de toque, para não mexer no desenho do computador. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select, textarea { font-size: max(16px, 1em); }
}

/* Botões que não quebram linha (nowrap) num celular estreito: um rótulo longo passava da largura do cartão.
   Abaixo de 480px eles voltam a quebrar dentro do botão, como o .btn comum. */
@media (max-width: 479.98px) {
  .provas__acoes .btn,
  .form-mod__atalhos .btn,
  .endo-tabela__acoes .btn,
  .adm-atalhos .btn,
  .ciclo-atalhos .btn,
  .bt-acoes .btn,
  .lote__acoes .btn,
  .tabela td[data-rotulo="Ações"] .btn { white-space: normal; }
  .tabela td[data-rotulo="Ações"] { min-width: 0; }
  .perfil-r__botao { white-space: normal; }
}


/* ---------------------------------------------------------------------
   (v2.47.0) RODADA 2 DO QA (frente T): painel no tablet (641 a 1023px),
   alvos de toque e o CSS pedido pelas outras frentes. Regras pontuais, no
   fim da folha para vencer as de cima; nada acima foi apagado. No
   computador (1024px ou mais) nada muda, salvo onde o item diz.
   --------------------------------------------------------------------- */

/* T3: no tablet o cartão da tabela tinha uma coluna só, de 600 a 900px de largura, com o rótulo numa ponta e o
   valor na outra. Agora são duas colunas; o nome (principal), a caixa de marcar, as ações e a célula que ocupa a
   linha toda (colspan, a do "nenhum resultado") continuam na largura inteira. */
@media (min-width: 641px) and (max-width: 1023.98px) {
  .tabela tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px; align-items: start;
  }
  .tabela tbody td { min-width: 0; }
  .tabela tbody td.principal,
  .tabela tbody td.col-marca,
  .tabela tbody td.col-acoes,
  .tabela tbody td[data-rotulo="Ações"],
  .tabela tbody td[colspan] { grid-column: 1 / -1; }
  .tabela tbody td.col-marca { justify-content: flex-start; }
}

/* T4: o passo a passo do funil e as abas da ficha do colaborador rolavam de lado sem aviso, e a aba atual podia
   ficar fora da vista. Abaixo de 1024px eles quebram em linhas, como as .abas. A seta entre os passos some na
   quebra (apontaria para o nada no fim da linha); o número de cada passo continua dizendo a ordem. */
@media (max-width: 1023.98px) {
  .funil { flex-wrap: wrap; gap: 6px; overflow-x: visible; background-image: none; padding-bottom: 0; }
  .funil__passo,
  .funil__passo + .funil__passo { border: 1px solid var(--border); border-radius: var(--raio); }
  .funil__passo:first-child,
  .funil__passo:last-child { border-radius: var(--raio); }
  .funil__passo { padding: 8px 12px; }
  .funil__passo:not(:last-child)::after { display: none; }
  .funil__passo.funil__passo--tras { border-color: var(--verde-300); }
  .funil__passo.funil__passo--aqui { border-color: var(--azul); }
  .funil__nome { white-space: normal; }

  .col2-abas { flex-wrap: wrap; overflow-x: visible; }
  .col2-abas a { flex: 0 1 auto; }
}

/* T5: a pastilha que é link (filtro rápido) tinha 32px no toque. A altura visível continua a de antes; a área de
   toque cresce para 44px por um ::after invisível (o mesmo jeito do .tag--link do tema). */
@media (pointer: coarse) {
  a.tag, .tag-link { position: relative; }
  a.tag:not(.tag--link)::after, .tag-link::after {
    content: ''; position: absolute; left: -2px; right: -2px; top: 50%;
    height: var(--alvo); transform: translateY(-50%);
  }
}

/* T9: entre 1100 e cerca de 1257px (a ficha ganha a coluna do Resumo), as colunas de piso fixo da linha do
   documento passavam da largura e a situação (o chip) era cortada. Com minmax(0, …) as colunas cedem, e o chip
   quebra a linha dentro dele. Com sobra de espaço (1280 em diante) a divisão é a mesma de antes. */
.adm2-doc > summary { grid-template-columns: 26px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr) 14px; }
.adm2-doc > summary > * { min-width: 0; }
.adm2-doc > summary > .adm2-chip { max-width: 100%; white-space: normal; }
@media (max-width: 720px) {
  .adm2-doc > summary { grid-template-columns: 26px minmax(0, 1fr) 14px; }
}

/* T10: o resumo do Novo colaborador grudava em top: 0, atrás da barra do topo (que também gruda). Agora ele
   para logo abaixo dela; no celular deixa de grudar (tomava meia tela). O degradê do rodapé usa o fundo de
   verdade da tela do painel (--tela), e não o --bg, que deixava uma faixa de outra cor. */
.novo-colab__resumo { top: var(--topo-alt); }
.novo-colab__acoes { background: linear-gradient(to top, var(--tela, var(--bg)) 70%, transparent); }
@media (max-width: 640px) {
  .novo-colab__resumo { position: static; }
}

/* T12: o Salvar preso no rodapé (.salvar-fixo) nos formulários longos da vaga e da ação de endomarketing. Os
   botões ficam juntos à esquerda, como estavam (o .salvar-fixo das Configurações os separa nas pontas). */
.salvar-fixo.salvar-fixo--acoes { justify-content: flex-start; gap: 10px; }

/* T11: no menu "Mais" da vaga os formulários de um botão (form.inline) ocupam a largura do menu, para o botão
   esticar como os outros. */
.acoes-mais__menu form.inline { display: block; }

/* T13: "ver quem", "abrir admissões", "ver o cadastro" (e "ver quais", "divulgar ou revisar") tinham cerca de
   17px de altura. O link agora se estica sobre o cartão de atenção inteiro. O <small> deixa de ser a referência
   do posicionamento (era ele que segurava o ::after do .kpi__gatilho), e o cartão (.vg2-at, relative) passa a
   ser. Há um só link por cartão, então não há dois esticados disputando o clique. */
.vg2-at small { position: static; }
.vg2-at small > a { text-decoration: underline; text-underline-offset: 2px; }
.vg2-at small > a::after,
.vg2-at small > .kpi__gatilho::after { content: ''; position: absolute; inset: 0; border-radius: 14px; }
.vg2-at small > a:focus-visible { outline: none; }
.vg2-at small > a:focus-visible::after,
.vg2-at small > .kpi__gatilho:focus-visible::after { outline: 3px solid var(--anel); outline-offset: -3px; }
.vg2-at:has(small > a, small > .kpi__gatilho) { cursor: pointer; }
.vg2-at:has(small > a:hover, small > .kpi__gatilho:hover) { border-color: var(--azul-200); }

/* T14: o link da avaliação (campo só leitura) tinha font-size: 12px em linha, que dava zoom no iPhone. No
   computador ele fica em 13px; no toque vale a regra geral de 16px (bloco "Campo de texto com menos de 16px"). */
.entrada.entrada--link { font-size: 13px; }

/* T18: lista de WhatsApp por gestor da avaliação de experiência (era style em linha). Cada linha quebra quando
   não cabe; o botão tem o alvo de 44px. */
.exp-whats-gestores { margin: var(--sp-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.exp-whats-gestores > li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.exp-whats-gestores > li .dica { margin: 0; }
.exp-whats-gestores .btn { min-height: var(--alvo); }

/* T18: filtros do Histórico de uso (eram max-width em linha). No celular cada um ocupa a linha. */
.barra-busca .logs-filtro { flex: 0 1 auto; }
.logs-filtro--pessoa { max-width: 260px; }
.logs-filtro--papel { max-width: 210px; }
.barra-busca .entrada.logs-filtro--data { flex: 0 1 170px; max-width: 170px; }
@media (max-width: 479.98px) {
  .barra-busca .logs-filtro,
  .barra-busca .entrada.logs-filtro--data { flex: 1 1 100%; max-width: none; }
}

/* T18: rodapé do cartão de vaga interna (Minha área) em 320px: o prazo, a etiqueta "Você se candidatou" e a dica
   quebram em coluna, cada um na largura toda, em vez de espremer lado a lado. */
@media (max-width: 479.98px) {
  .vi-vaga__rodape { flex-direction: column; align-items: stretch; }
  .vi-vaga__rodape > span:empty { display: none; }
  .vi-vaga__feito { display: flex; flex-direction: column; align-items: flex-start; }
  .vi-vaga__feito .tag { white-space: normal; max-width: 100%; }
  .vi-vaga__feito .dica { margin: 0; }
}

/* T18: "Cancelar pedido" do Fardamento: a área de toque de 44px no toque (o .btn--pequeno já ganha, aqui fica
   garantido mesmo se a classe mudar). */
@media (pointer: coarse) {
  .fard-cancelar .btn { min-height: var(--alvo); }
}

/* T19 / C3: o campo da ação do PDI (13px) dava zoom no iPhone. A regra geral de toque já o leva a 16px; esta deixa
   explícito, para não depender da ordem das regras. */
@media (pointer: coarse) {
  .pdi-acao .entrada { font-size: 16px; }
}

/* T19 / C11: "Ver" e "Ver o que mandei" da admissão do colaborador viraram botão pequeno (14px, 44px no toque);
   dentro da linha miúda de 12,5px eles precisam de respiro para não colar no texto ao quebrar. */
.doc-deps__meta .btn,
.doc-item__dica > .btn { margin: 4px 0; vertical-align: middle; }

/* T19: o resumo da vaga (site) gruda no alto e, numa tela baixa, o botão de candidatar ficava abaixo da dobra.
   Agora o resumo tem a altura da janela (menos o topo) e rola por dentro. */
@media (min-width: 1024px) {
  .vaga-resumo { max-height: calc(100vh - 190px); overflow: auto; overscroll-behavior: contain; }
}

/* (v2.47.0) Pedido da frente C (colaborador/equipe-pessoa.php): abaixo de 768px os cartões "Avaliar agora"
   (.eqp-topo__tarefas) vêm antes dos números (.kpis). Em coluna flexível as margens não se somam: o .kpis
   mantém a margem de baixo dele (sp-5) e a tarefa ganha sp-4 embaixo, para não colar nos números. Sem tarefa o
   bloco fica vazio e não ocupa espaço. */
@media (max-width: 767px) {
  .eqp-topo { display: flex; flex-direction: column; }
  .eqp-topo > * { min-width: 0; }
  .eqp-topo__tarefas { order: -1; }
  .eqp-topo__tarefas > :last-child { margin-bottom: var(--sp-4); }
}

/* (v2.47.0) Pedido da frente C: botão que é <summary> (summary.btn, como o "Corrigir ou cancelar" do PDI) sem o
   triângulo de lista do navegador. */
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
summary.btn::marker { content: ''; }

/* ---------------------------------------------------------------------
   (v2.48.0) E-mails que não saíram (/painel/emails/fila?ver=erro): o
   filtro da fila, o resumo dos motivos e a mensagem técnica recolhida.
   --------------------------------------------------------------------- */
.filtro-fila { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sp-4); }
.motivos-falha__lista { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-3); }
.motivos-falha__lista > li { padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--vermelho); border-radius: 10px; background: var(--surface); }
.motivos-falha__lista strong { margin-right: 6px; }
.motivos-falha__lista p { margin: 6px 0 0; color: var(--muted); max-width: 75ch; }
.motivo-tecnico { margin-top: 8px; font-size: 13px; }
.motivo-tecnico > summary { cursor: pointer; min-height: var(--alvo); display: inline-flex; align-items: center; color: var(--muted); }
.motivo-tecnico > summary:focus-visible { outline: 3px solid var(--anel); outline-offset: 2px; border-radius: 4px; }
.motivo-tecnico code { display: block; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; font-size: 12.5px; }
@media (pointer: fine) { .motivo-tecnico > summary { min-height: 0; } }

/* ---------------------------------------------------------------------
   (v2.49.0) "Este é o seu primeiro emprego?" no currículo do candidato:
   pergunta obrigatória de Sim ou Não, em fieldset (as duas opções lado a
   lado no computador, uma embaixo da outra no celular).
   --------------------------------------------------------------------- */
.pergunta-pe { border: 0; padding: 0; margin: 0 0 var(--sp-4); min-width: 0; scroll-margin-top: calc(var(--topo-alt, 64px) + 16px); }
.pergunta-pe > legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.pergunta-pe__opcoes { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pergunta-pe__opcoes .opcao-cv { min-height: var(--alvo); }
@media (max-width: 480px) { .pergunta-pe__opcoes { flex-direction: column; gap: 4px; } }
#objetivo { scroll-margin-top: calc(var(--topo-alt, 64px) + 16px); }

/* (v2.49.1) A pergunta do primeiro emprego no TOPO e em destaque: faixa azul-clara
   com borda azul de marca, antes do objetivo. */
.pergunta-pe--destaque { padding: 14px 16px; border: 1px solid var(--azul-200, #BFD9EE); border-left: 4px solid var(--azul, #006CB5);
  border-radius: 10px; background: var(--realce-suave, #F3F8FC); margin-bottom: var(--sp-5); }
.pergunta-pe--destaque > legend { float: left; width: 100%; margin-bottom: 10px; font-size: 17px; font-weight: 700; color: var(--text); }
.pergunta-pe--destaque > legend + * { clear: both; }
.pergunta-pe--destaque .dica { max-width: 70ch; }

/* ---------------------------------------------------------------------
   (v2.50.0) Pop-up do currículo mínimo na página da vaga
   (site/vaga-cv-minimo.php): cada bloco que falta destacado, erro ao lado
   do campo, corpo com rolagem própria e botões sempre à vista.
   --------------------------------------------------------------------- */
.cv-minimo .dialogo__corpo { overflow-y: auto; overscroll-behavior: contain; }
.cv-minimo__intro { margin: 0 0 var(--sp-4); color: var(--muted); }
.cvm-item { margin: 0 0 var(--sp-4); padding: 14px 16px; min-width: 0;
  /* (v2.50.1) Vermelho mais suave (pedido do dono): fio rosado, faixa à esquerda e fundo quase branco. */
  border: 1px solid var(--verm-borda, #F3B9BC); border-left: 4px solid #F08A8D;
  border-radius: 10px; background: #FFF8F8; }
.cvm-item > legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; font-weight: 700; font-size: 16px; }
.cvm-item > legend + * { clear: both; }
.cvm-item .campo:last-child { margin-bottom: 0; }
.cvm-item input.entrada, .cvm-item select, .cvm-item textarea { background: var(--surface); }
.cvm-exp { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--verm-borda, #F3B9BC); }
.cvm-erro { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--verm-escuro, #A31B20); }
.cv-minimo [aria-invalid="true"], .cvm-invalido select { border-color: var(--vermelho); }
/* (v2.50.1) As opções do pop-up não moram dentro de .campo: o mesmo desenho de .campo .opcao-cv
   (linha de 44px, caixinha de 20px, anel de foco no rótulo). */
.cvm-item .opcao-cv { display: flex; align-items: center; gap: 10px; min-height: var(--alvo); margin: 0;
  font-weight: 600; font-size: 15px; color: var(--text); cursor: pointer; }
.cvm-item .opcao-cv input { width: 20px; height: 20px; flex: none; margin: 0; }
.cvm-item .opcao-cv input:focus-visible { outline: none; }
.cvm-item .opcao-cv:has(input:focus-visible) { outline: 3px solid var(--anel); outline-offset: 2px; border-radius: var(--raio); }
.cvm-item .form-grade + .form-grade { margin-top: var(--sp-3); }
.cvm-item .opcao-cv span, .pergunta-pe .opcao-cv span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .cvm-item { padding: 12px; }
  .cvm-item > legend, .pergunta-pe--destaque > legend { font-size: 16px; }
}

/* (v2.50.1) Caixa de marcar como 1º filho de um campo da grade ("Trabalho aqui hoje", no currículo): a
   regra dos rótulos da grade (reserva de duas linhas; no celular, display:block) tirava o desenho de
   opção e deixava o alvo com 26px. A opção mantém a linha de 44px com a caixinha ao lado do texto. */
.form-grade > .campo > label.opcao-cv:first-child,
.campo > label.opcao-cv:first-child {
  display: flex; align-items: center; min-height: var(--alvo); margin-bottom: 0;
}

/* (v2.50.2) Página da vaga em tela BAIXA (notebook de 720 a 820 px de altura): o resumo fixo da lateral com
   rolagem própria (v2.47.0) escondia o "Candidatar-me" lá dentro, e a pessoa precisava rolar a caixa, e não a
   página. Nessa altura o resumo deixa de ser fixo e vai com a página, inteiro: o botão aparece rolando a página. */
@media (min-width: 1024px) and (max-height: 820px) {
  .vaga-resumo { position: static; max-height: none; overflow: visible; }
}


/* (v2.52.0) Botão dentro de aviso: a cor do link do aviso (.aviso--atencao a = dourado) passava por cima do texto
   branco do botão cheio ("Completar agora" ficava dourado sobre azul). */
.aviso a.btn:not(.btn--linha):not(.btn--fantasma):not(.btn--claro),
.aviso a.btn:not(.btn--linha):not(.btn--fantasma):not(.btn--claro):hover { color: var(--primaria-txt); text-decoration: none; }

/* (v2.52.0) Estrela de favorito na lista de candidatos da vaga. */
.fav-form { display: inline-flex; vertical-align: middle; margin: 0 4px 0 0; }
.fav { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -6px -10px -10px;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--borda-botao, #C9D3DE); cursor: pointer;
  vertical-align: middle; touch-action: manipulation; transition: color .15s ease, transform .15s ease; }
.fav svg { fill: none; stroke: currentColor; }
.fav:hover { color: #E0A100; }
.fav:focus-visible { outline: 3px solid var(--azul-300, #7FB2DD); outline-offset: -6px; }
.fav--sim, .fav--sim:hover { color: #E0A100; }
.fav--sim svg { fill: currentColor; }
.fav--so-ver { cursor: default; width: auto; height: auto; margin: 0 6px 0 0; }
.fav:active { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) { .fav { transition: none; } .fav:active { transform: none; } }
.grade-1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }