/* ===== INFOMASTER DARK MODE - CSS GLOBAL COMPLETO ===== */

/* Variables globales para modo claro */
:root {
  /* Colores principales */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  
  /* Bordes y sombras */
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  --shadow-heavy: rgba(0, 0, 0, 0.25);
  
  /* Header específico */
  --header-bg: rgba(255, 255, 255, 0.95);
  --nav-bg: #ffffff;
  
  /* Cards y componentes */
  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  --card-shadow: rgba(0, 0, 0, 0.1);
  
  /* Botones */
  --btn-bg: #f8fafc;
  --btn-border: #e2e8f0;
  --btn-text: #1e293b;
  --btn-hover-bg: #f1f5f9;
  
  /* Inputs */
  --input-bg: #ffffff;
  --input-border: #e2e8f0;
  --input-text: #1e293b;
  --input-placeholder: #94a3b8;
  
  /* Hero section */
  --hero-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --hero-overlay: rgba(0, 0, 0, 0.3);
  --hero-text: #ffffff;
  
  /* Footer */
  --footer-bg: #1e293b;
  --footer-text: #f1f5f9;
  
  /* Gradientes */
  --gradient-main: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
  --gradient-accent: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-dark: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

/* Variables para modo oscuro */
[data-theme="dark"] {
  /* Colores principales */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  
  /* Bordes y sombras */
  --border-color: #334155;
  --border-light: #475569;
  --shadow-light: rgba(0, 0, 0, 0.3);
  --shadow-medium: rgba(0, 0, 0, 0.4);
  --shadow-heavy: rgba(0, 0, 0, 0.6);
  
  /* Header específico */
  --header-bg: rgba(15, 23, 42, 0.95);
  --nav-bg: #1e293b;
  
  /* Cards y componentes */
  --card-bg: #1e293b;
  --card-border: #334155;
  --card-shadow: rgba(0, 0, 0, 0.4);
  
  /* Botones */
  --btn-bg: #334155;
  --btn-border: #475569;
  --btn-text: #f1f5f9;
  --btn-hover-bg: #475569;
  
  /* Inputs */
  --input-bg: #1e293b;
  --input-border: #334155;
  --input-text: #f1f5f9;
  --input-placeholder: #94a3b8;
  
  /* Hero section */
  --hero-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  --hero-overlay: rgba(0, 0, 0, 0.5);
  --hero-text: #f1f5f9;
  
  /* Footer */
  --footer-bg: #0f172a;
  --footer-text: #cbd5e1;
  
  /* Gradientes más oscuros */
  --gradient-main: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #0891b2 100%);
  --gradient-accent: linear-gradient(135deg, #059669 0%, #047857 100%);
  --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* ===== APLICACIÓN GLOBAL DE VARIABLES ===== */

/* Body y elementos principales */
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* ===== HEADER Y NAVEGACIÓN ===== */
.header {
  background-color: var(--header-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.nav-link {
  color: var(--text-primary) !important;
  transition: all 0.3s ease !important;
}

.nav-link:hover {
  color: #10b981 !important;
  background-color: rgba(16, 185, 129, 0.1) !important;
}

.nav-link.active {
  color: #10b981 !important;
  background-color: rgba(16, 185, 129, 0.15) !important;
}

/* ===== BOTONES GLOBALES ===== */
.btn {
  background-color: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: 1px solid var(--btn-border) !important;
  transition: all 0.3s ease !important;
}

.btn:hover {
  background-color: var(--btn-hover-bg) !important;
  color: var(--btn-text) !important;
  transform: translateY(-2px) !important;
}

.btn-primary {
  background: var(--gradient-main) !important;
  color: white !important;
  border: none !important;
}

.btn-primary:hover {
  background: var(--gradient-main) !important;
  filter: brightness(1.1) !important;
  transform: translateY(-2px) !important;
}

.btn-outline {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 2px solid var(--border-color) !important;
}

.btn-outline:hover {
  background-color: var(--bg-secondary) !important;
  border-color: var(--text-primary) !important;
}

/* ===== BÚSQUEDA ===== */
.search-input {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
}

.search-input::placeholder {
  color: var(--input-placeholder) !important;
}

.search-btn {
  background-color: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: 1px solid var(--btn-border) !important;
}

.search-btn:hover {
  background-color: var(--btn-hover-bg) !important;
}

/* ===== DROPDOWNS ===== */
.dropdown-menu {
  background-color: var(--nav-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 20px var(--shadow-medium) !important;
}

.dropdown-item {
  color: var(--text-primary) !important;
  transition: all 0.3s ease !important;
}

.dropdown-item:hover {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* ===== CARDS Y PRODUCTOS ===== */
.product-card,
.category-card,
.feature-card,
.testimonial-card {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 4px 15px var(--card-shadow) !important;
  transition: all 0.3s ease !important;
}

.product-card:hover,
.category-card:hover,
.feature-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 25px var(--shadow-medium) !important;
}

.product-title,
.category-title,
.feature-title {
  color: var(--text-primary) !important;
}

.product-description,
.category-description,
.feature-description {
  color: var(--text-secondary) !important;
}

/* ===== HERO SECTION ===== */
.hero {
  background: var(--hero-bg) !important;
  color: var(--hero-text) !important;
}

.hero-content h1 {
  color: var(--hero-text) !important;
}

.hero-content p {
  color: var(--hero-text) !important;
  opacity: 0.9 !important;
}

/* ===== SLIDER ===== */
.hero-slider .slide-caption {
  background: var(--hero-overlay) !important;
  color: var(--hero-text) !important;
}

.hero-slider .slide-caption h2 {
  color: var(--hero-text) !important;
}

.hero-slider .slide-caption p {
  color: var(--hero-text) !important;
  opacity: 0.9 !important;
}

/* ===== SECCIONES ===== */
.featured-products,
.categories,
.features,
.stats,
.how-it-works-section,
.testimonials-section,
.cta-section {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.section-title {
  color: var(--text-primary) !important;
}

/* ===== ESTADÍSTICAS ===== */
.stats {
  background: var(--gradient-dark) !important;
  color: var(--hero-text) !important;
}

.stat-number {
  color: #10b981 !important;
}

.stat-label {
  color: var(--hero-text) !important;
  opacity: 0.8 !important;
}

/* ===== CTA SECTION ===== */
.cta-section {
  background: var(--gradient-main) !important;
  color: white !important;
}

.cta-section h2,
.cta-section p {
  color: white !important;
}

/* ===== FOOTER ===== */
.footer {
  background-color: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  border-top: 1px solid var(--border-color) !important;
}

.footer h3,
.footer h4 {
  color: var(--footer-text) !important;
}

.footer a {
  color: var(--footer-text) !important;
  opacity: 0.8 !important;
  transition: opacity 0.3s ease !important;
}

.footer a:hover {
  opacity: 1 !important;
  color: #10b981 !important;
}

/* ===== WALLET Y CARRITO ===== */
.wallet {
  background-color: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: 1px solid var(--btn-border) !important;
}

.cart {
  color: var(--text-primary) !important;
}

.cart-count {
  background: #ef4444 !important;
  color: white !important;
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: 1px solid var(--btn-border) !important;
}

.theme-toggle:hover {
  background: var(--btn-hover-bg) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px var(--shadow-medium) !important;
}

/* ===== FORMS Y INPUTS ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder) !important;
}

/* ===== MOBILE TOGGLE ===== */
.mobile-toggle span {
  background-color: var(--text-primary) !important;
}

/* ===== LOGO ===== */
.logo-text {
  color: var(--text-primary) !important;
}

/* ===== TESTIMONIALS ===== */
.testimonial-card blockquote {
  color: var(--text-secondary) !important;
}

.author-details h4 {
  color: var(--text-primary) !important;
}

.author-details span {
  color: var(--text-muted) !important;
}

/* ===== BADGES Y ELEMENTOS ESPECIALES ===== */
.trust-badges .badge {
  color: var(--hero-text) !important;
}

.verified-badge {
  background: #10b981 !important;
  color: white !important;
}

.category-badge {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

/* ===== SWIPER NAVIGATION ===== */
.swiper-button-prev,
.swiper-button-next {
  color: var(--text-primary) !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 50% !important;
}

.swiper-pagination-bullet {
  background: var(--text-secondary) !important;
}

.swiper-pagination-bullet-active {
  background: #10b981 !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .theme-toggle {
    width: 40px !important;
    height: 40px !important;
  }
  
  .panel-vip span {
    display: none !important;
  }
}

/* ===== SMOOTH TRANSITIONS ===== */
* {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease, 
              box-shadow 0.3s ease !important;
}

/* ===== FOCUS STATES ===== */
.btn:focus,
.nav-link:focus,
.theme-toggle:focus,
input:focus,
textarea:focus {
  outline: 2px solid #10b981 !important;
  outline-offset: 2px !important;
}