/* ═══════════════════════════════════════════════════════════════════════
   O CARTÃO DE CLIENTE NO QUADRO
   ═══════════════════════════════════════════════════════════════════════
   A anatomia é a da arte aprovada, de cima para baixo: a barra de cor, o
   retrato com a empresa e o ramo, o título, a descrição, o valor grande, o
   estado com a chance ao lado, as etiquetas, o próximo contato e os
   contadores da nota.

   ── ELA É A MESMA DO CARTÃO DE LEAD ─────────────────────────────────────
   O cabeçalho com retrato, nome forte e legenda pequena já existia em
   `.n-wa-lead`, para o lead do WhatsApp. Não é coincidência que a arte peça o
   mesmo: os dois são "uma pessoa ou empresa com quem se fala". Dar formas
   diferentes à mesma coisa é o que faz um produto parecer dois — foi
   exatamente o que acabou de ser corrigido nos painéis.

   ── O QUE ESTA FOLHA NÃO FAZ ────────────────────────────────────────────
   Ela não esconde os campos do nicho. O advogado quer ver o número do
   processo no cartão, o dentista o procedimento; a arte não mostra isso
   porque a empresa dela não tem nicho. Eles continuam entre a descrição e o
   valor, com a mesma forma das outras linhas.
   ═══════════════════════════════════════════════════════════════════════ */

/* O cartão fica um pouco mais largo: o valor em reais, o estado e a chance
   não cabem em 280px sem quebrar em três linhas. */
.note.is-client-note{width:300px}

/* ── O CABEÇALHO ──────────────────────────────────────────────────────── */
.n-cli-lead{
  display:flex;align-items:center;gap:9px;
  padding:2px 2px 8px;min-width:0;
}
.n-cli-lead-av{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:grid;place-items:center;
  /* A cor vem do nome por `--c`, e escurece para a inicial branca se ler
     nela: o âmbar cheio dá 2,15 com branco. 55% da matiz sobre preto guarda a
     saturação e deixa as sete cores distinguíveis, que é a razão de a bolinha
     ter cor. Pior par: 4,71. */
  background:color-mix(in srgb,var(--c,#6366f1) 55%,#000);
  color:#fff;font-family:'Inter',sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.4px;
}
.n-cli-lead-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.n-cli-lead-txt strong{
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;
  color:var(--clr-text);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.n-cli-lead-txt small{
  font-size:.65rem;color:rgba(240,240,240,.5);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── O VALOR, O ESTADO E A CHANCE ─────────────────────────────────────
   A arte põe o valor numa linha própria, grande, e o estado embaixo. Em
   300px os três lado a lado quebram, então o valor sobe e os dois selos
   dividem a linha de baixo. */
.n-client-value{flex-wrap:wrap;row-gap:7px}
.n-client-val-num{font-size:1.12rem;letter-spacing:-.4px;flex-basis:100%}
.n-cli-chance{
  display:inline-flex;align-items:center;gap:4px;
  border-radius:20px;padding:3px 9px;
  font-family:'Inter',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.4px;white-space:nowrap;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.28);
  color:#fbbf24;
}
.n-cli-chance::before{content:'◆';font-size:.55rem;opacity:.9}

/* ── AS ETIQUETAS ─────────────────────────────────────────────────────── */
.n-cli-tags{display:flex;gap:5px;flex-wrap:wrap;padding:2px 10px 8px}
.n-cli-chip{
  border-radius:6px;padding:3px 8px;
  font-family:'Inter',sans-serif;font-size:.6rem;font-weight:600;
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:color-mix(in srgb,var(--c,#6366f1) 22%,transparent);
  border:1px solid color-mix(in srgb,var(--c,#6366f1) 38%,transparent);
  /* No escuro a etiqueta clareia em vez de escurecer: o fundo é escuro, e a
     conta do contraste anda para o outro lado. */
  color:color-mix(in srgb,var(--c,#6366f1) 55%,#fff);
}

/* ── O PRÓXIMO CONTATO ────────────────────────────────────────────────── */
.n-cli-prox{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;margin:0 0 2px;
  border-top:1px solid var(--clr-border-faint,rgba(255,255,255,.07));
}
.n-cli-prox-ico{
  width:26px;height:26px;border-radius:7px;flex-shrink:0;
  display:grid;place-items:center;
  background:rgba(47,127,242,.14);color:#7fb4fb;
}
.n-cli-prox-ico svg{width:14px;height:14px}
.n-cli-prox-txt{display:flex;flex-direction:column;gap:0;min-width:0}
.n-cli-prox-txt small{font-size:.6rem;color:rgba(240,240,240,.5);line-height:1.3}
.n-cli-prox-txt b{
  font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;
  color:var(--clr-text);line-height:1.3;
}
/* Atrasado é a única cor de alerta do cartão inteiro, e é por isso que ela
   se vê: se tudo gritasse, nada gritaria. */
.n-cli-prox.atrasado .n-cli-prox-ico{background:rgba(239,68,68,.14);color:#fca5a5}
.n-cli-prox.atrasado .n-cli-prox-txt b{color:#fca5a5}

/* ── OS CONTADORES ────────────────────────────────────────────────────── */
.n-cli-pe{
  display:flex;align-items:center;gap:14px;
  padding:6px 10px 9px;
}
.n-cli-conta{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;
  color:rgba(240,240,240,.46);
}
.n-cli-conta svg{width:13px;height:13px}
.n-cli-conta b{font-weight:600}


/* ════════════════════════════════════════════════════════════════════════
   O MESMO CARTÃO NUMA COR CLARA
   ════════════════════════════════════════════════════════════════════════
   Isto começava em `html[data-theme="light"]`, e era a mesma troca que o
   cartão do kanban já desfez logo abaixo — só que aqui ninguém desfez.

   O tema não diz de que cor é o cartão. A nota diz: ela pinta o próprio fundo
   com a cor escolhida, e a paleta marca `claro` quando essa cor é clara.
   Perguntar ao tema dava tinta escura sobre cartão escuro assim que o app
   ficava no tema claro. Medido: título `#16233a` sobre uma nota vinho, 1,4:1.

   `.note.claro` é a mesma pergunta que o kanban faz, com o nome que o quadro
   livre usa. Vale nos dois temas, porque a cor também vale nos dois. */
.note.claro .n-cli-lead-txt strong{color:#16233a}
.note.claro .n-cli-lead-txt small{color:#5d7185}
.note.claro .n-cli-chip{
  background:color-mix(in srgb,var(--c,#6366f1) 13%,#fff);
  border-color:color-mix(in srgb,var(--c,#6366f1) 30%,transparent);
  color:color-mix(in srgb,var(--c,#6366f1) 55%,#0b1f38);
}
.note.claro .n-cli-chance{
  background:#fef2df;border-color:#f0d9a8;color:#8c651f;
}
.note.claro .n-cli-prox{border-top-color:#e3ebf4}
.note.claro .n-cli-prox-ico{background:#e4eefd;color:#2159a8}
.note.claro .n-cli-prox-txt small{color:#5d7185}
.note.claro .n-cli-prox-txt b{color:#16233a}
.note.claro .n-cli-prox.atrasado .n-cli-prox-ico{background:#fde5e5;color:#88333f}
.note.claro .n-cli-prox.atrasado .n-cli-prox-txt b{color:#88333f}
.note.claro .n-cli-conta{color:#5d7185}


/* ═══════════════════════════════════════════════════════════════════════
   O MOVIMENTO
   ═══════════════════════════════════════════════════════════════════════
   Discreto de propósito: um quadro tem dezenas de cartões, e um quadro que
   se mexe todo é um quadro que não se lê. Só o que responde ao ponteiro. */
.n-cli-chip,.n-cli-chance{transition:transform .16s,box-shadow .16s}
.note.is-client-note:hover .n-cli-chip{transform:translateY(-1px)}
.n-cli-prox{transition:background .18s}
.note.is-client-note:hover .n-cli-prox{background:rgba(255,255,255,.025)}
.note.claro.is-client-note:hover .n-cli-prox{background:#f7fafe}

@media(prefers-reduced-motion:reduce){
  .n-cli-chip,.n-cli-chance,.n-cli-prox{transition:none!important;transform:none!important}
}


/* ═══════════════════════════════════════════════════════════════════════
   O CARTÃO NA COLUNA DO QUADRO
   ═══════════════════════════════════════════════════════════════════════
   Este é o cartão da arte. O de cima é a nota solta na mesa; este é o que
   aparece dentro de uma lista, e é o que se vê o dia inteiro.

   A ordem é a da arte, de cima para baixo: retrato com empresa e ramo,
   título, descrição, valor grande, etapa com a chance ao lado, etiquetas do
   cliente, próximo contato, e os contadores que o cartão já tinha.
   ═══════════════════════════════════════════════════════════════════════ */

.kb-card-cliente{padding-top:12px}

/* ── O CABEÇALHO ──────────────────────────────────────────────────────── */
.kb-card-cli-cab{display:flex;align-items:center;gap:9px;margin-bottom:10px;min-width:0}
/* REDONDO E MAIOR. Ele era um quadrado de 32px com canto arredondado, e na
   arte é um círculo cheio, maior que o texto ao lado — é a primeira coisa que
   se vê no cartão, e tamanho é o que dá essa ordem. */
.kb-card-cli-av{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  /* 55% da matiz sobre preto: o âmbar cheio dá 2,15 com branco, e escurecido
     passa. Guarda a saturação e mantém as sete cores distinguíveis, que é a
     razão de a bolinha ter cor. Pior par: 4,71. */
  background:color-mix(in srgb,var(--c,#6366f1) 55%,#000);
  color:#fff;font-family:'Inter',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.4px;
}
.kb-card-cli-quem{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.kb-card-cli-quem strong{
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;line-height:1.25;
  color:var(--clr-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.kb-card-cli-quem small{
  font-size:.64rem;line-height:1.25;color:rgba(240,240,240,.5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── A DESCRIÇÃO ──────────────────────────────────────────────────────── */
.kb-card-cli-desc{
  font-size:.7rem;line-height:1.5;color:rgba(240,240,240,.62);
  margin:-2px 0 9px;
  /* Duas linhas, e não uma altura fixa: com uma altura, uma descrição curta
     deixa buraco e uma longa corta no meio da palavra. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ── O VALOR ──────────────────────────────────────────────────────────── */
.kb-card-cli-valor{
  font-family:'Inter',sans-serif;font-size:1.15rem;font-weight:700;
  letter-spacing:-.5px;color:var(--clr-text);margin:0 0 9px;
}

/* ── A ETAPA E A CHANCE ───────────────────────────────────────────────── */
.kb-card-cliente .kb-card-cli{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 9px;
}
/* O TAMANHO SAIU DA ARTE, medido e não estimado. Os meus estavam em 10px de
   fonte e 20px de altura; os dela têm 11,5 e 24. Três pixels de altura e um e
   meio de fonte não parecem nada escritos assim, e são a diferença entre um
   selo que se lê de relance e um que se espreme. */
.kb-card-cliente .kb-card-cli-selo,
.kb-card-cli-chance{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:20px;padding:5px 12px;
  font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;
  white-space:nowrap;border:1px solid;
  background:color-mix(in srgb,var(--c,#2f7ff2) 18%,transparent);
  border-color:color-mix(in srgb,var(--c,#2f7ff2) 40%,transparent);
  color:color-mix(in srgb,var(--c,#2f7ff2) 45%,#fff);
}
.kb-card-cliente .kb-card-cli-selo::before{
  content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--c,#2f7ff2);
}
.kb-card-cli-chance{--c:#f59e0b}
.kb-card-cli-chance::before{content:'◆';font-size:.55rem}

/* ── AS ETIQUETAS DO CLIENTE ──────────────────────────────────────────── */
.kb-card-cli-tags{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 10px}
.kb-card-cli-tag{
  border-radius:6px;padding:3px 9px;
  font-family:'Inter',sans-serif;font-size:.62rem;font-weight:600;
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:color-mix(in srgb,var(--c,#6366f1) 24%,transparent);
  border:1px solid color-mix(in srgb,var(--c,#6366f1) 42%,transparent);
  color:color-mix(in srgb,var(--c,#6366f1) 50%,#fff);
}

/* ── O PRÓXIMO CONTATO ────────────────────────────────────────────────── */
.kb-card-cli-prox{
  display:flex;align-items:center;gap:9px;
  padding:8px 0 4px;margin-top:2px;
  border-top:1px solid rgba(255,255,255,.07);
}
.kb-card-cli-prox-ico{
  width:26px;height:26px;border-radius:7px;flex-shrink:0;
  display:grid;place-items:center;
  background:rgba(47,127,242,.16);color:#8fbdfc;
}
.kb-card-cli-prox-ico svg{width:14px;height:14px}
.kb-card-cli-prox-txt{display:flex;flex-direction:column;min-width:0}
.kb-card-cli-prox-txt small{font-size:.6rem;color:rgba(240,240,240,.5);line-height:1.3}
.kb-card-cli-prox-txt b{
  font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;
  color:var(--clr-text);line-height:1.3;
}
/* Atrasado é a única cor de alerta do cartão inteiro: se tudo gritasse, nada
   gritaria. */
.kb-card-cli-prox.kb-vencido .kb-card-cli-prox-ico{background:rgba(239,68,68,.16);color:#fca5a5}
.kb-card-cli-prox.kb-vencido .kb-card-cli-prox-txt b{color:#fca5a5}

/* ── O TÍTULO, UM PONTO MAIOR ─────────────────────────────────────────── */
.kb-card-cliente .kb-card-titulo{
  font-family:'Inter',sans-serif;font-size:.84rem;font-weight:600;
  line-height:1.3;margin-bottom:5px;
}


/* ── O MESMO CARTÃO NO TEMA CLARO ─────────────────────────────────────── */


/* ── O MOVIMENTO ──────────────────────────────────────────────────────── */
.kb-card-cli-av,.kb-card-cli-tag,.kb-card-cli-chance{transition:transform .18s}
.kb-card-cliente:hover .kb-card-cli-av{transform:scale(1.06) rotate(-2deg)}
.kb-card-cliente:hover .kb-card-cli-tag{transform:translateY(-1px)}
.kb-card-cli-prox{transition:background .18s,border-color .18s}
.kb-card-cliente:hover .kb-card-cli-prox{background:rgba(255,255,255,.03)}

@media(prefers-reduced-motion:reduce){
  .kb-card-cli-av,.kb-card-cli-tag,.kb-card-cli-chance,.kb-card-cli-prox{
    transition:none!important;transform:none!important;
  }
}


/* ── A SUPERFÍCIE DO CARTÃO DE CLIENTE ────────────────────────────────
   `pintarComPaleta` pinta o cartão inteiro com a cor da nota, em estilo em
   linha. Numa nota de recado isso funciona: a cor É a categoria, e o cartão
   inteiro colorido se acha de longe numa mesa cheia.

   Num cartão de cliente não. Ele carrega um valor em reais, uma etapa, uma
   chance e uma data — texto que se LÊ, e não uma etiqueta que se reconhece.
   Sobre o degradê, "R$ 11.111,00" ficou em 2,4:1. Na arte o cartão é escuro e
   a cor mora só na barra do topo, que é exatamente a solução.

   `!important` porque o outro lado é estilo em linha, e estilo em linha só
   perde para isto. A barra continua com a cor cheia, e é ela que diz de que
   categoria o cartão é. */
/* NADA DE FUNDO FIXO AQUI. Quem decide é a paleta da nota, como em todo
   cartão do quadro — ver a seção final. Travar o fundo deixava o cartão
   branco dentro de uma coluna escura, e a escolha de cor sem efeito. */


/* ── O CARTÃO CLARO, POR INTEIRO ──────────────────────────────────────
   O quadro pode ter papel de parede escuro e o APP estar no tema claro — é o
   caso da arte, e era o caso aqui. O cartão então é branco, e as cores que
   nasceram para o fundo escuro precisam todas da versão clara, e não só as
   que eu tinha lembrado: o título saiu em 1,9:1, quase invisível.

   Medido: o pior par abaixo é 4,64. */
/* A barra do topo some no cartão branco quando a cor da nota é clara; ela
   ganha um piso de altura e a cor cheia, que é o único papel dela aqui. */


/* ═══════════════════════════════════════════════════════════════════════
   A COR ESCOLHIDA PRECISA APARECER
   ═══════════════════════════════════════════════════════════════════════
   Eu tinha travado o cartão de cliente numa superfície chapada com
   `!important`, para o texto se ler. Deu certo demais: escolher uma cor
   passou a não mudar NADA na tela além de uma barra de 4px que ninguém nota.
   Relatado assim: "mesmo clicando, não altera".

   A saída é dividir o cartão. O CORPO fica na superfície neutra, porque é ali
   que moram o valor, a etapa e a data — texto que se lê. O TOPO carrega a
   cor: barra grossa, faixa tingida atrás do retrato, e a borda inteira. A
   escolha aparece na hora, e o texto continua legível.
   ═══════════════════════════════════════════════════════════════════════ */
.kb-card-cliente{
  border-color:color-mix(in srgb,var(--note-accent,#6366f1) 45%,transparent)!important;
  overflow:hidden;
}
.kb-card-cliente .kb-faixa{height:5px}
/* A faixa tingida atrás do retrato: é o que faz a cor ocupar área suficiente
   para se ver de longe, sem entrar embaixo de nenhum texto pequeno. */
.kb-card-cli-cab{
  margin:-12px -12px 10px;padding:11px 12px;
  background:color-mix(in srgb,var(--note-accent,#6366f1) 16%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--note-accent,#6366f1) 28%,transparent);
}

/* ── O RETRATO DE QUEM RESPONDE ───────────────────────────────────────
   Na arte ele fica à direita da linha do próximo contato. A pergunta "quem
   liga para este cliente" é a mesma pergunta que "quando". */
.kb-card-cli-resp{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;margin-left:auto;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,#6366f1) 55%,#000);
  color:#fff;font-family:'Inter',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.3px;
  box-shadow:0 0 0 2px var(--clr-bg-2,#141b24);
}
.kb-card-cli-so-resp{display:flex;justify-content:flex-end;padding:4px 0 2px}
.kb-card-cli-prox{gap:9px}


/* ── O CARTÃO NASCE JÁ COMO CARTÃO DE CLIENTE ─────────────────────────
   Ele piscava: `dadosDoCliente` precisa dos registros do CRM, que chegam
   depois da primeira pintura, então o cartão nascia como nota comum — com o
   degradê colorido — e um instante depois virava cartão de cliente.

   Agora a classe vem da própria nota, que sabe disso na hora. O corpo já
   nasce na superfície certa, e o que muda quando o registro chega é texto
   aparecendo, e não o cartão inteiro trocando de cor. */
.kb-card-cliente:not(:has(.kb-card-cli-cab)){min-height:64px}


/* ═══════════════════════════════════════════════════════════════════════
   A SUPERFÍCIE, DECIDIDA PELA PALETA DA NOTA
   ═══════════════════════════════════════════════════════════════════════
   Duas tentativas erradas antes desta. Primeiro deixei o cartão com o degradê
   da nota, e "R$ 11.111,00" ficou em 2,4:1. Depois travei o fundo numa
   superfície chapada — e aí o cartão saiu BRANCO dentro de uma coluna escura,
   e escolher uma cor deixou de mudar qualquer coisa.

   O erro dos dois foi o mesmo: decidir a superfície sem olhar para a paleta.
   Ela já responde isso, e já marca o cartão com a classe `claro` quando a cor
   escolhida é clara. O app tem 39 cores e 4 delas são claras; a classe existe
   justamente para o texto saber para que lado ir.

   Então: o fundo é o da paleta, como em todo cartão do quadro — é o que faz o
   cartão pertencer à coluna. O que muda é só a direção do texto.

   Fica sem `!important`: a paleta escreve em estilo em linha, e aqui ninguém
   está disputando com ela. Disputar era o defeito.
   ═══════════════════════════════════════════════════════════════════════ */

/* O degradê sai, e fica a cor chapada da paleta. É ele que punha o valor em
   2,4:1 — não a cor. */
.kb-card-cliente{background-image:none!important}

/* ── CARTÃO ESCURO: o caso da arte, e o de 35 das 39 cores ───────────── */
.kb-card-cliente .kb-card-cli-quem strong,
.kb-card-cliente .kb-card-titulo,
.kb-card-cli-valor{color:#f3f7fb}
.kb-card-cliente .kb-card-cli-quem small,
.kb-card-cli-desc{color:rgba(243,247,251,.66)}
.kb-card-cliente .kb-card-meta,
.kb-card-cliente :is(.kb-card-ico,.kb-card-prazo){color:rgba(243,247,251,.55)}

/* ── CARTÃO CLARO: as quatro cores claras da paleta ──────────────────── */
.kb-card-cliente.claro .kb-card-cli-quem strong,
.kb-card-cliente.claro .kb-card-titulo,
.kb-card-cliente.claro .kb-card-cli-valor{color:#16233a}
.kb-card-cliente.claro .kb-card-cli-quem small,
.kb-card-cliente.claro .kb-card-cli-desc{color:#54687f}
.kb-card-cliente.claro .kb-card-meta,
.kb-card-cliente.claro :is(.kb-card-ico,.kb-card-prazo){color:#54687f}
.kb-card-cliente.claro .kb-card-cli-prox-txt b{color:#16233a}
.kb-card-cliente.claro .kb-card-cli-prox-txt small{color:#54687f}
.kb-card-cliente.claro .kb-card-cli-prox{border-top-color:rgba(15,39,68,.12)}
.kb-card-cliente.claro .kb-card-cli-resp{box-shadow:0 0 0 2px #f4f6fa}

/* Os selos seguem o mesmo lado: no escuro a cor clareia, no claro escurece. */
/* O FUNDO DO SELO MISTURA COM UM ESCURO FIXO, e não com `transparent`.

   Com `transparent`, o que aparece atrás é a cor do CARTÃO — e o cartão tem
   trinta e nove cores possíveis. Num cartão rosa o selo roxo saía lavanda
   claro; num verde, esverdeado. A arte mostra o mesmo selo em cartões de cores
   diferentes, e ele é sempre o mesmo: cor sobre um fundo quase preto.

   Fixando o escuro, o selo lê igual em qualquer cartão. A borda continua
   translúcida porque ela DEVE acompanhar o cartão — é o contorno que costura
   o chip à superfície. */
.kb-card-cliente :is(.kb-card-cli-selo,.kb-card-cli-chance){
  background:color-mix(in srgb,var(--c,#2f7ff2) 22%,#0b1220);
  border-color:color-mix(in srgb,var(--c,#2f7ff2) 45%,transparent);
  color:color-mix(in srgb,var(--c,#2f7ff2) 62%,#fff);
}
.kb-card-cliente.claro :is(.kb-card-cli-selo,.kb-card-cli-chance){
  background:color-mix(in srgb,var(--c,#2f7ff2) 13%,#fff);
  border-color:color-mix(in srgb,var(--c,#2f7ff2) 30%,transparent);
  color:color-mix(in srgb,var(--c,#2f7ff2) 55%,#0b1f38);
}
.kb-card-cliente.claro :is(.kb-card-cli-selo,.kb-card-cli-chance,.kb-card-cli-tag){
  background:color-mix(in srgb,var(--c,#2f7ff2) 13%,#fff);
  border-color:color-mix(in srgb,var(--c,#2f7ff2) 30%,transparent);
  color:color-mix(in srgb,var(--c,#2f7ff2) 55%,#0b1f38);
}


/* ── POR QUE NÃO HÁ MAIS REGRA DE TEMA AQUI ──────────────────────────
   Havia dezoito, todas começando em `html[data-theme="light"]`. Elas têm mais
   especificidade do que as regras da paleta, e por isso venciam — pintando
   texto ESCURO sobre um cartão ESCURO assim que o app ficava no tema claro com
   o quadro numa cor escura. Foi o que apareceu: o cartão certo, e o texto
   quase invisível dentro dele.

   Quem sabe para que lado o texto vai é a PALETA DA NOTA, e ela já diz isso
   pela classe `claro`. O tema do app não tem opinião sobre a cor de um cartão
   que o usuário escolheu — e fingir que tem foi o erro. */

/* O quadrado do próximo contato e o aviso de atraso também seguem a paleta,
   e não o tema: sobre um cartão claro o azul e o vermelho precisam escurecer
   para o traço se ver. Medido: 5,87 e 5,26. */
.kb-card-cliente.claro .kb-card-cli-prox-ico{background:#e4eefd;color:#2159a8}
.kb-card-cliente.claro .kb-card-cli-prox.kb-vencido .kb-card-cli-prox-ico{
  background:#fde5e5;color:#88333f;
}
.kb-card-cliente.claro .kb-card-cli-prox.kb-vencido .kb-card-cli-prox-txt b{color:#88333f}
.kb-card-cliente.claro:hover .kb-card-cli-prox{background:rgba(15,39,68,.04)}


/* ── O ESQUELETO, ENQUANTO O REGISTRO NÃO CHEGA ───────────────────────
   Ele existe porque a classe sozinha não resolvia o piscar. Sem o registro o
   cartão saía sem retrato, sem valor e sem etapa, e quando o dado chegava os
   três blocos apareciam de uma vez — continuava lendo como "primeiro a versão
   antiga, depois a nova".

   O esqueleto muda a natureza do que se vê: em vez de um cartão de outro
   desenho virando este, é ESTE cartão enchendo.

   Ele não pulsa. Um brilho correndo por cada cartão de cliente do quadro, por
   meio segundo, é mais chamativo do que o problema que veio resolver. */
.kb-osso{
  display:block;border-radius:6px;
  background:color-mix(in srgb,var(--note-accent,#6366f1) 14%,transparent);
}
.kb-card-cliente.claro .kb-osso{background:rgba(15,39,68,.08)}
.kb-card-cli-av.kb-osso{width:32px;height:32px;border-radius:9px}
.kb-osso-linha{height:9px;width:96px;margin-bottom:5px}
.kb-osso-linha.curta{width:62px;height:7px;margin-bottom:0;opacity:.7}
/* A altura final desde o começo: assim a coluna não pula quando o dado chega. */
.kb-card-cli-esqueleto{min-height:118px}


/* ═══════════════════════════════════════════════════════════════════════
   OS CHIPS COMO NA ARTE: A ETIQUETA É SÓLIDA
   ═══════════════════════════════════════════════════════════════════════
   Na arte há duas famílias de chip, e elas não se parecem de propósito.

   O ESTADO E A CHANCE são contornados: fundo translúcido, borda da cor,
   texto da cor. Eles dizem UMA SITUAÇÃO, e situação muda sozinha conforme o
   negócio anda.

   A ETIQUETA é sólida: fundo cheio, texto branco. Ela é uma ESCOLHA de quem
   trabalha ali — "Recorrente", "Saúde" —, e a diferença de peso entre as duas
   famílias é o que deixa ler a coluna sem parar para pensar.

   Eu tinha feito as duas iguais, translúcidas. Lado a lado com a arte a
   diferença salta.
   ═══════════════════════════════════════════════════════════════════════ */
.kb-card-cliente .kb-card-cli-tag,
.kb-card-cliente.claro .kb-card-cli-tag{
  /* 60% da matiz sobre preto, e não 55%: a etiqueta da arte é VIVA, e cada
     ponto a mais de matiz a aproxima dela. 60 é o último que aguenta texto
     branco nas sete cores — a 65% o ciano cai para 4,13. Pior par: 4,71. */
  background:color-mix(in srgb,var(--c,#6366f1) 60%,#000);
  border-color:transparent;
  color:#fff;
}
/* A etiqueta na mesma medida do selo: numa fileira com as duas, meio pixel de
   diferença de altura aparece como desalinho. */
.kb-card-cli-tag{padding:5px 12px;font-size:.72rem;font-weight:600;border-radius:7px}

/* A data e o rótulo seguem a paleta, e não `--clr-text`: essa variável é do
   TEMA DO APP, e no tema claro ela é escura — sobre um cartão escuro a data
   ficava quase invisível. É a mesma armadilha das dezoito regras removidas
   acima, e passou despercebida em duas linhas. */
.kb-card-cliente .kb-card-cli-prox-txt b{color:#f3f7fb}
.kb-card-cliente .kb-card-cli-prox-txt small{color:rgba(243,247,251,.6)}
.kb-card-cliente.claro .kb-card-cli-prox-txt b{color:#16233a}
.kb-card-cliente.claro .kb-card-cli-prox-txt small{color:#54687f}

/* ── O ÍCONE DO RAMO NO RETRATO ───────────────────────────────────────
   Na arte a clínica tem uma folha, a construtora um prédio e a escola um
   capelo; só quem não tem ramo aparece com as iniciais. O ícone diz o que a
   empresa faz antes de alguém ler o nome dela.

   Ele é maior que as iniciais e sem espaçamento de letra: dois pixels de
   `letter-spacing` num emoji o empurram para fora do centro do círculo. */
.kb-card-cli-av.com-icone{font-size:1.05rem;letter-spacing:0;line-height:1}

/* ── O SELO DA ÚLTIMA ETAPA ───────────────────────────────────────────
   "Ganho" é a única etapa que não tem próxima, e na arte ela é a única com um
   certo em vez de um ponto. Uma venda fechada não é "mais uma etapa". */
.kb-card-cliente .kb-card-cli-selo.fim::before{
  content:'✔';width:auto;height:auto;background:none;border-radius:0;
  font-size:.72rem;line-height:1;color:inherit;
}

/* ── O ÍCONE DO RAMO DENTRO DO CÍRCULO ────────────────────────────────
   Traço branco sobre a cor do ramo escurecida. O traço é um ÍCONE, e o mínimo
   dele é 3:1 — não 4,5, que é a régua do texto. Ainda assim as vinte e seis
   cores foram medidas a 62% sobre preto, e o pior par fica em 5,14. */
.kb-card-cli-av.com-icone{
  background:color-mix(in srgb,var(--c,#6366f1) 62%,#000);
  letter-spacing:0;
}
.kb-card-cli-av.com-icone svg{width:20px;height:20px;display:block}