/* Estilos específicos do painel-andamento. Segue o mesmo padrão de
       componentes "genéricos" já usado em painel-callbox.css (cada painel
       repete essas regras no seu próprio arquivo de página; o que é
       realmente compartilhado fica em css/dashboard.css). */

.top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }

.kpis {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 14px;
      margin-bottom: 14px;
    }

.section-title {
      font-family: 'Syne', sans-serif;
      font-size: 15px;
      font-weight: 800;
      margin: 28px 0 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

.chart-card {
      padding: 18px 18px 14px;
    }

.chart-card .ch-sub {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px;
      margin-bottom: 12px;
    }

.chart-wrap.wide {
      height: 320px;
    }

.table-card {
      overflow: auto;
      margin-bottom: 14px;
    }

.table-card table {
      width: 100%;
      border-collapse: collapse;
      min-width: 620px;
    }

.vendor-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 14px;
    }

/* ── Diagrama Sankey do fluxo de leads (mesmo estilo do painel-marketing/andamento) ── */
    .funnel-card {
      padding: 20px 22px;
      margin-bottom: 14px;
    }

.sankey-container {
      width: 100%;
      min-height: 440px;
      overflow-x: auto;
    }

.generated-note {
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
    }

/* Tokens usados aqui que não existem no shared.css global. */
    :root {
      --warning: #964219;
      --warning-soft: #ecd8cd;
    }

@media (max-width: 980px) {
      .kpis {
        grid-template-columns: repeat(2, 1fr);
      }

      .charts-grid,
      .charts-grid-3,
      .vendor-grid {
        grid-template-columns: 1fr;
      }
    }