/* Página de Estatísticas (estatisticas.html, js/stats.js).

   Os gráficos são barras horizontais em HTML/CSS, sem biblioteca — para
   barras, uma percentagem de largura faz o trabalho todo, e uma biblioteca
   traria também o seu próprio sistema de cores a competir com a rampa de
   custo que já é a linguagem de cor de dados da app.

   Horizontais e não verticais de propósito: os rótulos são nomes comerciais
   longos ("Cartão EDP Charge — Clientes energia"), e em barras verticais
   ficavam inclinados ou cortados. */
.stats-page { max-width: 820px; }
.stats-page section { margin-bottom: 2.6rem; }
.stat-explica {
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: 1.55;
  margin: 0 0 1rem;
}

/* O cenário é parâmetro e não constante: uma oferta faturada ao minuto varia
   5× entre um posto de 3,7 kW e um de 150 kW, e com um cenário fixo
   apareceria sempre barata ou sempre cara conforme o número escolhido. */
.stat-cenario {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
}
.stat-cenario label { display: inline-flex; align-items: center; gap: 0.35rem; }
.stat-cenario input,
.stat-cenario select {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font: inherit;
}
.stat-cenario input { width: 64px; }
.stat-cenario-resumo {
  margin: 0.5rem 0 1rem;
  font-size: var(--text-micro);
  color: var(--color-text-muted);
}

.stat-grafico { display: flex; flex-direction: column; gap: 3px; }

/* O rótulo ocupa a LINHA TODA por cima da barra, em qualquer largura; a barra
   e o valor ficam na linha seguinte, com o valor à direita em largura fixa e
   numerais tabulares, para os totais alinharem na vertical e se poderem
   comparar a olho sem ler cada um.
   
   Era a três colunas, com o rótulo numa coluna de 15rem e text-overflow:
   ellipsis — e o nome da oferta é precisamente o que se está a comparar. O
   nome mais comprido do catálogo tem 78 caracteres ("Cartão EDP Charge Frota
   Bi-Horário - desconto a clientes energia EDP Comercial"), 93 com o prefixo
   "melhor oferta: ", e a EDP tem quatro ofertas cujos primeiros 30
   caracteres são iguais: cortado, o rótulo dizia "Cartão EDP Charge - Cli…"
   em barras com preços diferentes, o que é o mesmo que não dizer nada. Esta
   disposição já era a do telemóvel (@media 560px, abaixo) pela mesma razão;
   passou a ser a única, em vez de duas. */
.stat-bar-row {
  display: grid;
  grid-template-columns: 1fr 4.2rem;
  align-items: center;
  gap: 0.15rem 0.6rem;
  padding: 3px 0;
}
.stat-bar-label {
  min-width: 0;
  grid-column: 1 / -1;
}
.stat-bar-name {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}
/* Sem nowrap nem ellipsis: um nome de duas linhas é melhor do que meio nome.
   overflow-wrap para o caso de um nome futuro trazer uma palavra ou um URL
   mais largo do que a coluna. */
.stat-bar-sub {
  display: block;
  font-size: var(--text-micro);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
/* A condição de acesso de cada oferta, com as mesmas palavras e a mesma forma
   do drawer do posto (.sim-marcador-acesso em css/simulator.css) — quem lê
   esta página e depois abre um posto no mapa tem de reconhecer o que vê. Não
   é um aviso: é uma propriedade da oferta, por isso tinta normal e não âmbar.
   Nunca cortados a meio ("só clientes de ene…"): passam para a linha
   seguinte, como o nome e o subtítulo. */
.stat-bar-marcadores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 1px;
}
.stat-marcador {
  font-size: var(--text-micro);
  font-stretch: var(--width-dense);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: 0 0.4rem;
  white-space: nowrap;
}
.stat-bar-track {
  background: var(--color-bg-elevated);
  border-radius: var(--radius-pill);
  height: 14px;
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.25s var(--ease-out);
}
.stat-bar-value {
  text-align: right;
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}
.stat-bar-row.is-destaque .stat-bar-value { font-weight: var(--weight-semibold); }

.stat-mais {
  align-self: flex-start;
  margin-top: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--text-micro);
  color: var(--color-accent);
  cursor: pointer;
}
.stat-nota {
  margin: 0.8rem 0 0;
  font-size: var(--text-micro);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.stat-vazio { color: var(--color-text-muted); font-size: var(--text-small); }

.stat-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}
.stat-tabela th,
.stat-tabela td {
  text-align: left;
  padding: 0.35rem 0.5rem 0.35rem 0;
  border-bottom: 1px solid var(--color-border);
}
.stat-tabela th { color: var(--color-text-muted); font-weight: var(--weight-semibold); }
.stat-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Telemóvel: só a coluna do valor encolhe — a disposição em duas linhas já é
   a de sempre (ver .stat-bar-row). */
@media (max-width: 560px) {
  .stat-bar-row {
    grid-template-columns: 1fr 3.6rem;
    gap: 0.15rem 0.5rem;
  }
}

/* Marca × oferta. A mesma empresa publica várias ofertas (a EDP tem oito), e
   por oferta o topo do gráfico ficava a ser cinco vezes a mesma marca — o que
   responde a "qual é a oferta mais barata" e não a "como se comparam os
   comercializadores". Reusa .neon-pill (css/effects.css), como o seletor de
   período do simulador. */
.stat-agrupar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0.6rem 0 1rem;
}
.stat-agrupar {
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font: inherit;
  font-size: var(--text-micro);
  cursor: pointer;
}
.stat-agrupar.is-on { border-color: var(--color-accent); }
.stat-agrupar-row .stat-cenario-resumo { margin: 0 0 0 auto; }

/* O filtro de condições de acesso: o mesmo molde do agrupamento (é o mesmo
   gesto — escolher uma vista), e não um terceiro vocabulário de botão. A
   contagem de cada opção vai dentro do próprio botão, como no toggle do
   drawer. */
.stat-filtro-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0 0 0.4rem;
}
.stat-filtro {
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font: inherit;
  font-size: var(--text-micro);
  cursor: pointer;
}
.stat-filtro.is-on { border-color: var(--color-accent); color: var(--color-text); }
.stat-filtro-n {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  margin-left: 0.15rem;
}
.stat-filtro.is-on .stat-filtro-n { color: inherit; }
.stat-filtro-nota {
  font-size: var(--text-micro);
  color: var(--color-text-muted);
  margin: 0 0 1rem;
  max-width: 60ch;
}

/* ── A rede ───────────────────────────────────────────────────────────────
   Números-cabeçalho antes das barras: "9 117 postos" responde à pergunta sem
   que seja preciso ler gráfico nenhum, e o gráfico fica para quem quer a
   repartição. Um número só não é um gráfico — e não deve fingir que é. */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}
.stat-tile {
  padding: 0.7rem 0.9rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.stat-tile-valor {
  font-size: var(--text-head);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-tile-rotulo { font-size: var(--text-small); color: var(--color-text-muted); margin-top: 0.15rem; }
.stat-tile-nota { font-size: var(--text-micro); color: var(--color-text-muted); margin-top: 0.1rem; }

/* ── Cobertura ────────────────────────────────────────────────────────────
   Medidor e não barra de ranking: aqui o que interessa é a fração de um todo,
   não a comparação entre linhas, por isso cada um tem a sua própria escala
   de 0 a 100% e diz o numerador e o denominador por extenso. */
.stat-medidores { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.stat-medidor-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--text-small);
  margin-bottom: 0.25rem;
}
.stat-medidor-topo b { font-variant-numeric: tabular-nums; }
.stat-medidor-nota { font-size: var(--text-micro); color: var(--color-text-muted); margin-top: 0.2rem; }

.stat-subtitulo {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  margin: 1.6rem 0 0.5rem;
}
.stat-tabela tr.is-atrasada td { color: var(--color-warning); }
.stat-fonte-rec { color: var(--color-text-muted); }
@media (max-width: 560px) {
  .stat-fonte-rec { display: none; }
}