#sec-admin-vendas-periodo,
#sec-vendas-periodo,
#sec-admin-vendas-mensais,
#sec-vendas-mensais {
  padding: 24px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(118,221,165,.14), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(118,72,201,.14), transparent 32%),
    #fbf8ff !important;
}

.vp27-shell,
.vp27-shell * {
  box-sizing: border-box !important;
}

.vp27-shell {
  display: grid !important;
  gap: 18px !important;
}

.vp27-hero {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 22px !important;
  flex-wrap: wrap !important;
  padding: 30px !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, #4e256c 0%, #7648c9 58%, #7da3d2 100%) !important;
  color: #fff !important;
  box-shadow: 0 22px 48px rgba(78,37,108,.20) !important;
}

.vp27-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.16) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.vp27-title {
  margin: 12px 0 8px !important;
  color: #fff !important;
  font-size: clamp(30px, 4vw, 44px) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -.04em !important;
}

.vp27-sub {
  max-width: 840px !important;
  margin: 0 !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
}

.vp27-actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.vp27-btn,
.vp27-btn-light {
  height: 42px !important;
  border-radius: 14px !important;
  border: 0 !important;
  padding: 0 16px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.vp27-btn {
  background: #fff !important;
  color: #4e256c !important;
}

.vp27-btn-light {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}

.vp27-filters,
.vp27-section {
  background: #fff !important;
  border: 1px solid rgba(118,72,201,.12) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 36px rgba(40,24,84,.08) !important;
  overflow: hidden !important;
}

.vp27-filters {
  padding: 18px !important;
}

.vp27-filter-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  padding: 20px !important;
  border-radius: 22px !important;
  background: linear-gradient(120deg, #fff, #effff7) !important;
  border: 1px solid rgba(118,72,201,.12) !important;
  margin-bottom: 16px !important;
}

.vp27-filter-top h2 {
  margin: 0 !important;
  color: #071734 !important;
  font-size: 25px !important;
  font-weight: 950 !important;
}

.vp27-filter-top p {
  margin: 5px 0 0 !important;
  color: #59667c !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.vp27-current {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #f4ecff !important;
  color: #4e256c !important;
  border: 1px solid rgba(118,72,201,.18) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.vp27-quick {
  display: flex !important;
  gap: 9px !important;
  flex-wrap: wrap !important;
  margin-bottom: 14px !important;
}

.vp27-quick button {
  height: 38px !important;
  border-radius: 999px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(118,72,201,.16) !important;
  background: #fff !important;
  color: #4e256c !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.vp27-quick button.active,
.vp27-quick button:hover {
  background: #7648c9 !important;
  color: #fff !important;
}

.vp27-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;
  gap: 12px !important;
  align-items: end !important;
}

.vp27-field {
  display: grid !important;
  gap: 7px !important;
}

.vp27-field label {
  color: #7b6798 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
}

.vp27-field input,
.vp27-field select {
  width: 100% !important;
  height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(118,72,201,.18) !important;
  padding: 0 12px !important;
  color: #4e256c !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  outline: 0 !important;
  background: #fff !important;
}

.vp27-filter-actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.vp27-primary,
.vp27-secondary {
  height: 42px !important;
  border-radius: 14px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.vp27-primary {
  border: 0 !important;
  background: #7648c9 !important;
  color: #fff !important;
}

.vp27-secondary {
  border: 1px solid rgba(118,72,201,.18) !important;
  background: #f4ecff !important;
  color: #4e256c !important;
}

.vp27-status {
  color: #256c4e !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  margin-top: 12px !important;
}

.vp27-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
  gap: 14px !important;
}

.vp27-kpi {
  min-height: 118px !important;
  background: #fff !important;
  border: 1px solid rgba(118,72,201,.12) !important;
  border-radius: 21px !important;
  padding: 17px !important;
  box-shadow: 0 14px 30px rgba(40,24,84,.07) !important;
  position: relative !important;
  overflow: hidden !important;
}

.vp27-kpi::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 5px !important;
  height: 100% !important;
  background: linear-gradient(180deg, #76dda5, #7648c9) !important;
}

.vp27-kpi small {
  display: block !important;
  color: #7b6798 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

.vp27-kpi strong {
  display: block !important;
  margin-top: 8px !important;
  color: #071734 !important;
  font-size: 27px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.vp27-kpi p {
  margin: 8px 0 0 !important;
  color: #6d5c8a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

.vp27-insights {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  gap: 14px !important;
}

.vp27-insight {
  background: #fff !important;
  border: 1px solid rgba(118,72,201,.12) !important;
  border-radius: 20px !important;
  padding: 16px !important;
  box-shadow: 0 12px 28px rgba(40,24,84,.06) !important;
}

.vp27-insight small {
  display: block !important;
  color: #80689d !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
}

.vp27-insight strong {
  display: block !important;
  margin-top: 7px !important;
  color: #3f1167 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

.vp27-insight p {
  margin: 7px 0 0 !important;
  color: #5f517d !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.vp27-chart-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

.vp27-chart-card,
.vp27-section {
  background: #fff !important;
  border: 1px solid rgba(118,72,201,.12) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 36px rgba(40,24,84,.08) !important;
  overflow: hidden !important;
}

.vp27-chart-title,
.vp27-section-head {
  padding: 15px 18px !important;
  background: linear-gradient(90deg, #9d16d5, #6e16b8) !important;
  color: #fff !important;
  font-weight: 950 !important;
  text-align: center !important;
}

.vp27-chart-body {
  height: 330px !important;
  padding: 18px !important;
}

.vp27-chart-body canvas {
  width: 100% !important;
  height: 100% !important;
}

.vp27-table-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding: 15px 18px !important;
  background: linear-gradient(90deg, #fff, #fbf8ff) !important;
  border-bottom: 1px solid rgba(118,72,201,.10) !important;
}

.vp27-table-head h2 {
  margin: 0 !important;
  color: #4e256c !important;
  font-size: 20px !important;
  font-weight: 950 !important;
}

.vp27-table-head p {
  margin: 4px 0 0 !important;
  color: #80689d !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.vp27-tools {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.vp27-tools select,
.vp27-tools button {
  height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(118,72,201,.18) !important;
  background: #fff !important;
  color: #4e256c !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.vp27-tools button {
  background: #9a7ec2 !important;
  color: #fff !important;
  border: 0 !important;
}

.vp27-scroll {
  width: 100% !important;
  overflow: auto !important;
}

.vp27-table {
  width: 100% !important;
  min-width: 920px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.vp27-table th {
  padding: 13px 14px !important;
  background: #efe5f8 !important;
  color: #4e256c !important;
  border-bottom: 1px solid rgba(118,72,201,.18) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  white-space: nowrap !important;
}

.vp27-table td {
  padding: 14px !important;
  border-bottom: 1px solid rgba(118,72,201,.08) !important;
  color: #071734 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  vertical-align: middle !important;
}

.vp27-table tr:nth-child(even) td {
  background: #fcf9ff !important;
}

.vp27-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: #efe5f8 !important;
  color: #4e256c !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.vp27-pill.good {
  background: #dff8ec !important;
  color: #078052 !important;
}

.vp27-empty {
  padding: 24px !important;
  color: #80689d !important;
  text-align: center !important;
  font-weight: 850 !important;
}

@media (max-width: 1300px) {
  .vp27-filter-grid,
  .vp27-kpis,
  .vp27-insights {
    grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
  }

  .vp27-chart-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 800px) {
  #sec-admin-vendas-periodo,
  #sec-vendas-periodo,
  #sec-admin-vendas-mensais,
  #sec-vendas-mensais {
    padding: 14px !important;
  }

  .vp27-filter-grid,
  .vp27-kpis,
  .vp27-insights {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   FASE 27D - Correção tamanho/alinhamento das tabelas
   Vendas por Período
   ========================================================= */

.vp27-table {
  table-layout: auto !important;
}

.vp27-table th {
  height: 42px !important;
  padding: 11px 12px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  vertical-align: middle !important;
}

.vp27-table td {
  height: 52px !important;
  padding: 10px 12px !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  vertical-align: middle !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.vp27-table td strong {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #071734 !important;
  font-size: 14px !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Primeira coluna: datas, semanas, pipelines e responsáveis */
.vp27-table th:first-child,
.vp27-table td:first-child {
  min-width: 180px !important;
  max-width: 340px !important;
  width: 260px !important;
  text-align: left !important;
}

/* Colunas numéricas */
.vp27-table th:nth-child(n+2),
.vp27-table td:nth-child(n+2) {
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}

/* Valores monetários */
.vp27-table td:nth-child(3),
.vp27-table td:nth-child(4) {
  text-align: right !important;
  white-space: nowrap !important;
}

/* Participação */
.vp27-table td:nth-child(5) {
  text-align: center !important;
}

/* Pills menores */
.vp27-table .vp27-pill {
  min-height: 22px !important;
  padding: 4px 8px !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
}

/* Linhas mais elegantes */
.vp27-table tbody tr:hover td {
  background: #f7f0ff !important;
}

/* Evita que qualquer estilo global deixe texto gigante */
.vp27-section .vp27-table td *,
.vp27-section .vp27-table td strong,
.vp27-section .vp27-table td b {
  font-size: inherit !important;
}

.vp27-section .vp27-table td:first-child strong,
.vp27-section .vp27-table td:first-child b {
  font-size: 14px !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
}

/* Tabelas de pipeline/responsável com nome maior que data, mas sem exagero */
.vp27TableNameFix,
.vp27-table td:first-child strong {
  max-width: 320px !important;
}

/* Menos espaçamento visual nas tabelas */
.vp27-scroll {
  border-radius: 0 0 18px 18px !important;
}

.vp27-table tr:last-child td {
  border-bottom: 0 !important;
}

@media (max-width: 900px) {
  .vp27-table td strong,
  .vp27-section .vp27-table td:first-child strong {
    font-size: 13px !important;
  }

  .vp27-table th:first-child,
  .vp27-table td:first-child {
    min-width: 160px !important;
    width: 200px !important;
  }
}


/* =========================================================
   FASE 27E - PADRONIZAR BLOCOS DA ABA VENDAS POR PERÍODO
   ========================================================= */

/* Área principal da página */
.vp27-page,
.vp27-section,
.vp27-shell {
  color: #1d1648 !important;
}

/* HERO / CABEÇALHO */
.vp27-page .vp27-hero-card,
.vp27-page .vp27-hero-inner,
.vp27-page .vp27-top-box {
  background: #f8fbfb !important;
  border: 1px solid #dbcdf3 !important;
  border-radius: 28px !important;
  box-shadow: 0 14px 28px rgba(78, 37, 108, .10) !important;
  position: relative !important;
  overflow: hidden !important;
}

.vp27-page .vp27-hero-card::before,
.vp27-page .vp27-hero-inner::before,
.vp27-page .vp27-top-box::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 26px !important;
  bottom: 26px !important;
  width: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #76dda5 0%, #7648c9 100%) !important;
}

/* textos do hero */
.vp27-page .vp27-hero-card *,
.vp27-page .vp27-hero-inner *,
.vp27-page .vp27-top-box * {
  color: #1d1648 !important;
}

.vp27-page .vp27-hero-card h1,
.vp27-page .vp27-hero-inner h1,
.vp27-page .vp27-top-box h1,
.vp27-page .vp27-hero-card h2,
.vp27-page .vp27-hero-inner h2,
.vp27-page .vp27-top-box h2 {
  color: #071734 !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  margin: 0 0 10px 0 !important;
}

.vp27-page .vp27-hero-card p,
.vp27-page .vp27-hero-inner p,
.vp27-page .vp27-top-box p,
.vp27-page .vp27-hero-card .vp27-subtitle,
.vp27-page .vp27-hero-inner .vp27-subtitle,
.vp27-page .vp27-top-box .vp27-subtitle {
  color: #5f577f !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* selo tipo "Dados reais do Kommo" */
.vp27-page .vp27-badge,
.vp27-page .vp27-hero-badge,
.vp27-page .vp27-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: #efe7fb !important;
  border: 1px solid #d2b8f6 !important;
  color: #6b36a8 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

/* BLOCOS INTERNOS DE TÍTULO / SEÇÃO */
.vp27-page .vp27-title-block,
.vp27-page .vp27-section-head,
.vp27-page .vp27-filter-head,
.vp27-page .vp27-mini-head,
.vp27-page .vp27-table-head,
.vp27-page .vp27-summary-head {
  position: relative !important;
  background: linear-gradient(135deg, #f8f5ff 0%, #eef9f5 100%) !important;
  border: 1px solid #dbcdf3 !important;
  border-radius: 26px !important;
  padding: 22px 24px !important;
  box-shadow: 0 10px 24px rgba(78, 37, 108, .08) !important;
  overflow: hidden !important;
}

.vp27-page .vp27-title-block::before,
.vp27-page .vp27-section-head::before,
.vp27-page .vp27-filter-head::before,
.vp27-page .vp27-mini-head::before,
.vp27-page .vp27-table-head::before,
.vp27-page .vp27-summary-head::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #76dda5 0%, #7648c9 100%) !important;
}

/* títulos dentro dos blocos */
.vp27-page .vp27-title-block h2,
.vp27-page .vp27-title-block h3,
.vp27-page .vp27-section-head h2,
.vp27-page .vp27-section-head h3,
.vp27-page .vp27-filter-head h2,
.vp27-page .vp27-filter-head h3,
.vp27-page .vp27-mini-head h2,
.vp27-page .vp27-mini-head h3,
.vp27-page .vp27-table-head h2,
.vp27-page .vp27-table-head h3,
.vp27-page .vp27-summary-head h2,
.vp27-page .vp27-summary-head h3 {
  color: #071734 !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  margin: 0 0 8px 24px !important;
}

.vp27-page .vp27-title-block p,
.vp27-page .vp27-section-head p,
.vp27-page .vp27-filter-head p,
.vp27-page .vp27-mini-head p,
.vp27-page .vp27-table-head p,
.vp27-page .vp27-summary-head p,
.vp27-page .vp27-title-block .vp27-muted,
.vp27-page .vp27-section-head .vp27-muted,
.vp27-page .vp27-filter-head .vp27-muted,
.vp27-page .vp27-mini-head .vp27-muted,
.vp27-page .vp27-table-head .vp27-muted,
.vp27-page .vp27-summary-head .vp27-muted {
  color: #6f688f !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  margin: 0 0 0 24px !important;
}

/* fallback para textos que ficaram “invisíveis” */
.vp27-page h1,
.vp27-page h2,
.vp27-page h3,
.vp27-page h4,
.vp27-page p,
.vp27-page span,
.vp27-page strong,
.vp27-page label {
  text-shadow: none !important;
}

/* cartões vazios / caixas brancas sem contraste */
.vp27-page .vp27-empty-card,
.vp27-page .vp27-white-box,
.vp27-page .vp27-info-box {
  background: #ffffff !important;
  border: 1px solid #e4d8f7 !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 20px rgba(78,37,108,.06) !important;
}

/* melhora o contraste do pill de resumo do filtro */
.vp27-page .vp27-filter-resume,
.vp27-page .vp27-range-pill {
  background: #f3ebff !important;
  border: 1px solid #d6bef5 !important;
  color: #5f2d9d !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
}

/* responsivo */
@media (max-width: 900px) {
  .vp27-page .vp27-hero-card h1,
  .vp27-page .vp27-hero-inner h1,
  .vp27-page .vp27-top-box h1,
  .vp27-page .vp27-title-block h2,
  .vp27-page .vp27-title-block h3,
  .vp27-page .vp27-section-head h2,
  .vp27-page .vp27-section-head h3,
  .vp27-page .vp27-filter-head h2,
  .vp27-page .vp27-filter-head h3,
  .vp27-page .vp27-mini-head h2,
  .vp27-page .vp27-mini-head h3,
  .vp27-page .vp27-table-head h2,
  .vp27-page .vp27-table-head h3,
  .vp27-page .vp27-summary-head h2,
  .vp27-page .vp27-summary-head h3 {
    font-size: 19px !important;
  }

  .vp27-page .vp27-title-block,
  .vp27-page .vp27-section-head,
  .vp27-page .vp27-filter-head,
  .vp27-page .vp27-mini-head,
  .vp27-page .vp27-table-head,
  .vp27-page .vp27-summary-head {
    padding: 18px 18px !important;
  }

  .vp27-page .vp27-title-block h2,
  .vp27-page .vp27-title-block h3,
  .vp27-page .vp27-section-head h2,
  .vp27-page .vp27-section-head h3,
  .vp27-page .vp27-filter-head h2,
  .vp27-page .vp27-filter-head h3,
  .vp27-page .vp27-mini-head h2,
  .vp27-page .vp27-mini-head h3,
  .vp27-page .vp27-table-head h2,
  .vp27-page .vp27-table-head h3,
  .vp27-page .vp27-summary-head h2,
  .vp27-page .vp27-summary-head h3,
  .vp27-page .vp27-title-block p,
  .vp27-page .vp27-section-head p,
  .vp27-page .vp27-filter-head p,
  .vp27-page .vp27-mini-head p,
  .vp27-page .vp27-table-head p,
  .vp27-page .vp27-summary-head p {
    margin-left: 18px !important;
  }
}

/* ===== FIM FASE 27E ===== */


/* =========================================================
   FASE 27F - PADRONIZAÇÃO REAL VENDAS POR PERÍODO
   Aplica nas classes reais: .vp27-shell / .vp27-hero / .vp27-table-head
   ========================================================= */

/* Fundo geral da aba */
.vp27-shell {
  width: 100% !important;
  color: #071734 !important;
}

/* Remove caixas brancas sem padrão e aplica estrutura limpa */
.vp27-shell .vp27-hero,
.vp27-shell .vp27-filters,
.vp27-shell .vp27-chart-card,
.vp27-shell .vp27-section {
  border-radius: 26px !important;
  border: 1px solid #e3d7f5 !important;
  background: #ffffff !important;
  box-shadow: 0 16px 36px rgba(78, 37, 108, .08) !important;
  overflow: hidden !important;
}

/* Cabeçalho principal igual padrão das outras abas */
.vp27-shell .vp27-hero {
  position: relative !important;
  padding: 32px 34px !important;
  background:
    radial-gradient(circle at 92% 18%, rgba(118, 221, 165, .25), transparent 26%),
    linear-gradient(135deg, #4e256c 0%, #7648c9 58%, #7da3d2 100%) !important;
  color: #ffffff !important;
}

.vp27-shell .vp27-hero::before {
  content: "" !important;
  position: absolute !important;
  left: 24px !important;
  top: 24px !important;
  bottom: 24px !important;
  width: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #76dda5 0%, #ffffff 100%) !important;
}

.vp27-shell .vp27-hero > div:first-child {
  padding-left: 22px !important;
}

.vp27-shell .vp27-badge {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.vp27-shell .vp27-title {
  color: #ffffff !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -.04em !important;
  margin: 12px 0 8px !important;
}

.vp27-shell .vp27-sub {
  color: rgba(255,255,255,.90) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
  max-width: 850px !important;
}

/* Bloco de filtros com título padronizado */
.vp27-shell .vp27-filter-top {
  position: relative !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 22px 24px 22px 48px !important;
  margin-bottom: 16px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #f8f5ff 0%, #eefaf5 100%) !important;
  border: 1px solid #e2d7f3 !important;
  box-shadow: none !important;
}

.vp27-shell .vp27-filter-top::before {
  content: "" !important;
  position: absolute !important;
  left: 22px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #76dda5 0%, #7648c9 100%) !important;
}

.vp27-shell .vp27-filter-top h2 {
  color: #071734 !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  margin: 0 0 6px !important;
  letter-spacing: -.02em !important;
}

.vp27-shell .vp27-filter-top p {
  color: #6f688f !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

/* Pill do período */
.vp27-shell .vp27-current {
  background: #f3ebff !important;
  color: #5f2d9d !important;
  border: 1px solid #d6bef5 !important;
  border-radius: 999px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

/* Cabeçalho dos gráficos: não deixar mais bloco branco/sem texto */
.vp27-shell .vp27-chart-title {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 64px !important;
  padding: 18px 22px 18px 48px !important;
  background: linear-gradient(135deg, #f8f5ff 0%, #eefaf5 100%) !important;
  border-bottom: 1px solid #e4d8f7 !important;
  color: #071734 !important;
  text-align: left !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
}

.vp27-shell .vp27-chart-title::before {
  content: "" !important;
  position: absolute !important;
  left: 22px !important;
  top: 16px !important;
  bottom: 16px !important;
  width: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #76dda5 0%, #7648c9 100%) !important;
}

.vp27-shell .vp27-chart-body {
  height: 330px !important;
  padding: 18px !important;
  background: #ffffff !important;
}

/* Cabeçalho das tabelas igual padrão das outras abas */
.vp27-shell .vp27-table-head {
  position: relative !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding: 20px 22px 20px 48px !important;
  background: linear-gradient(135deg, #f8f5ff 0%, #eefaf5 100%) !important;
  border-bottom: 1px solid #e4d8f7 !important;
}

.vp27-shell .vp27-table-head::before {
  content: "" !important;
  position: absolute !important;
  left: 22px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #76dda5 0%, #7648c9 100%) !important;
}

.vp27-shell .vp27-table-head h2 {
  color: #071734 !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  margin: 0 0 5px !important;
  letter-spacing: -.02em !important;
}

.vp27-shell .vp27-table-head p {
  color: #6f688f !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

/* Ferramentas de paginação dentro do cabeçalho */
.vp27-shell .vp27-tools {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.vp27-shell .vp27-tools select,
.vp27-shell .vp27-tools button {
  height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid #d8c8f2 !important;
  background: #ffffff !important;
  color: #4e256c !important;
  padding: 0 12px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

.vp27-shell .vp27-tools button {
  background: #7648c9 !important;
  color: #ffffff !important;
  border: 0 !important;
}

/* Evita qualquer texto branco nos blocos claros */
.vp27-shell .vp27-filter-top *,
.vp27-shell .vp27-chart-title *,
.vp27-shell .vp27-table-head * {
  text-shadow: none !important;
}

/* Corrige blocos em branco herdados do estilo anterior */
.vp27-shell .vp27-chart-card > div:first-child:empty,
.vp27-shell .vp27-section > div:first-child:empty {
  display: none !important;
}

/* Cards de métricas um pouco mais próximos do padrão */
.vp27-shell .vp27-kpi {
  border-radius: 22px !important;
  border: 1px solid #e4d8f7 !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(78,37,108,.07) !important;
}

.vp27-shell .vp27-kpi small {
  color: #7b6798 !important;
}

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

/* Tabelas alinhadas com cabeçalho roxo claro */
.vp27-shell .vp27-table th {
  background: #efe5f8 !important;
  color: #4e256c !important;
  border-bottom: 1px solid #dbcdf3 !important;
}

.vp27-shell .vp27-table td {
  color: #071734 !important;
}

/* Responsivo */
@media (max-width: 900px) {
  .vp27-shell .vp27-hero {
    padding: 24px 22px !important;
  }

  .vp27-shell .vp27-filter-top,
  .vp27-shell .vp27-table-head,
  .vp27-shell .vp27-chart-title {
    padding-left: 42px !important;
  }

  .vp27-shell .vp27-filter-top h2,
  .vp27-shell .vp27-table-head h2 {
    font-size: 18px !important;
  }

  .vp27-shell .vp27-chart-title {
    font-size: 16px !important;
  }
}

/* ===== FIM FASE 27F ===== */


/* ===== FASE 27G - TITULOS ROXOS ===== */

/* Hero principal */
.vp27-shell .vp27-hero {
  background: linear-gradient(135deg, #4e256c 0%, #6f2dbd 55%, #7f56d9 100%) !important;
}

.vp27-shell .vp27-hero .vp27-badge,
.vp27-shell .vp27-hero .vp27-title,
.vp27-shell .vp27-hero .vp27-sub {
  color: #ffffff !important;
}

/* Bloco de filtro superior com título roxo */
.vp27-shell .vp27-filter-top {
  background: linear-gradient(135deg, #5a2b87 0%, #7648c9 55%, #8f63d8 100%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

.vp27-shell .vp27-filter-top::before {
  background: linear-gradient(180deg, #76dda5 0%, #ffffff 100%) !important;
}

.vp27-shell .vp27-filter-top h2,
.vp27-shell .vp27-filter-top p {
  color: #ffffff !important;
}

.vp27-shell .vp27-current {
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

/* Título dos gráficos */
.vp27-shell .vp27-chart-title {
  background: linear-gradient(135deg, #6a1fb3 0%, #8a2be2 55%, #7b3fe4 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.vp27-shell .vp27-chart-title::before {
  background: linear-gradient(180deg, #76dda5 0%, #ffffff 100%) !important;
}

/* Cabeçalho das tabelas */
.vp27-shell .vp27-table-head {
  background: linear-gradient(135deg, #5b2c8b 0%, #7648c9 55%, #8a63d2 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.vp27-shell .vp27-table-head::before {
  background: linear-gradient(180deg, #76dda5 0%, #ffffff 100%) !important;
}

.vp27-shell .vp27-table-head h2,
.vp27-shell .vp27-table-head p {
  color: #ffffff !important;
}

/* Ferramentas nos cabeçalhos */
.vp27-shell .vp27-tools select {
  background: rgba(255,255,255,.96) !important;
  color: #4e256c !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}

.vp27-shell .vp27-tools button {
  background: #ffffff !important;
  color: #5f2d9d !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  font-weight: 900 !important;
}

/* Caso exista um bloco interno de título sem texto visível */
.vp27-shell .vp27-section > .vp27-table-head,
.vp27-shell .vp27-chart-card > .vp27-chart-title {
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08) !important;
}

/* ===== FIM FASE 27G ===== */


/* ===== FASE 27H - CONTRASTE VENDAS POR PERIODO ===== */

.vp27-shell{
  --vp27-text: #11203f;
  --vp27-text-soft: #5f6e8b;
  --vp27-purple-1: #5a2b87;
  --vp27-purple-2: #7648c9;
  --vp27-purple-3: #8b5cf6;
  --vp27-white: #ffffff;
}

/* ================================
   1) SUPERFÍCIES CLARAS = TEXTO ESCURO
================================ */
.vp27-shell .vp27-hero-card,
.vp27-shell .vp27-kpi-card,
.vp27-shell .vp27-mini-card,
.vp27-shell .vp27-insight-card,
.vp27-shell .vp27-chart-card,
.vp27-shell .vp27-table-card,
.vp27-shell .vp27-filter-box,
.vp27-shell .vp27-summary-card,
.vp27-shell .vp27-detail-card,
.vp27-shell .vp27-panel,
.vp27-shell .vp27-box,
.vp27-shell .vp27-content-box{
  color: var(--vp27-text) !important;
}

.vp27-shell .vp27-hero-card h1,
.vp27-shell .vp27-hero-card h2,
.vp27-shell .vp27-hero-card h3,
.vp27-shell .vp27-hero-card h4,
.vp27-shell .vp27-hero-card p,
.vp27-shell .vp27-kpi-card h1,
.vp27-shell .vp27-kpi-card h2,
.vp27-shell .vp27-kpi-card h3,
.vp27-shell .vp27-kpi-card h4,
.vp27-shell .vp27-kpi-card p,
.vp27-shell .vp27-mini-card h1,
.vp27-shell .vp27-mini-card h2,
.vp27-shell .vp27-mini-card h3,
.vp27-shell .vp27-mini-card h4,
.vp27-shell .vp27-mini-card p,
.vp27-shell .vp27-summary-card h1,
.vp27-shell .vp27-summary-card h2,
.vp27-shell .vp27-summary-card h3,
.vp27-shell .vp27-summary-card h4,
.vp27-shell .vp27-summary-card p,
.vp27-shell .vp27-detail-card h1,
.vp27-shell .vp27-detail-card h2,
.vp27-shell .vp27-detail-card h3,
.vp27-shell .vp27-detail-card h4,
.vp27-shell .vp27-detail-card p,
.vp27-shell .vp27-panel h1,
.vp27-shell .vp27-panel h2,
.vp27-shell .vp27-panel h3,
.vp27-shell .vp27-panel h4,
.vp27-shell .vp27-panel p,
.vp27-shell .vp27-box h1,
.vp27-shell .vp27-box h2,
.vp27-shell .vp27-box h3,
.vp27-shell .vp27-box h4,
.vp27-shell .vp27-box p,
.vp27-shell .vp27-content-box h1,
.vp27-shell .vp27-content-box h2,
.vp27-shell .vp27-content-box h3,
.vp27-shell .vp27-content-box h4,
.vp27-shell .vp27-content-box p{
  color: var(--vp27-text) !important;
}

.vp27-shell .vp27-kpi-label,
.vp27-shell .vp27-mini-label,
.vp27-shell .vp27-card-label,
.vp27-shell .vp27-card-subtitle,
.vp27-shell .vp27-muted,
.vp27-shell .vp27-soft,
.vp27-shell .vp27-description,
.vp27-shell .vp27-caption{
  color: var(--vp27-text-soft) !important;
}

/* números fortes */
.vp27-shell .vp27-kpi-value,
.vp27-shell .vp27-big-number,
.vp27-shell .vp27-total,
.vp27-shell .vp27-highlight-value{
  color: #0d1b38 !important;
}

/* ==========================================
   2) ÁREAS ROXAS = TEXTO BRANCO (somente nelas)
========================================== */
.vp27-shell .vp27-filter-top,
.vp27-shell .vp27-chart-title,
.vp27-shell .vp27-table-head,
.vp27-shell .vp27-purple-header,
.vp27-shell .vp27-title-band{
  background: linear-gradient(135deg, var(--vp27-purple-1) 0%, var(--vp27-purple-2) 55%, var(--vp27-purple-3) 100%) !important;
  color: #ffffff !important;
}

.vp27-shell .vp27-filter-top *,
.vp27-shell .vp27-chart-title *,
.vp27-shell .vp27-table-head *,
.vp27-shell .vp27-purple-header *,
.vp27-shell .vp27-title-band *{
  color: #ffffff !important;
}

/* barrinha lateral decorativa */
.vp27-shell .vp27-filter-top::before,
.vp27-shell .vp27-chart-title::before,
.vp27-shell .vp27-table-head::before,
.vp27-shell .vp27-purple-header::before,
.vp27-shell .vp27-title-band::before{
  background: linear-gradient(180deg, #76dda5 0%, #6f4bd3 100%) !important;
}

/* ==========================================
   3) HERO PRINCIPAL: card branco com texto escuro
========================================== */
.vp27-shell .vp27-hero{
  background: linear-gradient(135deg, #4e256c 0%, #6d34a6 55%, #7468c7 100%) !important;
}

.vp27-shell .vp27-hero .vp27-hero-card,
.vp27-shell .vp27-hero .vp27-card-main,
.vp27-shell .vp27-hero .vp27-card-left{
  background: #ffffff !important;
  color: var(--vp27-text) !important;
}

.vp27-shell .vp27-hero .vp27-badge{
  background: #eef0ff !important;
  color: #5c32a2 !important;
  border: 1px solid #d6c8f5 !important;
}

.vp27-shell .vp27-hero .vp27-title{
  color: #0f1b36 !important;
}

.vp27-shell .vp27-hero .vp27-sub{
  color: #5c6985 !important;
}

/* ==========================================
   4) TÍTULOS INTERNOS QUE ESTÃO SUMINDO
========================================== */
.vp27-shell .vp27-chart-title,
.vp27-shell .vp27-table-head,
.vp27-shell .vp27-filter-top{
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 18px 22px !important;
  border-radius: 20px !important;
}

.vp27-shell .vp27-chart-title h2,
.vp27-shell .vp27-table-head h2,
.vp27-shell .vp27-filter-top h2{
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  opacity: 1 !important;
}

.vp27-shell .vp27-chart-title p,
.vp27-shell .vp27-table-head p,
.vp27-shell .vp27-filter-top p{
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 4px 0 0 0 !important;
  opacity: .96 !important;
}

.vp27-shell .vp27-chart-title:empty,
.vp27-shell .vp27-table-head:empty,
.vp27-shell .vp27-filter-top:empty{
  display: none !important;
}

/* ==========================================
   5) TABELAS: texto escuro e alinhado
========================================== */
.vp27-shell table,
.vp27-shell .vp27-table{
  color: var(--vp27-text) !important;
}

.vp27-shell table thead th,
.vp27-shell .vp27-table thead th{
  color: #5a2b87 !important;
  font-weight: 900 !important;
  background: #efe8fb !important;
}

.vp27-shell table tbody td,
.vp27-shell .vp27-table tbody td{
  color: var(--vp27-text) !important;
  font-weight: 700 !important;
}

.vp27-shell table tbody td small,
.vp27-shell .vp27-table tbody td small,
.vp27-shell table tbody td .muted,
.vp27-shell .vp27-table tbody td .muted{
  color: var(--vp27-text-soft) !important;
}

.vp27-shell table tbody tr:nth-child(even),
.vp27-shell .vp27-table tbody tr:nth-child(even){
  background: #f8f5fd !important;
}

/* ==========================================
   6) CARDS KPI: não deixar subtítulo branco
========================================== */
.vp27-shell .vp27-kpi-card,
.vp27-shell .vp27-mini-card,
.vp27-shell .vp27-summary-card{
  background: #ffffff !important;
  border: 1px solid #ddd3f2 !important;
  box-shadow: 0 10px 24px rgba(90,43,135,.10) !important;
}

.vp27-shell .vp27-kpi-card .label,
.vp27-shell .vp27-kpi-card .sub,
.vp27-shell .vp27-mini-card .label,
.vp27-shell .vp27-mini-card .sub,
.vp27-shell .vp27-summary-card .label,
.vp27-shell .vp27-summary-card .sub{
  color: var(--vp27-text-soft) !important;
}

.vp27-shell .vp27-kpi-card .value,
.vp27-shell .vp27-mini-card .value,
.vp27-shell .vp27-summary-card .value{
  color: #0f1b36 !important;
}

/* ==========================================
   7) BOTÕES / CAMPOS: manter legíveis
========================================== */
.vp27-shell .vp27-btn-secondary,
.vp27-shell .vp27-tools button,
.vp27-shell .vp27-btn-light{
  background: #ffffff !important;
  color: #5a2b87 !important;
  border: 1px solid #d8c9f7 !important;
}

.vp27-shell .vp27-btn-primary{
  background: linear-gradient(135deg, #6a1fb3 0%, #8a2be2 100%) !important;
  color: #ffffff !important;
}

.vp27-shell input,
.vp27-shell select{
  background: #ffffff !important;
  color: #142241 !important;
  border: 1px solid #d8c9f7 !important;
}

/* ==========================================
   8) SEGURANÇA EXTRA:
   se algum bloco claro ainda herdou branco, corrigir
========================================== */
.vp27-shell .vp27-hero-card *,
.vp27-shell .vp27-kpi-card *,
.vp27-shell .vp27-mini-card *,
.vp27-shell .vp27-summary-card *,
.vp27-shell .vp27-detail-card *,
.vp27-shell .vp27-table-card *,
.vp27-shell .vp27-chart-card .vp27-card-body *,
.vp27-shell .vp27-panel *,
.vp27-shell .vp27-box *,
.vp27-shell .vp27-content-box *{
  text-shadow: none !important;
}

.vp27-shell .vp27-hero-card *:not(.vp27-badge):not(.vp27-btn-primary):not(.vp27-btn-secondary),
.vp27-shell .vp27-kpi-card *:not(.vp27-badge):not(.vp27-btn-primary):not(.vp27-btn-secondary),
.vp27-shell .vp27-mini-card *:not(.vp27-badge):not(.vp27-btn-primary):not(.vp27-btn-secondary),
.vp27-shell .vp27-summary-card *:not(.vp27-badge):not(.vp27-btn-primary):not(.vp27-btn-secondary),
.vp27-shell .vp27-detail-card *:not(.vp27-badge):not(.vp27-btn-primary):not(.vp27-btn-secondary),
.vp27-shell .vp27-table-card *:not(.vp27-badge):not(.vp27-btn-primary):not(.vp27-btn-secondary),
.vp27-shell .vp27-panel *:not(.vp27-badge):not(.vp27-btn-primary):not(.vp27-btn-secondary),
.vp27-shell .vp27-box *:not(.vp27-badge):not(.vp27-btn-primary):not(.vp27-btn-secondary),
.vp27-shell .vp27-content-box *:not(.vp27-badge):not(.vp27-btn-primary):not(.vp27-btn-secondary){
  color: var(--vp27-text) !important;
}

/* mas em cabeçalhos roxos continua branco */
.vp27-shell .vp27-filter-top * ,
.vp27-shell .vp27-chart-title *,
.vp27-shell .vp27-table-head *,
.vp27-shell .vp27-purple-header *,
.vp27-shell .vp27-title-band *{
  color: #ffffff !important;
}

/* ===== FIM FASE 27H ===== */