/* --- VARIABLES Y BASES --- */
:root { 
    --bg-base: #020205; 
    --accent-red: #ff1744; 
    --blob-1-color: #222222; /* Inicial sobrio */
    --blob-2-color: #000000;
}



body, html { 

    margin: 0; padding: 0; 

    height: 100dvh; /* Cambiado de 100% a 100dvh */

    width: 100%; 

    background: var(--bg-base); font-family: 'Montserrat', sans-serif; 
    background-color: var(--bg-base, #020205);
    transition: background-color 1.5s ease; /* Transición suave al cambiar la hora */

    overflow: hidden; color: white; -webkit-font-smoothing: antialiased; 

    position: fixed; 

}

/* --- GLASS PILL & NEW NAV CON ICONOS --- */

.bottom-nav-container { 

    position: fixed; bottom: 20px; width: 100%; display: flex; 

    justify-content: center; z-index: 2000; pointer-events: none; 

}



.glass-pill.new-pill {

    pointer-events: auto; display: flex; align-items: center; justify-content: space-around;

    background: rgba(20, 20, 25, 0.4); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); 

    padding: 8px 15px; border-radius: 100px; 

    border: 1px solid rgba(255, 255, 255, 0.05);

    box-shadow: 0 15px 35px rgba(0,0,0,0.6), inset 0 0.5px 5px rgba(255, 255, 255, 0.1);

    width: 88%; max-width: 380px; 

 overflow: visible !important; /* FORZAMOS VISIBILIDAD DESDE EL INICIO */
isolation: isolate; /* Crea un contexto de renderizado nuevo para el brillo */

}

/* 2. Solo para celulares: liberamos el brillo */



@media (max-width: 768px) {

    /* 1. Liberamos el menú para que no corte nada que salga de sus bordes */

    .glass-pill.new-pill {

        overflow: visible !important;

        isolation: isolate; /* Crea una capa nueva para que el brillo no se pierda */

    }

    

    /* 2. Nos aseguramos que el contenedor general tampoco lo atrape */

    .bottom-nav-container {

        overflow: visible !important;

    }



    /* 3. Ajustamos el aura para que sea más expansiva y suave como el diseño de Flume */

    #nav-glow-art {

        filter: blur(18px) saturate(2.5); /* Más desenfoque para que no parezca un círculo sólido */

        transform: scale(1.6); /* Lo agrandamos un poquito más para que desborde bien */

        opacity: 0.8;
        
          will-change: transform, filter, opacity; /* Avisa a Chrome que esta capa es especial */

    }



    /* 4. El aro de cristal del medio se queda en su lugar */

    .nav-glass-ring {

        z-index: 5;

    }

}

/* --- FONDO DINÁMICO (ESTILO WUAU CENTRADO) --- */
.bg-wrapper { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; 
}

.blob { 
    position: absolute; 
    border-radius: 50%; 
    filter: blur(120px); 
    opacity: 0.35; 
    will-change: transform; 
    transition: background 3s ease-in-out; /* Transición suave de moods */
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
}

.blob-1 { 
    width: 80vw; height: 80vw; 
    background: var(--blob-1-color) !important; 
    z-index: -1; 
}

.blob-2 { 
    width: 150vw; height: 150vw; 
    background: var(--blob-2-color) !important; 
    z-index: -2; 
    opacity: 0.2; 
}

/* --- LOADER --- */

#intro-loader {

    position: fixed; top: 0; left: 0; width: 100%; height: 100%;

    background: #000; z-index: 10000;

    display: flex; flex-direction: column;

    justify-content: center; align-items: center;

    text-align: center; gap: 15px;

    transition: opacity 0.8s ease; pointer-events: none;

}



.loader-text {

    font-weight: 100; letter-spacing: 10px; text-indent: 10px;

    font-size: 0.7rem; text-transform: uppercase;

    animation: flash 0.6s infinite;
    
     color: white; opacity: 0.8; 

}



.loader-brand {

    font-weight: 700; font-size: 0.6rem; letter-spacing: 4px;

    text-indent: 4px; text-transform: uppercase;

    color: white; opacity: 0.8; 

}



@keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }



/* --- MAIN CONTENT --- */

#main-content { 

    width: 100%; height: 100%; 

    display: flex; flex-direction: column; align-items: center; 

    justify-content: flex-start; padding-top: 15px;

    opacity: 0; transition: opacity 1s ease, filter 0.6s ease; 

    will-change: filter, opacity; z-index: 10; 

}



.is-paused { filter: blur(20px) brightness(0.6); cursor: pointer; }







.nav-icon { 

    color: white; opacity: 0.3; font-size: 1.1rem; 

    transition: 0.4s; text-decoration: none; padding: 10px; 

}

.nav-icon.active, .nav-icon:hover { opacity: 1; text-shadow: 0 0 10px rgba(255,255,255,0.3); }



/* Capas del Cover Central en el Nav */

.nav-center-circle {

    position: relative; width: 50px; height: 50px; border-radius: 50%;

    display: flex; justify-content: center; align-items: center;

    margin: 0 5px;
    
    overflow: visible !important;
}



#nav-glow-art {

    position: absolute; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;

    filter: blur(12px) saturate(2); opacity: 0.9; z-index: 1; transform: scale(1.35);

}



.nav-glass-ring {

    position: absolute; width: 100%; height: 100%; border-radius: 50%;

    border: 1.5px solid rgba(255,255,255,0.25);

    background: rgba(255,255,255,0.02); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); 

    z-index: 2;

}



#nav-mini-art {

    width: 36px; height: 36px; border-radius: 50%; object-fit: cover; z-index: 3;

    box-shadow: 0 4px 10px rgba(0,0,0,0.5);

}



/* --- UI --- */

.logo-header { margin-bottom: 5px; } 

.logo-img { height: 38px; opacity: 0.9; }



.live-status { 

    display: inline-flex; align-items: center; gap: 8px; 

    margin-bottom: 15px; 

    margin-top: 2vh; /* Cambiado a vh para consistencia vertical */

}





.live-dot { width: 6px; height: 6px; background: var(--accent-red); border-radius: 50%; box-shadow: 0 0 10px var(--accent-red);  animation: pulse-dot 2s infinite; }
/* --- PUNTO LIVE CON EFECTO PULSE --- */

@keyframes pulse-dot {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 23, 110, 0.7);
    }
    70% {
        transform: scale(1);
        /* La sombra se expande y se desvanece */
        box-shadow: 0 0 0 10px rgba(255, 23, 110, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 23, 110, 0);
    }
}


.live-text { font-weight: 100; font-size: 0.65rem; letter-spacing: 6px; }



/* --- COVER CON AURA --- */

.cover-container { position: relative; width: 250px; height: 250px; margin: 0 auto 20px; transform: translateZ(0); }

.main-art { position: relative; z-index: 5; width: 100%; height: 100%; object-fit: cover; border-radius: 35px; box-shadow: 0 20px 50px rgba(0,0,0,0.8); }



.blurred-art { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; border-radius: 50px; z-index: 1; filter: blur(85px) saturate(2); opacity: 0.85; transform: translate(-50%, -50%) scale(2); will-change: transform, filter; }



.skeleton { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.05); border-radius: 40px; z-index: 5; display: none; }

.is-loading .skeleton { display: block; }



.feedback-row { display: flex; justify-content: center; gap: 40px; margin-bottom: 25px; }

.btn-feed { background: none; border: none; color: white; opacity: 0.2; font-size: 1.4rem; transition: 0.4s; }

.btn-feed.active-like { color: #4ade80; opacity: 1; }

.btn-feed.active-dislike { color: #f87171; opacity: 1; }



#hype-meter { font-size: 0.55rem; font-weight: 700; color: #4ade80; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; opacity: 0; }



.play-btn { 

    background: white; border: none; width: 58px; height: 58px; 

    border-radius: 50%; display: inline-flex; align-items: center; 

    justify-content: center; box-shadow: 0 15px 35px rgba(0,0,0,0.4); 

    z-index: 20; 

    margin-top: 1%; 

    margin-bottom: 90px; /* Esto salva la distancia con la pastilla */

}



.play-btn svg { fill: #000; width: 26px; }



.bg-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }

.blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.25; will-change: transform; }

.blob-1 { width: 80vw; height: 80vw; background: #4c1d95; top: -20%; left: -20%; }

.blob-2 { width: 70vw; height: 70vw; background: #7c3aed; bottom: -20%; right: -20%; }



#trackTitle {

    font-weight: 800; 

    font-size: 0.8rem;

    margin: 0 0 5px; 

    text-transform: uppercase; 

    letter-spacing: 0; 

}



#trackArtist {

    font-weight: 400; 

    font-size: 0.9rem; 

    opacity: 0.6; 

    letter-spacing: 2px;

    text-transform: uppercase;

    margin: 0;

}



/* --- POPUP DE HISTORIAL (GLASS MODAL) --- */

.glass-modal {

    position: fixed; top: 0; left: 0; width: 100%; height: 100%;

    background: rgba(0,0,0,0.6); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);

    z-index: 3000; display: flex; justify-content: center; align-items: center;

    opacity: 0; transition: opacity 0.3s ease; pointer-events: none;

}

.glass-modal.show { opacity: 1; pointer-events: auto; }



.modal-content {

    background: rgba(20, 20, 25, 0.7); border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 25px; padding: 30px 20px; width: 80%; max-width: 320px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.05); 

    text-align: center; position: relative;

    transform: translateY(20px) scale(0.95); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);

}

.glass-modal.show .modal-content { transform: translateY(0) scale(1); }



.modal-content h3 { font-size: 0.65rem; letter-spacing: 3px; opacity: 0.5; margin: 0 0 20px 0; font-weight: 700; text-transform: uppercase; }

.close-btn { position: absolute; top: 15px; right: 15px; background: none; border: none; color: white; font-size: 1.2rem; opacity: 0.4; cursor: pointer; transition: 0.3s; }

.close-btn:hover { opacity: 1; }



.history-item { font-size: 0.75rem; font-weight: 400; padding: 12px 5px; border-bottom: 1px solid rgba(255,255,255,0.05); text-transform: uppercase; letter-spacing: 1px;}

.history-item:last-child { border-bottom: none; }

.history-item strong { font-weight: 800; display: block; margin-bottom: 3px; color: var(--accent-red); font-size: 0.65rem;}




/* --- OPTIMIZACIÓN PARA PANTALLAS BAJAS (Laptops y PCs viejas) --- */

/* --- RESPONSIVE / MODOS --- */
@media (max-width: 768px) {
    .glass-pill.new-pill, .bottom-nav-container { overflow: visible !important; }
    #nav-glow-art { filter: blur(18px) saturate(2.5); transform: scale(1.6); }
}

@media (max-height: 800px) {
    .logo-img { height: 28px; }
    .cover-container { width: 180px; height: 180px; }
    .play-btn { margin-bottom: 90px; }
}


/* --- AJUSTE EXCLUSIVO PARA SMART TV (No afecta Monitores 4K) --- */
@media screen and (min-width: 1500px) and (pointer: coarse), 
       screen and (min-width: 1500px) and (pointer: none) {
    
    .glass-pill.new-pill {
        max-width: 300px;
        padding: 6px 12px;
        transform: scale(0.8); /* Solo se achica en la TV */
        transform-origin: bottom center;
        bottom: 40px;
    }

    .nav-icon { font-size: 0.9rem; }
    .nav-center-circle { width: 42px; height: 42px; }
    #nav-mini-art { width: 30px; height: 30px; }
}

/* --- AJUSTE PARA MONITORES 4K (Escritorio) --- */
@media screen and (min-width: 1500px) and (pointer: fine) {
    .glass-pill.new-pill {
        max-width: 450px; /* En tu monitor 4K le damos un ancho más cómodo */
        transform: scale(1); /* Mantenemos el tamaño real */
        bottom: 30px;
    }
}

/* --- MODO DÍA --- */
.light-mode {
    --bg-base: #f2f2f7; /* Tu color de Shazam */
    color: #1c1c1e; /* Texto gris muy oscuro (casi negro) */
}

/* Invertimos el color de los textos principales */
.light-mode #trackTitle, 
.light-mode #trackArtist, 
.light-mode .live-text {
    color: #1c1c1e; 
}

/* Oscurecemos los íconos de interacción */
.light-mode .nav-icon, 
.light-mode .btn-feed {
    color: #1c1c1e;
    opacity: 0.5;
}
.light-mode .nav-icon.active, 
.light-mode .nav-icon:hover { 
    opacity: 1; 
    text-shadow: 0 0 10px rgba(0,0,0,0.1); 
}

/* Adaptamos la pastilla Glass para fondo claro */
.light-mode .glass-pill.new-pill {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1), inset 0 0.5px 5px rgba(255, 255, 255, 0.5);
}

/* Invertimos el botón de Play */
.light-mode .play-btn {
    background: #1c1c1e;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}
.light-mode .play-btn svg {
    fill: #f2f2f7; /* El ícono del play se vuelve claro */
}

/* Ajustes menores de bordes y fondos */
.light-mode .nav-glass-ring {
    border-color: rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.02);
}
.light-mode .history-item {
    border-bottom: 1px solid rgba(0,0,0,0.05);
}



/* --- LOGO EN MODO DÍA --- */
.light-mode .logo-img {
    background-color: #0a0a0a; /* Fondo negro elegante */
    border-radius: 50%; /* Círculo perfecto */
    /* IMPORTANTE: Medidas fijas para que el círculo no se deforme */
    width: 38px; 
    height: 38px; 
    /* IMPORTANTE: Esto hace que el logo se achique para entrar sin cortes */
    object-fit: scale-down; 
    padding: 5px; /* Espacio interno de respiro */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* En modo normal (noche), nos aseguramos que no tenga fondo */
body:not(.light-mode) .logo-img {
    background-color: transparent;
    padding: 0;
    box-shadow: none;
}

/* Forzamos el color de los textos base al modo claro */
.light-mode {
    color: #1c1c1e;
}


/* --- MODO DÍA: Textos en fondos oscuros --- */
/* Forzamos que el texto dentro de los modales/historial siga siendo blanco */
.light-mode .modal-content, 
.light-mode .history-sheet, 
.light-mode .bottom-sheet-content {
    color: #ffffff !important; /* El !important es clave acá */
}

/* --- MODO DÍA: LIKE --- */
.light-mode .btn-feed.active-like {
    color: #4ade80;
    opacity: 1;
    transition: all 0.3s ease;
    /* NEON */
    text-shadow: 
        0 0 5px rgba(0, 230, 118, 1),   /* Capa 1: Núcleo intenso y definido */
        0 0 15px rgba(0, 230, 118, 0.6), /* Capa 2: Halo medio */
        0 0 30px rgba(0, 230, 118, 0.3); /* Capa 3: Atmósfera suave exterior */
}
/* --- MODO NOCHE: LIKE --- */
.btn-feed.active-like {
    color: #4ade80;
    opacity: 1;
    transition: all 0.3s ease;
    /* NEON */
    text-shadow: 
        0 0 5px rgba(0, 230, 118, 1),   /* Capa 1: Núcleo intenso y definido */
        0 0 15px rgba(0, 230, 118, 0.6), /* Capa 2: Halo medio */
        0 0 30px rgba(0, 230, 118, 0.3); /* Capa 3: Atmósfera suave exterior */
}