/* Tokens usados aqui que não existem no shared.css global (o resto das
       cores/variáveis vem de lá, para manter a mesma paleta em toda a intranet). */
    :root {
      --warning: #964219;
      --warning-soft: #ecd8cd;
    }

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

.webhook-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      padding: 14px 16px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }

.date-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      padding: 12px 16px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      flex-wrap: wrap;
    }

select.date-input {
      appearance: auto;
      min-width: 200px;
    }

.filter-badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 999px;
      background: var(--primary-soft);
      color: var(--primary);
      white-space: nowrap;
    }

.section-title {
      font-family: 'Syne', sans-serif;
      font-size: 16px;
      font-weight: 700;
      margin: 24px 0 12px;
      color: var(--text);
    }

.chart-card {
      padding: 20px;
    }

.chart-card .ch {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .09em;
      color: #9a9891;
      margin-bottom: 16px;
    }

.chart-wrap {
      position: relative;
      width: 100%;
    }

.table-card {
      overflow: auto;
    }

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

.meta {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-top: 3px;
    }

#vendedoresArea,
    #tableArea {
      margin-bottom: 14px;
    }

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

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