/* =================================================== MODO OSCURO ESPECÍFICO - Solo para elementos seleccionados ================================================== */ /* Detección automática del modo oscuro del sistema */ @media (prefers-color-scheme: dark) { /* =================================================== PRECIO FLOTANTE - MODO OSCURO ================================================== */ /* Contenedor principal del precio flotante */ .product-header-image div[style*="position: absolute"][style*="bottom: 15px"] { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #404040 100%) !important; border: 2px solid #00d4aa !important; box-shadow: 0 0 25px rgba(0, 212, 170, 0.4), inset 0 0 20px rgba(0, 212, 170, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3) !important; } /* Efectos holográficos del precio en modo oscuro */ .product-header-image div[style*="holographic_sweep"] { background: linear-gradient(90deg, transparent 0%, rgba(0, 212, 170, 0.3) 50%, transparent 100%) !important; } /* Elementos decorativos del precio flotante */ .product-header-image div[style*="box-shadow"][style*="rgba(0, 255, 255"] { box-shadow: 0 0 12px rgba(0, 212, 170, 0.9) !important; } .product-header-image div[style*="box-shadow"][style*="rgba(0, 255, 136"] { box-shadow: 0 0 10px rgba(0, 212, 170, 0.7) !important; } /* =================================================== CARACTERÍSTICAS - CÍRCULOS BLANCOS (sin afectar imágenes) ================================================== */ /* Características flotantes - solo fondos circulares */ [style*="border-radius: 50%"][style*="background:"] { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2), 0 0 40px rgba(255, 255, 255, 0.1) !important; } /* Círculos específicos con gradientes - convertir a blanco */ [style*="background: linear-gradient"][style*="border-radius: 50%"] { background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%) !important; } /* Círculos con colores específicos - mantener solo blancos */ [style*="background: rgba(255,255,255,"][style*="border-radius: 50%"] { background: rgba(255, 255, 255, 0.98) !important; } /* Efectos de brillo en círculos para modo oscuro */ [style*="border-radius: 50%"] { border: 1px solid rgba(255, 255, 255, 0.3) !important; } /* =================================================== ANIMACIONES ESPECÍFICAS PARA MODO OSCURO ================================================== */ /* Animación mejorada para precio flotante en modo oscuro */ @keyframes futuristic_glow_dark { 0% { box-shadow: 0 0 20px rgba(0, 212, 170, 0.4), inset 0 0 20px rgba(0, 212, 170, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3); } 50% { box-shadow: 0 0 40px rgba(0, 212, 170, 0.7), inset 0 0 30px rgba(0, 212, 170, 0.2), 0 12px 40px rgba(0, 0, 0, 0.4); } 100% { box-shadow: 0 0 20px rgba(0, 212, 170, 0.4), inset 0 0 20px rgba(0, 212, 170, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3); } } /* Aplicar animación oscura al precio flotante */ .product-header-image div[style*="animation: futuristic_glow"] { animation: futuristic_glow_dark 3s ease-in-out infinite alternate !important; } /* Animación para círculos blancos en modo oscuro */ @keyframes white_circle_glow { 0% { box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2), 0 0 40px rgba(255, 255, 255, 0.1); } 50% { box-shadow: 0 12px 35px rgba(255, 255, 255, 0.3), 0 0 50px rgba(255, 255, 255, 0.2); } 100% { box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2), 0 0 40px rgba(255, 255, 255, 0.1); } } /* =================================================== PROTECCIÓN DE IMÁGENES - NO CAMBIAR ================================================== */ /* Asegurar que las imágenes dentro de círculos NO cambien */ [style*="border-radius: 50%"] img { filter: none !important; opacity: 1 !important; background: transparent !important; } /* Proteger todas las imágenes de producto */ .imagen-producto-header, .product-header-image img, [src*="audifono-jbl"], [src*="productos/images/"] { filter: none !important; background: transparent !important; mix-blend-mode: normal !important; } /* =================================================== MODO OSCURO SOLO PARA ELEMENTOS ESPECÍFICOS ================================================== */ /* NO cambiar fondos generales de secciones */ /* NO cambiar colores de texto principales */ /* NO cambiar imágenes de producto */ /* NO cambiar botones WhatsApp */ /* NO cambiar navegación */ /* Solo aplicar a: */ /* 1. Precio flotante (contenedor y efectos) */ /* 2. Círculos de características (fondos únicamente) */ } /* =================================================== MODO OSCURO FORZADO - Para testing ================================================== */ /* Comentar/descomentar para forzar modo oscuro independientemente del sistema */ /* body[data-theme="dark"] .product-header-image div[style*="position: absolute"][style*="bottom: 15px"], body.dark-mode .product-header-image div[style*="position: absolute"][style*="bottom: 15px"] { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #404040 100%) !important; border: 2px solid #00d4aa !important; box-shadow: 0 0 25px rgba(0, 212, 170, 0.4), inset 0 0 20px rgba(0, 212, 170, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3) !important; } body[data-theme="dark"] [style*="border-radius: 50%"][style*="background:"], body.dark-mode [style*="border-radius: 50%"][style*="background:"] { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2), 0 0 40px rgba(255, 255, 255, 0.1) !important; } */ /* =================================================== COMENTARIOS DE IMPLEMENTACIÓN =================================================== Este CSS implementa modo oscuro ESPECÍFICAMENTE para: 1. PRECIO FLOTANTE: - Fondo: De azul futurista a gris oscuro elegante - Borde: De cyan a verde aguamarina (#00d4aa) - Efectos: Adaptados a tonos oscuros - Animaciones: Optimizadas para contraste oscuro 2. CÍRCULOS DE CARACTERÍSTICAS: - Fondos: Convertidos a blanco puro/casi blanco - Imágenes: NO modificadas (protegidas explícitamente) - Efectos: Brillo sutil blanco para visibilidad 3. LO QUE NO CAMBIA: - Imágenes de productos (protegidas) - Botones WhatsApp (mantienen identidad verde) - Fondos generales de secciones - Navegación y textos principales - Videos y elementos multimedia 4. DETECCIÓN: - Automática: @media (prefers-color-scheme: dark) - Manual: Se puede forzar con clases/atributos (comentado) ================================================== */