/* ==========================================================================
   MACRO REBORN — COMUNIDAD + RANKING (página combinada)
   Usa los tokens de css/inicio.css (:root, .navbar, .pie-footer, etc), pero
   los REDEFINE acá abajo con la paleta púrpura de la foto de referencia.
   Como css/comunidad.css, css/insignias.css y css/buscador.css ya pintan
   todo con var(--bg-panel), var(--clasico-borde), var(--text-main), etc,
   con solo cambiar el VALOR de esas variables toda la página (navbar,
   footer, tarjetas de comunidad, buscador...) adopta el mismo look, sin
   tocar ni un archivo de esos.
   El botón de modo claro/oscuro del sitio sigue funcionando acá: :root
   pinta el oscuro (paleta de la foto de referencia) y "html[data-tema=
   claro]" pinta su propia variante clara, ambas dentro de la misma
   identidad púrpura.
   ========================================================================== */

/* Los tokens visuales pertenecen a MRTheme / css/inicio.css.
   Esta página ya no redefine --bg-*, --text-* ni --gold-* localmente,
   evitando recursiones y desincronización con las paletas globales. */

.mr-root {
  background: var(--bg-base);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.5;
}

/* ==========================================================================
   BLOQUE "HERO" DEL RANKING — mismos tokens de arriba (ya redefinidos a
   púrpura), fusionado visualmente con el resto de la página en vez de
   quedar como una caja aparte con otro fondo.
   ========================================================================== */

.rk-hero {
  --rk-texto: var(--text-main);
  --rk-texto-muted: var(--text-muted);
  --rk-panel: var(--bg-panel);
  --rk-panel-borde: var(--line);
  --rk-subida: var(--green);
  --rk-bajada: var(--danger);
  --rk-sin-cambio: var(--text-muted);

  position: relative;
  overflow: hidden;
  padding: 40px 24px 56px;
  background:
    radial-gradient(ellipse 900px 460px at 50% -10%, rgba(240, 180, 41, 0.16), transparent 60%),
    linear-gradient(160deg, var(--bg-panel-alt) 0%, var(--bg-base) 55%, var(--bg-base) 100%);
}

.rk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, black 40%, transparent 90%);
  pointer-events: none;
}

.rk-encabezado {
  position: relative;
  max-width: 1180px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.rk-titulo {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 34px);
  text-align: center;
  margin: 0;
  color: var(--rk-texto);
  text-shadow: 0 0 22px rgba(240, 180, 41, 0.25);
}

.rk-boton-logros {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text-on-accent);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
  border: none;
  border-radius: 10px;
  padding: 11px 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rk-boton-logros:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(240, 180, 41, 0.3);
}

.rk-boton-logros.rk-activo {
  background: linear-gradient(135deg, var(--cyan), #0ea5e9 70%);
  color: #04263a;
}

/* ---- Buscador ---- */

.rk-buscador-caja {
  position: relative;
  max-width: 440px;
  margin: 0 auto 34px;
}

.rk-buscador {
  display: block;
  width: 100%;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid var(--rk-panel-borde);
  background: rgba(255, 255, 255, 0.05);
  color: var(--rk-texto);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rk-buscador:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.16);
}

.rk-buscador::placeholder {
  color: var(--rk-texto-muted);
}

/* ==========================================================================
   PODIO TOP 6
   ========================================================================== */

.rk-podio6 {
  position: relative;
  max-width: 1180px;
  margin: 0 auto 30px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.rk-podio-card {
  position: relative;
  background: linear-gradient(180deg, var(--rk-panel), #180b31);
  border: 2px solid var(--rk-panel-borde);
  border-radius: 14px;
  padding: 34px 12px 16px;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.rk-podio-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}

.rk-podio-numero {
  position: absolute;
  top: -12px;
  left: 12px;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  border-radius: 8px;
  color: var(--text-on-accent);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.rk-podio-card[data-puesto="2"] .rk-podio-numero,
.rk-podio-card[data-puesto="3"] .rk-podio-numero {
  background: linear-gradient(135deg, var(--podio-plata), #9fb0c9);
}

.rk-podio-card[data-puesto="4"] .rk-podio-numero,
.rk-podio-card[data-puesto="5"] .rk-podio-numero,
.rk-podio-card[data-puesto="6"] .rk-podio-numero {
  background: linear-gradient(135deg, var(--cyan), #6366f1);
  color: #04182b;
}

.rk-podio-card[data-puesto="1"] {
  border-color: var(--gold);
  box-shadow: 0 16px 36px rgba(240, 180, 41, 0.22);
}

.rk-corona {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 26px;
  filter: drop-shadow(0 0 10px rgba(240, 180, 41, 0.6));
}

.rk-podio-avatar {
  width: 84px;
  height: 84px;
  margin: 0 auto 10px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid var(--rk-panel-borde);
  background:
    radial-gradient(circle at 50% 30%, rgba(240, 180, 41, 0.14), transparent 65%),
    var(--bg-deep);
}

.rk-podio-card[data-puesto="1"] .rk-podio-avatar {
  border-color: var(--gold);
}

.rk-podio-avatar .capa-rk {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rk-podio-avatar img:not(.capa-rk) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rk-podio-nombre {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--rk-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 4px;
}

.rk-podio-stat {
  font-size: 12px;
  font-weight: 700;
  color: var(--rk-texto-muted);
  line-height: 1.3;
  margin: 0 0 4px;
}

.rk-delta {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rk-delta.rk-sube { color: var(--rk-subida); }
.rk-delta.rk-baja { color: var(--rk-bajada); }
.rk-delta.rk-neutro { color: var(--rk-sin-cambio); }

/* ==========================================================================
   CUERPO EN 2 COLUMNAS (podio a la izquierda, panel lateral a la
   derecha) — layout nuevo, mismo alto nivel que el video de
   referencia. Con el sitio ya angosto (pantallas chicas) colapsa a
   una sola columna, ver @media más abajo.
   ========================================================================== */

.rk-cuerpo {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}

.rk-columna-podio {
  min-width: 0;
}

.rk-columna-lateral {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 84px;
}

/* ==========================================================================
   RESTO DEL RANKING (puestos 7+), ahora PAGINADO de a 20 (2 filas de
   10) con flechas ▲ / ▼ en vez de mostrar todo en un scroll largo.
   ========================================================================== */

.rk-resto-paginado {
  position: relative;
  max-width: 100%;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rk-flecha {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--rk-panel-borde);
  background: rgba(255, 255, 255, 0.05);
  color: var(--rk-texto);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.rk-flecha:hover:not(:disabled) {
  background: var(--bg-panel-alt);
  border-color: var(--gold-deep);
}

.rk-flecha:disabled {
  opacity: 0.35;
  cursor: default;
}

.rk-lista-resto {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  /* minmax(0, 1fr) en vez de 1fr a secas: sin el "0", cada columna se
     niega a achicarse por debajo del contenido (avatar + texto de la
     tarjeta) y con 10 columnas eso no entra en el ancho disponible al
     lado de la barra lateral -> el grid se desborda por encima de
     ".rk-columna-lateral" (bug visto en PC/laptop, ~980px-1400px). */
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 12px;
}

.rk-mini-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--rk-panel-borde);
  border-radius: 12px;
  padding: 12px 6px 10px;
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.rk-mini-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-deep);
}

/* Antes era un círculo (border-radius:50%). Ahora usa el mismo marco
   cuadrado ornamentado con destellos en las esquinas que el resto de
   los avatares del sitio (ver la misma idea en css/perfil.css,
   .avatar-mini). */
.rk-mini-avatar {
  width: 54px;
  height: 54px;
  margin: 0 auto 8px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid var(--rk-panel-borde);
  box-shadow: inset 0 0 0 2px var(--gold-deep);
  background: var(--bg-deep);
}

.rk-mini-avatar::before,
.rk-mini-avatar::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 35% 35%, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%);
  filter: drop-shadow(0 0 2px rgba(240, 180, 41, .8));
  pointer-events: none;
  z-index: 2;
}
.rk-mini-avatar::before { top: 1px; left: 1px; }
.rk-mini-avatar::after { bottom: 1px; right: 1px; }

.rk-mini-avatar .capa-rk-mini {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rk-mini-avatar img:not(.capa-rk-mini) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rk-mini-nombre {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--rk-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 2px;
}

.rk-mini-puesto {
  font-size: 11px;
  color: var(--rk-texto-muted);
  font-weight: 700;
  margin: 0 0 2px;
}

.rk-mini-stat {
  font-size: 11px;
  color: var(--rk-texto-muted);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 2px;
}

/* ==========================================================================
   BANNER "ÚNETE Y DESAFÍA A LA COMUNIDAD"
   ========================================================================== */

.rk-banner-unite {
  position: relative;
  max-width: 900px;
  margin: 10px auto 0;
  background: linear-gradient(135deg, #4c2a8c, #7b3fb8);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 20px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.rk-banner-unite p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main);
  max-width: 480px;
}

.rk-banner-unite .rk-boton-unite {
  display: inline-block;
  white-space: nowrap;
  background: #ffffff;
  color: #4c2a8c;
  font-weight: 900;
  font-size: 13.5px;
  letter-spacing: 0.3px;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rk-banner-unite .rk-boton-unite:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

/* Se oculta con JS (comunidad-ranking.js) cuando hay sesión iniciada */
.rk-banner-unite.rk-oculto {
  display: none;
}

/* ==========================================================================
   PANEL GENÉRICO (tarjeta base reusada por el panel de pestañas,
   conectados, centro de avatares, tienda y ayuda)
   ========================================================================== */

.cr-panel {
  background: linear-gradient(180deg, var(--bg-panel), #180b31);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}

.cr-titulo-seccion {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 0 0 8px;
  color: var(--text-main);
}

.cr-texto-suave {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 12px;
}

.cr-subtitulo {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin: 16px 0 10px;
}

/* ---- Pestañas General / Moderación / Rangos ---- */

.cr-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.cr-tab {
  flex: 1 1 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cr-tab:hover {
  color: var(--text-main);
}

.cr-tab.cr-tab-activa {
  background: var(--bg-panel-alt);
  border-color: var(--line-hover);
  color: var(--gold-bright);
}

.cr-tab-panel {
  display: none;
}

.cr-tab-panel.cr-tab-panel-activo {
  display: block;
}

.cr-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.cr-stat:last-of-type {
  border-bottom: none;
}

.cr-stat-label {
  color: var(--text-muted);
}

.cr-stat-valor {
  font-weight: 900;
  font-family: var(--font-display);
  color: var(--text-main);
}

.cr-stat-verde {
  color: var(--green);
}

.cr-recien-llegados {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cr-recien-llegados .cr-avatar-chico,
.cr-lista-staff .cr-avatar-chico {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 2px solid var(--line);
  background: var(--bg-deep);
  flex: 0 0 auto;
}

.cr-recien-llegados .cr-avatar-chico img,
.cr-lista-staff .cr-avatar-chico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.cr-recien-llegados .cr-avatar-chico .cr-capa-chica {
  object-fit: contain;
}

.cr-vacio {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 6px 0;
}

/* ---- Moderación ---- */

.cr-lista-staff {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cr-fila-staff {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cr-fila-staff .cr-staff-info {
  min-width: 0;
  flex: 1 1 auto;
}

.cr-fila-staff .cr-staff-nombre {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-fila-staff .cr-staff-rol {
  font-size: 11px;
  color: var(--text-muted);
}

.cr-punto-estado {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text-placeholder);
}

.cr-punto-estado.cr-conectado {
  background: var(--green);
  box-shadow: 0 0 6px rgba(53, 212, 136, 0.6);
}

/* ---- Rangos ---- */

.cr-lista-rangos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cr-fila-rango {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  font-size: 12.5px;
}

.cr-fila-rango .cr-rango-nombre {
  font-weight: 800;
  color: var(--text-main);
}

.cr-fila-rango .cr-rango-rango {
  color: var(--text-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

/* ---- Conectados (panel lateral) ---- */

.cr-panel-titulo {
  font-family: var(--font-display);
  font-size: 14px;
  margin: 0 0 12px;
  color: var(--text-main);
}

.cr-grid-conectados {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 12px;
  padding-right: 2px;
}

.cr-grid-conectados a {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--line);
  background: var(--bg-deep);
}

.cr-grid-conectados img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.cr-grid-conectados .cr-capa-chica {
  object-fit: contain;
}

.cr-buscar-usuarios {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  font-size: 12.5px;
  outline: none;
}

.cr-buscar-usuarios:focus {
  border-color: var(--gold);
}

.cr-panel-conectados .cr-panel-heading { margin-bottom: 10px; }

.cr-panel-conectados .cr-buscar-usuarios {
  margin-bottom: 10px;
}

/* ==========================================================================
   CENTRO DE AVATARES + TIENDA + AYUDA (3 columnas)
   ========================================================================== */

.cr-seccion-media {
  max-width: 1180px;
  margin: 0 auto 40px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: start;
}

.cr-monedas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-family: var(--font-display);
  color: var(--gold-bright);
  background: rgba(240, 180, 41, 0.1);
  border: 1px solid rgba(240, 180, 41, 0.3);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}

.cr-boton-avatares {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
  color: var(--text-on-accent);
  font-weight: 900;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.cr-boton-avatares:hover {
  transform: translateY(-2px);
}

.cr-boton-secundario {
  background: linear-gradient(135deg, var(--cyan), #0ea5e9 70%);
  color: #04263a;
}

/* La tienda y el avatar, uno al lado del otro (o debajo, si no caben). */
.cr-acciones-avatares {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cr-ver-tienda {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--gold-bright);
  text-decoration: none;
}

.cr-ver-tienda:hover {
  text-decoration: underline;
}

.cr-grid-tienda {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.cr-item-tienda {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}

.cr-item-tienda-imagen {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: var(--bg-deep);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cr-item-tienda-imagen img {
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
}

/* La previsualizacion ya es cuadrada y trae su fondo blanco: llena la
   caja entera en vez de flotar al 82 % sobre el fondo oscuro. */
.cr-item-tienda-imagen img.cr-previsualizacion {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.cr-item-tienda-nombre {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-item-tienda-precio {
  font-size: 11px;
  color: var(--gold-bright);
  font-weight: 800;
  margin: 0 0 8px;
}

.cr-item-tienda-boton {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 7px 4px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
  color: var(--text-on-accent);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.cr-item-tienda-boton:hover:not(:disabled) {
  transform: translateY(-2px);
}

.cr-item-tienda-boton:disabled {
  background: var(--bg-panel-alt);
  color: var(--text-muted);
  cursor: default;
}

.cr-item-tienda-boton.cr-comprada {
  background: rgba(53, 212, 136, 0.16);
  color: var(--green);
}

/* ==========================================================================
   FEED "¿QUÉ ESTÁ OCURRIENDO AHORA?"
   ========================================================================== */

.cr-seccion-actividad {
  max-width: 1180px;
  margin: 0 auto 50px;
  padding: 0 24px;
}

.cr-titulo-actividad {
  font-family: var(--font-display);
  font-size: 18px;
  text-align: center;
  margin: 0 0 20px;
  color: var(--text-main);
}

.cr-feed-actividad {
  column-count: 3;
  column-gap: 18px;
}

.cr-feed-item {
  break-inside: avoid;
  margin-bottom: 16px;
  display: flex;
  gap: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.cr-feed-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 2px solid var(--line);
  background: var(--bg-deep);
  flex: 0 0 auto;
}

.cr-feed-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.cr-feed-avatar .cr-capa-chica {
  object-fit: contain;
}

.cr-feed-texto {
  min-width: 0;
}

.cr-feed-texto p {
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.cr-feed-texto strong {
  color: var(--text-main);
}

.cr-feed-hora {
  font-size: 10.5px;
  color: var(--text-placeholder);
}

.nav-links a.activo,
.nav-links a.activa-nav {
  color: var(--gold-bright);
  background: var(--bg-panel-alt);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
  .rk-podio6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rk-cuerpo {
    grid-template-columns: 1fr;
  }

  .rk-columna-lateral {
    position: static;
  }

  .rk-lista-resto {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .cr-seccion-media {
    grid-template-columns: 1fr;
  }

  .cr-feed-actividad {
    column-count: 2;
  }
}

@media (max-width: 620px) {
  .rk-hero {
    padding: 30px 14px 40px;
  }

  .rk-podio6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .rk-lista-resto {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 10px;
  }

  .rk-mini-avatar {
    width: 46px;
    height: 46px;
  }

  .rk-banner-unite {
    flex-direction: column;
    text-align: center;
  }

  .rk-resto-paginado {
    flex-wrap: wrap;
  }

  .cr-grid-conectados {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .cr-feed-actividad {
    column-count: 1;
  }
}

/* Tanda 4 — competición y retención */
.rk-kicker{display:inline-block;font-size:11px;letter-spacing:.16em;font-weight:900;color:var(--cyan);margin-bottom:5px}.rk-subtitulo-hero{margin:7px 0 0;color:var(--rk-texto-muted);font-size:14px;max-width:650px}.rk-acciones-hero{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.rk-mi-posicion{font-size:13px;font-weight:800;color:var(--rk-texto-muted);padding:9px 12px;border:1px solid var(--rk-panel-borde);border-radius:999px;background:rgba(255,255,255,.03)}.rk-modos{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 auto 20px}.rk-modo{border:1px solid var(--rk-panel-borde);background:rgba(255,255,255,.035);color:var(--rk-texto-muted);border-radius:999px;padding:10px 15px;font:inherit;font-weight:800;cursor:pointer}.rk-modo:hover,.rk-modo.activo{color:var(--text-main);border-color:var(--accent);background:var(--warning-bg)}.rk-evento{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1180px;margin:0 auto 28px;padding:18px 20px;border:1px solid var(--line-hover);border-radius:18px;background:linear-gradient(100deg,var(--warning-bg),var(--focus-ring));box-shadow:0 12px 35px rgba(0,0,0,.12)}.rk-evento h2{margin:5px 0 4px;font-size:18px;color:var(--text-main)}.rk-evento p{margin:0;color:var(--rk-texto-muted);font-size:13px}.rk-evento-badge{font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--cyan)}.rk-evento-cta{flex:none;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:900;color:var(--text-on-accent);background:var(--accent-color)}@media (max-width:760px){.rk-evento{align-items:flex-start;flex-direction:column}.rk-acciones-hero{justify-content:flex-start}.rk-subtitulo-hero{font-size:13px}}

/* ======================================================================
   V2026-09-23 — REDISEÑO "COMUNIDAD PURPLE ARCADE"
   Basado en la referencia entregada: composición tipo portal, púrpura
   profundo, bordes luminosos, podio de 3, tablero 4+ y sidebar de datos.
   Mantiene la lógica/API existente.
   ====================================================================== */

body.mr-root {
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 12% 12%, rgba(111, 36, 255, .26), transparent 60%),
    radial-gradient(800px 520px at 88% 24%, rgba(173, 64, 255, .18), transparent 62%),
    radial-gradient(700px 400px at 50% 86%, rgba(88, 0, 176, .15), transparent 60%),
    linear-gradient(180deg, #0d0520 0%, #17082f 52%, #0f061d 100%) !important;
}

body.mr-root::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .42;
  background-image:
    radial-gradient(circle at 8% 22%, rgba(221, 121, 255, .9) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 9%, rgba(255, 188, 92, .8) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 20%, rgba(147, 76, 255, .8) 0 1px, transparent 2px),
    radial-gradient(circle at 49% 7%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 16%, rgba(205, 91, 255, .8) 0 1px, transparent 2px),
    radial-gradient(circle at 79% 10%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 26%, rgba(204, 96, 255, .9) 0 1px, transparent 2px);
  background-size: 240px 180px, 310px 240px, 360px 260px, 280px 230px, 330px 260px, 390px 260px, 420px 300px;
}

/* El contenido va por encima del fondo de estrellas (::before), pero solo
   los bloques de la página: sus secciones y el pie. Lo que los scripts
   cuelgan del body (la ventana de MRModal, el aviso de cuenta suspendida)
   trae su propia posición, y una regla para todo hijo del body se la
   quitaba: la ventana salía al final de la página. Si la página gana otro
   tipo de bloque de contenido, va en esta lista. */
body.mr-root > section,
body.mr-root > footer { position: relative; z-index: 1; }

/* NAVBAR: sin overrides de fondo/color acá — usa la hoja canónica
   navbar-macrojuegos.css, igual que en index.html y el resto del sitio.
   Eso sí, como hijo directo de body.mr-root necesita quedar por encima
   del fondo decorativo (::before) sin perder su position:sticky ni su
   z-index:200 de base (inicio.css) — si no, se scrollea en vez de
   quedarse fija arriba. */
body.mr-root > .navbar { z-index: 200; }

/* HERO */
body.mr-root .rk-hero {
  padding: 40px 24px 72px !important;
  background:
    radial-gradient(720px 380px at 36% 12%, rgba(124,58,237,.22), transparent 70%),
    radial-gradient(620px 420px at 78% 34%, rgba(172,72,255,.16), transparent 68%),
    linear-gradient(180deg, rgba(23,8,47,.78), rgba(16,6,34,.9)) !important;
  border-bottom: 1px solid rgba(118, 67, 206, .42);
}

body.mr-root .rk-hero::before {
  background-image:
    linear-gradient(rgba(173,116,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173,116,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 18% 30%, rgba(188, 92, 255, .13), transparent 22%),
    radial-gradient(circle at 86% 22%, rgba(86, 71, 255, .10), transparent 24%) !important;
  background-size: 40px 40px, 40px 40px, auto, auto;
}

body.mr-root .rk-encabezado {
  max-width: 1400px;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
}

body.mr-root .rk-kicker {
  color: #d9a7ff;
  font-size: 11px;
  letter-spacing: .24em;
}

body.mr-root .rk-titulo {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  text-align: left;
  color: #fbf8ff !important;
  text-shadow: 0 0 28px rgba(186, 118, 255, .16);
}

body.mr-root .rk-subtitulo-hero {
  color: #b8abd2;
  max-width: 720px;
}

body.mr-root .rk-mi-posicion {
  background: rgba(90, 46, 191, .26);
  border-color: rgba(163, 105, 255, .56);
  color: #f1e7ff;
  box-shadow: inset 0 0 18px rgba(137, 75, 255, .1);
}

body.mr-root .rk-boton-logros {
  background: linear-gradient(135deg, #ffca52, #eaa32d 62%, #bb6e0b) !important;
  color: #2c1904 !important;
  box-shadow: 0 7px 24px rgba(241, 174, 49, .25);
}

body.mr-root .rk-evento { display: none; }
body.mr-root .rk-modos { display: none; }
body.mr-root .rk-buscador-caja { max-width: 560px; margin: 0 0 22px auto; }
body.mr-root .rk-buscador {
  background: rgba(29, 13, 64, .82);
  border: 1px solid rgba(129, 84, 219, .6);
  color: #fff;
  box-shadow: inset 0 0 22px rgba(124,58,237,.08);
}

body.mr-root .rk-cuerpo {
  max-width: 1400px;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 22px;
}

/* PODIO TOP 3 */
body.mr-root .rk-podio6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 18px;
  min-height: 310px;
  margin-bottom: 18px;
}

body.mr-root .rk-podio-card {
  min-height: 228px;
  padding: 38px 16px 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(177, 100, 255, .16), transparent 44%),
    linear-gradient(180deg, rgba(31, 14, 69, .98), rgba(17, 6, 36, .98));
  border: 1px solid rgba(128, 75, 214, .65);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(0,0,0,.26);
}

body.mr-root .rk-podio-card[data-puesto="1"] {
  min-height: 270px;
  border: 2px solid #e8b84a;
  background:
    radial-gradient(circle at 50% 4%, rgba(255, 204, 94, .20), transparent 38%),
    linear-gradient(180deg, rgba(75, 38, 104, .96), rgba(45, 22, 61, .98));
  box-shadow: 0 18px 48px rgba(215, 155, 44, .18), inset 0 0 28px rgba(255, 202, 100, .05);
  transform: translateY(0);
}

body.mr-root .rk-podio-card[data-puesto="2"],
body.mr-root .rk-podio-card[data-puesto="3"] { transform: translateY(32px); }

body.mr-root .rk-corona { top: -34px; font-size: 30px; }

body.mr-root .rk-podio-avatar {
  width: 102px;
  height: 102px;
  border-radius: 17px;
  border-color: rgba(185, 146, 255, .65);
  background: linear-gradient(180deg, #3b215f, #160a2e);
  box-shadow: 0 0 0 5px rgba(118, 77, 210, .12), 0 14px 28px rgba(0,0,0,.28);
}

body.mr-root .rk-podio-card[data-puesto="1"] .rk-podio-avatar {
  width: 118px;
  height: 118px;
  border-color: #f5bf49;
  box-shadow: 0 0 0 5px rgba(245,191,73,.13), 0 14px 34px rgba(0,0,0,.3);
}

body.mr-root .rk-podio-numero {
  top: -10px;
  left: 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f7cf63, #e7a928);
  color: #2c1903;
}

body.mr-root .rk-podio-card[data-puesto="2"] .rk-podio-numero,
body.mr-root .rk-podio-card[data-puesto="3"] .rk-podio-numero {
  background: linear-gradient(180deg, #d8d1f4, #8e84b4);
  color: #282037;
}

body.mr-root .rk-podio-nombre { color: #fff !important; font-size: 14px; }
body.mr-root .rk-podio-stat { color: #b9acd7; }
body.mr-root .rk-delta.rk-sube { color: #4be59f; }
body.mr-root .rk-delta.rk-baja { color: #ff6f9d; }

/* TABLERO CENTRAL */
body.mr-root .rk-ranking-board {
  margin-top: 14px;
  padding: 16px 14px 12px;
  background: linear-gradient(180deg, rgba(17, 7, 38, .96), rgba(23, 10, 47, .97));
  border: 1px solid rgba(121, 72, 205, .62);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(0,0,0,.22), inset 0 0 22px rgba(103,46,187,.05);
}

body.mr-root .rk-ranking-board-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 0 3px 12px;
  border-bottom: 1px solid rgba(123,77,202,.35);
}

body.mr-root .rk-ranking-board-title {
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-weight:900;
  font-size:18px;
}

body.mr-root .rk-ranking-board-tabs { display:flex; gap:6px; flex-wrap:wrap; }
body.mr-root .rk-board-tab {
  border:1px solid rgba(121,72,205,.35);
  background:rgba(89,48,164,.22);
  color:#bfb3d9;
  border-radius:9px;
  padding:7px 14px;
  font: inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
body.mr-root .rk-board-tab.activo,
body.mr-root .rk-board-tab:hover {
  color:#fff;
  background:linear-gradient(135deg,#8c48e6,#7332d2);
  border-color:#a56af2;
}
body.mr-root .rk-ranking-board-tools { padding:10px 4px 4px; }
body.mr-root .rk-ranking-resumen { color:#9b90b6; font-size:11px; }
body.mr-root .rk-resto-paginado { margin-top:8px; }
body.mr-root .rk-lista-resto { grid-template-columns: repeat(10, minmax(0, 1fr)); gap:8px; }
body.mr-root .rk-mini-card {
  background: linear-gradient(180deg, rgba(34,18,68,.9), rgba(22,10,49,.95));
  border:1px solid rgba(114,71,190,.58);
  border-radius:11px;
  padding:8px 5px 9px;
}
body.mr-root .rk-mini-card:hover {
  border-color:#9860ef;
  background:linear-gradient(180deg, rgba(49,26,94,.95), rgba(28,12,60,.98));
}
body.mr-root .rk-mini-avatar {
  width:56px; height:56px; border-radius:10px;
  border-color:rgba(138,92,218,.58);
  box-shadow:inset 0 0 0 2px rgba(139,92,246,.12), 0 5px 13px rgba(0,0,0,.22);
}
body.mr-root .rk-mini-nombre { color:#fff; font-size:10.5px; }
body.mr-root .rk-mini-puesto { color:#d8c8ff; }
body.mr-root .rk-mini-stat { color:#9f92bc; }
body.mr-root .rk-ver-mas {
  display:block;
  text-align:right;
  padding:8px 4px 2px;
  color:#d2b8ff;
  font-size:11.5px;
  font-weight:800;
  text-decoration:none;
}
body.mr-root .rk-ver-mas:hover { color:#fff; }

/* SIDEBAR / ESTADÍSTICAS */
body.mr-root .rk-columna-lateral { gap:14px; position:static; }
body.mr-root .cr-panel {
  background: linear-gradient(180deg, rgba(25,11,53,.97), rgba(15,7,35,.98));
  border:1px solid rgba(126,80,211,.58);
  border-radius:16px;
  padding:14px;
  box-shadow:0 15px 34px rgba(0,0,0,.2);
}
body.mr-root .cr-panel-heading { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
body.mr-root .cr-panel-heading h2 { margin:0; font-size:17px; color:#fff; }
body.mr-root .cr-panel-icon { color:#ffca4a; font-size:21px; filter:drop-shadow(0 0 7px rgba(255,198,72,.25)); }
body.mr-root .cr-stats-stack { display:flex; flex-direction:column; gap:8px; }
body.mr-root .cr-stat-card {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 10px;
  border-radius:11px;
  border:1px solid rgba(131,81,220,.46);
  background:linear-gradient(180deg, rgba(37,19,76,.88), rgba(25,11,54,.92));
}
body.mr-root .cr-stat-symbol {
  width:46px; height:46px; flex:0 0 46px;
  display:grid; place-items:center;
  border-radius:10px;
  font-size:20px;
  background:rgba(124,58,237,.17);
  border:1px solid rgba(153,110,255,.45);
}
body.mr-root .cr-stat-green .cr-stat-symbol { background:rgba(53,212,136,.12); border-color:rgba(53,212,136,.42); }
body.mr-root .cr-stat-blue .cr-stat-symbol { background:rgba(56,189,248,.11); border-color:rgba(56,189,248,.42); }
body.mr-root .cr-stat-gold .cr-stat-symbol { background:rgba(240,180,41,.11); border-color:rgba(240,180,41,.40); color:#ffd666; }
body.mr-root .cr-stat-copy { display:flex; flex-direction:column-reverse; min-width:0; }
body.mr-root .cr-stat-copy strong { color:#fff; font-size:28px; font-weight:800; line-height:1.15; }
body.mr-root .cr-stat-copy small { color:#b9a8d9; font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
body.mr-root .cr-panel-reciens .cr-panel-heading { margin-bottom:8px; }
body.mr-root .cr-recien-llegados { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:7px; }
body.mr-root .cr-recien-llegados .cr-avatar-chico { width:auto; height:auto; aspect-ratio:1; border-radius:8px; border-color:rgba(130,81,210,.52); }
body.mr-root .cr-panel-tabs { padding-top:10px; }
body.mr-root .cr-tabs { margin-bottom:10px; border-bottom:1px solid rgba(119,73,199,.32); }
body.mr-root .cr-tab { padding:9px 5px; }
body.mr-root .cr-tab.cr-tab-activa { color:#fff; background:linear-gradient(135deg,#873fe8,#6d35cd); border-color:#9155ed; }
body.mr-root .cr-tab-summary-row { display:flex; justify-content:space-between; gap:8px; padding:8px 2px; border-bottom:1px solid rgba(116,74,188,.25); color:#c5b7dc; font-size:12px; }
body.mr-root .cr-tab-summary-row strong { color:#fff; }
body.mr-root .cr-grid-destacados { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:9px; }
body.mr-root .cr-destacado-avatar {
  position:relative; aspect-ratio:1; overflow:hidden; display:block; border-radius:10px;
  border:1px solid rgba(174,112,255,.54); background:#16092f;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
body.mr-root .cr-destacado-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
body.mr-root .cr-destacado-corona {
  position:absolute; top:-1px; right:2px; font-size:12px; color:#ffcc52; filter:drop-shadow(0 0 4px rgba(255,202,82,.45));
}
/* MEDIA + LISTADO DE COMUNIDAD */
body.mr-root .cr-seccion-media,
body.mr-root .cr-seccion-actividad { max-width:1400px; }
body.mr-root .cr-seccion-media { padding:0 24px; }
body.mr-root .cr-seccion-media .cr-panel { min-height:100%; }
body.mr-root .cr-seccion-actividad { padding:0 24px; }
body.mr-root .cr-titulo-actividad { color:#fff; text-align:left; }
body.mr-root .cr-feed-actividad { column-count:2; }
body.mr-root .cr-feed-item { background:rgba(29,13,60,.87); border-color:rgba(114,71,190,.48); }

/* FOOTER */
body.mr-root .pie-footer {
  background:linear-gradient(180deg,rgba(15,6,33,.96),rgba(8,3,20,.99)) !important;
  border-top:1px solid rgba(124,73,211,.45);
}

/* MOBILE */
@media (max-width: 1100px) {
  body.mr-root .rk-cuerpo { grid-template-columns: 1fr; }
  body.mr-root .rk-columna-lateral { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.mr-root .cr-panel-destacados,
  body.mr-root .cr-panel-conectados { grid-column:span 2; }
}

@media (max-width: 820px) {
  body.mr-root .rk-encabezado { grid-template-columns:1fr; align-items:start; }
  body.mr-root .rk-acciones-hero { justify-content:flex-start; }
  body.mr-root .rk-podio6 { min-height:0; }
  body.mr-root .rk-lista-resto { grid-template-columns:repeat(5,minmax(0,1fr)); }
  body.mr-root .rk-ranking-board-head { align-items:flex-start; flex-direction:column; }
  body.mr-root .cr-grid-destacados { grid-template-columns:repeat(5,minmax(0,1fr)); }
  body.mr-root .cr-seccion-media { grid-template-columns:1fr; }
}

@media (max-width: 620px) {
  body.mr-root .rk-hero { padding:28px 12px 52px !important; }
  body.mr-root .rk-podio6 { grid-template-columns:1fr; gap:12px; }
  body.mr-root .rk-podio-card,
  body.mr-root .rk-podio-card[data-puesto="1"] { min-height:210px; transform:none !important; }
  body.mr-root .rk-podio-card[data-puesto="1"] .rk-podio-avatar { width:100px; height:100px; }
  body.mr-root .rk-lista-resto { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.mr-root .rk-columna-lateral { grid-template-columns:1fr; }
  body.mr-root .cr-panel-destacados { grid-column:auto; }
  body.mr-root .cr-seccion-media,
  body.mr-root .cr-seccion-actividad { padding-left:12px; padding-right:12px; }
  body.mr-root .cr-feed-actividad { column-count:1; }
}