*{box-sizing:border-box}  body{
margin:0;
font-family:Arial,sans-serif;
background:#0f172a;
color:#e5e7eb;
}

.page{
    width:96%;
    max-width:1800px;
    margin:auto;
    padding:24px 10px;
}

/* =========================
LAYOUT PRINCIPAL
========================= */
.cloud-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 440px;
    gap:38px;
    align-items:start;
}

.cloud-left,
.related-swiper-box,
.playlist-under-player{
background:#111827;
border-radius:22px;
padding:18px;
margin-bottom:22px;
}

.cloud-left h2,
.related-swiper-box h2,
.playlist-under-player h2{
color:white;
margin-top:0;
}

.cloud-right{
    position:sticky;
    top:95px;
    align-self:start;
    padding-right:10px;
}

/* =========================
SWIPER / RELACIONADOS
========================= */
.relatedSwiper .swiper-slide{
width:160px;
}

.related-card{
display:block;
background:#1e293b;
border-radius:14px;
overflow:hidden;
text-decoration:none;
color:white;
font-size:12px;
font-weight:bold;
}

.related-card img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
background:#334155;
}

.related-card div{
padding:8px;
}

.related-card small{
display:block;
margin-top:5px;
color:#7dd3fc;
}



/* =========================
GALERÍA ÁLBUMES
========================= */

.album-gallery{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:18px;
}

.album-card-page{
display:none;
background:#1e293b;
border-radius:16px;
overflow:hidden;
text-decoration:none;
color:white;
}

.album-card-page img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
}

.album-card-page strong{
display:block;
padding:8px;
font-size:13px;
}

.album-card-page small{
display:block;
padding:0 8px 8px;
color:#38bdf8;
}

.album-pagination{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin-top:16px;
}

.album-pagination button{
border:0;
background:#38bdf8;
color:#082f49;
padding:8px 14px;
border-radius:12px;
font-weight:bold;
cursor:pointer;
}

.categoria-resumen{
    text-align:center;
    color:#bae6fd;
    font-size:14px;
    font-weight:bold;
    margin-bottom:14px;
}

.buscador-cloud-box{
    margin:0 0 16px;
}

#buscadorAlbumesCloud{
    width:100%;
    padding:13px 16px;
    border:0;
    border-radius:14px;
    font-size:15px;
    background:#f8fafc;
    color:#0f172a;
    box-shadow:0 3px 12px rgba(0,0,0,.18);
}

#buscadorAlbumesCloud:focus{
    outline:none;
    box-shadow:0 0 0 3px rgba(56,189,248,.35);
}

/* =========================
REPRODUCTOR
========================= */
.player-panel{
background:linear-gradient(135deg,#102a43,#06364f);
border-radius:24px;
padding:24px;
box-shadow:0 16px 40px rgba(0,0,0,.35);
text-align:center;
}

.playlist-under-player{
    margin-top:24px;
}

.cover{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
border-radius:20px;
box-shadow:0 12px 30px rgba(0,0,0,.4);
background:#1e293b;
margin-bottom:16px;
}

.player-card h1{
font-size:20px;
margin:10px 0;
color:white;
}

.album-stats{
margin:10px 0;
color:#bae6fd;
font-weight:bold;
font-size:14px;
}

.fav-btn{
width:100%;
border:0;
background:white;
color:#0369a1;
font-weight:bold;
padding:10px;
border-radius:12px;
cursor:pointer;
}

.share-buttons{
display:flex;
justify-content:center;
gap:12px;
margin:15px 0;
}

.share-btn{
width:46px;
height:46px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:20px;
color:white;
transition:.2s ease;
box-shadow:0 6px 14px rgba(0,0,0,.25);
}

.share-btn:hover{
transform:translateY(-3px) scale(1.05);
}

.fb{background:#1877f2}
.wa{background:#25d366}
.link{background:#64748b}

/* =========================
PLAYER CUSTOM
========================= */
.custom-player{
background:rgba(255,255,255,.08);
border-radius:18px;
padding:12px;
margin-bottom:14px;
}

.track-box{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin:12px 0;
}

#track-name{
color:#38bdf8;
font-weight:normal;
font-style:italic;
font-size:14px;
margin:0;
text-align:center;
}

.volume-row{
display:flex;
align-items:center;
gap:8px;
background:rgba(255,255,255,.9);
border-radius:16px;
padding:8px;
}

.volume-row button{
border:0;
background:transparent;
color:#0284c7;
cursor:pointer;
}

#volume-control{
width:55px;
}

#current-time,
#duration-time{
font-size:11px;
font-weight:bold;
color:#0284c7;
}

#progress-container{
flex:1;
height:8px;
background:#cbd5e1;
border-radius:20px;
overflow:hidden;
cursor:pointer;
}

#progress-bar{
width:0%;
height:100%;
background:#38bdf8;
}

.main-buttons{
display:flex;
justify-content:center;
align-items:center;
gap:22px;
margin-top:12px;
}

.main-buttons button{
border:0;
background:transparent;
color:#38bdf8;
font-size:24px;
cursor:pointer;
}

.play-main{
width:50px;
height:50px;
background:#38bdf8!important;
color:white!important;
border-radius:50%;
box-shadow:0 8px 18px rgba(56,189,248,.35);
}

.btn-playlist-mobile{
display:none;
}

.playing-waves{
display:none;
gap:3px;
align-items:end;
}

.playing-waves span{
width:4px;
height:14px;
background:#38bdf8;
border-radius:3px;
animation:wave .8s infinite ease-in-out;
}

.playing-waves span:nth-child(2){animation-delay:.15s}
.playing-waves span:nth-child(3){animation-delay:.3s}

@keyframes wave{
0%,100%{height:5px}
50%{height:16px}
}

/* =========================
PLAYLIST BAJO REPRODUCTOR
========================= */
.playlist-under-player{
max-height:420px;
overflow-y:auto;
}

.song{
display:block;
padding:12px 14px;
margin-bottom:8px;
border-radius:14px;
background:#1e293b;
color:#e5e7eb;
text-decoration:none;
font-weight:normal;
transition:.2s;
}

.song:hover{
background:#334155;
transform:translateX(4px);
}

.song.active{
background:linear-gradient(135deg,#0284c7,#0369a1);
color:white;
box-shadow:0 6px 18px rgba(14,165,233,.35);
border-left:5px solid #7dd3fc;
}

/* =========================
BIO
========================= */
.bio{
background:rgba(255,255,255,.08);
border-radius:18px;
padding:14px;
line-height:1.45;
color:#e0f2fe;
max-height:230px;
overflow-y:auto;
font-size:14px;
}

.bio h3{
margin-top:0;
color:white;
}

/* =========================
ESTADÍSTICAS
========================= */
.stats-grid{
    width:100%;
    max-width:1600px;
    margin:35px auto 50px;
    display:grid;
    grid-template-columns:repeat(3, minmax(300px, 1fr));
    gap:28px;
    align-items:start;
}

.stats-grid > div{
    min-width:0;
}

@media(max-width:900px){
    .stats-grid{
        grid-template-columns:1fr;
        gap:20px;
        width:94%;
    }
}

.stats-grid .top15-box,
.stats-grid .mapa-online-box,
.stats-grid .visitas-hoy-box{
    margin:0 0 20px;
}

.top15-box,
.visitas-hoy-box{
background:#111827;
border-radius:20px;
padding:18px;
color:white;
}

.top15-box h2,
.visitas-hoy-box h2{
margin-top:0;
color:white;
font-size:18px;
}

.top-item,
.visita-hoy-item{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
padding:9px 10px;
margin-bottom:8px;
background:#1e293b;
border-radius:12px;
color:white;
text-decoration:none;
font-size:14px;
}

.top-item:hover{
background:#334155;
}

.top-item .ranking {
    min-width: 70px;
    text-align: left;
}

.top-item .album {
    flex: 1;
    text-align: left !important;
}

.top-item .plays {
    min-width: 60px;
    text-align: right;
}


.plays,
.top-count,
.visita-hoy-item strong{
color:#38bdf8;
font-weight:bold;
}

.mapa-online-box{
background:#ffffff;
border-radius:14px;
padding:15px;
box-shadow:0 4px 12px rgba(0,0,0,.12);
margin:0 0 20px;
}

.mapa-online-box h3{
margin-top:0;
margin-bottom:12px;
color:#006e99;
}

.pais-online{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 0;
border-bottom:1px solid #e5e7eb;
font-size:15px;
color:#1e293b;
font-weight:600;
}

.pais-online strong{
background:#006e99;
color:white;
padding:2px 9px;
border-radius:20px;
}

/* =========================
PUBLICIDAD
========================= */
.ad-center{
width:100%;
display:flex;
justify-content:center;
align-items:center;
margin:30px auto;
text-align:center;
}

.ad-center iframe{
max-width:100%;
}

.album-manual-box{
    margin-bottom:16px;
}

.album-manual-box a{
    display:flex;
    gap:12px;
    align-items:center;
    background:linear-gradient(135deg,#006e99,#004466);
    border-radius:16px;
    padding:12px;
    color:white;
    text-decoration:none;
    box-shadow:0 8px 22px rgba(0,0,0,.25);
}

.album-manual-box img{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:12px;
    background:#1e293b;
}

.album-manual-box span{
    display:block;
    font-size:12px;
    color:#fde68a;
    font-weight:bold;
}

.album-manual-box strong{
    display:block;
    margin:5px 0;
    font-size:15px;
}

.album-manual-box small{
    color:#bae6fd;
    font-weight:bold;
}

.buscador-global{
    position:relative;
    margin-bottom:20px;
}

#buscarAlbumGeneral{
    width:100%;
    padding:14px;
    border-radius:14px;
    border:none;
    font-size:16px;
}

#resultadosBusquedaGeneral{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    border-radius:14px;
    max-height:400px;
    overflow-y:auto;
    z-index:9999;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
}

.resultado-item{
    display:block;
    padding:12px;
    text-decoration:none;
    color:#0f172a;
    border-bottom:1px solid #eee;
}

.resultado-item:hover{
    background:#f1f5f9;
}

.contador-albumes{
    margin: 10px 0;
    padding: 8px 14px;
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: 12px;
    font-size: 14px;
    text-align: center;
}

.contador-global{
    text-align:center;
    padding:10px;
    margin:10px 0;
    background:#1e293b;
    border-radius:12px;
    color:#fff;
    font-weight:bold;
}





/* =========================
MÓVIL
========================= */
@media(max-width:900px){

body{  
    padding-bottom:190px!important;  
}  

.page{  
    width:100%;
    padding:14px;  
}  

.cloud-layout{
        grid-template-columns:1fr;
    }

.stats-grid{  
    grid-template-columns:1fr;  
}  



    .album-gallery{
        grid-template-columns:repeat(3,1fr);
        gap:10px;
    }

    .cloud-right{
        padding-right:0;
    }  

.cover{  
    max-width:260px;  
    display:block;  
    margin:0 auto 16px;  
}  

.player-card h1{  
    font-size:20px;  
}  

.bio{  
    max-height:180px;  
}  

.custom-player{  
    position:fixed!important;  
    left:0!important;  
    right:0!important;  
    bottom:0!important;  
    z-index:99999!important;  
    background:#ffffff!important;  
    border-radius:28px 28px 0 0!important;  
    padding:16px 18px 24px!important;  
    box-shadow:0 -8px 30px rgba(0,0,0,.30)!important;  
    margin:0!important;  
}  

.custom-player .volume-row{  
    background:#f1f5f9;  
}  

.btn-playlist-mobile{  
    display:inline-flex!important;  
    align-items:center;  
    justify-content:center;  
}  

.main-buttons{  
    gap:28px!important;  
}  

.playing-waves{  
    display:flex;  
}  

.playlist-under-player{  
    display:none;  
}  

.playlist-under-player.show-mobile{  
    display:block!important;  
    position:fixed;  
    left:5%;  
    right:5%;  
    bottom:190px;  
    max-height:55vh;  
    overflow-y:auto;  
    z-index:99998;  
    background:white;  
    color:#1e293b;  
    border-radius:24px;  
    padding:18px;  
    box-shadow:0 -10px 35px rgba(0,0,0,.25);  
}  

.playlist-under-player.show-mobile h2{  
    color:#0f172a;  
}  

.playlist-under-player.show-mobile .song{  
    background:white;  
    color:#334155;  
    border-bottom:1px solid #f1f5f9;  
    border-radius:0;  
}  

.playlist-under-player.show-mobile .song.active{  
    background:#e0f2fe;  
    color:#0284c7;  
    border-radius:12px;  
}




    .album-card-page strong{
        font-size:11px;
        padding:6px;
    }

    .album-card-page small{
        font-size:10px;
        padding:0 6px 6px;
    }

}

@media(min-width:1500px){
    .album-gallery{
        grid-template-columns:repeat(6, 1fr);
    }
}


@media(max-width:900px){

    .cloud-right{
        position:static !important;
        top:auto !important;
        z-index:auto !important;
    }

    .related-swiper-box{
        position:relative !important;
        z-index:0 !important;
        overflow:hidden !important;
        clear:both !important;
    }

    .relatedSwiper{
        overflow-x:auto !important;
        overflow-y:hidden !important;
        height:auto !important;
    }

    .relatedSwiper .swiper-wrapper{
        transform:none !important;
        display:flex !important;
        gap:14px !important;
        height:auto !important;
    }

    .relatedSwiper .swiper-slide{
        width:145px !important;
        min-width:145px !important;
        flex-shrink:0 !important;
        height:auto !important;
    }

    .related-card{
        height:auto !important;
    }

    .related-card img{
        height:145px !important;
    }

    .playlist-under-player{
        position:relative !important;
        z-index:50 !important;
    }

    .playlist-under-player.show-mobile{
        position:fixed !important;
        z-index:100000 !important;
        bottom:185px !important;
    }

    .custom-player{
        z-index:100001 !important;
    }
}