/* O VISUAL NOVO — Automação, construtor e Grupos — agente 4.
 * 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.
 *
 * O que é comum (botão, gaveta, janela de confirmação, campo, selo, tabela, vazio) vem do
 * `visual-novo-pecas.css`. Aqui fica só o que é destas três telas: as abas emprestadas dos
 * Grupos (.grp-aba), o cartão das seções da Automação, o Relatório, o palco e a gaveta da
 * etapa do construtor (.cn-*), e a régua paralela dos Grupos (.grp-*, .cs-cartao no Painel,
 * .grp-modal) — que antes falava em #fff e #15866d e agora fala só em --vn-*.
 * Os Grupos (§5 a §7) moram na segunda folha, visual-novo-automacao-2.css.
 * Mapa das peças: docs/design/inventario/4-automacao-e-grupos.md. */

/* =================================================================== 0. Tokens da área */

/* O que a régua não tinha. O "-t" é o tom forte para letra sobre o fundo suave: pega o da
 * folha das peças, e o valor depois da vírgula só vale se ela ainda não tiver chegado. */
html[data-visual="novo"] {
  --vn-au-alto: var(--alto-p);          /* 32: botão pequeno, trilho do segmentado, zoom */
  --vn-au-dentro: var(--alto-mini);     /* 26: a pílula dentro do trilho e o mini-botão */
  --vn-au-raio: 9px;                    /* o canto do botão (igual ao .btn das peças) */
  --vn-au-raio-dentro: 7px;             /* o canto da pílula dentro do trilho */
  --vn-au-anel: 0 0 0 1px var(--vn-fio), 0 1px 2px rgba(0, 0, 0, .04);
  --vn-au-pilula: 0 1px 3px rgba(0, 0, 0, .08);
  --vn-au-verde-sombra: 0 2px 8px rgba(4, 122, 142, .32);
  --vn-au-foco: 0 0 0 3px rgba(4, 122, 142, .20);
  --vn-au-cortina: var(--vn-pc-cortina, rgba(28, 36, 64, .30));
  --vn-au-gaveta-sombra: -16px 0 48px rgba(28, 36, 64, .14);
  --vn-au-verde-t: var(--vn-pc-verde-t, #06647a);
  --vn-au-amarelo-t: var(--vn-pc-amarelo-t, #9a6a00);
  --vn-au-vermelho-t: var(--vn-pc-vermelho-t, #b02a2e);
  --vn-au-azul-t: var(--vn-pc-azul-t, #2e47d4);
  --vn-au-roxo-t: var(--vn-pc-roxo-t, #6d28d9);
  --vn-au-teal-t: var(--vn-pc-teal-t, #11808e);
  --vn-au-laranja-t: var(--vn-pc-laranja-t, #b53f08);
}

/* =================================================================== 1. As abas da tela */

/* Automação (4 abas) e Grupos (6 abas) usam a MESMA barra (`.grp-barra-das-abas`, ver
 * inventário §1.1). Vira o controle segmentado da amostra: trilho cinza-claro com fio por
 * dentro, pílula de 26 dentro de 32, a escolhida branca com sombra. A barra de fora some;
 * nos Grupos a escolha do lançamento fica ao lado. */
html[data-visual="novo"] .grp-barra-das-abas {
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
html[data-visual="novo"] .grp-barra-das-abas .grp-abas,
html[data-visual="novo"] .grp-abas {
  display: flex;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  height: var(--vn-au-alto);
  box-sizing: border-box;
  padding: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  border-radius: var(--vn-au-raio);
  background: var(--vn-suave);
  box-shadow: inset 0 0 0 1px var(--vn-fio);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
html[data-visual="novo"] .grp-abas::-webkit-scrollbar { display: none; }
html[data-visual="novo"] .grp-aba {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: var(--vn-au-dentro);
  padding: 0 14px;
  border-radius: var(--vn-au-raio-dentro);
  color: var(--vn-cinza);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .13s ease, color .13s ease;
}
html[data-visual="novo"] .grp-aba:hover { background: rgba(255, 255, 255, .6); color: var(--vn-tinta); }
html[data-visual="novo"] .grp-aba.ativa {
  background: var(--vn-placa);
  color: var(--vn-tinta);
  box-shadow: var(--vn-au-pilula);
}
html[data-visual="novo"] .grp-aba:focus-visible { outline: 2px solid rgba(4, 122, 142, .55); outline-offset: 1px; }
/* o seletor do lançamento e o Atualizar, na altura do trilho */
html[data-visual="novo"] .grp-escolha { gap: 8px; }
html[data-visual="novo"] .grp-escolha .btn { height: var(--vn-au-alto); }

/* No celular a fileira ROLA DE LADO e nunca corta (varredura §2.9: só "Painel · Lançamentos ·
 * Grupos" aparecia). A barra vira grade de uma coluna para o trilho não passar da tela, e a
 * última aba aparece pela metade — o sinal de que há mais para o lado. */
@media (max-width: 720px) {
  html[data-visual="novo"] .grp-barra-das-abas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  html[data-visual="novo"] .grp-barra-das-abas .grp-abas { width: auto; max-width: 100%; scroll-snap-type: x proximity; }
  html[data-visual="novo"] .grp-aba { scroll-snap-align: start; padding: 0 12px; }
  html[data-visual="novo"] .grp-tela,
  html[data-visual="novo"] .grp-tela [data-grp-miolo],
  html[data-visual="novo"] .aut-painel { min-width: 0; max-width: 100%; }
}

/* =================================================================== 2. Automação — as quatro abas */

/* 2.1 O cartão de cada aba: painel branco, canto 16, sem fio, sombra quase invisível. Uma cor
 * da paleta por assunto, no ícone: automações laranja (o raio da Proposta G), campanhas azul,
 * modelos roxo, quem saiu vermelho. Os ids são da própria tela (telas-do-disparo.js). */
html[data-visual="novo"] #secao-automacoes { --vn-au-cor: var(--vn-laranja); --vn-au-cor-s: var(--vn-laranja-s); }
html[data-visual="novo"] #secao-campanhas { --vn-au-cor: var(--vn-azul); --vn-au-cor-s: var(--vn-azul-s); }
html[data-visual="novo"] #secao-modelos { --vn-au-cor: var(--vn-roxo); --vn-au-cor-s: var(--vn-roxo-s); }
html[data-visual="novo"] #secao-pediram-para-sair { --vn-au-cor: var(--vn-vermelho); --vn-au-cor-s: var(--vn-vermelho-s); }

html[data-visual="novo"] .aut-painel { margin-top: 14px; }
html[data-visual="novo"] :is(#secao-automacoes, #secao-campanhas, #secao-modelos, #secao-pediram-para-sair) {
  padding: 18px 20px 10px;
  border: 0;
  border-radius: var(--vn-raio-painel);
  background: var(--vn-placa);
  backdrop-filter: none;
  box-shadow: var(--vn-sombra);
  color: var(--vn-tinta);
}
html[data-visual="novo"] :is(#secao-automacoes, #secao-campanhas, #secao-modelos, #secao-pediram-para-sair) .gg-cabeca {
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
/* o ícone: quadrado de cor cheia, símbolo branco (o `h3 i` da amostra, um pouco maior) */
html[data-visual="novo"] :is(#secao-automacoes, #secao-campanhas, #secao-modelos, #secao-pediram-para-sair) .gg-cabeca > .selo:first-child {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 9px;
  background: var(--vn-au-cor);
  color: #fff;
  font-size: 16px;
  box-shadow: none;
}
/* "DISPARO 1 A 1" chega escrito em maiúsculas: aqui vira "Disparo 1 a 1", miúdo e cinza —
 * nada de caixa alta espaçada em cima de título. */
html[data-visual="novo"] :is(#secao-automacoes, #secao-campanhas, #secao-modelos, #secao-pediram-para-sair) .gg-sobre {
  display: block;
  margin: 0 0 1px;
  color: var(--vn-cinza2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase;
}
html[data-visual="novo"] :is(#secao-automacoes, #secao-campanhas, #secao-modelos, #secao-pediram-para-sair) .gg-sobre::first-letter { text-transform: uppercase; }
html[data-visual="novo"] :is(#secao-automacoes, #secao-campanhas, #secao-modelos, #secao-pediram-para-sair) .gg-cabeca h3 {
  color: var(--vn-tinta);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}
html[data-visual="novo"] :is(#secao-automacoes, #secao-campanhas, #secao-modelos, #secao-pediram-para-sair) .gg-nota {
  color: var(--vn-cinza);
  font-size: 13px;
}
/* "+ Automação", "+ Campanha", "+ Modelo": o botão principal verde da seção */
html[data-visual="novo"] :is(#secao-automacoes, #secao-campanhas, #secao-modelos) .gg-cabeca > .btn[data-abrir] {
  flex: none;
  height: var(--vn-au-alto);
  padding: 0 14px;
  border-color: transparent;
  border-radius: var(--vn-au-raio);
  background: var(--sag-green);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--vn-au-verde-sombra);
}
html[data-visual="novo"] :is(#secao-automacoes, #secao-campanhas, #secao-modelos) .gg-cabeca > .btn[data-abrir]:hover:not(:disabled) {
  background: var(--sag-green-dark);
  box-shadow: 0 3px 10px rgba(4, 122, 142, .38);
}

/* 2.2 A tabela: o padrão das peças (cabeçalho 11.5/600 cinza, fio entre linhas); aqui só o
 * que é da tela — a linha que abre o construtor ou o modelo, o texto apagado e os botões. */
html[data-visual="novo"] :is(#secao-automacoes, #secao-modelos) .tabela > .linha[data-id] { cursor: pointer; }
html[data-visual="novo"] .aut-painel .mudo { color: var(--vn-cinza2); font-size: inherit; }
html[data-visual="novo"] .aut-painel .dita-da-proposta { margin-top: 2px; color: var(--vn-cinza); font-size: 12px; }
/* os botões da linha: brancos, pequenos, todos iguais — nenhum é principal na lista */
html[data-visual="novo"] .aut-painel .btn.p[data-disparo] {
  height: 28px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 13px;
}
html[data-visual="novo"] .aut-painel [data-disparo] + [data-disparo] { margin-left: 6px; }

/* 2.3 O estado vazio leva a cor da seção no círculo do símbolo */
html[data-visual="novo"] .aut-painel .vazio .simbolo { background: var(--vn-au-cor-s, var(--vn-suave)); color: var(--vn-au-cor, var(--vn-cinza2)); }
html[data-visual="novo"] .aut-painel .vazio p { max-width: 460px; margin-left: auto; margin-right: auto; }

/* 2.4 Pediram para sair: a resposta automática numa caixa suave, a busca em pílula */
html[data-visual="novo"] #secao-pediram-para-sair .resposta-a-quem-sai {
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--vn-suave);
  color: var(--vn-tinta);
  font-size: 13px;
}
html[data-visual="novo"] #secao-pediram-para-sair .resposta-a-quem-sai b { font-weight: 600; }
html[data-visual="novo"] #secao-pediram-para-sair .resposta-a-quem-sai small { margin-top: 3px; color: var(--vn-cinza); font-size: 12px; }
html[data-visual="novo"] #secao-pediram-para-sair .resposta-a-quem-sai input { margin-top: 2px; accent-color: var(--sag-green); }
html[data-visual="novo"] #secao-pediram-para-sair .barra-de-quem-saiu { margin: 0 0 10px; }
html[data-visual="novo"] #secao-pediram-para-sair .barra-de-quem-saiu .mudo { color: var(--vn-cinza); font-size: 12px; }
html[data-visual="novo"] #secao-pediram-para-sair [data-saida-nada] { color: var(--vn-cinza); font-size: 13px; }

/* 2.5 NO CELULAR, UMA AUTOMAÇÃO POR CARTÃO — e não a tabela quebrando palavra por palavra
 * ("Quando / eu / puser / o / contato", varredura §2.9). O mesmo desenho que o disparo.css já
 * dá a Campanhas e Modelos, agora nas quatro abas: a primeira célula é o título, as outras
 * levam o nome da coluna em cima (`data-rotulo`), e os botões ocupam a largura toda. */
@media (max-width: 650px) {
  html[data-visual="novo"] :is(#secao-automacoes, #secao-campanhas, #secao-modelos, #secao-pediram-para-sair) { padding: 14px 12px 6px; }
  html[data-visual="novo"] :is(#secao-automacoes, #secao-campanhas, #secao-modelos) .gg-cabeca { flex-wrap: wrap; }
  html[data-visual="novo"] :is(#secao-automacoes, #secao-campanhas, #secao-modelos) .gg-cabeca > .btn[data-abrir] { margin-left: 46px; }
  html[data-visual="novo"] .aut-painel .tabela > .linha.cabecalho { display: none; }
  html[data-visual="novo"] .aut-painel .tabela > .linha:not(.cabecalho) {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 12px;
    align-items: start;
    margin: 0 0 10px;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: var(--vn-placa);
    box-shadow: 0 0 0 1px var(--vn-fio), 0 1px 2px rgba(0, 0, 0, .03);
  }
  html[data-visual="novo"] .aut-painel .tabela > .linha:not(.cabecalho):hover { background: var(--vn-placa); }
  html[data-visual="novo"] .aut-painel .tabela > .linha:not(.cabecalho) > span { min-width: 0; overflow-wrap: break-word; }
  html[data-visual="novo"] .aut-painel .tabela > .linha:not(.cabecalho) > span:first-child {
    grid-column: 1 / -1;
    font-size: 14px;
    font-weight: 600;
  }
  html[data-visual="novo"] .aut-painel .tabela > .linha:not(.cabecalho) > span.dir { text-align: left; }
  html[data-visual="novo"] .aut-painel .tabela > .linha:not(.cabecalho) > span:not(:first-child)[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: 2px;
    color: var(--vn-cinza);
    font-size: 12px;
    font-weight: 500;
  }
  html[data-visual="novo"] .aut-painel .tabela > .linha:not(.cabecalho) > span:not(:first-child):not([data-rotulo]) {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--vn-fio);
  }
  html[data-visual="novo"] .aut-painel .tabela > .linha:not(.cabecalho) > span:not(:first-child):not([data-rotulo]):empty { display: none; }
  html[data-visual="novo"] .aut-painel [data-disparo] + [data-disparo] { margin-left: 0; }
  html[data-visual="novo"] .aut-painel .corta { white-space: normal; overflow-wrap: anywhere; }
}

/* 2.6 A lista das automações em linhas-cartão (telas-do-disparo-cartoes.js). Continua sendo
 * `.linha[data-id]` — é por aí que o clique abre o construtor —, mas fora de `.tabela`: a grade
 * é daqui. Colunas com largura certa porque cada linha é uma grade própria e elas precisam
 * ficar em registro: quem + selo + três mini-números + ações. */
html[data-visual="novo"] .vn-au-lista { display: grid; gap: 8px; padding: 2px 0 10px; }
html[data-visual="novo"] .linha.vn-au-linha {
  grid-template-columns: minmax(0, 1fr) 92px 216px 124px;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--vn-placa);
  box-shadow: var(--vn-au-anel);
  color: var(--vn-tinta);
  font-size: 13px;
  cursor: pointer;
  transition: background .13s ease;
}
html[data-visual="novo"] .linha.vn-au-linha:hover { background: var(--vn-suave); }
html[data-visual="novo"] .vn-au-quem { display: flex; align-items: center; gap: 8px; min-width: 0; }
html[data-visual="novo"] .vn-au-nome { display: grid; gap: 2px; min-width: 0; }
html[data-visual="novo"] .vn-au-nome :is(b, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-visual="novo"] .vn-au-nome b { color: var(--vn-tinta); font-size: 14px; font-weight: 600; }
html[data-visual="novo"] .vn-au-nome small { color: var(--vn-cinza); font-size: 12px; }
html[data-visual="novo"] .vn-au-numeros { display: flex; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
html[data-visual="novo"] .vn-au-mini { display: grid; gap: 4px; min-width: 64px; }
html[data-visual="novo"] .vn-au-mini b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-visual="novo"] .vn-au-mini small { color: var(--vn-cinza); font-size: 11px; }
html[data-visual="novo"] .vn-au-nada { color: var(--vn-cinza2); font-size: 13px; }
html[data-visual="novo"] .vn-au-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

/* o botão à vista: "Pausar" branco de letra âmbar, "Ativar"/"Retomar" verde */
html[data-visual="novo"] .aut-painel .btn.p.vn-au-ambar { color: var(--vn-au-amarelo-t); }
html[data-visual="novo"] .aut-painel .btn.p.vn-au-verde {
  border-color: transparent;
  background: var(--sag-green);
  color: #fff;
  box-shadow: var(--vn-au-verde-sombra);
}
html[data-visual="novo"] .aut-painel .btn.p.vn-au-verde:hover:not(:disabled) { background: var(--sag-green-dark); color: #fff; }

/* o "⋯" e o menu branco que ele abre */
html[data-visual="novo"] .vn-au-mais { position: relative; flex: none; }
html[data-visual="novo"] .aut-painel .btn.p.vn-au-mais-botao {
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 9px;
  color: var(--vn-cinza);
  font-size: 15px;
  line-height: 1;
}
html[data-visual="novo"] .vn-au-mais-lista {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 2px;
  min-width: 160px;
  padding: 6px;
  border-radius: 12px;
  background: var(--vn-placa);
  box-shadow: 0 0 0 1px var(--vn-fio), 0 12px 32px rgba(28, 36, 64, .14);
}
html[data-visual="novo"] .vn-au-mais-lista[hidden] { display: none; }
html[data-visual="novo"] .vn-au-mais-lista [data-disparo] + [data-disparo] { margin-left: 0; }
html[data-visual="novo"] .vn-au-mais-item {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--vn-tinta);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
html[data-visual="novo"] .vn-au-mais-item:hover,
html[data-visual="novo"] .vn-au-mais-item:focus-visible { background: var(--vn-suave); outline: none; }

/* Notebook estreito: duas fileiras (quem + selo; números + ações). */
@media (max-width: 900px) {
  html[data-visual="novo"] .linha.vn-au-linha { grid-template-columns: minmax(0, 1fr) auto; }
}
/* Celular: os cartões de cor em 2×2, sem o círculo do ícone (não cabe) e a linha empilhada. */
@media (max-width: 650px) {
  html[data-visual="novo"] .aut-painel .vn-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-visual="novo"] .aut-painel .vn-cartao-cor { min-height: 92px; padding: 14px; }
  html[data-visual="novo"] .aut-painel .vn-cartao-cor .vn-icone { display: none; }
  html[data-visual="novo"] .linha.vn-au-linha { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html[data-visual="novo"] .vn-au-nome :is(b, small) { white-space: normal; overflow-wrap: anywhere; }
  html[data-visual="novo"] .vn-au-acoes { justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--vn-fio); }
}

/* =================================================================== 3. O Relatório e a Simulação */

/* 3.1 O Relatório (abrirAjuda com os sete `.numero-do-relatorio`): mais largo, para os sete
 * números caberem em cartões brancos lado a lado sobre o cinza da folha. A especificidade
 * passa a da largura comum das gavetas (peças §3) de propósito. */
html[data-visual="novo"] .cortina.para-o-lado > .gaveta.ajuda:has(> .gv-corpo > .numero-do-relatorio) { width: min(680px, 100vw); }
html[data-visual="novo"] .gaveta.ajuda .gv-corpo:has(> .numero-do-relatorio) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  align-content: start;
  background: var(--vn-folha);
}
html[data-visual="novo"] .gaveta.ajuda .gv-corpo:has(> .numero-do-relatorio) > :not(.numero-do-relatorio) { grid-column: 1 / -1; min-width: 0; }
html[data-visual="novo"] .numero-do-relatorio {
  --vn-au-numero: var(--vn-tinta);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--vn-raio-cartao);
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .numero-do-relatorio b {
  min-width: 0;
  color: var(--vn-au-numero);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
html[data-visual="novo"] .numero-do-relatorio span { color: var(--vn-cinza); font-size: 12px; line-height: 1.45; }
html[data-visual="novo"] .numero-do-relatorio strong { color: var(--vn-tinta); font-size: 13px; font-weight: 600; }
/* a ordem é a do telas-do-disparo.js: enviadas, entregues, lidas, responderam, em ensaio,
 * na fila, não chegaram */
html[data-visual="novo"] .numero-do-relatorio:nth-child(1) { --vn-au-numero: var(--vn-azul); }
html[data-visual="novo"] .numero-do-relatorio:nth-child(2) { --vn-au-numero: var(--vn-verde); }
html[data-visual="novo"] .numero-do-relatorio:nth-child(3) { --vn-au-numero: var(--vn-roxo); }
html[data-visual="novo"] .numero-do-relatorio:nth-child(4) { --vn-au-numero: var(--vn-teal); }
html[data-visual="novo"] .numero-do-relatorio:nth-child(5) { --vn-au-numero: var(--vn-cinza2); }
html[data-visual="novo"] .numero-do-relatorio:nth-child(6) { --vn-au-numero: var(--vn-amarelo); }
html[data-visual="novo"] .numero-do-relatorio:nth-child(7) { --vn-au-numero: var(--vn-vermelho); }
/* a frase das execuções e as tabelas por pessoa: tabela dentro de painel branco */
html[data-visual="novo"] .gaveta.ajuda .gv-corpo:has(> .numero-do-relatorio) > .nota { margin: 6px 0 0; color: var(--vn-cinza); font-size: 13px; }
html[data-visual="novo"] .gaveta.ajuda .gv-corpo:has(> .numero-do-relatorio) > h4 { margin: 10px 0 0; }
html[data-visual="novo"] .gaveta.ajuda .gv-corpo:has(> .numero-do-relatorio) > :is(.tabela, .vazio) {
  margin-top: 6px;
  padding: 6px 4px;
  border-radius: var(--vn-raio-cartao);
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
}

/* 3.2 A Simulação (abrirAjuda com a lista dos passos) */
html[data-visual="novo"] .passos-da-simulacao { display: grid; gap: 8px; padding: 0; }
html[data-visual="novo"] .passos-da-simulacao li {
  border: 0;
  border-radius: 9px;
  background: var(--vn-suave);
  color: var(--vn-tinta);
  font-size: 13px;
}
html[data-visual="novo"] .passos-da-simulacao li.fim {
  border: 1px dashed rgba(0, 0, 0, .14);
  background: transparent;
  color: var(--vn-cinza);
}
html[data-visual="novo"] .motivos-da-simulacao { color: var(--vn-tinta); }

@media (max-width: 650px) {
  html[data-visual="novo"] .gaveta.ajuda .gv-corpo:has(> .numero-do-relatorio) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-visual="novo"] .numero-do-relatorio { padding: 12px; }
  html[data-visual="novo"] .numero-do-relatorio b { font-size: 20px; }
}

/* =================================================================== 4. O construtor */

/* 4.1 A barra de cima: os botões no padrão (32, canto 9, branco com fio), o principal verde.
 * Os três desenhos de botão pequeno (.cn-alterna, .cn-zoom, .cn-mini) passam a ter a mesma
 * altura e o mesmo canto: trilho de 32 com pílula de 26 dentro, como as abas. */
html[data-visual="novo"] .construtor .cn-barra {
  height: 60px;
  padding: 0 20px;
  background: var(--vn-placa);
  border-bottom: 1px solid var(--vn-fio);
}
html[data-visual="novo"] .construtor .cn-nome { color: var(--vn-tinta); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
html[data-visual="novo"] .construtor .cn-estado { color: var(--vn-cinza2); font-size: 12px; }
html[data-visual="novo"] .construtor .cn-estado-sujo { color: var(--vn-au-amarelo-t); font-weight: 500; }
html[data-visual="novo"] .construtor .cn-barra .btn { height: var(--vn-au-alto); border-radius: var(--vn-au-raio); font-size: 13px; }
html[data-visual="novo"] .construtor .btn.cn-so-icone { width: var(--vn-au-alto); color: var(--vn-cinza); }
html[data-visual="novo"] .construtor .btn.cn-so-icone:hover:not(:disabled) { color: var(--vn-tinta); }
html[data-visual="novo"] .construtor .cn-alterna {
  align-items: center;
  height: var(--vn-au-alto);
  box-sizing: border-box;
  gap: 2px;
  padding: 3px;
  border-radius: var(--vn-au-raio);
  background: var(--vn-suave);
  box-shadow: inset 0 0 0 1px var(--vn-fio);
}
html[data-visual="novo"] .construtor .cn-alterna button {
  height: var(--vn-au-dentro);
  padding: 0 14px;
  border-radius: var(--vn-au-raio-dentro);
  color: var(--vn-cinza);
  font-size: 13px;
  font-weight: 500;
}
html[data-visual="novo"] .construtor .cn-alterna button:hover:not(.cn-ligado) { background: rgba(255, 255, 255, .6); color: var(--vn-tinta); }
html[data-visual="novo"] .construtor .cn-alterna button.cn-ligado {
  background: var(--vn-placa);
  color: var(--vn-tinta);
  font-weight: 500;
  box-shadow: var(--vn-au-pilula);
}
html[data-visual="novo"] .construtor .barra-de-controles select.cn-periodo { height: var(--vn-au-alto); }

/* 4.2 O palco: o cinza da folha com os pontos bem leves */
html[data-visual="novo"] .construtor .cn-tela {
  background-color: var(--vn-folha);
  background-image: radial-gradient(rgba(0, 0, 0, .10) 1px, transparent 1px);
}
html[data-visual="novo"] .construtor .cn-seta { stroke: var(--vn-cinza2); opacity: 1; }
html[data-visual="novo"] .construtor .cn-seta-sim { stroke: var(--vn-verde); }
html[data-visual="novo"] .construtor .cn-seta-nao { stroke: var(--vn-vermelho); }
html[data-visual="novo"] .construtor .cn-seta-marcada { stroke: var(--vn-tinta); }
html[data-visual="novo"] .construtor .cn-seta-puxada { stroke: var(--vn-azul); }
html[data-visual="novo"] .construtor #cn-ponta path { fill: var(--vn-cinza2); }
html[data-visual="novo"] .construtor #cn-ponta-sim path { fill: var(--vn-verde); }
html[data-visual="novo"] .construtor #cn-ponta-nao path { fill: var(--vn-vermelho); }

/* o zoom: trilho branco de 32 com os botões de 26 */
html[data-visual="novo"] .construtor .cn-zoom {
  height: var(--vn-au-alto);
  box-sizing: border-box;
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: var(--vn-au-raio);
  background: var(--vn-placa);
  box-shadow: var(--vn-au-anel), var(--vn-sombra);
  color: var(--vn-tinta);
  font-size: 13px;
  font-weight: 500;
}
html[data-visual="novo"] .construtor .cn-zoom button {
  min-width: var(--vn-au-dentro);
  height: var(--vn-au-dentro);
  padding: 0 8px;
  border-radius: var(--vn-au-raio-dentro);
  color: var(--vn-cinza);
}
html[data-visual="novo"] .construtor .cn-zoom button:hover { background: var(--vn-suave); color: var(--vn-tinta); }
/* o mini-botão (fechar, subir, descer, tirar): 26 com canto 7, o mesmo da pílula */
html[data-visual="novo"] .construtor .cn-mini {
  width: var(--vn-au-dentro);
  height: var(--vn-au-dentro);
  border-radius: var(--vn-au-raio-dentro);
  color: var(--vn-cinza);
}
html[data-visual="novo"] .construtor .cn-mini:hover:not(:disabled) { background: var(--vn-suave); color: var(--vn-tinta); }

/* 4.3 As cores das etapas — uma da paleta por grupo de tipo, como o catálogo decidiu ("verde
 * manda, âmbar espera, violeta decide, azul age"): ícone em cor cheia, símbolo branco. Vale
 * na caixa do palco, no catálogo, na gaveta e na lista do celular. */
html[data-visual="novo"] .construtor .cn-cor-verde { --vn-au-tipo: var(--vn-verde); --vn-au-tipo-s: var(--vn-verde-s); }
html[data-visual="novo"] .construtor .cn-cor-ambar { --vn-au-tipo: var(--vn-amarelo); --vn-au-tipo-s: var(--vn-amarelo-s); }
html[data-visual="novo"] .construtor .cn-cor-violeta { --vn-au-tipo: var(--vn-roxo); --vn-au-tipo-s: var(--vn-roxo-s); }
html[data-visual="novo"] .construtor .cn-cor-azul { --vn-au-tipo: var(--vn-azul); --vn-au-tipo-s: var(--vn-azul-s); }
html[data-visual="novo"] .construtor .cn-icone[class*="cn-cor-"] { border-radius: 9px; background: var(--vn-au-tipo); color: #fff; }

/* 4.4 A caixa da etapa: canto 12, fio quase invisível e sombra leve; o cabeçalho na cor
 * suave do tipo, com o nome ao lado do ícone. Os estados (escolhida, alvo, com falta)
 * continuam com borda de 2 px — a mesma geometria de antes, para as setas não saírem do
 * lugar (as pontas são medidas no DOM). */
html[data-visual="novo"] .construtor .cn-caixa {
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--vn-placa);
  box-shadow: 0 0 0 1px var(--vn-fio), var(--vn-sombra);
}
html[data-visual="novo"] .construtor .cn-caixa.cn-selecionada { border: 2px solid var(--sag-green); box-shadow: 0 0 0 4px var(--vn-verde-s), var(--vn-sombra); }
html[data-visual="novo"] .construtor .cn-caixa.cn-alvo { border: 2px dashed var(--vn-azul); }
html[data-visual="novo"] .construtor .cn-caixa.cn-com-falta { border: 2px solid var(--vn-vermelho); }
html[data-visual="novo"] .construtor .cn-caixa.cn-selecionada.cn-com-falta { border-color: var(--vn-vermelho); box-shadow: 0 0 0 4px var(--vn-vermelho-s), var(--vn-sombra); }
html[data-visual="novo"] .construtor .cn-caixa:focus-visible { outline: 2px solid rgba(4, 122, 142, .55); }
html[data-visual="novo"] .construtor .cn-caixa:not(.cn-gatilho) > .cn-cabeca {
  margin-bottom: 8px;
  border-radius: 11px 11px 0 0;
  background: var(--vn-suave);
}
html[data-visual="novo"] .construtor .cn-caixa:has(> .cn-cabeca > .cn-cor-verde) > .cn-cabeca { background: var(--vn-verde-s); }
html[data-visual="novo"] .construtor .cn-caixa:has(> .cn-cabeca > .cn-cor-ambar) > .cn-cabeca { background: var(--vn-amarelo-s); }
html[data-visual="novo"] .construtor .cn-caixa:has(> .cn-cabeca > .cn-cor-violeta) > .cn-cabeca { background: var(--vn-roxo-s); }
html[data-visual="novo"] .construtor .cn-caixa:has(> .cn-cabeca > .cn-cor-azul) > .cn-cabeca { background: var(--vn-azul-s); }
html[data-visual="novo"] .construtor .cn-caixa.cn-selecionada:not(.cn-gatilho) > .cn-cabeca,
html[data-visual="novo"] .construtor .cn-caixa.cn-alvo:not(.cn-gatilho) > .cn-cabeca,
html[data-visual="novo"] .construtor .cn-caixa.cn-com-falta:not(.cn-gatilho) > .cn-cabeca { border-radius: 10px 10px 0 0; }
html[data-visual="novo"] .construtor .cn-titulos strong { color: var(--vn-tinta); font-weight: 600; }
html[data-visual="novo"] .construtor .cn-titulos small { color: var(--vn-cinza); }
html[data-visual="novo"] .construtor .cn-etiqueta { background: var(--vn-roxo-s); color: var(--vn-au-roxo-t); }
html[data-visual="novo"] .construtor .cn-bolha { border-radius: 9px; background: var(--vn-suave); color: var(--vn-tinta); }
html[data-visual="novo"] .construtor .cn-bolha-vazia { color: var(--vn-cinza2); }
html[data-visual="novo"] .construtor .cn-opcao { border-color: rgba(0, 0, 0, .08); border-radius: 9px; }
html[data-visual="novo"] .construtor .cn-solta { color: var(--vn-cinza); }
html[data-visual="novo"] .construtor .cn-sim { color: var(--vn-au-verde-t); }
html[data-visual="novo"] .construtor .cn-nao { color: var(--vn-au-vermelho-t); }
html[data-visual="novo"] .construtor .cn-ponto { border-color: var(--vn-cinza2); }
html[data-visual="novo"] .construtor .cn-tom-sim { border-color: var(--vn-verde); }
html[data-visual="novo"] .construtor .cn-tom-nao { border-color: var(--vn-vermelho); }
html[data-visual="novo"] .construtor .cn-mais { border-color: var(--vn-cinza2); color: var(--vn-cinza); }
html[data-visual="novo"] .construtor .cn-mais:hover { border-color: var(--sag-green); color: var(--sag-green-dark); background: var(--vn-verde-s); }
html[data-visual="novo"] .construtor .cn-entrada { background: var(--vn-cinza2); }
html[data-visual="novo"] .construtor .cn-falta-na-caixa { border-color: var(--vn-fio); color: var(--vn-au-vermelho-t); }
html[data-visual="novo"] .construtor .cn-numeros { border-color: var(--vn-fio); background: var(--vn-suave); }
html[data-visual="novo"] .construtor .cn-numeros b { font-weight: 600; color: var(--vn-tinta); }
html[data-visual="novo"] .construtor .cn-numeros span { color: var(--vn-cinza); }

/* 4.5 A caixa "Quando começa": o cartão de cor da casa (verde cheio, letra branca) */
html[data-visual="novo"] .construtor .cn-gatilho {
  border-color: transparent;
  background: var(--sag-green);
  box-shadow: 0 6px 18px rgba(4, 122, 142, .25);
}
html[data-visual="novo"] .construtor .cn-gatilho .cn-icone { border-radius: 9px; background: rgba(255, 255, 255, .22); }
html[data-visual="novo"] .construtor .cn-entrada-do-gatilho { border-radius: 9px; color: var(--vn-tinta); }
html[data-visual="novo"] .construtor .cn-gatilho .cn-etiqueta { background: var(--vn-verde-s); color: var(--vn-au-verde-t); }
html[data-visual="novo"] .construtor .cn-nova-entrada { border-radius: 9px; }

/* 4.6 Os recados por cima do palco e a lista do que falta */
html[data-visual="novo"] .construtor .cn-recado {
  border: 0;
  border-radius: 9px;
  background: var(--vn-placa);
  box-shadow: var(--vn-au-anel);
  color: var(--vn-cinza);
}
html[data-visual="novo"] .construtor .cn-faltas {
  border: 0;
  border-radius: 12px;
  background: var(--vn-placa);
  box-shadow: inset 3px 0 0 var(--vn-vermelho), 0 0 0 1px var(--vn-fio), 0 10px 28px rgba(0, 0, 0, .08);
}
html[data-visual="novo"] .construtor .cn-faltas header b { color: var(--vn-au-vermelho-t); font-weight: 600; }
html[data-visual="novo"] .construtor .cn-link { color: var(--vn-tinta); }
html[data-visual="novo"] .construtor .cn-link:hover { color: var(--sag-green-dark); }

/* 4.7 O lado direito: o catálogo */
html[data-visual="novo"] .construtor .cn-lado { background: var(--vn-placa); border-left: 1px solid var(--vn-fio); }
html[data-visual="novo"] .construtor .cn-catalogo h2 { color: var(--vn-tinta); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
html[data-visual="novo"] .construtor .cn-catalogo small { color: var(--vn-cinza); }
html[data-visual="novo"] .construtor .cn-grupo {
  color: var(--vn-cinza2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] .construtor .cn-item { border-radius: 9px; }
html[data-visual="novo"] .construtor .cn-item:hover { background: var(--vn-suave); }
html[data-visual="novo"] .construtor .cn-item strong { font-weight: 500; }
html[data-visual="novo"] .construtor .cn-busca {
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--vn-suave);
  color: var(--vn-cinza2);
}
html[data-visual="novo"] .construtor .cn-busca:focus-within { background: var(--vn-placa); border-color: var(--sag-green); box-shadow: var(--vn-au-foco); }
html[data-visual="novo"] .construtor .cn-ligando { border-radius: 9px; background: var(--vn-verde-s); color: var(--vn-au-verde-t); }

/* 4.8 A gaveta da etapa: cabeçalho limpo (ícone de cor, título 15/600, × discreto), campos no
 * padrão das peças (fundo suave, canto 10, anel verde no foco) e o pé com UMA ação principal. */
html[data-visual="novo"] .construtor .cn-gaveta { border-left: 0; box-shadow: -12px 0 36px rgba(28, 36, 64, .08); }
html[data-visual="novo"] .construtor .cn-gaveta-topo { gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--vn-fio); }
html[data-visual="novo"] .construtor .cn-gaveta-topo .cn-icone { width: 34px; height: 34px; border-radius: 9px; }
html[data-visual="novo"] .construtor .cn-gaveta-topo .cn-titulos strong { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
html[data-visual="novo"] .construtor .cn-gaveta-topo .cn-titulos small { color: var(--vn-cinza2); font-size: 12px; }
html[data-visual="novo"] .construtor .cn-fechar-gaveta { width: 30px; height: 30px; border-radius: 50%; background: var(--vn-suave); }
html[data-visual="novo"] .construtor .cn-gaveta-corpo { gap: 12px; padding: 16px 20px; }
html[data-visual="novo"] .construtor .cn-campo { gap: 8px; }
html[data-visual="novo"] .construtor .cn-rotulo { color: var(--vn-cinza); font-size: 13px; font-weight: 500; }
html[data-visual="novo"] .construtor .cn-dica { color: var(--vn-cinza2); font-size: 12px; }
html[data-visual="novo"] .construtor .cn-dica-ruim { color: var(--vn-au-vermelho-t); }
html[data-visual="novo"] .construtor .cn-dica-travada { padding: 10px 12px; border-radius: 9px; background: var(--vn-amarelo-s); color: var(--vn-au-amarelo-t); }
html[data-visual="novo"] .construtor .cn-gaveta :is(input[type="text"], input[type="number"], textarea, select) {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background-color: var(--vn-suave);
  color: var(--vn-tinta);
  font-size: 13px;
  transition: background-color .13s ease, border-color .13s ease, box-shadow .13s ease;
}
html[data-visual="novo"] .construtor .cn-gaveta :is(input, textarea, select):hover:not(:focus):not(:disabled) { border-color: rgba(0, 0, 0, .10); }
html[data-visual="novo"] .construtor .cn-gaveta :is(input, textarea, select):focus {
  outline: none;
  border-color: var(--sag-green);
  background-color: var(--vn-placa);
  box-shadow: var(--vn-au-foco);
}
html[data-visual="novo"] .construtor .cn-gaveta textarea { min-height: 60px; }
/* a mensagem dentro do cartão: o cartão é o suave, a caixa de texto fica branca */
html[data-visual="novo"] .construtor .cn-cartao { padding: 12px; border: 0; border-radius: 12px; background: var(--vn-suave); }
html[data-visual="novo"] .construtor .cn-cartao header { color: var(--vn-tinta); font-size: 13px; font-weight: 600; }
html[data-visual="novo"] .construtor .cn-cartao :is(textarea, input[type="text"]) { background-color: var(--vn-placa); box-shadow: 0 0 0 1px var(--vn-fio); }
html[data-visual="novo"] .construtor .cn-cartao .cn-mini:hover:not(:disabled) { background: var(--vn-placa); }
html[data-visual="novo"] .construtor .cn-acrescentar {
  min-height: var(--vn-au-alto);
  border: 1px dashed rgba(0, 0, 0, .14);
  border-radius: var(--vn-au-raio);
  color: var(--sag-green-dark);
  font-size: 13px;
  font-weight: 500;
}
html[data-visual="novo"] .construtor .cn-acrescentar:hover:not(:disabled) { border-color: var(--sag-green); background: var(--vn-verde-s); }
/* Pôr tag / Tirar tag: o mesmo segmentado das abas */
html[data-visual="novo"] .construtor .cn-duas-opcoes {
  gap: 2px;
  padding: 3px;
  border-radius: var(--vn-au-raio);
  background: var(--vn-suave);
  box-shadow: inset 0 0 0 1px var(--vn-fio);
}
html[data-visual="novo"] .construtor .cn-duas-opcoes button {
  height: var(--vn-au-dentro);
  padding: 0 10px;
  border: 0;
  border-radius: var(--vn-au-raio-dentro);
  background: transparent;
  color: var(--vn-cinza);
  font-size: 13px;
}
html[data-visual="novo"] .construtor .cn-duas-opcoes .cn-ligado { background: var(--vn-placa); color: var(--vn-tinta); font-weight: 500; box-shadow: var(--vn-au-pilula); }
html[data-visual="novo"] .construtor .cn-arquivo { border: 0; border-radius: 9px; background: var(--vn-placa); box-shadow: 0 0 0 1px var(--vn-fio); }
html[data-visual="novo"] .construtor .cn-arquivo.cn-ligado { background: var(--vn-verde-s); color: var(--vn-au-verde-t); box-shadow: 0 0 0 1px rgba(4, 122, 142, .45); }
/* O pé: em cima as duas ações de caminho (brancas), embaixo "Excluir" só como texto vermelho
 * à esquerda e "Fechar" (o único verde) à direita. O "Fechar" só nasce com a chave do visual
 * novo (construtor-de-automacoes-etapa.js); sem ele, as três de antes seguem iguais. */
html[data-visual="novo"] .construtor .cn-gaveta-pe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--vn-fio);
}
html[data-visual="novo"] .construtor .cn-gaveta-pe .btn { justify-content: center; height: var(--vn-au-alto); font-size: 13px; }
html[data-visual="novo"] .construtor .cn-gaveta-pe .btn.cn-excluir {
  justify-self: start;
  justify-content: flex-start;
  padding: 0 10px;
  background: transparent;
  box-shadow: none;
  color: var(--vn-au-vermelho-t);
}
html[data-visual="novo"] .construtor .cn-gaveta-pe .btn.cn-excluir:hover:not(:disabled) { background: var(--vn-vermelho-s); box-shadow: none; }
html[data-visual="novo"] .construtor .cn-gaveta-pe .btn.cn-fechar-do-pe { justify-self: end; min-width: 96px; }

/* 4.9 A janela "Versões" (abrirAjuda com a lista) */
html[data-visual="novo"] .cn-versao { padding: 12px 0; border-bottom: 1px solid var(--vn-fio); font-size: 13px; }
html[data-visual="novo"] .cn-versao:last-child { border-bottom: 0; }
html[data-visual="novo"] .cn-versao b { color: var(--vn-tinta); font-weight: 600; }
html[data-visual="novo"] .cn-versao small { margin-top: 2px; color: var(--vn-cinza); font-size: 12px; }

/* 4.10 O construtor no celular (lista só de leitura) */
html[data-visual="novo"] .construtor .cn-barra-do-celular { background: var(--vn-placa); border-bottom: 1px solid var(--vn-fio); }
html[data-visual="novo"] .construtor .cn-item-da-lista {
  border: 0;
  border-radius: 12px;
  background: var(--vn-placa);
  box-shadow: 0 0 0 1px var(--vn-fio), var(--vn-sombra);
}
html[data-visual="novo"] .construtor .cn-recado-celular { box-shadow: none; background: var(--vn-azul-s); color: var(--vn-au-azul-t); }

/* A FRASE DO CAMINHO, na linha das abas, logo depois de "Pediram para sair" e centrada com elas
 * (Henrique, 06/11). Em tela estreita a barra quebra, e ela desce para baixo das abas. */
html[data-visual="novo"] .grp-barra-das-abas { flex-wrap: wrap; }
html[data-visual="novo"] .grp-barra-das-abas:has(> .frase-das-abas) { justify-content: flex-start; gap: 16px; }
html[data-visual="novo"] .frase-das-abas {
  margin: 0;
  color: var(--vn-cinza);
  font-size: 13px;
  line-height: 1.3;
}
html[data-visual="novo"] .frase-das-abas a { color: var(--vn-verde-t); font-weight: 600; text-decoration: none; }
html[data-visual="novo"] .frase-das-abas a:hover { text-decoration: underline; }