/* Crescimento › Grupos no desenho da SAG v2 (item 6.1).
 *
 * Folha própria, como a dos Contatos: o desenho desta tela não entra na folha de todas.
 * As medidas vêm de `docs/referencias/sag-v2/estilos/groups-v2.css.txt` (tabela, mini-botão,
 * gráfico, vazio, selecionado, janela, regras). Toda cor tem a palavra ao lado: o selo
 * escreve a situação e a barra de ocupação vem sempre com o número. */

.grp-tela {
  color: var(--sag-ink, #17201e);
  display: grid;
  gap: 14px;
}
[data-grp-miolo] { display: grid; gap: 14px; }
/* ITEM DE GRADE NÃO ENCOLHE abaixo do próprio conteúdo sem `min-width: 0`: no celular, a
 * tabela larga dos membros esticava a tela inteira para 860 px e a página rolava para o lado
 * (acabamento, 23/10/2026). Assim a rolagem fica só dentro da `.grp-rolagem`. */
.grp-tela > *,
[data-grp-miolo] > *,
.grp-conteudo > *,
.grp-caixa > * { min-width: 0; }

/* O "+" do botão principal da barra, sem mudar o texto da receita. */
body:has(.grp-tela) .gg-abas-acoes .btn.principal::before { content: "+ "; }

/* As automações do canal (item 196) aparecem só no Painel. */
.grp-tela:not([data-aba="painel"]) .grp-automacoes { display: none; }

/* ------------------------------------------------------------------------- o topo */

/* SEM A FAIXA (22/10/2026): as abas e a escolha do lançamento numa barra só, no mesmo cartão
 * branco das outras telas. */
.grp-barra-das-abas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px 4px 4px;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 12px;
  background: #fff;
}
.grp-barra-das-abas .grp-abas { border: 0; padding: 0; min-width: 0; }
.grp-escolha { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.grp-escolha select { min-width: 220px; }

/* OS CINCO CARTÕES DO PAINEL na opção A (o `cs-cartao` do Console, como na Visão geral). */
.grp-tela .cs-cartoes.grp-cartoes { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }

/* -------------------------------------------------------------------------- as abas */

.grp-abas {
  display: flex;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 12px;
  background: #fff;
}
.grp-aba {
  flex: 0 0 auto;
  padding: 8px 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--sag-muted, #66736f);
  font: inherit;
  font-size: var(--texto-pp);
  font-weight: 700;
  cursor: pointer;
}
.grp-aba:hover { background: #f4f7f6; }
.grp-aba.ativa {
  background: var(--sag-green-soft, #eaf6f2);
  color: var(--sag-green, #15866d);
}
.grp-conteudo { display: grid; gap: 14px; }

/* ------------------------------------------------------------------- os números */

.grp-numeros {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.grp-numero {
  min-height: 105px;
  padding: 15px 16px;
  display: grid;
  align-content: space-between;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(21, 46, 39, .025);
}
.grp-numero span {
  color: var(--sag-muted, #66736f);
  font-size: var(--texto-pp);
  font-weight: 700;
}
.grp-numero strong {
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -.5px;
}
.grp-numero small {
  color: var(--sag-soft, #91a09b);
  font-size: var(--texto-pp);
}

/* ----------------------------------------------------------------- as caixas */

/* AS CAIXAS NA MESMA GRADE DOS CINCO CARTÕES (Henrique, 22/10/2026: "desalinhado"): a
 * divisão 1,4/1 caía no meio do 4º cartão. Agora a da esquerda ocupa 3 colunas e a da direita
 * 2, com o mesmo vão de 14px — as bordas batem com as dos cartões de cima. */
.grp-duas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.grp-duas:not(.grp-larga-esquerda) > :first-child { grid-column: span 3; }
.grp-duas:not(.grp-larga-esquerda) > :last-child { grid-column: span 2; }
.grp-larga-esquerda { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.grp-caixa {
  padding: 16px 18px;
  display: grid;
  gap: 12px;
  align-content: start;
  background: #fff;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 14px;
}
.grp-secao-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.grp-secao-cabeca h3 {
  margin: 0;
  font-size: var(--texto-p);
  font-weight: 750;
}
.grp-secao-cabeca p {
  margin: 3px 0 0;
  color: var(--sag-muted, #66736f);
  font-size: var(--texto-pp);
}
.grp-secao-acoes { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.grp-nota {
  margin: 0;
  color: var(--sag-muted, #66736f);
  font-size: var(--texto-pp);
  line-height: 1.5;
}

/* --------------------------------------------------------------- os lançamentos */

.grp-lancamentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 11px;
}
.grp-lancamento {
  padding: 15px;
  display: grid;
  gap: 7px;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 14px;
  background: #fff;
  transition: .16s;
}
.grp-lancamento:hover { border-color: #8bbfaf; box-shadow: 0 8px 22px rgba(21, 80, 65, .07); }
.grp-lancamento[data-grp-abrir-grupos] { cursor: pointer; }
.grp-lancamento.grp-escolhido { border-color: #8bbfaf; background: #f4fbf8; }
.grp-lancamento-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.grp-lancamento-topo strong { font-size: var(--texto-p); }
.grp-lancamento > span { color: var(--sag-muted, #66736f); font-size: var(--texto-pp); }
.grp-lancamento > small { color: var(--sag-soft, #91a09b); font-size: var(--texto-pp); }
.grp-lancamento > em {
  color: var(--sag-green, #15866d);
  font-size: var(--texto-pp);
  font-style: normal;
  font-weight: 800;
}
.grp-lancamento > .grp-mini { justify-self: start; }
.grp-lancamento-barra,
.grp-celula-barra {
  display: flex;
  align-items: center;
  gap: 8px;
}
.grp-lancamento-barra b,
.grp-celula-barra b { font-size: var(--texto-pp); min-width: 32px; }

/* ------------------------------------------------------------- barra e selo */

.grp-barra {
  flex: 1;
  min-width: 70px;
  height: 7px;
  display: block;
  overflow: hidden;
  border-radius: 99px;
  background: #edf1ef;
}
.grp-barra i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #38b18d, #15866d);
}
.grp-barra.quase i { background: var(--sag-amber, #e29c32); }
/* CHEIO É ÂMBAR, como o selo "Cheio" ao lado (Henrique, 23/10/2026): vermelho na barra e
 * âmbar no selo davam duas cores para a mesma coisa. Grupo cheio pede o próximo, não socorro. */
.grp-barra.cheia i { background: var(--sag-amber, #e29c32); }

.grp-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: var(--texto-pp);
  font-weight: 750;
  white-space: nowrap;
}
.grp-chip.ok { background: var(--sag-green-soft, #eaf6f2); color: #12705c; }
.grp-chip.aviso { background: #fff5e5; color: #8a540d; }
.grp-chip.ruim { background: #fff0ee; color: #b84747; }
.grp-chip.neutro { background: #f1f4f3; color: var(--sag-muted, #66736f); }

/* ------------------------------------------------------- ocupação e linha do tempo */

.grp-ocupacao { display: grid; gap: 8px; }
.grp-ocupacao-linha {
  display: grid;
  grid-template-columns: minmax(110px, 180px) auto minmax(80px, 1fr) minmax(120px, auto);
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #edf0ef;
  border-radius: 10px;
  font-size: var(--texto-pp);
}
.grp-ocupacao-linha span:last-child { color: var(--sag-muted, #66736f); font-size: var(--texto-pp); text-align: right; }

.grp-linha-do-tempo {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.grp-linha-do-tempo li {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  padding: 9px 11px;
  border-left: 3px solid var(--sag-green, #15866d);
  border-radius: 8px;
  background: #f8faf9;
}
.grp-linha-do-tempo time { color: var(--sag-green, #15866d); font-size: var(--texto-pp); font-weight: 800; }
.grp-linha-do-tempo strong { display: block; font-size: var(--texto-pp); }
.grp-linha-do-tempo span { color: var(--sag-soft, #91a09b); font-size: var(--texto-pp); }

/* ------------------------------------------------------------------- filtros */

.grp-filtros { display: flex; gap: 8px; align-items: center; }
.grp-filtros input { max-width: 280px; }
.grp-filtros select { max-width: 190px; }

/* -------------------------------------------------------------------- a tabela */

.grp-rolagem { width: 100%; overflow: auto; }
.grp-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.grp-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--sag-soft, #91a09b);
  font-size: var(--texto-selo);
  text-transform: uppercase;
  letter-spacing: .07em;
  background: #fafbfb;
}
.grp-table td {
  padding: 11px 10px;
  border-top: 1px solid #edf0ef;
  font-size: var(--texto-pp);
  vertical-align: middle;
}
.grp-table td strong,
.grp-table td small { display: block; }
.grp-table td small { margin-top: 3px; color: var(--sag-soft, #91a09b); font-size: var(--texto-pp); }
.grp-table .grp-dir { text-align: right; }
.grp-table tr.grp-selecionada td { background: #f0f8f5; }
.grp-acoes { text-align: right; white-space: nowrap; }
/* O CABEÇALHO "AÇÕES" EM CIMA DOS BOTÕES (22/10/2026): o `.grp-table th` (alinhado à
 * esquerda) ganhava do `.grp-acoes`. E a coluna dos botões encolhe ao que precisa
 * (`width: 1%`) — antes ela comia toda a sobra e abria um buraco no meio da tabela. */
.grp-table .grp-acoes { text-align: right; width: 1%; }
.grp-acoes > * { margin-left: 5px; }
.grp-convite {
  display: inline-block;
  max-width: 190px;
  margin-right: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--sag-muted, #66736f);
  font-size: var(--texto-pp);
}

.grp-mini {
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 7px;
  background: #fff;
  color: var(--sag-ink, #17201e);
  font: inherit;
  font-size: var(--texto-pp);
  font-weight: 750;
  padding: 6px 8px;
  cursor: pointer;
}
.grp-mini:hover { background: #f4f7f6; }
.grp-mini.perigo { color: #b84747; }

/* --------------------------------------------------------------------- o vazio */

.grp-vazio {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 32px 18px;
  text-align: center;
  color: var(--sag-muted, #66736f);
  font-size: var(--texto-pp);
  border: 1px dashed #ccd7d3;
  border-radius: 11px;
  background: #fafcfb;
}
.grp-vazio strong { color: var(--sag-ink, #17201e); font-size: var(--texto-pp); }

/* ------------------------------------------------------------------- membros */

.grp-resumos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.grp-resumo-do-grupo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  padding: 11px 13px;
  border-radius: 11px;
  background: #f0f8f5;
  border: 1px solid #d7ebe4;
  font-size: var(--texto-pp);
  color: #42695d;
}
.grp-resumo-do-grupo strong { color: #174e40; }
.grp-resumo-do-grupo span { grid-column: 1 / -1; font-size: var(--texto-pp); }
/* O SELO FICA AO LADO DO NOME, do tamanho da palavra: a regra de cima o esticava na largura
 * do cartão ("Cheio" virava uma faixa inteira, acabamento de 23/10/2026). */
.grp-resumo-do-grupo .grp-chip { grid-column: auto; justify-self: end; }

/* ----------------------------------------------------------------- o gráfico */

.grp-chart {
  height: 210px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 18px 8px 26px;
  border-bottom: 1px solid var(--sag-line, #e4e9e7);
}
.grp-chart-dia {
  position: relative;
  flex: 1;
  min-width: 6px;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.grp-chart-barra {
  position: relative;
  width: 100%;
  min-height: 2px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 6px 6px 2px 2px;
  background: #cfe7de;
}
.grp-chart-barra i {
  display: block;
  width: 100%;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(#38b18d, #15866d);
}
.grp-chart-dia small {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--texto-pp);
  color: var(--sag-soft, #91a09b);
  white-space: nowrap;
}
.grp-legenda {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--sag-muted, #66736f);
  font-size: var(--texto-pp);
}
.grp-legenda span { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.grp-legenda-visita { background: #cfe7de; }
.grp-legenda-entrada { margin-left: 10px; background: var(--sag-green, #15866d); }

/* --------------------------------------------------------- redirecionamento */

.grp-link-da-porta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border-radius: 11px;
  background: #f0f8f5;
  border: 1px solid #d7ebe4;
}
.grp-link-da-porta code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #174e40;
  font-size: var(--texto-pp);
}
.grp-regras {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.grp-regras li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  padding: 9px;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 9px;
  font-size: var(--texto-pp);
}
.grp-regras small { grid-column: 1 / -1; color: var(--sag-muted, #66736f); }

/* ------------------------------------------------------------------- a janela */

/* A GAVETA À DIREITA, como em todo o Launivo (22/10/2026): era uma janela no centro, e o
 * "Salvar" ficava escondido embaixo. O rodapé fica preso no fim da gaveta. */
.grp-fundo {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: flex-end;
  background: rgba(10, 35, 29, .38);
}
.grp-modal {
  width: min(620px, 100vw);
  height: 100%;
  overflow: auto;
  background: #fff;
  border-radius: 17px 0 0 17px;
  box-shadow: -18px 0 50px rgba(10, 35, 29, .22);
  animation: grp-entra .18s ease-out;
}
@keyframes grp-entra {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}
.grp-modal-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--sag-line, #e4e9e7);
}
.grp-modal-topo > div { flex: 1; }
.grp-modal-topo h3 { margin: 0; font-size: var(--texto-g); }
.grp-modal-topo p { margin: 3px 0 0; color: var(--sag-muted, #66736f); font-size: var(--texto-pp); }
.grp-fechar {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: #f1f4f3;
  color: #66736f;
  font-size: 18px;
  cursor: pointer;
}
/* NADA ROLA PARA O LADO (conferência de 23/10/2026): a grade sem coluna declarada crescia até
 * o link da porta inteiro caber numa linha, e a gaveta passava da tela — no celular o começo
 * dos rótulos sumia ("escrição do grupo") e o "Copiar" saía pela direita. `minmax(0, 1fr)`
 * deixa a coluna encolher até a gaveta; o link corta com reticências. */
.grp-modal-corpo { padding: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.grp-modal-corpo > *,
.grp-grade > * { min-width: 0; }
.grp-modal-pe {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 14px 0 16px;
  margin-top: 2px;
  border-top: 1px solid var(--sag-line, #e4e9e7);
  background: #fff;
}
.grp-sub {
  margin: 4px 0 0;
  color: var(--sag-soft, #91a09b);
  font-size: var(--texto-selo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.grp-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.grp-grade.grp-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grp-grade[hidden],
[data-grp-para][hidden] { display: none; }
/* `align-content: start`: lado a lado, o campo sem dica não desce para alinhar com o que tem
 * dica embaixo ("Nome do lançamento" ficava mais baixo que "Apelido da porta", 22/10). */
.grp-campo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 4px;
  min-width: 0;
  font-size: var(--texto-pp);
}
.grp-campo > span { color: var(--sag-muted, #66736f); font-weight: 700; }
.grp-campo small { color: var(--sag-soft, #91a09b); font-size: var(--texto-pp); }
.grp-campo input,
.grp-campo select,
.grp-campo textarea { width: 100%; box-sizing: border-box; }
.grp-campo-largo { grid-column: 1 / -1; }
.grp-erro {
  margin: 0;
  padding: 9px 11px;
  border-radius: 9px;
  background: #fff0ee;
  color: #b84747;
  font-size: var(--texto-pp);
}
.grp-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.grp-regra {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 9px;
  font-size: var(--texto-pp);
  color: var(--sag-muted, #66736f);
}
.grp-regra input { accent-color: var(--sag-green, #15866d); }
.grp-regra strong { display: block; color: var(--sag-ink, #17201e); }
.grp-regra small { display: block; margin-top: 2px; }

/* ------------------------------------------- a limpeza dos grupos (Nuvem 3, 22/10/2026) */
/* Quem já comprou e quem está em mais de um grupo — `membros-dos-grupos.js`. Os dois cartões
 * lado a lado, com a mesma altura; no celular, um embaixo do outro. */

.mbr-metades {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
/* NA OPÇÃO A (Henrique, 23/10/2026): faixa da cor no topo, ícone num quadrado claro da cor e
 * o número grande — o mesmo cartão do Painel. A cor é a do selo ao lado: âmbar "Para tirar" ou
 * "Repetidos", verde "Em dia". As cores vêm do `cs-cor-*` do Console. */
.mbr-cartao {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 18px 16px 14px;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 16px;
}
.mbr-cartao[class*="cs-cor-"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--cs-cor);
}
.mbr-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mbr-topo h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--texto-p);
  font-weight: 750;
}
.mbr-numero { margin-top: 6px; font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.mbr-cartao p { margin: 0; font-size: var(--texto-p); }
.mbr-cartao > small { color: var(--sag-muted, #66736f); font-size: var(--texto-pp); }
.mbr-quem summary { cursor: pointer; font-size: var(--texto-pp); font-weight: 700; }
.mbr-quem ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
}
.mbr-quem li { display: grid; font-size: var(--texto-pp); }
.mbr-quem li span { color: var(--sag-muted, #66736f); }
.mbr-acoes { display: flex; gap: 7px; flex-wrap: wrap; }
.mbr-acoes:empty { display: none; }
.mbr-sozinho { display: flex; gap: 8px; align-items: flex-start; font-size: var(--texto-pp); }
.mbr-sozinho span { display: grid; gap: 2px; }
.mbr-sozinho small { color: var(--sag-muted, #66736f); font-size: var(--texto-pp); }
@media (max-width: 720px) {
  .mbr-metades { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- telas menores */

@media (max-width: 1180px) {
  .grp-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grp-tela .cs-cartoes.grp-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grp-barra-das-abas { flex-wrap: wrap; }
  .grp-duas:not(.grp-larga-esquerda) > * { grid-column: auto; }
  .grp-duas,
  .grp-larga-esquerda { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .grp-tela .cs-cartoes.grp-cartoes { grid-template-columns: 1fr; }
  .grp-escolha { width: 100%; }
  .grp-escolha select { flex: 1; min-width: 0; }
  .grp-numeros,
  .grp-lancamentos,
  .grp-regras,
  .grp-rule-grid,
  .grp-grade,
  .grp-grade.grp-tres { grid-template-columns: 1fr; }
  .grp-filtros { flex-direction: column; align-items: stretch; }
  .grp-filtros input,
  .grp-filtros select { max-width: none; }
  .grp-ocupacao-linha { grid-template-columns: 1fr auto; }
  .grp-ocupacao-linha .grp-barra { grid-column: 1 / -1; }
  /* NO CELULAR OS BOTÕES DESCEM para baixo do título: ao lado, "Grupos do projeto" virava
   * uma palavra por linha e o "Baixar membros (CSV)" saía do botão (acabamento, 23/10). */
  .grp-secao-cabeca { flex-direction: column; align-items: stretch; }
  .grp-secao-acoes { justify-content: flex-start; }
}

/* ------------------------------------- os administradores dos grupos (item 19, 22/10) */

.grp-admins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.grp-admins li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 10px;
  font-size: var(--texto-pp);
}
/* O nome e o número aparecem inteiros (Henrique, 04/11): nome comprido quebra a linha, não corta. */
.grp-admins strong { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* ------------------------------- a foto do grupo e os administradores na gaveta (23/10) */

/* A FOTO REDONDA, como no WhatsApp — na lista para achar o grupo de relance. Sem foto, a
 * inicial no círculo (avatar de pessoa e de grupo pode ter inicial; a regra dos ícones é para
 * as siglas). */
.grp-foto {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 50%;
  background: #e3f1ec;
  color: #174e40;
  font-size: var(--texto-pp);
  font-weight: 800;
  vertical-align: middle;
}
.grp-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grp-foto-m { width: 34px; height: 34px; font-size: var(--texto-p); }
.grp-foto-g { width: 72px; height: 72px; font-size: var(--texto-g); border: 1px solid var(--sag-line, #e4e9e7); }
.grp-foto[hidden] { display: none; }
.grp-com-foto { display: flex; align-items: center; gap: 9px; min-width: 0; }
.grp-com-foto > span:last-child,
.grp-com-foto > div { min-width: 0; }
.grp-lancamento-topo > .grp-com-foto > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grp-foto-escolha { display: flex; align-items: center; gap: 12px; min-width: 0; }
.grp-foto-texto { display: grid; gap: 4px; min-width: 0; }
.grp-foto-texto strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sag-ink, #17201e);
  font-size: var(--texto-p);
}
.grp-foto-botoes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.grp-foto-botoes [hidden] { display: none; }

.grp-recado-padrao {
  margin: 2px 0 0;
  padding: 9px 11px;
  border-radius: 9px;
  background: #fff5e5;
  color: #8a540d;
  font-size: var(--texto-pp);
}
.grp-aviso-com-botao { display: flex; align-items: center; gap: 12px; }
.grp-aviso-com-botao .grp-recado-padrao { flex: 1; margin: 0; }
.grp-aviso-com-botao .btn { flex: none; }
.grp-admins.grp-admins-gaveta { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 2px; }
.grp-admin-novo { display: flex; gap: 7px; margin-top: 4px; }
.grp-admin-novo input { flex: 1; min-width: 0; }
.grp-admin-novo .btn { flex: none; }
.grp-erro-do-admin { color: #b84747; }
.grp-erro-do-admin[hidden] { display: none; }
.grp-regra .grp-mini { margin-top: 6px; }
@media (max-width: 720px) {
  .grp-admin-novo,
  .grp-aviso-com-botao { flex-direction: column; align-items: stretch; }
  .grp-admin-novo input { flex: none; }
  .grp-aviso-com-botao { display: flex; align-items: center; gap: 12px; }
.grp-aviso-com-botao .grp-recado-padrao { flex: 1; margin: 0; }
.grp-aviso-com-botao .btn { flex: none; }
.grp-admins.grp-admins-gaveta { grid-template-columns: 1fr; }
}