/* ═══════════════════════════════════════════════════════════════════════
   GRUPOS — a tela
   ═══════════════════════════════════════════════════════════════════════
   Mesma gramática das outras telas que cobrem o quadro (Clientes, Estoque,
   Contratos): faixa de identidade no topo, corpo branco/escuro rolando por
   baixo, e cartões que dizem o essencial sem precisar ser abertos.

   Os dois temas moram aqui, e é a mesma razão do arquivo da barra: a tela
   nasceu nos dois ao mesmo tempo.
   ═══════════════════════════════════════════════════════════════════════ */

#grupos-view{
  position:fixed;inset:0;z-index:1150;display:none;
  flex-direction:column;background:#0d0d12;overflow:hidden;
}
#grupos-view.aberta{display:flex;animation:fadeIn .16s both;}
body.grupos-abertos{overflow:hidden;}

/* ── A faixa ─────────────────────────────────────────────────────────── */
.grp-faixa{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:26px 28px 22px;flex-shrink:0;
  background:linear-gradient(135deg,#1e1b4b 0%,#312e81 60%,#4338ca 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.grp-titulo{
  font-family:'Syne',sans-serif;font-size:1.9rem;font-weight:800;letter-spacing:-.6px;
  color:#fff;margin:0 0 4px;
}
.grp-sub{font-size:.83rem;color:rgba(255,255,255,.72);margin:0;max-width:56ch;line-height:1.5;}
.grp-faixa-acoes{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.grp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;padding:0 16px;border-radius:12px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);color:#fff;
  transition:background .14s,border-color .14s;
}
.grp-btn:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.44);}
.grp-btn-forte{background:#fff;border-color:#fff;color:#312e81;}
.grp-btn-forte:hover{background:#eef2ff;border-color:#eef2ff;}
.grp-btn-ico{width:40px;padding:0;}

/* ── O corpo ─────────────────────────────────────────────────────────── */
.grp-corpo{flex:1;min-height:0;overflow-y:auto;padding:22px 28px 40px;}

.grp-kpis{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:20px;}
.grp-kpi{display:flex;align-items:baseline;gap:7px;}
/* Inter, e não Syne: a fonte de display é desenhada para título e deixa os
   algarismos com peso de mancha — de longe, "1" e "5" viravam dois blocos.
   Número existe para ser lido de relance. */
.grp-kpi b{
  font-family:'Inter',sans-serif;font-size:1.45rem;font-weight:700;
  letter-spacing:-.5px;color:rgba(240,240,240,.94);
}
.grp-kpi span{font-size:.78rem;color:rgba(240,240,240,.5);}

.grp-barra-busca{margin-bottom:18px;}
.grp-busca{
  width:min(360px,100%);padding:10px 14px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  font-family:'Inter',sans-serif;font-size:.83rem;color:rgba(240,240,240,.9);outline:none;
}
.grp-busca:focus{border-color:rgba(99,102,241,.5);background:rgba(99,102,241,.08);}
.grp-busca::placeholder{color:rgba(240,240,240,.35);}

/* ── A grade de cartões ──────────────────────────────────────────────── */
.grp-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}

.grp-card{
  display:flex;flex-direction:column;gap:14px;padding:18px;
  border-radius:16px;background:#15171e;border:1px solid rgba(255,255,255,.08);
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
.grp-card:hover{
  transform:translateY(-2px);border-color:rgba(99,102,241,.32);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.grp-card-cab{display:flex;align-items:center;gap:12px;}
.grp-av{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:rgba(99,102,241,.18);color:#c7d2fe;
  font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:800;
}
.grp-av img{width:100%;height:100%;object-fit:cover;}
.grp-card-id{min-width:0;flex:1;}
.grp-card-id h2{
  font-size:.98rem;font-weight:700;color:rgba(240,240,240,.95);margin:0 0 2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.grp-card-id p{font-size:.74rem;color:rgba(240,240,240,.5);margin:0;}
.grp-selo{
  align-self:flex-start;font-size:.62rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border-radius:20px;
  background:rgba(16,185,129,.16);color:#6ee7b7;
}

/* As iniciais de quem está dentro: o grupo tem cara antes de ser aberto. */
.grp-membros{display:flex;gap:-6px;align-items:center;}
.grp-mini{
  width:26px;height:26px;border-radius:50%;margin-right:-6px;
  display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:700;
  background:rgba(99,102,241,.22);color:#c7d2fe;border:2px solid #15171e;
}
.grp-mini-n{background:rgba(255,255,255,.08);color:rgba(240,240,240,.6);}

.grp-acoes{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;}
.grp-acao{
  padding:8px 12px;border-radius:10px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.75rem;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  color:rgba(240,240,240,.78);transition:background .14s,color .14s,border-color .14s;
}
.grp-acao:hover{background:rgba(255,255,255,.1);color:#fff;}
.grp-acao-forte{background:rgba(99,102,241,.22);border-color:rgba(99,102,241,.4);color:#c7d2fe;}
.grp-acao-forte:hover{background:rgba(99,102,241,.34);color:#fff;}

/* ── Vazio e espera ──────────────────────────────────────────────────── */
.grp-vazio{
  grid-column:1/-1;text-align:center;padding:48px 20px;max-width:52ch;margin:0 auto;
}
.grp-vazio-ico{font-size:2.4rem;margin-bottom:10px;}
.grp-vazio h2{font-size:1.1rem;font-weight:700;color:rgba(240,240,240,.9);margin:0 0 8px;}
.grp-vazio p{font-size:.84rem;line-height:1.6;color:rgba(240,240,240,.55);margin:0 0 18px;}
.grp-nada{grid-column:1/-1;font-size:.84rem;color:rgba(240,240,240,.5);padding:20px 2px;}
.grp-skel{
  height:150px;border-radius:16px;background:rgba(255,255,255,.05);
  animation:grpPulsa 1.1s ease-in-out infinite;
}
@keyframes grpPulsa{0%,100%{opacity:.5}50%{opacity:.85}}

/* ═══════════════════════════════════════════════════════════════════════
   TEMA CLARO
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] #grupos-view{background:#f4f8fd;}
html[data-theme="light"] .grp-faixa{
  background:
    radial-gradient(620px 120px at 82% -40%,rgba(159,220,255,.4),transparent 70%),
    linear-gradient(105deg,#155ab7 0%,#1a63c8 66%,#58a7f6 100%);
  border-bottom-color:rgba(11,69,145,.24);
}
html[data-theme="light"] .grp-kpi b{color:#12263f;}
html[data-theme="light"] .grp-kpi span{color:#6b8099;}
html[data-theme="light"] .grp-busca{
  background:#fff;border-color:#dbe7f7;color:#12263f;
}
html[data-theme="light"] .grp-busca::placeholder{color:#8ba0b4;}
html[data-theme="light"] .grp-busca:focus{border-color:#2b6fe0;background:#fff;}
html[data-theme="light"] .grp-card{
  background:#fff;border-color:#e2ebf7;box-shadow:0 2px 8px rgba(20,60,110,.05);
}
html[data-theme="light"] .grp-card:hover{
  border-color:#bcd6f5;box-shadow:0 16px 40px rgba(20,60,110,.14);
}
html[data-theme="light"] .grp-av{background:#e8f1fe;color:#1d5fd0;}
html[data-theme="light"] .grp-card-id h2{color:#12263f;}
html[data-theme="light"] .grp-card-id p{color:#6b8099;}
html[data-theme="light"] .grp-selo{background:#e4f7ef;color:#0f9d6e;}
html[data-theme="light"] .grp-mini{background:#e8f1fe;color:#1d5fd0;border-color:#fff;}
html[data-theme="light"] .grp-mini-n{background:#eef4fb;color:#5b7590;}
html[data-theme="light"] .grp-acao{background:#f2f7fc;border-color:#dbe7f7;color:#3f6079;}
html[data-theme="light"] .grp-acao:hover{background:#e5eefa;color:#12509f;}
html[data-theme="light"] .grp-acao-forte{background:#e8f1fe;border-color:#bcd6f5;color:#1d5fd0;}
html[data-theme="light"] .grp-acao-forte:hover{background:#d9e9fd;color:#12509f;}
html[data-theme="light"] .grp-vazio h2{color:#12263f;}
html[data-theme="light"] .grp-vazio p,
html[data-theme="light"] .grp-nada{color:#6b8099;}
html[data-theme="light"] .grp-skel{background:#e9f0f8;}

@media (max-width:640px){
  .grp-faixa{padding:18px 16px 16px;flex-direction:column;gap:12px;}
  .grp-titulo{font-size:1.45rem;}
  .grp-corpo{padding:16px 16px 32px;}
  .grp-grade{grid-template-columns:1fr;}
}