/* =========================================================
   FASE 27M - Topos roxos finais
   Corrige somente cabeçalhos/títulos da aba Vendas por Período
   ========================================================= */

.vp27-shell .vp27-final-purple-head,
.vp27-shell .vp27-section > .vp27-table-head,
.vp27-shell .vp27-chart-card > .vp27-chart-title,
.vp27-shell .vp27-filter-top {
  background: linear-gradient(135deg, #4e256c 0%, #7648c9 58%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  min-height: 84px !important;
  padding: 20px 24px 18px 58px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* filtro principal continua com os 4 cantos arredondados */
.vp27-shell .vp27-filter-top {
  border-radius: 24px !important;
}

/* barra lateral verde */
.vp27-shell .vp27-final-purple-head::before,
.vp27-shell .vp27-section > .vp27-table-head::before,
.vp27-shell .vp27-chart-card > .vp27-chart-title::before,
.vp27-shell .vp27-filter-top::before {
  content: "" !important;
  position: absolute !important;
  left: 24px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #76dda5 0%, #ffffff 100%) !important;
}

/* remove caixa branca dentro do cabeçalho */
.vp27-shell .vp27-final-purple-head > div,
.vp27-shell .vp27-section > .vp27-table-head > div,
.vp27-shell .vp27-chart-card > .vp27-chart-title > div,
.vp27-shell .vp27-filter-top > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* texto branco dentro dos topos roxos */
.vp27-shell .vp27-final-purple-head,
.vp27-shell .vp27-final-purple-head *,
.vp27-shell .vp27-section > .vp27-table-head,
.vp27-shell .vp27-section > .vp27-table-head *,
.vp27-shell .vp27-chart-card > .vp27-chart-title,
.vp27-shell .vp27-chart-card > .vp27-chart-title *,
.vp27-shell .vp27-filter-top,
.vp27-shell .vp27-filter-top * {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* título e subtítulo */
.vp27-shell .vp27-final-title h2,
.vp27-shell .vp27-table-head h2,
.vp27-shell .vp27-filter-top h2 {
  color: #ffffff !important;
  font-size: 26px !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  margin: 0 0 5px 0 !important;
  letter-spacing: -.03em !important;
}

.vp27-shell .vp27-final-title p,
.vp27-shell .vp27-table-head p,
.vp27-shell .vp27-filter-top p {
  color: rgba(255,255,255,.94) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
  margin: 0 !important;
}

/* título de gráfico direto */
.vp27-shell .vp27-chart-card > .vp27-chart-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  font-size: 26px !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -.03em !important;
  text-align: left !important;
}

/* paginação no topo roxo */
.vp27-shell .vp27-tools {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.vp27-shell .vp27-table-head .vp27-tools select,
.vp27-shell .vp27-table-head .vp27-tools button {
  background: #ffffff !important;
  color: #5a2390 !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  font-weight: 950 !important;
}

.vp27-shell .vp27-table-head .vp27-tools span {
  color: #ffffff !important;
  font-weight: 950 !important;
}

/* corpo da tabela segue branco */
.vp27-shell .vp27-table,
.vp27-shell .vp27-scroll,
.vp27-shell .vp27-chart-body {
  background: #ffffff !important;
}

.vp27-shell .vp27-table thead th {
  background: #efe6f8 !important;
  color: #5a2390 !important;
  font-weight: 950 !important;
}

.vp27-shell .vp27-table tbody td,
.vp27-shell .vp27-table tbody td * {
  color: #1b2a48 !important;
}

/* cards brancos com texto escuro */
.vp27-shell .vp27-kpi,
.vp27-shell .vp27-insight {
  background: #ffffff !important;
}

.vp27-shell .vp27-kpi strong,
.vp27-shell .vp27-insight strong {
  color: #071734 !important;
}

.vp27-shell .vp27-kpi small,
.vp27-shell .vp27-kpi p,
.vp27-shell .vp27-insight small,
.vp27-shell .vp27-insight p {
  color: #64708d !important;
}

@media (max-width: 900px) {
  .vp27-shell .vp27-final-purple-head,
  .vp27-shell .vp27-section > .vp27-table-head,
  .vp27-shell .vp27-chart-card > .vp27-chart-title,
  .vp27-shell .vp27-filter-top {
    padding-left: 48px !important;
  }

  .vp27-shell .vp27-final-title h2,
  .vp27-shell .vp27-table-head h2,
  .vp27-shell .vp27-filter-top h2,
  .vp27-shell .vp27-chart-card > .vp27-chart-title {
    font-size: 20px !important;
  }
}