: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;
}