/* Painel: números do período e gráficos em SVG.
 * Regra 60-30-10: fundo claro, cartões brancos, dourado só no que decide
 * (matrículas e conversão). Agente = marinho, equipe = dourado-texto,
 * atenção = aviso. Cor do SVG sempre por classe, nunca no atributo.
 */

.painel-tela { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.pn-corpo { overflow: auto; min-height: 0; padding: var(--e-5) var(--e-5) var(--e-10); display: grid; gap: var(--e-5); align-content: start; }

/* Seletor de período */
.pn-periodos { display: inline-flex; gap: 2px; padding: 3px; background: var(--painel); border: 1px solid var(--borda); border-radius: var(--pilula); }
.pn-periodo {
  border: 0;
  background: transparent;
  color: var(--suave);
  font: inherit;
  font-size: var(--t-13);
  font-weight: 500;
  padding: 6px var(--e-3);
  border-radius: var(--pilula);
  cursor: pointer;
}
.pn-periodo:hover { color: var(--texto); }
.pn-periodo[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-leve); font-weight: 600; }
.pn-periodo:focus-visible { outline: 2px solid var(--marinho); outline-offset: 1px; }

/* Cartões de número */
.pn-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e-3); }
.pn-numero {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e-4);
  display: grid;
  gap: var(--e-1);
  align-content: start;
  box-shadow: var(--sombra-leve);
}
.pn-numero.destaque { border-color: var(--dourado-borda); background: var(--dourado-fundo); }
.pn-numero.alerta { border-color: var(--aviso); }
.pn-numero-rotulo { font-size: var(--t-12); text-transform: uppercase; letter-spacing: 0.06em; color: var(--suave); font-weight: 600; }
.pn-numero-valor { font-family: var(--fonte-titulo); font-size: var(--t-32); font-weight: 600; line-height: 1.1; color: var(--texto); font-variant-numeric: tabular-nums; }
.pn-numero.destaque .pn-numero-valor { color: var(--dourado-texto); }
.pn-numero-detalhe { font-size: var(--t-12); color: var(--suave); font-variant-numeric: tabular-nums; }
.pn-variacao { font-size: var(--t-12); color: var(--suave); font-variant-numeric: tabular-nums; }
.pn-variacao-num { font-weight: 600; margin-right: var(--e-1); padding: 1px 6px; border-radius: var(--pilula); background: var(--painel); color: var(--texto); }
.pn-variacao.bom .pn-variacao-num { background: var(--ok-fundo); color: var(--ok-texto); }
.pn-variacao.ruim .pn-variacao-num { background: var(--perigo-fundo); color: var(--perigo-texto); }
.pn-numero.alerta .pn-numero-detalhe { color: var(--aviso-texto); }

/* Como se calcula */
.pn-como { font-size: var(--t-12); color: var(--suave); }
.pn-como summary { cursor: pointer; width: fit-content; }
.pn-como summary:hover { color: var(--texto); }
.pn-como p { margin-top: var(--e-1); line-height: 1.45; }

/* Quadros dos gráficos */
.pn-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); align-items: start; }
.pn-quadro {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e-4);
  display: grid;
  gap: var(--e-3);
  min-width: 0;
  box-shadow: var(--sombra-leve);
}
.pn-quadro.largo { grid-column: 1 / -1; }
.pn-quadro-topo { display: flex; align-items: center; gap: var(--e-3); }
.pn-quadro-titulo { margin-right: auto; font-family: var(--fonte-titulo); font-size: var(--t-16); font-weight: 600; color: var(--texto); }
.pn-ver { font-size: var(--t-12); }

.pn-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); font-size: var(--t-12); color: var(--suave); }
.pn-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.pn-amostra { width: 10px; height: 10px; border-radius: 3px; background: currentColor; }

/* O desenho mantém largura mínima: o texto do SVG não encolhe abaixo do legível. */
.pn-vista { overflow-x: auto; }
.pn-svg { display: block; width: 100%; min-width: 520px; height: auto; }
.pn-sem-dado { padding: var(--e-6) var(--e-2); text-align: center; color: var(--suave); font-size: var(--t-13); }

.pn-svg .pn-rotulo { fill: var(--suave); font-size: var(--t-12); font-family: var(--fonte-corpo); }
.pn-svg .pn-rotulo.forte { fill: var(--texto); font-weight: 600; }
.pn-svg .num { font-variant-numeric: tabular-nums; }
.pn-svg .pn-grade { stroke: var(--borda); stroke-width: 1; }
.pn-svg .pn-eixo { stroke: var(--borda-forte); stroke-width: 1; }
.pn-svg .pn-linha { stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.pn-svg .pn-ponto { fill: var(--superficie); stroke: currentColor; stroke-width: 2; }

/* Séries: cada classe define fill (barra) e color (linha e amostra da legenda). */
.g-entrante { fill: var(--marinho); color: var(--marinho); }
.g-base { fill: var(--marinho-borda); color: var(--marinho-borda); }
.g-lead { fill: var(--borda-forte); color: var(--borda-forte); }
.g-agente { fill: var(--marinho); color: var(--marinho); }
.g-equipe { fill: var(--dourado-texto); color: var(--dourado-texto); }
.g-campanha { fill: var(--etq-azul-texto); color: var(--etq-azul-texto); }
.g-funil { fill: var(--marinho); color: var(--marinho); }
.g-ganho { fill: var(--ok); color: var(--ok); }
.g-perda { fill: var(--perigo); color: var(--perigo); }
.g-trilho { fill: var(--painel); }
.g-d-enviado { fill: var(--ok); color: var(--ok); }
.g-d-enviando { fill: var(--marinho-borda); color: var(--marinho-borda); }
.g-d-seco { fill: var(--borda-forte); color: var(--borda-forte); }
.g-d-falhou { fill: var(--perigo); color: var(--perigo); }
.g-d-incerto { fill: var(--aviso); color: var(--aviso); }
.pn-svg rect:hover { opacity: 0.85; }

/* Tabela do "ver números" */
.pn-numeros { overflow-x: auto; }
.pn-tabela { width: 100%; border-collapse: collapse; font-size: var(--t-13); }
.pn-tabela th, .pn-tabela td { padding: 6px var(--e-2); border-bottom: 1px solid var(--borda); text-align: left; }
.pn-tabela thead th { font-size: var(--t-12); color: var(--suave); font-weight: 600; }
.pn-tabela tbody th { font-weight: 500; }
.pn-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 1199px) {
  .pn-graficos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .pn-corpo { padding: var(--e-3) var(--e-3) var(--e-8); }
  .pn-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-numero-valor { font-size: var(--t-24); }
}