/* ==========================================================================
   Dash · Rio Design Barra · estilos compartilhados do dashboard
   Layout de referência adaptado ao design system da Dash:
   canvas #131313, cards #1C1C1C, hairline #313131, mint #3CFFD0 como acento
   (com parcimônia), flare #EC1A6A para negativo/alerta. Sem gradientes, sem
   sombras: cor é elevação, bordas de 1px, hover muda borda/título para mint.
   Mint só para sinal: nav ativa, melhor valor, delta positivo e filtro ativo
   (tabelas, rankings e kickers de apoio ficam em cinza/branco).
   Fontes (Google Fonts): Archivo Black (display), Space Grotesk (UI/corpo),
   JetBrains Mono (rótulos, sempre em caixa alta).
   Exceção deliberada: .header h1 usa Archivo Black a 40px (22px no celular), abaixo
   do mínimo de 60px do display no DS, para manter a paridade com o header do layout de referência.
   Ordem de carga na página: dash.css, period-filter.css, <style> da página,
   mobile.css (por último, sobrepõe o desktop).
   ========================================================================== */

:root {
  /* superfícies */
  --bg: #131313;
  --card: #1C1C1C;
  --card-alt: #232323;
  --card-alt-2: #2D2D2D;
  --border: #313131;
  --border-strong: #6B6B6B;

  /* texto */
  --text: #FFFFFF;
  --text-2: #E9E9E9;
  --text-muted: #949494;
  --text-dim: #6B6B6B;
  --dim: #6B6B6B;
  --text-inverse: #131313;

  /* acentos (nomes herdados do layout de referência) */
  --accent: #3CFFD0;        /* mint: ativo, kicker, série primária */
  --accent-deep: #309875;   /* mint profundo: bordas de destaque */
  --green: #3CFFD0;         /* positivo = mint */
  --red: #EC1A6A;           /* flare: negativo, alerta, pior */
  --yellow: #FFD53D;
  --blue: #4DA3FF;
  --purple: #B89BFF;        /* violeta suave */
  --violet: #5200FF;        /* ultravioleta */
  --pink: #FF7AB6;
  --orange: #FF6A2C;
  --neutral: #6B6B6B;

  /* fundos translúcidos para chips, badges e destaques */
  --accent-tint: rgba(60, 255, 208, .12);
  --red-tint: rgba(236, 26, 106, .14);
  --yellow-tint: rgba(255, 213, 61, .13);
  --blue-tint: rgba(77, 163, 255, .13);
  --purple-tint: rgba(184, 155, 255, .14);
  --violet-tint: rgba(82, 0, 255, .20);
  --neutral-tint: rgba(255, 255, 255, .06);

  /* tipografia */
  --font-display: 'Archivo Black', Impact, 'Helvetica Neue', sans-serif;
  --font-sans: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-serif: Georgia, 'Times New Roman', serif;

  /* raios */
  --r-card: 20px;
  --r-tile: 16px;
  --r-chip: 10px;
  --r-bar: 4px;
  --r-pill: 999px;

  --t-base: 150ms ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; transition: color var(--t-base); }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: var(--text-inverse); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg { display: block; }
strong, b { font-weight: 700; }
/* [hidden] vence display: flex/grid dos componentes (ex.: .callout com hidden) */
[hidden] { display: none !important; }

.container { max-width: 1400px; margin: 0 auto; padding: 24px; }

/* ---------- Header: título + subtítulo à esquerda, logo à direita ---------- */
.header {
  position: relative;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  margin-bottom: 32px; padding: 28px 28px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.header-left { min-width: 0; }
.header h1 {
  font-family: var(--font-display); font-size: 40px; font-weight: 400;
  color: var(--text); letter-spacing: .5px; text-transform: uppercase; line-height: 1;
}
.header h1 span {
  display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase;
  margin-top: 12px; line-height: 1.4;
}
.header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; flex: none; }
.brand-logo { height: 36px; width: auto; display: block; }
.header .date {
  font-family: var(--font-mono); color: var(--text-muted); font-size: 11px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
}

/* ---------- Sub-header: navegação à esquerda, filtro de período à direita ---------- */
.sub-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.page-nav { display: flex; gap: 4px; }
.page-nav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; margin-bottom: -1px;
  color: var(--text-muted);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--t-base), border-color var(--t-base);
}
.page-nav a:hover { color: var(--accent); }
.page-nav a.active { color: var(--text); border-bottom-color: var(--accent); }
.page-nav a.active svg { color: var(--accent); }
.page-nav svg { width: 16px; height: 16px; stroke-width: 2; flex: none; }

.filter-row { display: flex; align-items: center; gap: 10px; }
.sub-header .filter-row { padding-bottom: 8px; }

/* Tag de aviso (ex.: dados fictícios, mês parcial) */
.mock-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; margin-bottom: 16px;
  background: var(--yellow-tint); border: 1px solid rgba(255, 213, 61, .35);
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--yellow); letter-spacing: 1.5px; text-transform: uppercase;
}
.mock-tag svg { width: 14px; height: 14px; }

/* ---------- KPIs (6 por linha) ---------- */
.kpi-row {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px;
}
.kpi-row.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-row.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpi-row, .kpi-row.cols-4, .kpi-row.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kpi-row, .kpi-row.cols-4, .kpi-row.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi {
  background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 18px 16px; text-align: left; min-width: 0;
  transition: border-color var(--t-base);
}
.kpi:hover { border-color: var(--accent); }
.kpi-icon {
  width: 36px; height: 36px; border-radius: var(--r-chip);
  display: grid; place-items: center; margin-bottom: 12px;
  background: var(--neutral-tint); border: 1px solid var(--border); color: var(--text-2);
}
.kpi-icon svg { width: 20px; height: 20px; stroke-width: 1.75; }
.kpi-icon.mint, .kpi-icon.success, .kpi-icon.green { background: var(--accent-tint); border-color: var(--accent-deep); color: var(--accent); }
.kpi-icon.blue { background: var(--blue-tint); border-color: rgba(77, 163, 255, .45); color: var(--blue); }
.kpi-icon.purple { background: var(--purple-tint); border-color: rgba(184, 155, 255, .45); color: var(--purple); }
.kpi-icon.violet { background: var(--violet-tint); border-color: var(--violet); color: var(--purple); }
.kpi-icon.yellow, .kpi-icon.warning { background: var(--yellow-tint); border-color: rgba(255, 213, 61, .45); color: var(--yellow); }
.kpi-icon.red, .kpi-icon.flare, .kpi-icon.danger { background: var(--red-tint); border-color: rgba(236, 26, 106, .55); color: var(--red); }
.kpi .label {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--text-muted); font-weight: 500; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* abaixo de 1400px o rótulo quebra em até 2 linhas, com altura fixa de 2 linhas:
   nada some em reticências e os valores da mesma linha ficam alinhados (vale no celular) */
@media (max-width: 1400px) {
  .kpi .label {
    white-space: normal; text-overflow: clip;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    min-height: 2.8em;
  }
}
.kpi .value {
  font-family: var(--font-sans); font-size: 28px; font-weight: 700; letter-spacing: -.3px;
  line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text);
  margin: 6px 0 4px; white-space: nowrap;
}
.kpi .value.accent, .kpi .value.green, .kpi .value.mint { color: var(--accent); }
.kpi .value.red { color: var(--red); }
.kpi .value.yellow { color: var(--yellow); }
.kpi .value.blue { color: var(--blue); }
.kpi .value.purple { color: var(--purple); }
.kpi .value .cur {
  font-size: .55em; font-weight: 500; opacity: .7;
  margin-right: 3px; letter-spacing: 0; vertical-align: .18em;
}
.kpi .value .unit { font-size: .6em; font-weight: 500; opacity: .7; margin-left: 2px; letter-spacing: 0; }
.kpi .sub { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.kpi .sub strong { color: var(--text-2); font-weight: 700; }
.kpi .sub .delta-up { color: var(--green); font-weight: 700; }
.kpi .sub .delta-down { color: var(--red); font-weight: 700; }
.kpi .sub .delta-neutral { color: var(--text-muted); font-weight: 600; }
.delta-up { color: var(--green); font-weight: 700; }
.delta-down { color: var(--red); font-weight: 700; }
.delta-neutral { color: var(--text-muted); font-weight: 600; }

/* ---------- Títulos de seção (kicker mono em mint) ---------- */
.section-title {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent);
  margin: 32px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 2px; line-height: 1.3;
}
.section-title .muted { color: var(--text-muted); }
.section-title--row { flex-wrap: wrap; }
.section-title--row > .legend, .section-title--row > .right { margin-left: auto; }
.section-note {
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
  margin: -6px 0 16px;
}
.section-note strong { color: var(--text-2); }

/* legenda compacta para usar na linha do título */
.legend {
  display: flex; gap: 8px 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-muted);
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- Cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 24px; margin-bottom: 32px;
}
.table-card { overflow-x: auto; padding: 12px 20px 16px; }
.card-cap {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px;
}

/* Layouts de duas colunas (uma coluna abaixo de 1200px, junto com a fonte dos gráficos) */
.cost-grid, .two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; margin-top: 32px; margin-bottom: 32px; }
.cost-grid > div, .two-col > div { display: flex; flex-direction: column; min-width: 0; }
.cost-grid .section-title, .two-col .section-title { margin-top: 0; }
/* cards de custo com a mesma altura; gráfico vazio fica centralizado no card */
.cost-grid .card { flex: 1; margin-bottom: 0; display: flex; flex-direction: column; }
.cost-grid .card > .dual-chart:has(> .empty-state) { flex: 1; display: flex; align-items: center; justify-content: center; }
.two-col .card, .two-col .motivos-card, .two-col .evo-card { flex: 1; margin-bottom: 0; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 1200px) { .cost-grid, .two-col { grid-template-columns: minmax(0, 1fr); } }

.dual-section {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px;
  align-items: stretch; margin: 32px 0;
}
.dual-section > div { display: flex; flex-direction: column; min-width: 0; }
.dual-section .section-title { margin-top: 0; }
.dual-section .motivos-card, .dual-section .evo-card, .dual-section .card {
  flex: 1; margin-bottom: 0; display: flex; flex-direction: column; justify-content: center;
}
/* card com legenda no topo (.card-cap) começa do alto, sem centralizar */
.two-col .card:has(> .card-cap), .dual-section .card:has(> .card-cap) { justify-content: flex-start; }
@media (max-width: 1100px) { .dual-section { grid-template-columns: minmax(0, 1fr); } }
/* donut em largura cheia (761 a 1100px): donut e legenda lado a lado, legenda com no máximo 420px */
@media (min-width: 761px) and (max-width: 1100px) {
  .dual-section .motivos-grid { flex-direction: row; justify-content: center; gap: 40px; }
  .dual-section .motivos-donut { flex: 0 0 220px; }
  .dual-section .motivos-legend { flex: 0 1 420px; }
}

.dual-chart-rank {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; margin: 32px 0;
  align-items: stretch;
}
.dual-chart-rank > div { display: flex; flex-direction: column; min-width: 0; }
.dual-chart-rank .section-title { margin-top: 0; }
.dual-chart-rank .card { flex: 1; margin-bottom: 0; display: flex; flex-direction: column; }
.dual-chart-rank .chart-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.dual-chart-rank .card > .rank-list { flex: 1; justify-content: center; }
@media (max-width: 1100px) { .dual-chart-rank { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Gráficos SVG (gerados por DASH.render*) ----------
   viewBox fixo de 1000 de largura; o tamanho das fontes (em unidades do viewBox) muda
   conforme a largura do contexto para o texto renderizar com pelo menos 11px na tela
   (eixo X) e 10px (eixo Y e rótulos de valor), de 1024px para cima:
   largura cheia 11 · 2/3 (dual-chart-rank, dual-section) 17 · metade (cost-grid, two-col) 22
   (20 nos valores do .dense, 8+ meses). Até 1100px: 13 em largura cheia e nos 2/3 (que já
   viram coluna única). Até 1200px: cost-grid/two-col viram coluna única com 13.
   Até 760px o mobile.css (carregado por último) usa 17 no svg com min-width de 640px; com até
   4 meses (svg.few) o svg cabe no card e a fonte cresce para manter ~11px na tela (~33 a 390px).
   Contraste: textos do eixo em --text-muted; --text-dim só em traços e separadores. */
.dual-chart, .evo-chart, .semanal-chart, .chart-wrap { width: 100%; }
.dual-chart svg, .evo-chart svg, .semanal-chart svg, .chart-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
.dchart { --fs-axis: 11px; --fs-val: 11px; }
.dual-chart-rank .dchart, .dual-section .dchart { --fs-axis: 17px; --fs-val: 17px; }
.cost-grid .dchart, .two-col .dchart { --fs-axis: 22px; --fs-val: 22px; }
.cost-grid .dchart.dense, .two-col .dchart.dense { --fs-val: 20px; }
@media (max-width: 1100px) { .dchart, .dual-chart-rank .dchart, .dual-section .dchart { --fs-axis: 13px; --fs-val: 13px; } }
@media (max-width: 1200px) { .cost-grid .dchart, .two-col .dchart, .cost-grid .dchart.dense, .two-col .dchart.dense { --fs-axis: 13px; --fs-val: 13px; } }
.dchart .grid { stroke: var(--border); stroke-width: 1; }
.dchart .grid.baseline { stroke: var(--text-dim); }
.dchart .axis-y {
  fill: var(--text-muted); font-size: var(--fs-axis); font-weight: 500;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.dchart .axis-y.right { fill: var(--text-muted); }
.dchart .axis-x {
  fill: var(--text-muted); font-size: var(--fs-axis); font-weight: 500;
  font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
/* mês parcial: o '*' no rótulo já marca; a cor fica igual à dos outros meses */
.dchart .axis-x.partial { fill: var(--text-muted); }
.dchart .bar-value, .dchart .line-value {
  font-size: var(--fs-val); font-weight: 700;
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;
  /* contorno na cor do card: o rótulo continua legível quando encosta na barra vizinha */
  paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round;
}
.dchart .bar { transition: opacity var(--t-base); }
.dchart .bar:hover { opacity: .8; }
.dchart .bar.partial { opacity: .45; }
.dchart .line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dchart .line.dashed { stroke-dasharray: 6 6; }
.dchart .dot { stroke: var(--card); stroke-width: 2; }
.dchart .empty-text { fill: var(--text-muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }

/* Legendas dos gráficos */
.dual-legend, .evo-legend, .semanal-legend, .chart-legend {
  display: flex; gap: 8px 20px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}
.legend-item, .dual-legend-item, .evo-legend-item, .semanal-legend-item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-muted);
}
.legend-dot, .dual-legend-dot, .evo-legend-dot, .semanal-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-line { width: 18px; height: 2px; border-radius: 2px; flex: none; }
.legend-line.dashed { background: none !important; border-top: 2px dashed currentColor; height: 0; }

/* Evolução (linhas ou barras agrupadas com eixo Y) */
.evo-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 24px; margin-bottom: 32px;
}

/* ---------- Tabelas ---------- */
.month-table, .camp-table, .data-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.camp-table { table-layout: auto; }
.month-table col.col-mes { width: 12%; }
.camp-table col.col-name { width: 28%; }
/* cabeçalhos quebram linha (alinhados pela base) em vez de invadir a coluna vizinha */
.month-table th, .camp-table th, .data-table th {
  text-align: center; padding: 10px 8px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--text-muted); border-bottom: 1px solid var(--border-strong);
  text-transform: uppercase; letter-spacing: 1.2px;
  white-space: normal; vertical-align: bottom; line-height: 1.35;
}
/* palavras únicas longas (VISUALIZAÇÕES, INTERAÇÕES) não quebram: até 1000px a tabela
   mensal rola dentro do card */
@media (max-width: 1000px) { .table-card .month-table { min-width: 960px; } }
/* 1001 a 1100px: tabela ainda sem rolagem e colunas estreitas; o espaçamento menor faz
   cabeçalhos de uma palavra com barra (INTERAÇÕES/POST) caberem na coluna */
@media (min-width: 1001px) and (max-width: 1100px) {
  .month-table th, .camp-table th, .data-table th { letter-spacing: .6px; }
}
/* desktop: pista de rolagem quando a tabela não cabe (DASH.markOverflow marca .is-overflowing) */
@media (min-width: 761px) {
  .table-card.is-overflowing::after {
    content: '\2194  arraste para o lado'; display: block; position: sticky; left: 0; width: max-content;
    margin: 8px 0 4px;
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--text-muted);
  }
}
.month-table th:first-child, .camp-table th:first-child, .data-table th:first-child { text-align: left; color: var(--text-muted); }
.month-table td, .camp-table td, .data-table td {
  text-align: center; padding: 13px 8px; font-size: 13px; color: var(--text-2);
  border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums;
  transition: background var(--t-base);
}
.month-table td:first-child, .camp-table td:first-child, .data-table td:first-child {
  text-align: left; font-weight: 600; color: var(--text);
}
.month-table tbody tr:nth-child(odd) td,
.camp-table tbody tr:nth-child(odd) td,
.data-table tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .018); }
.month-table tbody tr:hover td,
.camp-table tbody tr:hover td,
.data-table tbody tr:hover td { background: rgba(255, 255, 255, .04); }
.month-table tr.total td,
.month-table tbody tr.total:hover td,
.month-table tbody tr.total:nth-child(odd) td,
.camp-table tr.total td,
.camp-table tbody tr.total:hover td,
.camp-table tbody tr.total:nth-child(odd) td,
.data-table tr.total td,
.data-table tbody tr.total:hover td,
.data-table tbody tr.total:nth-child(odd) td {
  font-weight: 700; background: var(--card-alt); color: var(--text);
  border-bottom: none; border-top: 1px solid var(--border-strong);
}
.month-table tbody tr.total td:first-child,
.camp-table tbody tr.total td:first-child,
.data-table tbody tr.total td:first-child {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-2);
}
.month-table tr.partial td:first-child::after,
.data-table tr.partial td:first-child::after { content: ' *'; color: var(--text-muted); }
/* alinhamento por célula */
th.num, td.num { text-align: right !important; }
th.left, td.left { text-align: left !important; }
th.center, td.center { text-align: center !important; }
/* ordenação por clique */
th[data-sort] { cursor: pointer; user-select: none; transition: color var(--t-base); }
th[data-sort]:hover { color: var(--text); }
th.sorted-asc::after { content: ' \25B2'; font-size: 8px; }
th.sorted-desc::after { content: ' \25BC'; font-size: 8px; }
.camp-name {
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: var(--text);
}
.small { font-size: 11px; color: var(--text-muted); margin-left: 2px; font-weight: 500; }
.best { color: var(--green) !important; font-weight: 700; }
.worst { color: var(--red) !important; font-weight: 700; }

/* utilitários de cor */
.c-mint, .c-green { color: var(--accent) !important; }
.c-red { color: var(--red) !important; }
.c-yellow { color: var(--yellow) !important; }
.c-blue { color: var(--blue) !important; }
.c-purple { color: var(--purple) !important; }
.c-muted { color: var(--text-muted) !important; }
.mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1.2px; }

/* ---------- Badges de status (pílulas) ---------- */
.status-badge, .badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; line-height: 1.5; white-space: nowrap; vertical-align: middle;
  background: var(--neutral-tint); color: var(--text-2);
}
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.status-badge.ativa, .status-badge.ativo, .badge.mint, .badge.green { background: var(--accent-tint); color: var(--accent); }
.status-badge.pausada, .status-badge.pausado, .badge.yellow { background: var(--yellow-tint); color: var(--yellow); }
.status-badge.encerrada, .status-badge.encerrado, .badge.neutral { background: var(--neutral-tint); color: var(--text-muted); }
.status-badge.erro, .status-badge.alerta, .badge.red, .badge.flare { background: var(--red-tint); color: var(--red); }
.badge.blue { background: var(--blue-tint); color: var(--blue); }
.badge.purple { background: var(--purple-tint); color: var(--purple); }
.badge.violet { background: var(--violet-tint); color: var(--purple); }
.badge.pink { background: rgba(255, 122, 182, .14); color: var(--pink); }

/* ---------- Callout (nota de destaque) ---------- */
.callout {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px; margin: 0 0 32px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-tile);
  font-size: 13px; line-height: 1.5; color: var(--text-2);
}
.card + .callout, .funil-card + .callout { margin-top: -16px; }
.callout .ic {
  flex: none; width: 36px; height: 36px; border-radius: var(--r-chip);
  display: grid; place-items: center;
  background: var(--neutral-tint); border: 1px solid var(--border); color: var(--text-2);
}
.callout .ic svg { width: 20px; height: 20px; stroke-width: 1.75; }
/* sem o Lucide (CDN fora do ar), nada de quadradinho vazio no lugar do ícone */
.kpi-icon:not(:has(svg)), .callout .ic:not(:has(svg)) { display: none; }
.callout .ck {
  display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px;
}
.callout strong { color: var(--text); }
.callout.mint { background: rgba(60, 255, 208, .05); border-color: var(--accent-deep); }
.callout.mint .ic { background: var(--accent-tint); border-color: var(--accent-deep); color: var(--accent); }
.callout.mint .ck, .callout.mint strong { color: var(--accent); }
.callout.flare, .callout.red { background: rgba(236, 26, 106, .06); border-color: rgba(236, 26, 106, .6); }
.callout.flare .ic, .callout.red .ic { background: var(--red-tint); border-color: rgba(236, 26, 106, .6); color: var(--red); }
.callout.flare .ck, .callout.red .ck, .callout.flare strong, .callout.red strong { color: var(--red); }
.callout.yellow { background: rgba(255, 213, 61, .05); border-color: rgba(255, 213, 61, .45); }
.callout.yellow .ic { background: var(--yellow-tint); border-color: rgba(255, 213, 61, .45); color: var(--yellow); }
.callout.yellow .ck, .callout.yellow strong { color: var(--yellow); }
.callout.blue { background: rgba(77, 163, 255, .05); border-color: rgba(77, 163, 255, .45); }
.callout.blue .ic { background: var(--blue-tint); border-color: rgba(77, 163, 255, .45); color: var(--blue); }
.callout.blue .ck, .callout.blue strong { color: var(--blue); }

/* ---------- Donut + legenda (motivos-card) ---------- */
.motivos-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 28px 24px; margin-bottom: 32px;
}
.motivos-grid { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.motivos-grid .motivos-legend { width: 100%; }
.motivos-grid.side { flex-direction: row; align-items: center; gap: 28px; }
.motivos-grid.side .motivos-donut { flex: 0 0 220px; }
.motivos-grid.side .motivos-legend { flex: 1; min-width: 0; }
.motivos-donut { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
.motivos-donut svg { width: 100%; max-width: 220px; height: auto; }
.motivos-donut .center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; max-width: 120px;
}
.motivos-donut .center .total {
  font-family: var(--font-sans); font-size: 28px; font-weight: 700; letter-spacing: -.3px;
  color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.motivos-donut .center .total.sm { font-size: 20px; }
.motivos-donut .center .label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); margin-top: 6px; font-weight: 500;
}
.motivos-legend { display: flex; flex-direction: column; gap: 0; }
.motivo-item {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) 76px 52px;
  align-items: center; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.motivo-item:last-child { border-bottom: none; }
.motivo-item .dot { width: 10px; height: 10px; border-radius: 3px; }
.motivo-item .nome {
  font-size: 13px; color: var(--text-2); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.motivo-item .qtd {
  text-align: right; font-family: var(--font-sans); font-size: 14px; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.motivo-item .pct {
  text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  font-weight: 500; font-variant-numeric: tabular-nums;
}

/* ---------- Funil (barras horizontais) ---------- */
.funil-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 28px 24px; margin-bottom: 32px; position: relative;
}
.funil-card .funil-cap, .funil-cap {
  font-family: var(--font-mono); font-size: 10px; color: var(--accent); letter-spacing: 2px;
  text-transform: uppercase; font-weight: 600; margin-bottom: 22px;
}
.funil-stages { display: flex; flex-direction: column; }
.funil-row { display: flex; align-items: center; gap: 14px; }
.funil-label { width: 200px; flex-shrink: 0; text-align: right; }
.funil-label .name {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--text);
  text-transform: uppercase; letter-spacing: 1px; line-height: 1.3;
}
.funil-label .desc { font-size: 11px; color: var(--text-muted); line-height: 1.3; margin-top: 2px; }
.funil-bar-wrap { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.funil-track {
  flex: 1; height: 32px; position: relative;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--border); border-radius: 6px;
}
.funil-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; transition: width .4s ease; }
.funil-bar.mint, .funil-bar.green { background: rgba(60, 255, 208, .30); border-right: 2px solid var(--accent); }
.funil-bar.blue { background: rgba(77, 163, 255, .30); border-right: 2px solid var(--blue); }
.funil-bar.purple, .funil-bar.violet { background: rgba(184, 155, 255, .30); border-right: 2px solid var(--purple); }
.funil-bar.yellow, .funil-bar.amber { background: rgba(255, 213, 61, .26); border-right: 2px solid var(--yellow); }
.funil-bar.red, .funil-bar.flare { background: rgba(236, 26, 106, .32); border-right: 2px solid var(--red); }
.funil-bar.neutral { background: rgba(255, 255, 255, .10); border-right: 2px solid var(--text-muted); }
.funil-qtd {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap;
}
.funil-qtd.inside { right: 12px; }
.funil-qtd.zero { color: var(--text-muted); right: 12px; }
.funil-conv-tag {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); font-weight: 500;
  font-variant-numeric: tabular-nums; min-width: 56px; text-align: left;
}
.funil-conv-tag.up { color: var(--green); }
.funil-conv-tag.down { color: var(--red); }
.funil-connector { margin-left: calc(200px + 14px + 6px); width: 1px; height: 12px; background: var(--border); }
.funil-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px;
  padding-top: 20px; border-top: 1px solid var(--border);
}
.funil-summary .item { padding: 18px 20px; border-radius: var(--r-tile); background: var(--card-alt); border: 1px solid var(--border); }
.funil-summary .item.accent, .funil-summary .item.mint, .funil-summary .item.green { background: rgba(60, 255, 208, .05); border-color: var(--accent-deep); }
.funil-summary .item.red, .funil-summary .item.flare { background: rgba(236, 26, 106, .06); border-color: rgba(236, 26, 106, .6); }
.funil-summary .item.blue { background: rgba(77, 163, 255, .05); border-color: rgba(77, 163, 255, .45); }
.funil-summary .item.yellow { background: rgba(255, 213, 61, .05); border-color: rgba(255, 213, 61, .45); }
.funil-summary .label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 600; margin-bottom: 8px; color: var(--text-muted);
}
.funil-summary .item.accent .label, .funil-summary .item.mint .label, .funil-summary .item.green .label,
.funil-summary .item.accent .value, .funil-summary .item.mint .value, .funil-summary .item.green .value { color: var(--accent); }
.funil-summary .item.red .label, .funil-summary .item.flare .label,
.funil-summary .item.red .value, .funil-summary .item.flare .value { color: var(--red); }
.funil-summary .item.blue .label, .funil-summary .item.blue .value { color: var(--blue); }
.funil-summary .item.yellow .label, .funil-summary .item.yellow .value { color: var(--yellow); }
.funil-summary .value {
  font-family: var(--font-sans); font-size: 40px; font-weight: 700; letter-spacing: -.5px;
  line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
}
.funil-summary .value .cur { font-size: .5em; opacity: .7; margin-right: 4px; vertical-align: .2em; }
.funil-summary .detail { font-size: 13px; color: var(--text-2); font-weight: 500; margin-top: 6px; }

/* ---------- Ranking (lista de barras horizontais) ---------- */
.rank-list { display: flex; flex-direction: column; gap: 14px; }
.rank-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 14px; align-items: center; }
.rank-row.with-pos { grid-template-columns: 22px minmax(0, 1fr) 76px; }
.rank-pos {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.rank-bar-wrap { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rank-nome-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rank-nome {
  font-size: 13px; font-weight: 500; color: var(--text-2); line-height: 1.3; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-nome a:hover { color: var(--accent); }
.rank-bar-bg { width: 100%; height: 6px; background: var(--card-alt-2); border-radius: var(--r-pill); overflow: hidden; }
.rank-bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--text-2); }
.rank-meta { font-size: 11px; color: var(--text-muted); display: flex; gap: 4px 12px; flex-wrap: wrap; line-height: 1.35; }
.rank-qtd {
  font-family: var(--font-sans); font-size: 18px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.rank-qtd .pct, .rank-qtd .unit { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-left: 2px; }

/* ---------- Estados vazios e de erro ---------- */
.empty-state {
  text-align: center; color: var(--text-muted); padding: 28px 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
}
.error-state {
  grid-column: 1 / -1; text-align: center; color: var(--red); padding: 40px 16px;
  border: 1px solid rgba(236, 26, 106, .5); border-radius: var(--r-card); background: rgba(236, 26, 106, .05);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
}

/* ---------- Footer ---------- */
.footer {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; padding: 28px 24px;
  border-top: 1px solid var(--border); font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; margin-top: 16px;
}
.footer .sep { color: var(--text-dim); margin: 0 2px; }
.footer.no-line { border-top: none; }

/* ---------- Utilitários de visibilidade ---------- */
.only-mobile { display: none !important; }

/* ==========================================================================
   Animações: contidas (o painel "marca o tempo", não respira).
   Barras crescem de baixo, linhas se desenham, cards e linhas de tabela
   entram com fade curto. Sem escala, sem lift.
   ========================================================================== */
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes barGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rowIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes lineDraw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}

/* barras SVG nascem da base */
.dchart .bar {
  transform-origin: 50% 100%;
  transform-box: fill-box;
  animation: barGrow .8s cubic-bezier(.2, .7, .2, 1) backwards;
}
.dchart .bar-value, .dchart .axis-x, .dchart .axis-y, .dchart .line-value {
  animation: fadeIn .4s ease-out backwards;
  animation-delay: .3s;
}
/* linhas se desenham (path com pathLength="1"); tracejadas só aparecem */
.dchart .line.draw { animation: lineDraw 1.1s ease-out .15s both; }
.dchart .line.dashed { animation: fadeIn .4s ease-out .9s backwards; }
.dchart .dot { animation: fadeIn .3s ease-out backwards; animation-delay: .9s; }
.dchart .line-value { animation-delay: 1s; }

.kpi { animation: fadeUp .45s ease-out backwards; }
.month-table tbody tr, .camp-table tbody tr, .data-table tbody tr { animation: fadeUp .35s ease-out backwards; }
.funil-row { animation: rowIn .45s ease-out backwards; }
.funil-connector { animation: fadeIn .35s ease-out backwards; }
.funil-bar { transform-origin: left center; animation: barGrowX .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.funil-summary .item { animation: fadeUp .45s ease-out backwards; }
.motivos-donut svg path { animation: fadeIn .5s ease-out backwards; }
.motivo-item, .rank-row { animation: fadeUp .4s ease-out backwards; }
.rank-bar-fill { transform-origin: left center; animation: barGrowX .8s cubic-bezier(.2, .7, .2, 1) backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}