/* =========================================
   RESET
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* =========================================
   BODY
========================================= */

body{

    font-family:'Poppins',sans-serif;

    background:

    linear-gradient(
        180deg,
        #0f172a 0%,
        #111827 50%,
        #020617 100%
    );

    color:white;

    min-height:100vh;

    transition:

        background 1.5s ease;

}


/* =========================================
   CONTENEDOR PRINCIPAL
========================================= */

.main-wrapper{

    width:100%;

    max-width:650px;

    margin:auto;

    padding:

    30px 20px
    80px;

}


/* =========================================
   REPRODUCTOR
========================================= */

.reproductor-salsa{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    background:

    rgba(255,255,255,.05);

    border:

    1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(25px);

    box-shadow:

    0 15px 40px rgba(0,0,0,.45);

}


/* =========================================
   CONTENIDO
========================================= */

.card-content{

    padding:35px;

}


/* =========================================
   LOGO
========================================= */

.logo-box{

    display:flex;

    justify-content:center;

    margin-bottom:25px;

}


.logo-radio{

    width:180px;

}


/* =========================================
   AHORA SONANDO
========================================= */

.ahora-sonando{

    text-align:center;

    margin-bottom:15px;

}


.mini-title{

    color:#2ecc71;

    font-size:13px;

    letter-spacing:3px;

    font-weight:600;

}


/* =========================================
   TRACK INFO
========================================= */

.track-box{

    margin-bottom:30px;

}


#trackInfo{

    text-align:center;

    font-size:20px;

    font-weight:600;

    line-height:1.6;

}


/* =========================================
   CARÁTULA
========================================= */

.contenedor-caratula{

    display:flex;

    justify-content:center;

}


#caratula-img{

    width:260px;

    height:260px;

    object-fit:cover;

    border-radius:25px;

    border:

    4px solid rgba(255,255,255,.08);

    box-shadow:

    0 0 35px rgba(46,204,113,.45);

    transition:.5s;

}


/* =========================================
   MENSAJE
========================================= */

.mensaje-logo{

    text-align:center;

    margin-top:20px;

    color:#cfcfcf;

    font-size:14px;

}


/* =========================================
   CONTROLES
========================================= */

.controles-layout{

    margin-top:30px;

}


#btnPlayPausa{

    width:100%;

    height:60px;

    border:none;

    border-radius:18px;

    background:

    linear-gradient(
        45deg,
        #e74c3c,
        #ff6b5a
    );

    color:white;

    font-size:22px;

    cursor:pointer;

    transition:.3s;

}


#btnPlayPausa:hover{

    transform:translateY(-2px);

}


/* =========================================
   VOLUMEN
========================================= */

.volumen-box{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:20px;

}


#iconoVolumen{

    font-size:20px;

}


#volumenControl{

    width:100%;

}


/* =========================================
   ESTADO
========================================= */

#estadoEmision{

    margin-top:25px;

    text-align:center;

    color:#2ecc71;

    font-size:18px;

}


#estadoEmision i{

    margin-right:8px;

}


/* =========================================
   REDES SOCIALES
========================================= */

.redes-compartir-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;

    margin-top:30px;

}


.redes-compartir-grid button{

    height:60px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    font-size:24px;

    transition:all .3s ease;

}


/* WHATSAPP */

#btnCompartirWhatsapp{

    background:#25D366;

    color:white;

}


/* FACEBOOK */

#btnCompartirFacebook{

    background:#1877F2;

    color:white;

}


/* INSTAGRAM */

#btnCompartirInstagram{

    background:linear-gradient(
        45deg,
        #833AB4,
        #E1306C,
        #FCAF45
    );

    color:white;

}


/* COPIAR ENLACE */

#btnCopiarEnlace{

    background:#374151;

    color:white;

}


/* HOVER */

.redes-compartir-grid button:hover{

    transform:translateY(-5px);

    box-shadow:

    0 10px 25px rgba(0,0,0,.25);

}


/* EFECTO AL PRESIONAR */

.redes-compartir-grid button:active{

    transform:scale(.95);

}


/* =========================================
   ESPECTRO
========================================= */

.spectrum-container{

    height:100px;

    padding:20px;

}


#miniSpectrum{

    width:100%;

    height:100%;

}


/* =========================================
   OVERLAY
========================================= */

#overlayPlayButton{

    position:absolute;

    inset:0;

    background:

    rgba(0,0,0,.85);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999;

    cursor:pointer;

}


.overlay-content{

    text-align:center;

}


.overlay-content i{

    font-size:40px;

    color:#fff;

    margin-bottom:20px;

}


.overlay-content span{

    display:block;

    font-size:18px;

}


/* =========================================
   TARJETAS
========================================= */

.card-section{

    margin-top:30px;

    padding:30px;

    border-radius:30px;

    background:

    rgba(255,255,255,.05);

    border:

    1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

}


/* =========================================
   TITULOS
========================================= */

.card-section h2{

    text-align:center;

    margin-bottom:20px;

    font-size:22px;

}

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

.spotify-card{

    background:

    rgba(255,255,255,.05);

    border:

    1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:20px;

}


.spotify-header{

    display:flex;

    align-items:center;

    gap:10px;

    color:#1DB954;

    font-size:20px;

    margin-bottom:20px;

}


.spotify-body{

    display:flex;

    gap:20px;

    align-items:center;

}


.spotify-img{

    width:90px;

    height:90px;

    border-radius:20px;

    object-fit:cover;

}


.spotify-info h3{

    margin-bottom:10px;

}


.spotify-info p{

    color:#bfbfbf;

    line-height:1.6;

}

/* =========================================
   REDES SOCIALES
========================================= */

.social-grid{

    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:15px;

}


.social-card{

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:white;

    height:60px;

    border-radius:18px;

    font-weight:500;

    transition:.3s;

}


.social-card:hover{

    transform:translateY(-3px);

}


.whatsapp{

    background:#25D366;

}


.facebook{

    background:#1877F2;

}


.instagram{

    background:

    linear-gradient(
        45deg,
        #833ab4,
        #e1306c,
        #fdc830
    );

}


.tiktok{

    background:#111;

}


/* =========================================
   BOTÓN APP
========================================= */

.btn-app{

    width:100%;

    height:60px;

    border:none;

    border-radius:18px;

    background:#2ecc71;

    color:white;

    font-size:18px;

    cursor:pointer;

}


/* =========================================
   TEXTO SEO
========================================= */

.card-section p{

    line-height:1.8;

    color:#d9d9d9;

}

/* =========================================
   BOTÓN TEMA
========================================= */

.theme-switch-container{

    display:flex;

    justify-content:center;

    margin-bottom:25px;

}


#themeButton{

    border:none;

    padding:12px 20px;

    border-radius:50px;

    cursor:pointer;

    font-size:14px;

}



/* =========================================
   DARK THEME
========================================= */

body.dark-theme{

    color:white;

}



/* =========================================
   LIGHT THEME
========================================= */

body.light-theme{

    background:

    linear-gradient(
        180deg,
        #ffffff,
        #f2f2f2
    );

    color:#111;

}


body.light-theme .reproductor-salsa,

body.light-theme .card-section{

    background:

    rgba(255,255,255,.8);

    border:

    1px solid rgba(

        0,0,0,.08

    );

}


body.light-theme .mini-title{

    color:#16a34a;

}


body.light-theme .mensaje-logo,

body.light-theme p{

    color:#444;

}


body.light-theme .redes-compartir-grid button{

    background:

    rgba(0,0,0,.05);

    color:#111;

}

/* =========================================
   MODO CLARO
========================================= */

body.light-theme #btnCompartirWhatsapp{

    box-shadow:0 5px 20px rgba(37,211,102,.3);

}


body.light-theme #btnCompartirFacebook{

    box-shadow:0 5px 20px rgba(24,119,242,.3);

}


body.light-theme #btnCompartirInstagram{

    box-shadow:0 5px 20px rgba(225,48,108,.25);

}


body.light-theme #btnCopiarEnlace{

    background:#6b7280;

}

.spotify-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:15px;

    padding:12px 22px;

    background:#121212;

    color:#1DB954;

    text-decoration:none;

    font-weight:600;

    border:1px solid rgba(255,255,255,.08);

    border-radius:50px;

    transition:all .3s ease;

}


.spotify-link:hover{

    background:#1DB954;

    color:white;

    transform:translateY(-3px);

}

/* =========================================
   HISTORIAL
========================================= */

.historial-item{

    background:

    rgba(255,255,255,.05);

    border:

    1px solid rgba(255,255,255,.08);

    padding:15px;

    border-radius:15px;

    margin-bottom:12px;

    transition:.3s;

}


.historial-item:hover{

    transform:

    translateX(8px);

}


body.light-theme .historial-item{

    background:

    rgba(0,0,0,.03);

}