/* ------------------------------------------------------------------ */
/* Funil de vendas — resumo executivo no formato do componente Funnel  */
/* do design system Axis (axis-design-system, components/Funnel):      */
/* faixas retangulares centralizadas em degraus (largura ilustrativa    */
/* 100% → 34%, vinda de --funil-w no JS), `inverse` nas etapas e        */
/* `accent` na última, volume em mono e taxa de passagem discreta.      */
/* Experimental e isolado: remover este arquivo + o <link> do template  */
/* volta aos trapézios (o JS só define --funil-w, inerte sem este CSS). */
/* Carregado DEPOIS de axis-shell.css — os !important vencem o          */
/* background/clip-path inline que o JS aplica em cada faixa.           */
/* ------------------------------------------------------------------ */
.viz-root {
  --funil-inverse: var(--ax-navy);
  --funil-on-inverse: var(--ax-cream);
  --funil-accent: var(--ax-orange);
}
:root[data-theme="dark"] .viz-root {
  /* Contrastes medidos (WCAG): faixa #3b4c9b × texto #f1f3ff = 7,1:1; borda #6573ad
     (line-control do DS) × card #111735 = 3,9:1 (≥3:1 p/ objeto gráfico); accent #ff7446 ×
     on-accent #230c11 = 6,9:1 — branco sobre #ff7446 daria só 2,7:1. */
  --funil-inverse: #3b4c9b;
  --funil-inverse-line: #6573ad;
  --funil-on-inverse: #f1f3ff;
  --funil-accent: #ff7446;
  --funil-on-accent: #230c11;
}
/* Card no nível 1 (surface) em vez de surface-raised: mais separação das faixas. */
:root[data-theme="dark"] .funil-trapezoid-card { background: var(--surface-1); }
:root[data-theme="dark"] .funil-trapezoid__band { border: 1px solid var(--funil-inverse-line); }
:root[data-theme="dark"] .funil-trapezoid__band.is-last {
  color: var(--funil-on-accent); border-color: var(--funil-accent);
}
:root[data-theme="dark"] .funil-trapezoid__band.is-last .funil-trapezoid__growth {
  background: rgba(35, 12, 17, .16); color: var(--funil-on-accent);
}
:root[data-theme="dark"] .funil-trapezoid__band.is-empty { border: 1px dashed var(--funil-inverse-line); }
:root[data-theme="dark"] .funil-trapezoid__col-header p.is-selected { color: #ff7446; }
:root[data-theme="dark"] .funil-trapezoid__rate { color: var(--text-secondary); }

/* Linhas mais baixas: o dado está no número, não na área da faixa. */
.funil-trapezoid__label,
.funil-trapezoid__stage,
.funil-trapezoid__goal { height: 76px; }
.funil-trapezoid__label {
  font-family: var(--font-body); font-size: 13px; font-weight: 500; text-transform: none;
  letter-spacing: 0; color: var(--text-primary);
}

.funil-trapezoid__stage { justify-content: center; }
.funil-trapezoid__band {
  flex-direction: row; gap: 10px; width: var(--funil-w, 100%); min-width: max-content; height: 52px;
  padding: 0 14px; border-radius: var(--radius-sm); color: var(--funil-on-inverse);
  background: var(--funil-inverse) !important; clip-path: none !important;
  transition: opacity .15s, width .3s ease;
}
.funil-trapezoid__band.is-last { background: var(--funil-accent) !important; color: #fff; }
.funil-trapezoid__band:hover { filter: none; opacity: .9; }
.funil-trapezoid__band.is-empty {
  background: transparent !important; border: 1px dashed var(--border); color: var(--text-muted);
}

.funil-trapezoid__value {
  font-family: var(--font-mono); font-size: 20px; font-weight: 600; letter-spacing: -.01em; text-shadow: none;
}
.funil-trapezoid__growth {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border: 0; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .14);
}
.funil-trapezoid__growth.is-up { color: #8ff0c9; }
.funil-trapezoid__growth.is-down { color: #ffc2ad; }

/* Taxa de passagem: texto mono discreto no vão entre as faixas ("↓ taxa"), sem pílula. */
.funil-trapezoid__rate {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--text-muted); font-size: 10px; font-weight: 500; letter-spacing: .04em;
}
.funil-trapezoid__rate::before { content: "↓ "; color: var(--ax-orange); }

@media (prefers-reduced-motion: reduce) { .funil-trapezoid__band { transition: none; } }