/* ============================================================
   Scrollbar personalizada — 6px, thumb purple en hover
   ============================================================ */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(139, 92, 246, 0.18); border-radius: 3px; transition: background .2s; }
::-webkit-scrollbar-thumb:hover  { background: rgba(139, 92, 246, 0.55); }
*                                 { scrollbar-width: thin; scrollbar-color: rgba(139,92,246,.22) transparent; }

/* ============================================================
   Reset mínimo (preflight desactivado en Tailwind)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   Keyframe spin — usado por wallets.html (inline style)
   ============================================================ */
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Nav item activo — JS alterna la clase .active
   El selector .dark aumenta especificidad para ganar
   a los hover:* de Tailwind
   ============================================================ */
.dark .nav-item.active {
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #fff;
}
.dark .nav-item.active i { color: #8b5cf6; }
.dark .nav-item.active .nav-badge {
  background: rgba(124, 58, 237, 0.3);
  color: #c4b5fd;
}

/* ============================================================
   Avatar de usuario — JS crea estos elementos dinámicamente
   ============================================================ */
.user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.user-avatar-fallback {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}