/* O VISUAL NOVO: filtros, selos, gavetas, janelas e avisos numa peca so. Ver docs/design/VARREDURA-VISUAL-2026-11-06.md (2.4 a 2.7).
 *
 * Esta folha carrega DEPOIS das folhas de cada area e ANTES de visual-novo-padrao.css (medidas de texto)
 * e do submenu. Ela so unifica o desenho; as medidas gerais de texto sao do padrao.
 * Tudo atras de html[data-visual="novo"]. Nada de !important: onde a folha da area tem
 * especificidade alta, o seletor aqui repete a mesma forma (e vence por vir depois).
 *
 * ÍNDICE
 *   1 Filtros   2 Selos   3 Gavetas   4 Janelas   5 Botoes de perigo   6 Avisos
 */

/* =================================================================== 1. Filtros (2.4)
 * UM desenho: o painel branco de canto 12 (a faixa dentro de um cartao herda o branco e o canto do cartao).
 * Campo de 32, fundo suave, canto 9, sem borda ate o foco. Rotulo 12/500 cinza, sem caixa alta.
 * Busca: o MESMO campo em toda tela (lupa + texto, nao e mais pilula). */

html[data-visual="novo"] .co-filtros {
  gap: 8px 12px;
  padding: 12px 16px;
  border-radius: var(--vn-raio-cartao);
  background: var(--vn-placa);
}
html[data-visual="novo"] :is(.ng-barra, .ag-barra, .fx-barra-no-cartao, .eq-filtros) { gap: 8px; }
html[data-visual="novo"] :is(.ng-barra, .ag-barra) { padding: 12px 16px; }

/* rotulo de filtro: 12/500 cinza (o do Contatos era 8 px maiusculo; o do funil, 10 px maiusculo) */
html[data-visual="novo"] .co-filtro,
html[data-visual="novo"] .ng-pipeline > span {
  color: var(--vn-cinza);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* o campo: select e caixa de texto das barras, e o envoltorio da busca (lupa + texto) */
html[data-visual="novo"] :is(.co-filtros, .ng-barra, .ag-barra, .fx-barra-no-cartao, .filtros-das-contas, .eq-filtros, .barra-de-controles, .barra-de-quem-saiu) :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"])),
html[data-visual="novo"] :is(.co-filtros, .ng-barra, .ag-barra, .fx-barra-no-cartao, .filtros-das-contas, .eq-filtros, .barra-de-controles, .barra-de-quem-saiu) :is(.ng-busca, .ag-busca, .cs-busca, .pilula-de-busca) {
  box-sizing: border-box;
  height: var(--alto-p);
  border: 1px solid transparent;
  border-radius: 9px;
  background-color: var(--vn-suave);
  box-shadow: none;
  color: var(--vn-tinta);
  font-size: 13px;
  font-weight: 400;
}
html[data-visual="novo"] :is(.co-filtros, .ng-barra, .ag-barra, .fx-barra-no-cartao, .filtros-das-contas, .eq-filtros, .barra-de-controles, .barra-de-quem-saiu) select { padding: 0 12px; }
html[data-visual="novo"] :is(.co-filtros, .ng-barra, .ag-barra, .fx-barra-no-cartao, .filtros-das-contas, .eq-filtros, .barra-de-controles, .barra-de-quem-saiu) :is(.ng-busca, .ag-busca, .cs-busca, .pilula-de-busca) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
html[data-visual="novo"] :is(.co-filtros, .ng-barra, .ag-barra, .fx-barra-no-cartao, .filtros-das-contas, .eq-filtros, .barra-de-controles, .barra-de-quem-saiu) :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"])):hover:not(:focus):not(:disabled),
html[data-visual="novo"] :is(.co-filtros, .ng-barra, .ag-barra, .fx-barra-no-cartao, .filtros-das-contas, .eq-filtros, .barra-de-controles, .barra-de-quem-saiu) :is(.ng-busca, .ag-busca, .cs-busca, .pilula-de-busca):hover:not(:focus-within) {
  border-color: rgba(0, 0, 0, .10);
}
/* foco: branco com o anel verde da casa (o mesmo do campo de gaveta) */
html[data-visual="novo"] :is(.co-filtros, .ng-barra, .ag-barra, .fx-barra-no-cartao, .filtros-das-contas, .eq-filtros, .barra-de-controles, .barra-de-quem-saiu) :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"])):focus,
html[data-visual="novo"] :is(.co-filtros, .ng-barra, .ag-barra, .fx-barra-no-cartao, .filtros-das-contas, .eq-filtros, .barra-de-controles, .barra-de-quem-saiu) :is(.ng-busca, .ag-busca, .cs-busca, .pilula-de-busca):focus-within {
  outline: none;
  background-color: var(--vn-placa);
  border-color: var(--sag-green);
  box-shadow: var(--vn-pc-anel);
}
/* o campo DENTRO da busca e invisivel: quem tem borda e o envoltorio */
html[data-visual="novo"] :is(.co-filtros, .ng-barra, .ag-barra, .fx-barra-no-cartao, .filtros-das-contas, .eq-filtros, .barra-de-controles, .barra-de-quem-saiu) :is(.ng-busca, .ag-busca, .cs-busca, .pilula-de-busca) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
html[data-visual="novo"] :is(.co-filtros, .ng-barra, .ag-barra, .fx-barra-no-cartao, .filtros-das-contas, .eq-filtros, .barra-de-controles, .barra-de-quem-saiu) :is(.ng-busca, .ag-busca, .cs-busca, .pilula-de-busca) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):is(:hover, :focus) {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
}
html[data-visual="novo"] :is(.ng-busca, .ag-busca, .cs-busca, .pilula-de-busca) > span { color: var(--vn-cinza2); font-size: 14px; line-height: 1; }

/* botoes dentro das barras: o mesmo canto 9 (era pilula numa e retangulo noutra) */
html[data-visual="novo"] :is(.barra-de-controles, .filtros-da-caixa) .btn,
html[data-visual="novo"] :is(.ng-botao-da-barra, .ng-chip) {
  height: var(--alto-p);
  border-radius: 9px;
  font-size: 13px;
}

/* =================================================================== 2. Selos (2.5)
 * UM desenho: pilula, 11/600, fundo suave + texto forte da mesma familia, sem caixa alta.
 * Bolinha so em situacao "ao vivo" (Ativo, conectado, canal): 6 px. Temperatura nao e ao vivo: sem bolinha.
 * O selo colorido de TAG (selo-de-tag-*) e o simbolo de cartao (.gg-cabeca > .selo) ficam como estao. */

html[data-visual="novo"] :is(.gg-ambiente, .manual-artigo, body) .selo:not(.gg-cabeca > .selo):not(.atendimento *),
html[data-visual="novo"] :is(.ig-selo, .cs-selo-situacao, .grp-chip, .perfil-selo, .ng-temp, .ng-situacao, .co-tag,
                             .ag-selo, .vg-situacao, .ff-chip, .fx-etiquetas em, .vg-quantas-pendencias) {
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] :is(.ig-selo, .cs-selo-situacao, .grp-chip, .ng-temp, .ag-selo, .vg-situacao) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* a bolinha de "ao vivo": 6 px, da cor do texto do selo */
html[data-visual="novo"] :is(.ig-selo, .cs-selo-situacao) i { width: 6px; height: 6px; }
html[data-visual="novo"] .vg-situacao::before { width: 6px; height: 6px; }
html[data-visual="novo"] .ng-temp::before { display: none; }

/* neutro (padrao; o .selo puro ja e cinza em visual-novo-pecas.css) */
html[data-visual="novo"] :is(.perfil-selo, .ng-situacao, .co-neutra, .co-mais) { background: var(--vn-suave); color: var(--vn-cinza); }
/* ok = verde da marca */
html[data-visual="novo"] :is(.gg-ambiente, .manual-artigo, body) .selo.ok,
html[data-visual="novo"] :is(.grp-chip.ok, .perfil-selo-verde, .ng-situacao-ganho, .co-ok, .co-verde, .ig-selo-verde) { background: var(--vn-verde-s); color: var(--vn-verde-t); }
html[data-visual="novo"] :is(.ig-selo-verde i, .cs-selo-ativa i) { background: var(--vn-verde); }
/* atencao = amarelo */
html[data-visual="novo"] :is(.gg-ambiente, .manual-artigo, body) .selo.aviso,
html[data-visual="novo"] :is(.grp-chip.aviso, .perfil-selo-ambar, .ng-temp-morno, .co-sem-dono, .ig-selo-ambar, .ff-chip.ff-falta, .ag-selo) { background: var(--vn-amarelo-s); color: var(--vn-amarelo-t); }
html[data-visual="novo"] :is(.ig-selo-ambar i, .cs-selo-teste i) { background: var(--vn-amarelo); }
/* ruim = vermelho */
html[data-visual="novo"] :is(.gg-ambiente, .manual-artigo, body) .selo.ruim,
html[data-visual="novo"] :is(.grp-chip.ruim, .ng-temp-quente, .ng-situacao-perdido, .ig-selo-vermelho, .vg-quantas-pendencias,
                             .ag-selo.cancelada, .ag-selo.nao_compareceu, .ag-selo.atrasada) { background: var(--vn-vermelho-s); color: var(--vn-vermelho-t); }
html[data-visual="novo"] :is(.ig-selo-vermelho i, .cs-selo-congelada i) { background: var(--vn-vermelho); }
/* concluida (Agenda) = verde; frio = teal; neutro dos Grupos/Integracoes */
html[data-visual="novo"] .ag-selo.concluida { background: var(--vn-verde-s); color: var(--vn-verde-t); }
html[data-visual="novo"] .ng-temp-frio { background: var(--vn-teal-s); color: var(--vn-teal-t); }
html[data-visual="novo"] :is(.grp-chip.neutro, .ig-selo-cinza, .gg-ambiente .selo.neutro) { background: var(--vn-suave); color: var(--vn-cinza); }
html[data-visual="novo"] .ig-selo-cinza i { background: var(--vn-cinza2); }
/* familias extras do .selo (canal, etapa) com o tom forte */
html[data-visual="novo"] .selo.azul { background: var(--vn-azul-s); color: var(--vn-azul-t); }
html[data-visual="novo"] .selo.rosa { background: var(--vn-rosa-s); color: var(--vn-rosa-t); }
html[data-visual="novo"] .selo.roxo { background: var(--vn-roxo-s); color: var(--vn-roxo-t); }
html[data-visual="novo"] .selo.laranja { background: var(--vn-laranja-s); color: var(--vn-laranja-t); }
html[data-visual="novo"] .selo.teal { background: var(--vn-teal-s); color: var(--vn-teal-t); }

/* o selo do Console (cores por variavel) */
html[data-visual="novo"] .cs-selo-ativa { --cs-selo-fundo: var(--vn-verde-s); --cs-selo-texto: var(--vn-verde-t); --cs-selo-bolinha: var(--vn-verde); }
html[data-visual="novo"] .cs-selo-teste { --cs-selo-fundo: var(--vn-amarelo-s); --cs-selo-texto: var(--vn-amarelo-t); --cs-selo-bolinha: var(--vn-amarelo); }
html[data-visual="novo"] .cs-selo-congelada { --cs-selo-fundo: var(--vn-vermelho-s); --cs-selo-texto: var(--vn-vermelho-t); --cs-selo-bolinha: var(--vn-vermelho); }
html[data-visual="novo"] .cs-selo-neutro { --cs-selo-fundo: var(--vn-suave); --cs-selo-texto: var(--vn-cinza); --cs-selo-bolinha: var(--vn-cinza2); }

/* Atendimento: so o tom forte (o tamanho compacto da lista e da conversa e do agente de medidas) */
html[data-visual="novo"] .atendimento .selo.atendente,
html[data-visual="novo"] .atendimento .selo.humano,
html[data-visual="novo"] .atendimento .selo.tag,
html[data-visual="novo"] .atendimento .selo.ok { background: var(--vn-verde-s); color: var(--vn-verde-t); }
html[data-visual="novo"] .atendimento .selo.espera,
html[data-visual="novo"] .atendimento .selo.aviso { background: var(--vn-amarelo-s); color: var(--vn-amarelo-t); }
html[data-visual="novo"] .atendimento .selo.ruim { background: var(--vn-vermelho-s); color: var(--vn-vermelho-t); }
html[data-visual="novo"] .atendimento .selo.bot,
html[data-visual="novo"] .atendimento .selo.canal-whatsapp { background: var(--vn-azul-s); color: var(--vn-azul-t); }
html[data-visual="novo"] .atendimento .selo.canal-direct { background: var(--vn-rosa-s); color: var(--vn-rosa-t); }
html[data-visual="novo"] .atendimento .selo.canal-messenger { background: var(--vn-roxo-s); color: var(--vn-roxo-t); }

/* =================================================================== 3. Gavetas (2.6)
 * Larguras so em tres: 460 (.gaveta-curta, para quem quiser), 560 (padrao) e 720 (larga).
 * Fora da regra, de proposito: as de pagina inteira (.nw-gaveta: fila e regras do ritmo, 860) e a .cn-gaveta do construtor. */

html[data-visual="novo"] .cortina.para-o-lado > .gaveta.gaveta-curta { width: min(460px, 100vw); }
html[data-visual="novo"] .cortina.para-o-lado > .gaveta.gaveta-larga,
html[data-visual="novo"] .cortina.para-o-lado > .gaveta:has(.ng-editor-etapas),
html[data-visual="novo"] .cortina.para-o-lado > .gaveta:has(.co-perfil) { width: min(720px, 100vw); }
html[data-visual="novo"] .cortina.para-o-lado > .gaveta.ng-gaveta,
html[data-visual="novo"] .cortina.para-o-lado > .gaveta:has(.ng-ficha),
html[data-visual="novo"] .cortina.para-o-lado > .gaveta:has(.co-janela-novo) { width: min(560px, 100vw); max-width: 100vw; }
/* o Relatorio da automacao (gaveta de leitura larga): 680 -> 720; a mesma forma do seletor de la */
html[data-visual="novo"] .cortina.para-o-lado > .gaveta.ajuda:has(> .gv-corpo > .numero-do-relatorio) { width: min(720px, 100vw); }
/* a janela montada a mao dos Grupos: 620 -> 560, sem animacao propria */
html[data-visual="novo"] .grp-modal { width: min(560px, 100vw); animation: none; }

/* a Agenda sem animacao e sem desfoque proprios: a cortina e a gaveta sao as comuns */
html[data-visual="novo"] .gaveta.ag-gaveta { animation: none; }
html[data-visual="novo"] .cortina.para-o-lado:has(.ag-gaveta) { background: var(--vn-pc-cortina); backdrop-filter: none; }

/* o x num desenho so (o de visual-novo-pecas.css): redondo, 30, fundo suave */
html[data-visual="novo"] :is(.gaveta, .ng-gaveta, .ag-gaveta) .gv-topo .x,
html[data-visual="novo"] :is(.janela-do-atendimento, .janela-da-webcam) .fechar-janela,
html[data-visual="novo"] .grp-fechar {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--alto-pastilha);
  height: var(--alto-pastilha);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--vn-suave);
  color: var(--vn-cinza);
  font-size: 16px;
  line-height: 1;
}
html[data-visual="novo"] :is(.gaveta, .ng-gaveta, .ag-gaveta) .gv-topo .x:hover,
html[data-visual="novo"] :is(.janela-do-atendimento, .janela-da-webcam) .fechar-janela:hover,
html[data-visual="novo"] .grp-fechar:hover { background: #e8eaef; color: var(--vn-tinta); }

/* sobretitulo ("NOVA OPORTUNIDADE", "NOVA ATIVIDADE"...) some: o titulo ja diz */
html[data-visual="novo"] .gaveta .ag-sobrelinha,
html[data-visual="novo"] .gaveta .ng-sobrelinha { display: none; }
html[data-visual="novo"] :is(.ng-gaveta, .ag-gaveta) .gv-topo { align-items: center; }
html[data-visual="novo"] :is(.ng-gaveta-titulo, .ag-gaveta-titulo) b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--vn-tinta); }

/* rotulo e altura de campo iguais nas gavetas de Negocios e Agenda (eram 10 px / 39 px) */
html[data-visual="novo"] :is(.ng-gaveta, .ag-gaveta) .campo > label,
html[data-visual="novo"] :is(.ng-gaveta, .ag-gaveta) .ag-faixa label {
  color: var(--vn-cinza);
  font-size: 13px;
  font-weight: 500;
}
html[data-visual="novo"] :is(.ng-gaveta, .ag-gaveta) .campo :is(input:not([type="checkbox"]):not([type="radio"]), select),
html[data-visual="novo"] .ag-gaveta .ag-faixa input { height: 40px; }

/* gaveta de LEITURA (abrirAjuda, `.gaveta.ajuda`): o "Entendi" e BRANCO, para nao parecer a acao principal */
html[data-visual="novo"] .gaveta.ajuda .gv-pe .btn.principal {
  background: var(--vn-placa);
  color: var(--vn-tinta);
  box-shadow: var(--vn-pc-botao-sombra);
}
html[data-visual="novo"] .gaveta.ajuda .gv-pe .btn.principal:hover:not(:disabled) {
  background: var(--vn-suave);
  color: var(--vn-tinta);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .09), 0 1px 2px rgba(0, 0, 0, .04);
}

/* o pe com varios botoes (Tags > Editar tem 4): um principal, os outros brancos, o "Apagar" so com texto vermelho,
 * separado a esquerda; se faltar largura, quebra em vez de sair da gaveta */
html[data-visual="novo"] .gv-pe { flex-wrap: wrap; }
html[data-visual="novo"] .gv-pe .btn.perigo { margin-right: auto; }

/* =================================================================== 4. Janelas (2.6)
 * A janela de confirmacao e a comum (.dialogo, em visual-novo-pecas.css). As proprias do Atendimento
 * ficam com a cortina e a largura das comuns. */
html[data-visual="novo"] .janela-do-atendimento,
html[data-visual="novo"] .janela-da-webcam { background: var(--vn-pc-cortina); backdrop-filter: none; }
html[data-visual="novo"] .janela-do-atendimento > .janela { width: 560px; }

/* =================================================================== 5. O botao de perigo, num desenho so
 * Branco com fio e o texto vermelho forte (o "Excluir" do construtor, o "Rebaixar" dos Grupos, o "Apagar" da gaveta).
 * Quem confirma uma destruicao (.dialogo) segue com o vermelho cheio da peca comum. */
html[data-visual="novo"] :is(.gv-pe, .ag-rapidas-botoes, .nw-gaveta, .cn-gaveta-pe) :is(.btn, button).perigo,
html[data-visual="novo"] .grp-mini.perigo {
  background: var(--vn-placa);
  border-color: transparent;
  color: var(--vn-vermelho-t);
  box-shadow: var(--vn-pc-botao-sombra);
}
html[data-visual="novo"] :is(.gv-pe, .ag-rapidas-botoes, .nw-gaveta, .cn-gaveta-pe) :is(.btn, button).perigo:hover:not(:disabled),
html[data-visual="novo"] .grp-mini.perigo:hover {
  background: var(--vn-vermelho-s);
  color: var(--vn-vermelho-t);
  filter: none;
}

/* =================================================================== 6. Avisos (2.7)
 * Uma familia: branco, canto 12, sombra suave e a barrinha de cor a esquerda.
 * O aviso do meio da tela (decisao dele) e o do canto ja estao assim em visual-novo-pecas.css; aqui entram o
 * recado do Atendimento (que era um toast escuro) e o .recado dentro das telas de gestao (que pintava o fundo). */
html[data-visual="novo"] .recado-do-atendimento {
  padding: 12px 20px 12px 22px;
  border-radius: 12px;
  background: var(--vn-placa);
  box-shadow: inset 4px 0 0 var(--vn-verde), 0 0 0 1px var(--vn-fio), 0 12px 34px rgba(28, 36, 64, .16);
  color: var(--vn-tinta);
  font-size: 14px;
  font-weight: 500;
}
html[data-visual="novo"] .gg-ambiente .recado { border-radius: 12px; border-width: 0; }
html[data-visual="novo"] .gg-ambiente .recado.ok,
html[data-visual="novo"] .gg-ambiente .recado.aviso { background: var(--vn-placa); color: var(--vn-tinta); }