/* ==========================================================================
 * Gráficos dos indicadores do plano (UI-03) — a bolha com o gráfico de
 * distribuição que aparece ao PASSAR O MOUSE ou FOCAR um card do painel-resumo.
 * CSS puro, sem JS (NFR-005), no espírito da bolha de dicas.css. Tokens Vestra.
 * Carregado só na tela de detalhe (extra_head de detalhe.html), depois de
 * components.css — por isso o `.stat { position: relative }` aqui vence.
 * ========================================================================== */

/* O card precisa de contexto de posicionamento para ancorar a bolha. */
.stat { position: relative; }

/* Cards que têm gráfico: dão a dica visual de que há algo a explorar e ficam
 * focáveis por teclado (tabindex=0 no HTML) — a bolha também abre no foco. */
.stat--pop { cursor: help; }
.stat--pop:focus-visible { outline: 2px solid var(--purple-300); outline-offset: 2px; }

/* A bolha do gráfico, abaixo do card. Escondida até hover/foco. */
.stat-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 60;
  width: max-content;
  min-width: 232px;
  max-width: min(300px, 92vw);
  max-height: 320px;
  overflow: auto;
  padding: 10px 12px;
  background: var(--surface-card);
  border: 1px solid var(--color-mist);
  border-radius: 10px;
  box-shadow: var(--shadow-xl-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
  pointer-events: none;   /* não rouba o hover; a bolha é só leitura */
}

.stat--pop:hover .stat-pop,
.stat--pop:focus-within .stat-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Título curto acima do gráfico dentro da bolha. */
.stat-pop-titulo {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate);
  text-transform: none;
  letter-spacing: 0;
}

/* O SVG do gráfico ocupa a largura da bolha; a viewBox cuida da proporção. */
.grafico {
  display: block;
  width: 100%;
  height: auto;
}