/* Painel do captador de demandas. Herda base de admin.css + lembretes.css
   (switch/track, chip, section-head, hint, status, toast, botoes). Aqui so o
   que e especifico dos cards de grupo. */

.grupos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.grupo-card {
  position: relative;
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(17, 17, 17, 0.1));
  border-radius: 14px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.grupo-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF4583, #9833ED);
  opacity: 0;
  transition: opacity 0.2s;
}
.grupo-card.ligado::before { opacity: 1; }

.grupo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.grupo-titulo { min-width: 0; }
.grupo-titulo h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink, #111);
  margin: 0 0 4px;
  word-break: break-word;
}

.grupo-jid {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--muted, #737373);
  word-break: break-all;
}

.grupo-meta {
  font-size: 12px;
  color: var(--muted, #737373);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-soft, rgba(17, 17, 17, 0.06));
}

.grupo-card .campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.grupo-card .campo label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted, #737373);
}
.grupo-card select,
.grupo-card .campo input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line, rgba(17, 17, 17, 0.14));
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  background: var(--surface, #fff);
  color: var(--ink, #111);
  outline: none;
}
.grupo-card select:focus,
.grupo-card .campo input[type="text"]:focus {
  border-color: var(--purple, #9833ED);
}

.grupo-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.grupo-foot .salvo {
  font-size: 12px;
  color: #1B5E20;
  opacity: 0;
  transition: opacity 0.2s;
}
.grupo-foot .salvo.mostra { opacity: 1; }

.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}