/* ══════════════════════════════════════════════════════════════
   PERITO / FB CONSULT · UPLIFT REFINO v1.0 · 03/08/2026
   ──────────────────────────────────────────────────────────────
   Camada FINAL da cascata. Carregar DEPOIS de todos os outros CSS:

     <link rel="stylesheet" href="css/uplift-refino.css?v=20260803a">

   POR QUE ELA EXISTE
   Os tokens v4.2 definem uma escala boa (10 fs, 4 fw, sombras,
   raios) — mas os módulos foram divergindo dela: 25 tamanhos de
   fonte em uso (metade com meio-pixel), duas famílias de cinza
   concorrentes (#6b7280/#9ca3af vs #98a2b3/#e6e9e8), 7 raios e
   cor de marca chumbada em componente. O resultado é a colcha de
   retalhos: cada tela com uma voz.

   O QUE ELA FAZ
   Redeclara APENAS os primitivos compartilhados — a superfície que
   toda tela usa — e os encaixa na escala oficial. Como carrega por
   último, vence a cascata sem editar nenhum módulo. 100% aditiva,
   zero risco de regressão estrutural, reversível removendo o link.

   O QUE ELA NÃO FAZ
   Não mata cor chumbada DENTRO dos módulos (149× #381d54, 98×
   #58c8dc). Isso é a rodada 2: varredura módulo a módulo no repo
   atual, trocando hex por var(--primary)/var(--accent).

   PRINCÍPIOS (para tudo que vier depois)
   · Tipografia: SÓ a escala v4.1 (--fs-2xs..--fs-2xl). Sem meio
     pixel. Display (Barlow Condensed) só em título e número de
     KPI; Barlow no resto. Caps sempre com letter-spacing .06em.
   · Cor: marca via var(--primary/--accent/--gold). Cinza via
     var(--txt/--sub/--muted/--borda). Semântica via var(--crit/
     --warn/--ok/--info). Hex de marca em componente = bug.
   · Forma: raios --radius-sm(6)/--radius(10)/--radius-lg(14)/999.
     Elevação --shadow-xs em repouso, --shadow no hover. Nada além.
   · Movimento: .15s var(--ease-soft). Sem bounce, sem parallax.
   ══════════════════════════════════════════════════════════════ */

/* ── 0 · Correções de token (valem para o app inteiro) ───────── */
:root {
  /* --info era roxo fixo mesmo em cliente FB; segue a marca do dono.
     (o shell já corrige sob data-brand=custom; isto cobre o default) */
  --info: var(--primary);
  --info-soft: var(--primary-soft);
  /* neutro único — encerra a disputa entre as duas famílias de cinza */
  --ink:       var(--txt);
  --ink-soft:  var(--sub);
  --ink-faint: var(--muted);
}

/* ── 1 · Base ────────────────────────────────────────────────── */
body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Scrollbar discreta, uma só em todo o app */
* { scrollbar-width: thin; scrollbar-color: var(--borda) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--borda); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }
*::-webkit-scrollbar-track { background: transparent; }

/* Números alinham em qualquer tabela */
td.num, th.num, .num { font-variant-numeric: tabular-nums; }

a { color: var(--accent-dark); }

/* ── 2 · Cabeçalho de tela (dre-head é o padrão de todos) ────── */
.dre-eyebrow, .sv-eyebrow, .pc-label, .drawer__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sub);
}
.dre-h1, .sv-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: .01em;
  color: var(--txt);
}
.dre-h1sub, .sv-h1sub {
  font-size: var(--fs-base);
  color: var(--sub);
  font-weight: var(--fw-regular);
}

/* ── 3 · Painel (o contêiner universal de conteúdo) ──────────── */
.painel, .sv-root .painel {
  background: var(--card);
  border: 1px solid var(--borda-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow .15s var(--ease-soft);
}
.painel__title h4 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: .01em;
  color: var(--txt);
}
.painel__title .sub, .painel__title p.sub {
  font-size: var(--fs-sm);
  color: var(--sub);
  font-weight: var(--fw-regular);
}

/* ── 4 · Portal-card (o KPI card de todo o sistema) ──────────── */
.portal-card {
  background: var(--card);
  border: 1px solid var(--borda-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: box-shadow .15s var(--ease-soft), transform .15s var(--ease-soft);
}
.portal-card:hover { box-shadow: var(--shadow); transform: none; }
.portal-card .pc-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  color: var(--sub);
}
.portal-card .pc-valor {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--txt);
}
.portal-card .pc-desc {
  font-size: var(--fs-sm);
  color: var(--sub);
  line-height: var(--lh-normal);
}
/* variantes marcam por FILETE, não por tinta no card inteiro */
.portal-card.crit  { border-left: 3px solid var(--crit); }
.portal-card.alert { border-left: 3px solid var(--crit); }
.portal-card.warn  { border-left: 3px solid var(--warn); }
.portal-card.ok    { border-left: 3px solid var(--ok); }
.portal-card.info  { border-left: 3px solid var(--primary); }
.portal-card.crit .pc-valor, .portal-card.alert .pc-valor { color: var(--crit); }
.portal-card.warn .pc-valor { color: var(--warn); }
.portal-card.ok .pc-valor   { color: var(--ok); }

/* ── 5 · Tabela universal (dfc-vtab, usada por todos os módulos) ─ */
.sv-root .dfc-vtab thead th, .dfc-vtab thead th {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px 10px;
  border-bottom: 1px solid var(--borda);
}
.sv-root .dfc-vtab td, .dfc-vtab td {
  font-size: var(--fs-base);
  padding: 10px;
  border-bottom: 1px solid var(--borda-soft);
  color: var(--txt);
}
.sv-root .dfc-vtab tbody tr, .dfc-vtab tbody tr {
  transition: background .12s var(--ease-soft);
}
.sv-root .dfc-vtab tbody tr:hover, .dfc-vtab tbody tr:hover {
  background: var(--bg-soft);
}
.sv-root .dfc-vtab tfoot td, .dfc-vtab tfoot td {
  font-weight: var(--fw-semibold);
  border-top: 2px solid var(--borda);
  border-bottom: 0;
  background: var(--bg-soft);
}

/* ── 6 · Formulários (input/select/botão falando a mesma língua) ─ */
.sv-root input[type="date"], .sv-root input[type="search"], .sv-root input[type="number"],
.sv-root input[type="text"], .sv-root select,
.cxa-filtro input, .cxa-filtro select {
  height: 36px;
  padding: 0 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--txt);
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  transition: border-color .15s var(--ease-soft), box-shadow .15s var(--ease-soft);
}
.sv-root input:focus, .sv-root select:focus,
.cxa-filtro input:focus, .cxa-filtro select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dfc-btn-primary {
  height: 36px;
  padding: 0 16px;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: #fff;
  background: var(--primary);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s var(--ease-soft), box-shadow .15s var(--ease-soft);
}
.dfc-btn-primary:hover { background: var(--primary-dark); box-shadow: var(--shadow-xs); }
.dfc-btn-primary:disabled { opacity: .55; cursor: default; }

/* rótulo de filtro padronizado (o padrão do módulo caixa vira o da casa) */
.cxa-filtro > span {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sub);
}

/* ── 7 · Drawer ──────────────────────────────────────────────── */
.drawer__panel, .fb-drawer__panel {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.drawer__titulo, .drawer__head h2, .drawer__head h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: .01em;
}

/* ── 8 · Estados vazios e notas ──────────────────────────────── */
.sv-chart-vazio {
  font-size: var(--fs-base);
  color: var(--sub);
  background: var(--bg-soft);
  border: 1px dashed var(--borda);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  line-height: var(--lh-relaxed);
}
.cxa-nota {
  font-size: var(--fs-sm);
  color: var(--sub);
  background: var(--bg-soft);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
}

/* ── 9 · Badges e pills (uma anatomia só) ────────────────────── */
.cxa-badge, .meta-pill, .proj-card__badge-soon {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  border-radius: 999px;
  padding: 2px 9px;
}

/* ── 10 · Eixos de gráfico (SVG inline de qualquer módulo) ───── */
.chart-axis, .sv-root .chart-axis {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  fill: var(--muted);
}