/* b7-painel-do-grupo.css — pedaço 7/8 do antigo painel-body.css. A ORDEM dos links
   no index.html é a cascata: não reordenar, não trocar de posição. */
        /* ── Painel do grupo ──────────────────────────────────────────────────
           Painel de trabalho, nao ficha de perfil: topo compacto, abas e cards.
           Tudo com as variaveis de tema, entao serve claro e escuro. */
        .grupo-modal { position:fixed; inset:0; z-index:10050; display:none; align-items:center; justify-content:center;
            padding:22px; box-sizing:border-box; background:rgba(0,0,0,.64); backdrop-filter:blur(10px); }
        .grupo-modal.aberto { display:flex; animation:grupoFade .16s ease; }
        @keyframes grupoFade { from { opacity:0 } to { opacity:1 } }
        @keyframes grupoSobe { from { opacity:0; transform:translateY(12px) scale(.99) } to { opacity:1; transform:none } }
        @keyframes grupoBrilho { from { background-position:200% 0 } to { background-position:-200% 0 } }

        .grupo-card { width:100%; max-width:980px; height:min(88vh, 860px); display:flex; flex-direction:column;
            background:var(--bg-sidebar); border:1px solid var(--border); border-radius:20px; overflow:hidden;
            box-shadow:0 30px 80px rgba(0,0,0,.6); animation:grupoSobe .2s cubic-bezier(.2,.8,.3,1); }

        /* Topo: identidade em uma faixa, com o restante do espaco livre pro trabalho. */
        .gp-topo { position:relative; flex:none; display:flex; align-items:center; gap:16px;
            padding:20px 22px; border-bottom:1px solid var(--border); overflow:hidden; }
        .gp-topo-fundo { position:absolute; inset:0; background-size:cover; background-position:center;
            filter:blur(34px) saturate(1.4); transform:scale(1.3); opacity:.22; }
        .gp-topo::after { content:''; position:absolute; inset:0; pointer-events:none;
            background:linear-gradient(100deg, rgba(0,168,132,.14), transparent 55%); }
        .gp-topo > * { position:relative; z-index:1; }

        .grupo-foto { width:72px; height:72px; border-radius:20px; object-fit:cover; object-position:center 20%; flex:none;
            border:1px solid var(--border); box-shadow:0 8px 22px rgba(0,0,0,.35); background:var(--bg-header); }
        .grupo-foto-vazia { display:flex; align-items:center; justify-content:center; font-size:26px;
            color:var(--accent); background:rgba(0,168,132,.12); }
        .gp-identidade { flex:1; min-width:0; }
        .grupo-nome { font-size:20px; font-weight:800; letter-spacing:-.3px; margin:0 0 6px;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .gp-pills { display:flex; flex-wrap:wrap; gap:6px; }
        .gp-pill { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
            padding:4px 9px; border-radius:20px; background:rgba(127,127,127,.12); color:var(--text-secondary);
            border:1px solid var(--border); }
        .gp-pill b { color:var(--text-main); font-weight:700; }
        .gp-pill.on { background:rgba(0,168,132,.14); border-color:rgba(0,168,132,.4); color:var(--accent); }
        .gp-pill.off { background:rgba(209,52,56,.13); border-color:rgba(209,52,56,.4); color:#e2565a; }
        .gp-ponto { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }

        .grupo-fechar { flex:none; width:34px; height:34px; border:none; border-radius:11px; cursor:pointer;
            background:rgba(127,127,127,.14); color:var(--text-main); font-size:15px;
            display:flex; align-items:center; justify-content:center; transition:background .15s; }
        .grupo-fechar:hover { background:rgba(209,52,56,.18); color:#e2565a; }

        /* Abas */
        .gp-abas { flex:none; display:flex; gap:2px; padding:0 14px; border-bottom:1px solid var(--border);
            background:var(--bg-header); overflow-x:auto; }
        .gp-aba { border:none; background:transparent; color:var(--text-secondary); cursor:pointer;
            font-family:inherit; font-size:12.5px; font-weight:600; padding:13px 14px; white-space:nowrap;
            border-bottom:2px solid transparent; transition:color .15s, border-color .15s; display:flex; align-items:center; gap:7px; }
        .gp-aba i { font-size:12px; }
        .gp-aba:hover { color:var(--text-main); }
        .gp-aba.ativa { color:var(--accent); border-bottom-color:var(--accent); }
        .gp-aba-conta { background:rgba(127,127,127,.16); border-radius:20px; padding:1px 7px; font-size:10px; font-weight:700; }

        .gp-conteudo { flex:1; overflow-y:auto; padding:20px 22px 24px; }
        .gp-painel { display:none; }
        .gp-painel.ativo { display:block; animation:grupoFade .16s ease; }
        .gp-grade { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
        .gp-grade.uma { grid-template-columns:1fr; }

        /* Card: a unidade visual do painel. */
        .gp-card { background:linear-gradient(180deg, rgba(127,127,127,.09), rgba(127,127,127,.04));
            border:1px solid var(--border); border-radius:16px; padding:15px 16px; display:flex;
            flex-direction:column; gap:11px; min-width:0; }
        .gp-card.destaque { border-color:rgba(0,168,132,.35);
            background:linear-gradient(180deg, rgba(0,168,132,.09), rgba(0,168,132,.02)); }
        .gp-card-topo { display:flex; align-items:center; gap:11px; }
        .gp-icone { width:36px; height:36px; border-radius:11px; flex:none; display:flex; align-items:center;
            justify-content:center; font-size:15px; background:rgba(0,168,132,.13); color:var(--accent); }
        .gp-card-tit { flex:1; min-width:0; }
        .gp-card-tit h3 { margin:0; font-size:13.5px; font-weight:700; color:var(--text-main);
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .gp-card-tit p { margin:2px 0 0; font-size:11px; color:var(--text-secondary); line-height:1.4; }

        .gp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
        .gp-stat { background:rgba(127,127,127,.08); border:1px solid var(--border); border-radius:14px;
            padding:12px 10px; text-align:center; }
        .gp-stat-num { font-size:19px; font-weight:800; color:var(--text-main); line-height:1.2; }
        .gp-stat-rot { font-size:9.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--text-secondary); margin-top:4px; }

        /* Botao segmentado: substitui o <select> feio do escopo da integracao. */
        .gp-seg { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; background:rgba(127,127,127,.1);
            border:1px solid var(--border); border-radius:12px; padding:4px; }
        .gp-seg button { border:none; background:transparent; color:var(--text-secondary); cursor:pointer;
            font-family:inherit; font-size:11.5px; font-weight:700; padding:8px 6px; border-radius:9px;
            transition:all .15s; display:flex; flex-direction:column; align-items:center; gap:3px; line-height:1.25; }
        .gp-seg button i { font-size:13px; }
        .gp-seg button:hover { color:var(--text-main); }
        .gp-seg button.ativo { background:var(--accent); color:#fff; box-shadow:0 4px 12px rgba(0,168,132,.3); }

        .gp-linha { display:flex; align-items:center; justify-content:space-between; gap:10px;
            padding:9px 0; font-size:12.5px; }
        .gp-linha + .gp-linha { border-top:1px solid var(--border); }
        .gp-linha-rot { color:var(--text-secondary); font-size:11.5px; }
        .gp-linha-val { color:var(--text-main); font-weight:600; text-align:right; min-width:0;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

        .grupo-btn { width:100%; border:none; border-radius:11px; padding:10px; cursor:pointer; font-family:inherit;
            font-size:12.5px; font-weight:700; background:var(--accent); color:#fff;
            display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:filter .15s; }
        .grupo-btn:hover { filter:brightness(1.08); }
        .grupo-btn.ghost { background:transparent; border:1px solid var(--border); color:var(--text-main); }
        .grupo-btn.ghost:hover { background:rgba(127,127,127,.12); }

        .grupo-acoes { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
        .grupo-acao { display:inline-flex; align-items:center; gap:9px; background:rgba(127,127,127,.08);
            border:1px solid var(--border); color:var(--text-main); border-radius:12px; padding:11px 12px;
            font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer; transition:all .15s; text-align:left; }
        .grupo-acao:hover { background:rgba(0,168,132,.12); border-color:rgba(0,168,132,.4); transform:translateY(-1px); }
        .grupo-acao i { color:var(--accent); font-size:14px; width:16px; text-align:center; }

        .grupo-textarea { width:100%; box-sizing:border-box; min-height:190px; resize:vertical;
            background:var(--bg-main); color:var(--text-main); border:1px solid var(--border); border-radius:12px;
            padding:12px 13px; font-family:'Consolas','Monaco',monospace; font-size:12px; line-height:1.65; }
        .itg-input { width:100%; box-sizing:border-box; background:var(--bg-main); color:var(--text-main);
            border:1px solid var(--border); border-radius:10px; padding:9px 11px; font-family:inherit; font-size:12.5px; }

        .grupo-desc { font-size:13px; line-height:1.55; color:var(--text-main); white-space:pre-wrap; word-break:break-word; }
        .grupo-desc.vazio { color:var(--text-secondary); font-style:italic; }

        /* Participantes em duas colunas: cabe o dobro sem rolar. */
        .grupo-lista { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:3px; }
        .grupo-pessoa { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px;
            transition:background .15s; min-width:0; }
        .grupo-pessoa:hover { background:rgba(127,127,127,.1); }
        .grupo-pessoa-foto { width:38px; height:38px; border-radius:50%; object-fit:cover; object-position:center 20%; flex:none;
            display:flex; align-items:center; justify-content:center; color:#fff; font-size:12.5px; font-weight:800; }
        .grupo-pessoa-info { min-width:0; flex:1; }
        .grupo-pessoa-nome { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .grupo-pessoa-sub { font-size:11px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .grupo-tag { font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
            padding:3px 7px; border-radius:20px; flex:none; }
        .grupo-tag.dono { background:rgba(255,183,3,.16); color:#ffb703; }
        .grupo-tag.admin { background:rgba(0,168,132,.16); color:var(--accent); }

        .grupo-perm { display:flex; align-items:center; gap:11px; padding:10px 0; }
        .grupo-perm + .grupo-perm { border-top:1px solid var(--border); }
        .grupo-perm-foto { width:36px; height:36px; border-radius:50%; object-fit:cover; object-position:center 20%; flex:none; display:flex;
            align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:800; }
        .grupo-perm-info { flex:1; min-width:0; }
        .grupo-perm-nome { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .grupo-perm-sub { font-size:11px; color:var(--text-secondary); }
        .grupo-perm-acoes { display:flex; gap:6px; flex-wrap:wrap; }
        .grupo-chip { border:1px solid var(--border); background:transparent; color:var(--text-secondary);
            font-size:10px; font-weight:700; letter-spacing:.3px; padding:5px 9px; border-radius:20px;
            cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:5px; font-family:inherit; }
        .grupo-chip.on { background:rgba(0,168,132,.14); border-color:rgba(0,168,132,.45); color:var(--accent); }
        .grupo-chip:disabled { cursor:default; opacity:.7; }
        .grupo-chip:not(:disabled):hover { transform:translateY(-1px); }

        .grupo-vazio { text-align:center; color:var(--text-secondary); font-size:12.5px; padding:22px 10px; line-height:1.55; }
        .gp-dica { margin:0; font-size:11px; line-height:1.5; color:var(--text-secondary); }
        .grupo-skeleton { height:52px; border-radius:12px; margin-bottom:8px;
            background:linear-gradient(90deg, rgba(127,127,127,.08), rgba(127,127,127,.17), rgba(127,127,127,.08));
            background-size:200% 100%; animation:grupoBrilho 1.1s infinite; }