/* ========================================
   Active Users — "N usuarios en línea ahora"
   Dos ubicaciones del mismo dato (presence#show):
     · Desktop → en el sidebar  (.active-users.-sidebar, frame #active_users)
     · Mobile  → banda oscura bajo la topbar (.active-users.-band, #active_users_band)
   Si no hay nadie activo el frame queda vacío y no ocupa lugar.
   ======================================== */

/* Los frames son contenedores de bloque sin estilo propio (para no dejar una
   banda colgando cuando están vacíos). */
.active-users-frame,
.active-users-band-frame {
  display: block;
}

/* La banda (mobile) vive DENTRO del .topbar como segunda fila → comparte su
   fondo frosted, su scrim y su sombra (sin superficie aparte = sin seam).
   position:relative + z-index la pone por encima del ::before scrim del topbar. */
.active-users-band-frame {
  position: relative;
  z-index: 1;
}

/* La banda es solo para mobile: en desktop se usa el sidebar. */
@media (min-width: 720px) {
  .active-users-band-frame { display: none; }
}

/* Skeleton de carga: misma altura/layout que la banda real → no hay salto
   cuando el frame lazy resuelve. Clase propia (no .active-users) para no contar
   como presencia real en los tests/queries. */
.au-skeleton {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2px var(--content-pad) 9px;
}
.au-skeleton__avs { margin-left: auto; display: flex; align-items: center; }
.au-skeleton__avs > .active-users__skl.-av + .active-users__skl.-av { margin-left: -9px; }
.active-users__skl {
  display: inline-block;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 25%, var(--line-strong) 37%, var(--line) 63%);
  background-size: 400% 100%;
  animation: active-users-skl 1.4s ease infinite;
}
.active-users__skl.-text { width: 84px; height: 11px; border-radius: 4px; }
.active-users__skl.-av { width: 22px; height: 22px; border-radius: 50%; }
@keyframes active-users-skl { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .active-users__skl { animation: none; } }

.active-users__inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Punto verde "en vivo" pulsante. */
.active-users__dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 var(--green-glow);
  animation: active-users-pulse 2s ease-out infinite;
}

@keyframes active-users-pulse {
  0%   { box-shadow: 0 0 0 0 var(--green-glow); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .active-users__dot { animation: none; }
}

.active-users__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.active-users__label > strong {
  color: var(--ink-bright);
  font-weight: 600;
}

/* Pila de avatares superpuestos. */
.active-users__stack {
  display: flex;
  align-items: center;
}

.active-users__avatar {
  display: inline-flex;
}

.active-users__avatar + .active-users__avatar,
.active-users__stack > .active-users__more {
  margin-left: -9px;
}

.active-users__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--card-2);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ─────────────────────────────────────────
   Variante SIDEBAR (desktop) — discreta, al pie (después de Cuenta).
   ───────────────────────────────────────── */
.active-users-frame {
  margin: 10px 14px 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.active-users.-sidebar .active-users__inner {
  flex-wrap: wrap;
  gap: 6px;
}

/* Más sutil que antes: texto chico y gris, sin competir con el branding. */
.active-users.-sidebar .active-users__label {
  font-size: 10px;
  color: var(--muted);
}
.active-users.-sidebar .active-users__label > strong { color: var(--ink-soft); }
.active-users.-sidebar .active-users__dot { width: 6px; height: 6px; }

/* El aro de fondo (color del sidebar) separa los avatares apilados. */
.active-users.-sidebar .active-users__avatar .avatar,
.active-users.-sidebar .active-users__more {
  box-shadow: 0 0 0 2px var(--bg);
}

/* Sidebar colapsado (rail): solo el punto, centrado. */
.sidebar.-collapsed .active-users-frame { margin-left: 0; margin-right: 0; }
.sidebar.-collapsed .active-users__inner { justify-content: center; }
.sidebar.-collapsed .active-users__label,
.sidebar.-collapsed .active-users__stack { display: none; }

/* ─────────────────────────────────────────
   Variante BANDA (mobile) — oscura para leerse sobre el hero claro
   ───────────────────────────────────────── */
.active-users.-band {
  display: block;
  width: 100%;
  /* Sin fondo propio: hereda la superficie frosted del topbar que la contiene. */
}

.active-users.-band .active-users__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2px var(--content-pad) 9px;
}

/* Arriba de todo (topbar transparente sobre el hero): sombra de texto para que
   la banda se lea sin necesidad de un fondo opaco propio. */
.topbar.-at-top .active-users__label,
.topbar.-at-top .active-users__label > strong { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }

/* La pila se va a la derecha de la banda. */
.active-users.-band .active-users__stack { margin-left: auto; }

/* El aro de fondo de los avatares matchea el fondo oscuro de la banda. */
.active-users.-band .active-users__avatar .avatar,
.active-users.-band .active-users__more {
  box-shadow: 0 0 0 2px var(--bg-2);
}

@media (max-width: 719px) {
  .active-users.-band .active-users__inner { padding: 7px 12px; gap: 8px; }
}