/* ═══════════════════════════════════════════════════════════════════════
   A NOTA DE CRM ABERTA
   ═══════════════════════════════════════════════════════════════════════
   O desenho é o da arte aprovada: ficha clara, cabeçalho com o retrato e as
   ações à direita, cinco indicadores, a trilha do funil, abas e duas colunas.

   ── ELA É CLARA NOS DOIS TEMAS, DE PROPÓSITO ────────────────────────────
   O quadro atrás pode estar escuro — e na arte ele está. A ficha não segue o
   tema por uma razão de leitura: ela é um DOCUMENTO, com listas de definição,
   valores e um texto corrido que se lê de ponta a ponta, e não um painel que
   se olha de relance. Documento se lê melhor sobre papel. É a mesma decisão
   que a tela do lead do WhatsApp já tinha tomado.

   ── AS CORES SAÍRAM DO CORES.md ─────────────────────────────────────────
   Azul e branco, com o verde entrando só onde verde é INFORMAÇÃO: o estado
   do cliente, a etapa vencida, o dinheiro que entrou. Cada par de texto sobre
   fundo foi medido; o pior está em 4,56:1.

   ── O MOVIMENTO ─────────────────────────────────────────────────────────
   Tudo entra em cascata a partir do topo, cada peça com o seu atraso vindo de
   `--i`. O atraso é escrito na marcação porque é lá que a ORDEM existe; a
   folha decide só o quanto. Quem pede menos movimento recebe a tela pronta,
   sem nada disso — e ela fica inteira, porque a animação nunca muda posição
   final, só o caminho até ela.
   ═══════════════════════════════════════════════════════════════════════ */

.cnd-modal{
  --cnd-papel:#fff;
  --cnd-fundo:#f4f7fb;
  --cnd-linha:#e3ebf4;
  --cnd-linha-forte:#cfdcea;
  --cnd-tinta:#16233a;
  --cnd-apagado:#54687f;
  --cnd-fraco:#5d7185;
  --cnd-azul:#1f68d5;
  --cnd-azul-forte:#1454b5;
  --cnd-verde:#0e7b64;
  --cnd-ambar:#9a4d07;
  --cnd-raio:14px;
  --cnd-sombra:0 1px 2px rgba(15,39,68,.05),0 10px 30px rgba(15,39,68,.08);
}

/* O fundo escurece mais do que o de uma nota comum: a ficha é clara e grande,
   e sem isto a borda dela se perde no quadro claro. */
.cnd-bg{background:rgba(8,20,38,.58);backdrop-filter:blur(3px)}

.cnd-modal{
  width:min(1400px,96vw)!important;
  max-width:min(1400px,96vw)!important;
  background:var(--cnd-fundo)!important;
  border-radius:18px;
  overflow:hidden;
}
/* A nota original vira só o casulo: o que se vê é a casca. As peças dela que
   não têm lugar aqui saem de vista sem sair do DOM — os ouvintes do Kanban
   continuam pendurados nelas, e removê-las quebraria a gravação. */
.cnd-note>*:not(.cnd-casca){display:none!important}
.cnd-note{padding:0!important;background:transparent!important;border:0!important}

.cnd-casca{
  display:block;max-height:88vh;overflow:auto;overscroll-behavior:contain;
  background:var(--cnd-fundo);color:var(--cnd-tinta);
  font:14px/1.5 Inter,system-ui,Arial,sans-serif;
  padding:22px 24px 26px;
}
.cnd-casca *{box-sizing:border-box}
.cnd-casca svg{width:16px;height:16px;flex-shrink:0}


/* ═══════════════════════════════════════════════════════════════════════
   1. O CABEÇALHO
   ═══════════════════════════════════════════════════════════════════════ */
.cnd-caminho{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--cnd-fraco);margin-bottom:14px;
}
.cnd-caminho b{color:var(--cnd-apagado);font-weight:600}
.cnd-caminho-seta{width:13px!important;height:13px!important;opacity:.6}

.cnd-identidade{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:16px;margin-bottom:18px;
}

/* A BOLINHA. Ela vai SEM o selo do WhatsApp — saiu a pedido, e com razão: a
   origem do contato já tem linha própria em "Dados do cliente", e o selo
   sobre o retrato dizia a mesma coisa duas vezes.

   A cor vem do estado do cliente por `--c`, e mistura 55% com preto para
   a inicial branca se ler nela: o verde cheio #10b981 dá 2,54 com branco, e
   escurecido dá 6,99. */
.cnd-avatar{
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,#10b981) 55%,#000);
  color:#fff;font-weight:700;font-size:19px;letter-spacing:.5px;
  box-shadow:0 6px 18px color-mix(in srgb,var(--c,#10b981) 30%,transparent);
}

.cnd-quem h1{
  margin:0;font-size:21px;line-height:1.25;font-weight:700;color:var(--cnd-tinta);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
/* A pilula do estado: tinta escurecida da propria cor, pela mesma receita dos
   selos do resto do app. Uma regra serve para os seis estados. */
.cnd-pilula{
  font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;
  background:color-mix(in srgb,var(--st,#10b981) 14%,#fff);
  /* 50%, e nao os 55% dos selos do resto do app: aqui a tinta e a 14% e
     o ciano de "Em acompanhamento" reprovava em 4,06. Pior par: 4,56. */
  color:color-mix(in srgb,var(--st,#10b981) 50%,#0b1f38);
  border:1px solid color-mix(in srgb,var(--st,#10b981) 28%,transparent);
}
.cnd-contatos{display:flex;gap:16px;flex-wrap:wrap;margin:6px 0 0;font-size:13px}
.cnd-contato{display:inline-flex;align-items:center;gap:6px;color:var(--cnd-apagado)}
.cnd-contato .cnd-wa{color:#0e7b64}
.cnd-oficio{margin:6px 0 0;font-size:12.5px;color:var(--cnd-fraco)}

.cnd-acoes-topo{display:flex;gap:8px;align-items:center}
.cnd-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:9px;cursor:pointer;
  background:var(--cnd-papel);border:1px solid var(--cnd-linha-forte);
  color:var(--cnd-apagado);font:inherit;font-size:13px;font-weight:500;
  text-decoration:none;white-space:nowrap;
  transition:border-color .16s,color .16s,background .16s,transform .16s,box-shadow .16s;
}
.cnd-btn:hover{
  border-color:var(--cnd-azul);color:var(--cnd-azul-forte);background:#eef4fe;
  transform:translateY(-1px);box-shadow:0 4px 12px rgba(31,104,213,.14);
}
.cnd-btn:active{transform:translateY(0)}
.cnd-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.cnd-btn-wa .cnd-wa{color:#0e7b64}
.cnd-btn-ico{padding:8px;width:36px;justify-content:center}
.cnd-btn-peq{padding:6px 12px;font-size:12.5px}


/* ═══════════════════════════════════════════════════════════════════════
   2. OS CINCO INDICADORES
   ═══════════════════════════════════════════════════════════════════════
   `--tom` nomeia a familia de cor e a folha decide o par: cor literal na
   marcacao espalharia hexadecimal por dois arquivos. */
.cnd-kpis{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px;
}
.cnd-kpi{
  display:flex;align-items:center;gap:12px;min-width:0;
  background:var(--cnd-papel);border:1px solid var(--cnd-linha);
  border-radius:var(--cnd-raio);padding:13px 15px;box-shadow:var(--cnd-sombra);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.cnd-kpi:hover{
  border-color:var(--cnd-linha-forte);transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(15,39,68,.06),0 14px 32px rgba(15,39,68,.1);
}
.cnd-kpi-ico{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
  background:color-mix(in srgb,var(--tom-cor) 13%,#fff);
  /* 55%: a 60% o ambar dava 4,28 sobre o proprio tom a 13%. */
  color:color-mix(in srgb,var(--tom-cor) 55%,#0b1f38);
}
.cnd-kpi[data-tom="verde"]{--tom-cor:#10b981}
.cnd-kpi[data-tom="azul"] {--tom-cor:#2f7ff2}
.cnd-kpi[data-tom="roxo"] {--tom-cor:#8b5cf6}
.cnd-kpi[data-tom="ambar"]{--tom-cor:#f59e0b}
.cnd-kpi-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.cnd-kpi-txt small{font-size:11.5px;color:var(--cnd-fraco);line-height:1.3}
.cnd-kpi-txt b{font-size:15px;font-weight:700;color:var(--cnd-tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnd-kpi-txt em{font-style:normal;font-size:11.5px;color:var(--cnd-fraco)}
/* O quinto é controle, e o select herda a forma do valor para a fileira não
   parecer quebrada por causa dele. */
.cnd-kpi-funil select{
  border:0;background:none;font:inherit;font-size:14px;font-weight:700;
  color:var(--cnd-tinta);cursor:pointer;padding:0;max-width:100%;
}
.cnd-kpi-funil select:focus-visible{outline:2px solid var(--cnd-azul);outline-offset:3px;border-radius:4px}


/* ═══════════════════════════════════════════════════════════════════════
   3. A TRILHA DO FUNIL
   ═══════════════════════════════════════════════════════════════════════
   As etapas sao as LISTAS DO QUADRO, e clicar move o cartao. Por isso cada
   uma e um `<button>` e nao um enfeite: o que parece clicavel tem de clicar. */
.cnd-funil{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  background:var(--cnd-papel);border:1px solid var(--cnd-linha);
  border-radius:var(--cnd-raio);padding:14px 18px;margin-bottom:16px;
  box-shadow:var(--cnd-sombra);
}
.cnd-etapa{
  display:inline-flex;align-items:center;gap:9px;
  background:none;border:0;cursor:pointer;padding:4px 6px;border-radius:9px;
  font:inherit;color:var(--cnd-fraco);transition:background .16s,color .16s;
}
.cnd-etapa:hover{background:#eef4fe;color:var(--cnd-azul-forte)}
.cnd-etapa-bola{
  width:27px;height:27px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  border:1.5px solid var(--cnd-linha-forte);background:var(--cnd-papel);
  color:var(--cnd-fraco);transition:background .22s,border-color .22s,color .22s,transform .22s;
}
.cnd-etapa-bola svg{width:14px;height:14px}
.cnd-etapa-txt b{font-size:12.5px;font-weight:600;display:block;line-height:1.25}
/* Etapa vencida: verde, porque aqui verde é informação — passou. */
.cnd-etapa.feito .cnd-etapa-bola{background:#0e7b64;border-color:#0e7b64;color:#fff}
.cnd-etapa.feito .cnd-etapa-txt b{color:var(--cnd-apagado)}
/* Etapa atual: o azul do produto, e um halo que respira. */
.cnd-etapa.agora .cnd-etapa-bola{
  background:var(--cnd-azul);border-color:var(--cnd-azul);color:#fff;
  box-shadow:0 0 0 4px rgba(47,127,242,.16);
}
.cnd-etapa.agora .cnd-etapa-txt b{color:var(--cnd-azul-forte)}
.cnd-etapa.futuro .cnd-etapa-txt b{color:var(--cnd-fraco)}
.cnd-etapa-liga{
  flex:1;min-width:18px;height:1.5px;background:var(--cnd-linha-forte);
  border-radius:2px;position:relative;
}
.cnd-etapa-liga::after{
  content:'';position:absolute;right:-1px;top:-3px;
  border:3.5px solid transparent;border-left-color:var(--cnd-linha-forte);
}


/* ═══════════════════════════════════════════════════════════════════════
   4. AS ABAS E O CORPO
   ═══════════════════════════════════════════════════════════════════════ */
.cnd-corpo{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.cnd-principal{min-width:0}

.cnd-abas{
  display:flex;align-items:center;gap:2px;
  border-bottom:1px solid var(--cnd-linha);margin-bottom:14px;
}
.cnd-aba{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:500;
  color:var(--cnd-fraco);padding:10px 14px;position:relative;
  transition:color .16s;
}
.cnd-aba:hover{color:var(--cnd-azul-forte)}
.cnd-aba.on{color:var(--cnd-azul-forte);font-weight:600}
/* O sublinhado CRESCE do meio para as pontas em vez de aparecer inteiro: é o
   que faz a troca de aba ler como movimento, e não como um pisca. */
.cnd-aba::after{
  content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  background:var(--cnd-azul);border-radius:2px;
  transform:scaleX(0);transform-origin:50% 50%;transition:transform .22s cubic-bezier(.2,.9,.3,1);
}
.cnd-aba.on::after{transform:scaleX(1)}
.cnd-abas-fim{margin-left:auto;display:flex;gap:8px;align-items:center;padding-bottom:6px}

.cnd-nota-card{
  background:var(--cnd-papel);border:1px solid var(--cnd-linha);
  border-radius:var(--cnd-raio);padding:18px 20px;box-shadow:var(--cnd-sombra);
}
.cnd-nota-cab{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cnd-selo-crm{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:#efe9fe;color:#5141a1;font-size:11px;font-weight:800;letter-spacing:.5px;
}
.cnd-nota-cab b{display:block;font-size:15.5px;font-weight:700;color:var(--cnd-tinta)}
.cnd-nota-cab small{
  display:flex;align-items:center;gap:6px;margin-top:2px;
  font-size:12px;color:var(--cnd-fraco);
}
.cnd-nota-cab small svg{width:13px;height:13px}

.cnd-nota-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cnd-col{display:flex;flex-direction:column;gap:18px;min-width:0}

.cnd-bloco h2,.cnd-solo{
  display:flex;align-items:center;gap:8px;margin:0 0 9px;
  font-size:12.5px;font-weight:600;color:var(--cnd-apagado);
}
.cnd-solo{margin:16px 0 10px}
.cnd-solo:first-child{margin-top:0}
.cnd-bloco h2 svg,.cnd-solo svg{color:var(--cnd-fraco)}
.cnd-bloco-acoes h2{gap:8px}
.cnd-link{
  margin-left:auto;display:inline-flex;align-items:center;gap:4px;
  background:none;border:0;cursor:pointer;font:inherit;font-size:12px;font-weight:600;
  color:var(--cnd-azul);padding:2px 4px;border-radius:6px;
  transition:background .14s,color .14s;
}
.cnd-link:hover{background:#eef4fe;color:var(--cnd-azul-forte)}
.cnd-link svg{width:13px;height:13px}

.cnd-desc{margin:0;font-size:13px;line-height:1.65;color:var(--cnd-apagado)}
.cnd-desc i,.cnd-vazio{color:var(--cnd-fraco);font-style:italic;font-size:12.5px}

.cnd-dl{margin:0;display:flex;flex-direction:column;gap:7px}
.cnd-dl>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:baseline}
.cnd-dl dt{font-size:12.5px;color:var(--cnd-fraco)}
.cnd-dl dd{margin:0;font-size:13px;color:var(--cnd-tinta);font-weight:500}
.cnd-dl dd.alerta{color:var(--cnd-ambar);font-weight:600}

.cnd-chips{display:flex;gap:7px;flex-wrap:wrap}
.cnd-chip{
  font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:20px;
  background:#eef4fe;color:var(--cnd-azul-forte);border:1px solid #d6e6fd;
}


/* ═══════════════════════════════════════════════════════════════════════
   5. A COLUNA DA DIREITA
   ═══════════════════════════════════════════════════════════════════════ */
.cnd-lado{display:flex;flex-direction:column;gap:14px;min-width:0}
.cnd-card{
  background:var(--cnd-papel);border:1px solid var(--cnd-linha);
  border-radius:var(--cnd-raio);padding:16px 17px;box-shadow:var(--cnd-sombra);
}
.cnd-card h2{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-size:13px;font-weight:700;color:var(--cnd-tinta);
}
.cnd-card h2 svg{color:var(--cnd-fraco)}

.cnd-dados{margin:0;display:flex;flex-direction:column;gap:0}
.cnd-dados>div{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:10px;
  align-items:center;padding:6px 0;border-bottom:1px solid #f0f4f9;
}
.cnd-dados>div:last-child{border-bottom:0}
.cnd-dados dt{
  display:flex;align-items:center;gap:7px;font-size:12px;color:var(--cnd-fraco);
}
.cnd-dados dt svg{width:14px;height:14px;opacity:.85}
.cnd-dados dd{
  margin:0;font-size:12.5px;color:var(--cnd-tinta);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;
}
.cnd-dados dd a{color:var(--cnd-azul-forte);text-decoration:none}
.cnd-dados dd a:hover{text-decoration:underline}

.cnd-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cnd-tile{
  border:1px solid var(--cnd-linha);border-radius:11px;padding:11px 12px;
  display:flex;flex-direction:column;gap:2px;min-width:0;
  background:color-mix(in srgb,var(--tom-cor) 6%,#fff);
  transition:transform .18s,box-shadow .18s;
}
.cnd-tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,39,68,.09)}
.cnd-tile[data-tom="verde"]{--tom-cor:#10b981}
.cnd-tile[data-tom="azul"] {--tom-cor:#2f7ff2}
.cnd-tile[data-tom="roxo"] {--tom-cor:#8b5cf6}
.cnd-tile[data-tom="ambar"]{--tom-cor:#f59e0b}
.cnd-tile>span{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--tom-cor) 16%,#fff);
  color:color-mix(in srgb,var(--tom-cor) 55%,#0b1f38);margin-bottom:4px;
}
.cnd-tile>span svg{width:14px;height:14px}
.cnd-tile b{font-size:14.5px;font-weight:700;color:var(--cnd-tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnd-tile small{font-size:11px;color:var(--cnd-fraco)}

.cnd-relacionados{display:flex;flex-direction:column;gap:8px}
.cnd-rel{
  display:flex;align-items:center;gap:10px;padding:9px 11px;
  border:1px solid var(--cnd-linha);border-radius:10px;text-decoration:none;
  color:inherit;transition:border-color .16s,background .16s,transform .16s;
}
.cnd-rel:hover{border-color:var(--cnd-azul);background:#f7fafe;transform:translateX(2px)}
.cnd-rel-ico{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:#fdeaea;color:#b3323f;flex-shrink:0;
}
.cnd-rel-txt{min-width:0;flex:1}
.cnd-rel-txt b{display:block;font-size:12.5px;font-weight:600;color:var(--cnd-tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnd-rel-txt small{font-size:11px;color:var(--cnd-fraco)}
.cnd-rel-baixar{color:var(--cnd-fraco)}


/* ═══════════════════════════════════════════════════════════════════════
   6. OS CONTROLES QUE VIERAM DA NOTA
   ═══════════════════════════════════════════════════════════════════════
   Eles são os MESMOS elementos do Kanban, movidos para cá. Foram desenhados
   para o fundo escuro da nota, então herdam a cor do papel — sem isto ficam
   claros sobre claro, e o checklist some. Só cor: mexer na estrutura deles
   quebraria os ouvintes que continuam pendurados. */
.cnd-casca :is([data-cnd-checklist],[data-cnd-checklist2],[data-cnd-labels2],
  [data-cnd-files],[data-cnd-comments],[data-cnd-activity],[data-cnd-dates]){
  color:var(--cnd-apagado);
}
.cnd-casca :is([data-cnd-checklist],[data-cnd-checklist2]) :is(input[type="text"],textarea),
.cnd-casca :is([data-cnd-comments],[data-cnd-dates]) :is(input,textarea,select){
  background:#f7fafe;border:1px solid var(--cnd-linha-forte);color:var(--cnd-tinta);
  border-radius:8px;
}
.cnd-casca [data-cnd-checklist] label,
.cnd-casca [data-cnd-checklist2] label{color:var(--cnd-tinta)}


/* ═══════════════════════════════════════════════════════════════════════
   7. O MOVIMENTO
   ═══════════════════════════════════════════════════════════════════════
   A cascata é de cima para baixo, e cada peça lê o seu lugar em `--i`. A
   ordem mora na marcação porque é lá que ela existe; a folha decide só o
   quanto de atraso.

   Nenhuma animação muda a posição FINAL: todas partem de um deslocamento e
   chegam a zero. Por isso a tela fica inteira mesmo se a animação não rodar. */
@keyframes cnd-sobe{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes cnd-entra{from{opacity:0;scale:.985;translate:0 8px}to{opacity:1;scale:1;translate:0 0}}
@keyframes cnd-bola{from{opacity:0;scale:.5}to{opacity:1;scale:1}}
@keyframes cnd-liga{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cnd-chip{from{opacity:0;scale:.8}to{opacity:1;scale:1}}
@keyframes cnd-halo{
  0%,100%{box-shadow:0 0 0 4px rgba(47,127,242,.16)}
  50%{box-shadow:0 0 0 7px rgba(47,127,242,.07)}
}

.cnd-casca .cnd-topo{animation:cnd-sobe .34s cubic-bezier(.2,.9,.3,1) both}
.cnd-casca .cnd-kpi{animation:cnd-entra .38s cubic-bezier(.2,.9,.3,1) both}
.cnd-casca .cnd-kpi:nth-child(1){animation-delay:.05s}
.cnd-casca .cnd-kpi:nth-child(2){animation-delay:.09s}
.cnd-casca .cnd-kpi:nth-child(3){animation-delay:.13s}
.cnd-casca .cnd-kpi:nth-child(4){animation-delay:.17s}
.cnd-casca .cnd-kpi:nth-child(5){animation-delay:.21s}
.cnd-casca .cnd-funil{animation:cnd-entra .38s cubic-bezier(.2,.9,.3,1) .24s both}
/* As bolas do funil nascem uma a uma, e o traço entre elas se desenha logo
   depois — é o gesto de percorrer o caminho, e não de acender a régua. */
.cnd-casca .cnd-etapa-bola{animation:cnd-bola .3s cubic-bezier(.34,1.4,.5,1) both;
  animation-delay:calc(.3s + var(--i,0) * .07s)}
.cnd-casca .cnd-etapa-liga{transform-origin:left center;
  animation:cnd-liga .26s ease-out both;animation-delay:calc(.34s + var(--i,0) * .07s)}
.cnd-casca .cnd-etapa.agora .cnd-etapa-bola{animation:cnd-bola .3s cubic-bezier(.34,1.4,.5,1) both,
  cnd-halo 2.8s ease-in-out 1.2s infinite}
.cnd-casca .cnd-abas{animation:cnd-sobe .34s cubic-bezier(.2,.9,.3,1) .3s both}
.cnd-casca .cnd-nota-card{animation:cnd-entra .4s cubic-bezier(.2,.9,.3,1) .34s both}
.cnd-casca .cnd-lado .cnd-card{animation:cnd-entra .4s cubic-bezier(.2,.9,.3,1) both}
.cnd-casca .cnd-lado .cnd-card:nth-child(1){animation-delay:.38s}
.cnd-casca .cnd-lado .cnd-card:nth-child(2){animation-delay:.44s}
.cnd-casca .cnd-lado .cnd-card:nth-child(3){animation-delay:.5s}
.cnd-casca .cnd-chip{animation:cnd-chip .26s cubic-bezier(.34,1.4,.5,1) both;
  animation-delay:calc(.5s + var(--i,0) * .04s)}
.cnd-casca .cnd-dados>div{animation:cnd-sobe .3s ease-out both;
  animation-delay:calc(.44s + var(--i,0) * .025s)}
.cnd-casca .cnd-rel{animation:cnd-sobe .3s ease-out both;
  animation-delay:calc(.56s + var(--i,0) * .05s)}
/* A troca de aba tem o seu próprio gesto, curto: o painel novo sobe um
   pouquinho em vez de trocar de uma vez. */
.cnd-casca [data-cnd-pane]:not([hidden]){animation:cnd-sobe .26s ease-out both}

@media(prefers-reduced-motion:reduce){
  .cnd-casca *,.cnd-casca *::after,.cnd-casca *::before{
    animation:none!important;transition:none!important;
  }
  .cnd-casca .cnd-aba.on::after{transform:scaleX(1)}
}


/* ═══════════════════════════════════════════════════════════════════════
   8. TELAS ESTREITAS
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:1180px){
  .cnd-corpo{grid-template-columns:minmax(0,1fr)}
  .cnd-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
  .cnd-casca{padding:16px 14px 20px}
  .cnd-identidade{grid-template-columns:auto minmax(0,1fr);row-gap:12px}
  .cnd-acoes-topo{grid-column:1/-1}
  .cnd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cnd-nota-grade{grid-template-columns:minmax(0,1fr)}
  .cnd-dl>div{grid-template-columns:minmax(0,1fr)}
  /* Alvo de toque de 40px MEDIDOS: só padding dá 38, e a diferença de dois
     pixels não aparece no código, só na régua. */
  .cnd-btn,.cnd-aba,.cnd-etapa{min-height:40px}
  .cnd-funil{overflow-x:auto;flex-wrap:nowrap}
}


/* ═══════════════════════════════════════════════════════════════════════
   9. A DATA DE CADA ETAPA, E OS CAMPOS QUE SE EDITAM
   ═══════════════════════════════════════════════════════════════════════ */

/* A trilha ganhou a data embaixo do nome, como na arte. Dia e mês só: as seis
   cabem numa linha, e o ano repetido seis vezes é ruído. */
.cnd-etapa-txt{display:flex;flex-direction:column;gap:1px;text-align:left}
.cnd-etapa-txt small{font-size:11px;color:var(--cnd-fraco);line-height:1.2}
.cnd-etapa.agora .cnd-etapa-txt small{color:var(--cnd-azul);font-weight:600}
/* Etapa sem data ainda: o espaço fica, para as seis assentarem na mesma
   linha de base. Sem isto a fileira sobe e desce conforme quem já tem data. */
.cnd-etapa-txt small:empty::before{content:'\00a0'}

/* ── OS CAMPOS QUE SE EDITAM ──────────────────────────────────────────
   O texto é o campo: clicar nele escreve. Só que um texto que não parece
   clicável não convida ninguém — daí a moldura que aparece ao passar o mouse,
   e a que fica ao escrever. */
.cnd-edit{
  border-radius:8px;padding:5px 8px;margin-left:-8px;margin-right:-8px;
  border:1px solid transparent;cursor:text;min-height:32px;
  white-space:pre-wrap;word-break:break-word;
  transition:border-color .16s,background .16s,box-shadow .16s;
}
.cnd-edit:hover{border-color:var(--cnd-linha);background:#fafcff}
.cnd-edit:focus{
  outline:none;border-color:var(--cnd-azul);background:#fff;
  box-shadow:0 0 0 3px rgba(47,127,242,.13);
}
/* Vazio, ele diz o que cabe ali — e o texto do convite não é conteúdo: sai do
   caminho do cursor e não entra no que se copia. */
.cnd-edit:empty::before{
  content:attr(data-vazio);color:var(--cnd-fraco);font-style:italic;
  pointer-events:none;
}


/* ═══════════════════════════════════════════════════════════════════════
   10. AS ETIQUETAS QUE SE EDITAM, E A COR DO CARTÃO
   ═══════════════════════════════════════════════════════════════════════ */

/* Cada chip carrega o seu ×, e há um campo no fim da fila. Um botão "editar
   tags" que abrisse outra janela seria um lugar a mais para procurar. */
.cnd-chip{display:inline-flex;align-items:center;gap:5px}
.cnd-chip-x{
  background:none;border:0;padding:0;cursor:pointer;line-height:1;
  font-size:14px;color:currentColor;opacity:.5;
  transition:opacity .14s,transform .14s;
}
.cnd-chip-x:hover{opacity:1;transform:scale(1.15)}
.cnd-chip-novo{
  border:1px dashed var(--cnd-linha-forte);border-radius:20px;
  background:none;padding:4px 11px;min-width:78px;width:78px;
  font:inherit;font-size:11.5px;color:var(--cnd-tinta);
  transition:border-color .16s,width .18s,background .16s;
}
.cnd-chip-novo::placeholder{color:var(--cnd-fraco)}
.cnd-chip-novo:focus{
  outline:none;border-style:solid;border-color:var(--cnd-azul);
  background:#fff;width:150px;
}

/* ── A COR DO CARTÃO ──────────────────────────────────────────────────
   Ela morava num chip dentro da nota, e a ficha esconde a nota — então não
   havia por onde trocar a cor de um cartão de cliente. Aqui as amostras
   ficam no cabeçalho, porque a cor é uma decisão sobre o cartão inteiro. */
.cnd-cores{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.cnd-cor{
  width:20px;height:20px;border-radius:6px;cursor:pointer;padding:0;
  background:var(--c,#6366f1);
  border:2px solid transparent;
  box-shadow:0 0 0 1px rgba(15,39,68,.12) inset;
  transition:transform .16s,box-shadow .16s;
}
.cnd-cor:hover{transform:translateY(-2px) scale(1.08)}
/* A escolhida ganha um anel, e não um check: o check taparia justamente a cor
   que a pessoa está escolhendo. */
.cnd-cor.on{
  border-color:var(--cnd-papel);
  box-shadow:0 0 0 2px var(--cnd-azul),0 0 0 1px rgba(15,39,68,.12) inset;
}
.cnd-cor:focus-visible{outline:2px solid var(--cnd-azul);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .cnd-chip-x,.cnd-chip-novo,.cnd-cor{transition:none!important;transform:none!important}
}


/* ═══════════════════════════════════════════════════════════════════════
   11. A COR NUM BOTÃO SÓ, E O VERDE DA ARTE
   ═══════════════════════════════════════════════════════════════════════
   A primeira versão pôs as 39 cores em linha no cabeçalho — uma faixa de
   arco-íris atravessando a ficha, que é o oposto de um documento. Agora é um
   botão com a cor atual, e o resto abre ao lado quando se pergunta.
   ═══════════════════════════════════════════════════════════════════════ */
.cnd-btn-cor{position:relative}
.cnd-btn-cor i{
  width:16px;height:16px;border-radius:5px;display:block;
  box-shadow:0 0 0 1px rgba(15,39,68,.18) inset;
}
.cnd-cores{
  position:absolute;top:calc(100% + 8px);right:0;z-index:30;
  display:grid;grid-template-columns:repeat(8,20px);gap:6px;
  padding:10px;border-radius:12px;
  background:var(--cnd-papel);border:1px solid var(--cnd-linha-forte);
  box-shadow:0 12px 34px rgba(15,39,68,.18);
  animation:cnd-entra .18s ease-out both;
}
.cnd-acoes-topo{position:relative}

/* ── O VERDE DA ARTE ──────────────────────────────────────────────────
   O meu era #0e7b64, um verde-azulado escuro; o da arte é o verde-esmeralda
   de #16a34a. A diferença aparece lado a lado, e foi apontada.

   #16a34a com o traço branco dá 3,30:1. O mínimo de um ÍCONE é 3 — ele não é
   texto, e a régua dele é outra. Para a bolinha do retrato, que carrega
   iniciais e portanto é texto, o mínimo volta a ser 4,5 e a cor desce para
   #15803d, que dá 5,02 e continua sendo o mesmo verde. */
.cnd-etapa.feito .cnd-etapa-bola{background:#16a34a;border-color:#16a34a}
/* A INICIAL TEM 19px EM NEGRITO, e isso é TEXTO GRANDE pela WCAG: o mínimo
   dela é 3:1, e não 4,5. Escurecer a 55% deixava a bolinha quase preta e
   longe do verde da arte sem necessidade nenhuma. A 75% o pior par das seis
   cores de estado é 3,19, e o verde volta a ser o verde. */
.cnd-avatar{background:color-mix(in srgb,var(--c,#16a34a) 75%,#000)}
.cnd-contato .cnd-wa,.cnd-btn-wa .cnd-wa{color:#15803d}


/* ── O MENU DE CORES PRECISA FICAR POR CIMA ───────────────────────────
   Ele abria e ficava DEBAIXO dos indicadores e da trilha do funil. A causa
   não é o clique: é ordem de pintura. Os cartões daquelas duas fileiras vêm
   depois no DOM e têm fundo próprio, então pintam por cima de um vizinho
   anterior — e `z-index` só compara irmãos dentro do mesmo contexto.

   O contexto certo é o CABEÇALHO inteiro: subindo ele, tudo que nasce lá
   dentro sobe junto, inclusive um menu que ainda não existe. Levantar só o
   menu resolveria este caso e deixaria o próximo igual. */
.cnd-topo{position:relative;z-index:40}
.cnd-kpis{position:relative;z-index:1}
.cnd-funil{position:relative;z-index:1}
.cnd-cores{z-index:50}

/* E ele não pode ser cortado pela rolagem da ficha. `overflow:auto` na casca
   recorta qualquer filho posicionado que passe da borda; o menu abre para
   baixo e para a esquerda, onde há espaço. */
.cnd-cores{max-width:min(260px,calc(100vw - 32px))}


/* ═══════════════════════════════════════════════════════════════════════
   12. AS ETIQUETAS DO QUADRO, O ESTADO, E A FILEIRA DE SEIS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── A ABA "ETIQUETAS" ESTAVA VAZIA ───────────────────────────────────
   O painel de etiquetas do Kanban é um POPOVER: nasce `display:none` e só
   aparece com a classe `aberto`, que o botão dele liga. Movido para dentro de
   uma aba, ele continuou obedecendo a essa regra — a aba abria e mostrava um
   cartão em branco.

   Aqui ele não é mais popover: é o conteúdo da aba. Então perde a posição
   flutuante, a sombra e o `display:none`, e fica. */
.cnd-casca .kb-modal-etiquetas-pop{
  display:block!important;
  position:static!important;
  margin:0!important;
  border:0!important;
  box-shadow:none!important;
  background:none!important;
  padding:0!important;
  width:auto!important;max-width:none!important;
}

/* ── A FILEIRA PASSOU A TER SEIS ──────────────────────────────────────
   Entrou o estado da nota. Em cinco colunas o sexto caía sozinho numa linha
   nova; em seis eles voltam a dividir a largura por igual. */
.cnd-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1400px){.cnd-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.cnd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ── O RETRATO DA FICHA, COM O ÍCONE DO RAMO ──────────────────────────
   O mesmo desenho do cartão: dois retratos diferentes para a mesma pessoa em
   duas telas é o que faz o produto parecer dois. */
.cnd-avatar.com-icone{
  background:color-mix(in srgb,var(--c,#6366f1) 62%,#000);
  letter-spacing:0;
}
.cnd-avatar.com-icone svg{width:26px;height:26px;display:block}