/* 🎨 CoinRewards - Nueva Identidad Visual */

/* 📱 Variables de la Nueva Paleta */
:root {
  --fondo-oscuro: #020817;
  --dorado-moneda: #FFC24A;
  --verde-confianza: #22C55E;
  --blanco-texto: #F9FAFB;
  --gris-suave: #64748B;
  --gris-claro: #E2E8F0;
  --azul-tech: #3B82F6;
  --dorado-gradiente: linear-gradient(135deg, #FFC24A 0%, #FFB800 100%);
  --verde-gradiente: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  --shadow-gold: 0 4px 20px rgba(255, 194, 74, 0.3);
  --shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.25);
}

html {
  font-size: 14px;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* 🌙 Dark Theme Principal */
body {
  background: var(--fondo-oscuro);
  color: var(--blanco-texto);
  margin-bottom: 60px;
  font-weight: 400;
  line-height: 1.6;
}

/* 🎯 Focus States Mejorados */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--dorado-moneda), 0 0 0 0.25rem rgba(255, 194, 74, 0.25);
}

/* 🏆 Header & Navigation */
.navbar-dark {
  background: var(--fondo-oscuro) !important;
  border-bottom: 2px solid var(--dorado-moneda);
  box-shadow: var(--shadow-dark);
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--dorado-moneda) !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-brand:hover {
  color: var(--blanco-texto) !important;
  text-shadow: 0 0 10px var(--dorado-moneda);
}

.nav-link {
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 8px;
  margin: 0 4px;
}

.nav-link:hover {
  background: rgba(255, 194, 74, 0.1);
  color: var(--dorado-moneda) !important;
  transform: translateY(-1px);
}

/* 🪙 Coin Icon Styling */
.fas.fa-coins, .coin-icon {
  color: var(--dorado-moneda);
  filter: drop-shadow(0 0 8px rgba(255, 194, 74, 0.6));
  animation: coinGlow 3s ease-in-out infinite alternate;
}

@keyframes coinGlow {
  from { filter: drop-shadow(0 0 8px rgba(255, 194, 74, 0.4)); }
  to { filter: drop-shadow(0 0 12px rgba(255, 194, 74, 0.8)); }
}

/* 💳 Cards Premium */
.card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 194, 74, 0.2);
  border-radius: 16px;
  box-shadow: var(--shadow-dark);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.card:hover {
  border-color: var(--dorado-moneda);
  box-shadow: var(--shadow-gold);
  transform: translateY(-4px);
}

.card-header {
  background: var(--dorado-gradiente);
  color: var(--fondo-oscuro);
  font-weight: 600;
  border-bottom: none;
  border-radius: 16px 16px 0 0 !important;
}

.card-body {
  padding: 1.5rem;
}

/* 🎯 Buttons Premium */
.btn-primary {
  background: var(--dorado-gradiente);
  border: none;
  color: var(--fondo-oscuro);
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-gold);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #FFB800 0%, #FF9500 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 194, 74, 0.4);
  color: var(--fondo-oscuro);
}

.btn-success {
  background: var(--verde-gradiente);
  border: none;
  color: white;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.btn-success:hover {
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
  transform: translateY(-2px);
}

.btn-outline-light {
  border: 2px solid var(--dorado-moneda);
  color: var(--dorado-moneda);
  background: transparent;
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-outline-light:hover {
  background: var(--dorado-moneda);
  color: var(--fondo-oscuro);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

/* 📝 Forms */
.form-control {
  background: rgba(15, 23, 42, 0.8);
  border: 2px solid rgba(255, 194, 74, 0.3);
  color: var(--blanco-texto);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-control:focus {
  background: rgba(15, 23, 42, 0.9);
  border-color: var(--dorado-moneda);
  color: var(--blanco-texto);
  box-shadow: 0 0 0 0.25rem rgba(255, 194, 74, 0.25);
}

.form-control::placeholder {
  color: var(--gris-suave);
  opacity: 0.8;
}

/* 🏅 Badges & Status */
.badge {
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 500;
  font-size: 0.875rem;
}

.badge-success {
  background: var(--verde-confianza);
  color: white;
}

.badge-warning {
  background: var(--dorado-moneda);
  color: var(--fondo-oscuro);
}

/* 📊 Progress Bars */
.progress {
  height: 12px;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 8px;
  overflow: hidden;
}

.progress-bar {
  background: var(--dorado-gradiente);
  transition: width 0.6s ease;
}

/* 🦶 Footer Premium */
.footer {
  background: rgba(2, 8, 23, 0.95);
  border-top: 2px solid var(--dorado-moneda);
  backdrop-filter: blur(10px);
  margin-top: 3rem;
}

.footer h6 {
  color: var(--dorado-moneda);
  font-weight: 600;
  margin-bottom: 1rem;
}

.footer .text-muted {
  color: var(--gris-suave) !important;
}

.footer a {
  transition: all 0.3s ease;
}

.footer a:hover {
  color: var(--dorado-moneda) !important;
  text-decoration: none;
}

/* 📱 Responsive Improvements */
@media (max-width: 768px) {
  .navbar-brand {
    font-size: 1.25rem;
  }
  
  .card {
    margin-bottom: 1rem;
  }
  
  .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* ✨ Animations & Effects */
.fade-in {
  animation: fadeIn 0.8s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* 🔒 Trust Elements */
.trust-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--verde-confianza);
  font-weight: 500;
  font-size: 0.875rem;
}

.trust-indicator .fas {
  color: var(--verde-confianza);
}

/* 💡 Special Effects */
.glow-text {
  text-shadow: 0 0 20px var(--dorado-moneda);
}

.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 🎮 Interactive Elements */
.interactive:hover {
  transform: translateY(-2px);
  transition: transform 0.3s ease;
}

.coin-balance {
  background: var(--dorado-gradiente);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-size: 2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ✨ Additional Animations & Effects */
.pulse-once {
  animation: pulseOnce 0.8s ease-in-out;
}

@keyframes pulseOnce {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.pulse-success {
  animation: pulseSuccess 1s ease-in-out;
}

@keyframes pulseSuccess {
  0% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% { 
    transform: scale(1.05); 
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
  100% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 194, 74, 0.2),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 🎪 Loading States */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 194, 74, 0.3),
    transparent
  );
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 🎯 Status Indicators */
.status-online {
  color: var(--verde-confianza);
  animation: statusGlow 2s ease-in-out infinite alternate;
}

.status-offline {
  color: #EF4444;
  animation: statusBlink 1s ease-in-out infinite;
}

@keyframes statusGlow {
  from { text-shadow: 0 0 5px var(--verde-confianza); }
  to { text-shadow: 0 0 15px var(--verde-confianza); }
}

@keyframes statusBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.5; }
}

/* 📱 Mobile-specific styles */
@media (max-width: 480px) {
  .coin-balance {
    font-size: 1.5rem;
  }
  
  .hero-section {
    padding: 2rem 1rem !important;
  }
  
  .feature-icon {
    width: 60px;
    height: 60px;
  }
  
  .feature-icon i {
    font-size: 2rem !important;
  }
  
  .info-item {
    padding: 1rem 0.5rem;
  }
}

/* 🎮 Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 🌙 Dark mode enhancements */
@media (prefers-color-scheme: dark) {
  .glass-effect {
    background: rgba(0, 0, 0, 0.3);
  }
}

/* 🎨 Print styles */
@media print {
  .navbar,
  .footer,
  .btn,
  .interactive {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .card {
    border: 1px solid #000 !important;
    box-shadow: none !important;
  }
}

html {
  position: relative;
  min-height: 100%;
}