/* Pages / gestao-pessoas / visao-geral.css — primeira página real da plataforma. */

.vg-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; }
.vg-header-meta{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-tertiary); white-space:nowrap; padding-top:2px; }
.vg-header-meta svg{ width:13px; height:13px; }
.vg-last-sync.is-loading{ color:var(--text-disabled); }

.vg-filterbar{ margin-bottom:var(--space-7); }

/* Prompt 14, seção 23: densidade — era --space-10 (40px) entre seções. */
.vg-section{ margin-bottom:var(--space-8); }
.vg-section-head-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); flex-wrap:wrap; }
.vg-section-title{ font-size:15px; font-weight:600; color:var(--text-primary); }
.vg-section-desc{ font-size:12.5px; color:var(--text-tertiary); margin-top:2px; }

/* ---------- Resumo executivo — Total de Profissionais + Valor total lado a lado no topo ---------- */
/* Card alargado (era minmax(240,320)) e fonte do valor reduzida (era 36px):
   "R$ 28.548.848,46" não cabia numa linha só dentro do card antigo e
   quebrava/estourava (bug reportado ao vivo pelo usuário) — 320px de
   card com 36px de fonte não sobra margem nenhuma pra um valor de 8
   dígitos formatado em moeda. */
.vg-primary-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 380px)); gap:var(--space-6); margin-bottom:var(--space-6); }
/* Prompt 14, seção 43: reduzido de 150px — o chip de ícone (seção 30) já ocupa parte do espaço que antes ficava vazio. */
.vg-kpi-primary{ min-height:128px; }
.vg-kpi-primary .kpi-value{ font-size:28px; line-height:1.15; white-space:nowrap; }
.vg-kpi-primary .chart-title{ font-size:13px; }

/* ---------- Cards por categoria de vínculo (hierarquia "secundária", seção 30) ---------- */
/* São sempre 10 categorias (`CARD_ORDER`, ver visao-geral.js) — `auto-fill`
   media a largura disponível e decidia sozinho quantas cabiam por linha,
   sobrando 1 card orfão numa segunda linha quase vazia em telas largas.
   5 colunas fixas = sempre 2 linhas de 5, looking distribuído de verdade.
   `minmax(0,1fr)` (não só `1fr`) evita o overflow clássico de grid: sem o
   `0`, o mínimo implícito de cada coluna é o conteúdo mais largo, que pode
   estourar a largura disponível em vez de encolher. */
.vg-vinculo-cards{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--space-4); margin-bottom:var(--space-6); }
.vg-vinculo-card{
  display:flex; flex-direction:column; gap:2px; text-align:left; padding:var(--space-4);
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface);
  font-family:var(--font-ui); transition:border-color var(--dur-fast), background var(--dur-fast);
}
button.vg-vinculo-card{ cursor:pointer; }
button.vg-vinculo-card:hover{ border-color:var(--border-strong); background:var(--surface-sunken); }
button.vg-vinculo-card:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.vg-vinculo-card.is-selected{ border-color:var(--accent); background:var(--accent-subtle); }
div.vg-vinculo-card[aria-disabled]{ opacity:.75; }
.vg-vinculo-card-label{ font-size:12px; color:var(--text-secondary); }
.vg-vinculo-card-value{ font-size:22px; font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.vg-vinculo-card-percent{ font-size:11.5px; color:var(--text-tertiary); font-family:var(--font-mono); }
.vg-vinculo-card.is-selected .vg-vinculo-card-percent{ color:var(--accent); }

/* ---------- Indicação por referência ---------- */
.vg-topn{ display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; }
.vg-topn button{
  height:30px; padding:0 var(--space-4); font-size:12px; color:var(--text-secondary); background:var(--surface);
  border:none; border-right:1px solid var(--border-strong); cursor:pointer; font-family:var(--font-ui);
}
.vg-topn button:last-child{ border-right:none; }
.vg-topn button:hover{ background:var(--surface-sunken); }
.vg-topn button.is-active{ background:var(--accent-subtle); color:var(--accent); font-weight:500; }

/* ---------- Ver todos ---------- */
.vg-ver-todos{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--accent); font-weight:500;
  text-decoration:none; white-space:nowrap;
}
.vg-ver-todos:hover{ text-decoration:underline; }
.vg-ver-todos svg{ width:14px; height:14px; }

/* ---------- Estado vazio / erro (nível de seção) ---------- */
.vg-empty, .vg-error{
  border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-7); text-align:center;
  background:var(--surface-sunken); display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
}
.vg-empty p, .vg-error p{ font-size:13px; color:var(--text-secondary); max-width:48ch; }
.vg-error{ border-color:var(--danger-border); }
.vg-error p.reason{ font-size:12px; color:var(--text-tertiary); }
.vg-retry{ font-size:12.5px; }

/* ---------- Duas seções lado a lado ----------
   Nenhuma das duas precisa de largura total (cada uma é só um ranking);
   lado a lado em telas largas ocupa melhor o espaço disponível. `1.3fr`
   pro ranking de Referência (rótulos de nome tendem a ser mais longos que
   os de partido) — mesma lógica de "cards não precisam ter mesma largura",
   sem forçar simetria onde a informação não pede. `.vg-two-col` (donut +
   ranking lado a lado) foi removida junto com os donuts — pedido do
   usuário — não tem mais nenhum consumidor. */
.vg-sections-row{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--space-6); align-items:start; margin-bottom:var(--space-8); }
.vg-section--in-row{ margin-bottom:0; }

@media (max-width: 1119px){
  .vg-sections-row{ grid-template-columns:1fr; }
}
@media (max-width: 719px){
  .vg-header{ flex-direction:column; align-items:flex-start; }
  .vg-primary-row{ grid-template-columns:1fr; }
  .vg-vinculo-cards{ grid-template-columns:repeat(2, 1fr); }
}