/* O VISUAL NOVO — Agenda, Indicadores e as larguras menores — agente 5 (continuação de visual-novo-crm.css).
 * Tudo atrás de html[data-visual="novo"]; os tokens --vn-crm-* vêm declarados em visual-novo-crm.css §0.
 * Tem de ser ligada DEPOIS de visual-novo-crm.css (as larguras menores da §6 vencem as regras-base de lá). */

/* =================================================================== 4. Atividades / Agenda */

/* 4.1 A caixa e a barra: pílulas brancas, o alternador Semana/Lista como o segmentado da amostra. */
html[data-visual="novo"] .ag-casca {
  min-width: 0;
  border: 0;
  border-radius: var(--vn-raio-painel);
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .ag-barra { padding: 14px 16px; border-bottom: 1px solid var(--vn-fio); }
html[data-visual="novo"] .ag-navegar button {
  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: 13px;
  font-weight: 500;
}
html[data-visual="novo"] .ag-navegar button:first-child,
html[data-visual="novo"] .ag-navegar button:nth-child(3) { font-size: 16px; }
html[data-visual="novo"] .ag-navegar button:hover { background: var(--vn-suave); }
html[data-visual="novo"] .ag-navegar strong { color: var(--vn-tinta); font-size: 13px; font-weight: 600; }
html[data-visual="novo"] .ag-barra > select,
html[data-visual="novo"] .ag-busca {
  border: 0;
  border-radius: 999px;
  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: 13px;
  font-weight: 500;
}
html[data-visual="novo"] .ag-barra > select { padding-left: 14px; }
html[data-visual="novo"] .ag-busca { padding: 0 14px; }
html[data-visual="novo"] .ag-busca span { color: var(--vn-cinza2); }
html[data-visual="novo"] .ag-busca input { font-size: 13px; }
html[data-visual="novo"] .ag-barra > select:focus,
html[data-visual="novo"] .ag-busca:focus-within { box-shadow: 0 0 0 2px var(--vn-azul); }
html[data-visual="novo"] .ag-vista { padding: 3px; border: 0; border-radius: 9px; background: rgba(0, 0, 0, .06); }
html[data-visual="novo"] .ag-vista button { padding: 6px 14px; border-radius: 9px; color: var(--vn-cinza); font-size: 13px; font-weight: 500; }
html[data-visual="novo"] .ag-vista button.ativa { background: var(--vn-placa); color: var(--vn-tinta); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

/* 4.2 A semana: sete painéis brancos leves sobre a folha; hoje com fio verde. */
html[data-visual="novo"] .ag-principal { background: var(--vn-folha); }
html[data-visual="novo"] .ag-semana { gap: 8px; }
html[data-visual="novo"] .ag-dia {
  border: 0;
  border-radius: var(--vn-raio-cartao);
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .ag-dia.hoje { background: var(--vn-placa); box-shadow: 0 0 0 2px var(--sag-green); }
html[data-visual="novo"] .ag-dia > header { border-bottom: 1px solid var(--vn-fio); }
html[data-visual="novo"] .ag-dia > header span { color: var(--vn-cinza); font-size: 12px; font-weight: 600; text-transform: none; }
html[data-visual="novo"] .ag-dia > header b { color: var(--vn-tinta); font-size: 20px; font-weight: 600; }
html[data-visual="novo"] .ag-dia > header small { color: var(--vn-cinza); font-size: 12px; }
html[data-visual="novo"] .ag-dia.hoje > header span { color: var(--vn-crm-verde-texto); }
html[data-visual="novo"] .ag-dia.hoje > header b { width: 30px; height: 30px; border-radius: 50%; background: var(--sag-green); color: #fff; font-size: 14px; }
html[data-visual="novo"] .ag-livre { color: var(--vn-cinza2); font-size: 12px; }
html[data-visual="novo"] .ag-adicionar {
  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"] .ag-adicionar:hover { background: var(--vn-suave); color: var(--vn-tinta); border: 0; }

/* 4.3 O cartão da atividade: a barrinha e o ícone na cor do tipo. */
html[data-visual="novo"] .ag-cartao {
  border: 0;
  border-radius: 9px;
  background: var(--vn-suave);
  box-shadow: none;
}
html[data-visual="novo"] .ag-cartao:hover,
html[data-visual="novo"] .ag-cartao:focus-visible { box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
html[data-visual="novo"] .ag-cartao::before { left: 0; background: var(--vn-cinza2); }
html[data-visual="novo"] .ag-cartao.tipo-reuniao::before { background: var(--vn-azul); }
html[data-visual="novo"] .ag-cartao.tipo-ligacao::before { background: var(--vn-roxo); }
html[data-visual="novo"] .ag-cartao.tipo-retorno::before { background: var(--vn-laranja); }
html[data-visual="novo"] .ag-hora > b,
html[data-visual="novo"] .ag-tipo { border-radius: 50%; background: var(--vn-placa); color: var(--vn-cinza); }
html[data-visual="novo"] .ag-hora > b { flex-basis: 24px; height: 24px; }
html[data-visual="novo"] .tipo-reuniao .ag-hora > b,
html[data-visual="novo"] .ag-tipo.tipo-reuniao { background: var(--vn-azul-s); color: var(--vn-azul); }
html[data-visual="novo"] .tipo-ligacao .ag-hora > b,
html[data-visual="novo"] .ag-tipo.tipo-ligacao { background: var(--vn-roxo-s); color: var(--vn-roxo); }
html[data-visual="novo"] .tipo-retorno .ag-hora > b,
html[data-visual="novo"] .ag-tipo.tipo-retorno { background: var(--vn-laranja-s); color: var(--vn-crm-laranja-texto); }
html[data-visual="novo"] .ag-hora > span { color: var(--vn-tinta); font-weight: 600; }
html[data-visual="novo"] .ag-hora small { color: var(--vn-cinza); }
html[data-visual="novo"] .ag-cartao > strong { color: var(--vn-tinta); font-weight: 600; }
html[data-visual="novo"] .ag-pessoa { color: var(--vn-cinza); }
html[data-visual="novo"] .ag-situacao { color: var(--vn-crm-ambar-texto); font-weight: 600; }
html[data-visual="novo"] .ag-situacao i { background: var(--vn-amarelo); }
html[data-visual="novo"] .situacao-concluida .ag-situacao { color: var(--vn-crm-verde-texto); }
html[data-visual="novo"] .situacao-concluida .ag-situacao i { background: var(--vn-verde); }
html[data-visual="novo"] .situacao-cancelada .ag-situacao,
html[data-visual="novo"] .situacao-nao_compareceu .ag-situacao { color: var(--vn-cinza); }
html[data-visual="novo"] .situacao-cancelada .ag-situacao i,
html[data-visual="novo"] .situacao-nao_compareceu .ag-situacao i { background: var(--vn-cinza2); }
html[data-visual="novo"] .atrasada .ag-situacao { color: var(--vn-vermelho); }
html[data-visual="novo"] .atrasada .ag-situacao i { background: var(--vn-vermelho); box-shadow: 0 0 0 3px var(--vn-vermelho-s); }
html[data-visual="novo"] .ag-cartao.atrasada { border: 0; background: var(--vn-vermelho-s); }
html[data-visual="novo"] .ag-cartao footer { border-top: 1px solid var(--vn-fio); }
html[data-visual="novo"] .ag-cartao footer > span { color: var(--vn-cinza); }
html[data-visual="novo"] .ag-cartao footer button { border-radius: 9px; background: var(--vn-verde-s); color: var(--vn-crm-verde-texto); font-weight: 600; }
html[data-visual="novo"] .ag-cartao footer button:hover { background: var(--vn-verde); color: #fff; }

/* 4.4 A lista */
html[data-visual="novo"] .ag-lista { border: 0; border-radius: var(--vn-raio-cartao); background: var(--vn-placa); box-shadow: var(--vn-sombra); }
html[data-visual="novo"] .ag-lista > header {
  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"] .ag-linha { border-top: 1px solid var(--vn-fio); background: transparent; font-size: 13px; }
html[data-visual="novo"] .ag-linha:hover { background: var(--vn-suave); }
html[data-visual="novo"] .ag-linha.atrasada { background: var(--vn-vermelho-s); }
html[data-visual="novo"] .ag-linha strong { color: var(--vn-tinta); font-size: 13px; font-weight: 600; }
html[data-visual="novo"] .ag-linha small { color: var(--vn-cinza); font-size: 12px; }
html[data-visual="novo"] .ag-tipo { width: 30px; height: 30px; }
html[data-visual="novo"] .ag-selo { padding: 3px 10px; background: var(--vn-amarelo-s); color: var(--vn-crm-ambar-texto); font-size: 12px; font-weight: 600; }
html[data-visual="novo"] .ag-selo.concluida { background: var(--vn-verde-s); color: var(--vn-crm-verde-texto); }
html[data-visual="novo"] .ag-selo.cancelada { background: var(--vn-suave); color: var(--vn-cinza); }
html[data-visual="novo"] .ag-selo.nao_compareceu,
html[data-visual="novo"] .ag-selo.atrasada { background: var(--vn-vermelho-s); color: var(--vn-vermelho); }
html[data-visual="novo"] .ag-lista-vazia { color: var(--vn-cinza); font-size: 13px; }

/* 4.5 A coluna da direita: Esta semana e Agenda do closer viram painéis brancos. */
html[data-visual="novo"] .ag-lado { border-left: 0; background: var(--vn-folha); }
html[data-visual="novo"] .ag-lateral {
  border: 0;
  border-radius: var(--vn-raio-painel);
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .ag-lateral > header { padding: 14px 16px 10px; border-bottom: 0; background: transparent; }
html[data-visual="novo"] .ag-lateral > header span { color: var(--vn-cinza); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
html[data-visual="novo"] .ag-lateral > header h3 { color: var(--vn-tinta); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
html[data-visual="novo"] .ag-lateral > header button {
  min-width: 30px;
  height: 30px;
  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-weight: 500;
}
html[data-visual="novo"] .ag-lateral > header button:hover { background: var(--vn-suave); }
html[data-visual="novo"] .ag-proximas > button { background: transparent; border-bottom: 1px solid var(--vn-fio); }
html[data-visual="novo"] .ag-proximas strong { color: var(--vn-tinta); font-size: 13px; font-weight: 500; }
html[data-visual="novo"] .ag-proximas small { color: var(--vn-cinza); font-size: 12px; }
html[data-visual="novo"] .ag-data { border-radius: 9px; background: var(--vn-azul-s); color: var(--vn-azul); }
html[data-visual="novo"] .ag-data.atrasada { background: var(--vn-vermelho-s); color: var(--vn-vermelho); }
html[data-visual="novo"] .ag-palavra-atrasada { color: var(--vn-vermelho); font-weight: 600; }
html[data-visual="novo"] .ag-lado-vazio { color: var(--vn-cinza); font-size: 13px; }
html[data-visual="novo"] .ag-pagina { background: var(--vn-placa); }
html[data-visual="novo"] .ag-pagina > header { background: transparent; }
html[data-visual="novo"] .ag-dono > b { border-radius: 50%; background: var(--vn-azul-s); color: var(--vn-azul); font-weight: 600; }
html[data-visual="novo"] .ag-dono strong { color: var(--vn-tinta); font-size: 13px; font-weight: 600; }
html[data-visual="novo"] .ag-dono small { color: var(--vn-cinza); font-size: 12px; }
html[data-visual="novo"] .ag-dono > i { font-weight: 600; }
html[data-visual="novo"] .ag-dono > i.ativa { background: var(--vn-verde-s); color: var(--vn-crm-verde-texto); }
html[data-visual="novo"] .ag-dono > i.pausada { background: var(--vn-amarelo-s); color: var(--vn-crm-ambar-texto); }
html[data-visual="novo"] .ag-link { color: var(--vn-cinza); font-size: 12px; }
html[data-visual="novo"] .ag-link input { border-color: var(--vn-fio); border-radius: 9px 0 0 9px; font-size: 12px; }
html[data-visual="novo"] .ag-link button { border-radius: 0 9px 9px 0; background: var(--sag-green); font-size: 12px; font-weight: 600; }
html[data-visual="novo"] .ag-pagina-acoes a,
html[data-visual="novo"] .ag-pagina-acoes button {
  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"] .ag-pagina-acoes a:hover,
html[data-visual="novo"] .ag-pagina-acoes button:hover { background: var(--vn-suave); }
html[data-visual="novo"] .ag-nova-agenda {
  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"] .ag-nova-agenda:hover { background: var(--vn-suave); color: var(--vn-tinta); border: 0; }
html[data-visual="novo"] .ag-sem-agenda > b { border-radius: 50%; background: var(--vn-verde-s); color: var(--vn-crm-verde-texto); }
html[data-visual="novo"] .ag-sem-agenda strong { font-size: 14px; font-weight: 600; }
html[data-visual="novo"] .ag-sem-agenda p { color: var(--vn-cinza); font-size: 12px; }

/* 4.6 As gavetas da Agenda: só o que destoava (a cortina e o resto são das peças comuns). */
html[data-visual="novo"] .ag-gaveta .ag-sobrelinha { color: var(--sag-green-dark); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
html[data-visual="novo"] .ag-tipos button,
html[data-visual="novo"] .ag-rapidas-botoes button,
html[data-visual="novo"] .ag-pilulas button { border-radius: 9px; font-weight: 500; }

/* =================================================================== 5. Indicadores */

/* 5.1 A barra do período: um painel branco; "Atualizar" e "Imprimir" brancos, "Baixar relatório" o único verde. */
html[data-visual="novo"] .in-filtro {
  border: 0;
  border-radius: var(--vn-raio-painel);
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .in-filtro-rotulo { color: var(--vn-cinza); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
html[data-visual="novo"] .in-campo { border-color: var(--vn-fio); border-radius: 9px; background: var(--vn-folha); font-size: 13px; }
html[data-visual="novo"] .in-campo:focus { border-color: var(--vn-azul); box-shadow: 0 0 0 3px var(--vn-azul-s); }
html[data-visual="novo"] .in-atualizado { color: var(--vn-cinza); font-size: 12px; }
html[data-visual="novo"] .in-botao {
  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: 13px;
  font-weight: 500;
}
html[data-visual="novo"] .in-botao:hover { background: var(--vn-suave); }
html[data-visual="novo"] .in-botao.in-botao-principal {
  background: var(--sag-green);
  color: #fff;
  box-shadow: 0 2px 8px rgba(4, 122, 142, .35);
}
html[data-visual="novo"] .in-botao.in-botao-principal:hover { background: var(--sag-green-dark); }
/* Só um verde na barra: o "Aplicar" das datas e o "Baixar relatório" não brigam — quando as datas
 * estão à mostra, o "Aplicar" é o principal e o "Baixar" volta a ser branco. */
html[data-visual="novo"] .in-filtro:has(.in-datas:not([hidden])) .in-acoes .in-botao-principal {
  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);
}

/* 5.2 A faixa "Saúde geral" vira um cartão de cor (teal); nada de verde-escuro quase preto. */
html[data-visual="novo"] .in-heroi:not(.in-heroi-so-faixa) {
  border: 0;
  border-radius: var(--vn-raio-painel);
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .in-heroi-so-faixa { border: 0; border-radius: var(--vn-raio-painel); background: var(--vn-placa); box-shadow: var(--vn-sombra); }
html[data-visual="novo"] .in-heroi:not(.in-heroi-so-faixa) .in-saude { background: var(--vn-teal); color: #fff; }
html[data-visual="novo"] .in-heroi .in-saude .in-anel { background: conic-gradient(#fff calc(var(--nota, 0) * 1%), rgba(255, 255, 255, .28) 0); }
html[data-visual="novo"] .in-heroi .in-saude .in-anel::after { background: var(--vn-teal); }
html[data-visual="novo"] .in-heroi .in-saude .in-anel strong { font-weight: 600; }
html[data-visual="novo"] .in-heroi .in-saude-texto span {
  color: rgba(255, 255, 255, .92);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}
html[data-visual="novo"] .in-heroi .in-saude-texto b,
html[data-visual="novo"] .in-heroi .in-saude-texto b[class*="in-palavra-"] { background: rgba(255, 255, 255, .22); color: #fff; font-weight: 600; }
html[data-visual="novo"] .in-heroi .in-saude-texto small { color: rgba(255, 255, 255, .88); }
html[data-visual="novo"] .in-heroi-texto > span { color: var(--vn-teal); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
html[data-visual="novo"] .in-heroi-texto h2 { font-weight: 600; }
html[data-visual="novo"] .in-heroi-texto p { color: var(--vn-cinza); }
html[data-visual="novo"] .in-pilulas i { border-radius: 999px; font-weight: 600; }
html[data-visual="novo"] .in-pilula-cinza { --in-cor: var(--vn-cinza); --in-claro: var(--vn-suave); }
html[data-visual="novo"] .in-pilula-azul { --in-cor: var(--vn-azul); --in-claro: var(--vn-azul-s); }
html[data-visual="novo"] .in-pilula-verde { --in-cor: var(--vn-crm-verde-texto); --in-claro: var(--vn-verde-s); }
html[data-visual="novo"] .in-pilula-rosa { --in-cor: var(--vn-crm-rosa-texto); --in-claro: var(--vn-rosa-s); }

/* 5.3 Os oito cartões: os quatro primeiros em cor cheia, os quatro seguintes brancos com o número
 * colorido (a "2ª fileira" da amostra). */
html[data-visual="novo"] .in-cartoes { gap: 12px; }
html[data-visual="novo"] .in-cor-verde  { --in-cor: var(--vn-verde); }
html[data-visual="novo"] .in-cor-roxo   { --in-cor: var(--vn-roxo); }
html[data-visual="novo"] .in-cor-azul   { --in-cor: var(--vn-azul); }
html[data-visual="novo"] .in-cor-ambar  { --in-cor: var(--vn-laranja); }
html[data-visual="novo"] .in-cor-rosa   { --in-cor: var(--vn-rosa); }
html[data-visual="novo"] .in-cartao[class*="in-cor-"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 112px;
  padding: 18px 20px;
  border: 0;
  border-radius: var(--vn-raio-cartao);
  background: var(--in-cor);
  box-shadow: none;
  color: #fff;
}
html[data-visual="novo"] .in-cartao[class*="in-cor-"]::before { display: none; }
/* O cabeçalho vira legenda embaixo do número; o ícone vai para o círculo à direita. */
html[data-visual="novo"] .in-cartao[class*="in-cor-"] .in-cartao-cabeca { order: 2; margin-top: 6px; gap: 0; }
html[data-visual="novo"] .in-cartao[class*="in-cor-"] .in-cartao-cabeca span {
  color: rgba(255, 255, 255, .95);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html[data-visual="novo"] .in-cartao[class*="in-cor-"] .in-cartao-cabeca i {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
html[data-visual="novo"] .in-cartao[class*="in-cor-"] .in-cartao-cabeca i svg { width: 24px; height: 24px; }
html[data-visual="novo"] .in-cartao[class*="in-cor-"] strong {
  order: 1;
  margin: 0;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.02em;
}
html[data-visual="novo"] .in-cartao[class*="in-cor-"] .in-agora { color: rgba(255, 255, 255, .85); font-size: 12px; }
html[data-visual="novo"] .in-cartao[class*="in-cor-"] .in-cartao-pe { order: 3; justify-content: flex-start; margin-top: 8px; padding-right: 56px; }
html[data-visual="novo"] .in-cartao[class*="in-cor-"] .in-cartao-pe small { color: rgba(255, 255, 255, .85); font-size: 12px; font-weight: 500; }
html[data-visual="novo"] .in-cartao[class*="in-cor-"] .in-variacao,
html[data-visual="novo"] .in-cartao[class*="in-cor-"] .in-sobe,
html[data-visual="novo"] .in-cartao[class*="in-cor-"] .in-desce { color: #fff; font-size: 12px; font-weight: 600; }
/* A segunda fileira: cartão branco, número e ícone na cor. */
html[data-visual="novo"] .in-cartao[class*="in-cor-"]:nth-child(n + 5) {
  background: var(--vn-placa);
  color: var(--vn-tinta);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .in-cartao[class*="in-cor-"]:nth-child(n + 5) strong { color: var(--in-cor); }
html[data-visual="novo"] .in-cartao[class*="in-cor-"]:nth-child(n + 5) .in-cartao-cabeca span { color: var(--vn-cinza); }
html[data-visual="novo"] .in-cartao[class*="in-cor-"]:nth-child(n + 5) .in-cartao-cabeca i { background: var(--vn-suave); color: var(--in-cor); }
html[data-visual="novo"] .in-cartao[class*="in-cor-"]:nth-child(n + 5) .in-agora,
html[data-visual="novo"] .in-cartao[class*="in-cor-"]:nth-child(n + 5) .in-cartao-pe small { color: var(--vn-cinza); }
html[data-visual="novo"] .in-cartao[class*="in-cor-"]:nth-child(n + 5) .in-variacao { color: var(--vn-cinza); }
html[data-visual="novo"] .in-cartao[class*="in-cor-"]:nth-child(n + 5) .in-sobe { color: var(--vn-crm-verde-texto); }
html[data-visual="novo"] .in-cartao[class*="in-cor-"]:nth-child(n + 5) .in-desce { color: var(--vn-vermelho); }

/* 5.4 As seções (Farol, gráfico, origem, equipe, lado a lado): painéis brancos, títulos comuns. */
html[data-visual="novo"] .in-secao {
  border: 0;
  border-radius: var(--vn-raio-painel);
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .in-secao-cabeca { border-radius: 0; background: transparent; }
html[data-visual="novo"] .in-secao-titulo > span { color: var(--vn-cinza); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
html[data-visual="novo"] .in-secao-titulo h3 { color: var(--vn-tinta); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
html[data-visual="novo"] .in-secao-titulo p { color: var(--vn-cinza); }
html[data-visual="novo"] .in-secao-cabeca > a { color: var(--vn-azul); font-weight: 500; }
html[data-visual="novo"] .in-legenda { color: var(--vn-cinza); }
html[data-visual="novo"] .in-modulo { border: 0; border-radius: var(--vn-raio-cartao); background: var(--vn-suave); }
html[data-visual="novo"] .in-modulo-verde { --in-mod: var(--vn-crm-verde-texto); --in-mod-claro: var(--vn-verde-s); }
html[data-visual="novo"] .in-modulo-ambar { --in-mod: var(--vn-crm-ambar-texto); --in-mod-claro: var(--vn-amarelo-s); }
html[data-visual="novo"] .in-modulo-vermelho { --in-mod: var(--vn-vermelho); --in-mod-claro: var(--vn-vermelho-s); }
html[data-visual="novo"] .in-modulo-cinza { --in-mod: var(--vn-cinza); --in-mod-claro: var(--vn-placa); }
html[data-visual="novo"] .in-modulo-icone { border-radius: 50%; }
html[data-visual="novo"] .in-modulo-topo > b { font-weight: 600; }
html[data-visual="novo"] .in-modulo-cinza .in-nota { background: var(--vn-placa); color: var(--vn-cinza); }
html[data-visual="novo"] .in-modulo small { color: var(--vn-cinza); }
html[data-visual="novo"] .in-metricas { padding: 3px; border-radius: 9px; background: rgba(0, 0, 0, .06); }
html[data-visual="novo"] .in-metricas button { border-radius: 9px; color: var(--vn-cinza); font-weight: 500; }
html[data-visual="novo"] .in-metricas button[aria-pressed="true"] { 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"] .in-barra { background: linear-gradient(var(--vn-azul), var(--vn-roxo)); }
html[data-visual="novo"] .in-barra.in-zero { background: var(--vn-fio); }
html[data-visual="novo"] .in-dica {
  background: var(--vn-placa);
  color: var(--vn-tinta);
  box-shadow: 0 0 0 1px var(--vn-fio), 0 6px 18px rgba(0, 0, 0, .12);
  font-weight: 500;
}
html[data-visual="novo"] .in-dia-rotulo,
html[data-visual="novo"] .in-grafico-pe,
html[data-visual="novo"] .in-agora { color: var(--vn-cinza); }
html[data-visual="novo"] .in-alerta::before { display: none; }
html[data-visual="novo"] .in-alerta-icone { border-radius: 50%; }
html[data-visual="novo"] .in-alerta-tom-vermelho { --in-al: var(--vn-vermelho); --in-al-claro: var(--vn-vermelho-s); }
html[data-visual="novo"] .in-alerta-tom-ambar { --in-al: var(--vn-crm-ambar-texto); --in-al-claro: var(--vn-amarelo-s); }
html[data-visual="novo"] .in-alerta-tom-verde { --in-al: var(--vn-crm-verde-texto); --in-al-claro: var(--vn-verde-s); }
html[data-visual="novo"] .in-alerta-tom-cinza { --in-al: var(--vn-cinza); --in-al-claro: var(--vn-suave); }
html[data-visual="novo"] .in-alerta-texto b { font-weight: 600; letter-spacing: 0; text-transform: none; }
html[data-visual="novo"] .in-alerta-texto small { color: var(--vn-cinza); }
html[data-visual="novo"] .in-alerta:hover { background: var(--vn-suave); }
html[data-visual="novo"] .in-seta { border-color: var(--vn-fio); color: var(--vn-cinza); }
html[data-visual="novo"] .in-linha-rotulo small,
html[data-visual="novo"] .in-linha-valor small { color: var(--vn-cinza); }
html[data-visual="novo"] .in-etapa-cinza { --in-et: var(--vn-crm-cinza-etapa); --in-et-claro: var(--vn-suave); }
html[data-visual="novo"] .in-etapa-azul { --in-et: var(--vn-azul); --in-et-claro: var(--vn-azul-s); }
html[data-visual="novo"] .in-etapa-ambar { --in-et: var(--vn-rosa); --in-et-claro: var(--vn-rosa-s); }
html[data-visual="novo"] .in-etapa-violeta,
html[data-visual="novo"] .in-etapa-roxo { --in-et: var(--vn-roxo); --in-et-claro: var(--vn-roxo-s); }
html[data-visual="novo"] .in-etapa-verde { --in-et: var(--vn-verde); --in-et-claro: var(--vn-verde-s); }
html[data-visual="novo"] .in-etapa-vermelho { --in-et: var(--vn-vermelho); --in-et-claro: var(--vn-vermelho-s); }
html[data-visual="novo"] .in-tabela th {
  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"] .in-tabela td { border-top: 1px solid var(--vn-fio); }
html[data-visual="novo"] .in-tabela td small { color: var(--vn-cinza); font-size: 12px; }
html[data-visual="novo"] .in-avatar-verde { background: var(--vn-verde-s); color: var(--vn-crm-verde-texto); }
html[data-visual="novo"] .in-avatar-azul { background: var(--vn-azul-s); color: var(--vn-azul); }
html[data-visual="novo"] .in-avatar-roxo { background: var(--vn-roxo-s); color: var(--vn-roxo); }
html[data-visual="novo"] .in-avatar-ambar { background: var(--vn-laranja-s); color: var(--vn-crm-laranja-texto); }
html[data-visual="novo"] .in-avatar-rosa { background: var(--vn-rosa-s); color: var(--vn-crm-rosa-texto); }

/* =================================================================== 6. Larguras menores */

@media (max-width: 1500px) {
  html[data-visual="novo"] .co-cartao[class*="co-cor-"] { min-height: 84px; }
}
@media (max-width: 1250px) {
  html[data-visual="novo"] .ag-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-visual="novo"] .ag-semana { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 1150px) {
  html[data-visual="novo"] .in-cartao[class*="in-cor-"] { min-height: 104px; }
}

/* 6.1 O celular (até 650 px): cartões de número 2×2 com o número sempre acima da legenda; a
 * semana da Agenda vira LISTA vertical, um dia por bloco; nada rola para o lado. */
@media (max-width: 650px) {
  html[data-visual="novo"] .co-cartoes,
  html[data-visual="novo"] .ng-metricas,
  html[data-visual="novo"] .ag-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html[data-visual="novo"] .in-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html[data-visual="novo"] .co-cartao[class*="co-cor-"],
  html[data-visual="novo"] .ng-metrica,
  html[data-visual="novo"] .ag-metrica,
  html[data-visual="novo"] .in-cartao[class*="in-cor-"] { min-height: 92px; padding: 14px 16px; }
  html[data-visual="novo"] .co-cartao[class*="co-cor-"] { padding-right: 56px; }
  html[data-visual="novo"] .co-cartao[class*="co-cor-"] .co-selo { right: 10px; width: 36px; height: 36px; }
  html[data-visual="novo"] .co-cartao[class*="co-cor-"] .co-selo svg { width: 18px; height: 18px; }
  html[data-visual="novo"] .co-cartao[class*="co-cor-"] strong,
  html[data-visual="novo"] .ng-metrica strong,
  html[data-visual="novo"] .ag-metrica strong,
  html[data-visual="novo"] .in-cartao[class*="in-cor-"] strong { font-size: 24px; }
  html[data-visual="novo"] .in-cartao[class*="in-cor-"] .in-cartao-pe { padding-right: 0; }
  html[data-visual="novo"] .in-cartao[class*="in-cor-"] .in-cartao-cabeca i { right: 10px; width: 36px; height: 36px; }
  html[data-visual="novo"] .in-cartao[class*="in-cor-"] .in-cartao-cabeca i svg { width: 18px; height: 18px; }
  /* Tags: três cartões estreitos, sem o ícone. */
  html[data-visual="novo"] .tg-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html[data-visual="novo"] .co-tela-tags .co-cartao[class*="co-cor-"] { min-height: 80px; padding: 12px; }
  html[data-visual="novo"] .co-tela-tags .co-cartao .co-selo { display: none; }
  html[data-visual="novo"] .co-tela-tags .co-cartao-titulo { overflow: hidden; white-space: nowrap; }
  /* As abas dos Contatos rolam por dentro, em vez de quebrar em quatro linhas. */
  html[data-visual="novo"] .co-abas { flex-wrap: nowrap; width: auto; overflow-x: auto; scrollbar-width: none; }
  /* Negócios: a faixa de filtros quebra; os selects dividem a linha. */
  html[data-visual="novo"] .ng-barra select { flex: 1 1 140px; max-width: none; }
  html[data-visual="novo"] .ng-quadro { padding: 12px; }
  /* Agenda: a semana em lista vertical — um bloco por dia. */
  html[data-visual="novo"] .ag-semana { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 0; }
  html[data-visual="novo"] .ag-dia { min-height: 0; }
  html[data-visual="novo"] .ag-dia > header { grid-template-columns: auto 1fr auto; column-gap: 10px; }
  html[data-visual="novo"] .ag-dia > header span { grid-column: 1; }
  html[data-visual="novo"] .ag-dia > header small { grid-column: 2; margin-top: 0; }
  html[data-visual="novo"] .ag-dia > header b { grid-row: 1; grid-column: 3; }
  html[data-visual="novo"] .ag-do-dia { max-height: none; overflow: visible; }
  html[data-visual="novo"] .ag-livre { padding: 10px 5px; text-align: left; }
  html[data-visual="novo"] .ag-barra > select,
  html[data-visual="novo"] .ag-busca { flex: 1 1 100%; max-width: none; }
  /* Indicadores: a faixa de Saúde geral empilha. */
  html[data-visual="novo"] .in-heroi:not(.in-heroi-so-faixa) { grid-template-columns: minmax(0, 1fr); }
}