/* ============================================================
   CYBERPUNK MODE - Estilos para el modo Cyberpunk
   Colores: #3c82c8 (azul) y #993399 (morado)
   ============================================================ */

/* ============================================================
   1. VARIABLES Y CONFIGURACIÓN BASE
   ============================================================ */

body.cyberpunk-mode {
    --cyber-primary: #993399;
    --cyber-secondary: #3c82c8;
    --cyber-accent: #7a2a7a;
    --cyber-blue: #3c82c8;
    --cyber-purple: #993399;
    --cyber-bg: #0a0a12;
    --cyber-text: #993399;
    --cyber-text-secondary: #3c82c8;
    --cyber-border: #993399;
    --cyber-border-blue: #3c82c8;
    --cyber-shadow: rgba(153, 51, 153, 0.3);
    --cyber-shadow-blue: rgba(60, 130, 200, 0.3);
    --cyber-shadow-strong: rgba(153, 51, 153, 0.5);
    --cyber-shadow-blue-strong: rgba(60, 130, 200, 0.5);
    --cyber-neon: rgba(153, 51, 153, 0.15);
    --cyber-neon-blue: rgba(60, 130, 200, 0.15);
}

/* ============================================================
   2. FONDO Y OVERLAY
   ============================================================ */

body.cyberpunk-mode {
    background-color: var(--cyber-bg) !important;
}

body.cyberpunk-mode::before {
    filter: grayscale(100%) brightness(0.5) contrast(1.3) 
            hue-rotate(220deg) sepia(0.2) !important;
}

body.cyberpunk-mode::after {
    background-color: rgba(10, 10, 18, 0.88) !important;
}

body.cyberpunk-mode .header {
    background: rgba(153, 51, 153, 0.2) !important;
    border-bottom: 3px solid var(--cyber-border-blue) !important;
    box-shadow: 0 4px 25px var(--cyber-shadow) !important;
}

/* ============================================================
   3. COLORES GENERALES
   ============================================================ */

body.cyberpunk-mode * {
    filter: var(--cyber-filter, none);
}

/* Textos principales - Morado */
body.cyberpunk-mode h1,
body.cyberpunk-mode h2,
body.cyberpunk-mode h3,
body.cyberpunk-mode h4,
body.cyberpunk-mode .banda-info h1,
body.cyberpunk-mode .tab-btn::before,
body.cyberpunk-mode .release-title,
body.cyberpunk-mode .video-title,
body.cyberpunk-mode .juego-nombre,
body.cyberpunk-mode .footer {
    color: var(--cyber-primary) !important;
}

/* Textos secundarios - Azul */
body.cyberpunk-mode p,
body.cyberpunk-mode span,
body.cyberpunk-mode li,
body.cyberpunk-mode strong,
body.cyberpunk-mode .track-icon .mic-btn i,
body.cyberpunk-mode .track-name,
body.cyberpunk-mode .release-year,
body.cyberpunk-mode .subtitulo,
body.cyberpunk-mode .juego-texto {
    color: var(--cyber-secondary) !important;
}

/* H2 con borde azul y sombra */
body.cyberpunk-mode h1,body.cyberpunk-mode h2 {
    border-bottom: 2px solid var(--cyber-border-blue) !important;
    text-shadow: 0 0 30px var(--cyber-shadow-blue) !important;
}

/* Enlaces - Morado con hover a Azul */
body.cyberpunk-mode a {
    color: var(--cyber-primary) !important;
    text-shadow: 0 0 10px var(--cyber-shadow) !important;
}

body.cyberpunk-mode a:hover {
    color: var(--cyber-secondary) !important;
    text-shadow: 0 0 30px var(--cyber-shadow-blue-strong) !important;
}

/* ============================================================
   4. BORDES Y SOMBRAS
   ============================================================ */

/* Bordes principales - Morado con sombra azul */
body.cyberpunk-mode .slider-container,
body.cyberpunk-mode .banda-imagen,
body.cyberpunk-mode .banda-info,
body.cyberpunk-mode .banda-content,
body.cyberpunk-mode .release-container,
body.cyberpunk-mode .lyrics-popup,
body.cyberpunk-mode .lyrics-popup-close,
body.cyberpunk-mode .lightbox-close,
body.cyberpunk-mode .lightbox-nav,
body.cyberpunk-mode .juego-container,
body.cyberpunk-mode .track-list,
body.cyberpunk-mode .info-hero,
body.cyberpunk-mode .info-gallery-item,
body.cyberpunk-mode .platform-menu {
    border-color: var(--cyber-border) !important;
    box-shadow: 0 0 30px var(--cyber-shadow) !important;
}

/* Slider con borde azul */
body.cyberpunk-mode .slider-container {
    border: 2px solid var(--cyber-border-blue) !important;
    box-shadow: 0 0 30px var(--cyber-shadow-blue) !important;
}

/* Hover - Cambio a Azul con sombra más fuerte */
body.cyberpunk-mode .video-thumbnail:hover,
body.cyberpunk-mode .release-container:hover,
body.cyberpunk-mode .release-cover:hover,
body.cyberpunk-mode .extras-section .carrusel-item:hover,
body.cyberpunk-mode .juego-imagen:hover,
body.cyberpunk-mode .juego-container:hover {
    border-color: var(--cyber-border-blue) !important;
    box-shadow: 0 0 40px var(--cyber-shadow-blue-strong) !important;
}

body.cyberpunk-mode .footer {
    border-top: 3px solid var(--cyber-border-blue) !important;
}

/* ============================================================
   5. BOTONES Y CONTROLES
   ============================================================ */

/* Botones de reproducción (play) */
body.cyberpunk-mode .play-button,
body.cyberpunk-mode .play-button:hover,
body.cyberpunk-mode .juego-play-button,
body.cyberpunk-mode .juego-play-button:hover {
    background: rgba(10, 10, 18, 0.92) !important;
    border: 3px solid var(--cyber-border-blue);
}

body.cyberpunk-mode .play-button,
body.cyberpunk-mode .juego-play-button {
    box-shadow: 0 0 40px var(--cyber-shadow) !important;
}

body.cyberpunk-mode .play-button:hover,
body.cyberpunk-mode .juego-play-button:hover {
    box-shadow: 0 0 50px var(--cyber-shadow-blue-strong) !important;
    border-color: var(--cyber-border-blue) !important;
}

body.cyberpunk-mode .play-button i,
body.cyberpunk-mode .play-button i:hover,
body.cyberpunk-mode .juego-play-button i,
body.cyberpunk-mode .juego-play-button i:hover {
    color: var(--cyber-primary) !important;
}

/* Pestañas */
body.cyberpunk-mode .tab-btn {
    color: #4a1a4a !important;
}

body.cyberpunk-mode .tab-btn.active {
    color: var(--cyber-primary) !important;
    background: var(--cyber-neon) !important;
    border-bottom: 2px solid var(--cyber-border-blue) !important;
}

body.cyberpunk-mode .tab-btn.active::after {
    background: var(--cyber-border-blue) !important;
    box-shadow: 0 0 20px var(--cyber-shadow-blue-strong) !important;
}

body.cyberpunk-mode .tab-btn:hover {
    color: var(--cyber-secondary) !important;
    background: var(--cyber-neon-blue) !important;
}

/* Botones slider y carrusel */
body.cyberpunk-mode .slider-btn,
body.cyberpunk-mode .carrusel-arrow {
    border-color: var(--cyber-border-blue) !important;
    color: var(--cyber-primary) !important;
    background: rgba(10, 10, 18, 0.92) !important;
    box-shadow: 0 0 20px var(--cyber-shadow) !important;
}

body.cyberpunk-mode .slider-btn:hover,
body.cyberpunk-mode .carrusel-arrow:hover {
    background: var(--cyber-border-blue) !important;
    color: #000000 !important;
    box-shadow: 0 0 40px var(--cyber-shadow-blue-strong) !important;
    border-color: var(--cyber-border-blue) !important;
}

/* Botón micrófono */
body.cyberpunk-mode .mic-btn {
    border-color: var(--cyber-border-blue) !important;
    color: var(--cyber-primary) !important;
    background: rgba(10, 10, 18, 0.7) !important;
    box-shadow: 0 0 10px var(--cyber-shadow) !important;
}

body.cyberpunk-mode .mic-btn:hover {
    background: var(--cyber-border-blue) !important;
    color: #000000 !important;
    box-shadow: 0 0 30px var(--cyber-shadow-blue-strong) !important;
    border-color: var(--cyber-border-blue) !important;
}

body.cyberpunk-mode .mic-btn:hover i {
    color: #000000 !important;
}

/* Dropdown */
body.cyberpunk-mode .platform-btn {
    border-color: var(--cyber-border-blue) !important;
    color: var(--cyber-primary) !important;
    background: rgba(10, 10, 18, 0.7) !important;
    box-shadow: 0 0 10px var(--cyber-shadow) !important;
}

body.cyberpunk-mode .platform-btn:hover {
    background: var(--cyber-border-blue) !important;
    color: #000000 !important;
    border-color: var(--cyber-border-blue) !important;
    box-shadow: 0 0 30px var(--cyber-shadow-blue-strong) !important;
}

body.cyberpunk-mode .platform-menu {
    border-color: var(--cyber-border-blue) !important;
    background: var(--cyber-bg) !important;
    box-shadow: 0 0 30px var(--cyber-shadow) !important;
}

body.cyberpunk-mode .platform-menu li a {
    color: var(--cyber-primary) !important;
}

body.cyberpunk-mode .platform-menu li a:hover {
    background: var(--cyber-border-blue) !important;
    color: #000000 !important;
}

/* ============================================================
   6. LYRICS Y LIGHTBOX
   ============================================================ */

body.cyberpunk-mode .lyrics-popup-close,
body.cyberpunk-mode .lightbox-close,
body.cyberpunk-mode .lightbox-nav {
    color: var(--cyber-primary) !important;
    border-color: var(--cyber-border-blue) !important;
    box-shadow: 0 0 15px var(--cyber-shadow) !important;
}

body.cyberpunk-mode .lightbox-counter {
    color: var(--cyber-secondary) !important;
}

body.cyberpunk-mode .lyrics-popup-close:hover,
body.cyberpunk-mode .lightbox-close:hover,
body.cyberpunk-mode .lightbox-nav:hover {
    color: #000000 !important;
    background: var(--cyber-border-blue) !important;
    box-shadow: 0 0 40px var(--cyber-shadow-blue-strong) !important;
    border-color: var(--cyber-border-blue) !important;
}

body.cyberpunk-mode .lyrics-popup {
    border-color: var(--cyber-border-blue) !important;
    box-shadow: 0 0 50px var(--cyber-shadow) !important;
}

body.cyberpunk-mode .lyrics-popup h3 {
    border-bottom: 2px solid var(--cyber-border-blue) !important;
    color: var(--cyber-primary) !important;
    text-shadow: 0 0 20px var(--cyber-shadow) !important;
}

body.cyberpunk-mode .lyrics-popup .track-name {
    color: var(--cyber-secondary) !important;
}

body.cyberpunk-mode .lyrics-content {
    color: var(--cyber-primary) !important;
}

/* ============================================================
   7. EFECTO NEON
   ============================================================ */

.cyber-neon-glow {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99998;
    opacity: 0.03;
    background: radial-gradient(
        ellipse at 30% 50%,
        rgba(60, 130, 200, 0.1) 0%,
        transparent 60%
    );
    animation: cyberNeonPulse 3s ease-in-out infinite;
}

body.cyberpunk-mode .cyber-neon-glow {
    display: block !important;
}

@keyframes cyberNeonPulse {
    0% { opacity: 0.02; }
    50% { opacity: 0.05; }
    100% { opacity: 0.02; }
}

/* ============================================================
   8. FILTROS DE IMÁGENES - CYBERPUNK
   ============================================================ */

/* Filtro base para todas las imágenes - Tonos azul/morado */
body.cyberpunk-mode img:not(.matrix-rain img) {
    filter: grayscale(100%) brightness(0.6) contrast(1.2) 
            hue-rotate(220deg) sepia(0.2) 
            drop-shadow(0 0 8px var(--cyber-shadow)) !important;
    transition: filter 0.5s ease !important;
}

/* ============================================================
   8.1 IMAGEN DE PERFIL (banda-imagen)
   ============================================================ */

body.cyberpunk-mode .banda-imagen img {
    filter: grayscale(100%) brightness(0.65) contrast(1.2) 
            hue-rotate(220deg) sepia(0.2) 
            drop-shadow(0 0 20px var(--cyber-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.cyberpunk-mode .banda-imagen:hover img {
    filter: grayscale(100%) brightness(0.45) contrast(1.3) 
            hue-rotate(220deg) sepia(0.3) 
            drop-shadow(0 0 30px var(--cyber-shadow-blue-strong)) !important;
}

/* ============================================================
   8.2 SLIDER
   ============================================================ */

body.cyberpunk-mode .slider-track .slide {
    filter: grayscale(100%) brightness(0.55) contrast(1.3) 
            hue-rotate(220deg) sepia(0.2) 
            drop-shadow(0 0 20px var(--cyber-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.cyberpunk-mode .slider-container:hover .slide {
    filter: grayscale(100%) brightness(0.4) contrast(1.4) 
            hue-rotate(220deg) sepia(0.3) 
            drop-shadow(0 0 30px var(--cyber-shadow-blue-strong)) !important;
}

/* ============================================================
   8.3 PORTADAS DE DISCOS
   ============================================================ */

body.cyberpunk-mode .release-cover img {
    filter: grayscale(100%) brightness(0.65) contrast(1.1) 
            hue-rotate(220deg) sepia(0.15) 
            drop-shadow(0 0 10px var(--cyber-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.cyberpunk-mode .release-cover:hover img {
    filter: grayscale(100%) brightness(0.45) contrast(1.2) 
            hue-rotate(220deg) sepia(0.25) 
            drop-shadow(0 0 20px var(--cyber-shadow-blue-strong)) !important;
}

/* ============================================================
   8.4 SPOTIFY
   ============================================================ */

body.cyberpunk-mode .banda-spotify iframe {
    filter: grayscale(100%) brightness(0.65) contrast(1.1) 
            hue-rotate(220deg) sepia(0.15) 
            drop-shadow(0 0 10px var(--cyber-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.cyberpunk-mode .banda-spotify iframe:hover {
    filter: grayscale(100%) brightness(0.45) contrast(1.2) 
            hue-rotate(220deg) sepia(0.25) 
            drop-shadow(0 0 25px var(--cyber-shadow-blue-strong)) !important;
}

/* ============================================================
   8.5 CARRUSELES EXTRAS
   ============================================================ */

body.cyberpunk-mode .extras-section .carrusel-item img {
    filter: grayscale(100%) brightness(0.65) contrast(1.15) 
            hue-rotate(220deg) sepia(0.2) 
            drop-shadow(0 0 8px var(--cyber-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.cyberpunk-mode .extras-section .carrusel-item:hover img {
    filter: grayscale(100%) brightness(0.45) contrast(1.25) 
            hue-rotate(220deg) sepia(0.3) 
            drop-shadow(0 0 20px var(--cyber-shadow-blue-strong)) !important;
}

/* ============================================================
   8.6 JUEGOS
   ============================================================ */

body.cyberpunk-mode .juego-imagen img {
    filter: grayscale(100%) brightness(0.65) contrast(1.15) 
            hue-rotate(220deg) sepia(0.2) 
            drop-shadow(0 0 8px var(--cyber-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.cyberpunk-mode .juego-imagen:hover img {
    filter: grayscale(100%) brightness(0.45) contrast(1.25) 
            hue-rotate(220deg) sepia(0.3) 
            drop-shadow(0 0 20px var(--cyber-shadow-blue-strong)) !important;
}

/* ============================================================
   8.7 VIDEOS
   ============================================================ */

body.cyberpunk-mode .video-thumbnail img {
    filter: grayscale(100%) brightness(0.65) contrast(1.15) 
            hue-rotate(220deg) sepia(0.2) 
            drop-shadow(0 0 8px var(--cyber-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.cyberpunk-mode .video-thumbnail:hover img {
    filter: grayscale(100%) brightness(0.45) contrast(1.25) 
            hue-rotate(220deg) sepia(0.3) 
            drop-shadow(0 0 20px var(--cyber-shadow-blue-strong)) !important;
}

/* ============================================================
   8.8 GALERÍA DE FOTOS
   ============================================================ */

body.cyberpunk-mode .info-gallery-item img {
    filter: grayscale(100%) brightness(0.65) contrast(1.15) 
            hue-rotate(220deg) sepia(0.2) 
            drop-shadow(0 0 8px var(--cyber-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.cyberpunk-mode .info-gallery-item:hover img {
    filter: grayscale(100%) brightness(0.45) contrast(1.25) 
            hue-rotate(220deg) sepia(0.3) 
            drop-shadow(0 0 20px var(--cyber-shadow-blue-strong)) !important;
}

body.cyberpunk-mode .info-hero img {
    filter: grayscale(100%) brightness(0.55) contrast(1.2) 
            hue-rotate(220deg) sepia(0.2) 
            drop-shadow(0 0 15px var(--cyber-shadow)) !important;
    transition: filter 0.5s ease !important;
}

/* ============================================================
   8.9 LIGHTBOX
   ============================================================ */

body.cyberpunk-mode .lightbox-image {
    filter: grayscale(100%) brightness(0.65) contrast(1.15) 
            hue-rotate(220deg) sepia(0.2) 
            drop-shadow(0 0 25px var(--cyber-shadow)) !important;
    transition: filter 0.5s ease !important;
}

/* ============================================================
   9. SCROLLBAR CYBERPUNK
   ============================================================ */

body.cyberpunk-mode ::-webkit-scrollbar {
    width: 8px;
}

body.cyberpunk-mode ::-webkit-scrollbar-track {
    background: var(--cyber-bg);
    box-shadow: inset 0 0 10px var(--cyber-shadow);
}

body.cyberpunk-mode ::-webkit-scrollbar-thumb {
    background: var(--cyber-border-blue);
    border-radius: 4px;
    box-shadow: 0 0 20px var(--cyber-shadow-blue);
}

body.cyberpunk-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--cyber-primary);
    box-shadow: 0 0 30px var(--cyber-shadow-strong);
}

/* ============================================================
   10. INDICADOR - OCULTO
   ============================================================ */

.cyber-indicator,
body.cyberpunk-mode .cyber-indicator {
    display: none !important;
}

/* ============================================================
   11. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    body.cyberpunk-mode .banda-imagen img {
        filter: grayscale(100%) brightness(0.6) contrast(1.1) 
                hue-rotate(220deg) sepia(0.15) 
                drop-shadow(0 0 8px var(--cyber-shadow)) !important;
    }
    
    body.cyberpunk-mode .lightbox-image {
        filter: grayscale(100%) brightness(0.6) contrast(1.1) 
                hue-rotate(220deg) sepia(0.15) 
                drop-shadow(0 0 15px var(--cyber-shadow)) !important;
    }
}

@media (max-width: 480px) {
    body.cyberpunk-mode .banda-imagen img {
        filter: grayscale(100%) brightness(0.5) contrast(1.05) 
                hue-rotate(220deg) sepia(0.1) 
                drop-shadow(0 0 5px var(--cyber-shadow)) !important;
    }
    
    body.cyberpunk-mode .lightbox-image {
        filter: grayscale(100%) brightness(0.5) contrast(1.05) 
                hue-rotate(220deg) sepia(0.1) 
                drop-shadow(0 0 8px var(--cyber-shadow)) !important;
    }
}