/* Pages / styles / pages.css — só o estado vazio compartilhado por todas as páginas desta etapa */

/* Prompt 14, seções 23/45: densidade "corporativa confortável" — margem
   abaixo do cabeçalho reduzida (era --space-8/32px); Pessoas (seção 45)
   é a página mais sensível a espaço vazio acima da tabela, mas o ajuste
   vale pras 4 (seção 23 não é específica de uma página). */
.page-header{margin-bottom:var(--space-6);max-width:64ch;}
.page-eyebrow{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  display:block;margin-bottom:var(--space-4);
}
.page-title-row{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-3);}
.page-icon{
  width:38px;height:38px;border-radius:var(--radius-md);background:var(--accent-subtle);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.page-title-row h1{font-size:25px;font-weight:700;letter-spacing:-.01em;color:var(--text-primary);}
.page-tagline{font-size:14px;color:var(--text-secondary);}

.page-canvas{
  border:1px dashed var(--border-strong);border-radius:var(--radius-lg);
  min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);
  padding:var(--space-9);text-align:center;background:var(--surface-sunken);
}
.page-canvas-tag{
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);
  border:1px solid var(--border-strong);border-radius:var(--radius-full);padding:3px 12px;
}
.page-canvas p{max-width:44ch;font-size:13px;color:var(--text-tertiary);}

/* ---------- metric-card — Prompt 14, seções 30-32 ----------
   Tratamento de ícone + identidade cromática compartilhado pelos "cartões
   compactos" das 4 páginas (`.vg-vinculo-card`, `.vg-vagas-secundario`,
   `.sc-kpi-card`) — os três já tinham a MESMA estrutura visual (rótulo +
   valor sobre um card com borda), então em vez de repetir a mesma regra
   nova 3x em 3 arquivos .css diferentes, ela mora uma vez aqui e cada
   página só ACRESCENTA esta classe (`class="vg-vinculo-card metric-card"`)
   — as classes específicas continuam controlando grid/seleção/tamanho,
   nada nelas muda. `--metric-tone` é sempre uma expressão de cor já
   pronta (normalmente `seriesColor(i)`, o mesmo usado nos gráficos —
   nunca uma paleta nova) setada por instância via JS; sem ela, cai em
   `transparent`/`var(--accent)` e o card fica exatamente como antes. */
.metric-card{ position:relative; overflow:hidden; }
.metric-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--metric-tone, transparent);
}
.metric-icon-chip{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:26px; height:26px; border-radius:var(--radius-sm); margin-bottom:var(--space-2);
  background:color-mix(in oklch, var(--metric-tone, var(--accent)) 16%, var(--surface));
  color:var(--metric-tone, var(--accent));
}
.metric-icon-chip svg{ width:14px; height:14px; }