:root{
  --azul-900:#12314f;
  --azul-700:#1F4E79;
  --azul-500:#2E75B6;
  /* Faltava: .btn-info pedia var(--azul-600) e sempre usava o fallback,
     um azul quase-duplicado do --azul-500. */
  --azul-600:#2565a0;
  --azul-100:#eaf1f8;
  --ouro:#B08D2E;
  --ouro-claro:#e6d5a3;
  --cinza-50:#f7f8fa;
  --cinza-100:#eef0f3;
  --cinza-300:#d7dce2;
  /* Borda de CONTROLE — o contorno que define onde o componente começa.
     Distinto de --cinza-300, que serve para separadores decorativos.

     Existe porque as bordas anteriores eram invisíveis, e isso é medível,
     não questão de gosto: --cinza-100 dá 1,14:1 contra o branco e
     --cinza-300 dá 1,38:1, contra o mínimo de 3:1 que a WCAG 2.2 (1.4.11)
     exige para o contorno de um componente. Botão "Ver" e "Editar", campos
     de formulário e abas ficavam com a borda apenas sugerida.

     3,46:1 deixa margem sobre o mínimo sem pesar como uma borda preta. */
  --borda-controle:#7f8b9b;
  /* Escurecido de #6b7480 para passar em AA sobre --cinza-50: era 4,46:1,
     abaixo do minimo de 4,5:1 (usado em .bc-desc, .desc e rotulos). */
  --cinza-600:#636c78;
  --texto:#1b2430;
  --branco:#ffffff;
  /* ---- Cores semânticas: nome pelo SIGNIFICADO, não pela aparência ----
     Cada uma tem um par: o tom FORTE (borda, texto, preenchimento de botão)
     e o tom SUAVE (fundo do selo de status).

     Escolhidos por contraste MEDIDO, não a olho. Os tons mais saturados que
     testei reprovaram no mínimo de 4,5:1 da WCAG AA — verde #0a8b52 dava
     3,92:1 sobre o próprio fundo suave e o âmbar #c2680a, 3,60:1. Os valores
     abaixo são os mais vivos que ainda passam nos DOIS usos:

       cor        texto sobre o suave   branco sobre o forte
       verde      4,83:1                5,41:1
       vermelho   4,85:1                5,62:1
       âmbar      4,51:1                5,02:1
       azul-info  5,04:1                5,75:1

     Isso também explica por que os selos antigos eram todos preenchidos com
     texto branco: o verde (#2e7d4f), o âmbar (#9e6500) e o --azul-500 NÃO
     alcançam 4,5:1 como texto sobre fundo claro, então o preenchimento era
     a única saída. Com os tons novos o selo suave passou a ser possível. */
  --verde:#067a48;
  --verde-suave:#e6f6ed;
  --vermelho:#c62828;
  --vermelho-suave:#fdeaea;
  --ambar:#b45309;
  --ambar-suave:#fdf1e3;
  --info:#1565c0;
  --info-suave:#e8f1fc;
  --sombra: 0 1px 3px rgba(18,49,79,.08), 0 8px 24px rgba(18,49,79,.06);
  /* ---- Raio: DOIS valores, e só dois ----------------------------------
     --radius (12px) para superfícies: card, modal, painel.
     --raio-controle (9px) para tudo que é controle ou selo: botão, campo,
     selo de status, paginação, caixa de mensagem.

     Antes havia DEZ valores espalhados (8px em 13 lugares, 7px, 6px, 10px,
     9px, 4px, 2px, 16px, 999px, 12px). Diferenças de 1 a 2px que ninguém
     percebe isoladamente, mas que impedem dois controles vizinhos de
     parecerem da mesma família — o botão de 9px ao lado do campo de 8px e
     do paginador de 7px.

     O 9px veio do botão que o dono apontou como referência ("Link de
     cadastro"): retângulo de cantos arredondados, não cápsula.

     999px continua existindo APENAS onde a forma carrega significado: o
     contador redondo do sino e a barra de progresso. Selo de status deixou
     de ser cápsula. */
  --radius: 12px;
  --raio-controle: 9px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
/* RESERVA DA BARRA DE ROLAGEM.

   Bug relatado (2026-08-27): "quando clico em certas abas, dependendo do
   tamanho do monitor, ela é redimensionada".

   Causa: a barra de rolagem vertical do navegador ocupa ~15px e só aparece
   quando a página é mais alta que a janela. Trocar de aba muda a
   quantidade de linhas da tabela — "Banco de Talentos" tem 192 registros e
   faz a página rolar; "Em treinamento" tem 6 e não faz. Com a barra
   aparecendo e sumindo, a largura útil oscilava entre 966px e 981px, e as
   abas se reorganizavam sozinhas (5+3 numa aba, 6+2 na outra).

   `scrollbar-gutter:stable` reserva esse espaço SEMPRE, role ou não. Medido
   depois: um único layout nas 8 abas, e nenhuma instabilidade em 8 larguras
   de janela testadas, de 1280px a 800px.

   Vale para o sistema inteiro, não só para as abas — qualquer tela cujo
   conteúdo mude de altura sofria o mesmo deslocamento de 15px.

   Investiguei antes o negrito da aba ativa, que de fato a alarga de 3 a 8px;
   medido em todas as larguras, ele sozinho nunca chega a mudar a quebra.
   Onde o navegador não suportar a propriedade, o comportamento continua o
   de hoje — não há regressão. */
html{scrollbar-gutter:stable;}
html,body{margin:0;padding:0;background:var(--cinza-50);color:var(--texto);}
body{min-height:100vh;}
#app{min-height:100vh;display:flex;flex-direction:column;}

.topbar{background:linear-gradient(135deg,var(--azul-900),var(--azul-700));color:#fff;
  display:flex;align-items:center;justify-content:space-between;padding:14px 28px;
  box-shadow:var(--sombra);}
.topbar .marca{display:flex;align-items:center;gap:12px;}
.topbar .marca img{height:34px;filter:brightness(0) invert(1);opacity:.95;}
.topbar .marca .titulo{font-weight:700;font-size:15px;letter-spacing:.02em;}
.topbar .marca .subtitulo{font-size:11px;opacity:.75;font-weight:400;}
.topbar .sessao{display:flex;align-items:center;gap:14px;font-size:13px;}
.topbar .sessao .badge{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  padding:4px 10px;border-radius:999px;font-size:11px;letter-spacing:.03em;text-transform:uppercase;}
.topbar button.linkbtn{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;
  padding:6px 14px;border-radius:var(--raio-controle);font-size:13px;cursor:pointer;transition:.15s;}
.topbar button.linkbtn:hover{background:rgba(255,255,255,.15);}
/* Sem isto o topbar não encolhe em tela estreita: a marca e o bloco da sessão
   mantêm a largura natural, empurram a página além do viewport e criam rolagem
   horizontal no site inteiro (o que também desalinhava o painel do sino, que se
   posiciona pelo viewport). `min-width:0` libera os flex-items a encolher, e o
   nome longo passa a ser truncado em vez de esticar a barra. */
.topbar .marca, .topbar .sessao{min-width:0;}
.topbar .sessao #header-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width: 640px){
  .topbar{padding:12px 14px;gap:10px;}
  .topbar .marca .subtitulo{display:none;}
  .topbar .sessao{gap:8px;}
  .topbar .sessao #header-nome{max-width:34vw;}
}

main{flex:1;padding:28px;max-width:1280px;margin:0 auto;width:100%;}

/* Painel. Medido antes de mexer, na tela de Candidatos:

     painel              altura   conteúdo   vazio
     botões de ação        86px      40px     53%
     abas                  69px      67px      3%
     filtros              118px      72px     39%
     tabela               862px     816px      5%

   E o levantamento das 57 telas mostrou que não era caso isolado: 57 dos
   143 painéis do sistema tinham mais de um quarto da altura vazia. Somando
   o vão de 20px entre painéis, havia 64px de espaço morto entre a linha de
   botões e a barra de abas logo abaixo.

   O padding caiu de 22/24 para 16/20 e o vão de 20 para 12. Painel com
   muito conteúdo (tabela, formulário) quase não sente; painel que só
   segura uma linha de controles encolhe de verdade. */
.card{background:var(--branco);border-radius:var(--radius);box-shadow:var(--sombra);
  padding:16px 20px;margin-bottom:12px;border:1px solid var(--cinza-100);}
/* Painel-ferramenta: só carrega uma linha de controles (botões de ação,
   filtro), sem título, sem tabela e sem campo de formulário. Aí os 16px
   de respiro vertical ainda são o dobro do necessário.

   Escrito com `:has()` de propósito, em vez de exigir uma classe nova em
   cada chamada: são dezenas de pontos espalhados, e uma classe manual
   garante que a próxima tela nasça sem ela. Onde o navegador não suportar
   `:has()`, o painel simplesmente mantém o padding padrão — degrada sem
   quebrar. */
.card:not(:has(h2)):not(:has(table)):not(:has(.field)):has(> .btn-row, > .filtro-compacto, > button){
  padding-top:10px;padding-bottom:10px;
}
.card h2{margin:0 0 4px;font-size:19px;color:var(--azul-900);}
.card .desc{color:var(--cinza-600);font-size:13px;margin-bottom:16px;}

/* 12px, não 16: o `gap` original era o espaçamento entre CARDS reaproveitado
   para campos. Com o campo em 51px, 16px de vão entre linhas lê como bloco
   solto; 12px mantém a leitura de grupo sem colar.
   `align-items:start` impede que um campo COM dica estique os vizinhos SEM
   dica: o grid iguala a altura da linha por padrão, então uma dica de 21px
   abria uma faixa vazia embaixo de cada campo ao lado dela. */
.grid{display:grid;gap:12px;align-items:start;}
.grid.cols-2{grid-template-columns:1fr 1fr;}
.grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-5{grid-template-columns:repeat(5,1fr);}
@media(max-width:900px){.grid.cols-2,.grid.cols-3,.grid.cols-4,.grid.cols-5{grid-template-columns:1fr 1fr;}}
/* Abaixo de 600px vai para UMA coluna. Antes parava em duas e, a 375px, as
   colunas ficavam desiguais (139px e 128px) porque o texto mais longo forçava
   o `min-content`. `min-width:0` é o que permite um item de grid encolher —
   sem ele, uma tabela dentro do grid empurra a página inteira (era a causa do
   estouro de 76px no Dashboard). */
.grid > *{min-width:0;}
@media(max-width:600px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4,.grid.cols-5{grid-template-columns:1fr;}
}
/* .totais, .menu-grid e .kpis já estiveram aqui dentro e NUNCA valeram: as
   declarações base dos três (`repeat(4,1fr)`, `repeat(4,1fr)`, `repeat(5,1fr)`)
   vêm DEPOIS neste arquivo e, com a mesma especificidade, quem vem depois
   ganha — média-query não aumenta especificidade. Efeito real medido a 375px:
   `.totais` continuava com 4 colunas, as trilhas somavam 360px dentro de um
   container de 277px, e o excedente empurrava a rolagem lateral da página
   inteira (o "arrasta e vai pra borda vazia" do celular).
   A regra responsiva de cada um agora mora COLADA na declaração base — é a
   única posição em que reordenar o arquivo não a mata em silêncio.
   `.menu-grid` e `.kpis` seguem em 2 colunas no celular, que é o que a tela
   sempre mostrou na prática e não estoura largura nenhuma. */

/* `text-transform:uppercase` em 12px é a combinação MENOS legível para
   varredura visual (a caixa alta apaga a silhueta da palavra, que é o que o
   olho usa para reconhecer sem ler) e ainda alarga a coluna, forçando quebra
   em rótulo comprido. O peso 600 já entrega a hierarquia sem gritar. */
label{display:block;font-size:12px;font-weight:600;color:var(--azul-700);margin-bottom:3px;
  letter-spacing:.01em;}
/* Mesma altura do `.btn` padrão: sem `height`, cada tipo nativo entregava a
   sua (input 39, date 41, select 41), e o filtro ficava serrilhado. textarea
   fica de fora — cresce com o conteúdo. */
input,select,textarea{width:100%;padding:5px 10px;border:1px solid var(--borda-controle);
  border-radius:var(--raio-controle);font-size:14px;background:var(--branco);color:var(--texto);font-family:inherit;
  box-sizing:border-box;}
/* 40px era a altura de BOTÃO aplicada a campo de formulário. A escala do
   próprio projeto prevê 24/32/40, e 32px é a altura de densidade média — a
   certa para formulário longo, onde 25 campos a 40px viram rolagem pura.
   Botões seguem em 40px: o que muda é o campo, não o controle de ação. */
input:not([type=checkbox]):not([type=radio]),select{height:32px;}
/* O seletor de arquivo tem chrome próprio do navegador e media 42px — 2px a
   mais que todo o resto. `line-height` alinha o texto dentro da altura fixa. */
input[type=file]{height:32px;line-height:20px;}
/* Checkbox herdava o `padding:9px 11px` da regra acima e virava 20x13px —
   abaixo do alvo mínimo de 24px e difícil de acertar. */
input[type=checkbox],input[type=radio]{width:18px;height:18px;padding:0;margin:0;
  accent-color:var(--azul-700);cursor:pointer;vertical-align:middle;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul-500);outline-offset:1px;border-color:var(--azul-500);}
/* COMPACTAÇÃO DOS FORMULÁRIOS (28/08/2026) — medido no navegador antes de
   mexer: a tela de cadastro de funcionário tinha 25 campos em 3.606px, ou seja
   4,9 TELAS de rolagem para um cadastro.

   O `margin-bottom:14px` daqui SOMAVA com o `gap:16px` do `.grid`, dando 30px
   entre linhas — espaçamento por elemento somado a espaçamento de layout é
   imprevisível por construção, e aqui era quase o dobro do pretendido.

   Quem manda no espaçamento entre campos passa a ser o `gap` do grid, um lugar
   só. A margem fica apenas para campo SOLTO, fora de grid, que não tem gap para
   herdar. */
.field{margin-bottom:0;}
/* Dica DENTRO de um campo não é parágrafo solto: sem isto ela herda o
   `margin-bottom` da `.desc` global (16px), que existe para texto explicativo
   isolado. Medido: o campo de CPF somava 88px onde o conteúdo era 65 — e como
   o grid iguala a altura da linha, o vizinho sem dica esticava junto. Uma dica
   de 17px estava custando 33px, em toda linha que tivesse uma. */
.field > .desc{margin-bottom:0;}
/* O primeiro separador vem logo abaixo do título do card e não precisa afastar
   de nada — a margem ali só empurra o formulário para baixo. */
.form-secao:first-of-type{margin-top:4px;}
.card > .field, .filtro-corpo > .field{margin-bottom:12px;}
textarea{resize:vertical;min-height:56px;}

/* Título de seção dentro de um formulário longo — divide o card em blocos
   (Acesso, Dados pessoais, Endereço, Foto...) para dar hierarquia sem pesar. */
.form-secao{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--cinza-600);margin:14px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--cinza-100);}
.form-secao:first-child{margin-top:4px;}
/* Valor calculado/somente-leitura mostrado no lugar de um input (ex.: tempo de empresa). */
.campo-estatico{padding:8px 0;font-weight:600;}
/* Bloco de foto do funcionário */
.foto-bloco{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;}
.foto-preview{width:120px;height:120px;object-fit:cover;border-radius:8px;background:var(--cinza-100);}
.foto-semfoto{width:120px;text-align:center;}
.foto-col{flex:1;min-width:260px;}
.foto-video{width:240px;height:180px;background:#000;border-radius:8px;}

/* ALTURA DOS CONTROLES — três degraus, e só três: 40 (padrão), 32 (compacto)
   e 24 (pill de ação em linha de tabela).

   Por que `border:1px solid transparent` na base: `.btn` era `border:none`,
   mas `.btn-outline` e `.btn-ghost.btn-pill-sm` acrescentam `border:1px`. Com
   altura automática, essa borda somava 2px e o botão ao lado ficava mais
   baixo — medido em 53 linhas de 15 telas (ex.: "Editar" 23px ao lado de
   "Desligar" 21px). A borda transparente reserva o espaço para todos.

   `height` + `box-sizing:border-box` fecha a questão de vez, e é o mesmo
   recurso que já funcionava em `.filtro-compacto` e `.tabs-header` — onde
   btn-primary e btn-outline sempre mediram igual. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:40px;padding:0 18px;border-radius:var(--raio-controle);border:1px solid transparent;
  box-sizing:border-box;
  font-size:14px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;line-height:normal;margin:0;}
.btn-primary{background:var(--azul-700);color:#fff;}
.btn-primary:hover{background:var(--azul-900);}
.btn-outline{background:#fff;color:var(--azul-700);border:1px solid var(--azul-700);}
.btn-outline:hover{background:var(--azul-100);}
/* Botões de ação continuam PREENCHIDOS, ao contrário dos selos de status.
   A diferença é proposital: selo é rótulo (informa), botão é ação (convida
   ao clique). Se os dois virassem contorno suave, a tela perderia a pista
   visual de onde se pode clicar — foi por isso que só os selos mudaram de
   forma; os botões só ganharam a cor mais viva.

   Os tons `:hover` são versões mais escuras da mesma cor, todas com o
   branco acima de 4,5:1. */
.btn-danger{background:var(--vermelho);color:#fff;}
.btn-danger:hover{background:#a52020;}
.btn-success{background:var(--verde);color:#fff;}
.btn-success:hover{background:#046038;}
.btn-warning{background:var(--ambar);color:#fff;}
.btn-warning:hover{background:#8f4207;}
.btn-info{background:var(--info);color:#fff;}
.btn-info:hover{background:#0f4c95;}
.btn-ghost{background:transparent;color:var(--cinza-600);}
.btn-ghost:hover{color:var(--texto);}
.btn-sm{height:32px;padding:0 12px;font-size:12.5px;}
/* Botão do mesmo tamanho/formato do pill de status (usado em colunas de Ação ao lado de status) */
/* 24px também resolve a violação de alvo de clique (WCAG 2.5.8 pede >=24). */
.btn-pill-sm{display:inline-flex;height:24px;padding:0 10px;font-size:11.5px;border-radius:var(--raio-controle);font-weight:700;}
/* Pill NEUTRO (ações sem cor, ex.: "Ver"/"Editar"): fundo transparente, texto
   cinza e uma borda discreta só para dar affordance de clique — sem cor de
   destaque, mantendo a proporção pequena dos pills do Férias. */
/* CORREÇÃO (relato do dono): "os botões de ver, editar ficou muito
   invisível pela borda ser quase transparente".

   Era `--cinza-100` (1,14:1 contra o branco) com texto `--cinza-600`. Numa
   linha de tabela ao lado de "Aprovar" e "Reprovar" preenchidos, o "Ver"
   sumia — não parecia um botão, parecia texto.

   Agora usa a MESMA forma do "Abrir" do painel de alertas, que é a
   referência aprovada: fundo branco, borda e texto em azul. Continua sendo
   a ação secundária (não é preenchido como "Aprovar"), mas agora se lê como
   botão. Contraste: borda 6,09:1, texto 8,66:1. */
/* AÇÃO DENTRO DE LINHA DE TABELA — uma altura só, em todo o sistema.

   Levantado medindo as 57 telas: a mesma ação em `<td>` saía em DUAS
   alturas. RH (Atestados, Férias, Funcionários) usava o pill de 24px pelos
   componentes compartilhados `botaoVer`/`botaoAcaoPill`; outras 18 telas
   escreviam o botão à mão com `btn-sm`, que rende 32px. E o botão mais alto
   inflava a LINHA inteira: 62px em Tentativas de Recadastro e 53px em
   Medidas, contra 37px onde o pill é usado — mesma informação, quase o
   dobro de altura.

   A correção é por REGRA e não nas 18 chamadas: assim a próxima tela nasce
   certa em vez de repetir o erro. É o mesmo recurso que o projeto já usa
   para o caso oposto (`.card > div > .btn-row .btn-sm` sobe para 40px ao
   lado de campos de formulário).

   24px é o degrau que o próprio sistema documenta para este uso, e é o
   mínimo do alvo de toque da WCAG 2.2 (2.5.8) — com o espaçamento da
   célula em volta, passa. */
td .btn.btn-sm{height:24px;padding:0 10px;font-size:11.5px;font-weight:700;}
td .btn.btn-sm.btn-pill-sm{padding:0 10px;}

.btn-ghost.btn-pill-sm{border:1px solid var(--azul-600);color:var(--azul-700);background:#fff;font-weight:600;}
.btn-ghost.btn-pill-sm:hover{background:var(--azul-100);border-color:var(--azul-700);color:var(--azul-900);}
/* Foco visível na BASE: havia regra para input/select, abas, breadcrumb e
   cabeçalho de tabela, mas não para `.btn`. O anel padrão do navegador
   sobrevivia (não há `outline:none` no projeto), mas some visualmente sobre o
   azul escuro do `.btn-primary`. */
.btn:focus-visible,.btn-sec:focus-visible,.btn-icone:focus-visible,.menu-tile:focus-visible{
  outline:2px solid var(--azul-500);outline-offset:2px;}
/* Numa mesma barra de ações, todos no mesmo degrau: a ação primária vinha a
   40px e os botões secundários com `.btn-sm` a 32px, lado a lado. */
.card > .btn-row .btn-sm,
.card > div > .btn-row .btn-sm{height:40px;padding:0 14px;font-size:14px;}
/* Botão que acompanha campos de formulário (ex.: "Buscar CEP" ao lado do CEP,
   "+ Adicionar" ao lado de um input) sobe para 40px: com `.btn-sm` ele ficava
   8px mais baixo que o campo vizinho, na mesma linha. */
/* REGRA DA ESCALA: cada altura tem UMA fonte, e só uma. Antes conviviam
   cinco tamanhos (12 / 12,5 / 13 / 13,5 / 14) para três alturas, então dois
   botões do mesmo tamanho pareciam de famílias diferentes conforme a tela.

       24px (dentro de tabela) -> 11,5px
       32px (compacto)         -> 12,5px
       40px (padrão)           -> 14px

   Ao criar variante nova, herde a fonte da altura — não escolha uma. */
.grid > .btn-sm, .grid > .btn-row > .btn-sm,
.field + .btn-sm, .btn-row.alinhado-campo .btn-sm{height:40px;padding:0 14px;font-size:14px;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}

/* Modal de confirmação interno (confirmarAcao) — substitui o confirm() nativo. */
.modal-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(15,23,42,.45);backdrop-filter:blur(1px);animation:modalFade .12s ease-out;}
.modal-caixa{background:var(--branco,#fff);border-radius:var(--radius,12px);box-shadow:0 12px 40px rgba(0,0,0,.25);
  border:1px solid var(--cinza-100,#e5e7eb);max-width:420px;width:100%;padding:22px 24px;
  animation:modalPop .14s ease-out;}
.modal-titulo{margin:0 0 8px;font-size:17px;color:var(--azul-900,#1e3a5f);font-weight:700;}
.modal-msg{font-size:14px;color:var(--texto,#333);line-height:1.5;white-space:pre-line;}
.modal-botoes{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalPop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.msg{font-size:13px;padding:9px 12px;border-radius:var(--raio-controle);margin:10px 0;}
/* Fundo e borda saem dos MESMOS tokens dos selos. Antes cada um tinha o
   próprio tom escrito à mão (#fdeceb, #eaf6ef, #f3c7c1, #bfe4cd) — quatro
   valores que precisavam ser lembrados junto a cada mudança de paleta, e
   que já estavam levemente fora de sintonia com os selos. */
.msg-erro{background:var(--vermelho-suave);color:var(--vermelho);border:1px solid var(--vermelho);}
.msg-ok{background:var(--verde-suave);color:var(--verde);border:1px solid var(--verde);}

table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;background:var(--azul-900);color:#fff;padding:9px 10px;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;font-weight:700;}
td{padding:9px 10px;border-bottom:1px solid var(--cinza-100);}
tr:hover td{background:var(--cinza-50);}
.table-wrap{overflow-x:auto;}

.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:900px){.menu-grid{grid-template-columns:repeat(2,1fr);}}
.menu-tile{background:#fff;border:1px solid var(--cinza-100);border-radius:var(--radius);
  padding:22px 18px;cursor:pointer;box-shadow:var(--sombra);transition:.15s;text-align:left;}
.menu-tile:hover{transform:translateY(-2px);border-color:var(--azul-500);}
.menu-tile .icone{font-size:26px;margin-bottom:10px;display:block;}
.menu-tile .nome{font-weight:700;font-size:14.5px;color:var(--azul-900);margin-bottom:3px;}
.menu-tile .sub{font-size:12px;color:var(--cinza-600);}

.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr);}}
.kpi{background:#fff;border-radius:var(--radius);padding:16px 18px;box-shadow:var(--sombra);
  border-left:4px solid var(--ouro);}
.kpi .valor{font-size:24px;font-weight:800;color:var(--azul-900);}
.kpi .rotulo{font-size:11.5px;color:var(--cinza-600);text-transform:uppercase;letter-spacing:.03em;margin-top:2px;}

/* SELO DE STATUS — fundo suave, borda e texto na cor forte.

   Era preenchimento sólido com texto branco. Numa tabela de 20 linhas isso
   vira uma coluna de retângulos saturados que pesa mais que o próprio dado:
   o status grita mais alto que o nome da pessoa ao lado. O selo suave
   mantém a cor legível de longe (é a borda que identifica) sem competir
   com o conteúdo — e, com quatro status na mesma tela, a diferença entre
   eles fica mais fácil de ler, não menos.

   A borda existe para o status não depender SÓ do preenchimento: em
   impressão em preto e branco, e para quem não distingue as cores, a forma
   e o texto continuam identificando. */
.pill{display:inline-block;padding:2px 10px;border-radius:var(--raio-controle);
  font-size:11.5px;font-weight:700;line-height:18px;
  border:1px solid transparent;white-space:nowrap;}
.pill-aprovado{background:var(--verde-suave);color:var(--verde);border-color:var(--verde);}
.pill-reprovado{background:var(--vermelho-suave);color:var(--vermelho);border-color:var(--vermelho);}
.pill-pendente{background:var(--ambar-suave);color:var(--ambar);border-color:var(--ambar);}

.termo-doc{background:#fff;border-radius:var(--radius);box-shadow:var(--sombra);padding:32px 36px;margin-bottom:20px;border:1px solid var(--cinza-100);}
.termo-cabecalho{display:flex;align-items:center;gap:16px;margin-bottom:18px;border-bottom:2px solid var(--azul-700);padding-bottom:14px;}
.termo-cabecalho img{height:48px;}
.termo-empresa{font-weight:700;color:var(--azul-900);font-size:15px;}
.termo-doc-num{font-size:11.5px;color:var(--cinza-600);margin-top:2px;}
.termo-titulo{text-align:center;font-size:17px;color:var(--azul-900);margin:18px 0 22px;letter-spacing:.03em;}
.termo-dados{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;font-size:13.5px;margin-bottom:18px;}
.termo-texto{font-size:13.5px;line-height:1.6;margin:14px 0;}
.termo-descricao{font-size:13.5px;line-height:1.6;background:var(--cinza-50);border:1px solid var(--cinza-100);border-radius:var(--raio-controle);padding:12px 14px;margin-bottom:6px;white-space:pre-wrap;}
.termo-assinaturas{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:34px 0 10px;}
.termo-assinatura{font-size:12px;text-align:center;color:var(--cinza-600);}
.termo-linha{border-top:1px solid var(--texto);margin-bottom:6px;height:38px;}
.termo-testemunhas-intro{margin-top:26px;}

body.login-mode{background:radial-gradient(circle at 30% 20%,#1c4166,var(--azul-900) 60%);}
body.login-mode main{padding:0;max-width:none;margin:0;}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 20%,#1c4166,var(--azul-900) 60%);padding:20px;}
.login-card{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);
  padding:40px 36px;width:100%;max-width:380px;text-align:center;}
.login-card img{height:64px;margin-bottom:6px;}
.login-card .linha-ouro{height:3px;width:56px;background:var(--ouro);margin:8px auto 22px;border-radius:2px;}
.login-card h1{font-size:17px;color:var(--azul-900);margin:0 0 22px;font-weight:700;}
.login-card .field{text-align:left;}
.login-card .btn-primary{width:100%;justify-content:center;margin-top:6px;padding:11px;}

/* A TELA DE LOGIN FICA FORA DA COMPACTAÇÃO DE FORMULÁRIOS — decisão do dono
   em 28/08/2026, depois de ver o resultado.

   A compactação (input 40px→32px, padding 9px→5px, label 5px→3px, .field
   14px→0) foi feita para telas DENSAS, onde 20 campos disputam espaço e cada
   pixel poupado aparece. O login tem dois campos numa página vazia: ali a
   compactação não ganha nada e só aperta.

   Pior, um detalhe que só apareceu medindo: `.login-card` NÃO é `.card`, então
   a regra `.card > .field{margin-bottom:12px}` — que devolve o respiro aos
   formulários de dentro do sistema — passa ao largo daqui. Os dois campos
   ficaram com margem ZERO, colados um no outro. Não foi escolha; foi um efeito
   colateral de escopo.

   Os valores abaixo são exatamente os anteriores à compactação, restaurados só
   dentro do cartão de login. Se um dia a compactação for revista, este bloco
   pode sumir — mas só depois de conferir que ele passou a receber espaçamento
   de alguma regra geral.

   O seletor é `.login-acesso` e NÃO `.login-card`: o portal público de
   candidato reusa `login-card` em seis pontos, e lá a compactação faz sentido
   (formulário longo, preenchido no celular). Escopo errado aqui teria mudado
   um formulário que ninguém pediu para mudar. */
.login-acesso .field{margin-bottom:14px;}
.login-acesso label{margin-bottom:5px;}
.login-acesso input:not([type=checkbox]):not([type=radio]){height:40px;padding:9px 11px;}
.login-hint{margin-top:18px;font-size:11.5px;color:var(--cinza-600);line-height:1.6;text-align:left;
  background:var(--cinza-50);border-radius:var(--raio-controle);padding:10px 12px;}

.criterio-row{display:grid;grid-template-columns:2.2fr .6fr .8fr 1.6fr .8fr;gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--cinza-100);}
.criterio-row .peso{font-size:12px;color:var(--cinza-600);text-align:center;}
.criterio-row .pontuacao{font-weight:700;color:var(--azul-700);text-align:center;}
.criterio-row .nome-crit{font-size:13px;}
.criterio-head{font-size:11px;text-transform:uppercase;color:var(--cinza-600);font-weight:700;
  display:grid;grid-template-columns:2.2fr .6fr .8fr 1.6fr .8fr;gap:10px;padding-bottom:6px;
  border-bottom:2px solid var(--azul-100);}

.totais{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px;}
/* Uma coluna no celular. Fica aqui, logo abaixo da base, de propósito: quando
   esta regra morava no bloco @media lá de cima (antes da base), ela perdia no
   desempate por ordem e os quatro totais da monitoria estouravam a viewport. */
@media(max-width:600px){.totais{grid-template-columns:1fr;}}
.totais .tot{background:var(--azul-100);border-radius:var(--raio-controle);padding:12px 14px;text-align:center;}
.totais .tot .v{font-size:20px;font-weight:800;color:var(--azul-900);}
.totais .tot .l{font-size:10.5px;color:var(--cinza-600);text-transform:uppercase;}

.chart-wrap{background:#fff;}
.section-title{font-size:14px;font-weight:700;color:var(--azul-900);margin:22px 0 10px;}

.footer-note{text-align:center;color:var(--cinza-600);font-size:11.5px;padding:18px;}

@media print{
  .no-print{display:none !important;}
  .only-print{display:block !important;}
  main{padding:0;max-width:none;}
  body{background:#fff;}
  .card{box-shadow:none;border:none;}

  /* Monitoria impressa: o alvo é caber numa folha. O seletor de arquivo e o
     player de áudio não fazem sentido no papel (áudio não imprime) e comiam
     espaço à toa — .audio-so-tela os esconde na impressão, .audio-so-impressao
     entra no lugar deles só com "anexada: sim/não". O resto é compactação de
     espaçamento e fonte, sem tirar nenhum dado da folha. */
  .audio-so-tela{display:none !important;}
  .audio-so-impressao{display:block !important;}
  .card{padding:8px 4px;}
  .grid{gap:8px;}
  .field{margin-bottom:6px;}
  .field label{font-size:11px;}
  input,select,textarea{padding:2px 4px;border-color:#999;}
  .section-title{margin:10px 0 6px;font-size:12px;}
  .criterio-row,.criterio-head{gap:6px;padding:4px 0;page-break-inside:avoid;}
  .criterio-row .nome-crit{font-size:11px;}
  .totais{gap:8px;margin-top:8px;page-break-inside:avoid;}
  .totais .tot{padding:6px 8px;}
  .totais .tot .v{font-size:15px;}
  textarea{min-height:0;}
}
.audio-so-impressao{display:none;}
.only-print{display:none;}


/* ── Pills adicionais ── */
/* Mesmo tratamento suave dos demais selos. `#9e6500` era um segundo âmbar
   escrito à mão ao lado do que já existia em .pill-pendente — agora os dois
   saem do mesmo token. */
.pill-em-analise{background:var(--ambar-suave);color:var(--ambar);border-color:var(--ambar);}
.pill-recebido{background:var(--info-suave);color:var(--info);border-color:var(--info);}

/* ── Breadcrumb / page-header ── */
/* ── Cabeçalho de página (trilha + título + descrição) ──
   É a ÚNICA identificação da tela: as telas não repetem título nem
   descrição dentro do card, e o caminho de volta é a trilha — não existe
   mais um botão "← Menu" concorrendo com ela. */
.breadcrumb{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--cinza-100);}
.bc-trail{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--cinza-600);
  flex-wrap:wrap;margin-bottom:6px;}
.bc-trail a{color:var(--azul-500);text-decoration:none;border-radius:4px;}
.bc-trail a:hover{text-decoration:underline;}
.bc-trail a:focus-visible{outline:2px solid var(--azul-500);outline-offset:2px;}
.bc-trail .sep{color:var(--cinza-300);user-select:none;}
.bc-titulo{font-size:22px;font-weight:700;color:var(--azul-900);line-height:1.2;margin:0;}
.bc-desc{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--cinza-600);max-width:70ch;}

/* ── Nome no header (sem cargo/avatar, compacto pra não tomar o cabeçalho) ── */
.header-nome-compacto{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Label de campo obrigatório ── */
label.req::after{content:" *";color:var(--vermelho);font-weight:700;}

/* ── Input com erro de validação ── */
input.campo-invalido,select.campo-invalido,textarea.campo-invalido{
  border-color:var(--vermelho)!important;background:#fff5f5;}

/* ── Formulário público (mobile-first) ── */
.form-pub-page{min-height:100vh;background:radial-gradient(circle at 30% 20%,#1c4166,var(--azul-900) 60%);padding:24px 16px 48px;}
.form-pub-card{background:#fff;border-radius:var(--radius);box-shadow:var(--sombra);
  padding:32px 28px;max-width:700px;margin:0 auto;border:1px solid var(--cinza-100);}
@media(max-width:600px){.form-pub-card{padding:20px 14px;}}
.form-pub-logo{text-align:center;margin-bottom:22px;}
.form-pub-logo img{height:56px;margin-bottom:8px;}
.form-pub-logo .linha-ouro{height:3px;width:50px;background:var(--ouro);margin:0 auto 14px;border-radius:2px;}
.form-pub-logo h1{font-size:19px;color:var(--azul-900);margin:0 0 4px;font-weight:700;}
.form-pub-logo p{color:var(--cinza-600);font-size:13px;margin:0;}
.form-section-title{font-size:11.5px;font-weight:700;color:var(--azul-700);
  text-transform:uppercase;letter-spacing:.06em;margin:22px 0 10px;padding-bottom:6px;
  border-bottom:2px solid var(--azul-100);}
.cep-row{display:flex;gap:8px;align-items:flex-end;}
.cep-row input{flex:1;}
.cep-row .btn{white-space:nowrap;}
/* Vale Transporte do formulário público de candidato — seleção múltipla
   (BHbus/Ótimo) em vez dos antigos campos de linha Ida/Volta. */
.form-vale-transporte{display:flex;flex-wrap:wrap;gap:12px 26px;margin:4px 0 14px;}
.form-vale-transporte-opcao{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  color:var(--texto);text-transform:none;letter-spacing:normal;cursor:pointer;margin:0;}
.form-vale-transporte-opcao input[type="checkbox"]{width:auto;accent-color:var(--azul-700);cursor:pointer;}
/* Referência profissional do formulário público — DDD + telefone lado a lado. */
.form-ref-telefone{display:flex;gap:8px;}
.form-ref-telefone input:first-child{flex:0 0 64px;}
.form-ref-telefone input:last-child{flex:1;}

/* ── Formulário de justificativa inline (status) ── */
.status-justif-row td{padding:0!important;border-left:none!important;background:none!important;}
.status-justif-box{margin:2px 0 8px;padding:12px 14px;border-radius:var(--raio-controle);
  border:1px solid var(--ouro-claro);background:#fffdf5;}
.status-justif-box .desc{font-weight:700;margin-bottom:8px;font-size:13px;}
/* ── Paginação (pagination.js) ── */
/* Barra de paginação: compacta e alinhada à DIREITA — fica no topo da lista,
   no espaço à direita das abas/filtros, para trocar página/linhas sem rolar. */
.pag-controles{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 12px;margin:0 0 10px;}
.pag-info{font-size:12px;color:var(--cinza-600,#666);white-space:nowrap;}
.pag-botoes{display:flex;flex-wrap:wrap;align-items:center;gap:4px;}
/* `<label>` (regra global, topo do arquivo) vem com font-weight:600 e
   text-transform:uppercase por padrão — certo para rótulo em cima de campo
   de formulário, pesado demais para um texto curto ao lado de um seletor de
   32px na mesma barra que acabou de perder peso. "LINHAS" saía maiúsculo e
   semi-negrito sem nenhuma dessas duas propriedades terem sido pedidas aqui;
   revertidas para o texto normal "Linhas". */
.pag-tamanho{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:400;
  text-transform:none;color:var(--cinza-600,#666);white-space:nowrap;}
/* 32px = degrau compacto, alinhando com os botões de página ao lado. */
/* Achado do dono (27/08/2026): depois que os números de página e o rótulo
   "Linhas" perderam a caixa/peso extra, o <select> ficou a última caixa
   cheia (fundo branco + borda) sobrando na barra — mesmo problema de novo,
   em outro elemento. Mesmo tratamento: sem borda/fundo em repouso, só ao
   passar o mouse ou focar — o cursor:pointer e a seta nativa do <select>
   já bastam pra sinalizar "isto abre". */
/* 24px (não mais 32px) — pedido do dono, 27/08/2026: o mesmo degrau
   compacto que o resto do sistema usa pra controle secundário (badge,
   checkbox, botão de ação em linha de tabela — ver .btn-pill-sm e
   `td .btn.btn-sm`), e o mínimo de alvo de clique que a WCAG 2.5.8 aceita.
   Precisa mudar JUNTO com .btn-sec, duas regras abaixo — são os dois
   controles que dividem esta barra, e é exatamente a dupla que o comentário
   de 2px antigo (uns parágrafos abaixo) já tinha avisado pra manter
   sincronizada. */
.pag-tamanho select{height:24px;padding:0 6px;font-family:inherit;font-size:11.5px;font-weight:600;
  color:var(--azul-700,#1F4E79);background:transparent;border:1px solid transparent;border-radius:var(--raio-controle);cursor:pointer;}
.pag-tamanho select:hover,.pag-tamanho select:focus{background:#fff;border-color:var(--borda-controle);}
/* Linha de topo da lista: contagem/título à esquerda, paginação à direita. */
.lista-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.lista-topo .pag-controles{margin:0;}
.lista-topo>.desc{margin:0;}
/* Paginação DENTRO da linha das abas (.tabs-header): empurrada para a direita,
   no espaço que as abas não cobrem, e centralizada verticalmente com elas —
   sem alterar o alinhamento/sublinhado das abas (que continuam esticadas). */
.tabs-header>.pag-controles.pag-na-aba{margin:0 0 0 auto;align-self:center;}
/* Era 32px (alinhado ao seletor "Linhas"). Achado do dono (27/08/2026):
   mesmo com a altura batendo à risca (medido: 32px = 32px), a barra ainda
   lia como "grande/desproporcional" perto das abas — que são só texto
   sublinhado, sem caixa nenhuma (redesenho documentado logo abaixo, "muito
   menos peso visual"). Duas rodadas de ajuste depois (peso visual, cor),
   pediu explicitamente o degrau menor da escala: 24px, o mesmo de
   .btn-pill-sm/`td .btn.btn-sm` — mudou aqui E no seletor de linhas, duas
   regras acima, pra não trocar "página vs. aba desalinhada" por "página vs.
   Linhas desalinhada". Por padrão os botões de página são "fantasma" (sem
   borda/fundo, só o número) — só a página ATIVA continua com cor+sublinhado
   diferenciado, que é o mínimo pra ainda comunicar "você está aqui". */
.btn-sec{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  height:24px;min-width:24px;padding:0 8px;font-family:inherit;font-size:11.5px;font-weight:600;
  background:transparent;color:var(--cinza-600,#666);border:1px solid transparent;border-radius:var(--raio-controle);
  cursor:pointer;transition:.15s;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  line-height:normal;margin:0;}
.btn-sec:hover{background:var(--azul-100);color:var(--azul-700,#1F4E79);}
/* Histórico desta regra (27/08/2026), porque já foi tentado nesta ordem e
   cada rodada resolveu um problema e revelou o próximo:
     1. fundo azul sólido (original) — pesava demais perto da aba ativa, que
        não tem preenchimento nenhum;
     2. cor + sublinhado, sem preencher — parou de pesar, mas a cor nunca
        lia como "azul" por mais vívido que o tom ficasse (--azul-700, depois
        --azul-500, depois #2563EB puro): TRAÇO FINO em negrito pequeno perde
        saturação na renderização — é anti-aliasing amassando a cor contra o
        fundo branco, não o valor do tom escolhido. Confirmado comparando o
        mesmo #2563EB como TEXTO FINO (ilegível como azul) contra COMO
        PREENCHIMENT0 (inequívoco) na mesma tela.
   Resolvido com um preenchimento pequeno — não o quadrado 32px de antes,
   um select arredondado do tamanho do próprio dígito, na escala de 24px que
   a barra inteira já usa. Pesa menos que o quadrado original (é bem menor
   e só existe UM, a página atual) e resolve a cor de vez, porque cor sólida
   não depende de espessura de traço pra ser lida. */
.btn-sec.pag-ativo{background:#2563EB;color:#fff;
  border-color:#2563EB;border-radius:999px;font-weight:700;}
/* .pag-ellipsis não existe mais: a janela de páginas (pagination.js,
   _pageWindow) virou uma faixa deslizante de 3 números fixos, sem reticências
   — pedido do dono pra a barra nunca mudar de largura ao navegar. */
/* ── Barra de navegação compacta do módulo (substitui card "Voltar") ── */
.modulo-nav{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.modulo-nav .modulo-nav-titulo{font-size:17px;font-weight:700;color:var(--azul-900);margin:0;}
/* ── Cabeçalho de hub (título + desc + botão na mesma linha) ── */
/* ── Abas integradas dentro do card (tabs-header) ──
   Antes cada aba era um botão retangular com borda própria, e a ativa um
   bloco azul preenchido dentro de uma faixa cinza — cinco caixas
   disputando atenção com a tabela logo abaixo. Agora a navegação é o
   texto, e a aba ativa é marcada por um sublinhado: o mesmo recurso com
   muito menos peso visual.

   O fundo cinza também saiu por acessibilidade: --cinza-600 sobre
   --cinza-50 dá 4.46:1, abaixo do mínimo 4.5:1 do WCAG AA para texto
   normal. Sobre branco fica 4.74:1 e passa. */
/* ABAS COMPACTAS — arranjo escolhido pelo dono (2026-08-27).

   O ganho vem do ESPAÇAMENTO, não da altura: com `gap:2px` e padding
   lateral de 9px, as oito etapas de Candidatos passam de três linhas para
   duas — a barra cai de 102px para 65px.

   A altura fica em 32px e a fonte em 12,5px, na escala, e não nos 30px/12px
   que a prévia usava. São 4px a mais (61 contra 65) e vale pagá-los: a
   paginação é movida para DENTRO desta mesma barra
   (`.tabs-header>.pag-controles.pag-na-aba`) e mede 32px. Aba de 30px ao
   lado de paginador de 32px é justamente o desalinhamento de controles na
   mesma linha que esta padronização existe para eliminar.

   A SANGRIA precisa espelhar o padding do `.card`. Estava em -22/-24, valor
   do padding antigo; depois que o painel passou a 16/20 a barra saía 3px
   para fora dos lados e 5px por cima. Se o padding do card mudar de novo,
   estes três números mudam junto. */
.tabs-header{display:flex;flex-wrap:wrap;gap:2px;margin:-16px -20px 16px;
  padding:0 20px;background:transparent;border-bottom:1px solid var(--cinza-100);
  border-radius:var(--radius) var(--radius) 0 0;}
/* Quando há um título (h2) logo acima das abas, elas NÃO devem sangrar para o
   topo do card (senão sobem por cima do título). Aqui ficam logo abaixo do
   título, com um respiro. */
.card h2 + .tabs-header{margin-top:6px;}
.tabs-header .btn{
  height:32px;padding:0 9px;margin-bottom:-1px;    /* -1px cobre a borda da faixa */
  background:transparent;border:none;border-bottom:2px solid transparent;
  border-radius:0;color:var(--cinza-600);font-size:12.5px;font-weight:600;}
.tabs-header .btn:hover{background:transparent;color:var(--azul-900);
  border-bottom-color:var(--cinza-300);}
/* Card que contém APENAS a barra de abas (ex.: navegação de estágios em
   Candidatos). O .tabs-header sangra com margens negativas assumindo conteúdo
   abaixo; sozinho deixava ~38px de vazio. Aqui vira uma barra de abas slim,
   sem sobra. */
.tabs-nav-card{padding-bottom:0;}
.tabs-nav-card>.tabs-header{margin-bottom:0;}
/* A aba ativa NÃO muda de peso — e isso é a correção de um bug, não estética.

   Segunda parte do relato "quando clico em certas abas ela é
   redimensionada". A primeira causa era a barra de rolagem (ver
   `scrollbar-gutter` no topo do arquivo); esta é a segunda, e só aparece em
   janela larga.

   Texto em 700 é de 3 a 8px mais largo que em 600. Em Candidatos a soma das
   oito abas dá 1169px contra 1182px úteis a 1310px de janela — está na
   navalha. Bastavam os poucos pixels da aba ativa para empurrar a última
   para a linha de baixo, e a barra se reorganizava a cada clique.

   Medido depois da correção: a soma das larguras passa a ser CONSTANTE
   (antes variava conforme qual aba estava ativa) e o layout não muda em
   nenhuma das seis larguras de janela testadas, de 900px a 1310px.

   A aba ativa continua inequívoca por DOIS sinais, e nenhum deles é peso:
   a cor salta de --cinza-600 para --azul-900, e o sublinhado de 2px é uma
   diferença de FORMA — o que atende a WCAG, que proíbe comunicar estado só
   por cor. É também como a maioria dos sistemas marca aba ativa.

   Não use font-weight aqui. Se um dia parecer necessário, a saída é
   reservar a largura do peso maior com um elemento fantasma, nunca aplicar
   o peso direto. */
.tabs-header .btn.btn-primary,
.tabs-header .btn.btn-primary:hover{
  background:transparent;color:var(--azul-900);
  border-bottom-color:var(--azul-700);}
.tabs-header .btn:focus-visible{outline:2px solid var(--azul-500);outline-offset:-2px;}
/* ── Cabeçalho de tabela clicável (ordenação) ──
   A seta fica sempre visível (⇅ quando inativa) para a coluna anunciar que
   é clicável — sem depender de hover, que não existe em toque. */
th.th-ordenavel{cursor:pointer;user-select:none;white-space:nowrap;}
th.th-ordenavel:hover{background:var(--azul-700);}
th.th-ordenavel:focus-visible{outline:2px solid var(--azul-500);outline-offset:-2px;}
th .th-seta{margin-left:6px;font-size:10px;opacity:.5;}
th.th-ordenado .th-seta{opacity:1;}

/* ── Barra de busca dos painéis (Férias, Atestados, Vales, ...) ──
   Altura 36px, a mesma das abas logo acima, para os dois controles ficarem
   na mesma linha de base visual. */
.filtro-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
/* 32px = degrau compacto, o mesmo do .filtro-compacto e do .btn-sm.
   Antes eram 36px, criando uma QUARTA altura no sistema. */
.filtro-campo{height:32px;padding:0 12px;width:auto;min-width:260px;flex:0 1 320px;
  font-size:13px;border:1px solid var(--borda-controle);border-radius:var(--raio-controle);}
.filtro-campo:focus{outline:2px solid var(--azul-500);outline-offset:1px;border-color:var(--azul-500);}
.filtro-info{font-size:12.5px;color:var(--cinza-600);white-space:nowrap;}
/* Filtro compacto: campos lado a lado, todos com 36px, rótulo virando
   placeholder. Substitui o painel de campos empilhados com rótulo em cima,
   que gastava o triplo da altura para a mesma informação. */
.filtro-compacto{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
/* 36px era uma terceira altura só desta barra — os controles ficavam 4px
   menores que o resto do sistema. Passa para os 32px do degrau "compacto",
   que é o mesmo do `.btn-sm` usado aqui ao lado. */
/* A cadeia `:not()` é obrigatória aqui: a regra base
   `input:not([type=checkbox]):not([type=radio]):not([type=file])` tem
   especificidade 0,3,1 e venceria um simples `.filtro-compacto input` (0,1,1)
   — o input ficava 40px e o select ao lado 32px, na mesma linha. */
.filtro-compacto input:not([type=checkbox]):not([type=radio]):not([type=file]),
.filtro-compacto select{height:32px;padding:0 10px;font-size:13px;
  border:1px solid var(--borda-controle);border-radius:var(--raio-controle);width:auto;flex:0 1 auto;min-width:150px;}
.filtro-compacto input[type=date]{min-width:150px;}
.filtro-compacto .btn{height:32px;}
.filtro-barra .btn{height:32px;}

/* ── Tabelas de listagem: linhas mais compactas ── */
.table-wrap th{padding:7px 10px;}
.table-wrap td{padding:6px 10px;font-size:13px;}
/* Célula principal (ex.: nome) com subtexto (ex.: login) empilhado abaixo.
   Trunca com reticências para a linha não quebrar em 2-3 linhas — o valor
   completo fica no title (tooltip). Mantém as linhas com altura uniforme. */
.cel-principal{max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;}
.cel-principal .cel-sub{display:block;color:var(--cinza-600);font-size:11.5px;font-weight:400;overflow:hidden;text-overflow:ellipsis;}
.cel-nowrap{white-space:nowrap;}
.cel-trunc{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Venda com produtos em status diferentes: mantém os pills agrupados e
   quebrando junto, sem espalhar pela célula. */
.status-misto{display:inline-flex;gap:4px;flex-wrap:wrap;}

/* Cartão colapsável (ferramentas secundárias, ex.: trocas em massa) — fica
   recolhido por padrão para não dominar a tela; abre com um clique. */
.card-colapsavel > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:700;color:var(--azul-900);}
.card-colapsavel > summary::-webkit-details-marker{display:none;}
.card-colapsavel > summary::before{content:"▸";font-size:13px;color:var(--cinza-600);transition:transform .15s;}
.card-colapsavel[open] > summary::before{transform:rotate(90deg);}

/* ── Central de Alertas (sino no header) ──
   Substitui os cards de aviso soltos no menu por um painel único, aberto
   sob demanda — evita que a tela fique tomada de avisos quando o
   backlog (atestados, férias...) cresce. */
.alerta-central{position:relative;}
.alerta-sino{position:relative;background:transparent;border:none;color:#fff;
  font-size:19px;cursor:pointer;padding:4px 6px;line-height:1;border-radius:var(--raio-controle);}
.alerta-sino:hover{background:rgba(255,255,255,.15);}
.alerta-badge{position:absolute;top:-2px;right:-2px;background:var(--vermelho);color:#fff;
  font-size:10.5px;font-weight:700;min-width:16px;height:16px;border-radius:999px;
  align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--azul-900);}
/* max-height alto de propósito: o painel lista pendências (férias,
   atestados) e quanto mais linhas couberem, menos paginação a pessoa
   precisa usar. O "- 80px" reserva o espaço do topbar acima dele. */
/* Sem padding no TOPO: `position:sticky; top:0` do cabeçalho gruda na borda
   da área de rolagem, que fica ABAIXO do padding. Com os 6px que havia
   aqui, o conteúdo rolava por dentro dessa faixa e aparecia recortado
   acima do cabeçalho — meia linha de texto flutuando sobre o "Alertas".
   O cabeçalho traz o próprio respiro (padding:10px 18px). */
.alerta-painel{position:absolute;top:calc(100% + 10px);right:0;width:480px;max-width:92vw;
  max-height:calc(100vh - 80px);overflow-y:auto;background:#fff;border-radius:var(--radius);
  box-shadow:0 10px 40px rgba(0,0,0,.25);z-index:200;text-align:left;color:var(--texto);
  padding:0 0 6px;}
/* Em telas estreitas o painel não cabe ancorado ao sino: com 480px de largura
   e o sino a ~370px da esquerda, ele saía PRA FORA da tela (o conteúdo à
   esquerda ficava cortado e inalcançável — `max-width:92vw` não resolve, pois
   o limite não é a largura da tela e sim a posição da âncora). Aqui ele deixa
   de ser dropdown ancorado e vira uma folha presa ao viewport, com margem dos
   dois lados. O topo é fixo em 66px (altura do topbar + 3px). */
@media (max-width: 860px){
  .alerta-painel{position:fixed;top:66px;left:10px;right:10px;width:auto;max-width:none;
    max-height:calc(100vh - 80px);}
}
/* Cabeçalho fixo do painel: identifica onde a pessoa está, mostra quantos
   alertas estão abertos e — o que faltava e foi pedido — dá um "Fechar"
   explícito. Antes só clicar fora ou no sino fechava, o que não é
   descobrível: em telas estreitas o painel cobre quase tudo e não sobra
   "fora" óbvio para clicar. `sticky` para o Fechar não sumir na rolagem. */
/* O painel de alertas mora DENTRO do .topbar, então herdava
   `.topbar button.linkbtn` — texto branco com borda branca translúcida,
   feito para a barra azul escura. Sobre o fundo branco do painel isso
   deixava "Fechar", "Dar baixa em todos" e "Mostrar novamente" INVISÍVEIS:
   os botões existiam, ocupavam espaço e recebiam clique, mas ninguém via.
   Seletor com uma classe a mais para ganhar do da barra (0,3,1 > 0,2,1). */
.topbar .alerta-painel button.linkbtn{background:transparent;border:1px solid transparent;
  color:var(--azul-600);font-size:12px;font-weight:600;padding:2px 6px;border-radius:var(--raio-controle);
  cursor:pointer;white-space:nowrap;}
.topbar .alerta-painel button.linkbtn:hover{background:var(--cinza-50);
  text-decoration:underline;}
.topbar .alerta-painel button.linkbtn:focus-visible{outline:2px solid var(--azul-600);
  outline-offset:2px;}
.alerta-cabecalho{position:sticky;top:0;z-index:1;background:#fff;display:flex;
  align-items:center;gap:8px;padding:10px 18px;border-bottom:1px solid var(--cinza-100);}
.alerta-cabecalho strong{font-size:14px;color:var(--azul-900);}
.alerta-cabecalho-info{font-size:12px;color:var(--cinza-600);margin-right:auto;}
.alerta-secao{padding:12px 18px;border-bottom:1px solid var(--cinza-100);}
.alerta-secao:last-child{border-bottom:none;}
/* Título da seção em tom NEUTRO, não vermelho.

   Com uma seção só, o vermelho funcionava como "atenção". Com quatro
   seções abertas ao mesmo tempo (atestados, férias, experiência, Vendas
   Claro) tudo ficava vermelho — e quando três coisas gritam, nenhuma é
   ouvida. O vermelho passa a ser reservado para o que está de fato
   atrasado: o selo "há N dias" de cada item. O que separa as seções é o
   ícone do domínio (🩺 🌴 ⏰ 📶) e o peso do texto.

   `sticky` logo abaixo do cabeçalho (que tem ~41px): com 23 alertas o
   painel rola por dentro, e sem isto some a referência de qual fila se
   está lendo no meio da rolagem. */
.alerta-secao h3{position:sticky;top:41px;z-index:1;background:#fff;
  margin:0 0 6px;padding:2px 0;font-size:13.5px;font-weight:700;
  color:var(--azul-900);letter-spacing:.01em;}
/* Linha "N aguardando · M com baixa" + a ação em massa. Mantém o total
   verdadeiro visível mesmo depois de dar baixa em tudo. */
.alerta-secao-resumo{display:flex;align-items:center;gap:8px;margin-bottom:4px;
  font-size:12px;color:var(--cinza-600);}
.alerta-secao-resumo span{margin-right:auto;}
.alerta-baixado{font-size:12.5px;color:var(--cinza-600);padding:4px 0;
  display:flex;align-items:center;gap:8px;}
.alerta-baixado .linkbtn{margin-left:auto;}
/* Texto e ações lado a lado, com as ações alinhadas à direita e sem encolher
   — antes o botão vinha no fluxo do texto e a linha quebrava de formas
   diferentes conforme o tamanho do nome. Em telas estreitas as ações descem
   para a linha de baixo em vez de espremer o texto. */
.alerta-item{padding:8px 0;border-top:1px solid var(--cinza-50);font-size:13px;
  display:flex;align-items:center;gap:10px;}
.alerta-item:first-of-type{border-top:none;}
.alerta-item-texto{flex:1 1 auto;min-width:0;}
.alerta-item-acoes{display:flex;gap:6px;flex-shrink:0;margin-left:auto;align-items:center;}

/* --- Ações do item: duas variantes para comparar -------------------- */
/* Medido antes: no celular os botões consumiam 60% da altura de cada
   item, porque o par nao cabia na linha do texto e caía numa linha
   propria de 32px + espaçamento. As duas variantes atacam a largura. */

/* (a) ICONE — o par ocupa ~62px, entao sobra largura para o texto e nada
   quebra de linha. 30x30 mantem o alvo de toque acima do minimo de 24px
   da WCAG 2.2, com folga do `gap`. */
.btn-alerta-icone{width:30px;height:30px;flex:0 0 30px;display:inline-flex;
  align-items:center;justify-content:center;font-size:15px;line-height:1;
  border-radius:var(--raio-controle);cursor:pointer;padding:0;
  border:1px solid var(--borda-controle);background:#fff;color:var(--cinza-600);}
.btn-alerta-icone:hover{background:var(--cinza-50);}
.btn-alerta-icone:focus-visible{outline:2px solid var(--azul-600);outline-offset:2px;}
/* A ação principal recebe a cor; a secundária fica neutra. Sem isso os
   dois ícones pesam igual e nenhum indica o caminho comum. */
.btn-alerta-abrir{border-color:var(--azul-600);color:var(--azul-600);font-weight:700;}
.btn-alerta-abrir:hover{background:var(--azul-100);}
.btn-alerta-baixa{font-weight:700;}
.btn-alerta-baixa:hover{border-color:var(--verde);color:var(--verde);}

/* (b) TEXTO COMPACTO — mesma informacao escrita, na altura de 24px da
   escala de controles, com padding e fonte menores para o par caber ao
   lado do texto. */
.btn-alerta-txt{height:24px;min-height:24px;padding:0 8px;font-size:11.5px;
  line-height:22px;border-radius:var(--raio-controle);white-space:nowrap;}

/* Em tela estreita o texto pode nao caber ao lado das acoes; deixa
   quebrar so na variante de TEXTO, que e a larga. A de icone nao precisa
   quebrar nunca. */
.alerta-item--texto{flex-wrap:wrap;}
.alerta-item--texto .alerta-item-texto{flex:1 1 200px;}

/* (c) AUTO — icone + rotulo no mesmo botao. Medido: no computador o par
   escrito custa so 34px a mais no total (691 contra 657), entao ali vale
   a clareza da palavra; no celular o mesmo par empurrava as acoes para uma
   linha propria em TODOS os 12 itens e comia 60% da altura, entao ali
   sobra so o sinal.

   O rotulo e ESCONDIDO visualmente, nao removido: continua no DOM como
   nome acessivel do botao, e o `title` repete a acao para quem usa mouse. */
.btn-alerta-auto{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:30px;padding:0 10px;font-size:12.5px;font-weight:600;line-height:1;
  border-radius:var(--raio-controle);cursor:pointer;white-space:nowrap;font-family:inherit;
  border:1px solid var(--borda-controle);background:#fff;color:var(--cinza-600);}
.btn-alerta-auto:hover{background:var(--cinza-50);}
.btn-alerta-auto:focus-visible{outline:2px solid var(--azul-600);outline-offset:2px;}
.btn-alerta-auto.btn-alerta-abrir{border-color:var(--azul-600);color:var(--azul-600);}
.btn-alerta-auto.btn-alerta-abrir:hover{background:var(--azul-100);}
.btn-alerta-auto.btn-alerta-baixa:hover{border-color:var(--verde);color:var(--verde);}
.btn-alerta-sinal{font-size:15px;line-height:1;}
/* Botao so com o sinal: quadrado de 30px, acima do alvo minimo de 24px da
   WCAG 2.2. O rotulo fica escondido VISUALMENTE (nao com `display:none`,
   que o tiraria tambem da arvore de acessibilidade) e continua sendo o
   nome acessivel do botao. */
.btn-alerta-so-sinal{width:30px;padding:0;gap:0;}
.btn-alerta-so-sinal .btn-alerta-rotulo{position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.alerta-vazio{padding:24px 18px;text-align:center;color:var(--cinza-600);font-size:13.5px;}

/* ── Linha do título com as ações da tela ──────────────────────────────
   A ação principal deixou de morar num painel próprio e passou a dividir a
   linha do <h1>. `flex-wrap` para que, em tela estreita, os botões desçam
   inteiros em vez de espremer o título. */
.titulo-com-acoes{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.titulo-com-acoes .bc-titulo{margin:0;}
.acoes-tela{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto;}
@media (max-width:600px){
  .acoes-tela{margin-left:0;width:100%;}
  .acoes-tela .btn{flex:1 1 auto;}
}

/* ── Filtro recolhível ─────────────────────────────────────────────────
   Painel de filtro atrás de um botão. Fica aberto até a pessoa fechar,
   recarregar ou trocar de tela (o estado vive em FILTRO_ABERTO_POR_TELA).

   O resumo ao lado do botão é obrigatório, não decoração: com o painel
   fechado, é a única coisa na tela dizendo que a lista está recortada. */
.filtro-recolhivel{margin-bottom:10px;}
.filtro-barra-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.filtro-resumo{font-size:12px;color:var(--cinza-600);}
.filtro-limpar{margin-left:auto;}
/* `.linkbtn` só tem estilo dentro do .topbar (texto branco); aqui precisa do
   seu próprio, senão sai invisível sobre o painel branco — foi exatamente o
   que aconteceu com os botões do painel de alertas. */
button.linkbtn.filtro-limpar{background:transparent;border:1px solid transparent;
  color:var(--azul-600);font-size:12px;font-weight:600;padding:2px 6px;
  border-radius:var(--raio-controle);cursor:pointer;white-space:nowrap;}
button.linkbtn.filtro-limpar:hover{background:var(--cinza-50);text-decoration:underline;}
button.linkbtn.filtro-limpar:focus-visible{outline:2px solid var(--azul-600);outline-offset:2px;}
.filtro-seta{font-size:9px;opacity:.8;margin-left:2px;}
.filtro-corpo{margin-top:10px;padding-top:10px;border-top:1px solid var(--cinza-100);}
.filtro-corpo[hidden]{display:none;}

/* Texto só para leitor de tela: fica fora da vista mas DENTRO da árvore de
   acessibilidade — `display:none` o removeria das duas. Usado para avisar
   "(abre em nova aba)", que a WCAG pede sinalizar e que o ícone ↗ comunica
   apenas visualmente.

   `left:0` não é enfeite. Sem ele o elemento fica na POSIÇÃO ESTÁTICA, e como
   nenhum ancestral é posicionado, o bloco que o contém é a própria página —
   então ele escapa do `overflow-x:auto` do `.table-wrap` e vai parar onde a
   célula estaria DENTRO da tabela rolada. Medido em Contracheques a 375px: o
   `(abre em nova aba)` de cada linha pousava em x≈469 e esticava a página para
   470px de largura, criando rolagem lateral para uma faixa vazia — o sintoma
   que o dono relatou no celular. Preso em `left:0`, ele continua 1px, recortado
   e invisível, continua na árvore de acessibilidade, e não estica mais nada. */
.sr-apenas{position:absolute;left:0;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Link de arquivo com aparência de botão (linkArquivoBotao).
   É um <a>, não um <button>: navega para um endereço, e é isso que permite
   abrir em nova aba, copiar o link e usar o histórico. */
a.btn-arquivo{text-decoration:none;gap:5px;}
a.btn-arquivo:hover{text-decoration:none;}
/* A seta de "sai daqui" fica menor e mais clara que o rótulo: informa sem
   competir com a palavra. */
.btn-arquivo-seta{font-size:10px;opacity:.75;margin-left:1px;}

/* ── Detalhe secundário de célula (ex.: CRM ao lado do nome do médico) ──
   Dado de apoio que NÃO deve disputar largura com o principal.

   O problema concreto: em "Médico", o CRM vinha entre parênteses depois do
   nome, numa célula de 180px. O CRM consumia o espaço e sobrava reticências
   para o NOME — exatamente o campo pelo qual as pessoas procuram.

   Aqui o principal ocupa a célula inteira e o detalhe fica sobreposto na
   borda direita, aparecendo quando o cursor passa pela linha. Como está
   fora do fluxo (`absolute`), não empurra nada: mostrar e esconder não
   move um pixel do resto da tabela.

   O degradê à esquerda evita que o número apareça colado sobre o final do
   nome, sem precisar cortar o texto. `aria-hidden` no detalhe porque o
   mesmo conteúdo já está no `title` do principal — sem isso o leitor de
   tela anunciaria o CRM duas vezes. */
td.celula-com-detalhe{position:relative;overflow:hidden;white-space:nowrap;}
td.celula-com-detalhe .celula-principal{display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
td.celula-com-detalhe .celula-detalhe{position:absolute;right:0;top:50%;
  transform:translateY(-50%);display:inline-block;
  padding:2px 8px 2px 22px;font-size:11.5px;font-weight:600;
  color:var(--azul-700);white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .12s ease;
  background:linear-gradient(to right, rgba(255,255,255,0) 0, #fff 18px, #fff 100%);}
tr:hover td.celula-com-detalhe .celula-detalhe,
td.celula-com-detalhe:focus-within .celula-detalhe{opacity:1;}
/* A linha do zebrado tem outro fundo; o degradê precisa acompanhar, senão
   aparece um retângulo branco sobre a linha cinza. */
tr:nth-child(even):hover td.celula-com-detalhe .celula-detalhe{
  background:linear-gradient(to right, rgba(247,248,250,0) 0, var(--cinza-50) 18px, var(--cinza-50) 100%);}
/* Sem hover (toque), o dado continua alcançável pelo `title` do principal e
   pela busca, que passou a incluir o campo CRM. */
@media (hover: none){
  td.celula-com-detalhe .celula-detalhe{display:none;}
}
/* Botão "Ver" dos itens de alerta — ícone redondo compacto, na mesma
   escala do texto da linha (13px), em vez de um botão de texto cheio. */
/* Reforcado em 31/08/2026: o dono apontou que o icone ficava "muito
   transparente". Era isso mesmo — fundo branco sobre linha branca, borda em
   --azul-100 (quase invisivel) e o glifo herdando a cor de texto do <button>,
   que o navegador pinta em cinza claro. Parecia desabilitado.

   Agora o botao tem fundo proprio, borda de contraste real e o traco em
   --azul-700, que e cor de acao neste sistema. Continua discreto — e um
   controle secundario dentro da linha — mas se le como clicavel. */
.btn-icone{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;margin-left:8px;vertical-align:middle;
  border-radius:50%;border:1px solid var(--cinza-300);background:var(--cinza-50);
  color:var(--azul-700);font-size:12px;line-height:1;cursor:pointer;
  transition:.15s;flex-shrink:0;}
.btn-icone:hover{background:var(--azul-100);border-color:var(--azul-500);color:var(--azul-900);}
.btn-icone:active{background:var(--azul-100);transform:scale(.94);}

/* ── Painel de totalização (Solicitações de Vale) ──
   KPI de destaque com o total já APROVADO: mesmo componente .kpi do resto do
   sistema, só com o traço lateral em verde (mesma cor do pill "Aprovado") pra
   diferenciar do acento dourado padrão dos outros KPIs da tela. */
.painel-totalizacao-vales .kpi-total-aprovado{border-left-color:var(--verde);}

/* ── Dashboards do perfil Operador (Monitoria "Meu Desempenho" e
   Bonificação "Minha equipe") ──
   Hierarquia mais simples: cabeçalho sem caixa/borda extra, KPIs grandes (já
   herdados de .kpi) e uma barra de progresso leve pro percentual da meta —
   sem paleta nova, reaproveita as variáveis do projeto. */
.dashboard-operador-cabecalho{margin-bottom:4px;}
.dashboard-operador-cabecalho h2{font-size:20px;}
.dashboard-operador-progresso{margin-top:18px;}
.dashboard-operador-progresso .progresso-rotulo{display:flex;justify-content:space-between;
  gap:10px;font-size:12.5px;color:var(--cinza-600);margin-bottom:6px;}
.dashboard-operador-progresso .progresso-fundo{background:var(--cinza-100);border-radius:999px;
  height:10px;overflow:hidden;}
.dashboard-operador-progresso .progresso-barra{background:var(--azul-500);height:100%;
  border-radius:999px;transition:width .3s ease;}
.dashboard-operador-progresso .progresso-barra.meta-atingida{background:var(--verde);}


/* ==================================================================
   PALETA DO PAINEL — viva, a pedido do dono em 31/08/2026.

   NAO substitui os tons do sistema (--verde, --ambar, --vermelho), que
   continuam valendo em selo de status, mensagem e botao. Estes tokens
   valem SO no painel, onde a cor preenche area grande e precisa saltar
   de relance; num selo de 20px, o tom vivo vira ruido.

   CADA TOM TRAZ A SUA TINTA, e isso nao e capricho — e o que a medicao
   obrigou. Contraste do preenchimento contra texto BRANCO:
     azul  #0B6FD0 .... 5,00  ok
     verde #00A65A .... 3,18  REPROVA
     ambar #FF9800 .... 2,16  REPROVA feio
     rubro #DC2626 .... 4,83  ok
   Cor viva e cor CLARA, e texto branco some nela. Verde e ambar levam
   tinta escura (4,92 e 7,26), e assim os quatro passam em 13px negrito.
   Forcar branco nos quatro teria deixado dois numeros ilegiveis dentro
   da propria barra que os anuncia.

   O NEUTRO CONTINUA APAGADO de proposito: ele marca "sem informacao"
   (o cancelamento que nao deu para classificar), e o que nao se sabe
   nao deve gritar mais alto que o que se sabe.
   ================================================================== */
:root{
  --dash-info:#0B6FD0;   --dash-info-tinta:#ffffff;
  --dash-ok:#00A65A;     --dash-ok-tinta:#0c2418;
  --dash-alerta:#FF9800; --dash-alerta-tinta:#3a2400;
  --dash-ruim:#DC2626;   --dash-ruim-tinta:#ffffff;
  --dash-neutro:#c9d2dc; --dash-neutro-tinta:#3a4550;
}
/* ==================================================================
   PAINEL GERENCIAL — vocabulário visual reutilizável

   Mora aqui, e não num <style> injetado pela view, porque a CSP deste
   sistema é `style-src-elem 'self'`: bloco <style> criado por JavaScript
   NÃO é aplicado, e falha em silêncio — a tela renderiza sem estilo
   nenhum e nada aparece no console além do aviso de CSP.

   As cores carregam SIGNIFICADO fixo em todo painel, e é isso que permite
   ler quatro gráficos diferentes sem reaprender a legenda em cada um:
     azul     = vendido / total          (o universo)
     verde    = instalado / ativado      (o que deu certo)
     âmbar    = pendente                 (o que ainda dá para salvar)
     vermelho = cancelado / perdido      (o que se perdeu)
     cinza    = sem informação           (o que não sabemos)
   ================================================================== */
.dash-secao{margin-top:20px;}
.dash-secao-titulo{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--cinza-600);margin:0 0 10px;padding-bottom:5px;border-bottom:1px solid var(--cinza-100);}

/* Tom do KPI pela BORDA, não pelo número: o valor continua legível e o
   estado se lê de relance na faixa lateral. Cor sozinha nunca comunica
   estado aqui — o rótulo diz a mesma coisa em palavra. */
.kpi.tom-ok{border-left-color:var(--dash-ok);}
.kpi.tom-alerta{border-left-color:var(--dash-alerta);}
.kpi.tom-ruim{border-left-color:var(--dash-ruim);}
.kpi.tom-info{border-left-color:var(--dash-info);}
.kpi.tom-neutro{border-left-color:var(--dash-neutro);}
.kpi .sub{font-size:11px;color:var(--cinza-600);margin-top:5px;line-height:1.35;}
.kpi .valor{font-variant-numeric:tabular-nums;}

/* BARRAS HORIZONTAIS. Grade de 3 colunas para o rótulo, o trilho e o
   número ficarem alinhados entre linhas — com o número em tabular-nums,
   as casas decimais empilham e a coluna vira comparável de relance. */
.dash-barras{display:flex;flex-direction:column;gap:9px;}
.dash-barra{display:grid;grid-template-columns:minmax(90px,158px) 1fr auto;gap:10px;align-items:center;font-size:13px;}
.dash-barra .rot{color:var(--texto);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dash-barra .trilho{background:var(--cinza-100);border-radius:999px;height:14px;overflow:hidden;}
/* display:block NAO E DETALHE — e o que faz a barra existir.
   .preenche e um <span>, e <span> e inline por padrao; largura e altura
   simplesmente NAO SE APLICAM a elemento inline. Sem esta linha, o
   background:var(--dash-info) fica declarado e nunca pinta nada, porque nao
   ha caixa para pintar: o que se via era so o trilho cinza atras.
   Pior: getComputedStyle devolve backgroundColor e width normalmente nesse
   estado, entao a inspecao por script diz que esta tudo certo. So o olho (ou
   getBoundingClientRect) pega. .faixa do funil nao tinha o problema porque ja
   era display:flex. */
.dash-barra .preenche{display:block;height:100%;border-radius:999px;background:var(--dash-info);min-width:2px;}
.dash-barra .preenche.tom-ok{background:var(--dash-ok);}
.dash-barra .preenche.tom-alerta{background:var(--dash-alerta);}
.dash-barra .preenche.tom-ruim{background:var(--dash-ruim);}
.dash-barra .preenche.tom-neutro{background:var(--dash-neutro);}
.dash-barra .num{font-variant-numeric:tabular-nums;font-weight:700;min-width:74px;text-align:right;
  color:var(--azul-900);}
.dash-barra .num small{font-weight:500;color:var(--cinza-600);}

/* FUNIL. Cada etapa é uma barra cuja largura é proporcional à PRIMEIRA
   etapa, para a perda ser visível como encurtamento. Entre etapas, a
   retenção em texto — porque a queda percentual é a informação que o
   documento pede ("onde a operação está perdendo vendas"), e ela não se
   lê de uma diferença de largura. */
.dash-funil{display:flex;flex-direction:column;gap:2px;}
.dash-etapa{display:grid;grid-template-columns:minmax(90px,158px) 1fr auto;gap:10px;align-items:center;font-size:13px;}
.dash-etapa .faixa{height:30px;border-radius:var(--raio-controle);background:var(--dash-info);
  display:flex;align-items:center;padding:0 10px;color:var(--dash-info-tinta);font-weight:700;font-size:13px;
  font-variant-numeric:tabular-nums;min-width:34px;}
.dash-etapa .faixa.tom-ok{background:var(--dash-ok);color:var(--dash-ok-tinta);}
.dash-etapa .faixa.tom-alerta{background:var(--dash-alerta);color:var(--dash-alerta-tinta);}
.dash-etapa .faixa.tom-ruim{background:var(--dash-ruim);color:var(--dash-ruim-tinta);}
.dash-etapa .pct{font-size:12px;color:var(--cinza-600);font-variant-numeric:tabular-nums;min-width:74px;text-align:right;}
.dash-passagem{font-size:11.5px;color:var(--cinza-600);padding:1px 0 1px 168px;}

/* BARRA SEGMENTADA — comparação de partes de um mesmo todo (faturamento
   vendido dividido em instalado/pendente/perdido). Uma barra só, porque
   quatro barras separadas escondem que elas SOMAM o total. */
.dash-seg{display:flex;height:26px;border-radius:var(--raio-controle);overflow:hidden;background:var(--cinza-100);}
.dash-seg > span{display:flex;align-items:center;justify-content:center;color:#fff;font-size:11.5px;
  font-weight:700;font-variant-numeric:tabular-nums;overflow:hidden;white-space:nowrap;}
.dash-seg > span.tom-ok{background:var(--dash-ok);color:var(--dash-ok-tinta);}
.dash-seg > span.tom-alerta{background:var(--dash-alerta);color:var(--dash-alerta-tinta);}
.dash-seg > span.tom-ruim{background:var(--dash-ruim);color:var(--dash-ruim-tinta);}
.dash-seg > span.tom-info{background:var(--dash-info);color:var(--dash-info-tinta);}
.dash-seg > span.tom-neutro{background:var(--dash-neutro);color:var(--dash-neutro-tinta);}
.dash-legenda{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--cinza-600);margin-top:9px;}
.dash-legenda span{display:inline-flex;align-items:center;gap:6px;}
.dash-legenda i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none;}
.dash-legenda i.tom-ok{background:var(--dash-ok);}
.dash-legenda i.tom-alerta{background:var(--dash-alerta);}
.dash-legenda i.tom-ruim{background:var(--dash-ruim);}
.dash-legenda i.tom-info{background:var(--dash-info);}
.dash-legenda i.tom-neutro{background:var(--dash-neutro);}

/* NOTA DE PROCEDÊNCIA. Existe porque este painel mostra número que o
   dado não sustenta por inteiro (motivo classificado por texto livre) e
   número que conta diferente do painel de comissão. Esconder isso faria
   o painel parecer mais confiável do que é. */
.dash-nota{font-size:12px;color:var(--cinza-600);background:var(--cinza-50);
  border-left:3px solid var(--cinza-300);border-radius:var(--raio-controle);
  padding:9px 12px;margin-top:10px;line-height:1.45;}
.dash-nota b{color:var(--texto);}
.dash-vazio{font-size:13px;color:var(--cinza-600);padding:14px 0;text-align:center;}
@media(max-width:900px){
  .dash-barra,.dash-etapa{grid-template-columns:minmax(76px,110px) 1fr auto;}
  .dash-passagem{padding-left:120px;}
}
/* Célula numérica dentro de painel: alinhada à direita e com dígito de
   largura fixa, para as casas empilharem e a coluna virar comparável de
   relance. O projeto não tinha essa regra — as tabelas de painel são as
   primeiras em que a comparação vertical de número é a leitura principal. */
.dash-secao th.num, .dash-secao td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.dash-secao td.num small{color:var(--cinza-600);font-weight:400;}
/* A grade de KPI do sistema é de 5 colunas, e a linha 1 do Dashboard
   Gerencial tem 6 por especificação (Vendas | Instalados | Pendentes |
   Cancelados | Faturamento | Conversão). Sem este modificador o sexto cai
   sozinho numa segunda linha e a leitura de relance se perde — o ponto de
   uma faixa de KPI é ser UMA faixa. */
.kpis.kpis-6{grid-template-columns:repeat(6,1fr);}
@media(max-width:1040px){.kpis.kpis-6{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){.kpis.kpis-6{grid-template-columns:repeat(2,1fr);}}
/* Numa faixa de 6, a coluna fica ~144px úteis e "R$ 28.714,36" a 24px não
   cabe — quebrava em duas linhas, desalinhando o valor dos vizinhos. 21px
   com nowrap cabe e mantém os seis na mesma linha de base, que é o ponto
   de uma faixa de KPI. Vale para todos os seis, não só o monetário: seis
   tamanhos diferentes seria pior que seis um pouco menores. */
.kpis-6 .kpi .valor{font-size:21px;white-space:nowrap;}

/* ── Célula de observação com "ver completo" ──
   O texto ocupa a largura que a coluna der e é cortado pelo NAVEGADOR, que
   conhece fonte, zoom e tamanho de janela — a versão anterior cortava por
   contagem de caractere e por isso cortava texto que cabia.

   `min-width:0` no texto não é decoração: item de flex tem `min-width:auto`
   por padrão, o que o impede de encolher abaixo do próprio conteúdo, e sem
   isso o `ellipsis` nunca dispara — a célula é que estica.

   `margin-left:auto` prende o ícone na direita mesmo quando o texto é curto,
   que é o que o dono pediu: posição fixa, para a coluna não ficar com o
   botão dançando de linha em linha. */
.resumo-cel{display:flex;align-items:center;gap:6px;width:100%;min-width:0;}
.resumo-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.resumo-abrir{margin-left:auto;flex:none;}
.resumo-abrir[hidden]{display:none;}