/**
 * LEGION THEME - COLOR DESIGN SYSTEM
 * Paleta Global: Rojo & Naranja (Fire & Blood)
 * Todas las variables definidas aquí pueden reutilizarse en cualquier sección, módulo o estilo.
 */

:root {
  /* ==========================================================================
     1. TONOS ROJO (RED / CRIMSON)
     ========================================================================== */
  --legion-red: #e52424;                 /* Rojo fuego principal */
  --legion-red-hover: #ff3b3b;           /* Rojo brillante para estados hover */
  --legion-red-dark: #991414;            /* Rojo carmesí profundo */
  --legion-red-deep: #2a0808;            /* Rojo carbón para fondos y paneles */
  --legion-red-glow: rgba(229, 36, 36, 0.45);
  --legion-red-subtle: rgba(229, 36, 36, 0.12);

  /* ==========================================================================
     2. TONOS NARANJA (ORANGE / FLAME)
     ========================================================================== */
  --legion-orange: #ff6a00;              /* Naranja fuego principal */
  --legion-orange-light: #ffa24b;        /* Naranja dorado/ámbar claro para títulos y textos */
  --legion-orange-dark: #cc5500;         /* Naranja quemado */
  --legion-orange-glow: rgba(255, 106, 0, 0.45);
  --legion-orange-subtle: rgba(255, 106, 0, 0.12);

  /* ==========================================================================
     3. GRADIENTES DE FUEGO / COMBATE
     ========================================================================== */
  --legion-gradient-fire: linear-gradient(135deg, var(--legion-red) 0%, var(--legion-orange) 100%);
  --legion-gradient-fire-rev: linear-gradient(135deg, var(--legion-orange) 0%, var(--legion-red) 100%);
  --legion-gradient-fire-v: linear-gradient(180deg, var(--legion-orange) 0%, var(--legion-red-dark) 100%);
  --legion-gradient-dark: linear-gradient(180deg, #180808 0%, #090303 100%);
  --legion-gradient-card: linear-gradient(135deg, rgba(28, 10, 10, 0.96) 0%, rgba(14, 5, 5, 0.97) 100%);

  /* ==========================================================================
     4. FONDOS, PANELES Y SUPERFICIES (DARK OBSIDIAN)
     ========================================================================== */
  --legion-bg: #070303;                  /* Fondo principal de la web */
  --legion-panel: #0d0505;               /* Paneles oscuros */
  --legion-panel2: #150808;              /* Paneles secundarios */
  --legion-card-bg: rgba(20, 8, 8, 0.94); /* Tarjetas con glassmorphism */

  /* ==========================================================================
     5. BORDES Y LÍNEAS
     ========================================================================== */
  --legion-border: rgba(229, 36, 36, 0.35);
  --legion-border-light: rgba(255, 106, 0, 0.48);
  --legion-border-focus: var(--legion-orange);
  --legion-line: rgba(229, 36, 36, 0.30);

  /* ==========================================================================
     6. TIPOGRAFÍA
     ========================================================================== */
  --legion-text: #f7f3f3;                /* Texto principal */
  --legion-text-muted: #a39292;          /* Texto secundario/atenuado */
  --legion-text-title: #ffffff;          /* Títulos principales */

  /* ==========================================================================
     7. TOKENS AVANZADOS Y SOMBRAS VOLUMÉTRICAS
     ========================================================================== */
  --legion-gradient-gold-fire: linear-gradient(135deg, #ffcc00 0%, #ff6a00 50%, #e52424 100%);
  --legion-glow-intense: 0 0 25px rgba(255, 106, 0, 0.55), 0 0 50px rgba(229, 36, 36, 0.35);
  --legion-card-tilt: rgba(18, 6, 6, 0.95);
  --legion-font-title: 'Orbitron', -apple-system, sans-serif;
  --legion-font-body: 'Rajdhani', -apple-system, sans-serif;

  /* ==========================================================================
     8. ALIASES DE COMPATIBILIDAD (DMG -> LEGION RED & ORANGE)
     ========================================================================== */
  --dmg-bg: var(--legion-bg);
  --dmg-panel: var(--legion-panel);
  --dmg-panel2: var(--legion-panel2);
  --dmg-gold: var(--legion-orange);
  --dmg-gold2: var(--legion-orange-light);
  --dmg-line: var(--legion-line);
  --dmg-text: var(--legion-text);
  --dmg-muted: var(--legion-text-muted);
  --dmg-green: #38ef7d;
}

/* ==========================================================================
   ANIMACIONES GLOBALES DE FUEGO Y DESTELLOS
   ========================================================================== */
@keyframes legionPulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.05); opacity: 1; box-shadow: 0 0 25px var(--legion-orange-glow); }
}

@keyframes legionShine {
  0% { transform: translateX(-150%) skewX(-25deg); }
  100% { transform: translateX(250%) skewX(-25deg); }
}

@keyframes legionRadar {
  0% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(56, 239, 125, 0.7); }
  70% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 8px rgba(56, 239, 125, 0); }
  100% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(56, 239, 125, 0); }
}

@keyframes legionEmbers {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  30% { opacity: 0.7; }
  100% { transform: translateY(-160px) scale(1.2); opacity: 0; }
}

/* ==========================================================================
   WIDGET FLOTANTE DE EVENTOS EN VIVO (GLOBAL LIVE EVENTS WIDGET)
   ========================================================================== */
.floating-widget.floating-events {
  position: fixed !important;
  left: 20px !important;
  bottom: 20px !important;
  z-index: 99999 !important;
  background: rgba(14, 5, 7, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 60, 0, 0.32) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  width: 260px !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 20px rgba(255, 60, 0, 0.22) !important;
  font-family: 'Rajdhani', sans-serif !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

.floating-widget.floating-events.collapsed {
  width: auto !important;
  padding: 8px 14px !important;
}

.floating-widget.floating-events.collapsed .fw-body {
  display: none !important;
}

.floating-widget .fw-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(255, 60, 0, 0.22) !important;
}

.floating-widget .fw-title {
  display: flex !important;
  align-items: center !important;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: var(--legion-gold, #f0cf7a) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.floating-widget .fw-dot-pulse {
  width: 8px !important;
  height: 8px !important;
  background: #38ef7d !important;
  border-radius: 50% !important;
  display: inline-block !important;
  margin-right: 8px !important;
  box-shadow: 0 0 10px #38ef7d !important;
  animation: fw-pulse 2s infinite !important;
}

@keyframes fw-pulse {
  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(56, 239, 125, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(56, 239, 125, 0); }
  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(56, 239, 125, 0); }
}

.floating-widget .fw-toggle {
  background: rgba(255, 106, 0, 0.15) !important;
  border: 1px solid rgba(255, 106, 0, 0.35) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.floating-widget .fw-toggle:hover {
  background: linear-gradient(135deg, #ff2a2a, #ff6a00) !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px var(--legion-orange-glow) !important;
}

.floating-widget .fw-body {
  margin-top: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  transition: all 0.3s ease !important;
}

.floating-widget .fw-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: rgba(22, 7, 9, 0.75) !important;
  border: 1px solid rgba(255, 60, 0, 0.2) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  transition: all 0.2s !important;
}

.floating-widget .fw-item:hover {
  background: rgba(255, 106, 0, 0.14) !important;
  border-color: #ff6a00 !important;
  transform: translateX(3px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.floating-widget .fw-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.floating-widget .fw-img-wrap {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 106, 0, 0.35) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.6) !important;
}

.floating-widget .fw-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.floating-widget .fw-name {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.floating-widget .fw-time {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  color: var(--legion-gold, #f0cf7a) !important;
  white-space: nowrap !important;
}

.floating-widget .fw-time.active {
  color: #ff6a00 !important;
  text-shadow: 0 0 8px rgba(255, 106, 0, 0.7) !important;
  animation: fw-blink 1s infinite alternate !important;
}

@keyframes fw-blink {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

@media (max-width: 600px) {
  .floating-widget.floating-events {
    bottom: 15px !important;
    left: 10px !important;
    width: 210px !important;
  }
}

/* ==========================================================================
   WIDGET FLOTANTE TIKTOK LIVE (Dark Neon / Glassmorphism)
   ========================================================================== */
.floating-widget.floating-tiktok {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  top: auto !important;
  left: auto !important;
  z-index: 99999 !important;
  background: rgba(14, 5, 7, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(254, 44, 85, 0.6) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  width: 250px !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 25px rgba(254, 44, 85, 0.35), 0 0 12px rgba(37, 244, 238, 0.2) !important;
  font-family: 'Rajdhani', sans-serif !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

.floating-widget.floating-tiktok.collapsed {
  width: auto !important;
  padding: 8px 14px !important;
}

.floating-widget.floating-tiktok.collapsed .fw-body {
  display: none !important;
}

.fw-tiktok-header {
  border-bottom: 1px solid rgba(254, 44, 85, 0.3) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 6px !important;
}

.fw-tiktok-title {
  color: #ff3b65 !important;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  display: flex !important;
  align-items: center !important;
}

.fw-tiktok-dot-pulse {
  width: 8px !important;
  height: 8px !important;
  background: #ff0050 !important;
  border-radius: 50% !important;
  display: inline-block !important;
  margin-right: 8px !important;
  box-shadow: 0 0 10px #ff0050 !important;
  animation: fw-tiktok-pulse 1.6s infinite !important;
}

@keyframes fw-tiktok-pulse {
  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 0, 80, 0.8); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(255, 0, 80, 0); }
  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 0, 80, 0); }
}

.fw-tiktok-toggle {
  background: rgba(254, 44, 85, 0.15) !important;
  border: 1px solid rgba(254, 44, 85, 0.4) !important;
  color: #ffd6df !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.fw-tiktok-toggle:hover {
  background: #fe2c55 !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(254, 44, 85, 0.6) !important;
}

.fw-tiktok-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: rgba(25, 8, 20, 0.85) !important;
  border: 1px solid rgba(254, 44, 85, 0.3) !important;
  border-radius: 10px !important;
  padding: 7px 10px !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
  margin-top: 6px !important;
}

.fw-tiktok-item:hover {
  background: rgba(254, 44, 85, 0.2) !important;
  border-color: #25f4ee !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(254, 44, 85, 0.35) !important;
}

.fw-tiktok-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.fw-tiktok-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid #fe2c55 !important;
  box-shadow: 0 0 10px rgba(254, 44, 85, 0.5) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.fw-tiktok-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.fw-tiktok-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.fw-tiktok-name {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.fw-tiktok-user {
  font-size: 0.72rem !important;
  color: #25f4ee !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

.fw-tiktok-badge {
  background: linear-gradient(135deg, #fe2c55, #ff0050) !important;
  color: #ffffff !important;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  box-shadow: 0 0 8px rgba(254, 44, 85, 0.7) !important;
}

@media (max-width: 600px) {
  .floating-widget.floating-tiktok {
    bottom: 85px !important;
    right: 10px !important;
    width: 220px !important;
  }
}

/* ================= Top Guilds Styling ================= */
.dmg-guilds-card .dmg-rank-avatar.dmg-rank-guild-logo {
  border-radius: 8px !important;
  image-rendering: pixelated !important;
  image-rendering: -moz-crisp-edges !important;
  image-rendering: crisp-edges !important;
  padding: 3px !important;
  box-sizing: border-box !important;
  background: #0d0608 !important;
}

.dmg-guilds-card .dmg-v3-rank-row.medal-1 .dmg-rank-guild-logo {
  border-color: #ffd45c !important;
  box-shadow: 0 0 0 2px rgba(255, 212, 92, 0.15), 0 0 16px rgba(255, 190, 65, 0.25) !important;
}

.dmg-guilds-card .dmg-v3-rank-row.medal-2 .dmg-rank-guild-logo {
  border-color: #cdd4dc !important;
  box-shadow: 0 0 0 2px rgba(205, 212, 220, 0.15), 0 0 12px rgba(205, 212, 220, 0.2) !important;
}

.dmg-guilds-card .dmg-v3-rank-row.medal-3 .dmg-rank-guild-logo {
  border-color: #bd773a !important;
  box-shadow: 0 0 0 2px rgba(189, 119, 58, 0.15), 0 0 12px rgba(189, 119, 58, 0.2) !important;
}

/* ================= Floating Social Dock (Derecha) ================= */
.floating-social-dock {
  position: fixed !important;
  right: 0 !important;
  top: 48% !important;
  transform: translateY(-50%) !important;
  z-index: 9998 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  padding: 8px 0 8px 6px !important;
  background: rgba(12, 4, 6, 0.92) !important;
  border: 1px solid rgba(255, 42, 42, 0.35) !important;
  border-right: none !important;
  border-radius: 12px 0 0 12px !important;
  box-shadow: -6px 0 25px rgba(0, 0, 0, 0.8), 0 0 16px rgba(255, 42, 42, 0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.fsd-btn {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  color: #ffffff !important;
  padding: 9px 11px !important;
  border-radius: 8px 0 0 8px !important;
  background: rgba(22, 7, 10, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-right: none !important;
  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.fsd-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  transition: transform 0.28s ease !important;
}

.fsd-label {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  max-width: 0 !important;
  opacity: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  margin-left: 0 !important;
  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.fsd-btn:hover {
  padding-left: 14px !important;
  padding-right: 14px !important;
  transform: translateX(-5px) !important;
}

.fsd-btn:hover .fsd-icon {
  transform: scale(1.18) !important;
}

.fsd-btn:hover .fsd-label {
  max-width: 95px !important;
  opacity: 1 !important;
  margin-left: 8px !important;
}

/* Redes individuales */
.fsd-discord {
  color: #7289da !important;
}
.fsd-discord:hover {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.4), rgba(88, 101, 242, 0.15)) !important;
  border-color: #5865F2 !important;
  color: #ffffff !important;
  box-shadow: -3px 0 16px rgba(88, 101, 242, 0.6) !important;
}

.fsd-tiktok {
  color: #25f4ee !important;
}
.fsd-tiktok:hover {
  background: linear-gradient(135deg, rgba(254, 44, 85, 0.4), rgba(37, 244, 238, 0.18)) !important;
  border-color: #fe2c55 !important;
  color: #ffffff !important;
  box-shadow: -3px 0 16px rgba(254, 44, 85, 0.6) !important;
}

.fsd-whatsapp {
  color: #25D366 !important;
}
.fsd-whatsapp:hover {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.4), rgba(37, 211, 102, 0.15)) !important;
  border-color: #25D366 !important;
  color: #ffffff !important;
  box-shadow: -3px 0 16px rgba(37, 211, 102, 0.6) !important;
}

.fsd-facebook {
  color: #1877F2 !important;
}
.fsd-facebook:hover {
  background: linear-gradient(135deg, rgba(24, 119, 242, 0.4), rgba(24, 119, 242, 0.15)) !important;
  border-color: #1877F2 !important;
  color: #ffffff !important;
  box-shadow: -3px 0 16px rgba(24, 119, 242, 0.6) !important;
}

@media (max-width: 600px) {
  .floating-social-dock {
    top: 38% !important;
    padding: 5px 0 5px 4px !important;
    gap: 5px !important;
  }
  .fsd-btn {
    padding: 6px 7px !important;
  }
  .fsd-icon svg {
    width: 17px !important;
    height: 17px !important;
  }
}