/* ── Painel de Vagas (.vp-) — panorama do recrutamento (Visio) + prioridade dos gestores ─────────────
   Só tokens --ff-* do Design System (app.css). Prefixo .vp- porque .ap- já é do Admin e dos Arquivos de apoio. */
.vp-top { display: flex; align-items: center; gap: var(--ff-space-6); flex-wrap: wrap; margin-bottom: var(--ff-space-5); }
.vp-h1 { font-size: var(--ff-text-2xl); font-weight: var(--ff-weight-bold); color: var(--ff-green-dark); margin: 0; line-height: var(--ff-leading-tight); }
.vp-sub { font-size: var(--ff-text-md); color: var(--ff-text-muted); margin-top: 2px; }
.vp-sp { flex: 1; }
.vp-hint { font-size: var(--ff-text-md); color: var(--ff-text-muted); }
.vp-link { font: inherit; font-size: var(--ff-text-md); font-weight: var(--ff-weight-semibold); color: var(--ff-link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.vp-link:hover { text-decoration: underline; }
.vp-alerta { background: var(--ff-red-light); color: var(--ff-red); border-radius: var(--ff-radius-md); padding: var(--ff-space-5) var(--ff-space-6); font-size: var(--ff-text-base); margin-bottom: var(--ff-space-5); }
.vp-vazio { padding: 40px var(--ff-space-6); text-align: center; color: var(--ff-text-muted); background: var(--ff-surface); border: 1px dashed var(--ff-border); border-radius: var(--ff-radius-md); }

/* KPIs: reaproveita .resumo-cards/.metrica do portal; só ajusta o miolo */
.vp-kpis { margin-bottom: var(--ff-space-5); }
.vp-kpi-l { font-size: var(--ff-text-xs); font-weight: var(--ff-weight-semibold); text-transform: uppercase; letter-spacing: var(--ff-tracking-label); color: var(--ff-text-muted); }
.vp-kpi-v { font-size: var(--ff-text-4xl); font-weight: var(--ff-weight-extra); color: var(--ff-text); line-height: 1.1; margin: var(--ff-space-1) 0; font-variant-numeric: tabular-nums; }
.vp-kpi-s { font-size: var(--ff-text-sm); color: var(--ff-text-muted); }

/* Funil */
.vp-funil-card { margin-bottom: var(--ff-space-5); }
.vp-funil-h { display: flex; align-items: baseline; gap: var(--ff-space-4); flex-wrap: wrap; margin-bottom: var(--ff-space-4); }
.vp-funil-h h2 { margin: 0; font-size: var(--ff-text-lg); }
.vp-funil { display: flex; align-items: flex-end; gap: var(--ff-space-3); }
.vp-fase { flex: 1; min-width: 0; }
.vp-fase-n { font-size: var(--ff-text-xl); font-weight: var(--ff-weight-extra); color: var(--ff-text); font-variant-numeric: tabular-nums; }
.vp-fase-bar { height: 10px; background: var(--ff-surface-sunken); border-radius: var(--ff-radius-pill); overflow: hidden; margin: var(--ff-space-1) 0; }
.vp-fase-bar i { display: block; height: 100%; background: var(--ff-green); border-radius: var(--ff-radius-pill); min-width: 2px; transition: width var(--ff-transition-slow); }
.vp-fase-l { font-size: var(--ff-text-sm); color: var(--ff-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-fase-seta { color: var(--ff-border); font-size: var(--ff-text-2xl); padding-bottom: 18px; }
.vp-funil-v { gap: var(--ff-space-5); }
.vp-saidas, .vp-origens { display: flex; flex-wrap: wrap; gap: var(--ff-space-2); margin-top: var(--ff-space-4); }

/* Badges */
.vp-badge { display: inline-block; font-size: var(--ff-text-xs); font-weight: var(--ff-weight-medium); padding: 2px 9px; border-radius: var(--ff-radius-pill); background: var(--ff-surface-sunken); color: var(--ff-text-muted); white-space: nowrap; }
.vp-badge b { color: var(--ff-text); }
.vp-badge-ok { background: var(--ff-green-light); color: var(--ff-green-dark); }
.vp-badge-enc { background: var(--ff-blue-bg); color: var(--ff-blue-fg); }
.vp-badge-aviso { background: var(--ff-warn-bg); color: var(--ff-warn-fg); }
.vp-badge-off { background: var(--ff-red-light); color: var(--ff-red); }
.vp-badge-muted { background: var(--ff-surface-sunken); color: var(--ff-text-muted); }

/* Filtros */
.vp-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ff-space-3); margin-bottom: var(--ff-space-4); }
.vp-busca { font: inherit; font-size: var(--ff-text-base); padding: 8px 12px; border: var(--ff-border-width-input) solid var(--ff-border); border-radius: var(--ff-radius); background: var(--ff-surface); min-width: 220px; flex: 1 1 240px; }
.vp-busca:focus { outline: none; border-color: var(--ff-focus-ring); }
.vp-filtros .select-sm { max-width: 220px; }
.vp-check { display: flex; align-items: center; gap: var(--ff-space-2); font-size: var(--ff-text-md); color: var(--ff-text); cursor: pointer; }
.vp-n { font-size: var(--ff-text-sm); color: var(--ff-text-muted); margin-bottom: var(--ff-space-2); font-variant-numeric: tabular-nums; }

/* Tabela (rola na horizontal no celular) */
.vp-tabela-wrap { overflow-x: auto; background: var(--ff-surface); border: 1px solid var(--ff-border); border-radius: var(--ff-radius-md); }
.vp-tabela { width: 100%; border-collapse: collapse; font-size: var(--ff-text-md); min-width: 860px; }
.vp-tabela th { text-align: left; font-size: var(--ff-text-xs); font-weight: var(--ff-weight-semibold); text-transform: uppercase; letter-spacing: var(--ff-tracking-label); color: var(--ff-text-muted); padding: 10px 12px; border-bottom: 1px solid var(--ff-border); background: var(--ff-surface-sunken); white-space: nowrap; }
.vp-tabela td { padding: 10px 12px; border-bottom: 1px solid var(--ff-border); vertical-align: middle; }
.vp-tabela tr:last-child td { border-bottom: 0; }
.vp-row { cursor: pointer; transition: background var(--ff-transition-fast); }
.vp-row:hover { background: var(--ff-surface-sunken); }
.vp-row.prio { background: #fffaf0; } .vp-row.prio:hover { background: #fff3dc; }
.vp-row.fechada .vp-tit, .vp-row.fechada .vp-meta { color: var(--ff-text-muted); }
.vp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-num .vp-meta { white-space: nowrap; }
.vp-zero { color: var(--ff-red); font-weight: var(--ff-weight-bold); }
.vp-tit { font-weight: var(--ff-weight-bold); color: var(--ff-text); }
.vp-meta { font-size: var(--ff-text-sm); color: var(--ff-text-muted); margin-top: 2px; }
.vp-c-prio { width: 36px; text-align: center; padding-left: 8px !important; padding-right: 4px !important; }
.vp-c-funil { min-width: 200px; }
.vp-c-acao { text-align: right; white-space: nowrap; }
.vp-star { font: inherit; font-size: 20px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--ff-border); padding: 4px; border-radius: var(--ff-radius-round); transition: color var(--ff-transition-fast), transform var(--ff-transition-fast); }
.vp-star:hover { color: var(--ff-amber-bar); transform: scale(1.15); }
.vp-star.on { color: var(--ff-amber-bar); }
.vp-star:disabled { cursor: default; transform: none; }
body.somente-leitura .vp-star { pointer-events: none; }

/* Mini funil da linha: um segmento por etapa, largura proporcional */
.vp-mini { display: flex; height: 18px; border-radius: var(--ff-radius-sm); overflow: hidden; background: var(--ff-surface-sunken); min-width: 160px; }
.vp-mini span { display: flex; align-items: center; justify-content: center; min-width: 18px; font-size: var(--ff-text-2xs); color: #fff; }
.vp-mini span b { font-weight: var(--ff-weight-bold); }
.vp-mini-vazio { align-items: center; justify-content: center; font-size: var(--ff-text-xs); color: var(--ff-text-muted); }
.vp-seg-triagem { background: #9fc9b3; } .vp-seg-entrevista_rh { background: #5aa87f; } .vp-seg-teste_comportamental { background: #2e8a5a; } .vp-seg-admitidos { background: var(--ff-green-dark); }

/* Painel lateral de detalhe */
.vp-drawer-bg { position: fixed; inset: 0; background: rgba(20, 30, 25, .35); z-index: 60; display: flex; justify-content: flex-end; }
.vp-drawer { width: min(560px, 100%); height: 100%; overflow-y: auto; background: var(--ff-surface); box-shadow: var(--ff-shadow-panel); padding: var(--ff-space-7) var(--ff-space-8) var(--ff-space-10); }
.vp-dr-h { display: flex; align-items: flex-start; gap: var(--ff-space-4); margin-bottom: var(--ff-space-5); }
.vp-dr-tit { font-size: var(--ff-text-xl); font-weight: var(--ff-weight-bold); color: var(--ff-green-dark); }
.vp-x { margin-left: auto; font: inherit; font-size: 24px; line-height: 1; background: none; border: 0; color: var(--ff-text-muted); cursor: pointer; padding: 2px 8px; border-radius: var(--ff-radius); }
.vp-x:hover { background: var(--ff-surface-sunken); }
.vp-dr-prio { display: flex; align-items: center; gap: var(--ff-space-4); flex-wrap: wrap; padding: var(--ff-space-5) var(--ff-space-6); border-radius: var(--ff-radius-md); background: var(--ff-surface-sunken); margin-bottom: var(--ff-space-6); font-size: var(--ff-text-base); }
.vp-dr-prio.on { background: var(--ff-warn-bg); color: var(--ff-warn-fg); }
.vp-dr-prio > div { flex: 1; min-width: 200px; }
.vp-dr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ff-space-4) var(--ff-space-6); font-size: var(--ff-text-base); margin-bottom: var(--ff-space-6); }
.vp-dr-full { grid-column: 1 / -1; }
.vp-lbl { display: block; font-size: var(--ff-text-xs); font-weight: var(--ff-weight-semibold); text-transform: uppercase; letter-spacing: var(--ff-tracking-label); color: var(--ff-text-muted); margin-bottom: 2px; }
.vp-dr-sub { font-size: var(--ff-text-lg); font-weight: var(--ff-weight-bold); margin: var(--ff-space-6) 0 var(--ff-space-4); color: var(--ff-text); }
.vp-dr-sub .vp-meta { display: inline; margin-left: var(--ff-space-2); font-weight: var(--ff-weight-normal); }
.vp-dr-acts { display: flex; align-items: center; gap: var(--ff-space-6); flex-wrap: wrap; margin-top: var(--ff-space-6); }
.vp-hist { margin: var(--ff-space-4) 0 0; padding-left: 18px; font-size: var(--ff-text-md); line-height: 1.7; color: var(--ff-text); }
.vp-config { max-width: 640px; }
.vp-config code { font-family: var(--ff-font-mono); font-size: var(--ff-text-sm); background: var(--ff-surface-sunken); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 900px) {
  .vp-funil { flex-wrap: wrap; }
  .vp-fase { flex: 1 1 40%; }
  .vp-fase-seta { display: none; }
  .vp-dr-grid { grid-template-columns: 1fr; }
  .vp-drawer { padding: var(--ff-space-6) var(--ff-space-6) var(--ff-space-10); }
  .vp-filtros .select-sm { max-width: none; flex: 1 1 45%; }
  .vp-top .btn-secondary { order: 3; }
}