/* O VISUAL NOVO — Contatos, Negócios, Agenda e Indicadores — agente 5.
 * Tudo atrás de html[data-visual="novo"]; a régua (tokens --vn-*) mora no visual-novo.css.
 * Ver docs/design/PLANO-DOS-AGENTES-VISUAL.md e docs/design/propostas/LEIA-ME.md.
 *
 * Sem tema escuro nesta folha (decisão do Henrique, 06/11/2026). O padrão dos cartões de cor
 * é o da Visão geral (visual-novo.css §3.1): número em cima, legenda miúda embaixo, ícone num
 * círculo translúcido à direita. */

/* =================================================================== 0. Fichas locais */

/* Tokens que a régua ainda não tem (prefixo --vn-crm-). Se virarem comuns, sobem para a régua. */
html[data-visual="novo"] {
  --vn-crm-cinza-etapa: #8a8f9a;    /* o cinza da etapa "sem cor" no quadro: escuro o bastante para letra branca */
  --vn-crm-ambar-texto: #b07f00;    /* letra sobre --vn-amarelo-s (a mesma da Visão geral) */
  --vn-crm-rosa-texto: #b01a59;     /* letra sobre --vn-rosa-s */
  --vn-crm-laranja-texto: #b53f08;  /* letra sobre --vn-laranja-s */
  --vn-crm-verde-texto: #06647a;    /* = --sag-green-dark */
}

/* Botão branco (o padrão da amostra) dentro das quatro telas: o verde fica só com o principal. */
html[data-visual="novo"] :is(.co-tela, .ng-tela, .agenda-v2, .indicadores) .btn {
  border-color: transparent;
  background: var(--vn-placa);
  color: var(--vn-tinta);
  font-weight: 500;
  box-shadow: 0 0 0 1px var(--vn-fio), 0 1px 2px rgba(0, 0, 0, .04);
}
html[data-visual="novo"] :is(.co-tela, .ng-tela, .agenda-v2, .indicadores) .btn:hover { background: var(--vn-suave); }
html[data-visual="novo"] :is(.co-tela, .ng-tela, .agenda-v2, .indicadores) .btn.principal {
  background: var(--sag-green);
  color: #fff;
  box-shadow: 0 2px 8px rgba(4, 122, 142, .35);
}
html[data-visual="novo"] :is(.co-tela, .ng-tela, .agenda-v2, .indicadores) .btn.principal:hover { background: var(--sag-green-dark); }
html[data-visual="novo"] :is(.co-tela, .ng-tela, .agenda-v2, .indicadores) .btn.perigo { color: var(--vn-vermelho); }
html[data-visual="novo"] :is(.co-tela, .ng-tela, .agenda-v2, .indicadores) .btn.perigo:hover { background: var(--vn-vermelho-s); }

/* As quatro telas não deixam o recheio esticar a coluna (era o que empurrava a página para o lado). */
html[data-visual="novo"] :is(.ng-tela, .agenda-v2, .indicadores) { grid-template-columns: minmax(0, 1fr); }

/* =================================================================== 1. Cartões de cor (o mesmo desenho nas telas) */

/* 1.1 A cor de cada cartão, pelo que ele conta (não pela palavra de "atenção" do dado). */
html[data-visual="novo"] [data-co-cartao="todos"],
html[data-visual="novo"] [data-tg-recorte="todas"],
html[data-visual="novo"] [data-ng-cartao="abertos"],
html[data-visual="novo"] [data-ag-cartao="hoje"] { --vn-cartao: var(--vn-azul); }
html[data-visual="novo"] [data-co-cartao="novos"],
html[data-visual="novo"] [data-ng-cartao="ganhos"],
html[data-visual="novo"] [data-ag-cartao="concluidas"] { --vn-cartao: var(--vn-verde); }
html[data-visual="novo"] [data-co-cartao="sem_responsavel"],
html[data-visual="novo"] [data-tg-recorte="sem_contato"],
html[data-visual="novo"] [data-ng-cartao="conversao"] { --vn-cartao: var(--vn-laranja); }
html[data-visual="novo"] [data-co-cartao="negociando"],
html[data-visual="novo"] [data-ng-cartao="previsao"],
html[data-visual="novo"] [data-ag-cartao="reunioes7"] { --vn-cartao: var(--vn-roxo); }
html[data-visual="novo"] [data-co-cartao="vip"],
html[data-visual="novo"] [data-tg-recorte="em_uso"],
html[data-visual="novo"] [data-ag-cartao="atrasadas"] { --vn-cartao: var(--vn-rosa); }
html[data-visual="novo"] [data-co-cartao="ganhos"] { --vn-cartao: var(--vn-teal); }

/* 1.2 O corpo do cartão: número em cima, legenda miúda, frase de apoio, ícone à direita. */
html[data-visual="novo"] .co-cartao[class*="co-cor-"],
html[data-visual="novo"] .ng-metrica,
html[data-visual="novo"] .ag-metrica {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 92px;
  padding: 16px 20px;
  overflow: hidden;
  background: var(--vn-cartao, var(--vn-azul));
  border: 0;
  border-radius: var(--vn-raio-cartao);
  box-shadow: none;
  color: #fff;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease;
}
html[data-visual="novo"] .co-cartao[class*="co-cor-"] { padding-right: 78px; }
html[data-visual="novo"] .co-cartao[class*="co-cor-"]::before { display: none; }
html[data-visual="novo"] .co-cartao[class*="co-cor-"]:hover,
html[data-visual="novo"] .ng-metrica:hover,
html[data-visual="novo"] .ag-metrica:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}
html[data-visual="novo"] .co-cartao[class*="co-cor-"]:focus-visible,
html[data-visual="novo"] .ng-metrica:focus-visible,
html[data-visual="novo"] .ag-metrica:focus-visible { outline: 2px solid var(--vn-tinta); outline-offset: 2px; }
html[data-visual="novo"] .co-cartao[class*="co-cor-"] strong,
html[data-visual="novo"] .ng-metrica strong,
html[data-visual="novo"] .ag-metrica strong {
  order: 1;
  margin: 0;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
html[data-visual="novo"] .co-cartao[class*="co-cor-"] .co-cartao-titulo,
html[data-visual="novo"] .ng-metrica > span,
html[data-visual="novo"] .ag-metrica > span {
  order: 2;
  display: block;
  max-width: 100%;
  margin: 6px 0 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .95);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
/* A frase de apoio fica em minúsculas, como na Visão geral. */
html[data-visual="novo"] .co-cartao[class*="co-cor-"] small,
html[data-visual="novo"] .ng-metrica small,
html[data-visual="novo"] .ag-metrica small {
  order: 3;
  max-width: 100%;
  margin: 6px 0 0;
  padding: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .85);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
/* O ícone dos Contatos/Tags sai da legenda e vai para o círculo à direita. */
html[data-visual="novo"] .co-cartao[class*="co-cor-"] .co-selo {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
html[data-visual="novo"] .co-cartao[class*="co-cor-"] .co-selo svg { width: 22px; height: 22px; }
/* O cartão escolhido ganha um anel na cor dele. */
html[data-visual="novo"] .co-cartao.co-ativo,
html[data-visual="novo"] .ng-metrica.ng-ativa,
html[data-visual="novo"] .ag-metrica.ativa,
html[data-visual="novo"] .ag-metrica.ativa:hover {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--vn-placa), 0 0 0 4px var(--vn-cartao);
}
html[data-visual="novo"] .co-cartao.co-atencao strong,
html[data-visual="novo"] .ag-metrica.ag-atencao strong { color: #fff; }

html[data-visual="novo"] .co-cartoes { gap: 12px; }
html[data-visual="novo"] .ng-metricas { gap: 12px; }
html[data-visual="novo"] .ag-metricas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html[data-visual="novo"] .ng-nota { margin: -4px 0 0; color: var(--vn-cinza); font-size: 12px; }

/* =================================================================== 2. Contatos */

/* 2.1 Abas de cima: o controle segmentado da amostra (fundo cinza translúcido, aba ativa branca). */
html[data-visual="novo"] .co-abas-e-acoes { border-bottom: 0; gap: 12px; }
html[data-visual="novo"] .co-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 3px;
  border-bottom: 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, .06);
}
html[data-visual="novo"] .co-abas-e-acoes .co-abas { flex: 0 1 auto; }
html[data-visual="novo"] .co-aba {
  padding: 6px 14px;
  border: 0;
  border-radius: 9px;
  color: var(--vn-cinza);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
html[data-visual="novo"] .co-aba:hover { color: var(--vn-tinta); }
html[data-visual="novo"] .co-aba.co-ativa {
  background: var(--vn-placa);
  color: var(--vn-tinta);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
html[data-visual="novo"] .co-aba.co-segmento { font-style: normal; }

/* 2.2 A barra de filtros: um painel branco, rótulos comuns, campos claros e a busca em pílula. */
html[data-visual="novo"] .co-filtros {
  padding: 14px 16px;
  border: 0;
  border-radius: var(--vn-raio-painel);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .co-filtro {
  color: var(--vn-cinza);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] .co-filtro input,
html[data-visual="novo"] .co-filtro select {
  border: 1px solid var(--vn-fio);
  border-radius: 9px;
  background: var(--vn-folha);
  font-size: 13px;
}
html[data-visual="novo"] .co-filtro input:focus,
html[data-visual="novo"] .co-filtro select:focus { outline: 2px solid var(--vn-azul-s); border-color: var(--vn-azul); }
html[data-visual="novo"] .co-filtro-busca input { padding-left: 14px; border-radius: 999px; }

/* 2.3 A barra do lote e a pergunta dele */
html[data-visual="novo"] .co-lote {
  border: 0;
  border-radius: var(--vn-raio-cartao);
  background: var(--vn-verde-s);
}
html[data-visual="novo"] .co-lote-pergunta input,
html[data-visual="novo"] .co-lote-pergunta select { border-color: var(--vn-fio); border-radius: 9px; }

/* 2.4 A tabela: cabeçalho comum (sem caixa alta), fio entre linhas, hover suave. */
html[data-visual="novo"] .co-quadro,
html[data-visual="novo"] .tg-quadro,
html[data-visual="novo"] .co-vazio-grande {
  border: 0;
  border-radius: var(--vn-raio-painel);
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .co-tabela,
html[data-visual="novo"] .tg-tabela { background: transparent; font-size: 13px; }
html[data-visual="novo"] .co-cabeca,
html[data-visual="novo"] .tg-cabeca {
  min-height: 42px;
  border-bottom: 1px solid var(--vn-fio);
  background: transparent;
  color: var(--vn-cinza);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] .co-linha { min-height: 60px; border-bottom: 1px solid var(--vn-fio); }
html[data-visual="novo"] .tg-linha { border-bottom: 1px solid var(--vn-fio); }
html[data-visual="novo"] .co-clicavel .co-linha:hover { background: var(--vn-suave); }
html[data-visual="novo"] .co-quem b { font-weight: 600; }
html[data-visual="novo"] .co-quem small { color: var(--vn-cinza); font-size: 12px; }
html[data-visual="novo"] .co-valor { font-weight: 600; }
html[data-visual="novo"] .co-vazio { color: var(--vn-cinza2); }
/* O avatar da linha é redondo e colorido (as 13 cores do Atendimento continuam valendo). */
html[data-visual="novo"] .inicial.co-inicial { width: 36px; height: 36px; border-radius: 50%; font-size: 13px; font-weight: 600; }
html[data-visual="novo"] .co-dono i { width: 24px; height: 24px; background: var(--vn-verde-s); color: var(--vn-crm-verde-texto); font-size: 11px; font-weight: 600; }

/* 2.5 Os selos: pílulas suaves, a cor diz a coisa e a palavra diz qual. */
html[data-visual="novo"] .co-tag { padding: 3px 10px; font-size: 11px; font-weight: 600; }
html[data-visual="novo"] .co-neutra,
html[data-visual="novo"] .co-mais,
html[data-visual="novo"] .co-origem-outra,
html[data-visual="novo"] .co-etapa-outra,
html[data-visual="novo"] .co-etapa-novo { background: var(--vn-suave); color: var(--vn-cinza); }
html[data-visual="novo"] .co-ok,
html[data-visual="novo"] .co-verde,
html[data-visual="novo"] .co-origem-whatsapp,
html[data-visual="novo"] .co-etapa-ganho { background: var(--vn-verde-s); color: var(--vn-crm-verde-texto); }
html[data-visual="novo"] .co-sem-dono,
html[data-visual="novo"] .co-origem-indicacao,
html[data-visual="novo"] .co-etapa-proposta { background: var(--vn-amarelo-s); color: var(--vn-crm-ambar-texto); }
html[data-visual="novo"] .co-origem-instagram { background: var(--vn-rosa-s); color: var(--vn-crm-rosa-texto); }
html[data-visual="novo"] .co-origem-site,
html[data-visual="novo"] .co-etapa-qualificado { background: var(--vn-azul-s); color: var(--vn-azul); }
html[data-visual="novo"] .co-origem-meta,
html[data-visual="novo"] .co-etapa-atendimento { background: var(--vn-roxo-s); color: var(--vn-roxo); }
html[data-visual="novo"] .co-etapa-perdido { background: var(--vn-vermelho-s); color: var(--vn-vermelho); }

/* 2.6 Paginação discreta, dentro do painel */
html[data-visual="novo"] .co-quadro .co-paginas { padding: 12px 20px; border-top: 0; font-size: 12px; }
html[data-visual="novo"] .co-mostrar select { border-color: var(--vn-fio); border-radius: 9px; font-weight: 500; }
html[data-visual="novo"] .co-vazio-grande p { color: var(--vn-cinza); }

/* 2.7 Tags: a mesma tabela; os botões da linha são brancos pequenos e só o "Apagar" fica vermelho no texto. */
html[data-visual="novo"] .tg-barra .co-filtro-busca input { border-color: transparent; box-shadow: 0 0 0 1px var(--vn-fio), 0 1px 2px rgba(0, 0, 0, .04); background: var(--vn-placa); }
html[data-visual="novo"] .tg-nota { color: var(--vn-cinza); }
html[data-visual="novo"] .tg-contatos,
html[data-visual="novo"] .tg-uso { background: var(--vn-suave); color: var(--vn-tinta); font-weight: 500; }
html[data-visual="novo"] .tg-contatos:hover,
html[data-visual="novo"] .tg-uso:hover { background: var(--vn-verde-s); color: var(--vn-crm-verde-texto); }
html[data-visual="novo"] .tg-acoes .btn.tg-apagar { background: var(--vn-placa); color: var(--vn-vermelho); }
html[data-visual="novo"] .tg-acoes .btn.tg-apagar:hover { background: var(--vn-vermelho-s); }

/* 2.8 A ficha do contato e o "Novo contato" na gaveta */
html[data-visual="novo"] .campo.cabecalho:has(.co-perfil) { border: 0; border-radius: var(--vn-raio-cartao); background: var(--vn-suave); }
html[data-visual="novo"] .co-janela-novo { border: 0; border-radius: var(--vn-raio-cartao); background: var(--vn-verde-s); }
html[data-visual="novo"] .co-janela-novo b { border-radius: 50%; background: var(--sag-green); }
html[data-visual="novo"] .co-perfil b { font-weight: 600; }
html[data-visual="novo"] .gaveta:has(.co-perfil) { border-radius: var(--vn-raio-painel) 0 0 var(--vn-raio-painel); }

/* =================================================================== 3. Negócios */

/* 3.1 A caixa e a barra de filtros: pílulas brancas; a faixa quebra em vez de estourar a tela. */
html[data-visual="novo"] .ng-casca {
  min-width: 0;
  border: 0;
  border-radius: var(--vn-raio-painel);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .ng-barra { flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--vn-fio); }
html[data-visual="novo"] .ng-barra-principal { flex-wrap: wrap; }
html[data-visual="novo"] .ng-barra select,
html[data-visual="novo"] .ng-busca,
html[data-visual="novo"] .ng-botao-da-barra {
  border: 0;
  border-radius: 999px;
  background: var(--vn-placa);
  box-shadow: 0 0 0 1px var(--vn-fio), 0 1px 2px rgba(0, 0, 0, .04);
  font-size: 13px;
  font-weight: 500;
}
html[data-visual="novo"] .ng-barra select { padding: 0 14px; }
html[data-visual="novo"] .ng-busca { padding: 0 14px; }
html[data-visual="novo"] .ng-busca > span { color: var(--vn-cinza2); }
html[data-visual="novo"] .ng-busca:focus-within { box-shadow: 0 0 0 2px var(--vn-azul); }
html[data-visual="novo"] .ng-pipeline > span {
  color: var(--vn-cinza);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] .ng-pipeline select { font-weight: 600; }
html[data-visual="novo"] .ng-botao-da-barra { font-weight: 600; }
html[data-visual="novo"] .ng-botao-da-barra:hover { background: var(--vn-suave); color: var(--vn-tinta); }
html[data-visual="novo"] .ng-chip {
  border: 0;
  background: var(--vn-amarelo-s);
  color: var(--vn-crm-ambar-texto);
  font-weight: 600;
}
html[data-visual="novo"] .ng-vistas { padding: 3px; border-radius: 9px; background: rgba(0, 0, 0, .06); }
html[data-visual="novo"] .ng-vista { border-radius: 9px; color: var(--vn-cinza); font-weight: 500; }
html[data-visual="novo"] .ng-vista.ng-ativa { background: var(--vn-placa); color: var(--vn-tinta); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

/* 3.2 As cores das etapas: uma da paleta por etapa. O âmbar antigo vira rosa, como no funil da Visão geral. */
html[data-visual="novo"] .ng-tom-cinza  { --ng-tom: var(--vn-crm-cinza-etapa); --vn-etapa: var(--vn-crm-cinza-etapa); --vn-etapa-s: var(--vn-suave); --vn-etapa-t: var(--vn-cinza); }
html[data-visual="novo"] .ng-tom-azul   { --ng-tom: var(--vn-azul); --vn-etapa: var(--vn-azul); --vn-etapa-s: var(--vn-azul-s); --vn-etapa-t: var(--vn-azul); }
html[data-visual="novo"] .ng-tom-ambar  { --ng-tom: var(--vn-rosa); --vn-etapa: var(--vn-rosa); --vn-etapa-s: var(--vn-rosa-s); --vn-etapa-t: var(--vn-crm-rosa-texto); }
html[data-visual="novo"] .ng-tom-violeta { --ng-tom: var(--vn-roxo); --vn-etapa: var(--vn-roxo); --vn-etapa-s: var(--vn-roxo-s); --vn-etapa-t: var(--vn-roxo); }
html[data-visual="novo"] .ng-tom-verde  { --ng-tom: var(--vn-verde); --vn-etapa: var(--vn-verde); --vn-etapa-s: var(--vn-verde-s); --vn-etapa-t: var(--vn-crm-verde-texto); }
html[data-visual="novo"] .ng-tom-vermelho { --ng-tom: var(--vn-vermelho); --vn-etapa: var(--vn-vermelho); --vn-etapa-s: var(--vn-vermelho-s); --vn-etapa-t: var(--vn-vermelho); }
html[data-visual="novo"] .ng-cor.ng-cor-cinza { background: var(--vn-crm-cinza-etapa); }
html[data-visual="novo"] .ng-cor.ng-cor-azul { background: var(--vn-azul); }
html[data-visual="novo"] .ng-cor.ng-cor-ambar { background: var(--vn-rosa); }
html[data-visual="novo"] .ng-cor.ng-cor-violeta { background: var(--vn-roxo); }
html[data-visual="novo"] .ng-cor.ng-cor-verde { background: var(--vn-verde); }
html[data-visual="novo"] .ng-cor.ng-cor-vermelho { background: var(--vn-vermelho); }

/* 3.3 O quadro cabe em 1440 px (colunas a partir de 184 px). Se mesmo assim não couber, rola SÓ
 * o quadro, com a barra de rolagem à vista; o cabeçalho de cada coluna fica fora da pilha, que é
 * a única parte que rola para baixo. */
html[data-visual="novo"] .ng-quadro {
  grid-auto-columns: minmax(184px, 1fr);
  gap: 8px;
  min-height: 0;
  padding: 14px 16px 16px;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--vn-cinza2) var(--vn-suave);
}
html[data-visual="novo"] .ng-quadro::-webkit-scrollbar { height: 10px; }
html[data-visual="novo"] .ng-quadro::-webkit-scrollbar-track { border-radius: 999px; background: var(--vn-suave); }
html[data-visual="novo"] .ng-quadro::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--vn-cinza2); }
html[data-visual="novo"] .ng-coluna[class*="ng-cor-"],
html[data-visual="novo"] .ng-coluna {
  min-width: 0;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: var(--vn-suave);
}
html[data-visual="novo"] .ng-coluna.soltar-aqui { box-shadow: 0 0 0 2px var(--vn-etapa, var(--vn-azul)); }
html[data-visual="novo"] .ng-coluna-topo {
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--vn-etapa, var(--vn-crm-cinza-etapa));
  color: #fff;
}
html[data-visual="novo"] .ng-halo { width: 8px; height: 8px; background: rgba(255, 255, 255, .92); box-shadow: none; }
html[data-visual="novo"] .ng-coluna-topo strong { font-size: 13px; font-weight: 600; }
html[data-visual="novo"] .ng-coluna-topo small { color: rgba(255, 255, 255, .85); font-size: 11px; font-weight: 500; }
html[data-visual="novo"] .ng-quantos {
  min-width: 24px;
  width: auto;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .26);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
html[data-visual="novo"] .ng-coluna-total { padding: 2px 4px 8px; border-bottom: 1px solid var(--vn-fio); color: var(--vn-tinta); font-size: 13px; font-weight: 600; }
html[data-visual="novo"] .ng-coluna-vazia { color: var(--vn-cinza2); font-size: 12px; }
html[data-visual="novo"] .ng-adicionar {
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: var(--vn-placa);
  color: var(--vn-cinza);
  box-shadow: 0 0 0 1px var(--vn-fio), 0 1px 2px rgba(0, 0, 0, .04);
  font-size: 12px;
  font-weight: 500;
}
html[data-visual="novo"] .ng-adicionar:hover { background: var(--vn-placa); color: var(--vn-tinta); box-shadow: 0 0 0 1px var(--vn-etapa, var(--vn-fio)); }

/* 3.4 O cartão do negócio: branco, canto 12, sombra leve; a sanfona abre dentro dele. */
html[data-visual="novo"] .ng-cartao[class*="ng-cor-"],
html[data-visual="novo"] .ng-cartao {
  padding: 11px 12px;
  border: 0;
  border-radius: var(--vn-raio-cartao);
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .ng-cartao:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .09); }
html[data-visual="novo"] .ng-cartao:focus-visible { outline: 2px solid var(--vn-azul); }
html[data-visual="novo"] .ng-cartao-resumo strong { font-size: 13px; font-weight: 600; }
html[data-visual="novo"] .ng-seta { border-color: var(--vn-cinza2); }
html[data-visual="novo"] .ng-editar {
  height: 26px;
  border: 0;
  border-radius: 9px;
  background: var(--vn-placa);
  color: var(--vn-tinta);
  box-shadow: 0 0 0 1px var(--vn-fio), 0 1px 2px rgba(0, 0, 0, .04);
  font-size: 12px;
  font-weight: 500;
}
html[data-visual="novo"] .ng-editar:hover { background: var(--vn-suave); color: var(--vn-tinta); }
html[data-visual="novo"] .ng-contato { color: var(--vn-azul); font-size: 12px; font-weight: 500; }
html[data-visual="novo"] .ng-valor { font-size: 16px; font-weight: 700; }
html[data-visual="novo"] .ng-tags span { background: var(--vn-suave); color: var(--vn-cinza); font-size: 11px; font-weight: 500; }
html[data-visual="novo"] .ng-proxima { background: var(--vn-suave); font-size: 12px; font-weight: 500; }
html[data-visual="novo"] .ng-proxima > b { color: var(--vn-azul); }
html[data-visual="novo"] .ng-proxima small { color: var(--vn-cinza); font-size: 11px; font-weight: 500; }
html[data-visual="novo"] .ng-proxima-atrasada { background: var(--vn-vermelho-s); color: var(--vn-vermelho); }
html[data-visual="novo"] .ng-proxima-atrasada > b { background: var(--vn-vermelho); color: #fff; }
html[data-visual="novo"] .ng-proxima-atrasada small,
html[data-visual="novo"] .ng-atrasada { color: var(--vn-vermelho); }
html[data-visual="novo"] .ng-cartao-detalhes footer { border-top: 1px solid var(--vn-fio); font-size: 12px; font-weight: 500; }
html[data-visual="novo"] .ng-inicial { width: 22px; height: 22px; border-radius: 50%; background: var(--vn-verde-s); color: var(--vn-crm-verde-texto); font-weight: 600; }
html[data-visual="novo"] .ng-cartao-detalhes footer i { color: var(--vn-cinza); font-size: 11px; font-weight: 500; }

/* 3.5 Os selos de Ganho/Perdido e de temperatura: pílulas, sem caixa alta. */
html[data-visual="novo"] .ng-situacao { padding: 2px 9px; background: var(--vn-suave); color: var(--vn-cinza); font-size: 11px; font-weight: 600; }
html[data-visual="novo"] .ng-situacao-ganho { background: var(--vn-verde-s); color: var(--vn-crm-verde-texto); }
html[data-visual="novo"] .ng-situacao-perdido { background: var(--vn-vermelho-s); color: var(--vn-vermelho); }
html[data-visual="novo"] .ng-temp { padding: 3px 9px; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
html[data-visual="novo"] .ng-temp-quente { background: var(--vn-vermelho-s); color: var(--vn-vermelho); }
html[data-visual="novo"] .ng-temp-morno { background: var(--vn-amarelo-s); color: var(--vn-crm-ambar-texto); }
html[data-visual="novo"] .ng-temp-frio { background: var(--vn-teal-s); color: var(--vn-teal); }
html[data-visual="novo"] .ng-chance { font-size: 12px; font-weight: 500; }

/* 3.6 A lista e a paginação */
html[data-visual="novo"] .ng-lista { background: transparent; }
html[data-visual="novo"] .ng-lista-cabeca {
  background: transparent;
  border-bottom: 1px solid var(--vn-fio);
  color: var(--vn-cinza);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] .ng-lista-linha { border-top: 1px solid var(--vn-fio); background: transparent; font-size: 13px; }
html[data-visual="novo"] .ng-lista-linha:hover { background: var(--vn-suave); }
html[data-visual="novo"] .ng-lista-negocio strong { font-weight: 600; }
html[data-visual="novo"] .ng-lista-negocio small,
html[data-visual="novo"] .ng-lista-acao small { color: var(--vn-cinza); font-size: 12px; }
html[data-visual="novo"] .ng-etapa-chip {
  padding: 3px 10px;
  border-left: 0;
  border-radius: 999px;
  background: var(--vn-etapa-s, var(--vn-suave));
  color: var(--vn-etapa-t, var(--vn-cinza));
  font-size: 12px;
  font-weight: 600;
}
html[data-visual="novo"] .ng-lista-vazia { border-top: 0; color: var(--vn-cinza); }
html[data-visual="novo"] .ng-paginas { border-top: 1px solid var(--vn-fio); font-size: 12px; font-weight: 500; }
html[data-visual="novo"] .ng-comecar { border: 0; border-radius: var(--vn-raio-painel); box-shadow: var(--vn-sombra); }

/* 3.7 A ficha do negócio (gaveta): caixas suaves, sem fio, linha do tempo na cor da casa. */
html[data-visual="novo"] .ng-gaveta-titulo b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
html[data-visual="novo"] .ng-sobrelinha { color: var(--sag-green-dark); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
html[data-visual="novo"] .ng-gaveta .gv-topo .x { border: 0; border-radius: 50%; background: var(--vn-suave); color: var(--vn-cinza); }
html[data-visual="novo"] .ng-gaveta .campo > label { color: var(--vn-cinza); font-size: 12px; font-weight: 500; }
html[data-visual="novo"] .ng-contato-da-ficha { border: 0; border-radius: var(--vn-raio-cartao); background: var(--vn-suave); }
html[data-visual="novo"] .ng-iniciais { border-radius: 50%; background: var(--vn-verde-s); color: var(--vn-crm-verde-texto); font-weight: 600; }
html[data-visual="novo"] .ng-contato-da-ficha a { color: var(--vn-azul); font-weight: 600; }
html[data-visual="novo"] .ng-ficha-numeros div { border: 0; border-radius: var(--vn-raio-cartao); background: var(--vn-suave); }
html[data-visual="novo"] .ng-ficha-numeros dt { color: var(--vn-cinza); font-size: 12px; font-weight: 500; }
html[data-visual="novo"] .ng-ficha-numeros dd { font-weight: 600; }
html[data-visual="novo"] .ng-historico li { border-left-color: var(--vn-fio); border-radius: 0 10px 10px 0; background: var(--vn-suave); }
html[data-visual="novo"] .ng-linha-do-tempo li { background: none; }
html[data-visual="novo"] .ng-linha-do-tempo li::before { background: var(--sag-green); box-shadow: 0 0 0 3px var(--vn-verde-s); }
html[data-visual="novo"] .ng-linha-do-tempo li::after { background: var(--vn-fio); }
html[data-visual="novo"] .ng-etapa-seta,
html[data-visual="novo"] .ng-etapa-tirar { border-radius: 9px; }