/* =============================================================
   OS GRUPOS DO WHATSAPP — o cartão da lista
   -------------------------------------------------------------
   Este cartão era estilo escrito dentro de cada atributo do HTML.
   Enquanto teve dois botões, passou. Quando entrou o terceiro
   ("Administrar"), o bloco de ações — que era `flex: 0 0 auto`,
   ou seja, nunca encolhe — empurrou o cartão para fora da própria
   borda, e o nome do grupo, que não tinha `min-width: 0`, se
   recusou a encurtar para dar espaço.

   AS DUAS REGRAS QUE CONSERTAM ISSO, E QUE VALEM PARA QUALQUER
   CARTÃO DESTE PAINEL:

   1. Quem pode encurtar, encurta: a coluna do nome é `min-width: 0`
      com reticências. Sem isso, uma palavra longa define a largura
      mínima da linha inteira e não há flex que salve.

   2. Quem não pode encurtar, desce: as ações são `flex: 0 1 auto`
      e, quando não cabem lado a lado, quebram para a linha de
      baixo ocupando a largura toda. Botão que desce continua
      clicável; botão que vaza, não.
============================================================= */

.grupo-cartao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    padding: 12px 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r, 14px);
    background: var(--surface-2);
    transition: var(--t-fast);
}
.grupo-cartao:hover { border-color: var(--border); background: var(--surface-3); }

/* ---------- identidade ---------- */
.grupo-cabeca {
    display: flex;
    align-items: center;
    gap: 11px;
    /* `1 1 220px`: ocupa o que sobrar, e abaixo de ~220px de espaço
       livre desiste da linha e deixa as ações irem para baixo. */
    flex: 1 1 220px;
    min-width: 0;
}

.grupo-foto {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: var(--r-sm, 10px);
    background: var(--accent-soft);
    color: var(--accent-hi);
    font-size: 14px;
}

.grupo-txt {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.grupo-txt strong {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grupo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-faint);
}
.grupo-meta i { font-size: 10px; margin-right: 4px; opacity: .8; }

.grupo-selo {
    padding: 1px 7px;
    border-radius: var(--r-full);
    background: var(--surface-4);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-dim);
    white-space: nowrap;
}
.grupo-selo.e-mural { background: var(--warn-soft); color: var(--warn); }

/* ---------- ações ---------- */
.grupo-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    /* `0 1 auto` — o oposto do que estava aqui. Pode encolher. */
    flex: 0 1 auto;
}
.grupo-acoes .btn { white-space: nowrap; }

@media (max-width: 620px) {
    .grupo-cartao { align-items: flex-start; }
    /* As ações tomam a linha inteira e se espalham por ela.

       `flex: 1 1 auto` e não `1 1 0`: com base zero os três botões
       ficariam presos na mesma linha e o rótulo comprido ("Extrair
       contatos") seria cortado no meio. Com base automática, quem
       não couber desce — e desce inteiro, com a palavra legível.
       Num painel de vendas, botão sem rótulo é adivinhação. */
    .grupo-acoes { flex: 1 1 100%; }
    .grupo-acoes .btn { flex: 1 1 auto; justify-content: center; }
}