/* ============================================================
   MATRIX MODE - Estilos para el modo Matrix
   Versión optimizada y organizada
   ============================================================ */

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

body.matrix-mode {
    --matrix-primary: #00ff41;
    --matrix-secondary: #00cc33;
    --matrix-dark: #003b00;
    --matrix-bg: #0a0a0a;
    --matrix-text: #00ff41;
    --matrix-border: #00ff41;
    --matrix-shadow: rgba(0, 255, 65, 0.3);
    --matrix-shadow-strong: rgba(0, 255, 65, 0.5);
    --matrix-filter-base: grayscale(100%) brightness(0.8) contrast(1.3);
    --matrix-filter-hover: grayscale(100%) brightness(0.6) contrast(1.3);
}

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

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

body.matrix-mode::before {
    filter: grayscale(100%) brightness(0.7) !important;
}

body.matrix-mode::after {
    background-color: rgba(0, 10, 0, 0.85) !important;
}

body.matrix-mode .header {
    background: rgba(0, 255, 65, 0.2) !important;
    border-bottom: 3px solid var(--matrix-border) !important;
    box-shadow: 0 4px 25px var(--matrix-shadow) !important;
}

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

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

/* Textos */
body.matrix-mode h1,
body.matrix-mode h2,
body.matrix-mode h3,
body.matrix-mode h4,
body.matrix-mode p,
body.matrix-mode span,
body.matrix-mode li,
body.matrix-mode a,
body.matrix-mode strong,
body.matrix-mode .banda-info h2,
body.matrix-mode .tab-btn::before,
body.matrix-mode .release-title,
body.matrix-mode .track-icon .mic-btn i,
body.matrix-mode .video-title,
body.matrix-mode .juego-nombre,
body.matrix-mode .footer {
    color: var(--matrix-text) !important;
}

body.matrix-mode h2 {
    border-bottom: 2px solid var(--matrix-border) !important;
}

/* Enlaces */
body.matrix-mode a {
    color: var(--matrix-text) !important;
    text-shadow: 0 0 10px var(--matrix-shadow) !important;
}

body.matrix-mode a:hover {
    color: #66ff99 !important;
    text-shadow: 0 0 30px var(--matrix-shadow-strong) !important;
}

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

body.matrix-mode .slider-container,
body.matrix-mode .banda-imagen,
body.matrix-mode .banda-info,
body.matrix-mode .banda-content,
body.matrix-mode .release-container,
body.matrix-mode .lyrics-popup,
body.matrix-mode .lyrics-popup-close,
body.matrix-mode .lightbox-close,
body.matrix-mode .lightbox-nav,
body.matrix-mode .juego-container,
body.matrix-mode .track-list,
body.matrix-mode .info-hero,
body.matrix-mode .info-gallery-item,
body.matrix-mode .platform-menu {
    border-color: var(--matrix-border) !important;
    box-shadow: 0 0 30px var(--matrix-shadow) !important;
}

body.matrix-mode .slider-container {
    border: 2px solid var(--matrix-border) !important;
    box-shadow: 0 0 30px var(--matrix-shadow) !important;
}

/* Hover en elementos con borde - INCLUYE JUEGOS */
body.matrix-mode .video-thumbnail:hover,
body.matrix-mode .release-container:hover,
body.matrix-mode .release-cover:hover,
body.matrix-mode .extras-section .carrusel-item:hover,
body.matrix-mode .juego-imagen:hover,
body.matrix-mode .juego-container:hover {
    border-color: var(--matrix-border) !important;
    box-shadow: 0 0 30px var(--matrix-shadow-strong) !important;
}

body.matrix-mode .footer {
    border-top: 3px solid #00ff41 !important;
}

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

/* Botones de reproducción (play) */
body.matrix-mode .play-button,
body.matrix-mode .play-button:hover,
body.matrix-mode .juego-play-button,
body.matrix-mode .juego-play-button:hover {
    background: rgba(0, 0, 0, 0.85) !important;
    border: 3px solid var(--matrix-border);
}

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

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

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

/* Pestañas */
body.matrix-mode .tab-btn {
    color: #006600 !important;
}

body.matrix-mode .tab-btn.active {
    color: var(--matrix-text) !important;
    background: rgba(0, 255, 65, 0.15) !important;
}

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

body.matrix-mode .tab-btn:hover {
    color: var(--matrix-text) !important;
    background: rgba(0, 255, 65, 0.05) !important;
}

/* Botones slider y carrusel */
body.matrix-mode .slider-btn,
body.matrix-mode .carrusel-arrow {
    border-color: var(--matrix-border) !important;
    color: var(--matrix-text) !important;
    background: rgba(0, 10, 0, 0.85) !important;
}

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

/* Botón micrófono */
body.matrix-mode .mic-btn {
    border-color: var(--matrix-border) !important;
    color: var(--matrix-text) !important;
    background: rgba(0, 10, 0, 0.5) !important;
}

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

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

/* Dropdown */
body.matrix-mode .platform-btn {
    border-color: var(--matrix-border) !important;
    color: var(--matrix-text) !important;
    background: rgba(0, 10, 0, 0.5) !important;
}

body.matrix-mode .platform-btn:hover {
    background: rgba(0,255,65,0.5) !important;
    color: #000000 !important;
}

body.matrix-mode .platform-menu {
    border-color: var(--matrix-border) !important;
    background: var(--matrix-bg) !important;
}

body.matrix-mode .platform-menu li a {
    color: var(--matrix-text) !important;
}

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

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

body.matrix-mode .lyrics-popup-close,
body.matrix-mode .lightbox-close,
body.matrix-mode .lightbox-nav,
body.matrix-mode .lightbox-counter {
    color: var(--matrix-text) !important;
}

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

body.matrix-mode .lyrics-popup h3 {
    border-bottom: 2px solid var(--matrix-border) !important;
}

/* ============================================================
   7. EFECTOS CRT
   ============================================================ */

/* Líneas de exploración */
.crt-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 2px,
        transparent 2px,
        transparent 4px
    );
    animation: crtScanline 8s linear infinite;
}

body.matrix-mode .crt-overlay {
    display: block !important;
}

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

/* Parpadeo sutil */
.crt-flicker {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99998;
    background: rgba(0, 0, 0, 0.02);
    animation: flicker 0.15s infinite alternate;
}

body.matrix-mode .crt-flicker {
    display: block !important;
}

@keyframes flicker {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ============================================================
   8. LLUVIA MATRIX
   ============================================================ */

.matrix-rain {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99997;
    opacity: 0.08;
    overflow: hidden;
}

body.matrix-mode .matrix-rain {
    display: block;
}

.matrix-rain canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ============================================================
   9. FILTROS DE IMÁGENES
   ============================================================ */

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

body.matrix-mode .banda-imagen img {
    filter: grayscale(100%) brightness(0.85) contrast(1.1) 
            drop-shadow(0 0 10px var(--matrix-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.matrix-mode .banda-imagen:hover img {
    filter: grayscale(100%) brightness(0.7) contrast(1.2) 
            drop-shadow(0 0 20px var(--matrix-shadow-strong)) !important;
}

/* ============================================================
   9.2 SLIDER
   ============================================================ */

body.matrix-mode .slider-track .slide {
    filter: grayscale(100%) brightness(0.75) contrast(1.2) 
            drop-shadow(0 0 10px var(--matrix-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.matrix-mode .slider-container:hover .slide {
    filter: grayscale(100%) brightness(0.6) contrast(1.3) 
            drop-shadow(0 0 20px var(--matrix-shadow-strong)) !important;
}

/* ============================================================
   9.3 PORTADAS DE DISCOS
   ============================================================ */

body.matrix-mode .release-cover img {
    filter: grayscale(100%) brightness(0.85) contrast(1.1) !important;
    transition: filter 0.5s ease !important;
}

body.matrix-mode .release-cover:hover img {
    filter: grayscale(100%) brightness(0.7) contrast(1.2) 
            drop-shadow(0 0 15px var(--matrix-shadow-strong)) !important;
}

/* ============================================================
   9.4 SPOTIFY
   ============================================================ */

body.matrix-mode .banda-spotify iframe {
    filter: grayscale(100%) brightness(0.85) contrast(1.1) !important;
    transition: filter 0.5s ease !important;
}

body.matrix-mode .banda-spotify iframe:hover {
    filter: grayscale(100%) brightness(0.7) contrast(1.2) 
            drop-shadow(0 0 20px var(--matrix-shadow)) !important;
}

/* ============================================================
   9.5 CARRUSELES EXTRAS (RRSS y BLOG)
   ============================================================ */

body.matrix-mode .extras-section .carrusel-item img {
    filter: grayscale(100%) brightness(0.8) contrast(1.15) 
            drop-shadow(0 0 5px var(--matrix-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.matrix-mode .extras-section .carrusel-item:hover img {
    filter: grayscale(100%) brightness(0.6) contrast(1.25) 
            drop-shadow(0 0 15px var(--matrix-shadow-strong)) !important;
}

/* ============================================================
   9.6 JUEGOS
   ============================================================ */

body.matrix-mode .juego-imagen img {
    filter: grayscale(100%) brightness(0.8) contrast(1.15) 
            drop-shadow(0 0 5px var(--matrix-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.matrix-mode .juego-imagen:hover img {
    filter: grayscale(100%) brightness(0.6) contrast(1.25) 
            drop-shadow(0 0 15px var(--matrix-shadow-strong)) !important;
}

/* ============================================================
   9.7 VIDEOS
   ============================================================ */

body.matrix-mode .video-thumbnail img {
    filter: grayscale(100%) brightness(0.8) contrast(1.15) 
            drop-shadow(0 0 5px var(--matrix-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.matrix-mode .video-thumbnail:hover img {
    filter: grayscale(100%) brightness(0.6) contrast(1.25) 
            drop-shadow(0 0 15px var(--matrix-shadow-strong)) !important;
}

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

body.matrix-mode .info-gallery-item img {
    filter: grayscale(100%) brightness(0.8) contrast(1.15) 
            drop-shadow(0 0 5px var(--matrix-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.matrix-mode .info-gallery-item:hover img {
    filter: grayscale(100%) brightness(0.6) contrast(1.25) 
            drop-shadow(0 0 15px var(--matrix-shadow-strong)) !important;
}

body.matrix-mode .info-hero img {
    filter: grayscale(100%) brightness(0.75) contrast(1.15) 
            drop-shadow(0 0 10px var(--matrix-shadow)) !important;
    transition: filter 0.5s ease !important;
}

/* ============================================================
   9.9 LIGHTBOX - Imagen al abrir
   ============================================================ */

body.matrix-mode .lightbox-image {
    filter: grayscale(100%) brightness(0.8) contrast(1.15) 
            drop-shadow(0 0 20px var(--matrix-shadow)) !important;
    transition: filter 0.5s ease !important;
}

/* ============================================================
   10. SCROLLBAR
   ============================================================ */

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

body.matrix-mode ::-webkit-scrollbar-track {
    background: var(--matrix-bg);
}

body.matrix-mode ::-webkit-scrollbar-thumb {
    background: var(--matrix-border);
    border-radius: 4px;
    box-shadow: 0 0 10px var(--matrix-shadow);
}

body.matrix-mode ::-webkit-scrollbar-thumb:hover {
    background: #66ff99;
    box-shadow: 0 0 20px var(--matrix-shadow-strong);
}

/* ============================================================
   11. INDICADOR - OCULTO
   ============================================================ */

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

/* ============================================================
   12. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    body.matrix-mode .banda-imagen img {
        filter: grayscale(100%) brightness(0.7) contrast(1.1) 
                drop-shadow(0 0 5px var(--matrix-shadow)) !important;
    }
    
    body.matrix-mode .lightbox-image {
        filter: grayscale(100%) brightness(0.7) contrast(1.1) 
                drop-shadow(0 0 10px var(--matrix-shadow)) !important;
    }
}

@media (max-width: 480px) {
    body.matrix-mode .banda-imagen img {
        filter: grayscale(100%) brightness(0.6) contrast(1.05) 
                drop-shadow(0 0 3px var(--matrix-shadow)) !important;
    }
    
    body.matrix-mode .lightbox-image {
        filter: grayscale(100%) brightness(0.6) contrast(1.05) 
                drop-shadow(0 0 5px var(--matrix-shadow)) !important;
    }
}