:root {
  /* Escala do GIRO da carteira, medido em dois dias. Não é uma escala de
     "bom/ruim" moral: 100% quer dizer que a carteira do dia saiu inteira no
     prazo normal do pipeline, e um dia acima de 115% puxou trabalho atrasado.
     Verde só no que está no prazo; o adiantado é azul, porque também merece
     olhar — costuma vir depois de um dia travado. */
  --pvp-adiantado: #1f7fb8;
  --pvp-no-prazo: #2f8f6d;
  --pvp-atrasado: #c99206;
  --pvp-travado: #b93028;
  --pvp-carteira: #6b4bb8;
  --pvp-sem-dado: #7d8b93;
}

/* -------------------------------------------------------------------------
   O painel vive numa tela ESCURA

   A Central de Desempenho não usa os tokens claros: ela é uma superfície
   própria, `#11191d`, com as cores do texto escritas à mão em cada regra
   (`#f3f7f7`, `#eef3f4`). Este painel nasceu com `--ink` e `--muted`, que são
   as cores CLARAS do resto do sistema — quase pretas. Na tela escura os
   rótulos das barras e a tabela inteira sumiram no fundo.

   Em vez de repintar regra por regra, os tokens são redefinidos aqui dentro:
   tudo o que já usa `var(--ink)` e companhia vira claro de uma vez, e o painel
   continua legível se um dia a tela voltar a ser clara.
   ------------------------------------------------------------------------- */
.pvp-panel {
  --ink: #f4f8f8;
  --ink-2: #e3ecee;
  --muted: #9fb0af;
  --line: #2d383b;
  --line-strong: #46545a;
  --surface: #11191d;
  --surface-2: #182126;

  /* A escala da taxa também sobe de luminosidade: o verde #2f8f6d e o dourado
     #c99206 foram escolhidos para papel branco e afundam no #11191d. */
  --pvp-no-prazo: #34bd8b;
  --pvp-atrasado: #e9b52a;
  --pvp-adiantado: #57a9ee;
  --pvp-travado: #e8564b;
  --pvp-carteira: #a98cf0;
  --pvp-sem-dado: #7f8f98;
}

/* O `<select>` do sistema não herda cor de texto no Windows: sem isto a
   competência aparece como um retângulo escuro com letra escura. */
.pvp-panel .pvp-meses select { color: var(--ink); }
.pvp-panel .pvp-meses select option { color: #11242f; background: #fff; }


/* O painel ocupa a LINHA INTEIRA da grade de comparativos diários.
   Aquela grade é de três colunas; entrando como uma quarta célula, este painel
   — que leva gráfico, tabela e cartões — espremia os outros três. `1 / -1`
   coloca ele sozinho na própria linha, abaixo dos comparativos. */
.analytics-daily-grid > .pvp-panel {
  grid-column: 1 / -1;
}

/* Painel da pré-venda não entregue.
   Reaproveita as classes dos comparativos diários do dashboard (o gráfico em
   si) e acrescenta só o que é próprio: os cartões, a tabela e a nota. */

.pvp-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.pvp-kpis > div {
  padding: 11px 13px;
  border: 1px solid var(--line, #dce5e9);
  border-radius: 12px;
  background: var(--surface-2, #f7fafb);
}

.pvp-kpis span {
  display: block;
  color: var(--muted, #647883);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pvp-kpis strong {
  display: block;
  margin: 3px 0 1px;
  color: var(--ink, #11242f);
  font-size: 19px;
  letter-spacing: -.01em;
}

.pvp-kpis small { color: var(--muted, #647883); font-size: 11px; }

.pvp-tabela-wrap {
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid var(--line, #dce5e9);
  border-radius: 12px;
}

.pvp-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.pvp-tabela th {
  position: sticky;
  top: 0;
  padding: 9px 11px;
  background: var(--surface-2, #f7fafb);
  color: var(--muted, #647883);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.pvp-tabela td {
  padding: 8px 11px;
  border-top: 1px solid var(--line, #eef3f5);
  color: var(--ink-2, #1c3541);
  white-space: nowrap;
}

.pvp-tabela .num { text-align: right; }
.pvp-tabela .destaque { color: var(--pvp-travado, #b93028); font-weight: 800; }
.pvp-tabela tr.is-pendente td { color: var(--muted, #647883); }
.pvp-tabela tr.is-pendente .destaque { color: var(--muted, #647883); font-weight: 600; }
.pvp-tabela small { font-size: 10.5px; font-style: italic; }

.pvp-nota {
  margin: 12px 0 0;
  color: var(--muted, #647883);
  font-size: 11.5px;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .pvp-kpis { grid-template-columns: repeat(2, 1fr); }
  .pvp-kpis strong { font-size: 16px; }
}

/* Seletor de competência: dá acesso aos meses já fechados, que ficam
   registrados na tabela. */
.pvp-meses {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.pvp-meses label {
  color: var(--muted, #647883);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pvp-meses select {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line, #dce5e9);
  border-radius: 9px;
  background: var(--surface, #fff);
  color: var(--ink, #11242f);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Ranking por centro e supervisão
   Ordenado pelo VALOR não entregue: um centro com 30% sobre R$ 900 mil pesa
   mais no mês do que um com 60% sobre R$ 20 mil. A taxa fica ao lado, menor,
   como contexto.
   --------------------------------------------------------------------------- */
.pvp-ranking { margin-top: 16px; }

.pvp-ranking h4 {
  margin: 0 0 2px;
  color: var(--ink, #11242f);
  font-size: 13.5px;
}

.pvp-ranking-nota {
  margin: 0 0 10px;
  color: var(--muted, #647883);
  font-size: 11.5px;
}

.pvp-centro {
  border: 1px solid var(--line, #dce5e9);
  border-radius: 11px;
  margin-bottom: 7px;
  /* `--surface-2`, e não `--surface`: o cartão do centro tem de destacar do
     fundo do painel, que é a própria `--surface` nas duas telas. */
  background: var(--surface-2, #f7fafb);
}

.pvp-centro > summary {
  display: grid;
  grid-template-columns: minmax(120px, 1.3fr) minmax(60px, 2fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  cursor: pointer;
  list-style: none;
}

.pvp-centro > summary::-webkit-details-marker { display: none; }
.pvp-centro[open] > summary { border-bottom: 1px solid var(--line, #eef3f5); }

.pvp-centro-nome {
  overflow: hidden;
  color: var(--ink, #11242f);
  font-size: 12.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pvp-centro-barra {
  height: 9px;
  border-radius: 999px;
  /* O trilho era `--surface-2`, quase branco sobre um cartão branco: a barra
     parecia um risco solto no ar em vez de uma fatia de um total. */
  background: var(--line, #dce5e9);
  overflow: hidden;
}

.pvp-fill {
  display: block;
  height: 100%;
  width: 0;                 /* a largura vem por script: a CSP bloqueia style */
  border-radius: 999px;
  background: var(--pvp-atrasado, #c99206);
}

/* Mesma escala de cor do gráfico: quem lê o dia a dia reconhece o centro. */
.pvp-fill.is-no-prazo { background: var(--pvp-no-prazo, #2f8f6d); }
.pvp-fill.is-atrasado { background: var(--pvp-atrasado, #c99206); }
.pvp-fill.is-adiantado { background: var(--pvp-adiantado, #1f7fb8); }
.pvp-fill.is-travado { background: var(--pvp-travado, #b93028); }

.pvp-centro-valor {
  color: var(--pvp-travado, #b93028);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.pvp-centro-valor small {
  display: block;
  color: var(--muted, #647883);
  font-size: 10.5px;
  font-weight: 700;
}

.pvp-sups { margin: 0; padding: 4px 13px 10px; list-style: none; }

.pvp-sups li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--line, #f1f5f6);
  color: var(--ink-2, #1c3541);
  font-size: 12px;
}

.pvp-sups li:first-child { border-top: 0; }
.pvp-sup-valor { font-weight: 800; white-space: nowrap; }
.pvp-sup-valor small { color: var(--muted, #647883); font-weight: 600; }

@media (max-width: 640px) {
  .pvp-centro > summary { grid-template-columns: 1fr auto; }
  .pvp-centro-barra { display: none; }
}

/* Apoio no cabeçalho do cartão de Faturamento: "com pré-venda R$ 3,0 mi" ao
   lado do resultado do dia.

   O cartão tem fundo vermelho-escuro (#7b1b21) e texto branco. A primeira
   versão pintou este bloco com `--muted` e `--ink` — cinza e quase-preto sobre
   vinho, ilegível. Aqui a cor sai do próprio branco do cartão, em dois níveis
   de opacidade, e uma divisória fina separa o apoio do título sem pesar. */
.analytics-kpi-aside {
  margin-left: auto;
  /* Folga curta de propósito: o rótulo "Faturamento" tem `text-overflow:
     ellipsis` e um cartão de 218px o corta em "Faturam..." se este bloco tomar
     um pixel a mais do que precisa. */
  margin-right: 2px;
  padding-left: 7px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.72);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
  text-align: right;
  text-transform: uppercase;
  /* Sem isto "COM PRÉ-VENDA" quebra em duas linhas e o cabeçalho do cartão
     vira um bloco de três linhas que empurra o valor principal para baixo. */
  white-space: nowrap;
}

.analytics-kpi-aside i {
  font-style: normal;
}

.analytics-kpi-aside b {
  display: block;
  color: #fff;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   O gráfico

   Barra = reais que não entraram no dia. Linha = quanto isso pesou sobre a
   promessa daquele dia. As cores vão do azul ao vermelho conforme a TAXA, e
   não conforme o valor: R$ 800 mil sobre R$ 2,3 mi prometidos é um dia comum,
   os mesmos R$ 800 mil sobre R$ 1,0 mi é um dia perdido.

   Tudo aqui é classe de folha de estilo, nada de atributo `style`: a CSP do
   painel publicado bloqueia estilo embutido, e foi assim que as barras do
   histórico do Salarial saíram todas cheias.
   ------------------------------------------------------------------------- */
.pvp-chart { margin: 16px 0 0; }

.pvp-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 10px;
}

.pvp-chart-head h4 {
  margin: 0;
  color: var(--ink, #11242f);
  font-size: 14px;
  letter-spacing: -.01em;
}

.pvp-chart-head p {
  margin: 2px 0 0;
  color: var(--muted, #647883);
  font-size: 11.5px;
}

.pvp-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--muted, #647883);
  font-size: 11px;
}

.pvp-legenda span { display: inline-flex; align-items: center; gap: 5px; }

.pvp-chip {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--pvp-atrasado, #c99206);
}

.pvp-chip.is-no-prazo { background: var(--pvp-no-prazo, #2f8f6d); }
.pvp-chip.is-atrasado { background: var(--pvp-atrasado, #c99206); }
.pvp-chip.is-adiantado { background: var(--pvp-adiantado, #1f7fb8); }
.pvp-chip.is-travado { background: var(--pvp-travado, #b93028); }
.pvp-chip.is-vazia { background: var(--line-strong, #c9d6dc); }
.pvp-chip.is-linha {
  width: 16px;
  height: 0;
  border-radius: 0;
  background: none;
  border-top: 2px dashed var(--pvp-carteira, #6b4bb8);
}

/* Eixo à esquerda em reais, à direita em percentual. Os dois ficam FORA da
   área que rola, senão sumiriam no primeiro arrasto lateral. */
.pvp-chart-grid {
  display: grid;
  /* Uma coluna de eixo só: faturado e carteira são a mesma unidade e dividem a
     mesma escala. Dois eixos de reais lado a lado convidariam a ler as duas
     séries em réguas diferentes, que é o erro que este painel acabou de sair de
     cometer. */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}

.pvp-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 322px;
  padding: 24px 0 54px;
  color: var(--muted, #647883);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}


.pvp-chart-scroll { overflow-x: auto; overflow-y: hidden; }
.pvp-chart-scroll:focus-visible { outline: 2px solid var(--blue, #176fd1); outline-offset: 2px; }

/* O `styles.css` do pacote base tem um `svg { width:20px; height:20px;
   fill:none; stroke:currentcolor; stroke-width:1.8 }` para os ícones da
   interface. Ele pegava este gráfico também: o SVG virava um quadrado de 20px
   e, como `fill` e `stroke` são herdados, as barras saíam vazadas e os textos
   contornados. Aqui a regra é desfeita, e cada elemento pinta o próprio traço.

   `width:auto` faz o SVG voltar a usar os atributos `width`/`height` que o
   script escreve — a largura muda com a quantidade de dias do mês, e definir
   um valor fixo na folha de estilo quebraria os meses curtos. */
.pvp-svg {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  fill: none;
  stroke: none;
  stroke-width: 0;
}

.pvp-grade { stroke: var(--line, #dce5e9); stroke-width: 1; }
.pvp-base { stroke: var(--line-strong, #c9d6dc); stroke-width: 1.5; }

/* O padrão é NEUTRO, não uma das faixas: um dia cujo segundo dia de giro
   ainda não existe (19/08 e 20/08, que esbarram na fotografia vazia de 21/08)
   caía na cor de "atrasado" e acusava um atraso que ninguém mediu. */
.pvp-bar rect { fill: var(--pvp-sem-dado, #7d8b93); transition: opacity .12s ease; }
.pvp-bar.is-sem-dado rect { fill: var(--pvp-sem-dado, #7d8b93); }
.pvp-bar.is-no-prazo rect { fill: var(--pvp-no-prazo, #2f8f6d); }
.pvp-bar.is-atrasado rect { fill: var(--pvp-atrasado, #c99206); }
.pvp-bar.is-adiantado rect { fill: var(--pvp-adiantado, #1f7fb8); }
.pvp-bar.is-travado rect { fill: var(--pvp-travado, #b93028); }
.pvp-bar.is-vazia rect { fill: var(--line-strong, #c9d6dc); }
.pvp-bar:hover rect { opacity: .78; }

.pvp-rotulo {
  fill: var(--ink-2, #1c3541);
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

.pvp-carteira-linha {
  fill: none;
  stroke: var(--pvp-carteira, #6b4bb8);
  stroke-width: 2;
  stroke-dasharray: 6 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pvp-carteira-ponto {
  fill: var(--surface, #fff);
  stroke: var(--pvp-carteira, #6b4bb8);
  stroke-width: 2;
}

.pvp-media {
  stroke: var(--pvp-carteira, #6b4bb8);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  opacity: .55;
}

/* Halo branco por baixo do texto: a linha da média cruza o gráfico na altura
   dos rótulos das barras, e sem isso os dois se sobrepõem. `paint-order`
   desenha o contorno antes do preenchimento, senão o traço come a letra. */
.pvp-media-rotulo {
  fill: var(--pvp-carteira, #6b4bb8);
  font-size: 10px;
  font-weight: 700;
  stroke: var(--surface, #fff);
  stroke-width: 3.5;
  paint-order: stroke fill;
}

.pvp-eixo-x {
  fill: var(--ink-2, #1c3541);
  font-size: 10.5px;
  font-weight: 600;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

.pvp-eixo-x-sem {
  fill: var(--muted, #647883);
  font-size: 9.5px;
  text-anchor: middle;
}

/* Frase de leitura logo abaixo dos cartões: quem abre o painel quer a conta
   do mês em uma linha, antes de descer para o gráfico. */
.pvp-resumo {
  margin: 0 0 14px;
  padding: 10px 13px;
  border-left: 3px solid var(--pvp-adiantado, #1f7fb8);
  border-radius: 0 10px 10px 0;
  background: var(--surface-2, #f7fafb);
  color: var(--ink-2, #1c3541);
  font-size: 12.5px;
  line-height: 1.55;
}

.pvp-resumo b { font-variant-numeric: tabular-nums; }
.pvp-alerta { color: var(--muted, #647883); }

/* Etiqueta do valor na tabela, na mesma escala de cor do gráfico. */
.pvp-pill {
  display: inline-block;
  min-width: 78px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--pvp-sem-dado, #7d8b93);
}

.pvp-pill.is-no-prazo { background: var(--pvp-no-prazo, #2f8f6d); }
.pvp-pill.is-atrasado { background: var(--pvp-atrasado, #c99206); }
.pvp-pill.is-adiantado { background: var(--pvp-adiantado, #1f7fb8); }
.pvp-pill.is-travado { background: var(--pvp-travado, #b93028); }
.pvp-pill.is-vazia {
  background: transparent;
  color: var(--muted, #647883);
  font-weight: 600;
}

.pvp-tabela td small { color: var(--muted, #647883); font-weight: 500; }

@media (max-width: 720px) {
  .pvp-chart-head { flex-direction: column; align-items: flex-start; }
}

.pvp-ranking.is-vazio {
  padding: 12px 14px;
  border: 1px dashed var(--line-strong, #c9d6dc);
  border-radius: 12px;
  background: var(--surface-2, #f7fafb);
}

.pvp-ranking.is-vazio h4 { margin: 0 0 4px; }

.pvp-ranking-nota code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--line, #dce5e9);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px;
}

/* -------------------------------------------------------------------------
   Conciliação EXATA por cliente + fatura + produto.
   As classes pve- convivem com a folha anterior para que um pacote antigo que
   ainda carregue o mesmo arquivo não quebre. O novo script só produz pve-.
   ------------------------------------------------------------------------- */
.pve-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
}

.pve-controls label,
.pve-controls select {
  color: var(--ink, #f4f8f8);
  font-size: 12px;
  font-weight: 800;
}

.pve-controls select {
  min-height: 34px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line-strong, #46545a);
  border-radius: 8px;
  background: var(--surface, #11191d);
}

.pve-controls option { color: #102129; background: #fff; }

.pve-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
  gap: 10px;
}

.pve-kpis > div {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--line, #2d383b);
  border-radius: 11px;
  background: var(--surface-2, #182126);
}

.pve-kpis span,
.pve-kpis small {
  display: block;
  color: var(--muted, #9fb0af);
  font-size: 10.5px;
  font-weight: 700;
}

.pve-kpis span { letter-spacing: .04em; text-transform: uppercase; }

.pve-kpis strong {
  display: block;
  margin: 4px 0 3px;
  color: var(--ink, #f4f8f8);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.pve-kpis .is-good, .pve-good { color: #47d69c; }
.pve-kpis .is-late, .pve-late-text { color: #f3c54c; }
.pve-kpis .is-pending, .pve-pending-text { color: #ff746d; }

.pve-callout {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #65b9ff;
  border-radius: 0 8px 8px 0;
  background: #15252d;
  color: var(--ink-2, #e3ecee);
  font-size: 12px;
  line-height: 1.45;
}

.pve-chart { margin-top: 17px; }
.pve-chart-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 18px; }
.pve-chart-head h4, .pve-ranking h4 { margin: 0; color: var(--ink, #f4f8f8); font-size: 14px; }
.pve-chart-head p, .pve-ranking > p, .pve-note { margin: 3px 0 0; color: var(--muted, #9fb0af); font-size: 11.5px; line-height: 1.45; }

.pve-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted, #9fb0af); font-size: 11px; }
.pve-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pve-legend i { width: 10px; height: 10px; border-radius: 2px; background: #47d69c; }
.pve-legend .is-late { background: #f3c54c; }
.pve-legend .is-pending { background: #ff746d; }
.pve-legend .is-waiting { background: transparent; border: 1px dashed #91a4ac; }

.pve-chart-wrap {
  margin-top: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line, #2d383b);
  border-radius: 10px;
  background: #10191d;
}

.pve-chart-wrap:focus-visible { outline: 2px solid #65b9ff; outline-offset: 2px; }
.pve-svg { display: block; width: auto; height: auto; max-width: none; fill: none; stroke: none; stroke-width: 0; }
.pve-grid { stroke: #2a3b42; stroke-width: 1; stroke-dasharray: 3 4; }
.pve-base { stroke: #71858d; stroke-width: 1.2; }
.pve-y { fill: #b6c5c9; font-size: 10.5px; font-weight: 700; text-anchor: end; }
.pve-x, .pve-day { fill: #d6e0e2; font-size: 11px; font-weight: 800; text-anchor: middle; }
.pve-value { font-size: 10px; font-weight: 700; text-anchor: middle; }
.pve-total-value { fill: #d6e0e2; }
.pve-good-value { fill: #57d9a4; }
.pve-late-value { fill: #f3c54c; }
.pve-missing-value { fill: #ff827b; }
.pve-waiting-value { fill: #b6c5c9; }
.pve-on-time { fill: #42c893; }
.pve-late { fill: #e5b322; }
.pve-pending { fill: #e55650; }
.pve-waiting { fill: #41525a; stroke: #99aab0; stroke-width: 1.2; stroke-dasharray: 3 3; }

.pve-explainer {
  margin-top: 13px;
  padding: 12px 13px;
  border: 1px solid #345261;
  border-radius: 10px;
  background: #13232b;
}
.pve-explainer h4 { margin: 0 0 6px; color: var(--ink, #f4f8f8); font-size: 13px; }
.pve-explainer p { margin: 5px 0; color: var(--ink-2, #e3ecee); font-size: 11.5px; line-height: 1.5; }

.pve-ranking { margin-top: 18px; padding: 13px; border: 1px solid var(--line, #2d383b); border-radius: 11px; background: var(--surface-2, #182126); }
.pve-rank-row { display: grid; grid-template-columns: minmax(150px, 1.25fr) minmax(100px, 2fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line, #2d383b); }
.pve-rank-row:first-of-type { margin-top: 7px; }
.pve-rank-row span { overflow: hidden; color: var(--ink-2, #e3ecee); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pve-rank-row b { color: #ff746d; font-size: 12px; text-align: right; white-space: nowrap; }
.pve-rank-row b small { color: var(--muted, #9fb0af); font-size: 10.5px; }
.pve-rank-track { width: 100%; height: 8px; border: 0; border-radius: 99px; overflow: hidden; background: #34434a; }
.pve-rank-track::-webkit-progress-bar { background: #34434a; }
.pve-rank-track::-webkit-progress-value { background: #e55650; border-radius: 99px; }
.pve-rank-track::-moz-progress-bar { background: #e55650; border-radius: 99px; }

.pve-table-wrap { margin-top: 17px; overflow-x: auto; border: 1px solid var(--line, #2d383b); border-radius: 10px; }
.pve-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pve-table th { padding: 10px 11px; color: var(--muted, #9fb0af); font-size: 10px; letter-spacing: .045em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.pve-table td { padding: 9px 11px; border-top: 1px solid var(--line, #2d383b); color: var(--ink-2, #e3ecee); white-space: nowrap; }
.pve-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pve-table .is-waiting td { color: var(--muted, #9fb0af); }
.pve-status { display: inline-block; padding: 3px 7px; border-radius: 99px; background: #34434a; color: #d3e0e3; font-size: 10.5px; font-weight: 700; }
.pve-status.is-done { background: #17382d; color: #66ddb0; }
.pve-note { margin-top: 12px; }
.pve-note b { color: var(--ink, #f4f8f8); }

@media (max-width: 820px) {
  .pve-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pve-chart-head { align-items: flex-start; flex-direction: column; }
  .pve-rank-row { grid-template-columns: 1fr auto; }
  .pve-rank-track { display: none; }
}

@media (max-width: 460px) {
  .pve-kpis strong { font-size: 16px; }
  .pve-kpis { gap: 7px; }
  .pve-kpis > div { padding: 10px; }
}

/* Arrastada de dias anteriores, empilhada acima da pré-venda do dia. */
.pve-carried-in { fill: #4d9fe0; }
.pve-carried-open { fill: #a8672a; }
.pve-carried-value { fill: #e0a868; }
.pve-carried-in-value { fill: #8cc4f2; }
.pve-carried-text { color: #e0a868; }
.pve-legend .is-carried-in { background: #4d9fe0; }
.pve-legend .is-carried-open { background: #a8672a; }

/* Fotografia diária — todos os dias, demonstrativa. */
.pve-foto { margin-top: 20px; }
.pve-foto .pve-chart-head b { color: var(--ink, #f4f8f8); }
.pve-foto-day { fill: #d6e0e2; font-size: 11px; font-weight: 700; text-anchor: end; }
.pve-foto-total { fill: #b6c5c9; font-size: 11px; font-weight: 700; }
.pve-foto-pct { font-size: 10.5px; font-weight: 800; text-anchor: middle; }
.pve-foto-billed { fill: #13805c; }
.pve-foto-new { fill: #f1d49c; }
.pve-foto-old { fill: #c1741d; }
.pve-foto-billed-text { fill: #ffffff; }
.pve-foto-new-text { fill: #3b2c10; }
.pve-foto-old-text { fill: #ffffff; }
.pve-legend .is-foto-billed { background: #13805c; }
.pve-legend .is-foto-new { background: #f1d49c; }
.pve-legend .is-foto-old { background: #c1741d; }

/* Projeção de fechamento do mês. */
.pve-proj { margin-top: 18px; }
.pve-proj-selo { align-self: flex-start; padding: 4px 9px; border-radius: 99px; background: #23343c; color: #cfe0e4; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.pve-proj-selo.is-alta { background: #17382d; color: #66ddb0; }
.pve-proj-selo.is-media { background: #3a3220; color: #f0cf7a; }
.pve-proj-selo.is-baixa { background: #3d2626; color: #ff9b95; }
.pve-proj-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 10px; }
.pve-proj-card { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid var(--line, #2d383b); border-radius: 11px; background: var(--surface-2, #182126); }
.pve-proj-nome { color: var(--muted, #9fb0af); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pve-proj-card strong { color: var(--ink, #f4f8f8); font-size: 21px; line-height: 1.1; }
.pve-proj-detalhe { color: var(--ink-2, #e3ecee); font-size: 11.5px; }
.pve-proj-faixa { color: var(--muted, #9fb0af); font-size: 11px; line-height: 1.5; }
.pve-proj-barra { width: 100%; height: 7px; border: 0; border-radius: 99px; overflow: hidden; background: #34434a; }
.pve-proj-barra::-webkit-progress-bar { background: #34434a; }
.pve-proj-barra::-webkit-progress-value { background: #65b9ff; border-radius: 99px; }
.pve-proj-barra::-moz-progress-bar { background: #65b9ff; border-radius: 99px; }