/* O VISUAL NOVO — Grupos (6 abas, a .grp-modal e a gaveta antiga do item 182) — agente 4.
 * Segunda folha da área: a primeira (visual-novo-automacao.css) passou de 800 linhas e se
 * dividiu por assunto. Os tokens --vn-au-* moram lá (§0); as abas da tela (.grp-aba), que
 * Grupos e Automação dividem, também (§1).
 * Tudo atrás de html[data-visual="novo"]. Mapa: docs/design/inventario/4-automacao-e-grupos.md §3. */

/* =================================================================== 5. Grupos */

/* A régua paralela dos Grupos (`var(--sag-*, #hex)` e #fff fixo, inventário §6.1) fica atrás:
 * aqui a tela fala só em --vn-*. */
html[data-visual="novo"] .grp-tela { color: var(--vn-tinta); }

/* 5.1 As caixas: painel branco, canto 16, sem fio */
html[data-visual="novo"] .grp-caixa {
  gap: 12px;
  padding: 18px 20px;
  border: 0;
  border-radius: var(--vn-raio-painel);
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .grp-secao-cabeca h3 { color: var(--vn-tinta); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
html[data-visual="novo"] .grp-secao-cabeca p { color: var(--vn-cinza); font-size: 13px; }
html[data-visual="novo"] .grp-secao-acoes { gap: 8px; }
html[data-visual="novo"] .grp-nota { color: var(--vn-cinza); font-size: 13px; }
html[data-visual="novo"] .grp-recado-padrao { border-radius: 9px; background: var(--vn-amarelo-s); color: var(--vn-au-amarelo-t); font-size: 13px; }

/* 5.2 O Painel: os quatro números principais em cartão de cor cheia (o padrão da Visão geral:
 * número em cima, legenda em caixa alta miúda, ícone num círculo translúcido); o quinto,
 * "Entradas hoje", em cartão branco com o número colorido. A Ocupação média continua
 * dizendo algo com a cor: âmbar a partir de 90%, cinza sem dado (telas-dos-grupos-abas.js). */
html[data-visual="novo"] .grp-tela .cs-cartoes.grp-cartoes { gap: 12px; }
html[data-visual="novo"] .grp-cartoes .cs-cartao:nth-child(1) { --vn-au-cartao: var(--vn-azul); --vn-cartao: var(--vn-azul); }
html[data-visual="novo"] .grp-cartoes .cs-cartao:nth-child(2) { --vn-au-cartao: var(--vn-rosa); --vn-cartao: var(--vn-rosa); }
html[data-visual="novo"] .grp-cartoes .cs-cartao:nth-child(3) { --vn-au-cartao: var(--vn-laranja); --vn-cartao: var(--vn-laranja); }
html[data-visual="novo"] .grp-cartoes .cs-cartao:nth-child(4) { --vn-au-cartao: var(--vn-verde); --vn-cartao: var(--vn-verde); }
html[data-visual="novo"] .grp-cartoes .cs-cartao:nth-child(4).cs-cor-ambar { --vn-au-cartao: var(--vn-amarelo); --vn-cartao: var(--vn-amarelo); }
html[data-visual="novo"] .grp-cartoes .cs-cartao:nth-child(4).cs-cor-cinza { --vn-au-cartao: var(--vn-cinza2); --vn-cartao: var(--vn-cinza2); }
html[data-visual="novo"] .grp-cartoes .cs-cartao {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 112px;
  padding: 18px 84px 18px 20px;
  border: 0;
  border-radius: var(--vn-raio-cartao);
  background: var(--vn-au-cartao);
  box-shadow: none;
  color: #fff;
}
html[data-visual="novo"] .grp-cartoes .cs-cartao::before { display: none; }
html[data-visual="novo"] .grp-cartoes .cs-cartao strong {
  order: 1;
  margin: 0;
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
}
html[data-visual="novo"] .grp-cartoes .cs-cartao-cabeca {
  order: 2;
  margin-top: 6px;
  color: rgba(255, 255, 255, .95);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html[data-visual="novo"] .grp-cartoes .cs-cartao small {
  order: 3;
  margin-top: 6px;
  color: rgba(255, 255, 255, .85);
  font-size: 12px;
  font-weight: 500;
}
html[data-visual="novo"] .grp-cartoes .cs-selo {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
html[data-visual="novo"] .grp-cartoes .cs-selo svg { width: 24px; height: 24px; }
/* o amarelo é claro demais para letra branca: ali a letra é a tinta */
html[data-visual="novo"] .grp-cartoes .cs-cartao:nth-child(4).cs-cor-ambar :is(strong, .cs-cartao-cabeca, small, .cs-selo) { color: var(--vn-tinta); }
html[data-visual="novo"] .grp-cartoes .cs-cartao:nth-child(4).cs-cor-ambar .cs-selo { background: rgba(255, 255, 255, .35); }
/* o quinto: branco com número colorido */
html[data-visual="novo"] .grp-cartoes .cs-cartao:nth-child(n+5) { background: var(--vn-placa); box-shadow: var(--vn-sombra); color: var(--vn-tinta); }
html[data-visual="novo"] .grp-cartoes .cs-cartao:nth-child(n+5) strong { color: var(--vn-roxo); }
html[data-visual="novo"] .grp-cartoes .cs-cartao:nth-child(n+5) .cs-cartao-cabeca { color: var(--vn-cinza); }
html[data-visual="novo"] .grp-cartoes .cs-cartao:nth-child(n+5) small { color: var(--vn-cinza2); }
html[data-visual="novo"] .grp-cartoes .cs-cartao:nth-child(n+5) .cs-selo { width: 46px; height: 46px; background: var(--vn-suave); color: var(--vn-roxo); }
@media (max-width: 720px) {
  html[data-visual="novo"] .grp-cartoes .cs-cartao { min-height: 92px; padding: 14px 72px 14px 16px; }
  html[data-visual="novo"] .grp-cartoes .cs-cartao strong { font-size: 28px; }
  html[data-visual="novo"] .grp-cartoes .cs-selo { right: 12px; width: 44px; height: 44px; }
}

/* 5.3 Os cartões de lançamento, a barra de ocupação, a linha do tempo e a ocupação por grupo */
html[data-visual="novo"] .grp-lancamento {
  border: 0;
  border-radius: var(--vn-raio-cartao);
  background: var(--vn-placa);
  box-shadow: 0 0 0 1px var(--vn-fio);
}
html[data-visual="novo"] .grp-lancamento:hover { border-color: transparent; box-shadow: 0 0 0 1px var(--vn-fio), 0 8px 22px rgba(0, 0, 0, .06); }
html[data-visual="novo"] .grp-lancamento.grp-escolhido { background: var(--vn-placa); box-shadow: 0 0 0 2px var(--sag-green); }
html[data-visual="novo"] .grp-lancamento > span { color: var(--vn-cinza); font-size: 13px; }
html[data-visual="novo"] .grp-lancamento > small { color: var(--vn-cinza2); }
html[data-visual="novo"] .grp-lancamento > em { color: var(--sag-green-dark); font-weight: 600; }
/* a barra fina colorida: verde; âmbar quando quase cheio; laranja cheio */
html[data-visual="novo"] .grp-barra { height: 6px; background: var(--vn-suave); }
html[data-visual="novo"] .grp-barra i { background: var(--vn-verde); }
html[data-visual="novo"] .grp-barra.quase i { background: var(--vn-amarelo); }
html[data-visual="novo"] .grp-barra.cheia i { background: var(--vn-laranja); }
html[data-visual="novo"] :is(.grp-lancamento-barra, .grp-celula-barra) b { font-weight: 600; color: var(--vn-tinta); }
html[data-visual="novo"] .grp-linha-do-tempo li { border-left: 3px solid var(--vn-verde); border-radius: 9px; background: var(--vn-folha); }
html[data-visual="novo"] .grp-linha-do-tempo time { color: var(--sag-green-dark); font-weight: 600; }
html[data-visual="novo"] .grp-linha-do-tempo span { color: var(--vn-cinza); }
html[data-visual="novo"] .grp-ocupacao-linha { border: 0; border-radius: 9px; background: var(--vn-folha); font-size: 13px; }
html[data-visual="novo"] .grp-ocupacao-linha span:last-child { color: var(--vn-cinza); }

/* 5.4 O selo dos Grupos (.grp-chip) com a cara do selo comum */
html[data-visual="novo"] .grp-chip { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
html[data-visual="novo"] .grp-chip.ok { background: var(--vn-verde-s); color: var(--vn-au-verde-t); }
html[data-visual="novo"] .grp-chip.aviso { background: var(--vn-amarelo-s); color: var(--vn-au-amarelo-t); }
html[data-visual="novo"] .grp-chip.ruim { background: var(--vn-vermelho-s); color: var(--vn-au-vermelho-t); }
html[data-visual="novo"] .grp-chip.neutro { background: var(--vn-suave); color: var(--vn-cinza); }

/* 5.5 A tabela (Lançamentos, Grupos, Cronograma, Membros, Origem): cabeçalho 11.5/600 cinza
 * sem caixa alta, fio entre as linhas, sem zebra; no celular ela continua rolando de lado. */
html[data-visual="novo"] .grp-table th {
  padding: 4px 12px 9px;
  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"] .grp-table td { padding: 12px; border-top: 1px solid var(--vn-fio); color: var(--vn-tinta); font-size: 13px; }
html[data-visual="novo"] .grp-table tbody tr:first-child td { border-top: 0; }
html[data-visual="novo"] .grp-table tbody tr:hover td { background: var(--vn-suave); }
html[data-visual="novo"] .grp-table tr.grp-selecionada td { background: var(--vn-verde-s); }
html[data-visual="novo"] .grp-table td small { color: var(--vn-cinza2); font-size: 12px; }
html[data-visual="novo"] .grp-table td strong { font-weight: 600; }
html[data-visual="novo"] .grp-acoes > * { margin-left: 6px; }
html[data-visual="novo"] .grp-convite { color: var(--vn-cinza); }

/* 5.6 O botão pequeno dos Grupos: a altura do botão pequeno da régua (--alto-p, 32), branco
 * com fio; o "perigo" de linha é só a letra vermelha, como o "Excluir" do construtor. */
html[data-visual="novo"] .grp-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--vn-au-alto);
  box-sizing: border-box;
  padding: 0 12px;
  border: 0;
  border-radius: var(--vn-au-raio);
  background: var(--vn-placa);
  box-shadow: var(--vn-au-anel);
  color: var(--vn-tinta);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: middle;
  transition: background .13s ease, box-shadow .13s ease;
}
html[data-visual="novo"] .grp-mini:hover { background: var(--vn-suave); box-shadow: 0 0 0 1px rgba(0, 0, 0, .09); }
html[data-visual="novo"] .grp-mini:focus-visible { outline: 2px solid rgba(4, 122, 142, .55); outline-offset: 2px; }
html[data-visual="novo"] .grp-mini.perigo { color: var(--vn-au-vermelho-t); }
html[data-visual="novo"] .grp-mini.perigo:hover { background: var(--vn-vermelho-s); }

/* 5.7 Vazio, resumo por grupo, gráfico, link da porta, regras, administradores, foto */
html[data-visual="novo"] .grp-vazio {
  gap: 4px;
  padding: 36px 18px;
  border: 1px dashed rgba(0, 0, 0, .12);
  border-radius: var(--vn-raio-cartao);
  background: var(--vn-folha);
  color: var(--vn-cinza);
  font-size: 13px;
}
html[data-visual="novo"] .grp-vazio strong { color: var(--vn-tinta); font-size: 14px; font-weight: 600; }
html[data-visual="novo"] .grp-vazio .btn { margin-top: 10px; }
html[data-visual="novo"] .grp-resumo-do-grupo {
  border: 0;
  border-radius: var(--vn-raio-cartao);
  background: var(--vn-folha);
  box-shadow: inset 0 0 0 1px var(--vn-fio);
  color: var(--vn-cinza);
  font-size: 13px;
}
html[data-visual="novo"] .grp-resumo-do-grupo strong { color: var(--vn-tinta); font-weight: 600; }
html[data-visual="novo"] .grp-chart { border-bottom: 1px solid var(--vn-fio); }
html[data-visual="novo"] .grp-chart-barra { background: var(--vn-verde-s); }
html[data-visual="novo"] .grp-chart-barra i { background: var(--vn-verde); }
html[data-visual="novo"] .grp-chart-dia small { color: var(--vn-cinza2); }
html[data-visual="novo"] .grp-legenda { color: var(--vn-cinza); }
html[data-visual="novo"] .grp-legenda-visita { background: var(--vn-verde-s); }
html[data-visual="novo"] .grp-legenda-entrada { background: var(--vn-verde); }
html[data-visual="novo"] .grp-link-da-porta { border: 0; border-radius: var(--vn-raio-cartao); background: var(--vn-folha); box-shadow: inset 0 0 0 1px var(--vn-fio); }
html[data-visual="novo"] .grp-link-da-porta code { color: var(--vn-tinta); }
html[data-visual="novo"] .grp-regras li { border: 0; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--vn-fio); }
html[data-visual="novo"] .grp-regras small { color: var(--vn-cinza); }
html[data-visual="novo"] .grp-admins li { border: 0; border-radius: 9px; background: var(--vn-folha); box-shadow: inset 0 0 0 1px var(--vn-fio); font-size: 13px; }
html[data-visual="novo"] .grp-foto { background: var(--vn-verde-s); color: var(--vn-au-verde-t); font-weight: 600; }
html[data-visual="novo"] .grp-foto-g { border-color: var(--vn-fio); }
html[data-visual="novo"] .grp-erro-do-admin { color: var(--vn-au-vermelho-t); }

/* 5.8 A limpeza dos grupos (aba Membros): os dois cartões sem a faixa de cima, número colorido */
html[data-visual="novo"] .mbr-cartao {
  --vn-au-mbr: var(--vn-verde);
  --vn-au-mbr-s: var(--vn-verde-s);
  padding: 18px 18px 16px;
  border: 0;
  border-radius: var(--vn-raio-painel);
  background: var(--vn-placa);
  box-shadow: 0 0 0 1px var(--vn-fio);
}
html[data-visual="novo"] .mbr-cartao.cs-cor-ambar { --vn-au-mbr: var(--vn-laranja); --vn-au-mbr-s: var(--vn-laranja-s); }
html[data-visual="novo"] .mbr-cartao::before { display: none; }
html[data-visual="novo"] .mbr-topo h4 { color: var(--vn-tinta); font-size: 14px; font-weight: 600; }
html[data-visual="novo"] .mbr-topo .cs-selo { flex-basis: 30px; width: 30px; height: 30px; border-radius: 9px; background: var(--vn-au-mbr-s); color: var(--vn-au-mbr); }
html[data-visual="novo"] .mbr-topo .cs-selo svg { width: 16px; height: 16px; }
html[data-visual="novo"] .mbr-numero { color: var(--vn-au-mbr); font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
html[data-visual="novo"] .mbr-cartao > small { color: var(--vn-cinza); }
html[data-visual="novo"] .mbr-quem summary { color: var(--vn-azul); font-weight: 500; }
html[data-visual="novo"] .mbr-quem li span { color: var(--vn-cinza); }
html[data-visual="novo"] .mbr-sozinho input { accent-color: var(--sag-green); }
html[data-visual="novo"] .mbr-sozinho small { color: var(--vn-cinza); }

/* =================================================================== 6. A janela dos Grupos (.grp-modal) */

/* Montada à mão (telas-dos-grupos-janelas.js), com a mesma cara da gaveta comum das peças:
 * branca, canto 16 do lado de dentro, sombra larga e leve, × redondo e discreto, campos com
 * fundo suave e anel verde no foco, pé com Cancelar branco e o principal verde. */
html[data-visual="novo"] .grp-fundo { background: var(--vn-au-cortina); }
html[data-visual="novo"] .grp-modal {
  background: var(--vn-placa);
  border-radius: 16px 0 0 16px;
  box-shadow: var(--vn-au-gaveta-sombra);
}
html[data-visual="novo"] .grp-modal-topo {
  gap: 12px;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--vn-fio);
}
html[data-visual="novo"] .grp-modal-topo h3 { color: var(--vn-tinta); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
html[data-visual="novo"] .grp-modal-topo p { color: var(--vn-cinza); font-size: 13px; }
html[data-visual="novo"] .grp-fechar {
  display: grid;
  place-items: center;
  width: var(--alto-pastilha);
  height: var(--alto-pastilha);
  padding: 0;
  border-radius: 50%;
  background: var(--vn-suave);
  color: var(--vn-cinza);
  font-size: 16px;
  line-height: 1;
  transition: background .13s ease, color .13s ease;
}
html[data-visual="novo"] .grp-fechar:hover { background: #e8eaef; color: var(--vn-tinta); }
html[data-visual="novo"] .grp-modal-corpo { gap: 12px; padding: 20px 24px 0; }
html[data-visual="novo"] .grp-modal-pe {
  gap: 8px;
  margin-top: 4px;
  padding: 14px 0 18px;
  border-top: 1px solid var(--vn-fio);
  background: var(--vn-placa);
}
/* o subtítulo de seção ("Datas", "Os grupos"…): sem caixa alta espaçada */
html[data-visual="novo"] .grp-sub {
  margin: 10px 0 0;
  color: var(--vn-tinta);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] .grp-grade { gap: 12px; }
html[data-visual="novo"] .grp-campo { gap: 8px; font-size: 13px; }
html[data-visual="novo"] .grp-campo > span { color: var(--vn-cinza); font-weight: 500; }
html[data-visual="novo"] .grp-campo small { color: var(--vn-cinza2); font-size: 12px; }
html[data-visual="novo"] :is(.grp-modal, .grp-admin-novo) :is(input:not([type]), input[type="text"], input[type="tel"], input[type="number"],
    input[type="datetime-local"], input[type="search"], textarea, select) {
  border: 1px solid transparent;
  border-radius: 9px;
  background-color: var(--vn-suave);
  box-shadow: none;
  color: var(--vn-tinta);
  font-size: 14px;
  transition: background-color .13s ease, border-color .13s ease, box-shadow .13s ease;
}
html[data-visual="novo"] .grp-modal :is(input, textarea, select):hover:not(:focus):not(:disabled) { border-color: rgba(0, 0, 0, .10); }
html[data-visual="novo"] :is(.grp-modal, .grp-admin-novo) :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"] .grp-modal input[type="file"] { padding: 8px 10px; }
html[data-visual="novo"] .grp-regra {
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: var(--vn-placa);
  box-shadow: inset 0 0 0 1px var(--vn-fio);
  color: var(--vn-cinza);
  font-size: 13px;
}
html[data-visual="novo"] .grp-regra strong { color: var(--vn-tinta); font-weight: 500; }
html[data-visual="novo"] .grp-regra input { accent-color: var(--sag-green); }
html[data-visual="novo"] .grp-erro { border-radius: 9px; background: var(--vn-vermelho-s); color: var(--vn-au-vermelho-t); font-size: 13px; font-weight: 500; }
html[data-visual="novo"] .grp-foto-texto strong { color: var(--vn-tinta); }
@media (max-width: 720px) {
  html[data-visual="novo"] .grp-modal { border-radius: 0; }
  html[data-visual="novo"] .grp-modal-topo { padding: 16px; }
  html[data-visual="novo"] .grp-modal-corpo { padding: 16px 16px 0; }
}

/* =================================================================== 7. A gaveta antiga do item 182 */

/* `formularios-dos-grupos.js` (porta e fila). O estilo inline saiu de lá: os selos usam as
 * classes comuns (`selo ruim` / `selo aviso`, os mesmos tons de antes) e a cor da barra vem
 * da régua. Aqui, só a cara nova dos pedaços que ela desenha. */
html[data-visual="novo"] .grupo-da-porta {
  border: 0;
  border-radius: var(--vn-raio-cartao);
  background: var(--vn-placa);
  box-shadow: 0 0 0 1px var(--vn-fio);
}
html[data-visual="novo"] .grupo-da-porta strong { font-weight: 600; }
html[data-visual="novo"] .grupo-da-porta > span { color: var(--vn-cinza); }
html[data-visual="novo"] .barra-da-porta { background: var(--vn-suave); }
html[data-visual="novo"] .sub-da-fila,
html[data-visual="novo"] .nota-da-fila { color: var(--vn-cinza); }
html[data-visual="novo"] .tabela-da-fila { border: 0; border-radius: var(--vn-raio-cartao); box-shadow: 0 0 0 1px var(--vn-fio); }
html[data-visual="novo"] .cab-da-fila {
  background: var(--vn-folha);
  color: var(--vn-cinza);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] .linha-da-fila { border-top: 1px solid var(--vn-fio); font-size: 13px; }