/*
  Identidad: un sello de lacre, no una consola.

  Quien usa esto no es un técnico: es alguien que administra grupos desde
  el teléfono. El sello es el elemento que sostiene toda la app — grande y
  abierto mientras se escanea el código, cerrado y pequeño en la cabecera
  cuando ya está vinculado, y estampado en miniatura sobre cada grupo
  protegido. Todo lo demás se mantiene callado para que ese gesto se lea.

  Marca: sistema visual de Academia Indra (heathook/design-system/).
  Argyra mantiene el modo OSCURO por defecto: los tokens de abajo son los
  valores oscuros del sistema, con los nombres internos de Argyra
  (--ink, --panel, --brass, --jade, --clay…) para no tocar el resto del
  archivo. Acento índigo #8b93ff; Chivo en títulos, Chivo Mono en
  etiquetas, Inter en el texto.
*/

:root{
  /* Superficies — valores oscuros del sistema Academia Indra */
  --ink:#0b0e14;          /* fondo de página        (v2-canvas oscuro) */
  --panel:#131822;        /* tarjetas               (v2-surface oscuro) */
  --panel-2:#1a2030;      /* segundo nivel          (v2-surface-2 oscuro) */
  --line:rgba(140,170,255,0.13);   /* divisiones    (v2-border oscuro) */
  --parchment:#eef1f6;    /* texto principal        (v2-text oscuro) */
  --muted:#a4aec0;        /* texto secundario       (v2-text-soft oscuro) */

  /* Acento índigo (antes azul #0D6EFD) */
  --brass:#8b93ff;                  /* primario     (v2-primary oscuro) */
  --brass-bright:#a6acff;           /* hover        (v2-primary-hover oscuro) */
  --brass-dim:#4f46e5;              /* extremo profundo del sello de lacre */
  --ring:rgba(139,147,255,0.42);    /* aro de foco / trazos del sello */

  --steel:#6c7789;                  /* gris apagado (v2-text-faint oscuro) */
  --steel-soft:rgba(140,170,255,0.10);

  /* Semánticos */
  --jade:#3ddc97;                   /* éxito / activo (v2-ok oscuro) */
  --jade-soft:rgba(61,220,151,0.14);
  --clay:#ff5c5c;                   /* peligro / error (v2-danger oscuro) */
  --clay-soft:rgba(255,92,92,0.14);

  --font-display:"Chivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:"Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"Chivo Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-sm:8px;
  --r-md:14px;
  --r-lg:20px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }

body{
  background:
    radial-gradient(circle at 50% -10%, rgba(139,147,255,0.10), transparent 55%),
    var(--ink);
  background-attachment:fixed;
  color:var(--parchment);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding:0 20px calc(40px + env(safe-area-inset-bottom));
}

.shell{ width:100%; max-width:460px; margin:0 auto; }
.shell.cc-wide{ max-width:760px; }
.screen{ display:none; }
.screen.is-active{ display:block; animation:rise 380ms cubic-bezier(.2,.8,.3,1) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---------- tipografía ---------- */

.eyebrow{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}
h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(26px, 7vw, 32px);
  line-height:1.15;
  letter-spacing:-0.015em;
  margin:8px 0 12px;
}
h2{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  margin:0;
}
.lead{ color:var(--muted); margin:0 0 26px; }
.small{ font-size:13px; color:var(--muted); margin:0; }

/* ---------- el sello ---------- */

.seal{
  position:relative;
  width:min(248px, 68vw);
  aspect-ratio:1;
  margin:26px auto 28px;
}
.seal-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--ring); }
.seal-ring.r2{ inset:9px; border-color:rgba(139,147,255,0.18); }
.seal-ring.r3{ inset:19px; border-color:rgba(139,147,255,0.45); border-style:dashed; }

.seal-face{
  position:absolute; inset:30px;
  border-radius:50%;
  background:var(--panel);
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 0 1px rgba(238,241,246,0.06), 0 26px 60px -22px rgba(0,0,0,0.7);
  transition: background 520ms ease, transform 520ms cubic-bezier(.2,1.4,.4,1);
}
.seal-face.is-sealed{
  background: radial-gradient(circle at 38% 28%, var(--brass-bright), var(--brass-dim) 72%);
  transform:scale(1.03);
}
.seal-face.is-sealed .qr,
.seal-face.is-sealed .spinner,
.seal-face.is-sealed .glyph{ display:none; }
.seal-face.is-sealed .check{ display:block; }

.qr{ width:78%; border-radius:8px; background:#fff; padding:10px; display:none; }
.check{ width:54px; height:54px; display:none; animation:pop 480ms cubic-bezier(.2,1.6,.4,1); }
@keyframes pop{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }

.glyph{
  width:60%;
  height:60%;
  object-fit:contain;
  user-select:none;
  filter:drop-shadow(0 4px 18px rgba(139,147,255,0.25));
}

.spinner{
  width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(238,241,246,0.14);
  border-top-color:var(--brass);
  animation:spin 900ms linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- reglas de la bienvenida ---------- */

.rules{ list-style:none; padding:0; margin:0 0 26px; }
.rules li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  padding:14px 0;
  border-top:1px solid var(--line);
}
.rules li:last-child{ border-bottom:1px solid var(--line); }
.rules .mark{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--brass);
  padding-top:3px;
}
.rules .cause{ display:block; font-weight:500; }
.rules .effect{ display:block; font-size:13.5px; color:var(--muted); margin-top:2px; }

.credit{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.05em;
  color:var(--muted);
  text-align:center;
  margin:22px 0 0;
}
.credit strong{ color:var(--brass-bright); font-weight:500; }
.credit a{ color:var(--brass-bright); text-decoration:none; }
.credit a:hover{ text-decoration:underline; }
.small a{ color:var(--brass-bright); text-decoration:none; }
.small a:hover{ text-decoration:underline; }
.brand-logo{ display:block; height:34px; width:auto; margin:14px auto 0; opacity:.92; }

/* ---------- botones ---------- */

.btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  color:#fff;
  background:var(--brass);
  border:none;
  border-radius:var(--r-md);
  padding:15px 22px;
  width:100%;
  cursor:pointer;
  transition:background 150ms ease, transform 120ms ease;
}
.btn:hover{ background:var(--brass-bright); }
.btn:active{ transform:scale(.985); }
.btn:disabled{ opacity:.5; cursor:default; }

.btn-ghost{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line);
  font-weight:500;
  font-size:13.5px;
  padding:11px 16px;
}
.btn-ghost:hover{ background:rgba(238,241,246,0.04); color:var(--parchment); }

.btn-link{
  background:none; border:none; padding:8px;
  color:var(--muted); font-family:var(--font-body); font-size:13.5px;
  cursor:pointer; width:auto; display:block; margin:14px auto 0;
}
.btn-link:hover{ color:var(--parchment); }

:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:4px; }

/* ---------- cabecera del panel ---------- */

.topbar{
  display:flex; align-items:center; gap:12px;
  padding:24px 0 18px;
  position:sticky; top:0;
  background:linear-gradient(var(--ink) 72%, transparent);
  z-index:20;
}
.emblem{
  width:38px; height:38px; flex:none;
  border-radius:50%;
  background:radial-gradient(circle at 36% 28%, var(--panel-2), var(--ink) 72%);
  display:grid; place-items:center;
  padding:6px;
  box-shadow:0 0 0 1px var(--ring), 0 0 22px -6px var(--brass);
}
.emblem img{ width:100%; height:100%; object-fit:contain; display:block; }
.topbar .who{ flex:1; min-width:0; }
.topbar .hello{ font-family:var(--font-display); font-size:17px; line-height:1.2; }
.topbar .phone{
  font-family:var(--font-mono); font-size:11.5px; color:var(--muted);
  display:flex; align-items:center; gap:6px;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--jade); flex:none; }
.dot.warn{ background:var(--brass); animation:blink 1.4s ease-in-out infinite; }
.dot.off{ background:var(--clay); }
@keyframes blink{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.menu-wrap{ position:relative; flex:none; }
.menu-btn{
  width:38px; height:38px; border-radius:50%;
  background:transparent; border:1px solid var(--line);
  color:var(--parchment); font-size:17px; cursor:pointer;
  line-height:1;
}
.menu-btn:hover{ background:var(--panel-2); }
.menu{
  position:absolute; right:0; top:46px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:6px;
  min-width:206px;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.8);
  display:none;
}
.menu.is-open{ display:block; animation:rise 160ms ease both; }
.menu button{
  display:block; width:100%; text-align:left;
  background:none; border:none; color:var(--parchment);
  font-family:var(--font-body); font-size:14px;
  padding:10px 12px; border-radius:var(--r-sm); cursor:pointer;
}
.menu button:hover{ background:rgba(238,241,246,0.06); }
.menu button.danger{ color:#e79c93; }
.menu hr{ border:none; border-top:1px solid var(--line); margin:6px 4px; }

/* ---------- resumen ---------- */

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
.stat{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:12px 10px;
  text-align:center;
}
.stat b{ display:block; font-family:var(--font-display); font-size:22px; font-weight:600; line-height:1.1; }
.stat span{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.stat.on b{ color:var(--jade); }

/* ---------- buscador ---------- */

.search{ position:relative; margin-bottom:22px; }
.search input{
  width:100%;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  color:var(--parchment);
  font-family:var(--font-body); font-size:15px;
  padding:13px 40px 13px 40px;
}
.search input::placeholder{ color:var(--muted); }
.search input:focus{ border-color:var(--ring); outline:none; }
.search .icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--muted); pointer-events:none;
}
.search .clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--muted); font-size:18px;
  cursor:pointer; padding:6px 10px; display:none;
}
.search.has-text .clear{ display:block; }

/* ---------- secciones de grupos ---------- */

.section{ margin-bottom:30px; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
.section-note{ font-size:12.5px; color:var(--muted); margin:0 0 12px; }
.count{ font-family:var(--font-mono); font-size:11px; color:var(--brass); }

.group{
  display:flex; align-items:center; gap:12px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:13px 14px;
  margin-bottom:8px;
  transition:border-color 200ms ease, background 200ms ease;
}
.group.is-on{ border-color:rgba(76,175,125,.34); background:linear-gradient(var(--panel), rgba(76,175,125,.05)); }
.group.is-locked{ opacity:.72; }

.group .body{ flex:1; min-width:0; }
.group .name{
  font-size:14.5px; font-weight:500;
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.group .meta{
  font-family:var(--font-mono); font-size:11px; color:var(--muted);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:3px;
}
.tag{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 6px; border-radius:5px;
}
.tag.owner{ color:var(--brass-bright); background:rgba(139,147,255,.12); }
.tag.unknown{ color:var(--steel); background:var(--steel-soft); }
.tag.alert{ color:#e79c93; background:var(--clay-soft); }

/* ---------- hub de cuenta: "Tus WhatsApp" ---------- */

#listWhatsapps .group{ flex-wrap:wrap; }
#listWhatsapps .group .body{ flex-basis:100%; margin-bottom:8px; }
@media (min-width:480px){
  #listWhatsapps .group .body{ flex-basis:auto; margin-bottom:0; }
}
#listWhatsapps .group .btn-ghost{ flex:1 1 auto; }

/* ---------- formulario de cuenta (usuario y contraseña) ---------- */

#screen-account .add-admin input{ margin-bottom:10px; }
#screen-account .add-admin input:last-child{ margin-bottom:0; }

/* interruptor */
.switch{ position:relative; width:50px; height:29px; flex:none; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2; }
.switch .track{
  position:absolute; inset:0; border-radius:999px;
  background:var(--panel-2); border:1px solid var(--line);
  transition:background 220ms ease, border-color 220ms ease;
}
.switch .knob{
  position:absolute; top:4px; left:4px;
  width:21px; height:21px; border-radius:50%;
  background:var(--muted);
  transition:transform 240ms cubic-bezier(.3,1.5,.5,1), background 220ms ease;
}
.switch input:checked ~ .track{ background:var(--jade-soft); border-color:rgba(76,175,125,.5); }
.switch input:checked ~ .knob{ transform:translateX(21px); background:var(--jade); }
.switch input:focus-visible ~ .track{ outline:2px solid var(--brass); outline-offset:2px; }
.switch input:disabled{ cursor:not-allowed; }
.switch.is-busy .knob{ animation:blink .9s ease-in-out infinite; }

.locked-note{
  font-size:11.5px; color:var(--muted); text-align:right;
  max-width:112px; flex:none; line-height:1.35;
}

/* ---------- estados vacíos y avisos ---------- */

.empty{
  border:1px dashed var(--line);
  border-radius:var(--r-md);
  padding:22px 18px;
  text-align:center;
  color:var(--muted);
  font-size:13.5px;
}
.skeleton{
  height:57px; border-radius:var(--r-md);
  background:linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%);
  background-size:220% 100%;
  animation:sweep 1.3s linear infinite;
  margin-bottom:8px;
}
@keyframes sweep{ to{ background-position:-220% 0; } }

.banner{
  border-radius:var(--r-md);
  padding:12px 14px;
  font-size:13px;
  margin-bottom:16px;
  border:1px solid;
}
.banner.warn{ background:rgba(139,147,255,.1); border-color:var(--ring); color:#c9ccff; }
.banner.error{ background:var(--clay-soft); border-color:rgba(198,90,78,.4); color:#e79c93; }

/* ---------- aviso flotante ---------- */

.toast-stack{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(20px + env(safe-area-inset-bottom));
  width:min(420px, calc(100% - 40px));
  display:flex; flex-direction:column; gap:8px;
  z-index:60; pointer-events:none;
}
.toast{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-left:3px solid var(--brass);
  border-radius:var(--r-sm);
  padding:12px 14px;
  font-size:13.5px;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.8);
  animation:rise 220ms ease both;
}
.toast.ok{ border-left-color:var(--jade); }
.toast.bad{ border-left-color:var(--clay); }

/* ---------- panel deslizante ---------- */

.sheet-backdrop{
  position:fixed; inset:0; background:rgba(8,8,12,.66);
  display:none; z-index:70;
}
.sheet-backdrop.is-open{ display:block; }
.sheet{
  position:fixed; left:0; right:0; bottom:0;
  max-height:78vh; overflow-y:auto;
  background:var(--panel);
  border-top:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:8px 20px calc(26px + env(safe-area-inset-bottom));
  z-index:71;
  transform:translateY(100%);
  visibility:hidden;
  transition:transform 300ms cubic-bezier(.2,.9,.3,1), visibility 300ms;
}
.sheet.is-open{ transform:none; visibility:visible; }
.sheet .grabber{ width:38px; height:4px; border-radius:999px; background:var(--line); margin:8px auto 18px; }
.sheet h3{ font-family:var(--font-display); font-size:19px; font-weight:600; margin:0 0 4px; }

.event{
  display:grid; grid-template-columns:auto 1fr; gap:11px;
  padding:12px 0; border-top:1px solid var(--line);
}
.event .when{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); padding-top:3px; white-space:nowrap; }
.event .what{ font-size:13.5px; }
.event .who{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-top:3px; }

.sheet-rules{ margin:14px 0 0; }
.sheet-rules li{ border-top:1px solid var(--line); padding:12px 0; }

/* ---------- flotantes: comunidad (noticias y líderes en vivo) ---------- */

.fab-comunidad{
  position:fixed; right:16px; bottom:calc(22px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px; z-index:55;
}
.fab-btn{
  position:relative;
  width:52px; height:52px; border-radius:50%;
  background:var(--panel-2); border:1px solid var(--line);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.75);
  display:flex; align-items:center; justify-content:center;
  font-size:21px; line-height:1; cursor:pointer;
  transition:transform 160ms ease, border-color 160ms ease;
}
.fab-btn:hover{ transform:translateY(-2px); }
.fab-btn:active{ transform:translateY(0) scale(.96); }
.fab-btn--noticias{ border-color:rgba(139,147,255,.45); }
.fab-btn--lideres{ border-color:rgba(156,163,175,.4); }
.fab-btn__dot{
  position:absolute; top:3px; right:3px;
  width:11px; height:11px; border-radius:50%;
  background:var(--brass);
  box-shadow:0 0 0 2px var(--panel-2);
  animation:fabPulse 1.8s ease-in-out infinite;
}
@keyframes fabPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(139,147,255,.55), 0 0 0 2px var(--panel-2); }
  50%{ box-shadow:0 0 0 6px rgba(139,147,255,0), 0 0 0 2px var(--panel-2); }
}
@media (prefers-reduced-motion: reduce){ .fab-btn__dot{ animation:none; } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ================== Argyra Control Center ================== */

.cc-tabs{
  display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:2px; margin-bottom:22px; border-bottom:1px solid var(--line);
}
.cc-tab{
  flex:none; background:none; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:10px 14px; border-bottom:2px solid transparent;
  transition:color 150ms ease, border-color 150ms ease;
}
.cc-tab:hover{ color:var(--parchment); }
.cc-tab.is-active{ color:var(--brass); border-bottom-color:var(--brass); }

.link-tab{
  flex:none; background:none; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:10px 14px; border-bottom:2px solid transparent;
  transition:color 150ms ease, border-color 150ms ease;
}
.link-tab:hover{ color:var(--parchment); }
.link-tab.is-active{ color:var(--brass); border-bottom-color:var(--brass); }

.cc-view{ display:none; animation:rise 260ms ease both; }
.cc-view.is-active{ display:block; }

.cc-grid6{ grid-template-columns:repeat(3,1fr); }
@media (min-width:600px){ .cc-grid6{ grid-template-columns:repeat(6,1fr); } }

.cc-select{
  flex:1; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--parchment); font-family:var(--font-body); font-size:14.5px; padding:11px 12px;
}

.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:18px; margin-bottom:14px; }

/* ================== Comunidad (noticias y equipo de academiaindra.com) ================== */

.noticia-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; margin-bottom:12px; }
.noticia-card__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.noticia-card__fecha{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); white-space:nowrap; }
.noticia-card h3{ margin:0 0 6px; font-size:14.5px; font-family:var(--font-display); font-weight:600; }
.noticia-card p{ margin:0; font-size:13.5px; color:var(--muted); white-space:pre-wrap; }
.noticia-card a{ display:inline-block; margin-top:10px; font-size:12.5px; color:var(--brass-bright); text-decoration:none; }
.noticia-card a:hover{ text-decoration:underline; }

.noticia-badge{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted);
}
.noticia-badge--importante{ color:#e79c93; border-color:rgba(198,90,78,.4); }
.noticia-badge--evento{ color:var(--brass-bright); border-color:var(--ring); }
.noticia-badge--clase{ color:var(--jade); border-color:rgba(76,175,125,.4); }

.equipo-mini-grid{ display:flex; flex-direction:column; }
.equipo-mini-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.equipo-mini-row:first-child{ border-top:none; padding-top:0; }
.equipo-mini-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid var(--line); background:var(--panel-2); }
.equipo-mini-row .who{ font-size:13.5px; }
.equipo-mini-row .lvl{ display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-top:2px; }

/* pantalla "modo de vinculación": elegir cuenta vs. un solo WhatsApp */
.choice-cards{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.choice-card{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px; font-family:var(--font-body);
  transition:border-color 200ms ease, background 200ms ease;
}
.choice-card:hover{ border-color:var(--brass); background:linear-gradient(var(--panel), rgba(139,147,255,.06)); }
.choice-card h2{ font-family:var(--font-display); font-size:17px; font-weight:600; margin:0 0 6px; color:var(--parchment); }
.choice-card p{ font-size:13px; line-height:1.5; color:var(--muted); margin:0; }
.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* explorador de grupos: tarjeta enriquecida */
.gcard{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:15px; margin-bottom:10px; }
.gcard.is-on{ border-color:rgba(76,175,125,.34); }
.gcard .ghead{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.gcard .name{ font-family:var(--font-display); font-size:16px; font-weight:600; }
.gcard .desc{ font-size:12.5px; color:var(--muted); margin:4px 0 10px; max-width:90%; }
.gcard .meta-row{ display:flex; flex-wrap:wrap; gap:6px 14px; font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-bottom:12px; }
.gcard .meta-row b{ color:var(--parchment); font-weight:500; }
.gcard .gactions{ display:flex; gap:8px; flex-wrap:wrap; }
.gcard .gactions button{
  font-family:var(--font-body); font-size:12.5px; font-weight:500; padding:7px 12px;
  border-radius:7px; border:1px solid var(--line); background:transparent; color:var(--parchment); cursor:pointer;
}
.gcard .gactions button:hover{ background:var(--panel-2); }
.gcard .gactions button.primary{ background:var(--brass); color:#fff; border-color:var(--brass); font-weight:600; }
.gcard .gactions button.danger{ color:#e79c93; border-color:rgba(198,90,78,.4); }

/* administradores */
.admin-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-top:1px solid var(--line); }
.admin-row .who{ font-family:var(--font-mono); font-size:13px; }
.admin-row .lvl{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-left:8px; }
.add-admin{ display:flex; gap:8px; margin-top:14px; }
.add-admin input{
  flex:1; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--parchment); font-family:var(--font-mono); font-size:14px; padding:10px 12px;
}

/* estado del grupo, ahora como clase en vez de estilos sueltos */
.estado-pill{
  flex:none; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 8px; border-radius:5px;
}
.estado-pill.on{ color:var(--jade); background:var(--jade-soft); }
.estado-pill.off{ color:var(--muted); background:rgba(141,138,164,.12); }

.gcard .gactions button:disabled{ opacity:.6; cursor:default; }
.admin-row button{
  flex:none; background:none; border:1px solid var(--line); color:var(--parchment);
  font-family:var(--font-body); font-size:12px; padding:6px 11px; border-radius:7px; cursor:pointer;
}
.admin-row button:hover{ background:var(--panel-2); }
.admin-row button.kick-admin{ color:#e79c93; border-color:rgba(198,90,78,.4); }
.admin-row button.ok-admin{ color:var(--jade); border-color:rgba(76,175,125,.4); }
.admin-row button:disabled{ opacity:.6; cursor:default; }