/* ═══════════════════════════════════════════════════════════════════════════
   ONDA · PAINEL DE INDICADORES · folha · v1.0 · 17/09/2026
   ───────────────────────────────────────────────────────────────────────────
   Par do renderizador marca/onda-painel-v1.js. Carregar SEMPRE depois de
   onda-scroll-v1.css, que é de onde vêm os tokens de cor e de tema.

   POR QUE EM ARQUIVO SEPARADO, E NÃO DENTRO DE onda-mock-v1.css
   O painel nasceu ali dentro, como seção 7, e durou uma tarde. A Clinic e a
   página de implementação **não carregam a folha de mockup**: nasceram em
   12/09, antes de ela existir em 15/09. Levar a folha inteira para essas duas
   só para ter o painel arrastaria junto vitrine, ferramenta, placeholder e as
   ações — trezentas linhas de estilo para classes que aquelas páginas já
   resolvem de outro jeito, com risco de mexer no que está aprovado.

   O painel é um componente: ele tem folha própria e renderizador próprio, e
   qualquer página do padrão o adota com dois arquivos e uma seção.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ O QUE ESTA FOLHA DESENHA ═════════════════════════════════════════════
   Acrescentado em 17/09/2026, a pedido do Yuri, e vale para as doze páginas.

   O QUE ELE RESOLVE
   Até aqui a Descoberta mostrava a conversa no WhatsApp e o que acontece nos
   bastidores, e parava. Faltava a terceira coisa que o dono compra junto: a
   LEITURA da operação. O painel entra logo depois da Descoberta e diz, com os
   indicadores do segmento, que tudo que ele acabou de ver vira número na mão
   dele — no celular, atualizado pela própria estrutura.

   O DESENHO mora no renderizador `onda-painel-v1.js`. Esta folha é só a
   aparência. Ver lá as decisões de visualização e por que a série usa uma cor
   só enquanto a composição usa duas.

   ─── CONTRATO DE DADOS ────────────────────────────────────────────────────
   A página declara, dentro de `<div class="pn" data-painel>`, um
   `<script type="application/json">` com:

     periodo  texto do carimbo vivo, ex. "Últimos 30 dias · atualizado agora"
     origem   (opcional) de onde o número vem, ex. "WhatsApp + CRM + site"
     kpis     [{r:"rótulo", v:38|"2 min", pre:"+", suf:"%",
                d:"12 a mais que no mês passado", t:"alta|baixa|neutro"}]  ×4
     serie    {tit, sub, un, rot:["S1",...], val:[12,18,...]}   uma medida só
     barras   {tit, sub, un, nota, itens:[{r:"rótulo", v:22}, ...]}
     comp     {tit, sub, un, nota, partes:[{r:"IA", v:318},{r:"Equipe", v:94}]}

   Nada é sorteado: os valores são fixos no JSON, porque estas páginas são
   gravadas em OBS e a mesma tomada tem de dar o mesmo número.
   ───────────────────────────────────────────────────────────────────────── */

.pn{margin-top:26px;display:grid;gap:14px}

/* ── o carimbo vivo ───────────────────────────────────────────────────────
   O pulso é decoração em CSS, não dado chegando. Existe porque "atualizado
   automaticamente" é exatamente a promessa que a seção faz, e uma etiqueta
   parada não a sustenta em vídeo.                                          */
.pn-cabeca{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.pn-vivo{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  background:var(--surface);padding:8px 13px}
.pn-pulso{width:7px;height:7px;flex:none;background:var(--verde);border-radius:50%;
  box-shadow:0 0 0 0 rgba(31,122,92,.55);animation:pn-bate 2.6s ease-out infinite}
@keyframes pn-bate{
  0%{box-shadow:0 0 0 0 rgba(31,122,92,.5)}
  70%{box-shadow:0 0 0 9px rgba(31,122,92,0)}
  100%{box-shadow:0 0 0 0 rgba(31,122,92,0)}}
@media(prefers-reduced-motion:reduce){.pn-pulso{animation:none}}
.pn-vivo-t{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.pn-origem{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}

/* ── os quatro tiles ──────────────────────────────────────────────────────
   Valor único não vira gráfico: vira número grande. Dois por linha no
   celular, porque quatro empilhados empurram o resto da seção para fora da
   primeira tela e o painel deixa de ser lido como painel.                  */
.pn-kpis{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pn-kpi{background:var(--surface);border:1px solid var(--line);padding:15px 15px 16px;
  display:grid;align-content:start;gap:7px;min-height:118px}
.pn-kpi .pn-rot{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.pn-v{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(25px,7.4vw,34px);font-weight:800;color:var(--ink);line-height:1;
  letter-spacing:-.035em}
.pn-d{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;line-height:1.5}
.pn-alta{color:var(--verde)}
.pn-baixa{color:var(--sol)}
.pn-neutro{color:var(--ink-3)}
/* O verde de estado do token é calibrado para o tema claro. Sobre a
   superfície do escuro ele fica em 2,4:1 e some; este é o mesmo verde um
   passo mais claro, medido em 4,6:1 contra #101a26. */
html[data-theme="dark"] .pn-alta{color:#3EA57E}

/* ── a grade dos três gráficos ───────────────────────────────────────────── */
.pn-grade{display:grid;gap:2px}
.pn-card{background:var(--surface);border:1px solid var(--line);padding:17px 16px 18px;
  display:grid;align-content:start;gap:14px;min-width:0}
.pn-h{display:grid;gap:4px}
.pn-tit{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.3}
.pn-sub{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.pn-nota{font-size:11.5px;color:var(--ink-3);line-height:1.6;padding-top:12px;
  border-top:1px solid var(--line)}

/* ── a série no tempo ─────────────────────────────────────────────────────
   Marca fina, grade recessiva, rótulo direto só no último ponto.           */
.pn-svg{width:100%}
/* recorte travado: nada do grafico escapa do card, aconteca o que acontecer
   com o comprimento de um rotulo. A folga interna ja e reservada no viewBox. */
.pn-svg svg{display:block;width:100%;height:auto;overflow:hidden}
.pn-grade-l{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.pn-linha{fill:none;stroke:var(--s1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pn-pt{fill:var(--s1);opacity:.55;pointer-events:none}
/* anel de 2px na cor da superfície: é o que separa o ponto da linha quando
   os dois se sobrepõem, em vez de virar um borrão */
.pn-pt-fim{fill:var(--s1);stroke:var(--surface);stroke-width:2.5;pointer-events:none}
.pn-alvo{fill:transparent;cursor:pointer}
.pn-alvo:hover + .pn-pt{opacity:1}
.pn-rotulo{fill:var(--ink);font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:-.01em}
.pn-eixo{fill:var(--ink-3);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase}

/* ── as barras ordenadas ──────────────────────────────────────────────────
   Uma cor só: quem separa as barras é o comprimento. O valor vem rotulado em
   toda linha, então nada depende de cor. Canto vivo, como manda o token.   */
.pn-barras{display:grid;gap:11px}
.pn-b{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:baseline}
.pn-b-r{font-size:12.5px;color:var(--ink-2);line-height:1.4;min-width:0}
.pn-b-v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;
  font-weight:700;color:var(--ink);white-space:nowrap}
.pn-b-t{grid-column:1/-1;height:8px;background:var(--raise);border:1px solid var(--line);
  overflow:hidden}
.pn-b-f{height:100%;background:var(--s1);transition:width var(--t-micro)}

/* ── a composição ────────────────────────────────────────────────────────
   Único gráfico com duas cores, porque aqui elas carregam identidade. Legenda
   presente, rótulo dentro de cada segmento e o par repetido no pé com o valor
   absoluto: três caminhos para o mesmo sentido, nenhum deles só a cor.

   O respiro de 2px entre os segmentos é a cor da superfície, não uma borda:
   borda clareia a tinta do segmento e falseia a comparação.

   A tinta do rótulo dentro do segmento é uma só para os dois: no tema escuro
   `--s1` e `--s2` são as duas claras e pedem texto noite; no claro as duas
   são escuras e pedem texto papel. Não precisa de regra por segmento.      */
.pn-leg{display:flex;flex-wrap:wrap;gap:8px 16px}
.pn-leg-i{display:inline-flex;align-items:center;gap:7px}
.pn-leg-c{width:10px;height:10px;flex:none}
.pn-leg-t{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}
.pn-comp{display:flex;gap:2px;height:40px;background:var(--surface)}
.pn-comp-s{position:relative;min-width:34px;display:grid;place-items:center;cursor:pointer}
.pn-comp-t{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:-.01em;
  color:var(--noite)}
html[data-theme="light"] .pn-comp-t{color:var(--papel)}
.pn-comp-pes{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pn-comp-p{background:var(--raise);border:1px solid var(--line);padding:11px 12px;display:grid;gap:4px}
.pn-comp-pr{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.pn-comp-pv{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:16px;
  font-weight:700;color:var(--ink);letter-spacing:-.02em}

.pn-pe{font-size:12.5px;color:var(--ink-3);line-height:1.65;max-width:76ch;margin-top:4px}

/* ── desktop ──────────────────────────────────────────────────────────────
   Quatro tiles numa fila. Os gráficos vão para duas colunas e a composição
   atravessa as duas, porque é a conclusão da leitura e não uma terceira
   fatia de mesmo peso.                                                     */
@media(min-width:761px){
  .pn{margin-top:30px}
  .pn-kpis{grid-template-columns:repeat(4,1fr)}
  .pn-kpi{min-height:132px;padding:18px}
  .pn-grade{grid-template-columns:1fr 1fr}
  .pn-card{padding:20px 20px 22px}
  .pn-card-larga{grid-column:1/-1}
  .pn-comp{height:46px}
  .pn-comp-pes{grid-template-columns:repeat(2,minmax(0,260px))}
}