/* Escalas partem de zero; rótulos e números independem da cor. */
.marketing-page .marketing-valor {
  display: block;
  font-size: var(--t-xl);
  margin-top: 12px;
}
.marketing-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 16px;
}
.marketing-filtros label {
  display: grid;
  gap: 8px;
}
.marketing-barra {
  display: grid;
  grid-template-columns: 90px minmax(20px, 1fr) 90px;
  gap: 12px;
  align-items: center;
  font-size: var(--t-sm);
}
.marketing-barra > :last-child {
  text-align: right;
}
.marketing-trilho {
  height: 12px;
  background: var(--pv-bg-2);
  overflow: hidden;
  border-radius: 3px;
}
.marketing-trilho > span {
  display: block;
  height: 100%;
  background: var(--pv-fg-2);
}
.marketing-depois > span {
  background: var(--pv-gold);
}
@media (max-width: 600px) {
  .marketing-page .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
  .marketing-barra {
    grid-template-columns: 75px minmax(12px, 1fr) 75px;
    gap: 8px;
  }
  .marketing-filtros label {
    flex: 1;
    min-width: 120px;
  }
}
@media (prefers-color-scheme: dark) {
  .marketing-page {
    color-scheme: dark;
    --pv-bg-0: #151a22;
    --pv-bg-1: #202733;
    --pv-bg-2: #303a48;
    --pv-fg-0: #f2f4f8;
    --pv-fg-1: #d5dce7;
    --pv-fg-2: #b3bfd0;
    --pv-gold: #8cbcff;
    background: var(--pv-bg-0);
    color: var(--pv-fg-0);
    border-radius: var(--pv-r-lg);
    padding: var(--pv-s-5);
  }
  .marketing-page :is(h1, h2, h3, strong) {
    color: var(--pv-fg-0);
  }
  .marketing-page :is(.muted, .sub) {
    color: var(--pv-fg-2);
  }
  .marketing-page a {
    color: var(--pv-gold);
  }
  .marketing-page :is(input, button) {
    background: var(--pv-bg-1);
    color: var(--pv-fg-0);
    border: 1px solid var(--pv-fg-2);
  }
}