/* ============================================================================
   MÓDULO RELATÓRIO DE VENDAS (Fase 6) — estilos próprios, prefixo "vd-".
   Segue o mesmo padrão visual dos módulos Agendamentos/Match/Importar/
   Integrador/Gerenciar Site: laranja MyCar, chips coloridos, tabela com
   cabeçalho cinza. Cores em HEX FIXO (não var(--...)) de propósito, mesma
   convenção do integrador.css/gerenciar.css.
   ========================================================================== */

.vd-root { max-width: 1300px; margin: 0 auto; }

.vd-subtitulo { color: #707070; font-size: 13px; margin-top: 4px; }

.vd-filtros { align-items: center; }
.vd-filtro-data { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.vd-filtro-data label { font-size: 11px; color: #707070; font-weight: 600; }
.vd-filtro-data input {
  padding: 10px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

.vd-cards-resumo { max-width: 480px; margin-bottom: 26px; }

.vd-por-canal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.vd-canal-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e8e8e8;
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  font-size: 12.5px;
  color: #333333;
  background: #fff;
}
.vd-canal-item strong { color: #202124; }

.vd-chip-canal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.vd-chip-canal-trafego_pago     { background: #e6f4ff; color: #0b63b0; }
.vd-chip-canal-mktplace         { background: #efeafe; color: #5b3fcc; }
.vd-chip-canal-olx              { background: #fff1e0; color: #b5570a; }
.vd-chip-canal-lead_mycar       { background: #ffe5df; color: #c72609; }
.vd-chip-canal-ml               { background: #fff7da; color: #9a7b00; }
.vd-chip-canal-indicacao        { background: #e7f8ee; color: #1c8a4b; }
.vd-chip-canal-prospeccao_ativa { background: #e0f7f4; color: #0f7a68; }
.vd-chip-canal-relacionamento   { background: #fde6f1; color: #b3186f; }
.vd-chip-canal-outro            { background: #f0f0f0; color: #666666; }

@media (max-width: 860px) {
  .vd-cards-resumo { max-width: none; }
  .vd-filtro-data { min-width: 0; flex: 1 1 140px; }
}