/* ============================================================
   HARMONIA DE COR · calculada, não escolhida
   ------------------------------------------------------------
   METODOLOGIA
   1. 60-30-10 (LogRocket / sixtythirtyten): 60% neutro,
      30% marca, 10% acento.
   2. Âncora única: o azul do brandbook #2B6CB0 = H 211, S 61%, L 43%.
   3. Escala tonal: matiz TRAVADO em 211 para marca E neutro.
      O neutro é o mesmo azul com saturação de 12-28% — por isso
      cinza e azul combinam: são a mesma cor.
   4. Acentos por intervalo exato no círculo cromático a partir de
      211:  -60 (ok) · -165 (atenção) · +150 (erro) · +45 (extra).
   5. Saturação travada em 62% (a mesma da marca) e luminância
      RESOLVIDA POR BUSCA até cada acento medir contraste 4,5:1
      sobre branco. Todos os acentos têm o mesmo peso medido.
   6. Versão clara de cada acento resolvida do mesmo modo contra
      o azul escuro #1A4E8A, para a seção de fundo escuro.

   Antes: 82 cores soltas. Agora: 1 matiz-âncora + 4 intervalos.
   ============================================================ */
:root{
  /* ---------- 60% · NEUTRO (o azul 211 dessaturado) ---------- */
  --n-0:#FFFFFF;
  --n-50:#F8FAFB;
  --n-100:#F2F5F7;
  --n-200:#E0E5EB;
  --n-300:#C4CCD4;
  --n-500:#63707E;  /* texto de apoio: 5,06 branco - 4,83 n-50 - 4,62 n-100 */
  --n-700:#4F5B69;
  --n-900:#25303C;

  /* ---------- 30% · MARCA (matiz 211 travado) ---------- */
  --m-50:#F0F5F9;
  --m-100:#DDE8F4;
  --m-200:#ADCBEB;
  --m-300:#74A7DC;
  --m-400:#4382C7;
  --m-500:#2A6BB2;
  --m-600:#24578F;
  --m-700:#1E446B;
  --m-900:#162D46;

  /* ---------- 10% · ACENTO · texto e dado (4,5:1 sobre branco) ---------- */
  --a-ok:#208856;
  --a-atencao:#8F7521;
  --a-erro:#D34543;
  --a-extra:#7A58D8;

  /* acento para PREENCHIMENTO de gráfico
     S=48% (abaixo dos 62% da marca: o dado nunca grita mais que a marca)
     L buscado até TODAS terem luminância percebida 0.30 — barras do mesmo
     tamanho passam a pesar o mesmo aos olhos, que é o que faz um gráfico
     parecer harmônico em vez de berrante. */
  --g-azul:#6A99CB;
  --g-ok:#3BA873;
  --g-atencao:#BE8C46;
  --g-erro:#D27E81;
  --g-extra:#A487D5;
  /* versão para fundo escuro · mesma lógica, luminância 0.42 */
  --g-ok-claro:#34C57F;
  --g-atencao-claro:#D5A562;
  --g-erro-claro:#E49A9D;
  --g-extra-claro:#BBA2E6;

  /* acento CLARO · seção de fundo escuro (4,5:1 sobre #1A4E8A) */
  --a-ok-claro:#50E29B;
  --a-atencao-claro:#E2C050;
  --a-erro-claro:#F1ADAC;
  --a-extra-claro:#C5B4F3;

  /* fundo fraco do acento · mesma matiz, S 72% L 95% */
  --a-ok-fraco:#E9FBF3;
  --a-atencao-fraco:#FBF7E9;
  --a-erro-fraco:#FBE9E9;
  --a-extra-fraco:#EEE9FB;

  /* ---------- papéis ---------- */
  --sup-pagina:var(--n-0);
  --sup-alt:var(--n-50);
  --sup-card:var(--n-0);
  --sup-fundo-marca:linear-gradient(135deg,#1a4e8a 0%,#1d6ea0 55%,#1a7a8f 100%);
  --tx-forte:var(--n-900);
  --tx-medio:var(--n-700);
  --tx-fraco:var(--n-500);
  --tx-marca:var(--m-500);
}

/* ============================================================
   OS 82 TONS ANTIGOS PASSAM A APONTAR PARA A PALETA CALCULADA
   ============================================================ */
:root{
  --blue-primary:var(--m-500);  --blue-medium:var(--m-400);
  --blue-light:var(--m-300);    --blue-pale:var(--m-200);
  --cyan-light:var(--a-ok);
  --dark-primary:var(--n-900);  --dark-text:var(--n-900);
  --gray-600:var(--n-700);      --gray-400:var(--n-500);  /* era texto de apoio, precisa de 4,5:1 */
  --gray-200:var(--n-200);      --gray-100:var(--n-50);
  --white:var(--n-0);
  --success-bg:var(--a-ok-fraco); --success-text:var(--a-ok);

  --s-brand:var(--m-500);       --s-brand-light:rgba(42,107,178,.08);
  --s-brand-active:var(--m-600);
  --s-text:var(--n-900);        --s-text-2:var(--n-700);
  --s-muted:var(--n-500);       --s-faint:var(--n-300);
  --s-border:var(--n-200);      --s-border-light:var(--n-100);
  --s-success:var(--a-ok);      --s-warning:var(--a-atencao);
  --s-danger:var(--a-erro);     --s-info:var(--m-400);
  --s-purple:var(--a-extra);

  /* um único neutro alternado: a cor fica reservada para dado e ação */
  --fundo-alt:var(--n-50);   --fundo-cinza:var(--n-50);
  --fundo-creme:var(--n-50); --fundo-verde:var(--n-50);
  --fundo-lilas:var(--n-50);
}

/* ===== RITMO DE SEÇÃO: só branco e neutro-50 ===== */
.segmentos,.habito,#agentes,#comparativo,#clientes,.faixa-cred{background:var(--sup-pagina)}
.virada,.produto,.metodo,#integracoes,#fechar{background:var(--sup-alt)}
.duvidas{background:var(--sup-alt);background-image:none}
.dor{background:var(--sup-fundo-marca)}

/* ===== FORMAS DE FUNDO: só tons da marca ===== */
.forma.azul,.forma.lilas{background:radial-gradient(circle,var(--m-300),transparent 70%)}
.forma.verde,.forma.ambar{background:radial-gradient(circle,var(--m-200),transparent 70%)}
.forma{opacity:.34}

/* ===== SÉRIES DE DADO: ordem fixa, peso igual ===== */
.barra-l.azul    .barra-p{background:var(--g-azul)}
.barra-l.verde   .barra-p{background:var(--g-ok)}
.barra-l.laranja .barra-p{background:var(--g-atencao)}
.barra-l.roxo    .barra-p{background:var(--g-extra)}
.logo-chip i{background:var(--m-400)}

/* ===== ESTADOS ===== */
.kpi-leg.ok,.placar-leg.bom,.pn .pn-zero{color:var(--a-ok)}
.kpi-leg.aviso,.placar-leg.medio{color:var(--a-atencao)}
.kpi-leg.alerta,.placar-leg.ruim{color:var(--a-erro)}
.ic-sim{stroke:var(--a-ok)}
.ic-nao{stroke:var(--n-300)}
.pn b{color:var(--m-500)}

/* ===== TEXTO EM GRADIENTE: só tons da marca ===== */
.tx-grad{
  color:var(--m-500);
  background:linear-gradient(90deg,var(--m-500),var(--m-400),var(--m-300),var(--m-400),var(--m-500));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ===== SEÇÃO ESCURA: acentos na versão clara, medidos ===== */
.dor h2,.dor .kpi-num{color:var(--n-0)}
.dor .section-head p,.dor .grafico-nota{color:#C9E2F5}
/* (substituido abaixo por valores medidos) */
.dor .sintoma svg,.dor .kpi-leg.alerta{stroke:var(--a-erro-claro);color:var(--a-erro-claro)}
.dor .barras-canal .barra-l.verde .barra-p{background:var(--a-ok-claro)}
.dor .barras-canal .barra-l.azul .barra-p{background:var(--m-300)}
.dor .barras-canal .barra-l.verde .barra-p{background:var(--g-ok-claro)}
.dor .barras-canal .barra-l.laranja .barra-p{background:var(--g-atencao-claro)}
.dor .barras-canal .barra-l.roxo .barra-p{background:var(--g-extra-claro)}
.dor .barras-canal .barra-l.laranja .barra-p{background:var(--a-atencao-claro)}
.dor .barras-canal .barra-l.roxo .barra-p{background:var(--a-extra-claro)}

/* ============================================================
   NÚMERO NÃO QUEBRA LINHA — o erro visto no painel do método
   ("R$ 73.738,39" partia em duas linhas dentro do cartão)
   ============================================================ */
.kpi-num{
  white-space:nowrap;            /* o valor é uma unidade, nunca parte */
  font-size:clamp(1.25rem,3.4vw,1.85rem);
  overflow-wrap:normal;word-break:keep-all;
}
/* em cartão estreito o número encolhe em vez de quebrar */
@media(max-width:479px){ .kpi-num{font-size:clamp(1.1rem,6vw,1.5rem)} }
.painel-kpi{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
@media(min-width:640px){.painel-kpi{grid-template-columns:repeat(auto-fit,minmax(214px,1fr))}}
/* o rótulo também não pode empurrar o cartão */
.kpi-rot{min-height:2.1em;align-items:flex-start;line-height:1.25}
.kpi{display:flex;flex-direction:column;justify-content:flex-start}

/* ============================================================
   TEXTO NUNCA QUEBRA ONDE NÃO DEVE
   medido no navegador: rótulo, pastilha e chip partiam em 2-3 linhas
   ============================================================ */
/* rótulo do indicador: "Faturamento em pedidos" partia em 2 linhas.
   O texto passa a ocupar a linha inteira sem o ícone empurrar. */
.kpi-rot{
  display:flex;align-items:center;gap:7px;flex-wrap:nowrap;
  min-height:0;line-height:1.25;white-space:nowrap;
  font-size:.6rem;letter-spacing:.07em;
}
.kpi-rot svg{flex-shrink:0}
/* se ainda não couber, o texto encolhe — nunca quebra */
.kpi-rot > :not(svg),.kpi-rot{overflow:hidden;text-overflow:ellipsis}
@media(max-width:639px){ .kpi-rot{font-size:.58rem;letter-spacing:.05em} }

/* pastilha: nome e contagem sempre juntos */
.pastilha{white-space:nowrap;flex-wrap:nowrap;align-items:center}
.pastilha b{flex-shrink:0;white-space:nowrap}

/* chip de sistema: ponto e nome na mesma linha */
.logo-chip{white-space:nowrap;flex-wrap:nowrap;align-items:center}
.logo-chip i{flex-shrink:0}

/* regra geral: nada de órfão em rótulo curto */
.placar-rot,.p-card-topo span,.conecta-selo,.rosca-centro small,.rosca-mini-num small{
  white-space:nowrap;
}

/* pastilha: o número tinha padding próprio e descia 3px do texto.
   Agora ambos alinham pela mesma linha de base. */
.pastilha{line-height:1.4}
.pastilha b{
  padding:2px 8px;line-height:1.4;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;
}

/* ============================================================
   TEXTO DE APOIO LEGÍVEL
   medido: --n-300 (#C4CCD4) tem contraste 1,6 sobre branco.
   Serve para BORDA, nunca para texto. Todo texto de apoio passa
   para --n-500 (#707F8F, contraste 4,10) ou --n-700 (6,92).
   ============================================================ */
.quote .who span,.form-note,.app-caption,.balao .de,.balao-nota,
.tela-nota,.habito-legenda,.p-card-topo span,.placar-rot,.kpi-rot,
.rosca-centro small,.rosca-mini-num small,.pn small,.kpi-leg,
.funil-col .col-sum,.deal span,.fluxo i,.bloco .num .fonte,
.conversa small,.chat-topo small{
  color:var(--n-500);
}
/* rodapé escuro: texto claro o bastante */
footer a{color:#C9D6E4}
footer a:hover{color:var(--n-0)}
/* rótulo de seção em cartão: um passo mais escuro para passar em 4,5:1 */
.p-card-topo span,.placar-rot{color:var(--n-500)}

/* ============================================================
   CONTRASTE FECHADO — todos os valores buscados com margem (5,2:1)
   para sobreviver à composição de fundos com transparência
   ============================================================ */
/* sobre o azul escuro da seção da dor */
.dor .p-card-topo span{color:#B9CEE4}
.dor .fonte{color:#BDCEDF}

/* rodapé escuro */
footer .copy{color:#8498AD}
footer a{color:#B9C8D8}
footer a:hover{color:var(--n-0)}

/* inicial do avatar no depoimento */
.quote .avatar{color:#235B97}

/* slogan do fundador */
.slogan{color:#2763A4}

/* verde de destaque: selo, coluna vencedora, texto de sucesso */
.agente .selo,.pl-cab .destaque,.placar-leg.bom,.kpi-leg.ok,.pn .pn-zero{color:#1D7B4E}
.agente.copiloto .selo{color:#1D7B4E}

/* rótulos dentro de balões e caixas */
.balao .de,.conversa-viva .de,.conecta-cx small{color:var(--n-700)}

/* rótulo de seção no painel claro: o mesmo neutro legível */
.p-card-topo span,.placar-rot,.pl-cab .pl-c,.kpi-rot{color:var(--n-500)}
/* o rótulo do gráfico na seção escura fica claro (fundo azul) */
.dor .p-card-topo span{color:#B9CEE4}

/* ============================================================
   ÚLTIMO PASSE — os 16 casos restantes, medidos um a um
   ============================================================ */
/* numeral dentro do círculo das etapas (fundo m-100) */
.etapa-card .n{color:#1F4E82}
/* inicial do avatar do depoimento */
.quote .avatar{color:#1F5187}
/* rótulo do gráfico e fonte na seção escura */
.dor .p-card-topo span,.dor .fonte{color:#C6D8E9}
/* rótulos de coluna do placar */
.pl-cab .pl-c,.pl-cab .pl-crit{color:var(--n-700)}
/* qualquer rótulo minúsculo em maiúscula usa o neutro forte */
.eyebrow{color:var(--m-600)}
.dor .eyebrow{color:#C6D8E9;background:rgba(255,255,255,.16)}

/* ============================================================
   FECHAMENTO — os 9 últimos, medidos contra o gradiente real
   (o gradiente vai de #1a4e8a a #1a7a8f; o pior ponto é #1d6ea0)
   ============================================================ */
.dor .eyebrow{color:#F0F4F7;background:rgba(255,255,255,.18)}
.dor .p-card-topo span,.dor .fonte,.dor .grafico-nota,.dor .section-head p{color:#EAF0F5}
.dor .barras-canal .barra-l b,.dor .barras-canal i{color:#F1F4F6}
.dor .sintoma{color:#EDF3F8}

/* bloco de fechamento (mesmo gradiente) */
.fecha-texto p,.fecha-linha,.fecha-ok span{color:#EAF0F5}
.fecha-form input::placeholder{color:#C6D8E9}

/* âmbar do indicador em painel claro */
.kpi-leg.aviso{color:#92672B}

/* rótulo da coluna do gráfico de canais */
.grafico-canal .p-card-topo span{color:#EAF0F5}

/* últimos 4 — um passo mais escuro para cruzar 4,5:1 com folga */
.grafico-canal .p-card-topo span{color:#F2F6F9}
.placar-leg.medio{color:#8A6228}
.placar-leg.ruim{color:#B03B39}
.slogan{color:#245C9B}

/* o rótulo do gráfico na seção escura: seletor mais específico para vencer */
.dor .grafico-canal .p-card-topo span,
.dor .p-card .p-card-topo span{color:#F2F6F9}