*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* ── Cor ───────────────────────────────────────────────────────────────────────────
     Os três tokens de estado foram escurecidos em 2026-08-12 depois de MEDIR o contraste:
     `success` dava 3,20:1 sobre o próprio fundo verde e `warning` 3,30:1 — abaixo dos 4,5:1
     que a WCAG AA pede para texto. `text-muted` dava 4,43:1 sobre o fundo da página, e é o
     token mais usado do sistema (todo texto secundário). A matiz foi preservada; só a
     luminosidade caiu até o mínimo que passa. */
  --bg:#F4F5F7;
  --surface:#FFFFFF;
  --border:#E2E4E9;
  /* Borda de CONTROLE (campo, select, checkbox): 3,04:1 sobre branco, como a WCAG 1.4.11 exige
     de limites de componente. A `--border` clara continua valendo para o que é decorativo —
     divisória de linha e aresta de card não precisam gritar, e escurecer todas deixaria a
     interface pesada sem resolver nada. */
  --border-forte:#8C94A8;
  --text:#1B1F27;
  --text-muted:#69707D;
  --primary:#3548D4;
  --primary-hover:#2937AD;
  --success:#157E57;
  --success-bg:#E6F6EF;
  --warning:#956308;
  --warning-bg:#FBF0DC;
  --danger:#C23B3B;
  --danger-bg:#FBE9E9;
  --info-bg:#EEF0FC;
  /* ── Barra do topo (2026-08-13) ────────────────────────────────────────────────────
     A barra era branca sobre fundo cinza-claro: a navegação e o conteúdo tinham o mesmo peso
     visual, e a tela inteira lia como uma superfície só. Marinho escuro separa a casca do
     trabalho — e é onde a cor de cada gestão passa a se destacar, o que numa barra branca
     não acontecia.
     Medidos: texto 12,33:1 e texto apagado 7,07:1 sobre o marinho — ambos bem acima dos
     4,5:1 da WCAG AA. */
  --topo-bg:#1E2749;
  --topo-texto:#E8ECF7;
  --topo-apagado:#A9B4D6;

  /* 14px: o tratamento "leve" foi o escolhido pelo dono em 2026-08-12. */
  --radius:14px;

  /* ── Tipografia ────────────────────────────────────────────────────────────────────
     Havia 14 tamanhos entre 0,72 e 0,9rem. 0,84 · 0,85 · 0,86 são indistinguíveis na tela e
     ainda assim multiplicavam a decisão a cada componente novo. Cinco degraus com salto
     perceptível resolvem tudo que existe hoje. */
  /* Caixa alta com espaçamento entre letras lê maior que o tamanho nominal — por isso
     este degrau existe abaixo do xs, e só para micro-rótulo em maiúsculas. */
  --fs-2xs:0.68rem;
  --fs-xs:0.75rem;    /* rótulo de eixo, nota de rodapé */
  --fs-sm:0.82rem;    /* texto secundário, legenda */
  --fs-md:0.88rem;    /* item de menu, corpo denso */
  --fs-base:1rem;     /* corpo */
  --fs-lg:1.15rem;    /* título de card */
  --fs-xl:1.5rem;     /* número de destaque */
  --fs-2xl:1.9rem;    /* o número grande do painel */
  /* Um degrau acima do 2xl, criado em 2026-08-13 para a nota da avaliação de desempenho: é o
     número que a pessoa vai lembrar da conversa inteira, e no tamanho do 2xl ele competia com
     os indicadores ao lado. Uso restrito a "o número da tela" — se aparecer numa segunda tela
     sem esse papel, é sinal de que virou enfeite. */
  --fs-3xl:2.6rem;

  /* ── Espaço ────────────────────────────────────────────────────────────────────────
     Eram 28 valores distintos. Estes seis cobrem o mesmo, e a régua fixa é o que faz telas
     escritas em semanas diferentes parecerem a mesma interface. */
  --sp-1:0.25rem;
  --sp-2:0.5rem;
  --sp-3:0.75rem;
  --sp-4:1rem;
  --sp-5:1.5rem;
  --sp-6:2rem;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  /* Vem do TOKEN, não de um px solto. Com `font-size:14px` aqui, o `rem` continuava valendo os
     16px da raiz — ou seja, a escala tipográfica não governava o texto do corpo, e "0,88rem"
     no menu significava 14,08px enquanto o corpo era 14px por outro caminho. Duas réguas
     medindo a mesma coisa é como as telas começam a divergir. O tamanho final é o mesmo
     (0,88rem = 14,08px), então nada muda na tela — muda quem manda. */
  font-size:var(--fs-md);
  line-height:1.5;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Shell: menu no TOPO (2026-08-12) ----
   Era uma barra lateral de 230px. Num painel cheio de tabela larga — folha, ponto, relatórios
   — esses 230px custavam em todas as telas, e o menu só é usado no momento de trocar de tela.
   No topo, a largura inteira fica para o conteúdo e a navegação continua a um clique.

   As áreas viram menus suspensos porque 24 itens não cabem numa linha; `details`/`summary`
   abre e fecha sem JS, e o script só cuida de fechar ao clicar fora. */
.app-shell{display:flex;flex-direction:column;min-height:100vh}

.topo{
  background:var(--topo-bg);color:var(--topo-texto);
  /* A linha na cor da gestão aberta corre sob a barra inteira: é o fio que liga o menu ao
     conteúdo abaixo, e some quando não se está dentro de nenhuma área. */
  border-bottom:3px solid var(--area-cor,var(--topo-bg));
  display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-5);
  position:sticky;top:0;z-index:60;   /* a navegação acompanha a rolagem de tabela longa */
}
.topo-marca{
  display:flex;align-items:center;gap:var(--sp-2);color:var(--topo-texto);
  font-weight:700;font-size:var(--fs-base);letter-spacing:-0.01em;padding:var(--sp-3) 0;
  flex-shrink:0;
}
.topo-marca:hover{text-decoration:none}
.topo-marca .empresa{font-size:var(--fs-xs);font-weight:400;color:var(--topo-apagado)}

/* `flex-shrink:0` nos itens impede que um nome monte no outro (eles encolheriam enquanto o
   texto segue com `nowrap`). Quando não cabem, a barra QUEBRA em duas linhas — não rola.
   `overflow` aqui foi tentado e teve de sair: qualquer valor diferente de `visible` corta o
   menu suspenso que desce de cada gestão, e a seta passava a não abrir nada. */
.menu-topo{
  display:flex;align-items:stretch;gap:var(--sp-1);flex:1;min-width:0;
  flex-wrap:wrap;overflow:visible;
}
.topo a,.topo .topo-usuario > summary{color:var(--topo-texto)}
.menu-topo > a,
.menu-area > summary{
  display:flex;align-items:center;gap:var(--sp-2);white-space:nowrap;cursor:pointer;
  flex-shrink:0;   /* é o que impede um nome de montar no outro quando a área tem 7 telas */
  align-self:center;border-radius:999px;
  padding:var(--sp-2) var(--sp-3);font-size:var(--fs-md);font-weight:500;color:var(--topo-apagado);
  border-bottom:2px solid transparent;list-style:none;
}
/* Do 3º item em diante o ícone some abaixo de 1100px: em área com 7 telas, é o que decide
   entre a barra caber e a barra rolar. O rótulo, que é o que se lê, fica. */
@media (max-width:1100px){
  .menu-topo > a svg{display:none}
  .menu-topo > a{padding:var(--sp-3) var(--sp-2)}
}
.menu-topo > a:hover,.menu-area > summary:hover{background:rgba(255,255,255,.12);color:var(--topo-texto);text-decoration:none;border-radius:999px}
/* A gestão aberta acende: fundo claro na cor DELA, sobre o marinho. É o mesmo código de cor do
   bloco grande da primeira página e do cabeçalho da área — três lugares, uma só linguagem. */
/* A gestão aberta é uma PÍLULA SÓLIDA na cor dela — referência do dono
   (`/var/www/inspiracao/19.jpeg`). Sobre o marinho, fundo tingido claro ficava tímido demais
   para dizer onde se está; sólido resolve de relance. */
.menu-topo > a.active,.menu-area.tem-ativa > summary{
  color:#fff;background:var(--area-cor,var(--primary));
  border-bottom-color:transparent;border-radius:999px;font-weight:700;
}
.menu-topo > a.active:hover,.menu-area.tem-ativa > summary:hover{
  background:var(--area-cor,var(--primary));filter:brightness(1.08);
}
.menu-area > summary::-webkit-details-marker{display:none}
/* A seta diz que há mais coisa embaixo, sem depender de cor. */
.menu-area > summary::after{content:'▾';font-size:var(--fs-xs);color:var(--text-muted)}
.menu-area[open] > summary{background:var(--bg)}
.menu-area{position:relative}
.menu-drop{
  position:absolute;top:100%;left:0;min-width:15rem;z-index:70;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 10px 30px -10px rgba(27,31,39,.22);padding:var(--sp-1);
  display:flex;flex-direction:column;
}
.menu-drop a{
  display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius);color:var(--text);font-size:var(--fs-md);
}
.menu-drop a:hover{background:var(--bg);text-decoration:none}
.menu-drop a.active{background:var(--info-bg);color:var(--primary)}
.menu-drop a svg{flex-shrink:0;opacity:0.7}
.menu-drop a.active svg{opacity:1}

.topo-acoes{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0;margin-left:auto}
.topo-usuario > summary{
  display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;list-style:none;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);font-size:var(--fs-sm);font-weight:600;
}
.topo-usuario > summary::-webkit-details-marker{display:none}
.topo-usuario > summary:hover{background:rgba(255,255,255,.12)}
.topo-usuario{position:relative}
.topo-usuario .menu-drop{left:auto;right:0;min-width:12rem;padding:var(--sp-2)}
/* O menu suspenso é superfície clara sobre a barra escura: dentro dele o texto volta ao normal. */
.topo .menu-drop a,.topo .menu-drop button,.topo .menu-drop .role{color:var(--text)}
.topo-usuario .role{font-size:var(--fs-2xs);color:var(--text-muted);text-transform:capitalize;
  padding:0 var(--sp-3) var(--sp-2);border-bottom:1px solid var(--border);margin-bottom:var(--sp-2)}
.topo-usuario button{
  width:100%;background:none;border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-2);font-size:var(--fs-xs);color:var(--text-muted);cursor:pointer;font-family:inherit;
}
.topo-usuario button:hover{border-color:var(--danger);color:var(--danger)}

/* Título da página: era a barra inteira; agora é uma linha discreta acima do conteúdo. */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
/* O título e o conteúdo somavam os dois paddings, e a tela abria com um vão antes de
   qualquer coisa. Agora o espaço é um só: a faixa dá o topo, o conteúdo continua dali. */
.titulo-pagina{padding:var(--sp-5) var(--sp-6) 0}
.titulo-pagina h1{font-size:var(--fs-lg);font-weight:700}
.titulo-pagina + .content{padding-top:var(--sp-4)}
.content{padding:var(--sp-5) var(--sp-6);flex:1}

/* Abaixo de 1100px o menu rola na horizontal em vez de espremer os rótulos: rótulo cortado
   obriga a adivinhar, e adivinhar num menu leva a clique errado. */
@media (max-width:1100px){
  .topo{gap:var(--sp-2);padding:0 var(--sp-3)}
  .menu-topo{overflow-x:auto;scrollbar-width:thin}
  .content,.titulo-pagina{padding-left:var(--sp-4);padding-right:var(--sp-4)}
}

/* ---- Componentes ---- */
/* Cartão solto sobre o fundo, com sombra em duas camadas: uma rente para assentar, outra
   larga para levantar. A borda sai — a sombra já separa o cartão do fundo, e as duas juntas
   fecham demais o conteúdo. */
.card{
  background:var(--surface);border:1px solid transparent;border-radius:var(--radius);
  padding:var(--sp-6);margin-bottom:var(--sp-5);
  box-shadow:0 1px 2px rgba(27,31,39,.05),0 10px 30px -12px rgba(27,31,39,.14);
}
.card h2{font-size:var(--fs-lg);font-weight:700;letter-spacing:-0.01em;margin-bottom:var(--sp-4)}

.grid{display:grid;gap:1.2rem}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.stat{
  background:var(--surface);border:1px solid transparent;border-radius:var(--radius);
  padding:var(--sp-5);position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(27,31,39,.05),0 10px 30px -14px rgba(27,31,39,.14);
}
/* Fio de acento no topo: o único ornamento do tratamento, e existe para dar borda superior sem
   fechar o cartão numa moldura. */
.stat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--primary),#6B7BF0);
}
.stat .num{font-size:var(--fs-2xl);font-weight:700;line-height:1;letter-spacing:-0.02em}
.stat .label{font-size:var(--fs-xs);color:var(--text-muted);margin-top:0.4rem}

/* Barra horizontal de relatório (Fase 4, Task 8 — gestao/relatorios.php): div externa (trilho)
   + div interna com width em % (relativa ao maior valor da série que está sendo desenhada). */
.rel-bar{flex:1;background:var(--bg);border-radius:6px;height:18px;overflow:hidden}
.rel-bar-fill{height:100%;background:var(--primary);border-radius:6px;min-width:2px}

table{width:100%;border-collapse:collapse}
th{
  text-align:left;font-size:var(--fs-2xs);letter-spacing:0.05em;text-transform:uppercase;
  color:var(--text-muted);padding:0.7rem 0.8rem;border-bottom:1px solid var(--border);
}
td{padding:0.85rem 0.8rem;border-bottom:1px solid var(--border);font-size:var(--fs-md);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg)}

.badge{
  display:inline-block;padding:0.22rem 0.6rem;border-radius:999px;font-size:var(--fs-xs);font-weight:600;
}
.badge-novo{background:var(--info-bg);color:var(--primary)}
.badge-em_analise{background:var(--warning-bg);color:var(--warning)}
.badge-aprovado{background:var(--success-bg);color:var(--success)}
.badge-contratado{background:var(--success-bg);color:var(--success)}
.badge-descartado{background:var(--danger-bg);color:var(--danger)}
.badge-ativo{background:var(--success-bg);color:var(--success)}
.badge-desligado{background:var(--danger-bg);color:var(--danger)}
.badge-aberta{background:var(--success-bg);color:var(--success)}
.badge-fechada{background:var(--danger-bg);color:var(--danger)}
.badge-pendente{background:var(--warning-bg);color:var(--warning)}
.badge-concluido{background:var(--success-bg);color:var(--success)}
.badge-erro{background:var(--danger-bg);color:var(--danger)}

.btn{
  display:inline-flex;align-items:center;gap:0.4rem;border-radius:var(--radius);
  padding:0.6rem 1.1rem;font-size:var(--fs-sm);font-weight:600;cursor:pointer;border:1px solid transparent;
}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);text-decoration:none}
.btn-ghost{background:none;border-color:var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);text-decoration:none}
.btn-danger{background:none;border-color:var(--danger);color:var(--danger)}
.btn-danger:hover{background:var(--danger-bg);text-decoration:none}
.btn-sm{padding:0.35rem 0.7rem;font-size:var(--fs-xs)}

.field{margin-bottom:1.1rem}
.field label{display:block;font-size:var(--fs-xs);font-weight:600;margin-bottom:0.4rem}
.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--border-forte);border-radius:var(--radius);
  padding:0.6rem 0.75rem;font-size:var(--fs-md);font-family:inherit;color:var(--text);background:var(--surface);
}
/* `outline:none` sozinho apaga o indicador de foco do navegador; trocar a cor de uma borda
   de 1px no lugar é fraco demais para quem navega por teclado. O anel de 3px em volta é
   visível sem mexer no layout (box-shadow não ocupa espaço). */
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(53,72,212,0.25);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field-hint{font-size:var(--fs-xs);color:var(--text-muted);margin-top:0.3rem}

.alert{padding:0.85rem 1rem;border-radius:var(--radius);font-size:var(--fs-sm);margin-bottom:1.2rem}
.alert-error{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(194,59,59,0.25)}
.alert-success{background:var(--success-bg);color:var(--success);border:1px solid rgba(26,154,107,0.25)}
.alert-info{background:var(--info-bg);color:var(--primary);border:1px solid rgba(53,72,212,0.2)}
/* Faltava o quarto tom da família: o aviso. Nem erro (nada quebrou) nem informação
   neutra (pede ação). Entrou com o módulo de perfil, onde "amplitude alta" é
   exatamente isso — mas serve a qualquer tela. */
.alert-warning{background:var(--warning-bg);color:var(--warning);border:1px solid rgba(149,99,8,0.25)}

.filters{display:flex;gap:0.8rem;flex-wrap:wrap;margin-bottom:1.4rem}
.filters select,.filters input{
  border:1px solid var(--border);border-radius:var(--radius);padding:0.5rem 0.7rem;font-size:var(--fs-sm);font-family:inherit;
}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-muted)}

.summary-list{display:flex;flex-direction:column}
.summary-row{display:flex;justify-content:space-between;gap:1rem;padding:0.6rem 0;border-bottom:1px solid var(--border)}
.summary-row:last-child{border-bottom:none}
.summary-row dt{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap}
.summary-row dd{font-size:var(--fs-sm);text-align:right}

/* ---- Login ---- */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2.4rem;width:100%;max-width:360px}
.login-box h1{font-size:var(--fs-lg);margin-bottom:0.3rem}
.login-box .sub{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:1.6rem}
.login-box .btn{width:100%;justify-content:center;margin-top:0.4rem}

@media (max-width:860px){
  .app-shell{flex-direction:column}
  .sidebar{width:100%;flex-direction:row;align-items:center;padding:0.8rem 1rem;overflow-x:auto}
  .sidebar-nav{flex-direction:row}
  .sidebar-foot{display:none}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .content{padding:1.2rem}
}

/* Badges de status de funcionário (fase 1) */
.badge-st-ativo{background:#e6f7ee;color:#0a7a43}
.badge-st-periodo_experiencia{background:#fff4e0;color:#9a6200}
.badge-st-ferias{background:#e3f0ff;color:#155bb5}
.badge-st-aviso_previo{background:#ffe9df;color:#b34a12}
.badge-st-desligado{background:#f0f1f3;color:#5a6270}
.badge-st-admissao_agendada{background:#efe6ff;color:#6b2fbf}
.badge-ct-clt{background:#e3f0ff;color:#155bb5}
.badge-ct-pj{background:#fdf0d7;color:#8a6400}
.badge-ct-estagiario{background:#e6f7f5;color:#0b7d72}

/* Barra de progresso do PDI — CSS puro, sem imagem/JS externo. */
.pdi-bar{background:var(--bg);border-radius:999px;height:0.55rem;overflow:hidden;margin:0.35rem 0}
.pdi-bar-fill{background:var(--primary);height:100%;border-radius:999px;transition:width 0.2s ease}
.pdi-bar-fill.concluida{background:var(--success)}
.pdi-bar-fill.cancelada{background:var(--text-muted)}
.pdi-bar-label{font-size:var(--fs-xs);color:var(--text-muted);display:flex;justify-content:space-between}

.banner-alerta{background:#fff4e0;border:1px solid #f0c36d;border-radius:8px;padding:0.8rem 1rem;margin-bottom:1.2rem;font-size:var(--fs-md)}
.banner-alerta strong{color:#9a6200}
.paginacao{display:flex;gap:0.4rem;margin-top:1rem;flex-wrap:wrap}
.paginacao a,.paginacao span{padding:0.3rem 0.7rem;border:1px solid var(--border);border-radius:6px;font-size:var(--fs-sm);text-decoration:none}
.paginacao span.atual{background:var(--primary);color:#fff;border-color:transparent}
.texto-secundario{display:block;font-size:var(--fs-xs);color:var(--text-muted)}

/* Senha temporária exibida uma única vez (gestao/usuarios.php) — precisa ser lida e copiada
   sem erro, então vai em monoespaçada e com bom contraste. */
.senha-temporaria{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-base);
  letter-spacing:0.06em;background:#fff;border:1px solid #f0c36d;border-radius:6px;
  padding:0.3rem 0.6rem;margin:0.35rem 0;user-select:all;
}
.sidebar-foot a.user{display:block;text-decoration:none;color:inherit}
.sidebar-foot a.user:hover{text-decoration:underline}

/* Login — identidade e campo de senha com botão de revelar. */
.login-marca{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--primary);margin-bottom:0.9rem;
  /* Com o símbolo ao lado do nome (2026-08-12), a linha precisa alinhar os dois pelo centro —
     o letter-spacing largo do nome empurraria o desenho para baixo da linha de base. */
  display:flex;align-items:center;gap:var(--sp-2);
}
.login-marca svg{flex-shrink:0}
.login-box h1{font-size:var(--fs-xl)}
.campo-senha{position:relative;display:block}
.campo-senha input{width:100%;padding-right:5.2rem}
.ver-senha{
  position:absolute;right:0.5rem;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;font-size:var(--fs-xs);font-weight:600;
  color:var(--primary);padding:0.3rem 0.4rem;
}
.login-links{margin-top:1.2rem;text-align:center;font-size:var(--fs-sm)}
.login-links a{color:var(--text-muted)}
.login-links a:hover{color:var(--primary)}

/* Central de pendências do dashboard. A faixa colorida à esquerda separa o que tem prazo
   legal correndo (vermelho) do que é só informação (neutro/azul). */
.pend-linha{padding:0.7rem 0 0.7rem 0.9rem;border-left:3px solid var(--border);margin-bottom:0.7rem;font-size:var(--fs-md)}
.pend-linha:last-child{margin-bottom:0}
.pend-urgente{border-left-color:var(--danger)}
.pend-leve{border-left-color:var(--primary)}
.pend-rotulo{display:block;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--text-muted);margin-bottom:0.3rem}
.pend-nota{font-size:var(--fs-xs);color:var(--text-muted);margin-top:0.35rem;font-style:italic}

/* Bloco opcional recolhido no cadastro de funcionário — o formulário tem 24 campos e só 4 são
   obrigatórios; mostrar tudo de uma vez faz o cadastro parecer mais trabalhoso do que é. */
.bloco-opcional{border:1px solid var(--border);border-radius:var(--radius);padding:0.8rem 1rem;margin:1rem 0}
.bloco-opcional > summary{cursor:pointer;font-weight:600;font-size:var(--fs-md)}
.bloco-opcional[open] > summary{margin-bottom:0.8rem;padding-bottom:0.6rem;border-bottom:1px solid var(--border)}

/* ==========================================================================
   HUB DE PORTAIS  (dashboard.php + portais/ver.php)
   --------------------------------------------------------------------------
   A cor de cada bloco NÃO está aqui: vem do hub_data.php pela custom property
   `--area-cor` / `--area-bg`, aplicada inline no elemento. Assim o CSS não
   precisa saber quantos portais existem, e criar um quinto bloco é mexer só no
   PHP. Todo traço de ícone herda `currentColor`.
   ========================================================================== */

.portal-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1rem;margin-bottom:1.5rem;
}
.portal-card{
  position:relative;display:flex;flex-direction:column;gap:0.55rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.3rem 1.3rem 1.15rem;overflow:hidden;
  color:var(--text);text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
/* A barra lateral na cor do bloco: some no repouso e cresce no hover. É o que dá ao card a
   identidade do portal sem pintar o card inteiro (quatro cards saturados brigariam entre si). */
.portal-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--area-cor,var(--primary));
  transform:scaleX(0.5);transform-origin:left;opacity:.55;
  transition:transform .16s ease,opacity .16s ease;
}
.portal-card:hover,.portal-card:focus-visible{
  transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(27,31,39,.28);
  border-color:var(--area-cor,var(--primary));text-decoration:none;
}
.portal-card:hover::before,.portal-card:focus-visible::before{transform:scaleX(1);opacity:1}
.portal-chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;
  background:var(--area-bg,var(--info-bg));color:var(--area-cor,var(--primary));
}
.portal-card h3{font-size:var(--fs-base);font-weight:700;letter-spacing:-0.01em}
.portal-card p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.45;flex:1}
.portal-conta{
  font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--area-cor,var(--primary));display:flex;align-items:center;gap:0.35rem;
}
.portal-conta .seta{transition:transform .16s ease}
.portal-card:hover .portal-conta .seta{transform:translateX(3px)}

/* ---- Página de um portal ---- */
.area-header{
  background:var(--area-bg,var(--info-bg));border:1px solid var(--border);
  border-left:4px solid var(--area-cor,var(--primary));
  border-radius:var(--radius);padding:1.4rem 1.5rem;margin-bottom:1.3rem;
  display:flex;gap:1.1rem;align-items:flex-start;
}
.area-header .portal-chip{background:var(--surface);flex-shrink:0}
.area-header h2{font-size:var(--fs-lg);font-weight:700;letter-spacing:-0.01em}
.area-header p{font-size:var(--fs-sm);color:var(--text-muted);margin-top:0.2rem;max-width:58ch}
.hub-topo{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.hub-busca{
  flex:1;min-width:220px;max-width:340px;padding:0.6rem 0.85rem;font-size:var(--fs-md);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  color:var(--text);font-family:inherit;
}
.hub-busca:focus{outline:2px solid var(--area-cor,var(--primary));outline-offset:1px;border-color:transparent}
.hub-voltar{display:inline-flex;align-items:center;gap:0.3rem;font-size:var(--fs-sm);font-weight:600}

.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:0.9rem}
.hub-card{
  position:relative;display:flex;gap:0.85rem;align-items:flex-start;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1rem 1.1rem;color:var(--text);text-decoration:none;overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.hub-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--area-cor,var(--primary));transform:scaleX(0);transform-origin:left;
  transition:transform .16s ease;
}
a.hub-card:hover,a.hub-card:focus-visible{
  transform:translateY(-2px);box-shadow:0 8px 18px -12px rgba(27,31,39,.3);
  border-color:var(--area-cor,var(--primary));text-decoration:none;
}
a.hub-card:hover::before,a.hub-card:focus-visible::before{transform:scaleX(1)}
.hub-card .portal-chip{width:34px;height:34px;border-radius:8px;flex-shrink:0}
.hub-card h3{font-size:var(--fs-md);font-weight:650;margin-bottom:0.2rem}
.hub-card p{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.45}
.hub-vazio{
  grid-column:1/-1;text-align:center;color:var(--text-muted);font-size:var(--fs-md);
  padding:2rem 1rem;border:1px dashed var(--border);border-radius:var(--radius);
}

/* ---- Indicadores coloridos ---- */
.stat-cor{border-left:3px solid var(--stat-cor,var(--primary))}
.stat-cor .num{color:var(--stat-cor,var(--primary))}

/* ---- Gráfico de barras horizontais (candidatos por status) ----
   Sem biblioteca: a largura sai em % do MAIOR valor da série, calculada no PHP. Escala pelo
   maior (e não pelo total) porque o que se lê aqui é a comparação entre as etapas do funil. */
.chart{display:flex;flex-direction:column;gap:0.6rem}
.chart-linha{display:grid;grid-template-columns:130px 1fr 42px;align-items:center;gap:0.8rem}
.chart-rotulo{font-size:var(--fs-sm);color:var(--text-muted)}
.chart-trilho{background:var(--bg);border-radius:6px;height:20px;overflow:hidden}
.chart-fill{
  height:100%;border-radius:6px;min-width:3px;background:var(--chart-cor,var(--primary));
  transition:width .4s cubic-bezier(.4,0,.2,1);
}
.chart-valor{font-size:var(--fs-sm);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}

/* ---- Painéis do dashboard ---- */
.painel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.3rem}
.painel-topo{display:flex;align-items:center;gap:0.55rem;margin-bottom:0.9rem}
.painel-topo .portal-chip{width:30px;height:30px;border-radius:8px}
.painel-topo h2{font-size:var(--fs-md);font-weight:700}
.painel-conta{
  margin-left:auto;font-size:var(--fs-xs);font-weight:700;padding:0.1rem 0.45rem;border-radius:99px;
  background:var(--area-bg,var(--info-bg));color:var(--area-cor,var(--primary));
}
.painel-lista{display:flex;flex-direction:column;gap:0.55rem}
.painel-item{display:flex;justify-content:space-between;align-items:baseline;gap:0.7rem;font-size:var(--fs-sm)}
.painel-item + .painel-item{border-top:1px solid var(--border);padding-top:0.55rem}
.painel-item .quando{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap;flex-shrink:0}
.painel-item .quando.urgente{color:var(--danger);font-weight:600}
.painel-vazio{font-size:var(--fs-sm);color:var(--text-muted);font-style:italic}
.painel-rodape{margin-top:0.9rem;font-size:var(--fs-xs)}

@media (max-width:860px){
  .chart-linha{grid-template-columns:96px 1fr 36px;gap:0.5rem}
  .area-header{flex-direction:column;gap:0.7rem}
}

/* Quem pediu menos movimento no sistema recebe o hub sem deslocamento nenhum — as barras e os
   cards continuam legíveis, só não animam. */
@media (prefers-reduced-motion:reduce){
  .portal-card,.hub-card,.chart-fill,.portal-card::before,.hub-card::before,.portal-conta .seta{
    transition:none;
  }
  .portal-card:hover,.hub-card:hover,a.hub-card:focus-visible,.portal-card:focus-visible{transform:none}
}

/* Rótulo que só o leitor de tela recebe: o campo de busca do portal tem placeholder, e
   placeholder não é rótulo — some ao digitar e nem todo leitor de tela o anuncia. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Rótulo de seção do dashboard — separa os blocos sem competir com os h2 dos cards. */
.secao-rotulo{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.07em;
  color:var(--text-muted);margin-bottom:0.7rem;font-weight:600;
}

/* ── Caixa de avisos (notificacoes.php) ──────────────────────────────────────────────
   A lista precisa distinguir lida de não lida no primeiro relance, sem depender de cor
   sozinha: quem não enxerga a diferença de matiz percebe pelo peso do texto e pelo ponto.
   Por isso o não lido carrega TRÊS sinais — ponto, título em negrito e fundo levemente
   destacado — em vez de só um. */
.notif-lista{display:flex;flex-direction:column}
.notif{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:0.9rem 0;border-bottom:1px solid var(--border);
}
.notif:last-child{border-bottom:none}
.notif-titulo{font-weight:600;display:flex;align-items:center;gap:0.45rem}
.notif-titulo a{color:inherit}
.notif-texto{margin:0.3rem 0 0;color:var(--text-muted)}
.notif-quando{display:block;margin-top:0.35rem;font-size:var(--fs-sm);color:var(--text-muted)}

/* O ponto é decorativo: quem usa leitor de tela recebe a informação pelo aria-label do
   próprio elemento, não pela cor. */
.notif-ponto{
  width:8px;height:8px;border-radius:50%;background:var(--primary);flex:none;
}

/* Lida: some o destaque, mas o registro CONTINUA na lista — marcar como lido não é apagar,
   e "o que me avisaram semana passada" é uma pergunta legítima. */
.notif-lida .notif-titulo{font-weight:400;color:var(--text-muted)}

/* ==========================================================================
   SINO E CAIXA DE AVISOS
   ========================================================================== */

/* O sino vive na barra do topo, ao lado da busca (mudou do pé do menu em 2026-08-12): é para
   lá que se olha para saber "o que é meu", e no rodapé da lateral ele ficava abaixo da linha
   de visão. O badge só existe quando há o que ler — contador zerado permanente ensina o olho
   a ignorar a região inteira. */
.sino{
  display:flex;align-items:center;gap:0.6rem;padding:0.6rem 0.7rem;border-radius:var(--radius);
  color:var(--topo-texto);font-size:var(--fs-md);font-weight:500;position:relative;
}
.sino:hover{background:rgba(255,255,255,.12);text-decoration:none}
/* Amarelo, não azul: sobre o marinho o azul da marca some. */
.sino.tem-aviso{color:#FFD166}
.sino-badge{
  min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  background:var(--danger);color:#fff;font-size:var(--fs-xs);font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;
}

.notif-lista{display:flex;flex-direction:column;margin-top:1rem}
.notif{
  display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;
  padding:0.9rem 0;border-bottom:1px solid var(--border);
}
.notif:last-child{border-bottom:none}
.notif-corpo{min-width:0}
.notif-titulo{font-size:var(--fs-md);font-weight:650;display:flex;align-items:center;gap:0.5rem}
/* Lida não some da lista — marcar como lida não é apagar. Ela recua para o segundo plano. */
.notif-lida{opacity:.6}
.notif-lida .notif-titulo{font-weight:500}
.notif-ponto{
  width:8px;height:8px;border-radius:50%;background:var(--primary);flex-shrink:0;
}
.notif-texto{font-size:var(--fs-sm);color:var(--text-muted);margin-top:0.25rem;line-height:1.5}
.notif-quando{font-size:var(--fs-xs);color:var(--text-muted);display:block;margin-top:0.3rem}

/* ── Primeira página: a agenda do dia ────────────────────────────────────────────────
   O bloco que abre o painel. Ele substituiu quatro cartões de navegação na dobra: o menu
   lateral já responde "onde ficam as coisas", e quem senta na cadeira quer saber o que
   precisa fazer hoje. */
.agenda-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.agenda-topo h2{margin:0}
.agenda-data{margin:0.15rem 0 0;font-size:var(--fs-md)}
.agenda-conta{
  background:var(--primary);color:#fff;border-radius:999px;
  padding:0.15rem 0.6rem;font-size:var(--fs-sm);font-weight:600;flex:none;
}
.agenda-lista{list-style:none;margin:1rem 0 0;padding:0}
.agenda-item{
  display:flex;align-items:center;gap:0.7rem;
  padding:0.6rem 0;border-bottom:1px solid var(--border);
}
.agenda-item:last-child{border-bottom:none}
.agenda-item a{flex:1;color:inherit}

/* A marca à esquerda carrega a urgência. Cor NÃO é o único sinal: o texto do prazo à direita
   diz "vencido há 12d" por extenso, então quem não distingue as cores lê a mesma informação. */
.agenda-marca{width:4px;align-self:stretch;border-radius:2px;flex:none;background:var(--border)}
.agenda-item.u0 .agenda-marca{background:var(--danger)}
.agenda-item.u1 .agenda-marca{background:var(--warning)}
.agenda-item.u2 .agenda-marca{background:var(--primary)}
.agenda-item.u3 .agenda-marca{background:var(--border)}

/* ── Blocos grandes das áreas (primeira página) ──────────────────────────────────────
   Substituíram a faixa fina de atalhos em 2026-08-13. A faixa dizia só o nome da área, e nome
   de área não ensina nada a quem ainda não sabe o que tem dentro.

   A cor de cada área vem do PHP (`--area-cor` / `--area-bg`, de `src/Menu.php`) e é a mesma no
   bloco, na aba do submenu e no cabeçalho da área: é ela que diz "continuo no mesmo lugar"
   enquanto se navega, antes de qualquer palavra ser lida. */
.areas-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:0.9rem;
}
.area-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  /* A faixa colorida no alto é o que identifica a área de longe, sem depender de tingir o
     card inteiro — fundo colorido em cinco cards ao lado brigaria com o conteúdo. */
  border-top:3px solid var(--area-cor,var(--primary));
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.area-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(27,31,39,.28)}
.area-abrir{
  display:grid;grid-template-columns:auto 1fr;gap:0.9rem;align-items:start;
  padding:1.1rem 1.2rem 0.9rem;color:inherit;text-decoration:none;flex:1;
}
.area-abrir:hover,.area-abrir:focus-visible{text-decoration:none}
.area-abrir:hover .area-nome{color:var(--area-cor,var(--primary))}
.area-emoji{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;font-size:var(--fs-xl);line-height:1;
  background:var(--area-bg,var(--info-bg));
}
.area-texto{display:flex;flex-direction:column;gap:0.25rem;min-width:0}
.area-nome{font-size:var(--fs-lg);font-weight:700;letter-spacing:-0.01em;transition:color .16s ease}
.area-desc{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.45}
.area-selo{
  grid-column:1/-1;justify-self:start;
  font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--area-cor,var(--primary));background:var(--area-bg,var(--info-bg));
  border-radius:99px;padding:0.2rem 0.6rem;
}
/* Os atalhos ficam FORA do link do card: link dentro de link é HTML inválido e, na prática,
   um alvo de clique que engole o outro. */
.area-atalhos{
  display:flex;flex-wrap:wrap;gap:0.35rem;padding:0 1.2rem 1.1rem;
}
.area-atalhos a{
  font-size:var(--fs-xs);font-weight:600;color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:99px;
  padding:0.3rem 0.7rem;text-decoration:none;
}
.area-atalhos a:hover{
  background:var(--area-bg,var(--info-bg));border-color:var(--area-cor,var(--primary));
  color:var(--area-cor,var(--primary));text-decoration:none;
}
.area-mais{color:var(--text-muted)}

/* Cabeçalho da tela de uma área — mesma cor, mesmo emoji do bloco que trouxe até aqui. */
.area-header .area-emoji{background:var(--surface);flex-shrink:0}
.area-header h1{font-size:var(--fs-lg);font-weight:700;letter-spacing:-0.01em}

/* Linha de botões no fim de um card — evita estilo inline repetido tela a tela. */
.acoes-linha{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}

/* ── Peças sem regra própria ────────────────────────────────────────────────────────── */

/* `.agenda` é o bloco que abre o painel. A caixa vem de `.card`; esta regra existe para o
   espaçamento interno não depender de estilo inline na tela. */
.agenda .agenda-lista{margin-top:var(--sp-4)}

/* Todo ícone SVG das telas. Sem `vertical-align`, o ícone senta na linha de base e desalinha
   do texto ao lado por 1–2px — o tipo de desalinho que ninguém sabe nomear mas todo mundo vê. */
.icone{vertical-align:-0.15em;flex:none}

/* ---- Primeira página: cabeçalho, mês, implantação (2026-08-12) ----
   A tela deixou de ser um índice e virou posto de trabalho: o cabeçalho traz os verbos, a
   faixa do mês traz o que vem pela frente e a implantação conduz quem acabou de instalar. */
.painel-cabecalho{
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4);
  flex-wrap:wrap;margin-bottom:var(--sp-6);
}
.painel-saudacao{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-0.02em}
.painel-data{font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--sp-1)}
.painel-acoes{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.painel-acoes .btn{min-height:44px}  /* alvo de toque WCAG 2.5.5 */

/* O grupo de urgência é dito por ESCRITO ("Vencido", "Esta semana"): a marca colorida do item
   continua existindo, mas quem não distingue as cores lê a mesma informação. */
.agenda-grupo{
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:0.08em;
  color:var(--text-muted);margin:var(--sp-4) 0 var(--sp-2);font-weight:600;
}
.agenda-grupo:first-of-type{margin-top:var(--sp-3)}

.mes-lista{list-style:none;margin:0;padding:0}
.mes-dia{display:flex;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--border)}
.mes-dia:last-child{border-bottom:none}
.mes-data{min-width:4.5rem;display:flex;flex-direction:column;line-height:1.2}
.mes-data span{font-size:var(--fs-2xs);color:var(--text-muted);text-transform:uppercase}
.mes-eventos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.mes-evento{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-size:var(--fs-md)}
.mes-tag{
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:0.05em;font-weight:600;
  padding:0.1rem var(--sp-2);border-radius:999px;background:var(--bg);color:var(--text-muted);
}
.mes-evento.tipo-admissao .mes-tag{background:var(--success-bg);color:var(--success)}
.mes-evento.tipo-desligamento .mes-tag{background:var(--danger-bg);color:var(--danger)}
.mes-evento.tipo-ferias .mes-tag{background:var(--info-bg);color:var(--primary)}
.mes-evento.tipo-experiencia .mes-tag{background:var(--warning-bg);color:var(--warning)}
.mes-ate{font-size:var(--fs-xs);color:var(--text-muted)}

.stat-topo{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)}
.stat-apoio{font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--sp-2)}
.stat-link{font-size:var(--fs-xs);display:inline-block;margin-top:var(--sp-2)}
.stat-convite{margin-top:var(--sp-3)}
.selo{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:0.05em;padding:0.1rem var(--sp-2);border-radius:999px}
.selo-atencao{background:var(--warning-bg);color:var(--warning)}

.barra-progresso{background:var(--bg);border-radius:999px;height:10px;overflow:hidden;margin:var(--sp-4) 0}
.barra-progresso-fill{background:var(--primary);height:100%;border-radius:999px}
.implantacao-passos{list-style:none;margin:0;padding:0}
.implantacao-passos li{
  display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;
  border-bottom:1px solid var(--border);font-size:var(--fs-md);
}
.implantacao-passos li:last-child{border-bottom:none}
.implantacao-marca{
  width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border-forte);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-2xs);flex-shrink:0;
}
.implantacao-passos li.feito .implantacao-marca{background:var(--success);border-color:var(--success);color:#fff}
.implantacao-estado{margin-left:auto;font-size:var(--fs-xs);color:var(--text-muted)}
/* Borda tracejada: o bloco que falhou é visivelmente diferente de um bloco vazio. */
.bloco-falhou{border-style:dashed}

/* ---- Casca: menu com ícones, seções recolhíveis, busca no topo (2026-08-12) ----
   Eram 24 links sempre abertos, sem ícone, e uma barra de topo que só repetia o título. */
.sidebar-logo .marca{display:flex;align-items:center;gap:var(--sp-2);color:var(--primary)}
.sidebar-logo .marca svg{flex-shrink:0}

.sidebar-nav a{gap:var(--sp-2)}
.sidebar-nav a svg{flex-shrink:0;opacity:0.7}
.sidebar-nav a.active svg{opacity:1}
.nav-rotulo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A contagem sai das mesmas condições que alimentam "Precisa de você": menu e lista
   discordarem é pior que o menu não contar nada. */
.nav-conta{
  margin-left:auto;background:var(--info-bg);color:var(--primary);
  font-size:var(--fs-2xs);font-weight:700;padding:0.05rem var(--sp-2);border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.nav-grupo summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
}
.nav-grupo summary::-webkit-details-marker{display:none}
/* A seta diz, sem depender de cor, se a seção está aberta. */
.nav-grupo summary::after{content:'▸';font-size:var(--fs-2xs);color:var(--text-muted);transition:transform .15s}
.nav-grupo[open] summary::after{transform:rotate(90deg)}
.nav-grupo summary:hover{color:var(--text)}
.nav-grupo summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius)}

.topbar-acoes{display:flex;align-items:center;gap:var(--sp-4)}
/* ── Faixa da busca (2026-08-13) ─────────────────────────────────────────────────────
   O campo dividia a linha com o menu, e numa área de sete telas os dois disputavam a mesma
   largura: a caixa passava por cima dos últimos itens. Numa faixa própria, o menu recebe a
   linha inteira e a busca deixa de competir com ele. Fundo do corpo (não `surface`) para
   ler como um degrau abaixo da barra, e não como uma segunda barra. */
.barra-busca{
  display:flex;align-items:center;
  padding:var(--sp-2) var(--sp-5);background:var(--bg);
  border-bottom:1px solid var(--border);
}
.busca-topo{position:relative;display:flex;align-items:center;min-width:0}
.busca-topo > svg{position:absolute;left:var(--sp-3);color:var(--text-muted);pointer-events:none}
.busca-topo input{
  width:26rem;max-width:100%;min-height:38px;padding:var(--sp-2) var(--sp-3) var(--sp-2) 2.3rem;
  border:1px solid var(--border-forte);border-radius:999px;font-size:var(--fs-md);
  background:var(--bg);color:var(--text);font-family:inherit;
}
.busca-topo input:focus-visible{outline:2px solid var(--primary);outline-offset:1px;background:var(--surface)}
.busca-resultado{
  position:absolute;top:calc(100% + var(--sp-2));left:0;right:0;z-index:60;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  list-style:none;margin:0;padding:var(--sp-1);box-shadow:0 8px 24px rgba(27,31,39,.12);
  max-height:60vh;overflow-y:auto;
}
.busca-resultado li a{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);color:var(--text);
}
.busca-resultado li a:hover,.busca-resultado li a:focus-visible{background:var(--info-bg);text-decoration:none}
/* Quem saiu continua aparecendo na busca — mas dito por escrito, para não se confundir com
   quem está na empresa. */
.busca-status{
  margin-left:auto;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:0.05em;
  color:var(--text-muted);background:var(--bg);padding:0.05rem var(--sp-2);border-radius:999px;
}

@media (max-width:860px){
  .busca-topo input{width:100%;max-width:none}
  .topbar{flex-wrap:wrap;gap:var(--sp-2)}
  .topbar-acoes{width:100%;gap:var(--sp-2)}
  .busca-topo{flex:1}
}

}

/* ---- Acessibilidade da casca (2026-08-12, revisão de UX) ----
   Três lacunas encontradas ao passar a tela pela régua de UX. */

/* 1. Pular o menu. São 24 itens: sem isto, quem navega por teclado percorre a lista inteira
      em CADA tela antes de chegar ao conteúdo. Fica fora da tela até receber foco. */
/* O dono pediu que a frase não aparecesse na tela (2026-08-13). O link continua existindo
   para quem usa leitor de tela — é o que evita percorrer o menu inteiro em cada página —, mas
   deixou de ficar visível mesmo ao receber foco. */
.skip-link{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* O alvo do salto recebe foco por script do navegador; o anel ali não informa nada. */
.content:focus{outline:none}

/* 2. Anel de foco padrão em TODO controle. Havia regra só em componentes específicos, e o
      resto herdava o outline do navegador — que varia e some sobre fundo azul. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,details:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius);
}

/* 3. Número em fonte tabular na BASE, não só numa variante: sem isto, um contador que muda de
      7 para 8 desloca o texto ao lado, porque cada dígito tem largura própria. */
.stat .num,.agenda-conta,.nav-conta,.chart-valor,.implantacao-estado{font-variant-numeric:tabular-nums}

/* ---- Pedidos do gestor (2026-08-12) ---- */
/* O formulário do pedido não acompanha a largura da tela: linha de campo muito larga faz o olho
   percorrer branco entre o rótulo e o valor. */
.form-pedido{max-width:36rem}
.pedido{border-left:2px solid var(--border-forte);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4)}
/* Atrasado tem a borda em cor DE aviso e o "há N dias" por escrito, que vem do PHP: cor não é
   o único sinal. */
.pedido.atrasado{border-left-color:var(--warning);background:var(--warning-bg)}
.pedido-topo{font-size:var(--fs-md);margin-bottom:var(--sp-2)}
.pedido-justificativa{font-size:var(--fs-md);margin-bottom:var(--sp-3)}
.pedido-dados{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-3)}
.pedido-dados dt{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted)}
.pedido-dados dd{font-size:var(--fs-md);margin:0}
.pedido-acoes{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.pedido-acoes input[type="text"]{flex:1;min-width:12rem}

/* ---- Entrada dos blocos (tratamento escolhido em 2026-08-12) ----
   Um único momento de movimento, no carregamento, em vez de micro-animação espalhada.
   A anulação vem logo abaixo, e não lá em cima com as outras regras de reduced-motion: a
   global vem antes no arquivo e não alcançaria seletores criados depois — confiar nela seria
   animar justamente para quem pediu para não animar. */
.card,
.grid-4 > .stat{animation:blocoEntra .34s cubic-bezier(.22,.61,.36,1) backwards}
.grid-4 > .stat:nth-child(2){animation-delay:.04s}
.grid-4 > .stat:nth-child(3){animation-delay:.08s}
.grid-4 > .stat:nth-child(4){animation-delay:.12s}
@keyframes blocoEntra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .card,
  .grid-4 > .stat{animation:none}
}

/* ---- Cabeçalho de listagem (2026-08-12, Onda 1) ----
   Substitui o `style=` inline que cada tela repetia à sua maneira. */
.lista-topo{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-4);
}
.lista-topo-titulo{display:flex;align-items:baseline;gap:var(--sp-3);min-width:0}
.lista-topo-titulo h2{margin:0}
.lista-conta{
  font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;   /* o intervalo muda a cada página */
}
.lista-conta-de{font-size:var(--fs-xs)}
.lista-topo-acoes{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.lista-filtros{margin-bottom:var(--sp-4)}

/* ---- Avatar (2026-08-12, Onda 1) ---- */
.avatar{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  border-radius:50%;color:#fff;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:0.02em;line-height:1;
}
.celula-pessoa{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.celula-pessoa .nome{min-width:0;display:flex;flex-direction:column}

/* ---- Selos por significado (2026-08-12, Onda 1) ----
   Fundo suave e texto escuro do MESMO matiz: a combinação que passa contraste sem borda.
   Os tokens já foram medidos. */
.selo-neutro{background:var(--bg);color:var(--text-muted)}
.selo-positivo{background:var(--success-bg);color:var(--success)}
.selo-atencao{background:var(--warning-bg);color:var(--warning)}
.selo-perigo{background:var(--danger-bg);color:var(--danger)}
.selo-info{background:var(--info-bg);color:var(--primary)}

/* ---- Calendário de ausências (2026-08-12, Onda 1) ----
   Pessoas nas linhas, dias nas colunas. Responde "quantos estão fora ao mesmo tempo", que é o
   que uma lista não mostra. */
.calendario-rolagem{overflow-x:auto}
.calendario-ausencias{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.calendario-ausencias th,.calendario-ausencias td{
  border:1px solid var(--border);text-align:center;padding:0;height:30px;min-width:30px;
}
/* O nome acompanha a rolagem horizontal: sem isso, ao chegar no dia 25 não se sabe de quem é
   a linha. */
.calendario-ausencias .col-pessoa{
  text-align:left;padding:0 var(--sp-2);min-width:13rem;position:sticky;left:0;
  background:var(--surface);z-index:1;
}
.calendario-ausencias thead th{font-weight:600;line-height:1.1;padding:var(--sp-1) 0}
.dia-num{display:block}
.dia-sem{display:block;font-size:var(--fs-2xs);color:var(--text-muted);text-transform:uppercase}
.calendario-ausencias .fds{background:var(--bg)}
.calendario-ausencias .feriado{background:var(--info-bg);color:var(--primary)}
/* Cada tipo tem cor E letra. */
.aus{font-weight:700;color:#fff}
.aus-ferias{background:var(--primary)}
.aus-atestado{background:var(--warning)}
.aus-falta{background:var(--danger)}
.aus-atraso{background:var(--text-muted)}
.calendario-ausencias tfoot td{font-weight:700;color:var(--text-muted);background:var(--bg)}
.calendario-ausencias tfoot .tem-fora{color:var(--danger)}
.legenda-ausencias{margin-top:var(--sp-4);font-size:var(--fs-xs);display:flex;
  align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.legenda-ausencias .aus{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:var(--radius);
}

/* ---- Grade de escala semanal (2026-08-12, Onda 1) ---- */
.grade-escala{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.grade-escala th,.grade-escala td{
  border:1px solid var(--border);padding:var(--sp-2);text-align:center;vertical-align:middle;
}
.grade-escala .col-pessoa{text-align:left;min-width:13rem;position:sticky;left:0;
  background:var(--surface);z-index:1}
.grade-escala thead th{font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.grade-escala .fds{background:var(--bg)}
.grade-escala .feriado{background:var(--info-bg);color:var(--primary)}
.dia-feriado{display:block;font-size:var(--fs-2xs);font-weight:400;text-transform:none;
  letter-spacing:0}
.turno{display:inline-block;font-variant-numeric:tabular-nums}
.turno-vazio{color:var(--border-forte)}
/* Exceção tem cor E a palavra: quem lê precisa saber que o dia é diferente do padrão. */
.turno-excecao{background:var(--warning-bg);border-radius:var(--radius);padding:var(--sp-1) var(--sp-2)}
.turno-tipo{display:block;font-size:var(--fs-2xs);text-transform:uppercase;color:var(--warning);
  font-weight:600}
.grade-escala tfoot td{font-weight:700;color:var(--text-muted);background:var(--bg)}
.grade-escala tfoot .sem-cobertura{color:var(--border-forte)}

/* --- Automações (2026-08-12) ------------------------------------------------------------- */
.ajuda-automacoes{margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);
  background:var(--surface-2);border-radius:var(--radius);color:var(--text-muted);
  font-size:var(--fs-sm);line-height:1.6}
.ajuda-automacoes strong{color:var(--text)}

.tabela-automacoes{width:100%;border-collapse:collapse}
.tabela-automacoes th,.tabela-automacoes td{padding:var(--sp-3);text-align:left;
  border-bottom:1px solid var(--border);vertical-align:top}
.tabela-automacoes th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-muted)}
.tabela-automacoes .num{text-align:right;font-variant-numeric:tabular-nums}
.tabela-automacoes td form{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}

/* A descrição é o que permite decidir se pausa a regra sem ter de perguntar a alguém. */
.linha-desc{display:block;margin-top:var(--sp-1);font-size:var(--fs-xs);color:var(--text-muted);
  line-height:1.5;max-width:42ch}

/* Regra pausada continua legível: esmaecer até sumir esconderia justamente o que precisa ser
   reativado. O selo "Pausada" é quem carrega o estado — a opacidade só reforça. */
.linha-pausada{opacity:.72}
.linha-pausada strong{font-weight:500}

.campo-dias{width:4.5rem;padding:var(--sp-2);border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface);color:var(--text);
  font-size:var(--fs-sm);font-variant-numeric:tabular-nums}

@media (max-width:820px){
  /* A tabela vira lista: seis colunas em tela de celular espremem a descrição até virar
     uma palavra por linha. */
  .tabela-automacoes thead{display:none}
  .tabela-automacoes tr{display:block;padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
  .tabela-automacoes td{display:flex;justify-content:space-between;gap:var(--sp-3);
    border:0;padding:var(--sp-1) 0}
  .tabela-automacoes td::before{content:attr(data-rotulo);font-size:var(--fs-xs);
    color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
  .tabela-automacoes td:first-child{display:block}
  .tabela-automacoes td:first-child::before{content:none}
}

/* --- Organograma ------------------------------------------------------------------------
   Lista aninhada de verdade (ul/li), não divs posicionadas: o leitor de tela percorre a
   hierarquia sozinho e a página imprime. As linhas do desenho são pseudo-elementos — nada
   de biblioteca, que o CSP não liberaria. */
.campo-busca-org{width:100%;max-width:22rem;margin:var(--sp-3) 0;padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  color:var(--text);font-size:var(--fs-sm)}


/* --- Documentos da empresa ---------------------------------------------------------------
   Um arquivo publicado para muita gente. O bloco de publicação fica em grade de duas colunas
   porque o formulário tem oito campos: em coluna única, o botão some abaixo da dobra e a
   pessoa não vê que já terminou de preencher. */
.doc-publicar{border-left:3px solid var(--acento)}
.form-documento{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:var(--sp-3);margin-top:var(--sp-3)}
.field-largo{grid-column:1 / -1}

/* O progresso é dito em palavras ("31 abriram"), não em barra colorida: barra sem número
   obriga a pessoa a estimar, e estimar leitura de documento é o que não se quer aqui. */
.doc-progresso{font-variant-numeric:tabular-nums;font-size:var(--fs-sm)}
.doc-progresso a{margin-left:var(--sp-2)}
.doc-progresso ul{margin:var(--sp-2) 0 var(--sp-4);padding-left:var(--sp-4)}
.doc-progresso h3{font-size:var(--fs-sm);margin:var(--sp-3) 0 0}

/* --- Aceite de documento e comprovante ----------------------------------------------------
   O aviso do que é (e do que não é) esta assinatura fica encostado no botão, e vai junto na
   impressão do comprovante: quem mostra o papel a um terceiro precisa que ele diga sozinho
   o que prova. */
.aceite-aviso{border:1px solid var(--border);border-left:3px solid var(--acento);
  border-radius:var(--radius);padding:var(--sp-3);margin:var(--sp-3) 0;
  font-size:var(--fs-sm);color:var(--text-muted)}
.aceite-aviso p{margin:0 0 var(--sp-2)}
.aceite-aviso p:last-child{margin-bottom:0}

.comprovante{max-width:44rem}
.comprovante-dados{display:grid;grid-template-columns:minmax(10rem,auto) 1fr;gap:var(--sp-2) var(--sp-4);
  margin:var(--sp-3) 0}
.comprovante-dados dt{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-muted)}
.comprovante-dados dd{margin:0}
/* O hash quebra em qualquer ponto: são 64 caracteres sem espaço, e sem isto ele estoura a
   largura da folha na impressão. */
.comprovante-hash{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-xs);
  word-break:break-all}

@media print{
  .nao-imprimir{display:none}
}

/* --- Portal do colaborador ----------------------------------------------------------------
   Blocos autônomos: cada um se vira sozinho e, quando não tem o que mostrar, DIZ isso em vez
   de sumir — bloco que some faz a pessoa procurar o que não existe. */
.portal-bloco ul{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:grid;gap:var(--sp-2)}
.portal-bloco li{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  flex-wrap:wrap;padding:var(--sp-2) 0;border-bottom:1px solid var(--border)}
.portal-bloco li:last-child{border-bottom:0}

.portal-documentos li>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.portal-doc-desc{font-size:var(--fs-xs);color:var(--text-muted)}
.portal-doc-acoes{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.portal-tarefas li>span{min-width:0}
.portal-equipe li,.portal-celebracoes li{justify-content:flex-start}
.portal-horario li{justify-content:flex-start;gap:var(--sp-4)}
.portal-horario-dia{min-width:5.5rem;font-variant-numeric:tabular-nums;color:var(--text-muted)}

/* --- Despesas e reembolso -----------------------------------------------------------------
   O valor é o que decide a aprovação: fica em tamanho próprio, tabular, sem precisar procurar
   no meio da linha. */
.despesa-valor{font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--fs-md);
  white-space:nowrap}
.despesa-linha{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
.despesa-linha:last-child{border-bottom:0}
.despesa-linha>div{display:flex;flex-direction:column;gap:2px;min-width:12rem;flex:1}
.despesa-acoes{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
/* Dentro de tabela a linha volta a ser linha: o flex quebraria a grade de colunas. */
tr.despesa-linha{display:table-row}
tr.despesa-linha>div{display:block}

/* --- Pesquisa de clima --------------------------------------------------------------------
   A escala leva rótulo nas duas pontas: "1 a 5" sozinho não diz de que lado fica o bom, e
   metade das pessoas responde invertido quando isso não está escrito. */
.escala-ponta{font-size:var(--fs-xs);color:var(--text-muted)}
.escala-opcao{display:inline-flex;align-items:center;gap:4px;margin:0 var(--sp-2)}
.clima-pergunta{border:0;padding:var(--sp-3) 0;margin:0;border-bottom:1px solid var(--border)}
.clima-pergunta legend,.clima-pergunta h3{font-size:var(--fs-md);font-weight:600;padding:0}
.clima-textos{margin:var(--sp-2) 0 0;padding-left:var(--sp-4)}
.clima-textos li{margin-bottom:var(--sp-2)}

/* Barra com o NÚMERO ao lado: barra sozinha obriga a estimar, e estimar resultado de pesquisa
   é como se lê o que se quer ler. */
.clima-barra{display:flex;align-items:center;gap:var(--sp-2);margin:2px 0}
.clima-barra-rotulo{width:1.5rem;text-align:right;font-variant-numeric:tabular-nums}
.clima-barra-trilho{flex:1;height:.65rem;background:var(--surface2);border-radius:999px;
  overflow:hidden}
.clima-barra-preenchida{display:block;height:100%;background:var(--acento)}
.clima-barra-valor{width:2rem;font-variant-numeric:tabular-nums;color:var(--text-muted)}

/* --- Canal de denúncias (tela pública) -----------------------------------------------------
   A única tela do sistema que gente sem login abre. Layout próprio, estreito e sem menu: quem
   chega aqui veio por um link específico e tem uma coisa só para fazer. */
.tela-publica{background:var(--fundo);padding:var(--sp-4)}
.denuncia-caixa{max-width:44rem;margin:0 auto}
.denuncia-caixa h1{margin-bottom:var(--sp-2)}

/* O protocolo é anotado à mão: monoespaçado, grande e espaçado, para não confundir caractere. */
.denuncia-protocolo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--fs-xl);letter-spacing:.18em;font-weight:700;margin:var(--sp-3) 0}

.denuncia-conversa{list-style:none;margin:var(--sp-3) 0;padding:0;display:grid;gap:var(--sp-2)}
.denuncia-conversa li{padding:var(--sp-3);border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface)}
/* A mensagem da apuração é destacada pela BORDA e pelo rótulo "Apuração", não só pela cor. */
.denuncia-apuracao{border-left:3px solid var(--acento)}

/* --- Pipeline de recrutamento --------------------------------------------------------------
   Colunas que rolam na horizontal em vez de espremer: com seis etapas, cada coluna teria a
   largura de um nome próprio e nada mais caberia. */
.pipe-quadro{display:flex;gap:var(--sp-3);overflow-x:auto;padding-bottom:var(--sp-3);
  margin-bottom:var(--sp-4)}
.pipe-coluna{flex:0 0 17rem;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--sp-3)}
.pipe-coluna h3{font-size:var(--fs-md);margin:0}
.pipe-cartao{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:var(--sp-2) 0;border-bottom:1px solid var(--border)}
.pipe-cartao:last-child{border-bottom:0}
.pipe-cartao a{font-weight:600;color:var(--text);text-decoration:none}
.pipe-cartao a:hover{text-decoration:underline}
.pipe-mover{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;width:100%}

/* --- Scorecard --------------------------------------------------------------------------- */
.score-parecer{border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-3);margin:var(--sp-3) 0}
.score-parecer h3{font-size:var(--fs-md);margin:0 0 var(--sp-2)}
.score-parecer ul{margin:0 0 var(--sp-2);padding-left:var(--sp-4)}

/* --- Vaga pública ------------------------------------------------------------------------- */
.vaga-cartao h2{font-size:var(--fs-lg);margin:0 0 var(--sp-1)}

/* --- Saída de IA ---------------------------------------------------------------------------
   Fundo distinto e borda tracejada: texto de máquina precisa se distinguir do que uma pessoa
   escreveu, mesmo quando alguém dá print da tela e manda no grupo. */
.ia-saida{background:var(--surface2);border:1px dashed var(--border);border-radius:var(--radius);
  padding:var(--sp-3);margin:var(--sp-3) 0;white-space:normal}

/* O rascunho fica recolhido: é opcional, e um campo grande aberto por padrão sugere que
   preencher por IA é o caminho esperado. */
.ia-rascunho{border:1px dashed var(--border);border-radius:var(--radius);padding:var(--sp-3);
  margin:var(--sp-3) 0}
.ia-rascunho summary{cursor:pointer;font-weight:600;font-size:var(--fs-sm)}

/* ── Menu em duas linhas (2026-08-13) ────────────────────────────────────────────────
   Passou por três formatos até chegar aqui: cinco menus suspensos (obrigava a lembrar em que
   área a tela mora antes de conseguir abri-la), depois só a área atual (perdia-se de vista o
   resto do sistema), e agora as duas coisas.

   Linha 1: as gestões, sempre visíveis, cada uma na sua cor quando ativa.
   Linha 2: as telas da gestão aberta — aparece sem a de cima sair. */
.menu-inicio{color:var(--topo-apagado)}
.menu-inicio svg{opacity:.75}
.menu-gestao{gap:var(--sp-1)}
/* Último item de cada gestão suspensa: leva à área inteira, com a descrição de cada tela —
   a lista suspensa só tem nome, e nome não explica o que a tela faz. */
.menu-ver-area{
  margin-top:var(--sp-1);border-top:1px solid var(--border);padding-top:var(--sp-2);
  font-size:var(--fs-xs);font-weight:600;color:var(--text-muted)
}
/* A seta diz que há mais coisa dentro, sem depender de cor. */
.menu-area > summary::after{content:'▾';font-size:var(--fs-xs);opacity:.8;margin-left:auto}
.menu-area[open] > summary{background:rgba(255,255,255,.14);color:var(--topo-texto)}
/* A gestão ABERTA (a da tela atual) acende na cor dela, sobre o marinho. */
.menu-area.tem-ativa > summary{
  color:var(--area-cor,var(--primary));background:var(--area-bg,var(--info-bg));
  border-bottom-color:var(--area-cor,var(--primary));font-weight:700;
}
/* A área ativa é pintada com a COR DELA, não com a cor genérica do sistema: é o mesmo sinal do
   bloco grande da primeira página e do cabeçalho da área — três lugares, um só código de cor. */

.menu-emoji{font-size:var(--fs-md);line-height:1}

.submenu{
  /* Sem contexto de empilhamento próprio: com um, ele cobriria o menu suspenso que desce da
     barra de cima, e a seta pareceria não abrir nada. */
  position:relative;z-index:1;
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:0 var(--sp-5);
  background:var(--surface);border-bottom:1px solid var(--border);
}
.submenu a{
  display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap;
  padding:var(--sp-3) var(--sp-1);
  border-bottom:2px solid transparent;
  font-size:var(--fs-md);font-weight:550;color:var(--text-muted);text-decoration:none;
}
.submenu a svg{opacity:.55}
.submenu a:hover{color:var(--text);text-decoration:none}
/* Aba, não pílula: o segundo nível marca com sublinhado na cor da área — dois níveis de pílula
   competiriam entre si, e o de cima é que precisa vencer. */
.submenu a.active{
  color:var(--area-cor,var(--primary));border-bottom-color:var(--area-cor,var(--primary));
  font-weight:700;
}
.submenu a.active svg{opacity:1}

@media (max-width:1100px){
  .menu-topo > a svg{display:none}
  .menu-topo > a{padding:var(--sp-3) var(--sp-2)}
  /* O emoji fica: ele é o que identifica a gestão quando o rótulo encurta. */
  .menu-emoji{display:inline}
}
@media (max-width:860px){
  .menu-topo > a,.menu-area > summary{padding:var(--sp-2) var(--sp-2)}
  /* O submenu PODE rolar: ele não abre nada para baixo, então nada é cortado. */
  .submenu{flex-wrap:nowrap;overflow-x:auto;padding:var(--sp-2) var(--sp-4)}
}

/* ── Faixa da busca (2026-08-13) ─────────────────────────────────────────────────────
   O campo dividia a linha com o menu, e numa área de sete telas os dois disputavam a mesma
   largura: a caixa passava por cima dos últimos itens. Numa faixa própria, o menu recebe a
   linha inteira e a busca deixa de competir com ele. Fundo do corpo (não `surface`) para
   ler como um degrau abaixo da barra, e não como uma segunda barra. */
.barra-busca{
  display:flex;align-items:center;
  padding:var(--sp-2) var(--sp-5);background:var(--bg);
  border-bottom:1px solid var(--border);
}
.busca-topo{position:relative;display:flex;align-items:center;min-width:0}
.busca-topo > svg{position:absolute;left:var(--sp-3);color:var(--text-muted);pointer-events:none}
.busca-topo input{
  width:26rem;max-width:100%;min-height:38px;padding:var(--sp-2) var(--sp-3) var(--sp-2) 2.3rem;
  border:1px solid var(--border-forte);border-radius:999px;font-size:var(--fs-md);
  background:var(--bg);color:var(--text);font-family:inherit;
}
.busca-topo input:focus-visible{outline:2px solid var(--primary);outline-offset:1px;background:var(--surface)}
.busca-resultado{
  position:absolute;top:calc(100% + var(--sp-2));left:0;right:0;z-index:60;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  list-style:none;margin:0;padding:var(--sp-1);box-shadow:0 8px 24px rgba(27,31,39,.12);
  max-height:60vh;overflow-y:auto;
}
.busca-resultado li a{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);color:var(--text);
}
.busca-resultado li a:hover,.busca-resultado li a:focus-visible{background:var(--info-bg);text-decoration:none}
/* Quem saiu continua aparecendo na busca — mas dito por escrito, para não se confundir com
   quem está na empresa. */
.busca-status{
  margin-left:auto;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:0.05em;
  color:var(--text-muted);background:var(--bg);padding:0.05rem var(--sp-2);border-radius:999px;
}

@media (max-width:860px){
  .busca-topo input{width:100%;max-width:none}
  .topbar{flex-wrap:wrap;gap:var(--sp-2)}
  .topbar-acoes{width:100%;gap:var(--sp-2)}
  .busca-topo{flex:1}
}

}

/* ---- Acessibilidade da casca (2026-08-12, revisão de UX) ----
   Três lacunas encontradas ao passar a tela pela régua de UX. */

/* 1. Pular o menu. São 24 itens: sem isto, quem navega por teclado percorre a lista inteira
      em CADA tela antes de chegar ao conteúdo. Fica fora da tela até receber foco. */
/* O dono pediu que a frase não aparecesse na tela (2026-08-13). O link continua existindo
   para quem usa leitor de tela — é o que evita percorrer o menu inteiro em cada página —, mas
   deixou de ficar visível mesmo ao receber foco. */
.skip-link{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* O alvo do salto recebe foco por script do navegador; o anel ali não informa nada. */
.content:focus{outline:none}

/* 2. Anel de foco padrão em TODO controle. Havia regra só em componentes específicos, e o
      resto herdava o outline do navegador — que varia e some sobre fundo azul. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,details:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius);
}

/* 3. Número em fonte tabular na BASE, não só numa variante: sem isto, um contador que muda de
      7 para 8 desloca o texto ao lado, porque cada dígito tem largura própria. */
.stat .num,.agenda-conta,.nav-conta,.chart-valor,.implantacao-estado{font-variant-numeric:tabular-nums}

/* ---- Pedidos do gestor (2026-08-12) ---- */
/* O formulário do pedido não acompanha a largura da tela: linha de campo muito larga faz o olho
   percorrer branco entre o rótulo e o valor. */
.form-pedido{max-width:36rem}
.pedido{border-left:2px solid var(--border-forte);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4)}
/* Atrasado tem a borda em cor DE aviso e o "há N dias" por escrito, que vem do PHP: cor não é
   o único sinal. */
.pedido.atrasado{border-left-color:var(--warning);background:var(--warning-bg)}
.pedido-topo{font-size:var(--fs-md);margin-bottom:var(--sp-2)}
.pedido-justificativa{font-size:var(--fs-md);margin-bottom:var(--sp-3)}
.pedido-dados{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-3)}
.pedido-dados dt{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted)}
.pedido-dados dd{font-size:var(--fs-md);margin:0}
.pedido-acoes{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.pedido-acoes input[type="text"]{flex:1;min-width:12rem}

/* ---- Entrada dos blocos (tratamento escolhido em 2026-08-12) ----
   Um único momento de movimento, no carregamento, em vez de micro-animação espalhada.
   A anulação vem logo abaixo, e não lá em cima com as outras regras de reduced-motion: a
   global vem antes no arquivo e não alcançaria seletores criados depois — confiar nela seria
   animar justamente para quem pediu para não animar. */
.card,
.grid-4 > .stat{animation:blocoEntra .34s cubic-bezier(.22,.61,.36,1) backwards}
.grid-4 > .stat:nth-child(2){animation-delay:.04s}
.grid-4 > .stat:nth-child(3){animation-delay:.08s}
.grid-4 > .stat:nth-child(4){animation-delay:.12s}
@keyframes blocoEntra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .card,
  .grid-4 > .stat{animation:none}
}

/* ---- Cabeçalho de listagem (2026-08-12, Onda 1) ----
   Substitui o `style=` inline que cada tela repetia à sua maneira. */
.lista-topo{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-4);
}
.lista-topo-titulo{display:flex;align-items:baseline;gap:var(--sp-3);min-width:0}
.lista-topo-titulo h2{margin:0}
.lista-conta{
  font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;   /* o intervalo muda a cada página */
}
.lista-conta-de{font-size:var(--fs-xs)}
.lista-topo-acoes{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.lista-filtros{margin-bottom:var(--sp-4)}

/* ---- Avatar (2026-08-12, Onda 1) ---- */
.avatar{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  border-radius:50%;color:#fff;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:0.02em;line-height:1;
}
.celula-pessoa{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.celula-pessoa .nome{min-width:0;display:flex;flex-direction:column}

/* ---- Selos por significado (2026-08-12, Onda 1) ----
   Fundo suave e texto escuro do MESMO matiz: a combinação que passa contraste sem borda.
   Os tokens já foram medidos. */
.selo-neutro{background:var(--bg);color:var(--text-muted)}
.selo-positivo{background:var(--success-bg);color:var(--success)}
.selo-atencao{background:var(--warning-bg);color:var(--warning)}
.selo-perigo{background:var(--danger-bg);color:var(--danger)}
.selo-info{background:var(--info-bg);color:var(--primary)}

/* ---- Calendário de ausências (2026-08-12, Onda 1) ----
   Pessoas nas linhas, dias nas colunas. Responde "quantos estão fora ao mesmo tempo", que é o
   que uma lista não mostra. */
.calendario-rolagem{overflow-x:auto}
.calendario-ausencias{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.calendario-ausencias th,.calendario-ausencias td{
  border:1px solid var(--border);text-align:center;padding:0;height:30px;min-width:30px;
}
/* O nome acompanha a rolagem horizontal: sem isso, ao chegar no dia 25 não se sabe de quem é
   a linha. */
.calendario-ausencias .col-pessoa{
  text-align:left;padding:0 var(--sp-2);min-width:13rem;position:sticky;left:0;
  background:var(--surface);z-index:1;
}
.calendario-ausencias thead th{font-weight:600;line-height:1.1;padding:var(--sp-1) 0}
.dia-num{display:block}
.dia-sem{display:block;font-size:var(--fs-2xs);color:var(--text-muted);text-transform:uppercase}
.calendario-ausencias .fds{background:var(--bg)}
.calendario-ausencias .feriado{background:var(--info-bg);color:var(--primary)}
/* Cada tipo tem cor E letra. */
.aus{font-weight:700;color:#fff}
.aus-ferias{background:var(--primary)}
.aus-atestado{background:var(--warning)}
.aus-falta{background:var(--danger)}
.aus-atraso{background:var(--text-muted)}
.calendario-ausencias tfoot td{font-weight:700;color:var(--text-muted);background:var(--bg)}
.calendario-ausencias tfoot .tem-fora{color:var(--danger)}
.legenda-ausencias{margin-top:var(--sp-4);font-size:var(--fs-xs);display:flex;
  align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.legenda-ausencias .aus{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:var(--radius);
}

/* ---- Grade de escala semanal (2026-08-12, Onda 1) ---- */
.grade-escala{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.grade-escala th,.grade-escala td{
  border:1px solid var(--border);padding:var(--sp-2);text-align:center;vertical-align:middle;
}
.grade-escala .col-pessoa{text-align:left;min-width:13rem;position:sticky;left:0;
  background:var(--surface);z-index:1}
.grade-escala thead th{font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.grade-escala .fds{background:var(--bg)}
.grade-escala .feriado{background:var(--info-bg);color:var(--primary)}
.dia-feriado{display:block;font-size:var(--fs-2xs);font-weight:400;text-transform:none;
  letter-spacing:0}
.turno{display:inline-block;font-variant-numeric:tabular-nums}
.turno-vazio{color:var(--border-forte)}
/* Exceção tem cor E a palavra: quem lê precisa saber que o dia é diferente do padrão. */
.turno-excecao{background:var(--warning-bg);border-radius:var(--radius);padding:var(--sp-1) var(--sp-2)}
.turno-tipo{display:block;font-size:var(--fs-2xs);text-transform:uppercase;color:var(--warning);
  font-weight:600}
.grade-escala tfoot td{font-weight:700;color:var(--text-muted);background:var(--bg)}
.grade-escala tfoot .sem-cobertura{color:var(--border-forte)}

/* --- Automações (2026-08-12) ------------------------------------------------------------- */
.ajuda-automacoes{margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);
  background:var(--surface-2);border-radius:var(--radius);color:var(--text-muted);
  font-size:var(--fs-sm);line-height:1.6}
.ajuda-automacoes strong{color:var(--text)}

.tabela-automacoes{width:100%;border-collapse:collapse}
.tabela-automacoes th,.tabela-automacoes td{padding:var(--sp-3);text-align:left;
  border-bottom:1px solid var(--border);vertical-align:top}
.tabela-automacoes th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-muted)}
.tabela-automacoes .num{text-align:right;font-variant-numeric:tabular-nums}
.tabela-automacoes td form{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}

/* A descrição é o que permite decidir se pausa a regra sem ter de perguntar a alguém. */
.linha-desc{display:block;margin-top:var(--sp-1);font-size:var(--fs-xs);color:var(--text-muted);
  line-height:1.5;max-width:42ch}

/* Regra pausada continua legível: esmaecer até sumir esconderia justamente o que precisa ser
   reativado. O selo "Pausada" é quem carrega o estado — a opacidade só reforça. */
.linha-pausada{opacity:.72}
.linha-pausada strong{font-weight:500}

.campo-dias{width:4.5rem;padding:var(--sp-2);border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface);color:var(--text);
  font-size:var(--fs-sm);font-variant-numeric:tabular-nums}

@media (max-width:820px){
  /* A tabela vira lista: seis colunas em tela de celular espremem a descrição até virar
     uma palavra por linha. */
  .tabela-automacoes thead{display:none}
  .tabela-automacoes tr{display:block;padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
  .tabela-automacoes td{display:flex;justify-content:space-between;gap:var(--sp-3);
    border:0;padding:var(--sp-1) 0}
  .tabela-automacoes td::before{content:attr(data-rotulo);font-size:var(--fs-xs);
    color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
  .tabela-automacoes td:first-child{display:block}
  .tabela-automacoes td:first-child::before{content:none}
}

/* --- Organograma ------------------------------------------------------------------------
   Lista aninhada de verdade (ul/li), não divs posicionadas: o leitor de tela percorre a
   hierarquia sozinho e a página imprime. As linhas do desenho são pseudo-elementos — nada
   de biblioteca, que o CSP não liberaria. */
.campo-busca-org{width:100%;max-width:22rem;margin:var(--sp-3) 0;padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  color:var(--text);font-size:var(--fs-sm)}


/* --- Documentos da empresa ---------------------------------------------------------------
   Um arquivo publicado para muita gente. O bloco de publicação fica em grade de duas colunas
   porque o formulário tem oito campos: em coluna única, o botão some abaixo da dobra e a
   pessoa não vê que já terminou de preencher. */
.doc-publicar{border-left:3px solid var(--acento)}
.form-documento{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:var(--sp-3);margin-top:var(--sp-3)}
.field-largo{grid-column:1 / -1}

/* O progresso é dito em palavras ("31 abriram"), não em barra colorida: barra sem número
   obriga a pessoa a estimar, e estimar leitura de documento é o que não se quer aqui. */
.doc-progresso{font-variant-numeric:tabular-nums;font-size:var(--fs-sm)}
.doc-progresso a{margin-left:var(--sp-2)}
.doc-progresso ul{margin:var(--sp-2) 0 var(--sp-4);padding-left:var(--sp-4)}
.doc-progresso h3{font-size:var(--fs-sm);margin:var(--sp-3) 0 0}

/* --- Aceite de documento e comprovante ----------------------------------------------------
   O aviso do que é (e do que não é) esta assinatura fica encostado no botão, e vai junto na
   impressão do comprovante: quem mostra o papel a um terceiro precisa que ele diga sozinho
   o que prova. */
.aceite-aviso{border:1px solid var(--border);border-left:3px solid var(--acento);
  border-radius:var(--radius);padding:var(--sp-3);margin:var(--sp-3) 0;
  font-size:var(--fs-sm);color:var(--text-muted)}
.aceite-aviso p{margin:0 0 var(--sp-2)}
.aceite-aviso p:last-child{margin-bottom:0}

.comprovante{max-width:44rem}
.comprovante-dados{display:grid;grid-template-columns:minmax(10rem,auto) 1fr;gap:var(--sp-2) var(--sp-4);
  margin:var(--sp-3) 0}
.comprovante-dados dt{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-muted)}
.comprovante-dados dd{margin:0}
/* O hash quebra em qualquer ponto: são 64 caracteres sem espaço, e sem isto ele estoura a
   largura da folha na impressão. */
.comprovante-hash{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-xs);
  word-break:break-all}

@media print{
  .nao-imprimir{display:none}
}

/* --- Portal do colaborador ----------------------------------------------------------------
   Blocos autônomos: cada um se vira sozinho e, quando não tem o que mostrar, DIZ isso em vez
   de sumir — bloco que some faz a pessoa procurar o que não existe. */
.portal-bloco ul{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:grid;gap:var(--sp-2)}
.portal-bloco li{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  flex-wrap:wrap;padding:var(--sp-2) 0;border-bottom:1px solid var(--border)}
.portal-bloco li:last-child{border-bottom:0}

.portal-documentos li>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.portal-doc-desc{font-size:var(--fs-xs);color:var(--text-muted)}
.portal-doc-acoes{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.portal-tarefas li>span{min-width:0}
.portal-equipe li,.portal-celebracoes li{justify-content:flex-start}
.portal-horario li{justify-content:flex-start;gap:var(--sp-4)}
.portal-horario-dia{min-width:5.5rem;font-variant-numeric:tabular-nums;color:var(--text-muted)}

/* --- Despesas e reembolso -----------------------------------------------------------------
   O valor é o que decide a aprovação: fica em tamanho próprio, tabular, sem precisar procurar
   no meio da linha. */
.despesa-valor{font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--fs-md);
  white-space:nowrap}
.despesa-linha{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
.despesa-linha:last-child{border-bottom:0}
.despesa-linha>div{display:flex;flex-direction:column;gap:2px;min-width:12rem;flex:1}
.despesa-acoes{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
/* Dentro de tabela a linha volta a ser linha: o flex quebraria a grade de colunas. */
tr.despesa-linha{display:table-row}
tr.despesa-linha>div{display:block}

/* --- Pesquisa de clima --------------------------------------------------------------------
   A escala leva rótulo nas duas pontas: "1 a 5" sozinho não diz de que lado fica o bom, e
   metade das pessoas responde invertido quando isso não está escrito. */
.escala-ponta{font-size:var(--fs-xs);color:var(--text-muted)}
.escala-opcao{display:inline-flex;align-items:center;gap:4px;margin:0 var(--sp-2)}
.clima-pergunta{border:0;padding:var(--sp-3) 0;margin:0;border-bottom:1px solid var(--border)}
.clima-pergunta legend,.clima-pergunta h3{font-size:var(--fs-md);font-weight:600;padding:0}
.clima-textos{margin:var(--sp-2) 0 0;padding-left:var(--sp-4)}
.clima-textos li{margin-bottom:var(--sp-2)}

/* Barra com o NÚMERO ao lado: barra sozinha obriga a estimar, e estimar resultado de pesquisa
   é como se lê o que se quer ler. */
.clima-barra{display:flex;align-items:center;gap:var(--sp-2);margin:2px 0}
.clima-barra-rotulo{width:1.5rem;text-align:right;font-variant-numeric:tabular-nums}
.clima-barra-trilho{flex:1;height:.65rem;background:var(--surface2);border-radius:999px;
  overflow:hidden}
.clima-barra-preenchida{display:block;height:100%;background:var(--acento)}
.clima-barra-valor{width:2rem;font-variant-numeric:tabular-nums;color:var(--text-muted)}

/* --- Canal de denúncias (tela pública) -----------------------------------------------------
   A única tela do sistema que gente sem login abre. Layout próprio, estreito e sem menu: quem
   chega aqui veio por um link específico e tem uma coisa só para fazer. */
.tela-publica{background:var(--fundo);padding:var(--sp-4)}
.denuncia-caixa{max-width:44rem;margin:0 auto}
.denuncia-caixa h1{margin-bottom:var(--sp-2)}

/* O protocolo é anotado à mão: monoespaçado, grande e espaçado, para não confundir caractere. */
.denuncia-protocolo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--fs-xl);letter-spacing:.18em;font-weight:700;margin:var(--sp-3) 0}

.denuncia-conversa{list-style:none;margin:var(--sp-3) 0;padding:0;display:grid;gap:var(--sp-2)}
.denuncia-conversa li{padding:var(--sp-3);border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface)}
/* A mensagem da apuração é destacada pela BORDA e pelo rótulo "Apuração", não só pela cor. */
.denuncia-apuracao{border-left:3px solid var(--acento)}

/* --- Pipeline de recrutamento --------------------------------------------------------------
   Colunas que rolam na horizontal em vez de espremer: com seis etapas, cada coluna teria a
   largura de um nome próprio e nada mais caberia. */
.pipe-quadro{display:flex;gap:var(--sp-3);overflow-x:auto;padding-bottom:var(--sp-3);
  margin-bottom:var(--sp-4)}
.pipe-coluna{flex:0 0 17rem;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--sp-3)}
.pipe-coluna h3{font-size:var(--fs-md);margin:0}
.pipe-cartao{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:var(--sp-2) 0;border-bottom:1px solid var(--border)}
.pipe-cartao:last-child{border-bottom:0}
.pipe-cartao a{font-weight:600;color:var(--text);text-decoration:none}
.pipe-cartao a:hover{text-decoration:underline}
.pipe-mover{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;width:100%}

/* --- Scorecard --------------------------------------------------------------------------- */
.score-parecer{border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-3);margin:var(--sp-3) 0}
.score-parecer h3{font-size:var(--fs-md);margin:0 0 var(--sp-2)}
.score-parecer ul{margin:0 0 var(--sp-2);padding-left:var(--sp-4)}

/* --- Vaga pública ------------------------------------------------------------------------- */
.vaga-cartao h2{font-size:var(--fs-lg);margin:0 0 var(--sp-1)}

/* --- Saída de IA ---------------------------------------------------------------------------
   Fundo distinto e borda tracejada: texto de máquina precisa se distinguir do que uma pessoa
   escreveu, mesmo quando alguém dá print da tela e manda no grupo. */
.ia-saida{background:var(--surface2);border:1px dashed var(--border);border-radius:var(--radius);
  padding:var(--sp-3);margin:var(--sp-3) 0;white-space:normal}

/* O rascunho fica recolhido: é opcional, e um campo grande aberto por padrão sugere que
   preencher por IA é o caminho esperado. */
.ia-rascunho{border:1px dashed var(--border);border-radius:var(--radius);padding:var(--sp-3);
  margin:var(--sp-3) 0}
.ia-rascunho summary{cursor:pointer;font-weight:600;font-size:var(--fs-sm)}

/* ── Menu do topo: só a área em que se está (2026-08-13) ─────────────────────────────
   Eram cinco menus suspensos, um por área. Para chegar a uma tela era preciso lembrar em
   que área ela mora, abrir a área e só então ler. A escolha da área passou para os blocos
   da primeira página, e o topo mostra apenas a vizinhança de onde a pessoa está. */
.menu-inicio{color:var(--topo-apagado)}
/* O item aberto é pintado na cor da ÁREA, não na cor genérica do sistema: é o mesmo sinal
   do bloco que trouxe a pessoa até aqui. */
.menu-topo > a.active{
  color:var(--area-cor,var(--primary));border-bottom-color:var(--area-cor,var(--primary));
  background:var(--area-bg,var(--info-bg));font-weight:650;
}
.menu-inicio svg{opacity:.75}

@media (max-width:860px){
  .barra-busca{padding:var(--sp-2) var(--sp-4)}
  /* Numa linha só, com rolagem lateral: empilhar os itens empurraria o conteúdo para fora
     da tela a cada troca de página. */
  .menu-topo{flex-wrap:nowrap;overflow-x:auto}
  .menu-topo > a{white-space:nowrap}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   KIT VISUAL (2026-08-13)

   Nasceu de uma frase do dono olhando o sistema: "parece planilha de Excel". Ele tinha razão —
   quase toda tela era `<table>` de texto, e o painel calcula muito mais do que mostrava. O que
   faltava não era dado, era forma: número grande onde há número, barra onde há proporção, cor
   onde há estado, e um convite onde ainda não há nada.

   As peças vivem juntas de propósito: é isso que faz a décima tela sair igual à primeira.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ---- Faixa de indicadores ---- */
.kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:var(--sp-3);margin:var(--sp-4) 0;
}
.kpi{
  display:flex;flex-direction:column;gap:0.1rem;
  padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);color:var(--text);text-decoration:none;
  border-left:3px solid var(--border-forte);
}
a.kpi:hover{border-color:var(--primary);text-decoration:none;transform:translateY(-1px)}
a.kpi{transition:transform .14s ease,border-color .14s ease}
.kpi-emoji{font-size:var(--fs-lg);line-height:1}
/* `tabular-nums`: sem isso um "8,5" e um "10" de larguras diferentes fazem a linha de cards
   dançar a cada atualização. */
.kpi-valor{font-size:var(--fs-2xl);font-weight:750;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi-rotulo{font-size:var(--fs-sm);color:var(--text-muted);font-weight:600}
.kpi-detalhe{font-size:var(--fs-xs);color:var(--text-muted)}
/* A cor mora na BORDA, não no fundo: quatro cards de fundo colorido lado a lado brigam entre
   si e nenhum se destaca — que é justamente o oposto do que um indicador serve para fazer. */
.kpi-ok{border-left-color:var(--success)}
.kpi-ok .kpi-valor{color:var(--success)}
.kpi-atencao{border-left-color:var(--warning)}
.kpi-atencao .kpi-valor{color:var(--warning)}
.kpi-perigo{border-left-color:var(--danger)}
.kpi-perigo .kpi-valor{color:var(--danger)}

/* ---- Anel de progresso ---- */
.anel{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.anel svg{display:block}
.anel-pct{
  position:absolute;font-size:var(--fs-sm);font-weight:750;font-variant-numeric:tabular-nums;
}

/* ---- Estado vazio ---- */
/* "Nenhum registro" deixa a pessoa parada: ela não sabe se está no lugar errado, se falta
   permissão, ou se só não há nada ainda. Aqui sempre há o que é isso e o que fazer agora. */
.vazio{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  padding:var(--sp-6) var(--sp-4);text-align:center;
  border:1px dashed var(--border-forte);border-radius:var(--radius);background:var(--bg);
}
.vazio-emoji{font-size:var(--fs-2xl);line-height:1}
.vazio-titulo{font-size:var(--fs-base);font-weight:700}
.vazio-texto{font-size:var(--fs-sm);color:var(--text-muted);max-width:52ch;line-height:1.5}

/* ---- Pessoa (avatar + nome + contexto) ---- */
.pessoa{display:flex;align-items:center;gap:var(--sp-3);min-width:0;color:inherit;text-decoration:none}
a.pessoa:hover .pessoa-texto strong{color:var(--primary)}
.pessoa-texto{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.pessoa-texto strong{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pessoa-detalhe{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Nota de 0 a 10 ---- */
.nota{display:flex;align-items:center;gap:var(--sp-2);font-variant-numeric:tabular-nums}
.nota-trilho{display:block;width:64px;height:6px;border-radius:999px;background:var(--border);overflow:hidden}
.nota-fill{display:block;height:100%;border-radius:999px;background:currentColor}
.nota strong{font-size:var(--fs-base);font-weight:750}
.nota-ok{color:var(--success)}
.nota-atencao{color:var(--warning)}
.nota-perigo{color:var(--danger)}
.nota-vazia{color:var(--text-muted);font-size:var(--fs-xs);font-style:italic}

/* ---- Cabeçalho de card e sub-título de seção ---- */
.card-topo{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.sub-titulo{
  margin:var(--sp-5) 0 var(--sp-3);font-size:var(--fs-base);font-weight:700;
  display:flex;align-items:center;gap:var(--sp-2);
}

/* ---- Formulário recolhido ---- */
/* Aberto o tempo todo, o formulário empurra para baixo a lista que a pessoa veio ver — em toda
   visita, por uma ação que acontece uma vez por trimestre. */
.form-dobra{margin-top:var(--sp-5);border-top:1px solid var(--border);padding-top:var(--sp-4)}
.form-dobra > summary{
  cursor:pointer;font-weight:650;font-size:var(--fs-md);color:var(--primary);
  list-style:none;padding:var(--sp-2) 0;
}
.form-dobra > summary::-webkit-details-marker{display:none}
.form-dobra > summary:hover{text-decoration:underline}
.form-dobra[open] > summary{margin-bottom:var(--sp-3)}

/* ---- Avaliação de desempenho ---- */
.ciclos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp-3)}
.ciclo-card{
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  display:flex;flex-direction:column;transition:border-color .14s ease,box-shadow .14s ease;
}
.ciclo-card:hover{border-color:var(--primary)}
/* O ciclo aberto na tela recebe anel próprio: sem isso, a lista de avaliações abaixo parece
   solta, sem dizer de qual dos cards ela veio. */
.ciclo-card.selecionado{border-color:var(--primary);box-shadow:0 0 0 2px var(--info-bg)}
.ciclo-card.encerrado{background:var(--bg)}
.ciclo-abrir{
  display:flex;flex-direction:column;gap:var(--sp-1);align-items:flex-start;
  padding:var(--sp-4);color:inherit;text-decoration:none;flex:1;
}
.ciclo-abrir:hover{text-decoration:none}
.ciclo-emoji{font-size:var(--fs-sm);line-height:1}
.ciclo-abrir strong{font-size:var(--fs-base);font-weight:700}
.ciclo-periodo{font-size:var(--fs-xs);color:var(--text-muted)}
.ciclo-encerrar{padding:0 var(--sp-4) var(--sp-3)}

.ciclo-resumo{display:flex;flex-direction:column;gap:var(--sp-2)}
.ciclo-anel{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4);background:var(--info-bg);border-radius:var(--radius);
}
.ciclo-anel-texto{display:flex;flex-direction:column;font-size:var(--fs-sm);color:var(--text-muted)}
.ciclo-anel-texto strong{font-size:var(--fs-base);color:var(--text)}

.lista-aval{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.lista-aval > li{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
}
.lista-aval > li:hover{border-color:var(--border-forte)}

@media (max-width:720px){
  .ciclo-anel{flex-direction:column;text-align:center;gap:var(--sp-3)}
  /* A nota desce para a segunda linha: espremida ao lado do nome, ela vira um traço. */
  .lista-aval > li{grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-3)}
  .lista-aval .nota{grid-column:1/-1}
}

/* ---- Organograma editável (2026-08-13) ---- */
/* Antes só dava para mexer na hierarquia abrindo a ficha de cada pessoa. Montar a estrutura de
   uma empresa de trinta pessoas custava trinta idas e voltas. */
.org-aviso-edicao{
  background:var(--warning-bg);border-left:3px solid var(--warning);
  border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);
  font-size:var(--fs-sm);line-height:1.5;
}
.org-editar{display:flex;gap:var(--sp-2);align-items:center;margin-top:var(--sp-2);flex-wrap:wrap}
.org-select{
  flex:1;min-width:9rem;max-width:15rem;padding:var(--sp-1) var(--sp-2);
  border:1px solid var(--border-forte);border-radius:8px;background:var(--surface);
  color:var(--text);font-family:inherit;font-size:var(--fs-xs);
}
/* O botão some quando há JS (o `change` já salva) e volta a aparecer sem ele: a hierarquia da
   empresa não pode depender de script para ser editada. */
.js .org-salvar{display:none}

/* ---- Integração com WhatsApp ---- */
.wa-modelos{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.wa-modelo{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);border:1px solid var(--border-forte);border-radius:999px;
  background:var(--surface);color:var(--text);font-family:inherit;font-size:var(--fs-sm);
  font-weight:600;cursor:pointer;
}
.wa-modelo:hover{border-color:var(--primary);background:var(--info-bg)}
/* O modelo escolhido fica sólido: entre seis pílulas iguais, borda mais escura não basta para
   dizer qual delas gerou o texto que está na caixa abaixo. */
.wa-modelo.ativo{background:var(--primary);border-color:var(--primary);color:#fff}

/* ---- Duas peças de formulário que faltavam ao sistema ---- */
/* Nota abaixo de um campo: explica de onde vem ou para onde vai o que se digita. */
.campo-nota{display:block;margin-top:var(--sp-1);font-size:var(--fs-xs);color:var(--text-muted)}
/* Caixa de seleção com rótulo ao lado, e não acima: um checkbox com label em cima parece um
   campo vazio, e o rótulo deixa de dizer o que está marcado. */
.field-check{display:flex;align-items:center;gap:var(--sp-2)}
.field-check input{width:auto;margin:0}
.field-check label{margin:0;font-weight:400}


/* ══════════════════════════════════════════════════════════════════════════════════════════
   ORGANOGRAMA (2026-08-13) — desenho pedido pelo dono a partir de `/var/www/inspiracao/6.png`

   Era uma lista recuada, cada nível empurrado à direita como pasta de arquivos. Funcionava para
   ler, mas ninguém reconhece a forma da própria empresa numa lista.

   Cards VERTICAIS (cargo em cima, avatar, nome embaixo) e não horizontais: é a forma que se
   reconhece como organograma, e card largo empurra os irmãos para fora da tela num nível com
   seis pessoas.

   As linhas são borda de pseudo-elemento — sem imagem, sem SVG e sem script, o que também é o
   que permite imprimir a página como está. A regra que faz a barra fechar certo é a dos irmãos:
   cada filho desenha meia linha para cada lado, o primeiro não desenha à esquerda e o último não
   à direita. Sem isso ela vaza para fora dos extremos do grupo.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.org-controles{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:var(--sp-3) 0;
}
.campo-busca-org{
  flex:1;min-width:12rem;max-width:20rem;padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--border-forte);border-radius:var(--radius);
  background:var(--surface);color:var(--text);font-size:var(--fs-sm);font-family:inherit;
}
.org-select-depto{
  padding:var(--sp-2) var(--sp-3);border:1px solid var(--border-forte);border-radius:var(--radius);
  background:var(--surface);color:var(--text);font-size:var(--fs-sm);font-family:inherit;
}
.org-zoom{
  display:inline-flex;align-items:center;gap:var(--sp-1);
  border:1px solid var(--border-forte);border-radius:var(--radius);background:var(--surface);
}
.org-zoom button{
  width:30px;height:30px;border:0;background:none;cursor:pointer;
  font-size:var(--fs-base);color:var(--text);font-family:inherit;line-height:1;
}
.org-zoom button:hover{background:var(--bg)}
.org-zoom span{
  min-width:3.2rem;text-align:center;font-size:var(--fs-xs);color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}

.org-arvore,.org-arvore ul{list-style:none;margin:0;padding:0}
.org-arvore{
  display:flex;justify-content:flex-start;gap:var(--sp-6);
  /* Organograma largo não cabe em tela nenhuma: rola na horizontal em vez de espremer os
     cards até o nome não caber. */
  overflow-x:auto;padding:var(--sp-5) var(--sp-2) var(--sp-4);
  transition:transform .15s ease;
}
.org-arvore ul{display:flex;justify-content:center;position:relative;padding-top:var(--sp-6)}
/* O tronco que desce do pai até a barra dos filhos. */
.org-arvore ul::before{
  content:"";position:absolute;top:0;left:50%;
  width:0;height:var(--sp-6);border-left:2px solid var(--border-forte);
}
/* Ramo recolhido: os filhos somem e o botão passa a mostrar quantos estão escondidos. */
.org-ramo.recolhido > ul{display:none}

.org-ramo{
  position:relative;display:flex;flex-direction:column;align-items:center;
  padding:var(--sp-6) var(--sp-2) 0;flex-shrink:0;
}
/* Raiz de árvore: não tem pai acima, então não desenha nada em cima de si. */
.org-arvore > .org-ramo{padding-top:0}
.org-arvore > .org-ramo::before,.org-arvore > .org-ramo::after{display:none}

/* Meia barra horizontal para cada lado + o pedaço vertical que desce até o próprio card. */
.org-ramo::before,.org-ramo::after{
  content:"";position:absolute;top:0;width:50%;height:var(--sp-6);
  border-top:2px solid var(--border-forte);
}
.org-ramo::before{right:50%}
.org-ramo::after{left:50%;border-left:2px solid var(--border-forte)}
/* Filho único: a barra horizontal não existe — só o tronco reto do pai até ele. */
.org-ramo:only-child::before{display:none}
.org-ramo:only-child::after{left:50%;width:0;border-top:0}
/* Os extremos param a barra onde o grupo termina. */
.org-ramo:first-child::before{border:0}
.org-ramo:last-child::after{border-top:0;border-left:0}
.org-ramo:last-child::before{border-right:2px solid var(--border-forte);border-radius:0 8px 0 0}
.org-ramo:first-child::after{border-radius:8px 0 0 0}

/* ---- O card ---- */
.org-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);
  width:13.5rem;padding:var(--sp-4) var(--sp-3) var(--sp-3);text-align:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  border-top:3px solid var(--primary);
  box-shadow:0 2px 8px -5px rgba(27,31,39,.35);
  transition:border-color .14s ease,box-shadow .14s ease;
}
.org-card:hover{border-color:var(--primary);box-shadow:0 8px 20px -10px rgba(27,31,39,.4)}
/* Uma cor por nível: é o que permite dizer, de relance, quantas camadas a empresa tem. */
.org-arvore > .org-ramo > .org-card{border-top-color:#7C3AED}
.org-arvore ul > .org-ramo > .org-card{border-top-color:#2563EB}
.org-arvore ul ul > .org-ramo > .org-card{border-top-color:#0D9488}
.org-arvore ul ul ul > .org-ramo > .org-card{border-top-color:#B45309}

/* Quantos respondem DIRETAMENTE, no alto e meio fora do card — diz o tamanho da equipe sem
   obrigar a contar os cards abaixo. */
.org-diretos{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--surface);border:2px solid var(--primary);color:var(--primary);
  font-size:var(--fs-2xs);font-weight:750;font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;justify-content:center;
}
.org-card-cargo{font-size:var(--fs-sm);font-weight:650;color:var(--text);line-height:1.3}
.org-card-depto{font-size:var(--fs-2xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em}
.org-card .avatar{margin:var(--sp-1) 0}
.org-card-nome{
  font-size:var(--fs-xs);color:var(--text-muted);text-decoration:none;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.org-card-nome:hover{color:var(--primary);text-decoration:underline}
/* Desligado é DITO, não só desbotado: cor nunca é o único sinal. */
.org-card-inativo{opacity:.7}
/* Quem não casa com a busca some do olho sem sair do lugar — a árvore não se remonta a cada
   tecla digitada, e o que se procura fica onde estava na estrutura. */
.org-card-apagado{opacity:.18}

/* O `+N` fica sobre a linha que desce, e é o botão de recolher o ramo. */
.org-toggle{
  position:relative;z-index:2;margin-top:var(--sp-2);
  min-width:2.6rem;padding:2px var(--sp-2);border:0;border-radius:999px;
  background:var(--primary);color:#fff;cursor:pointer;
  font-size:var(--fs-2xs);font-weight:700;font-family:inherit;font-variant-numeric:tabular-nums;
}
.org-toggle:hover{background:var(--primary-hover)}
.org-toggle-menos{display:none}
.org-ramo.recolhido > .org-toggle .org-toggle-mais{display:inline}
.org-ramo:not(.recolhido) > .org-toggle .org-toggle-mais{display:none}
.org-ramo:not(.recolhido) > .org-toggle .org-toggle-menos{display:inline}

.org-orfaos{border-style:dashed}
.org-orfaos-lista{
  list-style:none;margin:var(--sp-3) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp-2);
}
.org-orfaos-lista li{
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-3);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
}
.org-orfaos-lista a{color:var(--text);text-decoration:none;font-weight:600}
.org-orfaos-lista a:hover{text-decoration:underline}

@media (max-width:720px){
  .org-card{width:11rem}
}
@media print{
  /* Impresso, o organograma é o documento — e ele não pode sair cortado pela rolagem. */
  .org-arvore{overflow:visible;transform:none !important}
  .org-card{box-shadow:none}
  .org-controles,.org-toggle{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   KIT VISUAL (2026-08-13)

   Nasceu de uma frase do dono olhando o sistema: "parece planilha de Excel". Ele tinha razão —
   quase toda tela era `<table>` de texto, e o painel calcula muito mais do que mostrava. O que
   faltava não era dado, era forma: número grande onde há número, barra onde há proporção, cor
   onde há estado, e um convite onde ainda não há nada.

   As peças vivem juntas de propósito: é isso que faz a décima tela sair igual à primeira.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ---- Faixa de indicadores ---- */
.kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:var(--sp-3);margin:var(--sp-4) 0;
}
.kpi{
  display:flex;flex-direction:column;gap:0.1rem;
  padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);color:var(--text);text-decoration:none;
  border-left:3px solid var(--border-forte);
}
a.kpi:hover{border-color:var(--primary);text-decoration:none;transform:translateY(-1px)}
a.kpi{transition:transform .14s ease,border-color .14s ease}
.kpi-emoji{font-size:var(--fs-lg);line-height:1}
/* `tabular-nums`: sem isso um "8,5" e um "10" de larguras diferentes fazem a linha de cards
   dançar a cada atualização. */
.kpi-valor{font-size:var(--fs-2xl);font-weight:750;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi-rotulo{font-size:var(--fs-sm);color:var(--text-muted);font-weight:600}
.kpi-detalhe{font-size:var(--fs-xs);color:var(--text-muted)}
/* A cor mora na BORDA, não no fundo: quatro cards de fundo colorido lado a lado brigam entre
   si e nenhum se destaca — que é justamente o oposto do que um indicador serve para fazer. */
.kpi-ok{border-left-color:var(--success)}
.kpi-ok .kpi-valor{color:var(--success)}
.kpi-atencao{border-left-color:var(--warning)}
.kpi-atencao .kpi-valor{color:var(--warning)}
.kpi-perigo{border-left-color:var(--danger)}
.kpi-perigo .kpi-valor{color:var(--danger)}

/* ---- Anel de progresso ---- */
.anel{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.anel svg{display:block}
.anel-pct{
  position:absolute;font-size:var(--fs-sm);font-weight:750;font-variant-numeric:tabular-nums;
}

/* ---- Estado vazio ---- */
/* "Nenhum registro" deixa a pessoa parada: ela não sabe se está no lugar errado, se falta
   permissão, ou se só não há nada ainda. Aqui sempre há o que é isso e o que fazer agora. */
.vazio{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  padding:var(--sp-6) var(--sp-4);text-align:center;
  border:1px dashed var(--border-forte);border-radius:var(--radius);background:var(--bg);
}
.vazio-emoji{font-size:var(--fs-2xl);line-height:1}
.vazio-titulo{font-size:var(--fs-base);font-weight:700}
.vazio-texto{font-size:var(--fs-sm);color:var(--text-muted);max-width:52ch;line-height:1.5}

/* ---- Pessoa (avatar + nome + contexto) ---- */
.pessoa{display:flex;align-items:center;gap:var(--sp-3);min-width:0;color:inherit;text-decoration:none}
a.pessoa:hover .pessoa-texto strong{color:var(--primary)}
.pessoa-texto{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.pessoa-texto strong{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pessoa-detalhe{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Nota de 0 a 10 ---- */
.nota{display:flex;align-items:center;gap:var(--sp-2);font-variant-numeric:tabular-nums}
.nota-trilho{display:block;width:64px;height:6px;border-radius:999px;background:var(--border);overflow:hidden}
.nota-fill{display:block;height:100%;border-radius:999px;background:currentColor}
.nota strong{font-size:var(--fs-base);font-weight:750}
.nota-ok{color:var(--success)}
.nota-atencao{color:var(--warning)}
.nota-perigo{color:var(--danger)}
.nota-vazia{color:var(--text-muted);font-size:var(--fs-xs);font-style:italic}

/* ---- Cabeçalho de card e sub-título de seção ---- */
.card-topo{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.sub-titulo{
  margin:var(--sp-5) 0 var(--sp-3);font-size:var(--fs-base);font-weight:700;
  display:flex;align-items:center;gap:var(--sp-2);
}

/* ---- Formulário recolhido ---- */
/* Aberto o tempo todo, o formulário empurra para baixo a lista que a pessoa veio ver — em toda
   visita, por uma ação que acontece uma vez por trimestre. */
.form-dobra{margin-top:var(--sp-5);border-top:1px solid var(--border);padding-top:var(--sp-4)}
.form-dobra > summary{
  cursor:pointer;font-weight:650;font-size:var(--fs-md);color:var(--primary);
  list-style:none;padding:var(--sp-2) 0;
}
.form-dobra > summary::-webkit-details-marker{display:none}
.form-dobra > summary:hover{text-decoration:underline}
.form-dobra[open] > summary{margin-bottom:var(--sp-3)}

/* ---- Avaliação de desempenho ---- */
.ciclos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp-3)}
.ciclo-card{
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  display:flex;flex-direction:column;transition:border-color .14s ease,box-shadow .14s ease;
}
.ciclo-card:hover{border-color:var(--primary)}
/* O ciclo aberto na tela recebe anel próprio: sem isso, a lista de avaliações abaixo parece
   solta, sem dizer de qual dos cards ela veio. */
.ciclo-card.selecionado{border-color:var(--primary);box-shadow:0 0 0 2px var(--info-bg)}
.ciclo-card.encerrado{background:var(--bg)}
.ciclo-abrir{
  display:flex;flex-direction:column;gap:var(--sp-1);align-items:flex-start;
  padding:var(--sp-4);color:inherit;text-decoration:none;flex:1;
}
.ciclo-abrir:hover{text-decoration:none}
.ciclo-emoji{font-size:var(--fs-sm);line-height:1}
.ciclo-abrir strong{font-size:var(--fs-base);font-weight:700}
.ciclo-periodo{font-size:var(--fs-xs);color:var(--text-muted)}
.ciclo-encerrar{padding:0 var(--sp-4) var(--sp-3)}

.ciclo-resumo{display:flex;flex-direction:column;gap:var(--sp-2)}
.ciclo-anel{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4);background:var(--info-bg);border-radius:var(--radius);
}
.ciclo-anel-texto{display:flex;flex-direction:column;font-size:var(--fs-sm);color:var(--text-muted)}
.ciclo-anel-texto strong{font-size:var(--fs-base);color:var(--text)}

.lista-aval{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.lista-aval > li{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
}
.lista-aval > li:hover{border-color:var(--border-forte)}

@media (max-width:720px){
  .ciclo-anel{flex-direction:column;text-align:center;gap:var(--sp-3)}
  /* A nota desce para a segunda linha: espremida ao lado do nome, ela vira um traço. */
  .lista-aval > li{grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-3)}
  .lista-aval .nota{grid-column:1/-1}
}

/* ---- Organograma editável (2026-08-13) ---- */
/* Antes só dava para mexer na hierarquia abrindo a ficha de cada pessoa. Montar a estrutura de
   uma empresa de trinta pessoas custava trinta idas e voltas. */
.org-aviso-edicao{
  background:var(--warning-bg);border-left:3px solid var(--warning);
  border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);
  font-size:var(--fs-sm);line-height:1.5;
}
.org-editar{display:flex;gap:var(--sp-2);align-items:center;margin-top:var(--sp-2);flex-wrap:wrap}
.org-select{
  flex:1;min-width:9rem;max-width:15rem;padding:var(--sp-1) var(--sp-2);
  border:1px solid var(--border-forte);border-radius:8px;background:var(--surface);
  color:var(--text);font-family:inherit;font-size:var(--fs-xs);
}
/* O botão some quando há JS (o `change` já salva) e volta a aparecer sem ele: a hierarquia da
   empresa não pode depender de script para ser editada. */
.js .org-salvar{display:none}

/* ---- Integração com WhatsApp ---- */
.wa-modelos{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.wa-modelo{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);border:1px solid var(--border-forte);border-radius:999px;
  background:var(--surface);color:var(--text);font-family:inherit;font-size:var(--fs-sm);
  font-weight:600;cursor:pointer;
}
.wa-modelo:hover{border-color:var(--primary);background:var(--info-bg)}
/* O modelo escolhido fica sólido: entre seis pílulas iguais, borda mais escura não basta para
   dizer qual delas gerou o texto que está na caixa abaixo. */
.wa-modelo.ativo{background:var(--primary);border-color:var(--primary);color:#fff}

/* ---- Duas peças de formulário que faltavam ao sistema ---- */
/* Nota abaixo de um campo: explica de onde vem ou para onde vai o que se digita. */
.campo-nota{display:block;margin-top:var(--sp-1);font-size:var(--fs-xs);color:var(--text-muted)}
/* Caixa de seleção com rótulo ao lado, e não acima: um checkbox com label em cima parece um
   campo vazio, e o rótulo deixa de dizer o que está marcado. */
.field-check{display:flex;align-items:center;gap:var(--sp-2)}
.field-check input{width:auto;margin:0}
.field-check label{margin:0;font-weight:400}


/* ══════════════════════════════════════════════════════════════════════════════════════════
   ORGANOGRAMA — árvore horizontal (2026-08-13)

   Era uma lista recuada: cada nível empurrado alguns pixels à direita, como uma pasta de
   arquivos. Funcionava para ler, mas não parecia um organograma — e ninguém reconhece a forma
   da própria empresa numa lista.

   Agora é o desenho clássico: o chefe em cima, quem responde a ele lado a lado embaixo, e as
   linhas ligando os níveis. As linhas são feitas com borda de pseudo-elemento — sem imagem,
   sem SVG e sem script, o que também é o que permite imprimir a página como está.

   A regra que faz tudo funcionar é a dos irmãos: cada filho desenha meia linha horizontal para
   cada lado; o primeiro não desenha à esquerda e o último não desenha à direita, e é isso que
   fecha a barra exatamente sobre o grupo — sem ela, a linha vazaria para fora dos extremos.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.org-arvore,.org-arvore ul{list-style:none;margin:0;padding:0}
.org-arvore{
  display:flex;justify-content:flex-start;gap:var(--sp-6);
  /* Organograma largo não cabe em tela nenhuma: rola na horizontal em vez de espremer os
     cards até o nome não caber. */
  overflow-x:auto;padding:var(--sp-4) var(--sp-2);
}
.org-arvore ul{display:flex;justify-content:center;position:relative;padding-top:var(--sp-5)}
/* O tronco que desce do pai até a barra dos filhos. */
.org-arvore ul::before{
  content:"";position:absolute;top:0;left:50%;
  width:0;height:var(--sp-5);border-left:2px solid var(--border-forte);
}

.org-ramo{
  position:relative;display:flex;flex-direction:column;align-items:center;
  padding:var(--sp-5) var(--sp-2) 0;flex-shrink:0;
}
/* Raiz de árvore: não tem pai acima, então não desenha nada em cima de si. */
.org-arvore > .org-ramo{padding-top:0}
.org-arvore > .org-ramo::before,.org-arvore > .org-ramo::after{display:none}

/* Meia barra horizontal para cada lado + o pedaço vertical que desce até o próprio card. */
.org-ramo::before,.org-ramo::after{
  content:"";position:absolute;top:0;width:50%;height:var(--sp-5);
  border-top:2px solid var(--border-forte);
}
.org-ramo::before{right:50%}
.org-ramo::after{left:50%;border-left:2px solid var(--border-forte)}
/* Filho único: a barra horizontal não existe — só o tronco reto do pai até ele. */
.org-ramo:only-child::before{display:none}
.org-ramo:only-child::after{left:50%;width:0;border-top:0}
/* Os extremos param a barra onde o grupo termina. */
.org-ramo:first-child::before{border:0}
.org-ramo:last-child::after{border-top:0;border-left:0}
.org-ramo:last-child::before{border-right:2px solid var(--border-forte);border-radius:0 6px 0 0}
.org-ramo:first-child::after{border-radius:6px 0 0 0}

/* ---- O card ---- */
/* Horizontal: avatar à esquerda, texto à direita. Vertical, com a foto em cima do nome, cada
   card ficaria alto e a árvore inteira dobraria de altura a cada nível. */
.org-card{
  display:flex;align-items:center;gap:var(--sp-3);
  width:16rem;padding:var(--sp-3);text-align:left;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  /* A faixa colorida no alto marca o nível sem precisar de legenda. */
  border-top:3px solid var(--primary);
  box-shadow:0 2px 6px -4px rgba(27,31,39,.3);
  transition:border-color .14s ease,box-shadow .14s ease;
}
.org-card:hover{border-color:var(--primary);box-shadow:0 6px 16px -8px rgba(27,31,39,.35)}
/* Cada nível numa cor: é o que permite dizer, de relance, quantas camadas a empresa tem. */
.org-arvore > .org-ramo > .org-card{border-top-color:#7C3AED}
.org-arvore ul > .org-ramo > .org-card{border-top-color:#2563EB}
.org-arvore ul ul > .org-ramo > .org-card{border-top-color:#0D9488}
.org-arvore ul ul ul > .org-ramo > .org-card{border-top-color:#B45309}

.org-card-texto{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.org-card-texto a{font-weight:650;color:var(--text);text-decoration:none}
.org-card-texto a:hover{text-decoration:underline}
.org-card-cargo{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.35}
.org-card-meta{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:2px}
.org-abaixo{font-size:var(--fs-2xs);color:var(--text-muted);font-variant-numeric:tabular-nums}
/* Desligado é DITO, não só desbotado: cor nunca é o único sinal. */
.org-card-inativo{opacity:.72}
/* Quem não casa com a busca some do olho sem sair do lugar — a árvore não se remonta a cada
   tecla digitada, e o que se procura fica onde estava na estrutura. */
.org-card-apagado{opacity:.2}

.org-orfaos{border-style:dashed}
.org-orfaos-lista{
  list-style:none;margin:var(--sp-3) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp-2);
}
.org-orfaos-lista li{
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-3);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
}
.org-orfaos-lista a{color:var(--text);text-decoration:none;font-weight:600}
.org-orfaos-lista a:hover{text-decoration:underline}

@media (max-width:720px){
  /* Card mais estreito antes de reduzir a fonte: nome de gente não pode encolher até virar
     ilegível. */
  .org-card{width:13rem}
}
@media print{
  /* Impresso, o organograma é o documento — some tudo que não é ele. */
  .org-arvore{overflow:visible}
  .org-card{box-shadow:none}
}

/* ---- Panorama da primeira página ---- */
/* Dois gráficos lado a lado enquanto couberem: empilhados, empurrariam a lista de pendências
   para fora da primeira tela — e é ela que diz o que fazer hoje. */
.panorama-graficos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--sp-5);margin-top:var(--sp-4);
}
.panorama-nota{
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--border);
  font-size:var(--fs-xs);color:var(--text-muted);line-height:1.5;
}

/* ---- Vagas ---- */
/* Cards, e não tabela: são poucas e cada uma tem quatro ações. Numa tabela, essas ações
   viravam uma coluna espremida que empurra o resto para fora da tela. */
.vagas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--sp-3)}
.vaga-card{
  display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  border-top:3px solid var(--success);
}
.vaga-card.fechada{background:var(--bg);border-top-color:var(--border-forte)}
.vaga-topo{display:flex;align-items:flex-start;gap:var(--sp-2)}
.vaga-emoji{font-size:var(--fs-sm);line-height:1.4}
.vaga-titulo{display:flex;flex-direction:column;flex:1;min-width:0}
.vaga-titulo strong{font-size:var(--fs-base);font-weight:700}
.vaga-titulo span{font-size:var(--fs-xs);color:var(--text-muted)}
.vaga-candidatos{
  display:flex;align-items:baseline;gap:var(--sp-2);padding:var(--sp-3);
  background:var(--info-bg);border-radius:var(--radius);
  color:var(--text);font-size:var(--fs-sm);text-decoration:none;
}
.vaga-candidatos strong{font-size:var(--fs-xl);font-weight:750;color:var(--primary)}
.vaga-candidatos:hover{text-decoration:none;background:var(--surface);box-shadow:inset 0 0 0 1px var(--primary)}
.vaga-acoes{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.vaga-status{display:inline}
.vaga-data{font-size:var(--fs-2xs);color:var(--text-muted)}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   PRIMEIRA PÁGINA EM TRÊS COLUNAS (2026-08-13)

   Formato pedido pelo dono a partir da referência do Bizneo
   (`/var/www/inspiracao/Tela de inicio gestao de pessoas.png`): o topo em largura cheia com a
   saudação e os blocos das áreas, e abaixo duas faixas — a larga com o que exige decisão, a
   estreita com o que só se olha (celebrações, próximos dias, quem está fora).

   Uma coluna só abaixo de 1100px: espremer três faixas num laptop de 13" deixa o gráfico do
   panorama com 200px e a lista de pendências ilegível.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.painel-colunas{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:var(--sp-4);align-items:start;
}
.painel-centro,.painel-lado{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
/* A coluna lateral acompanha a rolagem: numa página longa, "quem está fora hoje" some da vista
   justamente quando se está lendo a lista de pendências que depende disso. */
.painel-lado{position:sticky;top:calc(56px + var(--sp-4))}
.bloco-lateral h2{font-size:var(--fs-base)}

.celebracoes,.fora-lista{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.celebracoes > li,.fora-lista > li a{
  display:flex;align-items:center;gap:var(--sp-3);min-width:0;color:inherit;text-decoration:none;
}
.fora-lista > li a{padding:var(--sp-1);border-radius:var(--radius)}
.fora-lista > li a:hover{background:var(--bg);text-decoration:none}
.celebracao-texto,.fora-texto{display:flex;flex-direction:column;min-width:0;line-height:1.3;flex:1}
.celebracao-texto strong,.fora-texto strong{
  font-size:var(--fs-sm);font-weight:650;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.celebracao-texto span,.fora-texto span{font-size:var(--fs-xs);color:var(--text-muted)}
.celebracao-data{
  font-size:var(--fs-xs);font-weight:700;color:var(--text-muted);
  font-variant-numeric:tabular-nums;flex-shrink:0;
}

@media (max-width:1100px){
  .painel-colunas{grid-template-columns:1fr}
  .painel-lado{position:static}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   AVALIAÇÃO DE DESEMPENHO (2026-08-13) — formato de `/var/www/inspiracao/11.png`

   Era uma lista de definição: "Nota: 8,5" numa linha igual às outras. A nota é o número que a
   pessoa vai lembrar da conversa inteira — ela não pode estar no meio de uma tabela.

   Duas colunas: o corpo com avaliador, feedback e metas; a lateral com quem foi avaliado e o
   resultado, que não some enquanto se lê o resto.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.aval-cabecalho{
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);
  flex-wrap:wrap;margin-bottom:var(--sp-4);
}
.aval-cabecalho h1{font-size:var(--fs-xl);font-weight:750;letter-spacing:-0.01em;line-height:1.2}
.aval-cabecalho p{font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--sp-1)}

.aval-colunas{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp-4);align-items:start}
.aval-conteudo{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.aval-lado{position:sticky;top:calc(56px + var(--sp-4))}

.aval-rotulo{
  display:block;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--text-muted);margin-bottom:var(--sp-2);
}
.aval-avaliador{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.aval-avaliador-bloco{flex:1;min-width:12rem}
.aval-numero{font-size:var(--fs-lg);font-weight:750;font-variant-numeric:tabular-nums}

.aval-feedback{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-3)}
.aval-feedback-bloco{padding:var(--sp-3);border-radius:var(--radius);border-left:3px solid var(--border-forte)}
.aval-feedback-bloco p{font-size:var(--fs-sm);line-height:1.55}
/* Verde no que foi bem, âmbar no que precisa melhorar — e nunca vermelho: ponto de melhoria
   não é falha, e pintá-lo de erro muda o tom da conversa que a tela deveria ajudar a ter. */
.aval-feedback-bloco.positivo{background:var(--success-bg);border-left-color:var(--success)}
.aval-feedback-bloco.melhoria{background:var(--warning-bg);border-left-color:var(--warning)}

/* ---- Metas ---- */
.metas-lista{list-style:none;display:flex;flex-direction:column;gap:var(--sp-3)}
.meta{
  padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);
}
.meta-fechada{border-left:3px solid var(--success)}
.meta-topo{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap}
.meta-peso{
  font-size:var(--fs-sm);font-weight:750;color:var(--primary);
  font-variant-numeric:tabular-nums;flex-shrink:0;
}
.meta-descricao{flex:1;min-width:12rem;font-size:var(--fs-md);font-weight:650}
.meta-selo{font-size:var(--fs-2xs);color:var(--text-muted);white-space:nowrap}
.meta-barra{height:6px;border-radius:999px;background:var(--bg);overflow:hidden;margin:var(--sp-2) 0}
.meta-barra > span{display:block;height:100%;border-radius:999px;background:var(--primary)}
.meta-fechada .meta-barra > span{background:var(--success)}
.meta-resultado{font-size:var(--fs-sm);color:var(--text);line-height:1.5}
.meta-form{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
.meta-form input{flex:1;min-width:0}

/* ---- O resultado, na lateral ---- */
.aval-resultado{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border)}
.aval-nota{
  display:block;font-size:var(--fs-3xl);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-0.02em;
}
.aval-nota span{font-size:var(--fs-lg);font-weight:600;color:var(--text-muted)}
.aval-nota.ok{color:var(--success)}
.aval-nota.atencao{color:var(--warning)}
.aval-nota.perigo{color:var(--danger)}
.aval-nota.vazia{font-size:var(--fs-lg);color:var(--text-muted);font-style:italic}
.aval-escala{height:8px;border-radius:999px;background:var(--bg);overflow:hidden;margin:var(--sp-3) 0 var(--sp-2)}
.aval-escala > span{display:block;height:100%;border-radius:999px;background:currentColor}
.aval-nota.ok + .aval-escala > span{background:var(--success)}
.aval-nota.atencao + .aval-escala > span{background:var(--warning)}
.aval-nota.perigo + .aval-escala > span{background:var(--danger)}

.aval-resumo{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border)}
.aval-resumo > div{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-1) 0}
.aval-resumo dt{font-size:var(--fs-xs);color:var(--text-muted)}
.aval-resumo dd{font-size:var(--fs-xs);font-weight:650;text-align:right}

@media (max-width:1000px){
  .aval-colunas{grid-template-columns:1fr}
  .aval-lado{position:static}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   CALCULADORAS TRABALHISTAS (2026-08-13)

   Formulário à esquerda, resultado à direita: a conta é para ser refeita várias vezes com
   valores diferentes, e um resultado que empurra o formulário para fora da tela obriga a rolar
   para cima a cada tentativa.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-3)}
.calc-card{
  display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  border-top:3px solid #DB2777;color:var(--text);text-decoration:none;
  transition:transform .14s ease,box-shadow .14s ease;
}
.calc-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(27,31,39,.28);text-decoration:none}
.calc-emoji{font-size:var(--fs-xl);line-height:1}
.calc-card strong{font-size:var(--fs-base);font-weight:700}
.calc-card > span:last-child{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.45}

.calc-colunas{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--sp-4);align-items:start;margin-top:var(--sp-3)}
.calc-resultado{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.calc-numero{text-align:center}

.calc-linhas,.calc-avisos,.calc-memoria{list-style:none;display:flex;flex-direction:column;gap:var(--sp-1)}
.calc-linhas > li{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);
  padding:var(--sp-2) 0;border-bottom:1px solid var(--border);
}
.calc-linhas > li:last-child{border-bottom:0}
.calc-linha-nome{display:flex;flex-direction:column;min-width:0}
.calc-linha-nome strong{font-size:var(--fs-sm);font-weight:600}
.calc-linha-nome span{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.4}
.calc-linha-valor{font-size:var(--fs-md);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Desconto em vermelho E com sinal: cor sozinha não diz nada a quem não a enxerga. */
.calc-linhas > li.desconto .calc-linha-valor{color:var(--danger)}

.calc-avisos{gap:var(--sp-2)}
.calc-avisos > li{
  font-size:var(--fs-sm);line-height:1.5;padding:var(--sp-2) var(--sp-3);
  background:var(--warning-bg);border-left:3px solid var(--warning);border-radius:var(--radius);
}
/* A memória é numerada: é uma conta, e conta se lê na ordem. */
.calc-memoria{counter-reset:passo;gap:var(--sp-2)}
.calc-memoria > li{
  counter-increment:passo;position:relative;padding-left:2rem;
  font-size:var(--fs-sm);line-height:1.5;font-variant-numeric:tabular-nums;
}
.calc-memoria > li::before{
  content:counter(passo);position:absolute;left:0;top:0;
  width:1.4rem;height:1.4rem;border-radius:999px;background:var(--info-bg);color:var(--primary);
  font-size:var(--fs-2xs);font-weight:700;display:inline-flex;align-items:center;justify-content:center;
}
.calc-aviso{
  margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius);
  background:var(--bg);border:1px dashed var(--border-forte);
  font-size:var(--fs-xs);color:var(--text-muted);line-height:1.55;
}

@media (max-width:900px){
  .calc-colunas{grid-template-columns:1fr}
}

/* ---- Fechamento da folha (2026-08-13) ---- */
/* Os passos na ordem do TRABALHO, não na ordem dos dados: quem fecha folha faz isso uma vez por
   mês, sob prazo (o 5º dia útil), e precisa saber a cada momento qual é o próximo passo. */
.folha-passos{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-4)}
.folha-passo{
  display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  opacity:.65;
}
/* O passo atual acende; os já feitos ficam verdes e discretos. Sem essa distinção, três caixas
   iguais não dizem por onde começar. */
.folha-passo.agora{opacity:1;border-color:var(--primary);box-shadow:0 0 0 2px var(--info-bg)}
.folha-passo.feito{opacity:.8;border-left:3px solid var(--success)}
.folha-passo-num{
  flex-shrink:0;width:26px;height:26px;border-radius:999px;
  background:var(--bg);color:var(--text-muted);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-sm);font-weight:750;
}
.folha-passo.agora .folha-passo-num{background:var(--primary);color:#fff}
.folha-passo.feito .folha-passo-num{background:var(--success);color:#fff}
.folha-passo > div{display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.folha-passo strong{font-size:var(--fs-md)}
.folha-passo span{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5}
.folha-passo form{margin-top:var(--sp-1)}

.folha-lista{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.folha-lista > li{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.folha-lista > li.aberto{border-color:var(--primary)}
/* Líquido zerado ou negativo é o defeito que precisa saltar: o desconto alcançou o salário. */
.folha-lista > li.alerta{border-left:3px solid var(--danger)}
.folha-pessoa{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);color:inherit;text-decoration:none;
}
.folha-pessoa:hover{background:var(--bg);text-decoration:none}
.folha-valores{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0}
.folha-liquido{font-size:var(--fs-lg);font-weight:750;font-variant-numeric:tabular-nums}
.folha-detalhe{font-size:var(--fs-2xs);color:var(--text-muted);white-space:nowrap}
.folha-lancamentos{padding:var(--sp-3) var(--sp-4) var(--sp-4);background:var(--bg);border-top:1px solid var(--border)}
.folha-lancar{display:flex;gap:var(--sp-3);align-items:flex-end;flex-wrap:wrap;margin-top:var(--sp-3)}
.folha-lancar .field{margin:0;flex:1;min-width:11rem}
.folha-remover{flex-shrink:0}

/* ══════════════════════════════════════════════════════════════════════════════════════
   PERFIL COMPORTAMENTAL (2026-08-31)

   As quatro cores de fator seguem a convenção DISC — vermelho, âmbar, verde, azul —, mas os
   tons foram escolhidos por MEDIÇÃO, como o resto do sistema. Contraste sobre branco:
   D 5,94:1 · I 5,53:1 · S 5,06:1 · C 7,31:1. Sobre o fundo da página (#F4F5F7):
   5,44 · 5,07 · 4,63 · 6,71. Todos acima dos 4,5:1 da WCAG AA.

   Tokens próprios em vez de reaproveitar --danger e --warning: se um dia a cor de erro do
   sistema mudar, o gráfico de Dominância não pode mudar junto. Cor de estado e cor de dado
   são coisas diferentes e não devem compartilhar variável.
   ══════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --pf-d:#B23A2E; --pf-d-bg:#FBEDEB;
  --pf-i:#8A6108; --pf-i-bg:#FAF2E0;
  --pf-s:#157E57; --pf-s-bg:#E7F4EE;
  --pf-c:#2F49C4; --pf-c-bg:#EAEDFA;
}

/* ── SVG: tokens usados por todos os gráficos ─────────────────────────────────────── */
.pf-svg{display:block;width:100%;height:auto;overflow:visible}
.pf-svg text{font-family:inherit}
.pf-trilho{fill:#EDEFF3}
.pf-grade{stroke:#E2E4E9;stroke-width:1}
.pf-base{stroke:var(--border-forte);stroke-width:1.5}
.pf-eixo{font-size:var(--fs-2xs);fill:var(--text-muted);font-variant-numeric:tabular-nums}
.pf-valor{font-size:var(--fs-md);font-weight:750;font-variant-numeric:tabular-nums}
.pf-fator{font-size:var(--fs-base);font-weight:750}
.pf-polo{font-size:var(--fs-xs);fill:var(--text);font-weight:700}
.pf-ponta{font-size:var(--fs-2xs);font-weight:650}
.pf-teia{fill:none;stroke:#E2E4E9;stroke-width:1}
.pf-raio{stroke:#EDEFF3;stroke-width:1}
/* Etiqueta de faixa de cada coluna de valor. A cor separa as três faixas sem depender só do
   texto, e o texto está lá para quem não distingue as cores. */
.pf-valor-faixa{font-size:var(--fs-2xs);font-weight:750;letter-spacing:.06em;fill:var(--text-muted)}
.pf-valor-faixa.pf-faixa-significativo{fill:#1E3A5F}
.pf-valor-faixa.pf-faixa-circunstancial{fill:#43809B}
.pf-valor-faixa.pf-faixa-indiferente{fill:#9AA1AD}
.pf-disco{fill:#FFFFFF;stroke-width:2}
.pf-faixa-linha-svg{stroke-width:2;stroke-linecap:round}
.pf-faixa-linha-svg.pf-faixa-significativo{stroke:#1E3A5F}
.pf-faixa-linha-svg.pf-faixa-circunstancial{stroke:#43809B}
.pf-faixa-linha-svg.pf-faixa-indiferente{stroke:#C4C9D2}
.pf-valor-num{font-size:var(--fs-md);font-weight:750;font-variant-numeric:tabular-nums}
.pf-valor-nome{font-size:var(--fs-xs);font-weight:700;fill:var(--text)}
.pf-valor-chave{font-size:var(--fs-2xs);font-weight:650;fill:var(--text-muted);letter-spacing:.06em}

/* Natural cheio, adaptado tracejado: quem não distingue as duas cores ainda separa os
   dois polígonos pelo traço. Cor nunca é o único canal. */
.pf-poli{stroke-width:2;stroke-linejoin:round}
.pf-poli-natural{fill:rgba(47,73,196,.14);stroke:#2F49C4}
.pf-poli-adaptado{fill:rgba(178,58,46,.10);stroke:#B23A2E;stroke-dasharray:5 3}

/* ── Cabeçalho do relatório ───────────────────────────────────────────────────────── */
.pf-topo{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:flex-start;justify-content:space-between}
.pf-topo h2{margin:0}
.pf-selo{
  display:inline-flex;align-items:baseline;gap:.4rem;padding:.3rem .7rem;border-radius:999px;
  background:var(--info-bg);font-weight:750;font-size:var(--fs-sm);letter-spacing:.06em;
}
.pf-selo b{font-size:var(--fs-lg);letter-spacing:.1em}

/* ── Os dois gráficos DISC lado a lado ────────────────────────────────────────────── */
/* Faixa com o nome no topo do relatório: folha impressa sem nome vira folha de qualquer um. */
.pf-faixa-nome{background:var(--primary);color:#FFFFFF;font-weight:750;letter-spacing:.06em;
  text-transform:uppercase;text-align:center;padding:.55rem var(--sp-3);border-radius:var(--radius);
  margin-bottom:var(--sp-3);font-size:var(--fs-base)}
.pf-graficos{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--sp-4)}
.pf-quadro{border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-3);background:#F8FAFD}
.pf-quadro-topo{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
/* Pill da etapa e disco do perfil, na cor do fator dominante. O branco sobre as quatro cores
   de fator fica entre 4,63:1 e 7,31:1 — as mesmas medidas do cabeçalho de PerfilGrafico,
   todas acima do mínimo AA. */
.pf-quadro-pill{color:#FFFFFF;font-size:var(--fs-2xs);font-weight:750;letter-spacing:.09em;
  text-transform:uppercase;padding:.2rem .6rem;border-radius:999px;white-space:nowrap}
.pf-quadro-perfil{margin-left:auto;color:#FFFFFF;display:grid;place-items:center;
  width:2.1rem;height:2.1rem;border-radius:999px;font-weight:750;font-size:var(--fs-sm);
  letter-spacing:.04em}
.pf-quadro-titulo{font-size:var(--fs-2xs);font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}

/* ── Réguas de Jung ───────────────────────────────────────────────────────────────── */
.pf-jung{display:flex;flex-direction:column;gap:var(--sp-3)}
.pf-jung-linha .pf-jung-pergunta{
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:.15rem;
}

/* ── Radar ────────────────────────────────────────────────────────────────────────── */
.pf-radar-caixa{max-width:30rem;margin:0 auto}
.pf-legenda{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-2)}
.pf-legenda span{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-sm);color:var(--text-muted)}
.pf-legenda i{width:1.4rem;height:0;border-top-width:2px;border-top-style:solid;display:inline-block}
.pf-legenda .pf-leg-natural{border-color:#2F49C4}
.pf-legenda .pf-leg-adaptado{border-color:#B23A2E;border-top-style:dashed}

/* ── Amplitude ────────────────────────────────────────────────────────────────────── */
.pf-amplitudes{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:var(--sp-3)}
.pf-amp{border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius);padding:var(--sp-3);background:var(--surface)}
.pf-amp.pf-nivel-ok{border-left-color:var(--success)}
.pf-amp.pf-nivel-atencao{border-left-color:var(--warning)}
.pf-amp.pf-nivel-alerta{border-left-color:var(--danger)}
.pf-amp-topo{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2)}
.pf-amp-nome{font-weight:750}
.pf-amp-pts{font-variant-numeric:tabular-nums;font-weight:750;font-size:var(--fs-lg)}
.pf-amp-rotulo{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pf-nivel-ok .pf-amp-rotulo{color:var(--success)}
.pf-nivel-atencao .pf-amp-rotulo{color:var(--warning)}
.pf-nivel-alerta .pf-amp-rotulo{color:var(--danger)}
.pf-amp p{font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--sp-2);line-height:1.5}

/* ── Blocos de leitura por fator ──────────────────────────────────────────────────── */
.pf-fatores{display:grid;grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));gap:var(--sp-3)}
.pf-fator-card{border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);background:var(--surface)}
.pf-fator-card h4{margin:0;font-size:var(--fs-base)}
.pf-fator-card .pf-nec{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:var(--sp-2)}
.pf-marcas{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 var(--sp-2)}
.pf-marcas li{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.04em;padding:.1rem .45rem;border-radius:4px;border:1px solid currentColor}
.pf-fator-card .pf-talentos{font-size:var(--fs-sm);line-height:1.55}
.pf-fator-card h5{margin:var(--sp-3) 0 .3rem;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.pf-fator-card ul.pf-atencao{margin:0;padding-left:1.1rem;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5}
.pf-fator-card ul.pf-atencao li{margin-bottom:.2rem}

/* ── Valores ──────────────────────────────────────────────────────────────────────── */
.pf-valor-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:var(--sp-3);margin-top:var(--sp-4)}
.pf-valor-card{border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-3);background:var(--surface)}
.pf-valor-card.pf-signif{border-color:var(--primary);background:var(--info-bg)}
.pf-valor-card h4{margin:0 0 .1rem;font-size:var(--fs-base)}
.pf-valor-card .pf-faixa-tag{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.pf-valor-card dl{margin:var(--sp-2) 0 0;display:grid;gap:.35rem}
.pf-valor-card dt{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.pf-valor-card dd{margin:0;font-size:var(--fs-sm);line-height:1.5}

/* ── Lista da equipe ──────────────────────────────────────────────────────────────── */
.pf-lista{width:100%;border-collapse:collapse}
.pf-lista th{text-align:left;font-size:var(--fs-2xs);letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);padding:.5rem .6rem;border-bottom:1px solid var(--border)}
.pf-lista td{padding:.6rem;border-bottom:1px solid var(--border);vertical-align:middle}
.pf-lista tr:last-child td{border-bottom:0}
.pf-letras{font-weight:750;letter-spacing:.1em;font-size:var(--fs-base)}
.pf-mini{display:flex;gap:2px;align-items:flex-end;height:1.6rem}
.pf-mini i{width:6px;border-radius:2px;display:block}
.pf-pill{display:inline-block;font-size:var(--fs-2xs);font-weight:750;letter-spacing:.04em;padding:.15rem .5rem;border-radius:999px}
.pf-pill-ok{background:var(--success-bg);color:var(--success)}
.pf-pill-atencao{background:var(--warning-bg);color:var(--warning)}
.pf-pill-alerta{background:var(--danger-bg);color:var(--danger)}
.pf-pill-neutro{background:var(--bg);color:var(--text-muted)}

/* ── Questionário ─────────────────────────────────────────────────────────────────── */
.pf-progresso{height:6px;border-radius:3px;background:var(--border);overflow:hidden;margin:var(--sp-3) 0}
.pf-progresso i{display:block;height:100%;background:var(--primary);border-radius:3px}
.pf-bloco{border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3);background:var(--surface)}
.pf-bloco > legend{font-size:var(--fs-2xs);font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:0 .3rem}
.pf-opcoes{display:grid;gap:.35rem;margin-top:var(--sp-2)}
.pf-opcao{display:grid;grid-template-columns:3.2rem 3.2rem 1fr;align-items:center;gap:var(--sp-2);padding:.35rem .3rem;border-radius:8px}
.pf-opcao:hover{background:var(--bg)}
.pf-opcao span.pf-texto{font-size:var(--fs-sm);line-height:1.45}
.pf-cab-opcoes{display:grid;grid-template-columns:3.2rem 3.2rem 1fr;gap:var(--sp-2);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding:0 .3rem}
.pf-cab-opcoes span{text-align:center}
.pf-cab-opcoes span:last-child{text-align:left}
/* Ordenação de um grupo: a palavra e a posição dela. Select nativo em vez de arrastar —
   funciona sem JavaScript, funciona com leitor de tela e funciona no celular com uma mão,
   que é onde metade das pessoas vai responder. */
.pf-ordenar{display:grid;gap:.4rem;margin-top:var(--sp-2)}
.pf-ordem-linha{display:grid;grid-template-columns:1fr 13rem;align-items:center;gap:var(--sp-2);
  padding:.3rem;border-radius:8px}
.pf-ordem-linha:hover{background:var(--bg)}
.pf-ordem-palavra{font-size:var(--fs-md);font-weight:600;margin:0}
.pf-ordem-linha > div:first-child{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
/* O "?" de cada palavra. Alvo de 24px porque fica ao lado de um select de 44px e não pode
   roubar o toque dele; o texto aberto ocupa a linha inteira, abaixo. */
.pf-ajuda{display:inline}
.pf-ajuda > summary{list-style:none;cursor:pointer;display:inline-grid;place-items:center;
  width:24px;height:24px;border-radius:999px;border:1px solid var(--border-forte);
  font-size:var(--fs-2xs);font-weight:750;color:var(--text-muted)}
.pf-ajuda > summary::-webkit-details-marker{display:none}
.pf-ajuda > summary:hover{background:var(--bg);color:var(--text)}
.pf-ajuda[open] > summary{background:var(--primary);border-color:var(--primary);color:#FFFFFF}
.pf-ajuda > p{flex-basis:100%;margin:.3rem 0 0;font-size:var(--fs-sm);color:var(--text-muted)}
.pf-ordem-select{min-height:44px}
@media (max-width:640px){
  .pf-ordem-linha{grid-template-columns:1fr;gap:.15rem}
  .pf-ordem-palavra{margin-bottom:.2rem}
}
.pf-par{display:grid;grid-template-columns:1fr;gap:.4rem;margin-top:var(--sp-2)}
.pf-par label{display:flex;gap:var(--sp-2);align-items:flex-start;padding:.5rem .6rem;border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:var(--fs-sm);line-height:1.45}
.pf-par label:hover{background:var(--bg)}
.pf-par input:checked + span{font-weight:700}
.pf-escolha4{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.4rem;margin-top:var(--sp-2)}
.pf-escolha4 label{display:flex;gap:.5rem;align-items:center;padding:.5rem .6rem;border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:var(--fs-sm)}
.pf-escolha4 label:hover{background:var(--bg)}

/* ── Aderência e matriz ───────────────────────────────────────────────────────────── */
.pf-aderencia{display:flex;align-items:center;gap:var(--sp-3)}
.pf-nota-grande{font-size:var(--fs-2xl);font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.pf-desvios{margin:var(--sp-2) 0 0;padding-left:1.1rem;font-size:var(--fs-sm);color:var(--text-muted)}
.pf-matriz{display:grid;grid-template-columns:auto 1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:var(--sp-3) 0}
.pf-matriz > *{background:var(--surface);padding:var(--sp-3)}
.pf-matriz .pf-eixo-rot{background:var(--bg);display:grid;place-items:center;text-align:center;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.pf-matriz .pf-eixo-v{writing-mode:vertical-rl;transform:rotate(180deg);grid-row:2 / span 2;padding:.5rem}
.pf-quad strong{display:block;font-size:var(--fs-2xs);font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.3rem}
.pf-quad p{font-size:var(--fs-sm);line-height:1.5;margin:0}
.pf-quad.pf-aqui{outline:2px solid var(--primary);outline-offset:-2px}
.pf-quad.pf-aqui strong{color:var(--primary)}
@media (max-width:44rem){
  .pf-matriz{grid-template-columns:1fr}
  .pf-matriz .pf-eixo-rot{display:none}
}

/* ── Faixas do cargo ──────────────────────────────────────────────────────────────── */
.pf-faixas{display:grid;gap:var(--sp-2)}
.pf-faixa-linha{display:grid;grid-template-columns:8.5rem 1fr;align-items:center;gap:var(--sp-3)}
.pf-faixa-barra{position:relative;height:14px;border-radius:7px;background:#EDEFF3}
.pf-faixa-alvo{position:absolute;top:0;height:100%;border-radius:7px;opacity:.35}
.pf-faixa-pin{position:absolute;top:-3px;width:4px;height:20px;border-radius:2px;background:var(--text)}

/* ── Impressão ────────────────────────────────────────────────────────────────────── */
@media print{
  .pf-graficos,.pf-fatores,.pf-amplitudes,.pf-valor-cards{break-inside:avoid}
  .pf-quadro,.pf-fator-card,.pf-amp,.pf-valor-card{break-inside:avoid;box-shadow:none}
  .pf-radar-caixa{max-width:22rem}
  .pf-lista td,.pf-lista th{padding:.3rem .4rem}
  /* Fundo de faixa e de card some na impressão da maioria das impressoras; a borda
     esquerda colorida é o que sobra, então ela precisa continuar existindo. */
  .pf-valor-card.pf-signif{background:none;border-left:3px solid var(--primary)}
  /* Mesma razão, e aqui seria pior: a pill e o disco têm TEXTO BRANCO sobre a cor, então
     sem o fundo eles sumiriam por inteiro. A cor do fator viaja em `--pf-cor` justamente
     para virar cor de texto e de borda no papel. */
  .pf-quadro-pill,.pf-quadro-perfil{background:none !important;color:var(--pf-cor,var(--text)) !important;
    border:1.5px solid var(--pf-cor,var(--border))}
}

/* ── Perfil: octógono de talentos e linha do tempo (2026-08-31) ────────────────────── */

/* Fatia ocupada tem fundo; fatia vazia fica só com o contorno tracejado. A ausência precisa
   ser visível SEM depender de ler o rótulo — é ela o achado do desenho. */
.pf-fatia{fill:var(--info-bg);stroke:#FFFFFF;stroke-width:1.5}
.pf-fatia-vazia{fill:none;stroke:var(--border);stroke-dasharray:4 4}
.pf-oct-rotulo{font-size:var(--fs-2xs);font-weight:700;fill:var(--text)}
.pf-oct-qtd{font-size:var(--fs-2xs);fill:var(--text-muted)}
.pf-oct-vazia{fill:var(--text-muted);opacity:.65}
.pf-oct-ponto{fill:var(--primary);stroke:#FFFFFF;stroke-width:2}
.pf-oct-inicial{font-size:var(--fs-2xs);font-weight:750;fill:#FFFFFF;pointer-events:none}
.pf-octogono-caixa{max-width:32rem;margin:0 auto}

.pf-linhas{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:var(--sp-3)}
.pf-linha-card{border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius);padding:var(--sp-3);background:var(--surface)}
.pf-linha-topo{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.pf-linha-nome{font-weight:750}
.pf-linha-delta{font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-sm);color:var(--text-muted)}

/* Média do grupo: barra simples, sem o trilho do gráfico individual — aqui o que interessa é
   a comparação entre os quatro, não a posição de cada um na régua. */
.pf-dna-media{display:grid;gap:var(--sp-2)}
.pf-dna-linha{display:grid;grid-template-columns:8.5rem 1fr 2.5rem;align-items:center;gap:var(--sp-3)}
.pf-dna-barra{height:16px;border-radius:8px;background:#EDEFF3;overflow:hidden}
.pf-dna-barra i{display:block;height:100%;border-radius:8px}
.pf-dna-num{font-variant-numeric:tabular-nums;font-weight:750;text-align:right}

@media print{
  .pf-octogono-caixa{max-width:22rem}
  .pf-linhas,.pf-linha-card{break-inside:avoid}
}

/* Endereço público para divulgar (canal de denúncias). O campo é `readonly` em vez de texto
   solto porque endereço se copia, não se transcreve: um caractere errado num cartaz vira canal
   que não abre — e ninguém avisa que não conseguiu denunciar. Fonte monoespaçada pelo mesmo
   motivo: `l`, `1` e `I` precisam se distinguir de relance. */
.link-publico-endereco{margin-top:0.9rem}
.link-publico-endereco label{display:block;font-size:var(--fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin-bottom:0.3rem}
.link-publico-endereco input{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--fs-sm);background:var(--bg)}
.link-publico-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin-top:0.6rem}
.link-publico-aviso{font-size:var(--fs-xs);color:var(--success)}
.link-publico code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-xs);
  word-break:break-all}  /* endereço inteiro no celular, sem empurrar a página para o lado */