/* ============================================================================
   PROYECTO Z — gamificacion.css
   Leaderboard, barras de progreso, niveles NAE, toasts de puntos.
   ============================================================================ */

/* ── TARJETA DE NIVEL ACTUAL ─────────────────────────────────────────────── */
.lvl-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  background: linear-gradient(135deg, var(--card), var(--card2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}
.lvl-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}
.lvl-hero-info { flex: 1; min-width: 0; }
.lvl-hero-name {
  font-size: 18px;
  font-weight: 700;
}
.lvl-hero-pts {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Barra de progreso al siguiente nivel */
.progress-wrap {
  margin-top: 12px;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 20px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  border-radius: 20px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
  background: linear-gradient(90deg, var(--gold), var(--orange));
}
.progress-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted2);
  margin-top: 6px;
}


/* ── LEADERBOARD ─────────────────────────────────────────────────────────── */
.lb-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  transition: all 0.18s;
}
.lb-row:hover { border-color: var(--border2); }
.lb-row.lb-top1 { border-color: rgba(242,169,0,0.3); background: linear-gradient(90deg, rgba(242,169,0,0.06), var(--card)); }

.lb-pos {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  border-radius: 50%;
  background: var(--card2);
  color: var(--muted);
  flex-shrink: 0;
}
.lb-pos.gold   { background: rgba(242,169,0,0.15);   color: #FFD700; }
.lb-pos.silver { background: rgba(192,192,192,0.12); color: #C0C0C0; }
.lb-pos.bronze { background: rgba(205,127,50,0.15);  color: #CD7F32; }

.lb-info { flex: 1; min-width: 0; }
.lb-name { font-weight: 600; font-size: 14px; }
.lb-sub  { font-family: var(--font-mono); font-size: 11px; margin-top: 2px; }

.lb-bar-wrap {
  width: 90px;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
.lb-bar {
  height: 100%;
  border-radius: 20px;
  transition: width 0.6s ease;
}
.lb-pts {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  min-width: 50px;
  text-align: right;
  flex-shrink: 0;
}


/* ── PUNTOS FLOTANTES (+10, +15...) ──────────────────────────────────────── */
.points-burst {
  position: fixed;
  z-index: 99999;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  color: var(--gold);
  pointer-events: none;
  animation: burstUp 1.2s ease forwards;
  text-shadow: 0 2px 8px rgba(242,169,0,0.5);
}
@keyframes burstUp {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  20%  { opacity: 1; transform: translateY(-10px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-60px) scale(1); }
}


/* ── BADGE DE NIVEL (junto al avatar/nombre) ─────────────────────────────── */
.nivel-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}