/* =====================================================================
   TEMA DE COMPONENTES (v1.49) — painel, área do candidato/colaborador e site
   ---------------------------------------------------------------------
   Referência: dashboard SaaS "AI Finance Management" (Fynix, Behance),
   unificada ao manual de marca das Lojas 2001. Nasceu no painel (v1.47) e,
   a pedido, passou a valer para o resto do portal: a home e as páginas de
   vagas, a área do candidato e a do colaborador.

   ESTA FOLHA É SÓ DE COMPONENTE (cartão, botão, abas, campo, tabela,
   número, gráfico, título de página). A casca do painel — fundo cinza,
   lateral em pílula, a barra de topo — mora em painel.css, que só os
   layouts de painel carregam (painel.php e candidato.php).

   CABEÇALHO E RODAPÉ DO SITE NÃO MUDAM (pedido explícito: "em headers e
   footer devemos manter o padrão sempre"). Nenhuma regra daqui mira
   .cab-site, .barra-nav, .menu-movel ou .rodape-azul; a única peça de
   componente que vive neles — o botão claro da faixa de chamada, logo
   acima do rodapé — é devolvida ao desenho original no fim da folha.

   DO MANUAL, E NÃO MUDA: o azul #006CB5, o vermelho #EC3237, Oswald e
   Mulish.

   COMPLEMENTARES (fora do manual, liberadas pelo pedido):
     --tinta  marinho de tinta, o "cheio" da referência (o verde-escuro
              deles), tirado da família do azul da marca;
     --lima   o acento vivo. É o complemento do azul da marca na roda e o
              eco do verde-neon que o portal já usa na barra de carregar.
              Lima NUNCA carrega texto sobre branco (1,3:1): ela aparece
              sobre marinho/azul, ou como fundo claro com texto escuro.
   ===================================================================== */

:root {
  --tela:          #EEF1F6;   /* o fundo da tela, atrás dos cartões */
  --tinta:         #0B2A47;   /* branco em cima: 14,6:1 */
  --lima:          #B6F36B;   /* tinta em cima: 11,2:1 */
  --realce-suave:  #E6F0F9;   /* item de menu selecionado; --azul-700 em cima: 10,6:1 */
  --fio:           #E4E8EE;   /* borda de cartão: enfeite, a sombra já separa */
  --linha-hover:   #F5F8FC;   /* linha de tabela sob o cursor */
  --alerta-suave:  #FFF8E8;   /* topo do cartão de número em alerta */
  --perigo-suave:  #FDECEC;   /* topo do cartão de número em perigo */
  --borda-botao:   #C9D6E5;   /* contorno do botão de linha (enfeite: o texto azul é que diz "botão") */
  --solides-fundo: #F1E9FB;   /* etiqueta "Sólides" (o que veio da migração) */
  --solides-txt:   #5B2A86;   /* sobre --solides-fundo: 8,4:1 */

  /* Dois tons de gráfico (o "escuro + claro" da referência), ambos com
     3:1 ou mais contra o branco do cartão — barra é dado, não enfeite. */
  --graf-1: var(--tinta);     /* 14,6:1 */
  --graf-2: var(--azul-400);  /* 4,0:1 */

  --raio-cartao: 18px;
  --sombra-cartao: 0 1px 2px rgba(11, 42, 71, .04), 0 6px 20px rgba(11, 42, 71, .05);
  --cartao-pad: 20px;

  /* (v1.83.0) Diálogo único (pop-ups): o véu é a --tinta (#0B2A47) a 45%,
     o mesmo tom que o .graf-dialogo já usava; o tempo de SAIR é menor que
     o de ENTRAR (fechar tem de parecer imediato). */
  --dialogo-veu:   rgba(11, 42, 71, .45);
  --dialogo-entra: .22s;
  --dialogo-sai:   .15s;
  --dialogo-curva: cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------------
   TÍTULO DA PÁGINA + DESCRIÇÃO
   O h1 encostava na frase (2px) e a frase tinha o tamanho do corpo: título
   e descrição liam como um bloco só. Agora são três andares — a trilha
   pequena, o título em marinho com um filete da marca embaixo, e a
   descrição num corpo maior e mais solto. Vale para .painel__cabecalho
   (painel, candidato, colaborador) e .pagina-topo (páginas do site); a
   home tem o hero dela, que não passa por aqui.
   --------------------------------------------------------------------- */
.painel__cabecalho { margin-bottom: 28px; }
.trilha, .trilha-site {
  margin: 0 0 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--muted-soft);
}
.painel__cabecalho h1, .pagina-topo h1 {
  margin: 0; color: var(--tinta); line-height: 1.15; letter-spacing: .005em;
}
.painel__cabecalho h1 { font-size: 30px; }
/* O filete é enfeite (não carrega informação): pode ficar no azul-claro. */
.painel__cabecalho h1::after, .pagina-topo h1::after {
  content: ''; display: block;
  width: 36px; height: 4px; margin-top: 12px;
  border-radius: var(--raio-full);
  background: linear-gradient(90deg, var(--azul) 0%, var(--azul-400) 100%);
}
.painel__sub, .pagina-topo__sub {
  margin: 14px 0 0; max-width: 72ch;
  font-size: 15.5px; line-height: 1.6; color: var(--muted);
}
.painel__sub strong, .pagina-topo__sub strong { color: var(--tinta); }

/* As outras cabeças de página do site: a da vaga e a de Políticas/LGPD. */
.vaga-topo h1, .pagina-inst__topo h1 { margin: 0; color: var(--tinta); line-height: 1.15; }
.vaga-topo h1::after, .pagina-inst__topo h1::after,
.secao__titulo h2::after, .secao-livre__titulo::after {
  content: ''; display: block;
  width: 36px; height: 4px; margin-top: 12px;
  border-radius: var(--raio-full);
  background: linear-gradient(90deg, var(--azul) 0%, var(--azul-400) 100%);
}
.pagina-inst__intro { margin: 14px 0 0; max-width: 72ch; font-size: 15.5px; line-height: 1.6; }
.vaga-topo .vaga-selos { margin-top: 14px; }

/* Cabeça de seção da home: centrada, então o filete vai para o meio. */
.secao__titulo h2 { margin: 0; color: var(--tinta); }
.secao__titulo h2::after { margin-inline: auto; }
.secao__titulo p { margin-top: 14px; font-size: 16px; line-height: 1.6; }
/* Seção livre (Conteúdo do site): alinhada à esquerda; a cor do título fica
   com a variante de fundo (no azul ele é branco), e lá o filete vira lima —
   azul sobre azul sumiria. */
.secao-livre__titulo { margin: 0; }
.secao-livre__sub { margin-top: 14px; line-height: 1.6; }
.secao-livre--azul .secao-livre__titulo::after { background: var(--lima); }
@media (max-width: 767px) {
  .painel__cabecalho { margin-bottom: 22px; }
  .painel__cabecalho h1 { font-size: 26px; }
  .painel__sub, .pagina-topo__sub { font-size: 15px; }
}

/* ---------------------------------------------------------------------
   CARTÕES
   --------------------------------------------------------------------- */
.cartao {
  border: 1px solid var(--fio); border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
}
.cartao + .cartao { margin-top: var(--sp-5); }
/* RITMO ENTRE BLOCOS (v1.58) — medido em 80 telas, em 375, 768, 1280 e 1600px.
   `.cartao + .cartao` só separava cartão de cartão VIZINHO, e três casos
   ficavam colados:
   1. outro tipo de bloco de um dos lados — grade de duas colunas, grade de
      gráficos, acordeão, barra de filtros, o sumário da documentação;
   2. um invisível no meio — <input type="hidden">, form oculto, botão só
      para leitor de tela: o `+` não pula nada, e o cartão seguinte encostava
      (Configurações, WhatsApp, cargo);
   3. o <form> que embrulha cartões, direto na página (WhatsApp).
   A lista de blocos é a mesma dos dois lados. Dentro de grade quem separa é o
   `gap`: a regra de app.css que zera `.grade-2 > .cartao + .cartao` continua
   valendo, porque é mais específica. */
/* O pai não pode ser grade: lá quem separa é o gap, e margem em cima desceria
   o segundo cartão da linha. */
:not(.grade-2, .graf-grade, .kpis, .filtros, .form-grade, .grade-vagas, .vaga-grade)
  > :is(.cartao, .grade-2, .graf-grade, .acordeao, .filtros, .doc-sumario)
  + :is(.cartao, .grade-2, .graf-grade, .acordeao, .filtros, .doc-sumario),
:not(.grade-2, .graf-grade, .kpis, .filtros, .form-grade, .grade-vagas, .vaga-grade)
  > :is(.cartao, .grade-2, .graf-grade, .acordeao, .filtros, .doc-sumario)
  + :is(input[type="hidden"], .oculto, .so-leitor, [hidden], template)
  + :is(.cartao, .grade-2, .graf-grade, .acordeao, .filtros, .doc-sumario),
:not(.grade-2, .graf-grade, .kpis, .filtros, .form-grade, .grade-vagas, .vaga-grade)
  > :is(.cartao, .grade-2, .graf-grade, .acordeao, .filtros, .doc-sumario)
  + :is(input[type="hidden"], .oculto, .so-leitor, [hidden], template)
  + :is(input[type="hidden"], .oculto, .so-leitor, [hidden], template)
  + :is(.cartao, .grade-2, .graf-grade, .acordeao, .filtros, .doc-sumario),
.painel__area > :is(.cartao, .grade-2, .graf-grade, .acordeao, .filtros, .doc-sumario) + form,
.painel__area > form + :is(.cartao, .grade-2, .graf-grade, .acordeao, .filtros, .doc-sumario) { margin-top: var(--sp-5); }
/* (v1.97.1) QA L9 — o 4º invisível: um <script> entre dois blocos. Os cartões
   "Lançar registro na ficha" e "Registros que você lançou" (Minha equipe →
   pessoa, com o dialogo-form.js no meio) e o desenho do organograma e "Quer
   mexer no organograma?" (com o JSON dos dados no meio) ficavam a 0px. */
:not(.grade-2, .graf-grade, .kpis, .filtros, .form-grade, .grade-vagas, .vaga-grade)
  > :is(.cartao, .grade-2, .graf-grade, .acordeao, .filtros, .doc-sumario)
  + script
  + :is(.cartao, .grade-2, .graf-grade, .acordeao, .filtros, .doc-sumario) { margin-top: var(--sp-5); }
/* Título de grupo ("Quem está no quadro") logo depois de um bloco: com a
   margem de 0 dele, encostava no cartão de cima e parecia legenda do cartão
   errado. */
:is(.cartao, .grade-2, .graf-grade, .acordeao) + .kpis__titulo { margin-top: var(--sp-6); }
/* No celular e no tablet a .grade-2 era BLOCO (a grade só nasce em 1024px):
   o `gap` não valia, e o último cartão de uma coluna encostava no primeiro da
   seguinte — 21 telas assim. Uma coluna só, mas grade, e o gap separa. */
@media (max-width: 1023.98px) {
  .grade-2 { display: grid; grid-template-columns: minmax(0, 1fr); }
}
/* Título de cartão em Mulish: Oswald fica para o que é DISPLAY (título da
   tela e números grandes). Dois Oswald empilhados num cartão pequeno
   gritavam mais que o conteúdo. */
.cartao__titulo {
  font-family: var(--fonte); font-weight: 800; font-size: 16px;
  color: var(--tinta); letter-spacing: 0;
}
.grade-2 { gap: var(--sp-5); }

/* ---------------------------------------------------------------------
   NÚMEROS (KPIs) — o primeiro de cada fileira é o cartão-destaque
   --------------------------------------------------------------------- */
/* min(100%, …): no celular de 390px, duas colunas de 190px + vão passavam da
   tela e alargavam a página inteira (o sino e o avatar sumiam do topo). */
.kpis { gap: 12px; margin-bottom: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
@media (min-width: 1024px) {
  .kpis { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
.kpi {
  position: relative; overflow: hidden;
  border: 1px solid var(--fio); border-top: 1px solid var(--fio);
  border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao);
  padding: 18px 20px;
}
.kpi__rotulo {
  text-transform: none; letter-spacing: 0;
  font-size: 13.5px; font-weight: 700; color: var(--muted);
}
.kpi__valor { font-size: 32px; color: var(--tinta); margin-top: 8px; font-variant-numeric: tabular-nums; }
.kpi__nota { color: var(--muted-soft); }
.kpi__nota a { font-weight: 700; }

/* Alerta e perigo: um ponto de cor antes do rótulo, e não um filete no
   topo — com todos os cartões iguais, o ponto é o que salta. */
.kpi--alerta, .kpi--perigo { border-top-color: var(--fio); }
.kpi--alerta .kpi__rotulo::before,
.kpi--perigo .kpi__rotulo::before {
  content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%;
  margin: 0 8px 4px 0; align-self: flex-end;
}
.kpi--alerta .kpi__rotulo::before { background: var(--laranja-escuro); }
.kpi--perigo .kpi__rotulo::before { background: var(--verm-escuro); }
.kpi--alerta { background: linear-gradient(180deg, var(--alerta-suave) 0%, var(--surface) 70%); }
.kpi--perigo { background: linear-gradient(180deg, var(--perigo-suave) 0%, var(--surface) 70%); }

/* O DESTAQUE — UM por tela, como na referência: o primeiro cartão da
   PRIMEIRA fileira de números (a fileira que não tem outra antes dela).
   Marinho para azul, com o anel de lima no canto. O texto é
   branco — 14,6:1 no marinho e 5,6:1 no azul da ponta mais clara. O anel
   fica no canto de baixo à direita, e o padding da direita garante que
   texto nenhum passa por cima dele. */
.kpis:not(.kpis ~ .kpis) > .kpi:first-child {
  background:
    radial-gradient(circle at 100% 0%, rgba(51, 137, 196, .55) 0, rgba(51, 137, 196, 0) 55%),
    linear-gradient(140deg, var(--tinta) 0%, var(--azul-escuro) 60%, var(--azul) 100%);
  border-color: transparent; color: var(--sobre-cor);
  padding-right: 64px;
  box-shadow: 0 10px 28px rgba(0, 74, 128, .22);
}
.kpis:not(.kpis ~ .kpis) > .kpi:first-child::after {
  content: ''; position: absolute; right: -30px; bottom: -30px;
  width: 96px; height: 96px; border-radius: 50%;
  border: 14px solid var(--lima); opacity: .95;
  pointer-events: none;
}
/* (v1.78.1) A 375px o destaque tem ~166px, e os 64px reservados ao anel
   deixavam 82px de texto: "Ligar em Departamentos e cargos" partia a palavra
   ("Departament" / "os e cargos"). No celular, anel menor e recuo menor; a
   menor distância do texto ao centro do anel fica em 48px, contra raio
   externo de 32px (sem sobrepor). A ficha e os filtros têm regra própria,
   mais específica, e continuam como estão. */
@media (max-width: 480px) {
  .kpis:not(.kpis ~ .kpis) > .kpi:first-child { padding-right: 40px; }
  .kpis:not(.kpis ~ .kpis) > .kpi:first-child::after {
    width: 64px; height: 64px; right: -24px; bottom: -24px; border-width: 10px;
  }
}
.kpis:not(.kpis ~ .kpis) > .kpi:first-child .kpi__rotulo { color: var(--sobre-azul-txt); }
.kpis:not(.kpis ~ .kpis) > .kpi:first-child .kpi__valor  { color: var(--sobre-cor); }
.kpis:not(.kpis ~ .kpis) > .kpi:first-child .kpi__nota   { color: var(--sobre-azul-txt); }
.kpis:not(.kpis ~ .kpis) > .kpi:first-child .kpi__nota a { color: var(--lima); }
.kpis:not(.kpis ~ .kpis) > .kpi:first-child.kpi--alerta .kpi__rotulo::before { background: var(--amarelo-warn); }
.kpis:not(.kpis ~ .kpis) > .kpi:first-child.kpi--perigo .kpi__rotulo::before { background: var(--verm-300); }
/* (v1.97.1) QA L6 — o anel pequeno e o recuo de 40px valiam só até 480px.
   Entre 481 e 1023px o destaque tem 150–180px, e os 64px reservados ao anel
   grande deixavam ~90px de texto: "30/09/202|6 02:00" (Backup, 768px) e
   "1 problem|a" (Monitoramento) partiam a palavra. Até 1023px vale o anel
   pequeno (a mesma conta de cima: o texto nunca passa por cima dele). A
   ficha tem regra própria, mais específica. */
@media (max-width: 1023.98px) {
  .kpis:not(.kpis ~ .kpis) > .kpi:first-child { padding-right: 40px; }
  .kpis:not(.kpis ~ .kpis) > .kpi:first-child::after {
    width: 64px; height: 64px; right: -24px; bottom: -24px; border-width: 10px;
  }
}
/* (v1.97.1) QA L10 — a 320px os números ficavam em UMA coluna: 288px úteis,
   e duas colunas de 150px pedem 312 (oito cartões ≈ 1.050px antes do
   conteúdo, nos Relatórios do Endomarketing). Até 374px o mínimo cai para
   128px e o respiro do cartão para 14px: duas colunas. O destaque ocupa a
   linha inteira, para o valor em texto ("Tudo certo", uma data) não se
   espremer ao lado do anel. A ficha (.kpis--ficha) e os números que filtram
   (.kpis--filtro) já têm o desenho deles. */
@media (max-width: 374.98px) {
  .kpis { grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); gap: 10px; }
  .kpi { padding: 14px; }
  .kpis:not(.kpis--ficha):not(.kpis--filtro):not(.kpis ~ .kpis) > .kpi:first-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   BOTÕES — pílula
   --------------------------------------------------------------------- */
.btn { border-radius: var(--raio-full); padding-inline: 22px; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s; }
.btn--pequeno { padding-inline: 16px; }
.btn:not(.btn--linha):not(.btn--fantasma):not(.btn--claro):not(.btn--perigo):hover { box-shadow: 0 4px 14px rgba(0, 108, 181, .25); }
.btn--linha { background: var(--surface); border-color: var(--borda-botao); color: var(--azul-600); }
.btn--linha:hover { background: var(--realce-suave); border-color: var(--azul-300); color: var(--azul-700); }
.btn--fantasma:hover { background: var(--tela); color: var(--tinta); }

/* ---------------------------------------------------------------------
   ABAS — controle segmentado: trilho claro, pílula marinho no ativo
   --------------------------------------------------------------------- */
.abas {
  display: flex; flex-wrap: wrap; gap: 4px;
  width: fit-content; max-width: 100%;
  padding: 5px; margin-bottom: var(--sp-5);
  background: var(--surface); border: 1px solid var(--fio); border-radius: 22px;
  box-shadow: var(--sombra-cartao);
}
.abas a {
  border: 0; border-radius: var(--raio-full); background: transparent;
  color: var(--muted); font-weight: 700;
  transition: background-color .15s ease, color .15s ease;
}
.abas a:hover { background: var(--tela); color: var(--tinta); border: 0; }
.abas a.ativo { background: var(--tinta); color: var(--sobre-cor); }
.abas a.ativo .contador { color: var(--lima); }

/* Celular: a moldura do segmentado come 12px e "Recrutamento" + "Colaboradores"
   deixavam de caber lado a lado em 364px — uma caía sozinha na linha de baixo,
   pílula solta. Esticando, a linha que quebra vira uma faixa inteira. */
@media (max-width: 767px) {
  .abas { width: auto; padding: 4px; gap: 4px; border-radius: 18px; }
  .abas a { flex: 1 1 auto; justify-content: center; }
}

/* Atalhos de período (Visão geral): são uma ESCOLHA, não uma ação — o ativo
   usa o marinho do segmentado, e não o azul de botão principal. */
.periodo__atalhos { gap: 4px; }
.periodo__atalhos .btn { padding-inline: 14px; }
.periodo__atalhos .btn:not(.btn--fantasma) { background: var(--tinta); border-color: var(--tinta); box-shadow: none; }
/* Com o respiro de pílula, seis atalhos ocupavam quatro linhas no celular. */
@media (max-width: 519px) {
  .periodo__atalhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .periodo__atalhos .btn { padding-inline: 4px; justify-content: center; font-size: 13px; }
}

/* ---------------------------------------------------------------------
   FORMULÁRIO — o campo mantém a borda de 3:1 (é informação); só arredonda
   --------------------------------------------------------------------- */
.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"] {
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.entrada:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(0, 108, 181, .14); }
.campo label { color: var(--tinta); font-weight: 700; }

/* ---------------------------------------------------------------------
   TABELA
   --------------------------------------------------------------------- */
@media (min-width: 861px) {
  .tabela thead th {
    background: var(--tela); color: var(--muted);
    border-bottom: 0; padding: 11px 10px;
  }
  .tabela thead th:first-child { border-radius: 12px 0 0 12px; }
  .tabela thead th:last-child  { border-radius: 0 12px 12px 0; }
  /* 10px dos lados: o cartão ganhou respiro (20px) e a tabela larga de
     Candidatos rolava 25px de lado em 1440 (1079 numa caixa de 1054). */
  .tabela tbody td, .tabela td.principal { padding: 14px 10px; }
  .tabela tbody tr { transition: background-color .12s ease; }
  .tabela tbody tr:hover { background: var(--linha-hover); }
  .tabela td.principal a { color: var(--tinta); }
}
/* No celular a linha vira cartão: o mesmo cartão do resto do painel. */
@media (max-width: 860px) {
  .tabela tbody tr { border-color: var(--fio); border-radius: 16px; box-shadow: var(--sombra-cartao); }
}

/* ---------------------------------------------------------------------
   ETIQUETAS, AVISOS, LISTAS, VAZIO
   --------------------------------------------------------------------- */
.tag { font-weight: 700; letter-spacing: .01em; }
.aviso { border-radius: 14px; border-left-width: 4px; }
.aviso--ok      { border-left-color: var(--verde); }
.aviso--erro    { border-left-color: var(--verm-escuro); }
.aviso--atencao { border-left-color: var(--laranja-escuro); }
.aviso:not(.aviso--ok):not(.aviso--erro):not(.aviso--atencao) { border-left-color: var(--azul); }
.vazio { border-radius: 16px; background: var(--tela); }

/* Filtro DENTRO de cartão não é outro cartão: sem isto a tela de metas, a de
   experiência e a aba Participantes mostravam borda dentro de borda. */
.cartao .filtros { border: 0; box-shadow: none; background: none; padding: 0; margin-bottom: var(--sp-4); }
.linha-secao { border-color: var(--fio); }

/* ---------------------------------------------------------------------
   GRÁFICOS — trilho claro e barra em dois tons
   --------------------------------------------------------------------- */
.graf-barra__trilho, .met-trilho {
  height: 10px; border: 0; border-radius: var(--raio-full); background: var(--tela);
}
.graf-barra__cheio, .met-trilho > span {
  border-radius: var(--raio-full);
  background: linear-gradient(90deg, var(--graf-2) 0%, var(--graf-1) 100%);
}
.met-trilho--verde > span { background: linear-gradient(90deg, var(--verde) 0%, var(--verde-escuro) 100%); }

/* Rosca: total em marinho, legenda com ponto REDONDO (o quadrado era do
   desenho antigo) e a porcentagem em pílula clara. */
.graf-rosca { gap: var(--sp-5); }
.graf-rosca__total { fill: var(--tinta); }
.graf-rosca__unidade { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 12.5px; }
.graf-ponto { border-radius: 50%; width: 10px; height: 10px; }
.graf-legenda { gap: 9px; }
.graf-legenda__item { padding: 6px 10px; border-radius: 10px; background: var(--tela); }
.graf-legenda--linha .graf-legenda__item { background: none; padding: 0; }
.graf-legenda__item strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.graf-legenda__pct { width: auto; min-width: 40px; }
/* Segunda linha do item (v1.58): a conversão de cada origem, por exemplo. */
.graf-legenda__item { flex-wrap: wrap; }
.graf-legenda__nota { flex-basis: 100%; padding-left: 19px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* Colunas: topo arredondado, número acima em marinho, rótulo embaixo. */
.graf-colunas { gap: clamp(8px, 4%, 20px); }   /* v1.56: 20px fixos estouravam cartão estreito em 2px e criavam rolagem */
/* O NÚMERO DA COLUNA MAIS ALTA SAÍA CORTADO (v1.58). Ele fica 18px acima da
   coluna, e a coluna mais alta encosta no teto da caixa. A caixa rola de lado
   (overflow-x) — e rolar de lado obriga a cortar também em cima: o número do
   maior mês sumia pela metade. O respiro em cima é o lugar dele. */
.graf-colunas { margin-top: 6px; padding-top: 24px; }

/* ---------------------------------------------------------------------
   LISTA LONGA — "Ver todos" (v1.58, Grafico::barras)
   --------------------------------------------------------------------- */
.graf-mais > summary {
  list-style: none; cursor: pointer; width: fit-content;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 16px; border-radius: var(--raio-full);
  background: var(--tela); color: var(--azul-700);
  font-size: 13.5px; font-weight: 700;
  transition: background-color .15s ease;
}
.graf-mais > summary::-webkit-details-marker { display: none; }
.graf-mais > summary:hover { background: var(--realce-suave); }
.graf-mais__resto {
  padding: 1px 8px; border-radius: var(--raio-full);
  background: var(--surface); color: var(--tinta); font-variant-numeric: tabular-nums;
}
.graf-mais:not([open]) .graf-mais__fechar,
.graf-mais[open] .graf-mais__abrir { display: none; }
/* (v1.97.1) QA L17b — contador DENTRO do rótulo ("Ver a nota de cada
   competência 17", Minhas avaliações): a 320px o texto quebrava e o "17"
   descia sozinho para a linha de baixo, à esquerda da pílula. O rótulo vira
   flex: o texto quebra no lugar dele e o número fica ao lado, no meio. Aberto,
   a regra de cima (mais específica) continua escondendo o rótulo. */
.graf-mais__abrir:has(> .graf-mais__resto) { display: inline-flex; align-items: center; gap: 8px; }
.graf-mais__abrir > .graf-mais__resto { flex: none; }
.graf-mais > .graf-barras { margin-top: var(--sp-2); }
[data-grafico="barras"] > .graf-mais { margin-top: var(--sp-2); }

/* ---------------------------------------------------------------------
   DETALHE NO CLIQUE (v1.58, grafico-detalhe.js)
   Todo item de gráfico abre o que está por trás do número. O retorno tem de
   ser visível ANTES do clique — cursor de mão e o fundo claro sob o ponteiro —
   senão ninguém descobre que dá para clicar.
   --------------------------------------------------------------------- */
[data-grafico] [data-graf-item], [data-grafico="linha"] .graf-linha__plot,
.graf-rosca__arco[data-graf-alvo] { cursor: pointer; }
/* A barra clicável ganha 6px de fundo em cima e embaixo (é a área do clique
   e do realce); o vão da lista cai de 13 para 2px e o ritmo fica o mesmo. */
[data-grafico="barras"], .graf-mais > .graf-barras { gap: 2px; }
.graf-barra[data-graf-item] {
  margin: 0 -8px; padding: 6px 8px; border-radius: 10px;
  transition: background-color .15s ease;
}
.graf-barra[data-graf-item]:hover { background: var(--linha-hover); }
.graf-legenda__item[data-graf-item] { transition: background-color .15s ease, box-shadow .15s ease; }
.graf-legenda__item[data-graf-item]:hover { background: var(--realce-suave); }
.graf-coluna[data-graf-item] { border-radius: 10px; padding: 4px 2px 6px; transition: background-color .15s ease; }
.graf-coluna[data-graf-item]:hover { background: var(--linha-hover); }
.graf-rosca__arco[data-graf-alvo] { transition: opacity .15s ease; }
.graf-rosca__svg:hover .graf-rosca__arco[data-graf-alvo]:not(:hover) { opacity: .55; }
.graf-linha__ponto { transition: transform .15s ease; }
[data-grafico] [data-graf-item]:focus-visible,
[data-grafico="linha"]:focus-visible {
  outline: 2px solid var(--primaria); outline-offset: 2px;
}
/* Cartão de número que abre a lista de quem está por trás dele. */
.kpi[data-graf-item] { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.kpi[data-graf-item]:hover { box-shadow: 0 2px 4px rgba(11, 42, 71, .06), 0 10px 26px rgba(11, 42, 71, .10); transform: translateY(-1px); }
.kpi[data-graf-item]:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .kpi[data-graf-item]:hover { transform: none; } }
.kpi__ver {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--azul-700);
}
.kpis:not(.kpis ~ .kpis) > .kpi:first-child .kpi__ver { color: var(--lima); }
/* Botão com cara de link (na tabela do detalhe: trocar de item sem fechar). */
.link-botao {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 700;
  color: var(--azul-700); cursor: pointer; text-align: left;
}
.link-botao:hover { text-decoration: underline; }
.graf-dica {
  display: flex; align-items: center; gap: 6px; margin: 0 0 var(--sp-3);
  font-size: 12.5px; color: var(--muted-soft);
}
.graf-dica svg { flex: none; }

.graf-dialogo {
  width: min(760px, calc(100vw - 32px)); max-height: min(88vh, 920px);
  padding: 0; border: 0; border-radius: var(--raio-cartao);
  background: var(--surface); color: var(--tinta);
  box-shadow: 0 24px 64px rgba(11, 42, 71, .28);
}
.graf-dialogo::backdrop { background: rgba(11, 42, 71, .45); }
.graf-dialogo[open] { display: flex; flex-direction: column; animation: graf-dialogo-entra .22s cubic-bezier(.22, 1, .36, 1); }
@keyframes graf-dialogo-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .graf-dialogo[open] { animation: none; } }
.graf-dialogo__topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--fio);
}
.graf-dialogo__contexto { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.graf-dialogo__titulo { margin: 0; font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 500; line-height: 1.2; color: var(--tinta); overflow-wrap: anywhere; }
.graf-dialogo__fechar {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--tela); color: var(--tinta); cursor: pointer;
}
.graf-dialogo__fechar:hover { background: var(--realce-suave); }
.graf-dialogo__corpo { overflow: auto; padding: var(--sp-4) var(--sp-5) var(--sp-5); overscroll-behavior: contain; }
.graf-dialogo__numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.graf-dialogo__numero { padding: var(--sp-3) var(--sp-4); border-radius: 14px; background: var(--tela); }
.graf-dialogo__numero span { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.graf-dialogo__numero strong { display: block; margin-top: 2px; font-family: var(--fonte-titulo); font-size: 1.6rem; font-weight: 500; color: var(--tinta); font-variant-numeric: tabular-nums; }
.graf-dialogo__numero small { display: block; font-size: 12.5px; color: var(--muted-soft); }
.graf-dialogo__secao + .graf-dialogo__secao { margin-top: var(--sp-5); }
.graf-dialogo__secao h3 { margin: 0 0 var(--sp-3); font-size: 15px; font-weight: 800; color: var(--tinta); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.graf-dialogo__secao h3 small { font-size: 12.5px; font-weight: 600; color: var(--muted-soft); }
.graf-dialogo__busca { width: 100%; margin-bottom: var(--sp-3); }
.graf-dialogo__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fio); }
.graf-dialogo__lista li { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--fio); }
.graf-dialogo__lista a { font-weight: 700; }
.graf-dialogo__lista .graf-dialogo__extra { margin-left: auto; font-size: 13px; color: var(--muted); text-align: right; }
.graf-dialogo__aviso { margin: var(--sp-3) 0 0; font-size: 13px; color: var(--muted-soft); }
.graf-dialogo table tr.graf-dialogo__atual td { background: var(--realce-suave); font-weight: 700; }
.graf-dialogo table td.num, .graf-dialogo table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* No celular a janela vira folha de baixo: o polegar alcança o fechar e a
   lista tem a tela toda. */
@media (max-width: 640px) {
  .graf-dialogo { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 90vh; border-radius: 20px 20px 0 0; }
  .graf-dialogo__topo { padding: var(--sp-4); }
  .graf-dialogo__corpo { padding: var(--sp-4); }
}
.graf-coluna__b { width: 18px; }
.graf-coluna__b span { color: var(--tinta); font-weight: 700; }
.graf-coluna__rotulo { font-weight: 600; }

/* Linha: rodapé com o total em pílula. */
.graf-linha__pe span:nth-child(2) {
  padding: 2px 10px; border-radius: var(--raio-full);
  background: var(--tela); color: var(--tinta);
}
.graf-eixo { fill: var(--muted-soft); font-weight: 600; }

/* Fita de composição por vaga (Visão geral): trilho claro e cantos redondos. */
.vaga-fita { background: var(--tela); border-radius: var(--raio-full); }
.vaga-fita__cheia { border-radius: var(--raio-full); overflow: hidden; }
.legenda-ponto { border-radius: 50%; }

/* Sumário de seções (Configurações, Documentação, Métricas): o mesmo trilho
   do segmentado, e o link sob o cursor ganha a pílula clara. */
.doc-sumario {
  gap: 4px; padding: 6px;
  border-color: var(--fio); border-radius: 22px; box-shadow: var(--sombra-cartao);
}
.doc-sumario a { color: var(--muted); transition: background-color .15s ease, color .15s ease; }
.doc-sumario a:hover { background: var(--tela); color: var(--tinta); }
.met-col__pilha { background: var(--graf-2); border-radius: 6px 6px 0 0; }
.graf-coluna__b { border-radius: 6px 6px 0 0; }

/* ---------------------------------------------------------------------
   9-BOX — caixas no mesmo canto largo dos cartões
   --------------------------------------------------------------------- */
.box9__caixa { border-radius: 14px; }

/* ---------------------------------------------------------------------
   FAIXA DE CHAMADA (logo acima do rodapé do site) — PADRÃO DA MARCA.
   O botão dela é .btn, então ganharia a pílula daqui de cima; volta ao
   canto e ao respiro do app.css.
   --------------------------------------------------------------------- */
.faixa-chamada .btn { border-radius: var(--raio-md); padding-inline: 20px; }

/* ---------------------------------------------------------------------
   MONITORAMENTO E BACKUP (v1.51)
   "Parado" não é "falha": é rotina que deveria rodar sozinha e não rodou.
   Cinza-escuro, para não se confundir com o vermelho do quebrado nem com o
   cinza-claro do "desligado de propósito". Branco sobre --muted: 6,9:1.
   --------------------------------------------------------------------- */
.tag--parado { background: var(--muted); color: var(--sobre-cor); }

/* ETIQUETA "Sólides" (migração, 24/09/2026): o que veio de lá, no painel.
   Lilás, para não se confundir com as cores de estado (verde, âmbar,
   vermelho, azul). Tokens no :root acima (8,4:1). */
.tag--solides { background: var(--solides-fundo); color: var(--solides-txt); }

/* A barra de espaço: cada pedaço é uma parte do que o portal ocupa. Sem a
   bolinha pulsante do .progresso — aqui não há nada "para completar". */
.medidor {
  display: flex; height: 12px; overflow: hidden;
  background: var(--tela); border-radius: var(--raio-full);
}
.medidor__parte { height: 100%; min-width: 3px; }
.medidor__parte--portal  { background: var(--azul); }
.medidor__parte--uploads { background: var(--verde); }
.medidor__parte--banco   { background: var(--laranja-escuro); }
.medidor__parte--backups { background: var(--muted); }
.medidor-legenda {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0;
  list-style: none; font-size: 14px; color: var(--muted);
}
.medidor-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.medidor-legenda .legenda-ponto { width: 10px; height: 10px; display: inline-block; }
.monitor-hora { color: var(--muted-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
/* O nome da verificação quebrava no meio da palavra ("Servido r") quando a
   coluna da situação, que é longa, puxava a largura toda para ela. */
.tabela--monitor td.principal { min-width: 170px; }
.tabela--monitor td[data-rotulo="Estado"] { white-space: nowrap; }
.monitor-detalhe { display: block; color: var(--muted-soft); font-size: 13px; margin-top: 2px; }

/* Aviso de cookies do site (só existe com medição ligada e o aviso ativo em
   Configurações → LGPD). Fixo no rodapé da janela, sem cobrir a tela toda. */
.aviso-cookies {
  position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px;
  max-width: 560px; margin: 0 auto; padding: 16px 18px;
  background: var(--surface); color: var(--tinta);
  border: 1px solid var(--fio); border-radius: var(--raio-xl); box-shadow: var(--sombra-g);
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.aviso-cookies__botoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* WhatsApp com mais de uma mensagem para a mesma função: o botão principal
   manda a mensagem principal; "Outra mensagem" abre as alternativas. */
.whats-botoes { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.whats-mais { position: relative; }
.whats-mais > summary { list-style: none; cursor: pointer; }
.whats-mais > summary::-webkit-details-marker { display: none; }
.whats-mais__lista {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  min-width: 240px; max-width: min(340px, 86vw); padding: 6px;
  background: var(--surface); border: 1px solid var(--fio);
  border-radius: var(--raio-lg); box-shadow: var(--sombra-g);
}
.whats-mais__lista a {
  display: block; padding: 10px 12px; min-height: 44px; box-sizing: border-box;
  color: var(--tinta); text-decoration: none; border-radius: var(--raio-md);
}
.whats-mais__lista a:hover, .whats-mais__lista a:focus-visible { background: var(--tela); }

/* ---------------------------------------------------------------------
   MOVIMENTO — só o que já está acima (150ms nas trocas de cor). Quem pediu
   menos movimento fica sem nenhuma transição.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .abas a, .tabela tbody tr, .doc-sumario a,
  .entrada, select, textarea { transition: none; }
}

/* ---------------------------------------------------------------------
   ANIVERSARIANTES (Visão de colaboradores, v1.58): os próximos primeiro;
   quem já fez aniversário no mês desce para o fim, com o dia apagado.
   --------------------------------------------------------------------- */
.aniv-lista { list-style: none; margin: 6px 0 0; padding: 0; }
.graf-mais > .aniv-lista { margin-top: var(--sp-2); }
.aniv {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 8px 0; border-top: 1px solid var(--fio);
}
.aniv__dia { min-width: 2.2em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.aniv__unidade { margin: 0 0 0 auto; }
.aniv--passou .aniv__dia { color: var(--muted-soft); font-weight: 600; }

/* Passo a passo (Integrações → Google Drive, v1.59): número em pílula e o
   bloco de código com o botão de copiar colado nele. */
.drive-passos { margin: var(--sp-4) 0 0; border: 1px solid var(--fio); border-radius: 14px; }
.drive-passos > summary {
  list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center;
  padding: 10px 16px; font-weight: 800; color: var(--tinta); border-radius: 14px;
}
.drive-passos > summary::-webkit-details-marker { display: none; }
.drive-passos > summary::before {
  content: ''; width: 8px; height: 8px; margin-right: 12px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .2s ease;
}
.drive-passos[open] > summary::before { transform: rotate(45deg); }
.drive-passos > summary:hover { background: var(--linha-hover); }
.drive-passos > :not(summary) { margin-left: 16px; margin-right: 16px; }
.drive-passos > :last-child { margin-bottom: 16px; }
.passos { counter-reset: passo; list-style: none; padding: 0; margin: var(--sp-2) 16px var(--sp-4); }
.passos > li { counter-increment: passo; position: relative; padding: 0 0 var(--sp-4) 40px; line-height: 1.55; }
.passos > li::before {
  content: counter(passo); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--tinta); color: var(--sobre-cor); font-weight: 800; font-size: 13px;
}
.codigo-copiar { display: grid; gap: 8px; margin: 10px 0 6px; }
.codigo-copiar .btn { justify-self: start; }
textarea.codigo {
  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  font-size: 12.5px; line-height: 1.5; white-space: pre; overflow: auto; resize: vertical;
  background: var(--linha-hover);
}
@media (prefers-reduced-motion: reduce) { .drive-passos > summary::before { transition: none; } }

/* ---------------------------------------------------------------------
   RESPONDER (avaliação e pesquisa pelo link, v1.59)
   --------------------------------------------------------------------- */
/* A orientação e o formulário são irmãos direto da página do site: sem isto
   a primeira pergunta encostava no cartão de orientação. */
.pagina-corpo > :is(.cartao, .aviso) + form,
.pagina-corpo > form > .aviso + .cartao,
.pagina-corpo > form > .responder-rascunho + .cartao { margin-top: var(--sp-5); }
.pagina-corpo > .aviso + .cartao, .pagina-corpo > .aviso + form { margin-top: var(--sp-4); }
/* A escala com "Não observei" tem 6 opções: 6 colunas, e não a sexta sozinha
   numa segunda linha. */
@media (min-width: 700px) {
  .pesquisa-escala--6 { grid-template-columns: repeat(6, 1fr); }
  .pesquisa-escala--5 { grid-template-columns: repeat(5, 1fr); }
}
.orientacao { margin: 0 0 var(--sp-3); }
.orientacao > summary { cursor: pointer; font-weight: 700; color: var(--azul-700); min-height: 44px; display: flex; align-items: center; }
.orientacao > p { margin-top: 0; }
.campo--exigido > label { color: var(--tinta); }
.campo--exigido textarea { border-color: var(--azul-400); }

.responder-progresso {
  position: sticky; bottom: 0; z-index: 20;
  margin: var(--sp-5) calc(-1 * var(--sp-2)) 0; padding: 10px var(--sp-2) calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(238, 241, 246, 0) 0%, var(--tela) 22%);
}
.responder-progresso__caixa {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px;
  padding: 10px 14px; border-radius: 16px; background: var(--surface);
  box-shadow: 0 -2px 10px rgba(11, 42, 71, .06), 0 8px 24px rgba(11, 42, 71, .12);
}
.responder-progresso__texto { font-size: 14px; color: var(--muted); }
.responder-progresso__texto strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.responder-progresso__trilho { grid-column: 1 / -1; grid-row: 2; height: 6px; border-radius: var(--raio-full); background: var(--tela); overflow: hidden; }
.responder-progresso__trilho span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--azul); transition: width .25s ease; }
.responder-progresso--completo .responder-progresso__trilho span { background: var(--verde); }
.responder-progresso__ir { grid-column: 2; grid-row: 1; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .responder-progresso__trilho span { transition: none; } }
.responder-rascunho { margin-bottom: var(--sp-4); }
/* "Estou ciente" com a explicação ao lado, quebrando para baixo no celular. */
.ciente-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 0; }
.ciente-form .dica { margin: 0; }

/* Lista simples de itens com ação à direita (Minha admissão, v1.58). */
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 10px 0; border-top: 1px solid var(--fio);
}
.lista-simples li:first-child { border-top: 0; }
.lista-simples li > a { margin-left: auto; font-weight: 700; }

/* Linha de dois cartões que NÃO estica o vizinho (v1.58). Quando um dos
   lados pode crescer — lista com "Ver todos", comentários —, esticar o outro
   até a mesma altura criava a caixa alta e vazia (4 mil pixels na avaliação
   de desempenho). Aqui cada cartão tem a altura do que mostra. */
@media (min-width: 1024px) { .grade-2.grade-2--topo { align-items: start; } }
/* Gráfico de volume (Métricas) ao lado de um cartão mais alto (v1.58): em vez
   de sobrar 270px de cartão vazio embaixo, as colunas crescem até a altura do
   vizinho. O cartão já é coluna flex dentro de .grade-2--iguais. */
@media (min-width: 1024px) {
  .grade-2--iguais:not(.grade-2--topo) > .cartao > .met-grafico { flex: 1 0 180px; height: auto; max-height: 420px; }
}
/* (v1.97.1) QA L12 — par de gráficos em que um deles está VAZIO ("Nenhuma
   vaga cancelada no período", Métricas): esticado até a rosca do vizinho, o
   cartão ficava com 360px e 138 de conteúdo. Sem dado não há par a alinhar:
   cada cartão com a altura do que mostra, como no .grade-2--topo. */
@media (min-width: 1024px) {
  .grade-2.grade-2--iguais:has(> .cartao > .graf-vazio) { align-items: start; }
  /* (v1.99.0) QA L6: a mesma decisão para o vazio de lista (.vazio, "Nenhum
     exame registrado" na ficha): a Saúde ocupacional esticava até a altura dos
     Registros, com 190px vazios embaixo. */
  /* (v1.99.0, conferência) Só o cartão VAZIO deixa de esticar: soltar o par
     inteiro desencontrava os rodapés quando o vazio era o mais alto (o vizinho
     com dado não acompanhava). Os dois vazios voltam a esticar juntos. */
  .grade-2.grade-2--iguais > .cartao:has(> .vazio) { align-self: start; }
  .grade-2.grade-2--iguais > .cartao:has(> .vazio):has(~ .cartao > .vazio),
  .grade-2.grade-2--iguais > .cartao:has(> .vazio) ~ .cartao:has(> .vazio) { align-self: stretch; }
}
/* Formulário numa coluna de .grade-2: três campos por linha ficavam
   espremidos em meia tela; dois cabem. */
@media (min-width: 1024px) { .form-grade.form-grade--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------
   ABAS DE CONTEÚDO (v1.58) — o mesmo segmentado das abas de navegação,
   com <button role="tab">: trocam o painel sem sair da página.
   --------------------------------------------------------------------- */
.abas [role="tab"] {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--alvo); max-width: 100%; padding: 8px 14px;
  border: 0; border-radius: var(--raio-full); background: transparent;
  color: var(--muted); font: inherit; font-weight: 700; font-size: 14px; line-height: 1.25;
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.abas [role="tab"]:hover { background: var(--tela); color: var(--tinta); }
.abas [role="tab"][aria-selected="true"] { background: var(--tinta); color: var(--sobre-cor); }
.abas [role="tab"] .contador { color: var(--muted-soft); font-weight: 600; }
.abas [role="tab"][aria-selected="true"] .contador { color: var(--lima); }
.abas [role="tab"]:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.abas--conteudo { margin: var(--sp-2) 0 var(--sp-4); box-shadow: none; background: var(--tela); border-color: transparent; }
.abas--conteudo [role="tab"]:hover { background: var(--surface); }
@media (max-width: 767px) { .abas [role="tab"] { flex: 1 1 auto; justify-content: center; } }

/* ---------------------------------------------------------------------
   AVALIAÇÃO INDIVIDUAL (v1.58)
   --------------------------------------------------------------------- */
/* A competência leva a sobra da largura: com nomes longos ("Trabalha bem em
   equipe e garante o engajamento de todos") e oito colunas de número, a
   primeira coluna ficava com 116px e cada nome virava sete linhas. */
.tabela--competencias th:first-child { width: 34%; min-width: 220px; }
.tabela--competencias td.num, .tabela--competencias th.num { text-align: center; white-space: nowrap; }
.tabela--competencias th.num { white-space: normal; min-width: 56px; }
.tabela--competencias td.num .dica { white-space: normal; }
/* A nota leva o rótulo embaixo ("Acima do esperado"): com a largura do número
   ele quebrava em cinco linhas e cada competência ficava com 127px de altura. */
.tabela--competencias td[data-rotulo="Nota"] { min-width: 124px; }
.escala-legenda {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-4) 0 var(--sp-2); padding: 0;
}
.escala-legenda li { padding: 4px 10px; border-radius: var(--raio-full); background: var(--tela); font-size: 12.5px; color: var(--muted); }
.escala-legenda strong { color: var(--tinta); }
.nota-selo {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--raio-full);
  background: var(--realce-suave); color: var(--azul-700); font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
/* O painel de cada aba: min-width 0 para o texto longo quebrar dentro dele. */
.aval-grupo { min-width: 0; }
.aval-grupo__quem { padding: var(--sp-3) var(--sp-4); border-radius: 14px; background: var(--tela); margin-bottom: var(--sp-4); }
.aval-grupo__quem .graf-mais > summary { background: var(--surface); margin-top: var(--sp-2); }
.aval-grupo__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.aval-grupo__linha + .aval-grupo__linha { margin-top: 6px; }
.aval-grupo__nomes { list-style: none; margin: var(--sp-2) 0 0; padding: 0; columns: 2 240px; column-gap: var(--sp-5); }
.aval-grupo__nomes li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; break-inside: avoid; font-size: 14px; }
.aval-grupo__titulo { margin: var(--sp-4) 0 var(--sp-2); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.aval-grupo__quem + .aval-grupo__titulo { margin-top: 0; }
.aval-com {
  margin: 0; padding: 12px 14px; border-left: 3px solid var(--azul-400); border-radius: 0 12px 12px 0;
  background: var(--linha-hover); color: var(--text); line-height: 1.55; overflow-wrap: anywhere;
}
.aval-com + .aval-com, .graf-mais > .aval-com { margin-top: var(--sp-2); }
.aval-com--geral { border-left-color: var(--tinta); background: var(--realce-suave); }
.aval-com__nota { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.aval-comps { display: grid; gap: var(--sp-4); }
.aval-comp { padding-top: var(--sp-3); border-top: 1px solid var(--fio); }
.aval-comp:first-child { padding-top: 0; border-top: 0; }
.aval-comp__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: var(--sp-2); }
.aval-comp .graf-mais { margin-top: var(--sp-2); }
/* Competência que abre (grupo grande): a linha inteira é o botão. */
.aval-comps--recolhe { gap: 0; }
.aval-comps--recolhe .aval-comp { padding: 0; border-top: 1px solid var(--fio); }
.aval-comps--recolhe .aval-comp:first-child { border-top: 0; }
.aval-comps--recolhe .aval-comp__topo {
  list-style: none; cursor: pointer; margin: 0; padding: 12px 36px 12px 4px; min-height: 44px;
  position: relative; border-radius: 10px; transition: background-color .15s ease;
}
.aval-comps--recolhe .aval-comp__topo::-webkit-details-marker { display: none; }
.aval-comps--recolhe .aval-comp__topo:hover { background: var(--linha-hover); }
.aval-comps--recolhe .aval-comp__topo::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.aval-comps--recolhe .aval-comp[open] > .aval-comp__topo::after { transform: translateY(-30%) rotate(-135deg); }
.aval-comps--recolhe .aval-comp[open] { padding-bottom: var(--sp-3); }
.aval-comps--recolhe .aval-comp__topo .contador { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--muted-soft); }
@media (prefers-reduced-motion: reduce) { .aval-comps--recolhe .aval-comp__topo::after { transition: none; } }

/* =====================================================================
   HOME — ANIMAÇÕES (v1.60, home-anima.js + rolagem.js)
   Tudo aqui depende de classe posta por script (`home-coreo`, `anima-ligada`,
   `anima--dentro`): sem JavaScript, ou com "menos movimento" no aparelho,
   nada disto casa e a página fica parada e completa.
   ===================================================================== */

/* 1. Topo: escondido até a coreografia começar (a linha do <head> põe, o
      home-anima.js tira — ou a própria linha, em 3 s). */
html.home-coreo [data-coreo] > h1,
html.home-coreo [data-coreo] > p,
html.home-coreo [data-coreo] .hero__acoes,
html.home-coreo [data-coreo] .hero__numero { opacity: 0; }

/* Cada palavra do título sai de trás de uma máscara. O respiro embaixo não
   corta a perna do "g" e do "ç". */
.hp { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.hp__i { display: inline-block; }

/* Brilho que atravessa o botão principal UMA vez, depois que ele assentou. */
.hero-cta--brilho { position: relative; overflow: hidden; isolation: isolate; }
.hero-cta--brilho::after {
  content: ''; position: absolute; top: -2px; bottom: -2px; left: 0; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent 0%, rgba(0, 108, 181, .22) 50%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg);
  animation: cta-brilho 1.1s cubic-bezier(.4, 0, .2, 1) 1 forwards;
  pointer-events: none;
}
@keyframes cta-brilho { to { transform: translateX(330%) skewX(-18deg); } }

/* 2. O filete azul dos títulos de seção cresce quando o título entra. */
.anima-ligada .secao__titulo[data-anima] h2::after {
  transform: scaleX(0); transition: transform .7s cubic-bezier(.22, 1, .36, 1) .2s;
}
.anima-ligada .secao__titulo[data-anima].anima--dentro h2::after { transform: scaleX(1); }
.anima-ligada .secao-livre__titulo[data-anima]::after {
  transform: scaleX(0); transform-origin: left center; transition: transform .7s cubic-bezier(.22, 1, .36, 1) .2s;
}
.anima-ligada .secao-livre__titulo[data-anima].anima--dentro::after { transform: scaleX(1); }

/* 3. Cartões de vaga. Terminada a cascata, o atraso dela sai (senão valia
      também para o hover) e o cartão volta a ter as transições dele. */
.anima-ligada [data-anima].anima--pronto { transition-delay: 0s; }
@property --luz { syntax: '<number>'; inherits: false; initial-value: 0; }
.vaga-card { transition: border-color .15s, transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .2s, --luz .3s; }
.anima-ligada .vaga-card.anima--pronto {
  transition: border-color .15s, transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .2s, --luz .3s;
}
/* O hover levanta de verdade: a regra da entrada (transform: none, mais
   específica) apagava o translateY do hover depois que o cartão entrava. */
.vaga-card:hover,
.anima-ligada .vaga-card[data-anima].anima--dentro:hover { transform: translateY(-4px); }
/* A luz que segue o mouse (só computador; o home-anima.js escreve --mx/--my). */
.vaga-card:not(.vaga-card--talentos) {
  background-image: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%),
                    rgba(30, 142, 74, calc(.12 * var(--luz))), transparent 62%);
}
@media (hover: hover) and (pointer: fine) {
  .vaga-card:not(.vaga-card--talentos):hover { --luz: 1; }
}

/* 4. "Por que trabalhar": o ícone salta ao entrar, logo depois do cartão. */
.anima-ligada .sobre-card[data-anima] .sobre-card__ico { opacity: 0; }
.anima-ligada .sobre-card[data-anima].anima--dentro .sobre-card__ico {
  animation: ico-salto .6s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms + 200ms);
}
@keyframes ico-salto {
  from { opacity: 0; transform: scale(.4) rotate(-14deg); }
  to   { opacity: 1; transform: none; }
}

/* 5. Seções do RH: a imagem se revela numa cortina que vem do lado em que
      ela fica, e a foto assenta de um zoom leve. */
.anima-ligada .secao-livre__img[data-anima] {
  transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1), clip-path 1s cubic-bezier(.22, 1, .36, 1);
}
.anima-ligada .secao-livre__img[data-anima="esquerda"] { clip-path: inset(0 100% 0 0); }
.anima-ligada .secao-livre__img[data-anima="direita"]  { clip-path: inset(0 0 0 100%); }
.anima-ligada .secao-livre__img[data-anima="escala"]   { clip-path: inset(8% 8% 8% 8%); }
.anima-ligada .secao-livre__img[data-anima].anima--dentro { clip-path: inset(0 0 0 0); }
.anima-ligada .secao-livre__img[data-anima] img { transform: scale(1.12); transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.anima-ligada .secao-livre__img[data-anima].anima--dentro img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.home-coreo [data-coreo] > * { opacity: 1; }
  .hero-cta--brilho::after { animation: none; display: none; }
  .vaga-card:hover { transform: none; }
}

/* ---------------------------------------------------------------------
   LINK PARA A FICHA DO COLABORADOR (v1.60.2)
   Todo nome de funcionario no painel leva a ficha (linkFicha). Onde o nome
   ja leva a outro lugar — relatorio da avaliacao, marco da experiencia —
   entra o atalho de icone ao lado (iconeFicha), com alvo de 44px.
   --------------------------------------------------------------------- */
/* O seletor longo vence as regras de toque da tabela (`.tabela td.principal > a`
   vira inline-block com padding no toque, e `td a` ganha 44px de altura no
   celular) — elas sao para link de texto, nao para um icone redondo. */
.link-ficha,
.tabela td a.link-ficha,
.tabela td.principal > a.link-ficha {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; min-height: 0; padding: 0;
  margin-left: 4px; vertical-align: middle;
  border-radius: 999px; color: var(--muted);
}
.link-ficha::after { content: ''; position: absolute; inset: -8px; }
.link-ficha:hover { background: var(--realce); color: var(--azul); }
/* Dentro de celula colorida e de cartao do organograma o nome continua com a
   cor do lugar; o sublinhado no hover e' que diz que ele leva a algum lugar. */
.box9__nome a, .org-cartao-no a { color: inherit; text-decoration: none; }
.box9__nome a:hover, .org-cartao-no a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------------
   LISTAS DE DESLIGAMENTO E DOWNLOAD (v1.65.0)
   --------------------------------------------------------------------- */
/* Cadastro curto + lista longa (Motivos de demissao). A .grade-2 padrao e'
   2fr/1fr com o conteudo a esquerda: aqui o conteudo e' a LISTA, e o
   formulario de tres campos ficava com dois tercos da tela enquanto 23
   nomes quebravam em tres linhas no terco que sobrava. O formulario vira a
   coluna estreita (272 a 340px) e acompanha a rolagem da lista, para o
   "Editar" do vigesimo motivo nao obrigar a subir a pagina. Abaixo de
   1024px a .grade-2 ja' e' uma coluna so'. */
@media (min-width: 1024px) {
  .grade-2.grade-2--cadastro { grid-template-columns: minmax(272px, 340px) minmax(0, 1fr); }
  .grade-2--cadastro > form.cartao { position: sticky; top: calc(var(--topo-alt) + var(--sp-4)); }
}
.motivos__dica { margin: 0 0 var(--sp-2); }
.linha-secao--sem-motivo { padding-inline: var(--sp-3); margin-inline: calc(-1 * var(--sp-3)); border-radius: 12px; background: var(--tela); }

/* Pastilha que e' link (o "12 desligamentos"): continua com cara de
   etiqueta, mas ganha seta, sublinhado no hover e 44px de alvo por um
   ::after invisivel — a pastilha de 23px, sozinha, e' alvo pequeno demais
   para o dedo. */
.tag--link { position: relative; text-decoration: none; }
.tag--link:hover { text-decoration: underline; text-underline-offset: 2px; }
.tag--link::after { content: ''; position: absolute; inset: -11px -4px; }
.tag--link:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }

/* Matricula ao lado do nome: discreta, com algarismos de largura fixa para
   a coluna nao dancar. */
.matricula { margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Na tabela a matricula desce para baixo do nome: ao lado, ela alargava a
   coluna do nome e espremia as outras oito ("Vendedo-r" em 1366px). */
.tabela td .matricula { display: block; margin: 2px 0 0; }
/* A data da saida em uma linha so: com nove colunas o navegador partia
   "01/09/2026" em "01/09/202" + "6". */
@media (min-width: 768px) { .tabela--desligados td[data-rotulo="Saída"] { white-space: nowrap; } }

/* Os tres downloads da tela de Metricas andam juntos na barra de filtros. No
   celular o grupo ocupa a linha inteira e cada botao divide a largura: em
   320px os tres lado a lado seriam alvos espremidos. */
.acoes-baixar { display: inline-flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
  .acoes-baixar { flex: 1 1 100%; }
  .acoes-baixar .btn { flex: 1 1 auto; justify-content: center; }
}

/* Janela do grafico: "Baixar Excel / Baixar PDF" logo acima da lista, e a
   matricula de cada pessoa na linha. */
.graf-dialogo__baixar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); }
/* A explicacao fica ao lado dos botoes quando cabe (220px) e desce quando nao. */
.graf-dialogo__baixar .dica { flex: 1 1 220px; margin: 0; font-size: 12.5px; }
.graf-dialogo__lista .graf-dialogo__mat { font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* No celular a explicacao desce para a linha de baixo e cada botao fica do
   tamanho do texto (v1.65.1). Com base 0 ao lado da explicacao de 220px, os dois
   botoes sobravam com ~36px e a regra de toque os travava num circulo de 44px,
   com "Baixar Excel" quebrado por cima do icone. */
@media (max-width: 640px) {
  .graf-dialogo__baixar .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
  .graf-dialogo__baixar .dica { flex-basis: 100%; }
}

/* ---------------------------------------------------------------------
   CLICAR NO NUMERO ABRE A LISTA (v1.66.0, ListaDetalhe.php + grafico-detalhe.js)
   O dono clicava nos numeros das Metricas e nada acontecia. O numero continua
   o mesmo (texto, fonte, tamanho); ganha cor de link e sublinhado pontilhado
   para dizer ANTES do clique que abre alguma coisa, e uma area de toque de
   44px feita com padding + margem negativa: o alvo cresce, a linha nao.
   --------------------------------------------------------------------- */
.num-ver {
  display: inline-block; padding: 14px 10px; margin: -14px -10px;
  border: 0; background: none; font: inherit; line-height: inherit;
  color: var(--azul-700); font-weight: 700; cursor: pointer; text-align: inherit;
  text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  border-radius: 10px;
}
.num-ver:hover { text-decoration-style: solid; background: var(--linha-hover); }
/* Numero de 1 ou 2 digitos ficava com 27-36px de LARGURA no celular: o ::after
   estende o alvo para 44x44 sem mexer no layout (revisao v1.66.0). */
.num-ver { position: relative; }
.num-ver::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
/* No primeiro cartao (o escuro) o azul do link sumia (~1,3:1): vira lima. */
.kpis:not(.kpis ~ .kpis) > .kpi:first-child .num-ver { color: var(--lima); }
.kpis:not(.kpis ~ .kpis) > .kpi:first-child .num-ver:hover { background: rgba(255, 255, 255, .14); }
.kpis:not(.kpis ~ .kpis) > .kpi:first-child .num-ver:focus-visible { outline-color: var(--lima); }
.num-ver:focus-visible { outline: 2px solid var(--primaria); outline-offset: -4px; }
/* Numero grande (degrau do funil, cartao de metrica): herda o tamanho. */
.met-numero .num-ver, .met-degrau__valor .num-ver { font-weight: inherit; }

/* Cartao de numero: o "ver quem" se estica sobre o cartao inteiro (::after),
   e o toque vale no cartao todo sem trocar o numero de lugar. */
.kpi--lista { position: relative; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.kpi--lista:hover { box-shadow: 0 2px 4px rgba(11, 42, 71, .06), 0 10px 26px rgba(11, 42, 71, .10); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .kpi--lista:hover { transform: none; } }
.kpi__gatilho {
  align-self: flex-start; padding: 0; border: 0; background: none;
  font-family: inherit; cursor: pointer; text-decoration: none;
}
.kpi__gatilho::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.kpi__gatilho:hover { text-decoration: underline; }
.kpi__gatilho:focus-visible { outline: none; }
.kpi__gatilho:focus-visible::after { outline: 2px solid var(--primaria); outline-offset: 2px; border-radius: var(--raio-card); }
/* Outro link dentro do cartao continua clicavel por cima do esticado. */
.kpi--lista .kpi__nota a, .kpi--lista .num-ver { position: relative; z-index: 1; }
/* (v1.99.0) QA L1: o anel do "ver quem" nascia 2px FORA do cartao, e o
   overflow: hidden do .kpi (que segura o anel decorativo do destaque) cortava
   tudo: com Tab, nenhum pixel mudava no cartao branco. O anel passa para
   DENTRO da borda; no cartao-destaque (marinho) ele e lima, como o .num-ver. */
.kpi__gatilho:focus-visible::after { outline-offset: -3px; }
.kpis:not(.kpis ~ .kpis) > .kpi:first-child .kpi__gatilho:focus-visible::after { outline-color: var(--lima); }

/* Etiqueta que abre a lista (Motivos de demissao): quando nao ha tela de
   destino ela e botao, e o botao nao pode trazer a borda do navegador. */
button.tag--link { border: 0; cursor: pointer; font-family: inherit; }
/* A etiqueta-botao ganha a mesma altura da etiqueta-link (a.tag, app.css):
   lado a lado na lista de motivos, as duas tem de ter o mesmo tamanho. */
@media (pointer: coarse) {
  button.tag--link { min-height: 32px; padding: 0 12px; }
}

/* A linha de baixo de um item de candidatura ou vaga: vaga, unidade, etapa,
   situacao. Desce inteira para baixo do nome e quebra onde precisar. */
.graf-dialogo__lista .graf-dialogo__meta { order: 10; flex: 1 1 100%; min-width: 0; margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.graf-dialogo__lista .graf-dialogo__meta a { font-weight: 600; display: inline-block; padding-block: 6px; }
.graf-dialogo__lista .graf-dialogo__tag { font-size: 12px; }
.graf-dialogo__tela { margin-top: var(--sp-4); font-weight: 700; }
.graf-dialogo__tela a { display: inline-flex; align-items: center; min-height: 44px; }

/* Volume de candidaturas (Metricas): cada coluna abre o detalhe. */
.met-col[data-graf-item] { cursor: pointer; border-radius: 4px 4px 0 0; }
.met-col[data-graf-item]:hover .met-col__pilha { filter: brightness(.88); }
.met-col[data-graf-item]:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; }

/* ---------------------------------------------------------------------
   FICHA DO COLABORADOR (v1.67.0, painel/colaborador-ficha.php)
   O desligamento saiu do cadastro para um cartão próprio, o cadastro virou
   quatro grupos com um botão só, e a ficha ganhou um índice. Nada aqui mexe
   em app.css: são classes novas, com prefixo .ficha-, mais o acerto do
   filete do título.
   --------------------------------------------------------------------- */

/* O FILETE DO TÍTULO. `.ficha-titulo` é flex (foto + nome), e o filete de
   .painel__cabecalho h1::after virava um terceiro item AO LADO do nome. A
   margem que completa a linha manda o filete para a linha de baixo sem
   alargá-lo: ele continua com 36px. */
.ficha-titulo::after { flex: none; margin-right: calc(100% - 36px); }
.ficha-titulo__nome { min-width: 0; overflow-wrap: anywhere; }
.ficha-titulo__nome .tag { vertical-align: middle; font-family: var(--fonte); letter-spacing: 0; }

/* A faixa do desligado, antes dos números. */
.ficha-faixa { margin-bottom: var(--sp-5); }
.ficha-faixa > svg { margin-top: 2px; }
.ficha-faixa strong { color: inherit; }

/* Quatro números. Abaixo de 480px, DOIS por linha (eram cinco empilhados,
   ~550px antes do primeiro campo). O cartão-destaque perde parte do recuo
   da direita, senão "Desligado" não cabe ao lado do anel de lima. */
.kpi__valor--texto { font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.kpis--ficha .kpi__nota { overflow-wrap: anywhere; }
@media (max-width: 479.98px) {
  .kpis.kpis--ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpis--ficha .kpi { padding: 14px; }
  .kpis.kpis--ficha:not(.kpis ~ .kpis) > .kpi:first-child { padding-right: 36px; }
  /* Anel menor: no cartão de 138px o de 96px passava por cima da data. */
  .kpis.kpis--ficha:not(.kpis ~ .kpis) > .kpi:first-child::after {
    width: 60px; height: 60px; right: -22px; bottom: -22px; border-width: 10px;
  }
  .kpi__valor--texto { font-size: 17px; }
}

/* O ÍNDICE. O .doc-sumario gruda em top:0, e no painel a barra do topo
   (sticky, z-index 45) também: o índice sumia atrás dela. Na ficha ele gruda
   logo abaixo da barra. No celular rola junto com a página — barra + índice
   grudados comeriam um quarto da tela. */
.ficha-sumario { top: var(--topo-alt); }
@media (max-width: 767px) { .ficha-sumario { position: static; } }
/* Quem chega por uma âncora da ficha não fica escondido atrás da barra e do
   índice. Vale para todo id depois do índice (ficha-*, #equipe,
   #perfil-comportamental), e só nesta tela. */
.ficha-sumario ~ [id], .ficha-sumario ~ * [id] { scroll-margin-top: 150px; }
@media (max-width: 767px) {
  .ficha-sumario ~ [id], .ficha-sumario ~ * [id] { scroll-margin-top: 84px; }
}

/* O CADASTRO EM GRUPOS: fieldset sem moldura (o cartão já é a moldura), um
   filete entre os grupos e a legenda no peso de título de cartão. */
.ficha-grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.ficha-grupo + .ficha-grupo { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--fio); }
/* A legenda FLUTUA (float + 100%): sem isso o navegador a desenha dentro da
   borda de cima do fieldset, e o filete passava pelo meio do título em vez
   de ficar acima dele. O que vem depois limpa o float. */
.ficha-grupo__titulo {
  float: left; width: 100%; padding: 0; margin: 0 0 var(--sp-3);
  font-family: var(--fonte); font-weight: 800; font-size: 15px; color: var(--tinta);
}
.ficha-grupo__titulo + * { clear: both; }
.ficha-grupo__nota { margin: var(--sp-3) 0 0; max-width: 72ch; }
/* O rótulo do que é só leitura (Situação do desligado, Lidera), com a mesma
   cara e a mesma reserva de altura do <label> da .form-grade — os campos da
   linha continuam alinhados. */
.ficha-rotulo { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--tinta); }
@media (min-width: 641px) {
  .form-grade > .campo > .ficha-rotulo:first-child { min-height: calc(1.3em * 2); display: flex; align-items: flex-end; }
}
.ficha-valor { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: var(--alvo); }
.ficha-valor a:not(.num-ver) { display: inline-flex; align-items: center; min-height: var(--alvo); font-weight: 600; }
.ficha-aviso { margin: 8px 0 0; }
/* O botão preso embaixo não cobre o campo em que se está: o foco rola o
   campo para cima da barra. */
.ficha-cadastro :is(input, select, textarea) { scroll-margin-bottom: 96px; }
.ficha-cadastro .salvar-fixo { margin-top: var(--sp-5); }
.ficha-cadastro__botoes { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
/* No celular a barra presa fica com UM botão, de largura inteira: com a nota e
   o "Voltar" empilhados ela passava de 200px e cobria um terço da tela. A
   volta continua na trilha do topo e no voltar do aparelho. */
@media (max-width: 479.98px) {
  .ficha-cadastro .salvar-fixo__nota, .ficha-cadastro__botoes .btn--fantasma { display: none; }
  .ficha-cadastro__botoes { width: 100%; }
  .ficha-cadastro__botoes .btn { flex: 1 1 auto; }
}

/* O DESLIGAMENTO. Para quem saiu: borda de alerta no molde do
   .cartao--urgente (a palavra "Desligado" vai junto — a cor não é o único
   sinal). Para quem está no quadro: acordeão fechado. */
.cartao--desligado { border-top: 3px solid var(--verm-escuro); }
.ficha-resumo {
  margin: 0; display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
}
.ficha-resumo > div { min-width: 0; padding: 10px 12px; border: 1px solid var(--fio); border-radius: 12px; background: var(--surface); }
.ficha-resumo dt { margin: 0 0 2px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ficha-resumo dd { margin: 0; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; white-space: pre-line; }
.ficha-resumo__cheio { grid-column: 1 / -1; }
.ficha-deslig__editar { margin: var(--sp-4) 0 var(--sp-5); }
/* "Editar dados do desligamento" era texto de 20px de altura: alvo de 44px
   em qualquer tela (o app.css só dá no toque). A altura vem do padding, e não
   de display:flex, para o <summary> continuar list-item e não perder o
   triângulo de abrir/fechar. */
.ficha-deslig__editar > summary {
  font-weight: 700; line-height: 1.5;
  padding-block: calc((var(--alvo) - 1.5em) / 2);
}
.ficha-deslig__editar > .ficha-deslig__form { margin-top: var(--sp-3); }
.ficha-deslig__obs { min-height: 88px; }
/* A peça da pesquisa (QuestionarioEnvio) entra DENTRO deste cartão: se ela
   vier como .cartao, vira um painel interno, sem a sombra de cartão solto. */
.cartao--desligado .cartao { margin-top: var(--sp-4); box-shadow: none; border: 1px solid var(--fio); }
.ficha-recontratar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.ficha-recontratar .campo { margin: 0; flex: 0 1 240px; min-width: 0; }
@media (max-width: 479.98px) {
  .ficha-recontratar .campo, .ficha-recontratar .btn { flex: 1 1 100%; }
}
.ficha-deslig .acordeao__titulo { color: var(--verm-escuro); }

/* Subtítulo dentro de cartão (Metas, PDI, Recontratar...): era um
   h3.cartao__titulo com style= no HTML. */
.ficha-subtitulo {
  margin: var(--sp-5) 0 var(--sp-2);
  font-family: var(--fonte); font-weight: 800; font-size: 15px; color: var(--tinta);
}
.cartao__topo + .ficha-subtitulo, .ficha-acoes + .ficha-subtitulo { margin-top: 0; }

/* AÇÕES DE LINHA NO ALTO DO CARTÃO: "Criar marco", "Incluir em ciclo",
   "Atribuir prova". O botão é o <summary>; aberto, o formulário compacto
   ocupa a linha inteira. Um primário por bloco: o do formulário, que só
   aparece quando se pede. */
.ficha-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sp-4); }
.ficha-acao { min-width: 0; }
.ficha-acao[open] { flex: 1 1 100%; }
.ficha-acao > summary { list-style: none; cursor: pointer; }
.ficha-acao > summary::-webkit-details-marker { display: none; }
.ficha-acao[open] > summary { background: var(--realce-suave); border-color: var(--azul-300); color: var(--azul-700); }
.ficha-acao__corpo {
  margin-top: 10px; padding: var(--sp-4);
  border: 1px solid var(--fio); border-radius: 14px; background: var(--linha-hover);
}
.ficha-acao__corpo .form-grade, .ficha-acao__corpo > .campo { margin-bottom: 10px; }
.ficha-acao__escolha { margin-bottom: 10px; }

/* Perfil Comportamental e Provas (tiram os style= do HTML). */
.ficha-perfil { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.ficha-perfil__fator { display: flex; align-items: center; gap: 8px; }
.ficha-perfil__nota { margin: var(--sp-3) 0 0; }
.ficha-prova__link { margin-top: 8px; min-width: 0; }
.ficha-prova__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }

/* Pequenos acertos de margem que moravam em style= na vista. */
.ficha-dica--junta { margin: 0; }
.ficha-dica--topo { margin-top: 0; }
.ficha-dica--abaixo { margin: 6px 0 0; }
.ficha-rodape--junto { margin-top: 8px; }
/* Só o vazio do Desenvolvimento tem dois parágrafos; sem o escopo, a regra
   valia para todo .vazio do painel. */
#ficha-desenvolvimento .vazio p + p { margin-top: 6px; }
/* O link de cada marco de experiência (41px): alvo de 44px. */
#ficha-desenvolvimento .linha-secao__info > a.item-link { display: inline-flex; align-items: center; min-height: var(--alvo); }
/* "Ligar para o contato de emergência" (v1.67.0): link dentro da dica, com
   alvo de 44px — é o que se toca no celular na hora do acidente. Na linha
   de baixo (flex, e não inline-flex): ao lado do texto, os 44px empurravam a
   última palavra da dica para baixo. */
.ficha-ligar {
  display: flex; width: max-content; max-width: 100%;
  align-items: center; gap: 6px; min-height: var(--alvo);
  font-weight: 700; overflow-wrap: anywhere;
}
.ficha-ligar > svg { flex: none; }

/* Pesquisas respondidas: acordeão dentro de cartão, sem a sombra de solto. */
.acordeao--plano { box-shadow: none; }
.acordeao__titulo--menor { font-size: 1rem; }
.ficha-pergunta { margin: 0 0 2px; }
.ficha-resposta { white-space: pre-wrap; overflow-wrap: anywhere; }

/* (v1.69.0) frente desempenho */
/* Acompanhamento do ciclo: o filtro da aba Participantes mais a Situação são
   seis itens; na grade de cinco do desktop o botão Filtrar caía sozinho numa
   segunda linha. Abaixo de 1024px vale a grade de sempre (1 ou 2 colunas). */
@media (min-width: 1024px) {
  .filtros.filtros--acomp { grid-template-columns: 2fr 1fr 1.2fr 1fr 1fr auto; }
}
/* (v1.97.1) QA L15 — a 1280px a Situação ficava com 133px e mostrava
   "Não responderam" cortado (o ciclo encerrado troca "Pendentes" por esse
   rótulo). Ela ganha a folga que a Busca tinha sobrando; a Busca continua
   cabendo o "Avaliado ou quem avalia". */
@media (min-width: 1024px) {
  .filtros.filtros--acomp { grid-template-columns: 1.6fr 1.4fr 1.2fr 1fr 1fr auto; }
}
/* Relatório individual: "Anterior · 12 de 379 · Próxima sem devolutiva", com
   o alvo de 44px da paginação, à esquerda como o resto do cabeçalho. */
.aval-nav { justify-content: flex-start; margin-top: var(--sp-3); }
.aval-nav .paginacao__item { gap: 6px; }
.aval-nav__pos { font-size: 14px; color: var(--muted); }
/* "X de Y ainda sem texto" debaixo de Liberar devolutiva: o número abre a lista. */
.aval-sem-texto { margin: 8px 0 0; }

/* (v1.69.0) frente estrutura-pesquisa */
/* Convidado da pesquisa: o botão de WhatsApp e, embaixo, o link próprio.
   Coluna, e não linha: ao lado do botão o link encolhia até ficar ilegível
   a 320px. O link ocupa a largura toda e não empurra a página para o lado. */
.convite-envio {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; margin-top: 8px; min-width: 0; max-width: 100%;
}
.convite-envio .entrada--link { margin-top: 0; width: 100%; min-width: 0; }
/* Ficha do cargo: "sugestão — ainda não salva" com o botão ao lado; no
   celular o botão desce de linha em vez de espremer a etiqueta. */
.perfil-sugestao { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
/* Perfil Comportamental: "Salvar os perfis desta lista" em cima da tabela. */
.perfil-lote { margin: 0 0 var(--sp-3); }

/* (v1.69.0) frente admissao */
/* Minha admissão: o que falta em atalhos, abaixo da barra (item 25). Cada
   atalho é um alvo de 44px e quebra o nome em vez de alargar a tela em 320px;
   o recusado vem com a borda vermelha e o motivo embaixo. */
.adm-faltam { margin-top: var(--sp-3); }
.adm-faltam__titulo { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.adm-faltam__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.adm-faltam__lista > li { min-width: 0; max-width: 100%; }
.adm-faltam__item {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--alvo); max-width: 100%; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: var(--raio-md);
  background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere;
}
.adm-faltam__item:hover, .adm-faltam__item:focus-visible { border-color: var(--azul); color: var(--azul); }
.adm-faltam__item > svg { flex: none; }
.adm-faltam__item > span { min-width: 0; }
.adm-faltam__item small { display: block; font-size: 12.5px; font-weight: 400; color: var(--verm-escuro); }
.adm-faltam__item--refazer { border-color: var(--verm-escuro); }
.adm-faltam__item--refazer > svg { color: var(--verm-escuro); }
/* Documento entregue: o envio fica recolhido em "Trocar arquivo" (item 25). */
.doc-trocar { margin-top: 4px; }
.doc-trocar > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.doc-trocar > summary::-webkit-details-marker { display: none; }
.doc-trocar[open] > summary { margin-bottom: 8px; }
/* Admissão do DP: "liberar acesso" (item 24) e "Ver a mensagem exata"
   (item 23) com alvo de 44px; os rótulos WhatsApp/e-mail da prévia. */
.adm-liberar { display: inline-flex; align-items: center; min-height: var(--alvo); }
/* O summary continua item de lista (convenção do app.css): inline-flex
   apagava a setinha do <details>. O alvo de 44px vem do padding. */
.adm-previa > summary { cursor: pointer; line-height: 1.5; padding-block: calc((var(--alvo) - 1.5em) / 2); }
.adm-previa__rotulo { margin: 10px 0 0; font-size: 13.5px; }

/* (v1.69.0) frente recrutamento */
/* Ficha do candidato: avançar, WhatsApp e desclassificar na própria
   candidatura (item 2). Os botões quebram linha no celular; o motivo da
   desclassificação, que no funil flutua sobre a tabela, aqui abre NO FLUXO,
   na largura toda: flutuando a partir de um botão no canto esquerdo, a caixa
   de 290px passava da borda em 320px e criava rolagem lateral. */
.ficha-cand__acoes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 10px; }
.ficha-cand__acoes > form { margin: 0; }
.ficha-cand__acoes > .btn { min-height: var(--alvo); }
.ficha-cand__acoes .menu-motivo[open] { display: block; }
.ficha-cand__acoes form:has(> .menu-motivo[open]) { flex-basis: 100%; }
.ficha-cand__acoes .menu-motivo__caixa {
  position: static; width: auto; max-width: none;
  margin-top: 8px; box-shadow: none;
}
.ficha-cand__acoes .menu-motivo__caixa .escolha { margin: 0 0 2px; min-height: var(--alvo); }
.ficha-cand__acoes .menu-motivo__caixa .entrada { margin-top: 8px; }
.ficha-cand__acoes .menu-motivo__caixa .btn { margin-top: 8px; }
.ficha-cand__pergunta { display: block; margin-bottom: 6px; font-size: 13.5px; }
.ficha-cand__retido { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; }
.ficha-cand__retido > svg { flex: none; margin-top: 2px; }
/* "Indicar uma vaga" com o e-mail retido pelo bloqueio do Sólides (item 98). */
.ficha-indicar__retido { margin: 10px 0; }
.ficha-indicar__links { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; min-width: 0; }
.ficha-indicar__links .dica { margin: 6px 0 0; }
.ficha-indicar__whats > summary { display: flex; align-items: center; min-height: var(--alvo); }
/* Correção da prova: o nome do candidato leva à ficha. Fica no primeiro
   cartão de número, que é azul: o link herda a cor clara dele e se marca
   pelo sublinhado; alvo de 44px. */
.kpi__valor .correcao__cand {
  display: inline-flex; align-items: center; min-height: var(--alvo);
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* (v1.70.0) frente portal */
/* Tabelas do painel do colaborador (Minha equipe, ciclos da ficha do
   liderado, saúde em Meus registros), item 99. A célula do app.css tem
   overflow-wrap:anywhere para e-mail longo não estourar o cartão, e a
   etiqueta herdava isso: no aperto do celular a palavra curta quebrava no
   meio ("Sólide/s"). Aqui a etiqueta só quebra entre palavras. */
.tabela--portal td .tag { overflow-wrap: normal; word-break: normal; }
.tabela--portal td .tag > svg { flex: none; }
/* Minha equipe (item 87): a etiqueta do marco de experiência fica abaixo do
   nome, separada dele — o nome é o alvo de toque da linha. */
.equipe-marco { margin-top: 4px; }

/* (v1.70.0) frente recrutamento-a */
/* Item 13: quando o papel não abre a ficha do candidato (Candidatos, Banco de
   Talentos) ou não move candidatos (funil da vaga), o link/botão some e uma
   dica diz por quê. Ícone alinhado à primeira linha, texto quebrando ao lado
   dele — em 320px a frase ocupa duas ou três linhas. */
.talentos-sem-ficha, .funil-so-leitura { display: flex; align-items: flex-start; gap: 6px; }
.talentos-sem-ficha > svg, .funil-so-leitura > svg { flex: none; margin-top: 2px; }
.talentos-sem-ficha { margin: var(--sp-2) 0 0; }
.funil-so-leitura { margin: 0 0 12px; }
/* O nome que não é link (papel sem a ficha) mantém o peso do nome-link da
   célula principal (app.css), para a linha não perder o título. */
.tabela td.principal .nome-sem-link { font-family: var(--fonte-titulo); font-size: 15px; font-weight: 600; color: var(--text); }

/* (v1.70.0) frente usuarios */
/* Configurações → Usuários (item 102). Os cartões de número desta tela são
   FILTROS: o destaque azul vai para o filtro ATIVO (aria-current), e não para
   o primeiro da fileira. Antes "Todos" ficava azul com a lista em
   Administradores e parecia ser ele o filtro ligado. As regras do primeiro
   cartão passam da especificidade do destaque geral
   (.kpis:not(.kpis ~ .kpis) > .kpi:first-child) só nesta fileira. */
.kpis--filtro:not(.kpis ~ .kpis) > .kpi:first-child:not([aria-current]) {
  background: var(--surface); color: inherit;
  border-color: var(--fio); padding-right: 20px;
  box-shadow: var(--sombra-cartao);
}
.kpis--filtro:not(.kpis ~ .kpis) > .kpi:first-child:not([aria-current]):hover { background: var(--bg); }
.kpis--filtro:not(.kpis ~ .kpis) > .kpi:first-child:not([aria-current])::after { content: none; }
.kpis--filtro:not(.kpis ~ .kpis) > .kpi:first-child:not([aria-current]) .kpi__rotulo { color: var(--muted); }
.kpis--filtro:not(.kpis ~ .kpis) > .kpi:first-child:not([aria-current]) .kpi__valor { color: var(--tinta); }
.kpis--filtro > .kpi[aria-current] {
  background:
    radial-gradient(circle at 100% 0%, rgba(51, 137, 196, .55) 0, rgba(51, 137, 196, 0) 55%),
    linear-gradient(140deg, var(--tinta) 0%, var(--azul-escuro) 60%, var(--azul) 100%);
  border-color: transparent; color: var(--sobre-cor);
  padding-right: 64px;
  box-shadow: 0 10px 28px rgba(0, 74, 128, .22);
}
.kpis--filtro > .kpi[aria-current]::after {
  content: ''; position: absolute; right: -30px; bottom: -30px;
  width: 96px; height: 96px; border-radius: 50%;
  border: 14px solid var(--lima); opacity: .95;
  pointer-events: none;
}
.kpis--filtro > .kpi[aria-current] .kpi__rotulo,
.kpis--filtro > .kpi[aria-current] .kpi__nota { color: var(--sobre-azul-txt); }
.kpis--filtro > .kpi[aria-current] .kpi__valor { color: var(--sobre-cor); }
.kpis--filtro > .kpi[aria-current].kpi--alerta .kpi__rotulo::before { background: var(--amarelo-warn); }
.kpis--filtro .kpi__nota { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.kpis--filtro .kpi__nota > svg { flex: none; }
/* "Filtro ativo:" por extenso em cima da lista, com o caminho de volta para
   todas as contas (alvo de 44px). A busca longa quebra em vez de alargar a
   página em 320px. */
.usuarios-filtro {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin: 0 0 8px; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere;
}
.usuarios-filtro__rotulo { font-weight: 700; color: var(--muted); }
.usuarios-filtro > a { display: inline-flex; align-items: center; min-height: var(--alvo); font-weight: 700; }
/* Item 99 na tabela de Usuários: a célula do app.css tem overflow-wrap:
   anywhere (e-mail longo), e a etiqueta curta herdava isso e partia no meio
   da palavra no cartão do celular ("Sólide/s"). Aqui ela só quebra entre
   palavras, como na .tabela--portal. */
.tabela--usuarios td .tag { overflow-wrap: normal; word-break: normal; }
.tabela--usuarios td .tag > svg { flex: none; }

/* (v1.70.0) frente desenvolvimento */
/* Calibragem: o aviso "Obrigatória: a posição saiu da régua" desce inteiro
   para baixo do campo no cartão do celular (a célula é flex com o rótulo ao
   lado) e não fica espremido numa coluna ao lado da justificativa. */
.tabela td .calib-aviso { flex: 1 1 100%; margin: 4px 0 0; font-size: 13px; }

/* (v1.70.0) frente admissao */
/* Lista da Admissão e histórico da ficha (item 99): no cartão do celular a
   célula quebra em qualquer ponto (overflow-wrap: anywhere, feito para o
   e-mail longo), e a etiqueta curta partia no meio ("1 d|e 9", "nunca
   en|trou"). A etiqueta fica inteira; se não couber ao lado do rótulo, a
   célula (flex-wrap) a desce inteira para a linha de baixo. */
.tabela--admissao .tag, .tabela--adm-hist .tag { white-space: nowrap; overflow-wrap: normal; max-width: 100%; }
/* Quem não está em admissão (quadro antigo, sem processo aberto — item 31):
   barra cinza, como a etiqueta neutra ao lado. */
.adm-quadro .met-trilho > span { background: var(--muted-soft); }
/* Título do grupo ("Admitidos nos últimos 90 dias (N)"): a nota de onde está
   o resto do grupo sai sem a caixa alta do título. */
.adm-grupo__nota { text-transform: none; letter-spacing: 0; font-weight: 600; }
/* Histórico: o "abrir" com alvo de 44px. */
.adm-hist__abrir { display: inline-flex; align-items: center; min-height: var(--alvo); min-width: var(--alvo); }
/* Ficha: "Recusar e pedir outro" (item 29). O select dos motivos mede pela
   opção mais longa; sem min-width: 0 ele alargava o formulário (grade) e a
   página ganhava rolagem lateral em 320px. */
.doc-excluir__form select { width: 100%; max-width: 100%; min-width: 0; min-height: var(--alvo); }
.doc-excluir__dica { margin: 0; }
.adm-conferir { margin: 0 0 var(--sp-3); }
/* Minha admissão: "Enviar o de <nome>" para o dependente ainda sem arquivo
   (item 32) e "Ir para os documentos dos dependentes" (item 27), com alvo de
   44px e o nome quebrando em vez de alargar a tela. */
.doc-deps__faltam { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.doc-deps__faltam .btn { min-height: var(--alvo); max-width: 100%; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.adm-dep-ir { display: inline-flex; align-items: center; gap: 6px; min-height: var(--alvo); margin-top: 6px; }

/* (v1.70.0) frente gestao */
/* Colaboradores e Métricas do colaborador (item 99): a célula do cartão do
   celular quebra em qualquer ponto (overflow-wrap: anywhere, feito para o
   e-mail longo), e a etiqueta curta partia no meio ("Sólide|s"). Inteira,
   ela desce para a linha de baixo quando não cabe ao lado do nome. */
.tabela--colaboradores .tag, .tabela--metricas .tag { white-space: nowrap; overflow-wrap: normal; max-width: 100%; }
/* Coluna Saída do filtro Desligados (item 46): a data numa linha só — com
   sete colunas o navegador partia "01/09/2026" em "01/09/202" + "6". */
.colab-saida { white-space: nowrap; }
/* Absenteísmo (item 43): o aviso do que ficou fora da lista (as marcações
   de ponto do Sólides). Texto e botão lado a lado quando cabe; no celular o
   botão ocupa a linha de baixo inteira, com o alvo de 44px do btn--pequeno. */
.reg-fora { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 var(--sp-3); padding: 10px 12px; border-radius: 12px; background: var(--tela); }
.reg-fora__texto { display: flex; gap: 8px; align-items: flex-start; flex: 1 1 240px; min-width: 0; margin: 0; font-size: 13.5px; color: var(--muted); }
.reg-fora__texto svg { flex: none; margin-top: 2px; }
.reg-fora .btn { flex: 0 0 auto; }
@media (max-width: 480px) { .reg-fora .btn { flex: 1 1 100%; justify-content: center; white-space: normal; } }

/* (v1.70.1) frente css — ajustes do QA de layout. Só acréscimos. */

/* (v1.70.1) Número-link no cartão destaque (o escuro): o tema pintava de
   branco o .kpi__valor e de lima o .kpi__nota a, mas o link DENTRO do valor
   (Envios da pesquisa de desligamento) ficava com o azul de link sobre o
   marinho — 2,1 a 2,3:1, o "0" quase sumia. Branco (14,6:1) com sublinhado
   pontilhado, como o .num-ver, para continuar dizendo que abre a lista. Só o
   link sem classe: .num-ver e .correcao__cand têm as regras deles. */
.kpis:not(.kpis ~ .kpis) > .kpi:first-child .kpi__valor > a:not([class]) {
  color: var(--sobre-cor);
  text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.kpis:not(.kpis ~ .kpis) > .kpi:first-child .kpi__valor > a:not([class]):hover { text-decoration-style: solid; }
.kpis:not(.kpis ~ .kpis) > .kpi:first-child .kpi__valor > a:not([class]):focus-visible,
.kpis:not(.kpis ~ .kpis) > .kpi:first-child .kpi__nota > a:not([class]):focus-visible { outline-color: var(--lima); }

/* (v1.70.1) "Outra mensagem" do WhatsApp no celular: a lista se ancorava
   pela esquerda do botão e, com o botão na metade direita da tela, passava da
   borda (a 375 e a 412 ia até x=439). Abaixo de 768px ela abre no fluxo,
   logo abaixo do botão e dentro da tela. */
@media (max-width: 767.98px) {
  .whats-mais__lista { position: static; margin-top: 6px; min-width: 0; max-width: 100%; }
}

/* (v1.70.1) Links soltos (fora de frase) abaixo do alvo de 44px no toque:
   número dos cartões de Envios (18x42), o "0" de "aguardando resposta"
   (8x16), "ver admissão" na ficha, "Ligar em Departamentos e cargos" e
   "Esqueci minha senha" (138x20). O mesmo recurso do .num-ver: um ::after
   invisível de no mínimo 44x44, centrado no link — o alvo cresce, a linha
   não. Links dentro de frase ("Não tem conta? Criar agora") ficam de fora,
   como diz o bloco ALVO DE TOQUE do app.css. */
@media (pointer: coarse) {
  .kpi__valor > a:not([class]),
  .kpi__nota > a:not([class]),
  .entrar-link > a { position: relative; }
  .kpi__valor > a:not([class])::after,
  .kpi__nota > a:not([class])::after,
  .entrar-link > a::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: max(100%, var(--alvo)); height: max(100%, var(--alvo));
    transform: translate(-50%, -50%);
  }
  /* A nota fica logo abaixo do número-link: centrado, o alvo dela subia 14px
     sobre o do número e roubava o toque dele. Aqui ele sobe só 6px e cresce
     para baixo, sobre o respiro do cartão. */
  .kpi__nota > a:not([class])::after { top: -6px; transform: translateX(-50%); }
  /* (v1.70.1) Nota com dois links que quebram em duas linhas ("A enviar" a 375): cada linha com a altura do alvo, para o ::after de um não cobrir o do outro. */
  .kpi__nota:has(> a:not([class]) ~ a:not([class])) { line-height: var(--alvo); }
}
/* (v1.97.1) QA L16 — número-link solto numa célula de tabela (Form.
   personalizados → Experiência: o "4" de Respostas tinha 8x44px no
   celular). O mesmo ::after invisível de 44x44, centrado no link. Só link sem
   classe e fora da coluna principal (o nome tem regra própria). */
@media (pointer: coarse) {
  .tabela tbody td:not(.principal) > a:not([class]) { position: relative; }
  .tabela tbody td:not(.principal) > a:not([class])::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: max(100%, var(--alvo)); height: max(100%, var(--alvo));
    transform: translate(-50%, -50%);
  }
}
/* No cartão (abaixo de 1024px) o valor encosta na borda direita da linha, e o
   quadro que rola (.tabela-envolve) cortava a metade de fora do alvo: aqui
   ele cresce para a esquerda, dentro do respiro do cartão. */
@media (pointer: coarse) and (max-width: 1023.98px) {
  .tabela tbody td:not(.principal) > a:not([class])::after { left: auto; right: -8px; transform: translateY(-50%); }
}

/* (v1.70.1) Pesquisa de desligamento na ficha do desligado: o h3 mora dentro
   do .cartao__topo (flex, alinhado ao topo) e a margem de cima de 24px da
   .ficha-subtitulo o deixava 24px abaixo da etiqueta de situação, que devia
   estar na mesma linha. A separação do bloco de cima passa para o topo. */
.cartao__topo > .ficha-subtitulo { margin: 0; }
.questionario-deslig > .cartao__topo { align-items: center; margin-top: var(--sp-5); }

/* (v1.70.1) Usuários no celular: nome, etiqueta e e-mail eram itens flex ao
   lado do rótulo NOME, e a posição mudava com o tamanho do nome (um nome
   curto subia para o lado do rótulo; em dois cartões o e-mail ia para a
   direita da etiqueta). Em coluna, todos os cartões ficam iguais: rótulo,
   nome, etiqueta, e-mail. No desktop a célula é table-cell e nada muda. */
@media (max-width: 1023.98px) {
  .tabela--usuarios td[data-rotulo="Nome"] { flex-direction: column; align-items: flex-start; }
}

/* (v1.71.0) frente admissao */
/* Minha admissão (consultoria item 28): "Dúvidas? Fale com o Departamento
   Pessoal" com o WhatsApp e o e-mail do RH da cidade. O texto ocupa a linha
   inteira e os botões quebram embaixo, então nada rola de lado em 320px. O
   btn--pequeno tem 36px no desktop com mouse; aqui o alvo é 44px sempre,
   como pede o item. min-width: 0 porque é um flex novo. */
.adm-contato {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2); margin-top: var(--sp-3); min-width: 0;
}
.adm-contato__texto { flex: 1 1 100%; margin: 0; color: var(--muted); }
.adm-contato .btn { min-height: var(--alvo); max-width: 100%; }

/* (v1.73.0) frente recrutamento */
/* Formulário da vaga (consultoria item 18): o Título passou para depois do
   Cargo. Na grade de 2 colunas (tablet) isso deixava um buraco ao lado do
   Cargo e separava "Salário — de" de "até" em linhas diferentes. Aqui o
   Cargo ocupa a linha e o "de" começa uma linha nova. Sem `order` e sem
   `dense`: a ordem da tela continua sendo a do HTML e a do Tab. Com 1 coluna
   (celular) e 3 colunas (desktop) nada muda. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .form-grade > .campo--cheio-tablet { grid-column: 1 / -1; }
  .form-grade > .campo--linha-nova-tablet { grid-column-start: 1; }
}

/* (v1.74.0) frente admissao */
/* Ficha da admissão do DP (consultoria item 33): os documentos subiram para
   "Para conferir", e os principais sem arquivo ficam sob o subtítulo "Ainda
   sem arquivo". O .doc-bloco (título pequeno em caixa alta da lista de
   documentos) não tem margem embaixo, e a grade colava nele; o espaço de
   cima já vem da margem de baixo da grade anterior (ou do h2). */
.doc-bloco.adm-sem-arquivo { margin: 0 0 var(--sp-3); }

/* (v1.74.0) frente gestao */
/* Registro de saúde (consultoria item 48): os atalhos "Lançar a ausência no
   Absenteísmo" e "Marcar como Afastado na ficha" ficam ao lado do Editar, no
   mesmo desenho de link dele (13px, negrito), com ícone e alvo de 44px em
   qualquer tela. No celular quebram linha dentro do cartão do registro, sem
   empurrar a página para o lado (min-width: 0 + max-width: 100%). */
.reg-item__atalho {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: var(--alvo); min-width: 0; max-width: 100%;
  font-size: 13px; font-weight: 600; overflow-wrap: anywhere;
}
.reg-item__atalho svg { flex: none; }

/* (v1.76.0) frente estrutura */
/* Ficha do cargo (consultoria item 71): "Esta função existe em: A, B, C (N
   departamentos)", lido de departamento_cargo, logo abaixo do select
   Departamento (edição) e num dt/dd próprio (leitura). Os nomes quebram linha
   (flex-wrap) e podem ser partidos (overflow-wrap), então nada rola de lado em
   320px. Na edição cada nome é link com alvo de 44px. A vírgula entre os
   nomes vem do CSS, fora do link. min-width: 0 porque são flex novos. */
.cargo-deptos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px;
  margin-top: var(--sp-2); min-width: 0; max-width: 100%;
  font-size: 14px; color: var(--muted);
}
.vaga-dados dd > .cargo-deptos { margin-top: 0; }
.cargo-deptos--vazio { display: block; margin: var(--sp-2) 0 0; font-size: 13px; color: var(--muted-soft); }
.vaga-dados dd > .cargo-deptos--vazio { margin-top: 0; }
.cargo-deptos__rotulo { font-weight: 600; }
.cargo-deptos__lista {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px;
  list-style: none; margin: 0; padding: 0; min-width: 0; max-width: 100%;
}
.cargo-deptos__lista > li { min-width: 0; overflow-wrap: anywhere; }
.cargo-deptos__lista > li:not(:last-child)::after { content: ','; }
/* (v1.76.0) Seletor longo de propósito: no toque/celular, `.cartao ul li >
   a:not(.btn)` (app.css, ALVO DE TOQUE EM LINK DE ITEM) tem especificidade
   maior, virava o link em inline-block de min-height 26px e o alvo ficava com
   39px. O segundo seletor (0,3,3) vence e garante os 44px dentro do cartão da
   edição; o primeiro continua valendo fora de .cartao. Mesma pegadinha do
   .anexo-lista. */
.cargo-deptos__lista--links a,
.cartao .cargo-deptos__lista--links > li > a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--alvo); }
.cargo-deptos__conta { color: var(--muted-soft); }

/* Ficha do cargo (consultoria item 73): "Quadro previsto" com o "Hoje: N
   ativo(s)" ao lado. O campo continua do tamanho de antes até onde dá; em
   tela estreita o "Hoje" desce para a linha de baixo. */
.quadro-hoje { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.quadro-hoje > input { flex: 1 1 120px; width: auto; min-width: 0; }
.quadro-hoje__real { font-size: 14px; color: var(--muted); }

/* Competências avaliadas na ficha do cargo (consultoria item 77): os selects
   de peso e nível ("Peso 3 de 5", "Nível esperado 3 de 5") com o Salvar da
   linha e o "x". Do tamanho do texto, quebrando linha em tela estreita, sem
   passar da largura do cartão em 320px. Era um estilo inline no HTML. */
.comp-linha__acoes,
.comp-linha__campos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-width: 0; max-width: 100%;
}
.comp-linha__campos select { width: auto; min-width: 0; max-width: 100%; }

/* Funções do departamento (consultoria item 72): os subtítulos "Ligadas a
   este departamento (N)" e "Outras funções (M)", no mesmo fieldset, e o
   atalho "Ir para Salvar" (um link, não um segundo botão primário), com
   alvo de 44px. */
.funcoes-dep__grupo { margin: var(--sp-3) 0 6px; font-size: 15px; color: var(--muted); }
.funcoes-dep__atalho {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: var(--alvo); font-size: 13px; font-weight: 600;
}
.funcoes-dep__atalho svg { flex: none; }

/* (v1.77.0) frente recrutamento */
/* Nome do fator para leitor de tela dentro da bolinha do Perfil
   Comportamental (funil da vaga). A regra `.disc span` do app.css pinta
   TODO span dentro de .disc como bolinha de 24px e vence o .so-leitor na
   especificidade; aqui o texto escondido volta a ter 1px, sem fundo nem
   borda, e não empurra nada. */
.disc span.so-leitor {
  width: 1px; height: 1px; padding: 0; border-radius: 0;
  display: block; background: none;
}

/* =====================================================================
   (v1.83.0) frente popups — DIÁLOGO ÚNICO
   Item 7 do dono (29/09): "melhore a interface de todos os pop-ups".
   Um componente só para todo <dialog> do portal, nos três layouts:
     .dialogo       confirmação (data-confirmar, painel.js/site.js), aviso
                    (dialogoAviso), senha do primeiro acesso, encerrar vaga,
                    pesquisa de desligamento;
     .graf-dialogo  a lista por trás do número/gráfico (grafico-detalhe.js).
   Anatomia: .dialogo__topo (título + fechar de 44px) > .dialogo__corpo
   (rola por dentro) > .dialogo__acoes (secundária à esquerda, primária à
   direita). Larguras: 460px (confirmação), --senha 480px, --fechar 560px,
   .graf-dialogo 760px. No celular (até 640px) vira folha de baixo com 92%
   da altura. Entra em .22s e sai em .15s (transform/opacity); sem
   movimento com prefers-reduced-motion. Foco preso, Esc e fundo inerte vêm
   do showModal(); a volta do foco ao botão que abriu, do JS. Nada das
   regras antigas (app.css e acima) foi apagado: estas vêm depois e valem
   por cima.
   ===================================================================== */

/* Casca comum */
.dialogo,
.graf-dialogo {
  padding: 0; border: 0;
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-g);
  overflow: hidden;
  max-height: min(88vh, 880px);
  max-height: min(88dvh, 880px);
}
.dialogo {
  --dialogo-largura: 460px;
  width: var(--dialogo-largura);
  max-width: calc(100vw - 32px);
  background: var(--flutuante); color: var(--flutuante-txt);
}
.dialogo--senha  { --dialogo-largura: 480px; }
.dialogo--fechar { --dialogo-largura: 560px; }
.dialogo[open] { display: flex; flex-direction: column; }
/* O <form> de dentro (confirmação, senha, encerrar vaga) é quem divide
   topo, corpo e rodapé: sem min-height 0 o corpo não rola. */
.dialogo > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }

/* O véu. `var()` dentro de ::backdrop só é herdado desde Chrome 122 /
   Safari 17.4 / Firefox 120: o segundo valor da var é o mesmo véu, para o
   navegador mais antigo não ficar com o fundo transparente. */
.dialogo::backdrop,
.graf-dialogo::backdrop { background: var(--dialogo-veu, rgba(11, 42, 71, .45)); }

/* Topo: título à esquerda, fechar de 44px à direita (o mesmo do .graf-dialogo). */
.dialogo__topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  flex: none; min-width: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--fio);
}
.dialogo__cab { display: flex; align-items: flex-start; gap: var(--sp-3); flex: 1 1 auto; min-width: 0; }
.dialogo__textos { flex: 1 1 auto; min-width: 0; }
.dialogo .dialogo__titulo,
.graf-dialogo__titulo {
  font-family: var(--fonte-titulo); font-size: 1.375rem; font-weight: 500;
  line-height: 1.25; color: var(--tinta); overflow-wrap: anywhere;
}
.dialogo__topo .dialogo__titulo { margin: 0; }
/* Título de uma linha fica no meio da altura do botão de fechar; de duas,
   começa no topo. */
.dialogo__topo > .dialogo__titulo,
.dialogo__cab > .dialogo__titulo { display: flex; align-items: center; min-height: var(--alvo); flex: 1 1 auto; min-width: 0; }
/* A pastilha "Primeiro acesso" em cima do título: 12px, o mínimo da casa. */
.dialogo__topo .entrar-porta { margin: 0 0 6px; font-size: 12px; }
/* Ícone de abertura: alerta (vermelho) na ação destrutiva, informação
   (azul) no resto. A cor não vai sozinha: o botão diz a ação por extenso. */
.dialogo__icone {
  flex: none; width: 40px; height: 40px; margin-top: 2px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--realce-suave); color: var(--azul-700);
}
.dialogo__icone svg { width: 20px; height: 20px; }
.dialogo__icone--perigo { background: var(--verm-100); color: var(--verm-escuro); }
.dialogo__fechar,
.graf-dialogo__fechar {
  flex: none; width: var(--alvo); height: var(--alvo);
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--tela); color: var(--tinta); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.dialogo__fechar:hover,
.graf-dialogo__fechar:hover { background: var(--realce-suave); color: var(--azul-700); }
.dialogo__fechar svg { width: 18px; height: 18px; }

/* Corpo: o único pedaço que rola. */
.dialogo .dialogo__corpo {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
}
.dialogo__topo + .dialogo__corpo { padding-top: var(--sp-4); }
.dialogo .dialogo__texto { max-width: 68ch; font-size: 15px; line-height: 1.55; color: var(--muted); }
/* Texto seguido de campos (pesquisa de desligamento): respiro antes do
   primeiro rótulo. :where() mantém o peso baixo, para --senha e --fechar
   seguirem com o respiro que já tinham. */
.dialogo :where(.dialogo__texto:not(:last-child)) { margin-bottom: var(--sp-4); }

/* Rodapé: secundária à esquerda, primária à direita. */
.dialogo .dialogo__acoes {
  flex: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--fio);
  background: var(--flutuante);
}
/* Confirmação sem explicação: só o título. O fio do topo já separa. */
.dialogo__corpo[hidden] + .dialogo__acoes { border-top: 0; }

/* Entrada: sobe 12px e aparece; o véu só aparece. */
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes dialogo-sobe  { from { transform: translateY(100%); } }
@keyframes dialogo-veu   { from { opacity: 0; } }
.dialogo[open],
.graf-dialogo[open] { animation: dialogo-entra var(--dialogo-entra) var(--dialogo-curva); }
.dialogo[open]::backdrop,
.graf-dialogo[open]::backdrop { animation: dialogo-veu .22s ease-out; }

/* Saída: só onde o navegador mantém o <dialog> na camada de cima enquanto
   some (`overlay`). Sem isso ele cairia no fim da página durante a
   transição — melhor fechar seco. */
@supports (overlay: auto) {
  .dialogo,
  .graf-dialogo {
    transition: opacity var(--dialogo-sai) ease-in, transform var(--dialogo-sai) ease-in,
                overlay var(--dialogo-sai) allow-discrete, display var(--dialogo-sai) allow-discrete;
  }
  .dialogo:not([open]),
  .graf-dialogo:not([open]) { opacity: 0; transform: translateY(8px) scale(.985); }
  .dialogo::backdrop,
  .graf-dialogo::backdrop {
    transition: opacity .15s ease-in, overlay .15s allow-discrete, display .15s allow-discrete;
  }
  .dialogo:not([open])::backdrop,
  .graf-dialogo:not([open])::backdrop { opacity: 0; }
}

/* O fundo não rola enquanto um diálogo está aberto (a rolagem volta no
   mesmo ponto ao fechar). O gutter evita o pulo de largura da barra. */
html:has(dialog:modal) { overflow: hidden; scrollbar-gutter: stable; }

/* Celular: folha de baixo, largura toda, 92% da altura; ações empilhadas,
   a primária em cima e com a largura toda (alvo grande, sem tocar em
   "confirmar" querendo "cancelar"). */
@media (max-width: 640px) {
  .dialogo,
  .graf-dialogo {
    width: 100%; max-width: 100%;
    margin: auto 0 0;
    max-height: 92vh; max-height: 92dvh;
    border-radius: 20px 20px 0 0;
  }
  .dialogo[open],
  .graf-dialogo[open] { animation: dialogo-sobe .26s var(--dialogo-curva); }
  .dialogo__topo,
  .graf-dialogo__topo { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .dialogo .dialogo__corpo { padding: var(--sp-4); }
  .dialogo .dialogo__acoes {
    flex-direction: column-reverse; align-items: stretch;
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  }
  .dialogo .dialogo__acoes .btn { width: 100%; justify-content: center; }
  .graf-dialogo__corpo { padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
  .dialogo .dialogo__titulo,
  .graf-dialogo__titulo { font-size: 1.25rem; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  @supports (overlay: auto) {
    .dialogo:not([open]),
    .graf-dialogo:not([open]) { transform: translateY(100%); }
  }
}
/* Tela baixa (celular deitado): topo e rodapé fixos comeriam quase tudo e
   sobrariam ~80px para o corpo. Aqui o diálogo inteiro rola junto, e as
   ações voltam a ficar lado a lado. */
@media (max-height: 480px) {
  .dialogo { overflow-y: auto; }
  .dialogo[open] { display: block; }
  .dialogo > form { display: block; }
  .dialogo .dialogo__corpo { overflow: visible; }
  .dialogo .dialogo__acoes { flex-direction: row; flex-wrap: wrap; }
  .dialogo .dialogo__acoes .btn { width: auto; flex: 1 1 auto; }
}

/* A triagem da vaga (site.js) é um pop-up de <div> — tela cheia no
   celular, de propósito (teclado). Ganha o mesmo véu, fechar e entrada. */
.triagem-fundo { background: var(--dialogo-veu); }
.triagem-fundo:not([hidden]) { animation: dialogo-veu .22s ease-out; }
.triagem__fechar { margin: -4px -4px 0 0; border-radius: 50%; background: var(--tela); color: var(--tinta); }
.triagem__fechar:hover { background: var(--realce-suave); color: var(--azul-700); }
@media (min-width: 768px) {
  .triagem--modal { border-radius: var(--raio-cartao); box-shadow: var(--sombra-g); }
  .triagem-fundo:not([hidden]) .triagem--modal { animation: dialogo-entra var(--dialogo-entra) var(--dialogo-curva); }
}

@media (prefers-reduced-motion: reduce) {
  .dialogo[open], .graf-dialogo[open],
  .dialogo[open]::backdrop, .graf-dialogo[open]::backdrop,
  .triagem-fundo:not([hidden]), .triagem-fundo:not([hidden]) .triagem--modal { animation: none; }
  .dialogo, .graf-dialogo, .dialogo::backdrop, .graf-dialogo::backdrop,
  .dialogo__fechar, .graf-dialogo__fechar { transition: none; }
}

/* =====================================================================
   (v1.84.0) frente cadastros — FORMULÁRIO DE NOVO REGISTRO
   Itens E e F do dono (29/09): "Novo colaborador" num pop-up e, em todas
   as telas, o formulário de novo registro ACIMA da lista. O comportamento
   mora em assets/js/dialogo-form.js. Nada acima foi apagado.
     .dialogo--form   o pop-up de formulário (Colaboradores → Novo
                      colaborador): o diálogo único com 720px.
     .acordeao--form  a origem dele, sem JavaScript: recolhível acima da
                      lista, que já funciona sozinho.
     .acordeao--novo  o "+ Novo X" recolhível acima da lista (metas,
                      trilha de carreira, lojas...), aberto pelo servidor
                      com lista vazia, edição em curso, erro ou ?novo=1, e
                      pela âncora (data-novo).
   ===================================================================== */

/* E. 720px e os campos em 2 colunas a partir de 768px (a regra do
   .form-grade no resto do portal). Sem isto o .form-grade teria 3 colunas
   pela largura da TELA (app.css, >= 1024px) dentro de uma caixa de 720px.
   Até 640px é a folha de baixo do diálogo único, com 1 coluna. */
.dialogo--form { --dialogo-largura: 720px; }
@media (min-width: 768px) {
  .dialogo--form .form-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A lista da busca de pessoa (absoluta) dentro do corpo que rola: mais
   baixa, para caber sem rolar o pop-up inteiro (o JS rola o que faltar). */
.dialogo--form .busca-sel__lista { max-height: min(40vh, 280px); max-height: min(40dvh, 280px); }

/* Sem JavaScript o <form> fica direto dentro do <details>: o fio entre o
   título e os campos é o que o .acordeao__corpo faria. */
.acordeao--form > form { border-top: 1px solid var(--fio); }

/* Campo que voltou com erro de validação (aria-invalid, marcado pelo
   servidor): borda e anel no vermelho de texto. A cor não vai sozinha: a
   mensagem vem em palavra, junto do campo (.erro-campo). */
.form-novo .entrada[aria-invalid="true"],
.form-novo select[aria-invalid="true"],
.form-novo select[aria-invalid="true"] + .busca-sel__campo {
  border-color: var(--verm-escuro); box-shadow: 0 0 0 1px var(--verm-escuro);
}

/* F. O recolhível acima da lista.
   `clip` no lugar do `hidden` do .acordeao (app.css): corta o canto do mesmo
   jeito, mas não vira "caixa de rolagem" — com hidden, o rodapé grudento do
   currículo (.salvar-bloco, position: sticky) parava de acompanhar a
   rolagem no celular. Navegador sem `clip` fica com o hidden de antes. */
.acordeao--novo { overflow: hidden; overflow: clip; }
/* R1 do levantamento: a lista da busca de pessoa (.busca-sel) e a do
   seletor de digitar (.combo) são absolutas — abertas no último campo,
   sumiam cortadas. Aberto e com uma delas, o bloco deixa passar; o
   cabeçalho herda o canto de cima. */
.acordeao--novo[open]:has(.busca-sel, .combo),
.acordeao--form[open]:has(.busca-sel) { overflow: visible; }
.acordeao--novo[open]:has(.busca-sel, .combo) > .acordeao__cab,
.acordeao--form[open]:has(.busca-sel) > .acordeao__cab {
  border-top-left-radius: inherit; border-top-right-radius: inherit;
}
/* O rodapé de salvar do currículo sangra até a borda com a margem negativa
   de --cartao-pad (app.css). Dentro do recolhível o recuo é o do
   .acordeao__corpo (20px; 16px até 640px): o token acompanha, e o rodapé
   continua encostando nas bordas sem passar delas. */
.acordeao--novo > .acordeao__corpo { --cartao-pad: var(--sp-5); }
@media (max-width: 640px) {
  .acordeao--novo > .acordeao__corpo { --cartao-pad: var(--sp-4); }
}
/* Na .grade-2 (trilha de carreira) quem separa é o gap: sem a margem de
   baixo de bloco solto. */
.grade-2 > .acordeao--novo { margin-bottom: 0; }
/* Currículo: a saída "Ir para a próxima tela" mora no rodapé do formulário
   (.salvar-bloco). Com o formulário recolhido, a mesma saída aparece depois
   da lista (.cv-saida); aberto, some a cópia e fica a do rodapé — uma só à
   vista, sempre. */
.acordeao--novo[open] ~ .cv-saida { display: none; }
.cv-saida { margin-top: var(--sp-4); }
/* O título do recolhível leva o "+" antes do nome: o ícone não quebra
   longe do texto, e o bloco lê "+ Nova meta" de relance. */
.acordeao--novo .acordeao__titulo > svg,
.acordeao--form .acordeao__titulo > svg { flex: none; color: var(--azul-700); }
/* Aberto, o cabeçalho do recolhível fica marcado (o mesmo realce do
   .ficha-acao aberto): quem rola vê onde o formulário começa. */
.acordeao--novo[open] > .acordeao__cab,
.acordeao--form[open] > .acordeao__cab { background: var(--linha-hover); }

/* (v1.99.0) frente J — layout do QA geral de 01/10. Só acréscimos. */

/* (v1.99.0) QA L7 — texto escolhido cortado em select no computador. Onde a
   coluna da grade era estreita para a opção, o campo ocupa mais colunas:
   - Competências → "Uso" (377px de texto em 267): duas colunas; a linha dele
     já ficava sozinha nas 3 colunas;
   - Histórico de uso → "O que baixar": a linha inteira, com o select do
     tamanho da maior opção, e "De"/"Até" juntos na linha de baixo (duas
     colunas separariam o "De" do "Até");
   - Ficha → Departamento: duas colunas, e a Unidade (opção tão longa quanto)
     também, para não abrir um buraco ao lado dela; Departamento e Cargo ficam
     lado a lado, na ordem do HTML (sem `order`, o Tab segue a tela).
   O select da equipe da vaga (coluna lateral de 267px, opções "nome — papel"
   até 646px) não cabe em largura nenhuma da coluna: ganha as reticências do
   navegador, que dizem que o texto continua. As mesmas reticências ficam nos
   outros como reserva para a opção mais longa. */
@media (min-width: 768px) {
  .form-grade > .campo:has(> select#uso) { grid-column: span 2; }
  .form-grade > .campo:has(> select#exp_tipo) { grid-column: 1 / -1; }
  .form-grade > .campo > select#exp_tipo { width: auto; max-width: 100%; }
  .ficha-grupo .form-grade > .campo:has(> select#filial_id),
  .ficha-grupo .form-grade > .campo:has(> select#departamento_id) { grid-column: span 2; }
}
.form-grade > .campo > select#uso,
.form-grade > .campo > select#exp_tipo,
.ficha-grupo select#filial_id,
.ficha-grupo select#departamento_id,
form > select#usuario_id { text-overflow: ellipsis; }

/* (v1.99.0) QA L9 — alvos de toque abaixo de 44px que não são link dentro de
   frase (medidos a 320/375, com o ::after contado). No toque, como o bloco
   (v1.70.1) acima: altura mínima onde o controle tem desenho próprio, e
   ::after invisível onde crescer mexeria no ritmo da lista. */
@media (pointer: coarse) {
  /* Legenda clicável dos gráficos (34px) e "Como ler a barra" (32px). */
  .graf-legenda__item[data-graf-item] { min-height: var(--alvo); }
  .legenda-detalhe > summary { min-height: var(--alvo); }
  /* Banco de Talentos → por área e por local (33px, 10px de margem entre
     eles): o link vai a 35px (o passo vira 45) e o ::after cresce 5px para
     cima e para baixo — 45px, encostando no do vizinho sem cobri-lo. */
  .cartao > a:has(> .met-trilho) { position: relative; min-height: 35px; }
  .cartao > a:has(> .met-trilho)::after { content: ''; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
  /* Análise 9-box → nome (16px): a área vai do vão de 4px acima do cartão da
     pessoa até o fim do cartão (o li), na largura dele: 47 a 51px com o cargo.
     O link da nota ("relatório") fica por cima dela e continua com o toque
     dele. A lista rola por dentro e corta o que passa do topo: os 2px de
     respiro em cima garantem os 44 também ao primeiro nome.
     (v1.99.0, revisão) Presa ao li, e não 44px fixos a partir do nome: na
     pessoa sem cargo (cartão de 29px) a área passava do fim da lista e ela
     ganhava 16px de rolagem à toa. */
  .box9__gente { padding-top: 2px; }
  .box9__gente li { position: relative; }
  .box9__nome > a::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: 0; }
  .box9__gente li > a.box9__cargo { position: relative; }
  /* Rodapé da porta interna ("Portal de vagas", "Falar com o RH", pedido
     LGPD; 22px): cada link com a linha de 44px. A própria linha já separa:
     o vão de 8px entre as linhas sai. */
  .rodape-interno__meta { row-gap: 0; }
  .rodape-interno__meta > a { display: inline-flex; align-items: center; min-height: var(--alvo); }
  /* Entrar do site → "Criar agora" (74x19): é a ação de cadastro da tela,
     sozinha na linha — o mesmo ::after de 44x44 do "Esqueci minha senha". */
  .entrar-rodape > span > a { position: relative; }
  .entrar-rodape > span > a::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: max(100%, var(--alvo)); height: max(100%, var(--alvo));
    transform: translate(-50%, -50%);
  }
}