/* painel-cliente.css: aba Resultados do Painel da clínica (11/10/2026, app-painel.js: montarResultados).
   Um cartão por serviço contratado. Cor só da marca TexLead (app.css): marinho --verde #0c1322,
   âmbar --dourado #f59e0b, tinta --dourado-tinta #b45309. Nunca verde de status nem esmeralda.
   Grade de colunas FIXAS (3, 2 abaixo de 1200 px, 1 abaixo de 700 px); número sem quebra; alvo de 44 px. */
.pr{min-width:0;max-width:100%}
.pr-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:2px 0 12px}
/* Envio ao vivo no desktop largo: o cartão do e-mail ocupa duas linhas da grade, e Tráfego e Leads
   deixam de esticar até a altura dele (a tela de 1366 x 768 cabe sem rolar). */
@media (min-width:1200px){.pr-card--email.pr-card--vivo{grid-row:span 2}}
@media (max-width:1199.98px){.pr-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699.98px){.pr-grade{grid-template-columns:minmax(0,1fr);gap:10px}}

.pr-card{container-type:inline-size;display:flex;flex-direction:column;min-width:0;background:var(--branco,#fff);
  border:1px solid var(--linha,rgba(12,19,34,.17));border-radius:13px;padding:12px 14px 10px;box-shadow:0 1px 0 rgba(12,19,34,.025)}
.pr-card--vivo{border-color:var(--dourado,#f59e0b);box-shadow:inset 0 3px 0 var(--dourado,#f59e0b)}
.pr-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 8px;min-width:0}
.pr-selo{margin-left:auto}
.pr-selo:empty{display:none}
.pr-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:9px;
  background:var(--verde,#0c1322);color:var(--dourado,#f59e0b)}
.pr-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pr-tit{margin:0;min-width:0;font-family:var(--f-display);font-size:.98rem;font-weight:700;color:var(--tinta,#0c1322);line-height:1.25}
.pr-cab .dica-q{margin-left:-6px}
.pr-corpo{flex:1 1 auto;min-width:0}

.pr-destaque{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0 0 8px;min-width:0}
.pr-num{font-family:var(--f-display);font-size:1.85rem;line-height:1.1;font-weight:800;letter-spacing:-.01em;color:var(--verde,#0c1322);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-num--txt{font-size:1.15rem;letter-spacing:0;white-space:normal}
.pr-rot{font-size:.84rem;color:var(--tinta2,#334155)}

/* Indicadores do cartão: quantas colunas couberem com o piso de cada tipo (valor em reais pede mais
   largura que contagem). O piso garante que "R$ 123.456,78" nunca quebre nem vaze da caixa. */
.pr-mets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.75rem),1fr));gap:8px;margin:0}
.pr-mets--contagem{grid-template-columns:repeat(auto-fit,minmax(min(100%,5.75rem),1fr))}
.pr-met{min-width:0;padding:6px 10px;border-radius:10px;background:var(--fundo-2,#f8fafc);border:1px solid var(--linha-s,rgba(12,19,34,.1))}
.pr-met dt{margin:0 0 1px;font-size:.75rem;color:var(--suave,#5a6779);line-height:1.3}
.pr-met dd{margin:0;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.pr-v{display:inline-block;font-size:.95rem;font-weight:700;color:var(--verde,#0c1322);font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-v--txt{font-size:.84rem;font-weight:600;color:var(--tinta2,#334155);white-space:normal}
.pr-met small{font-size:.75rem;color:var(--suave,#5a6779);line-height:1.3}
/* Quatro indicadores: dois por linha no cartão estreito, os quatro numa linha quando cabem (nunca 3 + 1). */
.pr-mets--n4{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:480px){.pr-mets--n4{grid-template-columns:repeat(4,minmax(0,1fr))}}

.pr-plats{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px}
.pr-plats li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:.84rem;color:var(--tinta2,#334155)}
.pr-plats .pr-plat{font-weight:600;color:var(--tinta,#0c1322)}
.pr-plats .pr-v{display:inline;font-size:.84rem}
.pr-plats small{font-size:.78rem;color:var(--suave,#5a6779);white-space:nowrap}

.pr-camp{margin:0 0 6px;font-weight:700;color:var(--tinta,#0c1322);overflow-wrap:anywhere}
.pr-vivo{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;white-space:nowrap;border-radius:999px;
  background:var(--dourado,#f59e0b);color:var(--verde,#0c1322);font-size:.78rem;font-weight:700}
.pr-pulso{width:8px;height:8px;border-radius:50%;background:var(--verde,#0c1322);animation:pr-pulso 1.6s ease-in-out infinite}
@keyframes pr-pulso{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.pr-pulso{animation:none}}
.pr-etapa{margin:0 0 6px}
.pr-etapa-r{display:block;font-size:.84rem;font-weight:600;color:var(--tinta2,#334155)}
.pr-etapa-l{display:flex;align-items:center;gap:8px;margin-top:4px}
.pr-barra{flex:1 1 auto;min-width:60px;height:8px;border-radius:999px;background:rgba(12,19,34,.1);overflow:hidden}
.pr-barra i{display:block;height:100%;border-radius:inherit;background:var(--dourado,#f59e0b)}
.pr-etapa-v{font-size:.78rem;color:var(--suave,#5a6779);white-space:nowrap;font-variant-numeric:tabular-nums}
.pr-prox{margin:0 0 10px;font-size:.84rem;color:var(--tinta2,#334155)}
.pr-prox b{color:var(--verde,#0c1322)}
.pr-nota{margin:8px 0 0;font-size:.8125rem;color:var(--suave,#5a6779)}

.pr-rodape{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px}
.pr-rodape-info{margin-right:auto;font-size:.75rem;color:var(--suave,#5a6779)}
.pr-rodape-info:empty{display:none}
.pr-rodape .btn{gap:6px}
.pr-rodape .btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:699.98px){.pr-rodape .btn{flex:1 1 140px}.pr-rodape-info{flex:1 1 100%}}

/* Clínica com a aba Resultados: são três abas, e a grade do telefone (quatro colunas, duas abaixo de
   360 px, em app.css) deixava uma vaga vazia ou jogava "Reporte e funil" para outra linha. :has() pede Chrome 105+. */
@media (max-width:700px){
  .painel-topo #painelAbas:has(> [data-aba="resultados"]):not(:has(> :nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Relatórios do cliente (16/10/2026, app-core.js: rRelatorios). As classes rel-cli nasceram sem regra e o svg()
   sai sem tamanho nem traço: o ícone de cada botão ocupava a largura do cartão, preenchido de preto (791 px em
   1280), e os chips de período encostavam um no outro. Ícone de 18 px em traço, como o .btn-icone do app.css. */
.rel-cli{min-width:0;max-width:100%}
.rel-cli + .rel-cli{margin-top:12px}
.rel-cli-t{margin:0 0 10px}
.rel-cli-per,.rel-cli-acoes,.rel-cli-links{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.rel-cli-faixa{margin:10px 0 0}
.rel-cli-erro{margin:10px 0 0}
.rel-cli-acoes,.rel-cli-links{margin-top:14px}
.rel-cli .btn{min-height:44px;display:inline-flex;align-items:center;gap:8px;max-width:100%}
.rel-cli .btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* O período escolhido só levava aria-pressed: mesmo visual do .chip.on do app.css. */
.rel-cli-per .chip[aria-pressed="true"]{background:var(--verde);color:var(--creme);border-color:var(--verde)}