/* Módulo grupos: barra de ocupação sem estilo inline (CSP) e ajustes das telas. Tokens em app.css. */
.barra > span.largura-0 { width: 0; }
.barra > span.largura-5 { width: 5%; }
.barra > span.largura-10 { width: 10%; }
.barra > span.largura-15 { width: 15%; }
.barra > span.largura-20 { width: 20%; }
.barra > span.largura-25 { width: 25%; }
.barra > span.largura-30 { width: 30%; }
.barra > span.largura-35 { width: 35%; }
.barra > span.largura-40 { width: 40%; }
.barra > span.largura-45 { width: 45%; }
.barra > span.largura-50 { width: 50%; }
.barra > span.largura-55 { width: 55%; }
.barra > span.largura-60 { width: 60%; }
.barra > span.largura-65 { width: 65%; }
.barra > span.largura-70 { width: 70%; }
.barra > span.largura-75 { width: 75%; }
.barra > span.largura-80 { width: 80%; }
.barra > span.largura-85 { width: 85%; }
.barra > span.largura-90 { width: 90%; }
.barra > span.largura-95 { width: 95%; }
.barra > span.largura-100 { width: 100%; }
.barra-ocupacao { min-width: 110px; }
.barra-ocupacao small { font-size: var(--texto-xs); }
.barra-ocupacao .barra { margin-top: 4px; height: 6px; }
.tabela-grupos { font-size: var(--texto-s); }
.tabela-grupos td { vertical-align: middle; }
.tabela-grupos .nome-grupo { font-weight: 600; display: block; min-width: 140px; }
.tabela-grupos .nome-grupo small { display: block; font-weight: 400; color: var(--texto-suave); margin-top: 2px; }
.contagem-antiga { color: var(--aviso); font-weight: 600; }
.contagem-fonte { display: block; font-size: var(--texto-xs); color: var(--texto-suave); }
.alternar { display: inline-flex; gap: 4px; align-items: center; }
.alternar form { display: inline; }
.grupos-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.grupos-acoes form { display: inline; }
.lista-alertas { list-style: none; padding: 0; margin: 0; }
.lista-alertas li { padding: 10px 14px 10px 16px; border-radius: var(--raio-s); margin-bottom: 8px; border: 1px solid transparent; border-left-width: 4px; font-size: .9rem; }
.lista-alertas li:last-child { margin-bottom: 0; }
.lista-alertas li.sev-aviso { background: var(--aviso-fundo); color: var(--aviso-texto); border-color: var(--aviso-borda); border-left-color: var(--aviso); }
.lista-alertas li.sev-erro, .lista-alertas li.sev-critico { background: var(--erro-fundo); color: var(--erro-texto); border-color: var(--erro-borda); border-left-color: var(--erro); }
.lista-alertas li.sev-info { background: var(--info-fundo); color: var(--info-texto); border-color: var(--info-borda); border-left-color: var(--info); }
.lista-alertas li small { display: block; color: inherit; opacity: .85; }
.previa-importacao .linha-erro td { background: var(--erro-fundo); }
.motivos { margin: 0; padding-left: 1rem; font-size: var(--texto-s); color: var(--texto-suave); }
.previa-publica { border: 1px dashed var(--borda-forte); border-radius: var(--raio); padding: var(--esp-4); background: var(--superficie-2); }
.previa-publica .marca-publica { color: var(--cor-marca); }
.previa-publica .publica-cartao .foto { margin-top: 0; }
.links-extras .form-grid { grid-template-columns: 1fr 2fr; }
.dominio-instrucoes ol { padding-left: 1.2rem; }
.relato-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-2); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borda-suave); }
.relato-item:last-child { border-bottom: 0; }
.relato-item.tratado { opacity: .6; }
.publica-cartao .foto-vazia { width: 96px; height: 96px; border-radius: 50%; margin: -3.5rem auto .75rem; border: 4px solid #fff; background: var(--cor-marca-clara); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--cor-marca-texto); }
.publica-frequencia { color: var(--texto-suave); font-size: .9rem; }
.publica-rodape { margin-top: 1rem; font-size: var(--texto-s); color: var(--texto-suave); text-align: center; }
.publica-rodape a { color: inherit; }
.publica-indisponivel h1 { font-size: 1.3rem; }

/* Foto do grupo (arquivo enviado pelo painel ou link) e descrição no estilo WhatsApp */
.grupo-foto { display: block; object-fit: cover; border-radius: 50%; border: 2px solid var(--borda); background: var(--superficie-3); }
.grupo-foto-m { width: 72px; height: 72px; }
.grupo-foto-g { width: 112px; height: 112px; }
.grupo-foto-atual { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-2); }
.grupo-descricao { margin-bottom: var(--esp-4); }
.grupo-descricao .wa-preview { max-width: 520px; }
.grupo-descricao .wa-balao { white-space: pre-wrap; }

/* Bloco Compartilhar (link público, mensagem pronta, wa.me) */
.compartilhar-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); padding: 12px 0; border-bottom: 1px solid var(--borda-suave); }
.compartilhar-item:first-of-type { padding-top: 0; }
.compartilhar-item:last-of-type { border-bottom: 0; }
.compartilhar-rotulo { flex: 0 0 100%; font-size: var(--texto-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.compartilhar-item code { font-size: .9rem; word-break: break-all; background: var(--superficie-3); padding: 6px 10px; border-radius: var(--raio-s); }
.compartilhar-principal { background: var(--cor-marca-suave); border: 1px solid var(--cor-marca-clara); border-radius: var(--raio); padding: 14px 16px; margin-bottom: 4px; }
.compartilhar-principal code { font-weight: 600; background: var(--superficie); border: 1px solid var(--cor-marca-clara); }
.compartilhar-previa { flex: 0 0 100%; max-width: 480px; }
.compartilhar-previa .wa-balao { white-space: pre-wrap; }
.compartilhar-item small { flex: 0 0 100%; }

/* ---------------------------------------------------------------------------------------------
   Lista em cartões (visão padrão): foto, nome, número, convite, descrição e modo automático "na cara"
   --------------------------------------------------------------------------------------------- */
.grupos-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-4); margin-bottom: var(--esp-4); }
.grupos-barra p { margin: 0; }
.alternador { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: var(--raio-s); overflow: hidden; background: var(--superficie); }
.alternador a { padding: 6px 12px; font-size: var(--texto-s); font-weight: 600; text-decoration: none; color: var(--texto-suave); min-height: 32px; display: inline-flex; align-items: center; }
.alternador a + a { border-left: 1px solid var(--borda-forte); }
.alternador a:hover { background: var(--superficie-2); color: var(--texto); }
.alternador a[aria-current="true"] { background: var(--cor-marca-suave); color: var(--cor-marca-texto); }
.grupos-cartoes { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); margin-bottom: var(--esp-5); }
.grupo-cartao { display: flex; flex-direction: column; gap: var(--esp-3); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); box-shadow: var(--sombra-1); padding: var(--esp-4); min-width: 0; }
.grupo-cartao.pausado { border-color: var(--aviso-borda); }
.grupo-cartao-topo { display: flex; gap: var(--esp-3); align-items: flex-start; min-width: 0; }
.grupo-cartao-topo .grupo-foto, .grupo-foto-vazia { flex: 0 0 auto; }
.grupo-foto-vazia { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cor-marca-suave); color: var(--cor-marca-texto); font-weight: 700; border: 2px solid var(--borda); }
.grupo-foto-vazia.grupo-foto-m { width: 72px; height: 72px; font-size: 1.4rem; }
.grupo-foto-vazia.grupo-foto-g { width: 112px; height: 112px; font-size: 2rem; }
.grupo-cartao-titulo { min-width: 0; flex: 1 1 auto; }
.grupo-cartao-titulo h3 { margin: 0 0 4px; font-size: 1rem; line-height: 1.3; word-break: break-word; }
.grupo-cartao-titulo h3 a { color: inherit; text-decoration: none; }
.grupo-cartao-titulo h3 a:hover { color: var(--cor-marca-texto); text-decoration: underline; }
.grupo-cartao-titulo .numero { color: var(--cor-marca-texto); margin-right: 4px; }
.grupo-cartao-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.grupo-cartao-dados { display: grid; gap: 10px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.grupo-cartao-dados > div { min-width: 0; }
.grupo-cartao-dados dt { font-size: var(--texto-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); margin-bottom: 2px; }
.grupo-cartao-dados dd { margin: 0; font-size: var(--texto-s); line-height: 1.4; word-break: break-word; }
.grupo-cartao-dados dd .barra-ocupacao { min-width: 0; margin-top: 4px; }
.grupo-cartao-dados .largo { grid-column: 1 / -1; }
.grupo-telefone { font-weight: 600; }
.grupo-telefone small { display: block; font-weight: 400; color: var(--texto-suave); }
.grupo-convite { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.grupo-convite code { font-size: var(--texto-xs); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grupo-cartao-desc { margin: 0; font-size: var(--texto-s); color: var(--texto); line-height: 1.45; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.grupo-cartao details { margin: 0; }
.grupo-cartao details > summary { font-size: var(--texto-s); padding: 2px 0; color: var(--cor-marca-texto); }
.grupo-cartao details .wa-preview { margin-top: var(--esp-2); max-width: none; }
.grupo-cartao details .wa-balao { white-space: pre-wrap; font-size: var(--texto-s); }
.grupo-cartao-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; margin-top: auto; padding-top: var(--esp-2); border-top: 1px solid var(--borda-suave); }
.grupo-cartao-acoes form { display: inline; }
.grupo-cartao-acoes .botao { min-height: 32px; }
.grupo-sem-descricao { font-size: var(--texto-s); color: var(--texto-suave); font-style: italic; margin: 0; }

/* Detalhe: bloco de topo com foto grande, número, convite e descrição completa */
.grupo-topo .cartao-corpo { display: flex; gap: var(--esp-5); align-items: flex-start; flex-wrap: wrap; }
.grupo-topo-foto { flex: 0 0 auto; }
.grupo-topo-info { flex: 1 1 320px; min-width: 0; }
.grupo-topo-info h2 { margin: 0 0 6px; font-size: 1.25rem; line-height: 1.3; word-break: break-word; }
.grupo-topo-info .grupo-cartao-badges { margin-bottom: var(--esp-3); }
.grupo-topo-info .defs { margin-bottom: var(--esp-4); }
.grupo-topo-desc .wa-preview { max-width: 560px; }
.grupo-topo-desc .wa-balao { white-space: pre-wrap; }
.grupo-topo-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; margin-top: var(--esp-3); }
.grupo-topo-acoes form { display: inline; }

/* Cartão "Modo automático" no detalhe */
.automacao-estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin-bottom: var(--esp-3); }
.automacao-estado .resumo { color: var(--texto-suave); font-size: var(--texto-s); }
.automacao-rodada { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; margin-top: var(--esp-3); font-size: var(--texto-s); }
.automacao-rodada h3 { margin: 0 0 6px; font-size: var(--texto-s); text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.automacao-rodada p { margin: 0 0 4px; }
.automacao-rodada ul { margin: 6px 0 0; padding-left: 1.1rem; }
.automacao-rodada li { margin-bottom: 2px; }
.automacao-rodada details { margin-top: 6px; }
.automacao-rodada details > summary { font-size: var(--texto-s); padding: 2px 0; }
.automacao-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; margin-top: var(--esp-3); }
.automacao-acoes form { display: inline; }

/* Formulário: bloco recolhível do modo automático e agente de IA */
details.bloco[data-automacao] > summary { gap: 10px; flex-wrap: wrap; }
details.bloco[data-automacao] > summary .texto-suave { font-weight: 400; font-size: var(--texto-s); }
.lista-categorias { display: grid; gap: 2px 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); max-height: 260px; overflow: auto; border: 1px solid var(--borda); border-radius: var(--raio-s); padding: 8px 10px; background: var(--superficie-2); }
.lista-categorias .campo-check { margin-bottom: 0; }
.lista-categorias .campo-check label { font-weight: 500; font-size: var(--texto-s); min-height: 32px; align-items: center; }
.ia-redator { border: 1px dashed var(--borda-forte); border-radius: var(--raio); padding: 12px 14px; background: var(--superficie-2); margin-bottom: var(--esp-4); }
.ia-redator .campo { margin-bottom: var(--esp-2); }
.ia-redator .acoes-linha { align-items: center; }
.ia-redator [data-ia-status] { flex: 1 1 200px; }
.ajuda.texto-aviso { color: var(--aviso-texto); }

/* No detalhe o convite aparece inteiro (quebra em vez de reticências); nos cartões continua resumido com "Copiar/Abrir" */
.grupo-topo-info .grupo-convite code { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .grupo-cartao-dados { grid-template-columns: 1fr; }
  .grupo-convite { gap: 8px; }
  .grupo-convite code { flex: 1 1 100%; }
  .grupo-cartao-acoes .botao, .grupo-cartao-acoes form, .automacao-acoes .botao, .automacao-acoes form, .grupo-topo-acoes .botao, .grupo-topo-acoes form { flex: 1 1 auto; }
  .grupo-cartao-acoes form .botao, .automacao-acoes form .botao, .grupo-topo-acoes form .botao { width: 100%; }
  .grupo-topo .cartao-corpo { flex-direction: column; align-items: center; }
  .grupo-topo-info { width: 100%; }
  .grupo-topo-info .grupo-cartao-badges { justify-content: center; }
  .alternador { width: 100%; }
  .alternador a { flex: 1 1 auto; justify-content: center; }
  .lista-categorias { max-height: 320px; }
}
/* Links extras da página pública: "texto | endereço" lado a lado só quando cabe; no celular um embaixo do outro */
@media (max-width: 480px) {
  .links-extras .form-grid { grid-template-columns: 1fr; }
}

/* Central de buscas diárias */
.busca-grupo { scroll-margin-top: 24px; }
.busca-resultados { margin-top: var(--esp-4); }
.busca-resultados > summary { cursor: pointer; font-weight: 600; padding: 12px 0; }
.busca-oferta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.busca-oferta img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 56px; border-radius: var(--raio); }
.busca-oferta a { overflow-wrap: anywhere; }
.busca-grupo .automacao-acoes { margin-top: var(--esp-4); }

@media (max-width: 900px) {
 .lista-categorias .campo-check label { min-height: 44px; }
 .automacao-rodada details > summary { min-height: 44px; padding-block: 10px; }
}

.grupos-abas { display:flex; gap:8px; border-bottom:1px solid var(--borda); margin-bottom:24px; }
.grupos-abas a { padding:14px 18px; font-weight:650; border-bottom:3px solid transparent; text-decoration:none; }
.grupos-abas [aria-current] { border-color:var(--cor-marca); color:var(--cor-marca-texto); }
.grupos-importar-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:20px; }
.grupo-importar { background:var(--superficie); border:1px solid var(--borda); border-radius:16px; padding:24px; min-width:0; }
.grupo-importar-topo { display:flex; gap:12px; align-items:center; justify-content:space-between; }
.grupo-importar-icone { font-size:1.7rem; }
.grupo-importar h2 { font-size:1.1rem; overflow-wrap:anywhere; margin:18px 0 8px; }
.grupo-importar .botao { width:100%; }