/* ============================================================
   KINGDOM QUEST — SISTEMA CROMÁTICO SAGRADO MD5E
   Misión Digital 5 Estrellas IASD
   "El oro se gana, no se regala."
   ============================================================ */

/* ── VARIABLES DARK (predeterminado) ─────────────────────── */
[data-theme="dark"] {
  --bg-base:          #0D0B1E;
  --bg-card:          #13103A;
  --bg-card-2:        #1A1650;
  --bg-overlay:       rgba(13,11,30,0.92);
  --border-color:     rgba(99,102,241,0.20);
  --border-gold:      rgba(255,215,0,0.28);
  --text-primary:     #F0EFFE;
  --text-secondary:   #A5B4FC;
  --text-muted:       #6366F1;
  --xp-bar-bg:        #1A1650;
  --gold-bright:      #FFD700;
  --gold-deep:        #B45309;
  --amber:            #F59E0B;
  --color-complete:   #10B981;
  --color-complete-bg:rgba(16,185,129,0.10);
  --color-streak:     #EF4444;
  --color-streak-bg:  rgba(239,68,68,0.12);
  --color-locked:     #8B5CF6;
  --color-locked-bg:  rgba(139,92,246,0.10);
  --color-rank:       #3B82F6;
  --color-rank-bg:    rgba(59,130,246,0.10);
  --color-xp:         #6366F1;
  --glow-gold:        0 0 20px rgba(255,215,0,0.5), 0 0 60px rgba(255,215,0,0.2);
  --glow-indigo:      0 0 20px rgba(99,102,241,0.4), 0 0 50px rgba(99,102,241,0.15);
  --glow-complete:    0 0 16px rgba(16,185,129,0.5);
  --glow-streak:      0 0 20px rgba(239,68,68,0.6), 0 0 40px rgba(239,68,68,0.3);
  --card-shadow:      0 8px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(99,102,241,0.08);
  --shine-gradient:   linear-gradient(135deg,rgba(99,102,241,0.06) 0%,transparent 60%);
  --md-bg: var(--bg-base);
  --md-bg-2: var(--bg-card-2);
  --md-bg-3: var(--bg-card-2);
  --md-surface: rgba(99,102,241,0.08);
  --md-surface-2: rgba(99,102,241,0.12);
  --md-surface-3: rgba(99,102,241,0.16);
  --md-depth: var(--bg-card);
  --md-border: var(--border-color);
  --md-border-gold: var(--border-color);
  --md-card: var(--bg-card);
  --md-card-2: var(--bg-card-2);
  --md-text: var(--text-primary);
  --md-muted: var(--text-secondary);
  --md-muted-2: var(--text-muted);
  --md-muted-3: rgba(165,180,252,.55);
  --md-gold: var(--gold-bright);
  --md-gold-2: var(--gold-deep);
  --md-gold-glow: rgba(255,215,0,.35);
  --md-gold-soft: rgba(255,215,0,.06);
  --md-blue: var(--color-rank);
  --md-blue-2: var(--color-xp);
  --md-blue-soft: var(--color-rank-bg);
  --md-green: var(--color-complete);
  --md-green-soft: var(--color-complete-bg);
  --md-purple: var(--color-locked);
  --md-purple-soft: var(--color-locked-bg);
  --md-red: var(--color-streak);
  --md-red-soft: var(--color-streak-bg);
}

/* ── VARIABLES LIGHT ─────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:          #F7F6FF;
  --bg-card:          #FFFFFF;
  --bg-card-2:        #EEF2FF;
  --bg-overlay:       rgba(247,246,255,0.93);
  --border-color:     rgba(99,102,241,0.18);
  --border-gold:      rgba(180,83,9,0.28);
  --text-primary:     #1E1B4B;
  --text-secondary:   #3730A3;
  --text-muted:       #6366F1;
  --xp-bar-bg:        #EEF2FF;
  --gold-bright:      #B45309;
  --gold-deep:        #92400E;
  --amber:            #D97706;
  --color-complete:   #059669;
  --color-complete-bg:rgba(5,150,105,0.08);
  --color-streak:     #DC2626;
  --color-streak-bg:  rgba(220,38,38,0.08);
  --color-locked:     #7C3AED;
  --color-locked-bg:  rgba(124,58,237,0.08);
  --color-rank:       #2563EB;
  --color-rank-bg:    rgba(37,99,235,0.08);
  --color-xp:         #4F46E5;
  --glow-gold:        0 0 14px rgba(180,83,9,0.18), 0 0 28px rgba(180,83,9,0.08);
  --glow-indigo:      0 0 14px rgba(99,102,241,0.2);
  --card-shadow:      0 4px 24px rgba(99,102,241,0.10), inset 0 1px 0 rgba(99,102,241,0.06);
  --shine-gradient:   linear-gradient(135deg,rgba(99,102,241,0.08) 0%,transparent 60%);
  --md-bg: var(--bg-base);
  --md-bg-2: var(--bg-card-2);
  --md-bg-3: var(--bg-card-2);
  --md-surface: rgba(99,102,241,0.08);
  --md-surface-2: rgba(99,102,241,0.12);
  --md-surface-3: rgba(99,102,241,0.16);
  --md-depth: var(--bg-card);
  --md-border: var(--border-color);
  --md-border-gold: var(--border-color);
  --md-card: var(--bg-card);
  --md-card-2: var(--bg-card-2);
  --md-text: var(--text-primary);
  --md-muted: var(--text-secondary);
  --md-muted-2: var(--text-muted);
  --md-muted-3: rgba(55,48,163,.55);
  --md-gold: var(--gold-bright);
  --md-gold-2: var(--gold-deep);
  --md-gold-glow: rgba(180,83,9,.20);
  --md-gold-soft: rgba(180,83,9,.06);
  --md-blue: var(--color-rank);
  --md-blue-2: var(--color-xp);
  --md-blue-soft: var(--color-rank-bg);
  --md-green: var(--color-complete);
  --md-green-soft: var(--color-complete-bg);
  --md-purple: var(--color-locked);
  --md-purple-soft: var(--color-locked-bg);
  --md-red: var(--color-streak);
  --md-red-soft: var(--color-streak-bg);
}

/* ── RESET BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-base) !important;
  color: var(--text-primary) !important;
  font-family: 'IM Fell English', serif !important;
  transition: background 0.5s, color 0.5s;
  position: relative;
  overflow-x: hidden;
}

/* ── CANVAS DE PARTÍCULAS ────────────────────────────────── */
#particleCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.72;
}

/* ── FONDO SAGRADO — RAYOS DE LUZ ────────────────────────── */
.sacred-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ray {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 3px;
  height: 130%;
  transform-origin: top center;
  opacity: 0;
  animation: rayPulse 6s infinite;
}
[data-theme="dark"]  .ray { background: linear-gradient(to bottom, rgba(99,102,241,0.18), transparent); }
[data-theme="light"] .ray { background: linear-gradient(to bottom, rgba(99,102,241,0.08), transparent); }
.ray:nth-child(1)  { transform: rotate(-45deg); animation-delay: 0s;   }
.ray:nth-child(2)  { transform: rotate(-30deg); animation-delay: 0.8s; }
.ray:nth-child(3)  { transform: rotate(-15deg); animation-delay: 1.6s; }
.ray:nth-child(4)  { transform: rotate(0deg);   animation-delay: 2.4s; }
.ray:nth-child(5)  { transform: rotate(15deg);  animation-delay: 3.2s; }
.ray:nth-child(6)  { transform: rotate(30deg);  animation-delay: 4.0s; }
.ray:nth-child(7)  { transform: rotate(45deg);  animation-delay: 4.8s; }
@keyframes rayPulse { 0%,100% { opacity: 0; } 50% { opacity: 1; } }

/* ── TIPOGRAFÍA SAGRADA ──────────────────────────────────── */
h1, h2, h3, h4, h5, .md-brand-name, .brand-name,
.topbar-title, .md-topbar-title {
  font-family: 'Cinzel', serif !important;
  color: var(--text-primary) !important;
}
.md-hero-greeting strong,
.md-hero-greeting b,
.player-info h1,
.auth-brand h1 {
  font-family: 'Cinzel Decorative', serif !important;
  background: linear-gradient(135deg, var(--gold-bright), var(--amber), var(--gold-bright));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 3s linear infinite;
}
@keyframes textShimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
.md-hero-stat-value, .md-stars-global-pct, .md-rank-score, .md-rank-num,
.md-code-value, .stat-mini-value, .md-sheet-pct, .md-topbar-title,
[data-points-display] { font-family: 'Orbitron', monospace !important; }

/* ── PARTÍCULAS — FLOAT SAGRADO ──────────────────────────── */
.md-points-float {
  font-family: 'Orbitron', monospace !important;
  font-weight: 900 !important;
  color: var(--gold-bright) !important;
  text-shadow: var(--glow-gold) !important;
}

/* ── BURST DE EMOJIS SAGRADOS ────────────────────────────── */
@keyframes burstFly { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: var(--tx); } }
.md-sacred-burst {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 1.2rem;
  text-shadow: 0 0 12px rgba(255,215,0,0.8);
  animation: burstFly var(--dur, 1s) ease-out forwards;
}

/* ── BODY — FONDO RADIAL SAGRADO ─────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% -10%, rgba(99,102,241,0.18), transparent),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(59,130,246,0.08), transparent);
}

/* ── CONTENIDO SOBRE EL FONDO ────────────────────────────── */
.md-page-content, .page-content, .md-main, .main-content { position: relative; z-index: 2; }

/* ── TOPBAR / NAVBAR ─────────────────────────────────────── */
.md-topbar, .topbar, .navbar {
  background: var(--bg-overlay) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border-color) !important;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ── CARDS ───────────────────────────────────────────────── */
.md-card, .card, .stat-mini, .md-hero-card, .md-mission-card, .mission-card,
.table-responsive, .auth-card, .md-sheet, .md-achievement-modal, .modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 20px !important;
  box-shadow: var(--card-shadow) !important;
  position: relative;
  overflow: hidden;
}
.md-card::before, .card::before, .auth-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--shine-gradient);
  pointer-events: none;
  border-radius: inherit;
}

/* ── BARRA XP ─────────────────────────────────────────────── */
.md-xp-bar, .xp-bar-track, [data-xp-bar], .md-level-progress-bar {
  background: var(--xp-bar-bg) !important;
  border-radius: 100px !important;
  overflow: visible !important;
  border: 1px solid var(--border-color) !important;
}
.md-xp-fill, .xp-bar-fill, [data-xp-fill], .md-level-progress-fill {
  background: linear-gradient(90deg, var(--color-xp), var(--gold-bright), #FFF176) !important;
  background-size: 200% 100% !important;
  animation: xpShimmer 2s linear infinite !important;
  border-radius: 100px !important;
  box-shadow: 0 0 12px var(--color-xp), 0 0 30px rgba(99,102,241,0.4) !important;
  transition: width 1s cubic-bezier(0.34,1.56,0.64,1) !important;
}
@keyframes xpShimmer { 0% { background-position: 200% center; } 100% { background-position: 0% center; } }

/* ── STREAK BADGE — RUBÍ PULSANTE ────────────────────────── */
.streak-badge, .md-streak-badge, [data-streak-badge] {
  background: linear-gradient(135deg, #B91C1C, #EF4444) !important;
  border-radius: 50px !important;
  box-shadow: var(--glow-streak) !important;
  animation: streakPulse 2s ease-in-out infinite !important;
  font-family: 'Orbitron', monospace !important;
}
@keyframes streakPulse { 0%,100% { box-shadow: 0 0 20px rgba(239,68,68,0.5); } 50% { box-shadow: 0 0 40px rgba(239,68,68,0.9), 0 0 60px rgba(239,68,68,0.4); } }

/* ── STAT CARDS SEMÁNTICOS ────────────────────────────────── */
.md-hero-stats .md-hero-stat:nth-child(1), .md-stat-pm { background: rgba(255,215,0,0.06) !important; border-color: var(--border-gold) !important; }
.md-hero-stats .md-hero-stat:nth-child(2), .md-stat-rank { background: var(--color-rank-bg) !important; border-color: rgba(59,130,246,0.3) !important; }
.md-hero-stats .md-hero-stat:nth-child(3), .md-stat-avail { background: var(--color-complete-bg) !important; border-color: rgba(16,185,129,0.3) !important; }

/* ── NAV ACTIVO — ÍNDIGO ─────────────────────────────────── */
.nav-item.active, .md-nav-item.active, .mobile-nav-item.active {
  background: rgba(99,102,241,0.15) !important;
  border-left: 3px solid var(--color-xp) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--glow-indigo) !important;
}
.nav-item, .md-nav-item, .mobile-nav-item { color: var(--text-muted) !important; }
.nav-item:hover, .md-nav-item:hover, .mobile-nav-item:hover { color: var(--text-primary) !important; background: rgba(99,102,241,0.10) !important; }

/* ── MISIONES COMPLETADAS — ESMERALDA ────────────────────── */
.mission-card.completed, .md-mission-card.completed, [data-status="completed"] { border-color: rgba(16,185,129,0.4) !important; background: var(--color-complete-bg) !important; }

/* ── LOGROS BLOQUEADOS — AMATISTA ────────────────────────── */
.achievement-card.locked, .achievement-card.ach-locked, .ach-locked .achievement-front { background: var(--color-locked-bg) !important; border-color: rgba(139,92,246,0.22) !important; }
.ach-locked .ach-icon { filter: grayscale(1) brightness(0.4) !important; }

/* ── BOTÓN PRINCIPAL — ÍNDIGO/ZAFIRO ─────────────────────── */
.md-btn-primary, .btn-primary, .mega-btn, .auth-btn, .md-btn:not(.md-btn-ghost) {
  background: linear-gradient(135deg, var(--color-xp), var(--color-rank)) !important;
  border: none !important;
  color: white !important;
  font-family: 'Cinzel', serif !important;
  border-radius: 14px !important;
  box-shadow: var(--glow-indigo) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.md-btn-primary:hover, .btn-primary:hover, .md-btn:hover { transform: translateY(-2px) scale(1.02) !important; filter: brightness(1.15) !important; }
.md-btn-ghost, .btn-secondary, .btn-outline-secondary { background: transparent !important; border: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; }

/* ── VERSÍCULO BÍBLICO — KQ-VERSE ────────────────────────── */
.kq-verse {
  background: rgba(99,102,241,0.06);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--color-xp);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.6;
  position: relative;
}
.kq-verse::before { content: '✦'; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); color: var(--color-xp); font-size: 0.5rem; }

/* ── ANIMACIÓN BUMP EN PUNTOS ────────────────────────────── */
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 60% { transform: scale(0.95); } 100% { transform: scale(1); } }

/* ── FADE IN UP ──────────────────────────────────────────── */
.fade-in-up { opacity: 0; transform: translateY(24px); animation: fadeInUp 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* ── MODALES — LEVEL UP / ACHIEVEMENT ───────────────────── */
.level-up-overlay, .achievement-overlay, .md-achievement-overlay { background: rgba(0,0,0,0.85) !important; backdrop-filter: blur(8px) !important; }
.level-up-modal, .achievement-modal, .md-achievement-modal { border: 1px solid var(--border-color) !important; box-shadow: var(--glow-indigo), var(--card-shadow) !important; }
.level-up-title, .achievement-title, .md-achieve-title {
  font-family: 'Cinzel Decorative', serif !important;
  background: linear-gradient(135deg, var(--gold-bright), var(--amber)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── TOAST NOTIFICATIONS ─────────────────────────────────── */
.md-toast, .toast {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px !important;
  box-shadow: var(--glow-indigo), var(--card-shadow) !important;
  backdrop-filter: blur(20px) !important;
  font-family: 'Cinzel', serif !important;
}

/* ── FORMULARIOS — LIGHT MODE ────────────────────────────── */
textarea, select, input, .form-control, .form-select {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] textarea, [data-theme="light"] select, [data-theme="light"] input, [data-theme="light"] .form-control, [data-theme="light"] .form-select {
  background: rgba(255,255,255,0.88) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* ── MODAL CONTENT ───────────────────────────────────────── */
[data-theme="light"] .modal-content, [data-theme="light"] .md-card, [data-theme="light"] .card { background: var(--bg-card) !important; }

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.4); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.7); }


/* ── V7 HARDENING 100%: el oro se gana, no se regala ───────────────── */
.md-sheet, .md-sheet-overlay .md-sheet, .modal-content, .dropdown-menu,
.md-topbar-notif, .topbar-alert, .topbar-toggle, .md-theme-toggle,
.md-mission-steps, .md-code-box, .md-checklist-item > div {
  border-color: var(--border-color) !important;
  box-shadow: var(--card-shadow) !important;
}
.md-toast, .toast, .alert-flash, .notification-item, [data-notification-unread] {
  border-color: var(--border-color) !important;
  box-shadow: var(--glow-indigo), var(--card-shadow) !important;
}
.md-achievement-modal, .achievement-modal, .level-up-modal {
  border-color: var(--border-color) !important;
  box-shadow: var(--glow-indigo), var(--card-shadow) !important;
}
.md-hero-stats .md-hero-stat:nth-child(1), .md-stat-pm, [data-points-display], .md-points-float {
  border-color: var(--border-gold) !important;
}

/* ── HOTFIX LEGIBILIDAD DARK THEME ───────────────────────── */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .small,
[data-theme="dark"] p,
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-text,
[data-theme="dark"] .card-text,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .table,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] .md-empty-state p,
[data-theme="dark"] .empty-state p,
[data-theme="dark"] .empty-state small,
[data-theme="dark"] .card p,
[data-theme="dark"] .card small,
[data-theme="dark"] .md-card p,
[data-theme="dark"] .md-card small,
[data-theme="dark"] .participant-content p,
[data-theme="dark"] .participant-content small,
[data-theme="dark"] .participant-content .small,
[data-theme="dark"] .page-subtitle,
[data-theme="dark"] .section-subtitle {
  color: rgba(240,239,254,0.88) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[readonly],
[data-theme="dark"] textarea[readonly],
[data-theme="dark"] .form-control[readonly] {
  color: var(--text-primary) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .form-control::placeholder {
  color: rgba(240,239,254,0.72) !important;
}

[data-theme="dark"] .card .text-muted,
[data-theme="dark"] .md-card .text-muted,
[data-theme="dark"] .card .small.text-muted,
[data-theme="dark"] .md-card .small.text-muted,
[data-theme="dark"] .text-center.text-muted,
[data-theme="dark"] .fw-medium,
[data-theme="dark"] .fw-semibold:not([style*="color:"]),
[data-theme="dark"] .fw-normal:not([style*="color:"]) {
  color: rgba(240,239,254,0.92) !important;
}

/* ── HOTFIX PERFIL: nombre y datos principales legibles en oscuro ── */
[data-theme="dark"] .participant-profile .fw-bold,
[data-theme="dark"] .profile-card .fw-bold,
[data-theme="dark"] .profile-summary .fw-bold,
[data-theme="dark"] .avatar-profile-card .fw-bold,
[data-theme="dark"] .card .fw-bold.mt-2,
[data-theme="dark"] .md-card .fw-bold.mt-2 {
  color: var(--text-primary) !important;
  text-shadow: 0 1px 10px rgba(240,239,254,0.18) !important;
}

[data-theme="dark"] .participant-profile .text-muted,
[data-theme="dark"] .profile-card .text-muted,
[data-theme="dark"] .profile-summary .text-muted,
[data-theme="dark"] .avatar-profile-card .text-muted,
[data-theme="dark"] .card .text-muted,
[data-theme="dark"] .md-card .text-muted {
  color: rgba(240,239,254,0.86) !important;
}

[data-theme="dark"] .participant-profile [style*="color:var(--md-gold)"]:not(.md-points-float):not([data-points-display]),
[data-theme="dark"] .profile-card [style*="color:var(--md-gold)"]:not(.md-points-float):not([data-points-display]),
[data-theme="dark"] .card [style*="color:var(--md-gold)"]:not(.md-points-float):not([data-points-display]) {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .participant-profile h2[style*="color:var(--md-gold)"],
[data-theme="dark"] .participant-profile h6[style*="color:var(--md-gold)"],
[data-theme="dark"] .profile-card h2[style*="color:var(--md-gold)"],
[data-theme="dark"] .profile-card h6[style*="color:var(--md-gold)"] {
  color: var(--text-primary) !important;
}