@import url("/css/zoom-correction.css");
/* Sistema de Temas - PUMBISTORE */

/* Tema Naranja/Azul (Tema Cliente) */
[data-theme="orange"] {
  --primary: #ff6b35;
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a1a;
  --bg-card: #2a2a2a;
  --bg-hover: #3a3a3a;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-muted: #808080;
  --border: #404040;
  --success: #2ed573;
  --danger: #ff4757;
  --warning: #ffa502;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.6);
  --gradient-primary: linear-gradient(135deg, #ff6b35, #00d4ff);
  --gradient-primary-hover: linear-gradient(135deg, #00d4ff, #ff6b35);
  --gradient-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
  --gradient-text: linear-gradient(135deg, #ff6b35 0%, #00d4ff 50%, #4ecdc4 100%);
  --gradient-card: linear-gradient(145deg, #2a2a2a, #1f1f1f);
  --accent-orange: #ff6b35;
  --accent-blue: #00d4ff;
  --accent-teal: #4ecdc4;
  --focus-shadow: rgba(255, 107, 53, 0.2);
  --btn-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
  --btn-shadow-hover: 0 8px 25px rgba(255, 107, 53, 0.4);
}

/* Tema Púrpura (Tema Admin) */
[data-theme="purple"] {
  --primary: #8b5cf6;
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-card: #171717;
  --bg-hover: #262626;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --border: #374151;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
  --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 30%, #6d28d9 70%, #4c1d95 100%);
  --gradient-primary-hover: linear-gradient(135deg, #9333ea 0%, #8b5cf6 30%, #7c3aed 70%, #6d28d9 100%);
  --gradient-bg: linear-gradient(135deg, #0a0a0a 0%, #111111 50%, #0a0a0a 100%);
  --gradient-text: linear-gradient(135deg, #a855f7 0%, #8b5cf6 50%, #7c3aed 100%);
  --gradient-card: linear-gradient(145deg, #171717, #0f0f0f);
  --accent-orange: #8b5cf6;
  --accent-blue: #7c3aed;
  --accent-teal: #6d28d9;
  --focus-shadow: rgba(139, 92, 246, 0.15);
  --btn-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
  --btn-shadow-hover: 0 8px 25px rgba(147, 51, 234, 0.5);
}

/* Botón de cambio de tema */
.theme-toggle {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 1000;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 50px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.theme-toggle .icon {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.theme-toggle:hover .icon {
  transform: rotate(180deg);
}

/* Animación de transición de tema */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Estilos específicos para fondos según tema - fondo negro sólido */
[data-theme="orange"] body::before {
  background: #000000;
}

[data-theme="purple"] body::before {
  background: #000000;
}



/* Estrellas fugaces según tema */
[data-theme="orange"] .shooting-star2 {
  background: linear-gradient(90deg, #ff6b35, transparent);
}

[data-theme="orange"] .shooting-star3 {
  background: linear-gradient(90deg, #00d4ff, transparent);
}

[data-theme="purple"] .shooting-star2 {
  background: linear-gradient(90deg, #8b5cf6, transparent);
}

[data-theme="purple"] .shooting-star3 {
  background: linear-gradient(90deg, #a855f7, transparent);
}

/* Responsive */
@media (max-width: 768px) {
  .theme-toggle {
    top: 70px;
    right: 15px;
    padding: 10px 12px;
    font-size: 12px;
  }
  
  .theme-toggle .icon {
    font-size: 14px;
  }
}