/* AJUSTES FINALES SOLICITADOS - VERSION CORREGIDA */
body{
padding-bottom:28px !important;
}
.bottom-nav{
display:none !important;
}
.float-search{
bottom:24px !important;
}
/* Canasta más pequeña con parpadeo suave */
.hero-cart-btn{
width:42px !important;
height:42px !important;
box-shadow:
0 0 0 1px rgba(37,211,102,.10),
0 0 14px rgba(37,211,102,.22),
0 10px 22px rgba(0,0,0,.30) !important;
animation:cartGlowPulse 1.65s ease-in-out infinite;
}
.hero-cart-btn i{
font-size:17px !important;
}
.hero-cart-btn:before{
inset:-6px !important;
opacity:.68 !important;
}
@keyframes cartGlowPulse{
0%,100%{ filter:brightness(1); box-shadow:0 0 0 1px rgba(37,211,102,.10),0 0 12px
rgba(37,211,102,.20),0 10px 22px rgba(0,0,0,.30); }
50%{ filter:brightness(1.18); box-shadow:0 0 0 1px rgba(37,211,102,.18),0 0 24px
rgba(37,211,102,.42),0 10px 22px rgba(0,0,0,.30); }
}
.hero-cart-btn.cart-pop{
animation:cartPop .55s ease both;
}
@keyframes cartPop{
0%{ transform:scale(1); }
45%{ transform:scale(1.14); }
100%{ transform:scale(1); }
}
/* Cover play más transparente */
.cover-play-btn{
width:30px !important;
height:30px !important;
background:rgba(0,0,0,.14) !important;
border-color:rgba(255,255,255,.22) !important;
color:rgba(255,255,255,.82) !important;
backdrop-filter:blur(3px) !important;
}
.song-cover img{
filter:brightness(.52) !important;
}
.song-cover img.cover-blur{
filter:blur(1.7px) brightness(.52) !important;
}
/* Morado anterior del codigo para CORO */
.pill-coro{
background:#4438ca !important;
color:#fff !important;
}
.pill-vivo,
.pill-live{
background:#23d66f !important;
color:#062112 !important;
}
/* Deezer corregido para móvil: no se desborda */
.deezer-world-wrap{
width:auto !important;
max-width:calc(100% - 36px) !important;
overflow:hidden !important;
}
.deezer-world-list{
grid-template-columns:1fr !important;
width:100% !important;
}
.deezer-card{
width:100% !important;
min-width:0 !important;
grid-template-columns:44px minmax(0,1fr) !important;
gap:9px !important;
}
.deezer-card > div{
min-width:0 !important;
}
.deezer-card-cover{
width:44px !important;
height:44px !important;
}
.deezer-card-title,
.deezer-card-album{
min-width:0 !important;
max-width:100% !important;
}
.deezer-card-actions{
grid-template-columns:1fr 1fr !important;
gap:6px !important;
}
.deezer-mini-btn{
min-width:0 !important;
padding:0 8px !important;
white-space:nowrap !important;
}
@media (max-width:390px){
.deezer-card-actions{
grid-template-columns:1fr !important;
}
}
/* Reproductor inferior */
.bottom-demo-player{
position:fixed;
left:50%;
bottom:10px;
z-index:9200;
width:calc(100% - 20px);
max-width:520px;
transform:translate(-50%, calc(100% + 26px));
opacity:0;
pointer-events:none;
display:grid;
grid-template-columns:46px 1fr 30px;
gap:10px;
align-items:center;
padding:10px;
border-radius:18px;
background:rgba(14,17,22,.97);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 22px 55px rgba(0,0,0,.62), 0 0 18px rgba(37,211,102,.10);
backdrop-filter:blur(16px);
transition:.22s ease;
}
.bottom-demo-player.show{
transform:translate(-50%,0);
opacity:1;
pointer-events:auto;
}
.bottom-demo-cover{
width:46px;
height:46px;
border-radius:10px;
overflow:hidden;
background:#0d0f13;
}
.bottom-demo-cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.bottom-demo-info{
min-width:0;
}
.bottom-demo-title{
color:#fff;
font-size:12.5px;
font-weight:900;
line-height:1.15;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.bottom-demo-artist{
margin-top:2px;
color:#8d939f;
font-size:10.5px;
font-weight:700;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.bottom-demo-player audio{
width:100%;
height:32px;
margin-top:5px;
display:block;
}
.bottom-demo-player iframe{
width:100%;
height:46px;
margin-top:5px;
border:0;
border-radius:10px;
background:#0d0f13;
display:none;
}
.bottom-demo-close{
width:30px;
height:30px;
border-radius:999px;
border:0;
background:#1c2027;
color:#b8bec8;
font-size:20px;
font-weight:800;
line-height:1;
cursor:pointer;
}
/* Menu de tres puntos */
.song-options-menu{
position:fixed;
z-index:9500;
width:210px;
display:none;
padding:7px;
border-radius:13px;
background:#2b2d30;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 18px 45px rgba(0,0,0,.55);
}
.song-options-menu.show{
display:block;
}
.song-options-menu button{
width:100%;
min-height:42px;
border:0;
background:transparent;
color:#d8d8d8;
display:flex;
align-items:center;
gap:12px;
padding:0 12px;
border-radius:9px;
font-size:13.5px;
font-weight:650;
text-align:left;
cursor:pointer;
}
.song-options-menu button:hover,
.song-options-menu button:active{
background:rgba(255,255,255,.09);
color:#fff;
}
.song-options-menu i{
width:18px;
color:#b7bcc6;
text-align:center;
}
.fly-to-cart{
position:fixed;
z-index:9600;
pointer-events:none;
border-radius:10px;
background:#141820 center/cover no-repeat;
box-shadow:0 14px 30px rgba(0,0,0,.45);
}
/* AJUSTES EXTRA SOLICITADOS - CARGA, BANNER, TOP HITS Y REPRODUCTOR */
#statusBox.status-card,
#statusBox{
width:min(360px, calc(100% - 40px)) !important;
margin:110px auto 24px !important;
padding:24px 20px !important;
border-radius:24px !important;
background:#0e1116 !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:0 24px 60px rgba(0,0,0,.55) !important;
color:#fff !important;
text-align:center !important;
font-size:15px !important;
font-weight:850 !important;
}
.status-spinner{
width:42px;
height:42px;
border-radius:999px;
border:3px solid rgba(255,255,255,.12);
border-top-color:var(--blue);
margin:0 auto 14px;
animation:directSpin .72s linear infinite;
}
#statusBox.status-catalog-loading{
width:min(420px, calc(100% - 36px)) !important;
padding:20px 20px 18px !important;
text-align:left !important;
overflow:hidden;
}
.catalog-loader-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
.catalog-loader-copy{min-width:0;}
.catalog-loader-kicker{
display:block;
margin-bottom:5px;
color:var(--blue);
font-size:10px;
font-weight:950;
letter-spacing:.12em;
text-transform:uppercase;
}
#statusBox.status-catalog-loading .catalog-loader-title{
display:block;
color:#fff;
font-size:17px;
line-height:1.2;
font-weight:950;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.catalog-loader-percent{
flex:0 0 auto;
color:#fff;
font-size:22px;
line-height:1;
font-weight:950;
font-variant-numeric:tabular-nums;
}
.catalog-loader-track{
height:9px;
margin-top:16px;
border-radius:999px;
background:rgba(255,255,255,.09);
overflow:hidden;
box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
.catalog-loader-bar{
width:0;
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,var(--blue),#20e7a5);
box-shadow:0 0 18px rgba(19,200,255,.38);
transition:width .32s ease;
position:relative;
overflow:hidden;
}
.catalog-loader-bar::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.48) 50%,transparent 80%);
transform:translateX(-100%);
animation:catalogLoaderShine 1.15s ease-in-out infinite;
}
.catalog-loader-detail{
display:flex !important;
align-items:center;
gap:7px;
margin-top:10px !important;
color:#aab1bc !important;
font-size:11.5px !important;
font-weight:800 !important;
}
.catalog-loader-detail em{font:inherit;font-style:normal;}
.catalog-loader-dot{
width:7px;
height:7px;
border-radius:50%;
background:#20e7a5;
box-shadow:0 0 10px rgba(32,231,165,.7);
animation:catalogLoaderPulse 1s ease-in-out infinite;
}
@keyframes catalogLoaderShine{to{transform:translateX(100%);}}
@keyframes catalogLoaderPulse{50%{opacity:.35;transform:scale(.72);}}
#statusBox.status-loading strong{
display:block;
color:#fff;
font-size:18px;
line-height:1.15;
font-weight:950;
}
#statusBox.status-loading span{
display:block;
margin-top:7px;
color:#9aa0aa;
font-size:12.5px;
font-weight:750;
}
.premium-title span{
display:block;
}
.premium-title{
max-width:300px !important;
}
.album-card{
min-width:0 !important;
}
.album-title{
width:100% !important;
max-width:100% !important;
min-height:0 !important;
height:auto !important;
max-height:18px !important;
display:block !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
line-height:18px !important;
}
.album-cover{
position:relative;
}
.album-cover:after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.20);
pointer-events:none;
}
.album-cover-play{
position:absolute;
inset:0;
margin:auto;
width:38%;
max-width:56px;
min-width:34px;
aspect-ratio:1;
border-radius:999px;
border:1px solid rgba(255,255,255,.36);
background:rgba(0,0,0,.24);
color:rgba(255,255,255,.92);
display:flex;
align-items:center;
justify-content:center;
backdrop-filter:blur(3px);
z-index:4;
}
.album-cover-play i{
font-size:42%;
margin-left:3px;
}
.cover-play-btn{
background:rgba(0,0,0,.22) !important;
border-color:rgba(255,255,255,.34) !important;
color:rgba(255,255,255,.94) !important;
backdrop-filter:blur(2px) !important;
}
.song-cover img{
filter:brightness(.62) !important;
}
.song-cover img.cover-blur{
filter:blur(1.5px) brightness(.62) !important;
}
body{
padding-bottom:106px !important;
}
.bottom-demo-player{
left:0 !important;
right:0 !important;
bottom:0 !important;
width:100% !important;
max-width:none !important;
transform:translateY(calc(100% + 24px)) !important;
grid-template-columns:1fr 34px !important;
border-radius:18px 18px 0 0 !important;
padding:12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
border-left:0 !important;
border-right:0 !important;
border-bottom:0 !important;
}
.bottom-demo-player.show{
transform:translateY(0) !important;
}
.bottom-demo-cover{
display:none !important;
}
.bottom-demo-title{
font-size:14px !important;
font-weight:900 !important;
line-height:1.2 !important;
margin-bottom:6px !important;
}
.bottom-demo-artist{
display:none !important;
}
.bottom-demo-player audio{
height:38px !important;
margin-top:0 !important;
}
.bottom-demo-player iframe{
width:100% !important;
height:56px !important;
margin-top:0 !important;
}
.bottom-demo-close{
align-self:start !important;
margin-top:2px !important;
}
.fly-to-cart{
outline:2px solid rgba(37,211,102,.30);
}
@media (min-width:720px){
.bottom-demo-player{
padding-left:24px !important;
padding-right:24px !important;
}
}
/* AJUSTE FINAL: X DEL REPRODUCTOR EN LA MISMA FILA DEL TÍTULO */
.bottom-demo-player{
position:fixed !important;
display:block !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
width:100% !important;
max-width:none !important;
padding:12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
border-radius:18px 18px 0 0 !important;
}
.bottom-demo-player.show{
transform:translateY(0) !important;
}
.bottom-demo-info{
width:100% !important;
min-width:0 !important;
padding-right:0 !important;
}
.bottom-demo-title{
width:100% !important;
padding-right:44px !important;
margin:0 0 8px !important;
min-height:30px !important;
display:flex !important;
align-items:center !important;
color:#fff !important;
font-size:14px !important;
font-weight:900 !important;
line-height:1.2 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.bottom-demo-close{
position:absolute !important;
top:12px !important;
right:14px !important;
width:30px !important;
height:30px !important;
margin:0 !important;
align-self:auto !important;
border-radius:999px !important;
background:#1c2027 !important;
color:#b8bec8 !important;
z-index:3 !important;
}
.bottom-demo-player audio{
width:100% !important;
height:38px !important;
margin:0 !important;
display:block !important;
}
.bottom-demo-player iframe{
width:100% !important;
height:56px !important;
margin:0 !important;
}
@media (min-width:720px){
.bottom-demo-player{
padding-left:24px !important;
padding-right:24px !important;
}
.bottom-demo-close{
right:24px !important;
}
}
/* AJUSTE REPRODUCTOR NATIVO BLANCO/GRIS - SOLO UN REPRODUCTOR */
#bottomDemoDrive,
.bottom-demo-player iframe{
display:none !important;
visibility:hidden !important;
height:0 !important;
overflow:hidden !important;
}
.bottom-demo-player{
background:#0e1116 !important;
border-top:1px solid rgba(255,255,255,.10) !important;
box-shadow:0 -18px 42px rgba(0,0,0,.62) !important;
}
.bottom-demo-title{
min-height:28px !important;
margin:0 0 8px !important;
padding-right:44px !important;
}
#bottomDemoAudio{
display:block !important;
width:100% !important;
height:38px !important;
margin:0 !important;
border-radius:999px !important;
}
.bottom-demo-close{
top:10px !important;
}
/* REPRODUCTOR GRIS SOLO - SIN TÍTULO NI BANNER */
body{
padding-bottom:86px !important;
}
.bottom-demo-player{
position:fixed !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
width:100% !important;
max-width:none !important;
z-index:9200 !important;
display:block !important;
transform:translateY(calc(100% + 18px)) !important;
opacity:0 !important;
pointer-events:none !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
backdrop-filter:none !important;
border-radius:0 !important;
padding:0 8px calc(8px + env(safe-area-inset-bottom)) !important;
transition:.22s ease !important;
}
.bottom-demo-player.show{
transform:translateY(0) !important;
opacity:1 !important;
pointer-events:auto !important;
}
.bottom-demo-cover,
.bottom-demo-title,
.bottom-demo-artist{
display:none !important;
}
.bottom-demo-info{
width:100% !important;
min-width:0 !important;
padding:0 !important;
}
#bottomDemoAudio,
#bottomDemoDrive{
display:none !important;
visibility:hidden !important;
overflow:hidden !important;
}
#bottomDemoAudio.is-active{
display:block !important;
visibility:visible !important;
width:100% !important;
height:40px !important;
margin:0 !important;
border-radius:999px !important;
background:#e5e5e5 !important;
}
#bottomDemoDrive.is-active{
display:block !important;
visibility:visible !important;
width:100% !important;
height:74px !important;
margin:0 !important;
border:0 !important;
border-radius:12px !important;
background:#0d0f13 !important;
box-shadow:0 -14px 34px rgba(0,0,0,.45) !important;
}
.bottom-demo-close{
position:absolute !important;
top:-18px !important;
right:10px !important;
width:26px !important;
height:26px !important;
margin:0 !important;
border:0 !important;
border-radius:999px !important;
background:#1c2027 !important;
color:#b8bec8 !important;
font-size:18px !important;
font-weight:900 !important;
line-height:1 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
z-index:4 !important;
}
@media (min-width:720px){
.bottom-demo-player{
padding-left:14px !important;
padding-right:14px !important;
}
#bottomDemoDrive.is-active{
height:78px !important;
}
}
/* AJUSTES FINALES: BANNER SINGA-STYLE, DEMO ACTIVO, SCROLL BLOQUEADO
Y CARGA RÁPIDA */
.premium-card{
min-height:220px !important;
padding:26px 20px !important;
border-radius:18px !important;
background:
linear-gradient(180deg,rgba(20,15,58,.72),rgba(12,14,20,.88)),
radial-gradient(circle at 20% 10%,rgba(115,91,255,.32),transparent 32%),
radial-gradient(circle at 88% 18%,rgba(37,211,102,.16),transparent 30%),
#111318 !important;
box-shadow:0 18px 48px rgba(0,0,0,.36) !important;
border:1px solid rgba(255,255,255,.10) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.premium-card::before{
content:"" !important;
display:block !important;
position:absolute !important;
inset:0 !important;
background:
linear-gradient(90deg,rgba(0,0,0,.52),rgba(0,0,0,.14),rgba(0,0,0,.50)),
url("https://kitkaraoke.com/images/singers2.png") center bottom/cover no-repeat
!important;
opacity:.30 !important;
filter:blur(.4px) saturate(.95) !important;
transform:scale(1.04) !important;
}
.premium-card::after{
content:"" !important;
display:block !important;
position:absolute !important;
inset:0 !important;
background:rgba(48,37,135,.34) !important;
pointer-events:none !important;
}
.premium-content{
position:relative !important;
z-index:3 !important;
max-width:330px !important;
text-align:center !important;
margin:0 auto !important;
}
.premium-kicker{
color:rgba(255,255,255,.76) !important;
font-size:11px !important;
letter-spacing:.45px !important;
margin-bottom:8px !important;
}
.premium-title{
max-width:330px !important;
color:#fff !important;
font-size:27px !important;
line-height:1.06 !important;
letter-spacing:-.035em !important;
text-shadow:0 3px 14px rgba(0,0,0,.38) !important;
}
.premium-sub{
max-width:300px !important;
margin:12px auto 0 !important;
color:rgba(255,255,255,.88) !important;
font-size:16px !important;
line-height:1.38 !important;
font-weight:650 !important;
}
.premium-btn{
height:46px !important;
min-width:150px !important;
margin-top:18px !important;
border-radius:9px !important;
background:#17e87a !important;
color:#061016 !important;
box-shadow:0 12px 28px rgba(23,232,122,.22) !important;
}
.hero-people{
display:none !important;
}
.song-row{
position:relative !important;
border-radius:12px !important;
padding-left:6px !important;
padding-right:6px !important;
transition:background-color .18s ease, box-shadow .18s ease, border-color .18s ease
!important;
}
.song-row.is-playing-demo{
background:rgba(35,214,111,.14) !important;
box-shadow:inset 0 0 0 1px rgba(35,214,111,.26), 0 10px 28px rgba(35,214,111,.08)
!important;
border-bottom-color:rgba(35,214,111,.12) !important;
}
.song-row.is-playing-demo .song-title,
.song-row.is-playing-demo .song-artist{
color:#fff !important;
}
.song-row.is-playing-demo .play-btn{
color:#7dffad !important;
background:rgba(35,214,111,.14) !important;
}
.song-row.is-playing-demo .song-actions{
position:relative !important;
}
.song-row.is-playing-demo .song-actions::after{
content:"👆";
position:absolute;
right:26px;
top:-27px;
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
font-size:23px;
line-height:1;
filter:drop-shadow(0 3px 8px rgba(0,0,0,.55));
animation:demoFingerPoint 1.05s ease-in-out infinite;
pointer-events:none;
z-index:5;
}
@keyframes demoFingerPoint{
0%,100%{ transform:translate(-4px,0) rotate(-18deg); opacity:.68; }
50%{ transform:translate(2px,-3px) rotate(-18deg); opacity:1; }
}
html.demo-scroll-locked,
body.demo-scroll-locked{
overflow:hidden !important;
overscroll-behavior:none !important;
}
body.demo-scroll-locked{
touch-action:none !important;
}
.bottom-demo-player{
z-index:9400 !important;
}
#bottomDemoDrive.is-active{
height:78px !important;
border-radius:10px !important;
box-shadow:0 -16px 38px rgba(0,0,0,.45) !important;
}
.fly-to-cart{
box-shadow:0 18px 44px rgba(0,0,0,.55), 0 0 0 2px rgba(37,211,102,.36) !important;
}
.song-options-menu button[data-menu-action="download"]{
color:#a7f3c8 !important;
}
.song-options-menu button[data-menu-action="download"] i{
color:#25d366 !important;
}
@media (max-width:390px){
.premium-card{
min-height:210px !important;
}
.premium-title{
font-size:25px !important;
}
.premium-sub{
font-size:14.5px !important;
}
}
/* AJUSTES PEDIDOS: SCROLL LIBRE, CANASTA SIEMPRE VISIBLE, DEDO ALINEADO
Y AVISO SIN DEMO */
.search-topbar{
position:sticky !important;
top:0 !important;
z-index:9800 !important;
transform:none !important;
opacity:1 !important;
visibility:visible !important;
}
/* El cliente puede seguir haciendo scroll aunque esté escuchando demo */
html.demo-scroll-locked,
body.demo-scroll-locked{
overflow:visible !important;
overscroll-behavior:auto !important;
}
body.demo-scroll-locked{
touch-action:auto !important;
}
/* Banner con proporción inspirada en el recurso de Singa 1344x400, pero adaptado a
mobile */
.premium-card{
width:100% !important;
min-height:238px !important;
aspect-ratio:auto !important;
padding:24px 20px !important;
}
@media (min-width:720px){
.premium-card{
min-height:260px !important;
aspect-ratio:1344 / 400 !important;
}
}
@media (min-width:1024px){
.premium-card{
min-height:300px !important;
aspect-ratio:1344 / 400 !important;
}
}
/* Dedo/señal mejor alineado hacia los tres puntos */
.song-row.is-playing-demo .song-actions::after{
content:"👉" !important;
right:31px !important;
top:50% !important;
width:30px !important;
height:30px !important;
font-size:24px !important;
transform:translateY(-50%) !important;
animation:demoFingerPointToDots .9s ease-in-out infinite !important;
z-index:12 !important;
}
@keyframes demoFingerPointToDots{
0%,100%{ transform:translate(-5px,-50%) scale(1); opacity:.75; }
50%{ transform:translate(1px,-50%) scale(1.08); opacity:1; }
}
/* Aviso corto cuando una pista no tiene demo/link en Drive */
.demo-toast{
position:fixed;
left:50%;
top:76px;
transform:translate(-50%,-10px) scale(.96);
z-index:12000;
min-width:190px;
max-width:calc(100vw - 32px);
padding:12px 16px;
border-radius:999px;
background:rgba(20,24,32,.96);
color:#a7f3c8;
border:1px solid rgba(37,211,102,.28);
box-shadow:0 16px 38px rgba(0,0,0,.44),0 0 24px rgba(37,211,102,.16);
text-align:center;
font-size:13px;
line-height:1.15;
font-weight:900;
opacity:0;
pointer-events:none;
transition:.18s ease;
}
.demo-toast.show{
opacity:1;
transform:translate(-50%,0) scale(1);
}
/* Si no hay demo, el botón play del cover se mantiene visible pero con estado informativo */
.song-row:not(.is-playing-demo) .song-cover[data-no-demo="1"] .cover-play-btn{
background:rgba(37,211,102,.16) !important;
border-color:rgba(37,211,102,.30) !important;
color:#a7f3c8 !important;
}
/* AJUSTES FINALES: TOGGLE MENU, AUTOPLAY VISUAL, COLOR ACTIVO Y TOP
HITS */
/* Color recomendado para pista reproduciendo: carbón premium con acento verde suave.
Se integra mejor con el diseño oscuro que una franja verde completa. */
.song-row.is-playing-demo{
background:rgba(255,255,255,.085) !important;
box-shadow:inset 3px 0 0 rgba(23,232,122,.72), inset 0 0 0 1px rgba(255,255,255,.055), 0
10px 28px rgba(0,0,0,.18) !important;
border-bottom-color:rgba(255,255,255,.05) !important;
}
.song-row.is-playing-demo .song-cover img{
filter:brightness(.74) saturate(1.06) !important;
}
.song-row.is-playing-demo .cover-play-btn{
background:rgba(23,232,122,.16) !important;
border-color:rgba(23,232,122,.38) !important;
color:#d8ffe6 !important;
}
.song-row.is-playing-demo .song-title{
color:#ffffff !important;
}
.song-row.is-playing-demo .song-artist{
color:#b8bec8 !important;
}
.song-row.is-playing-demo .play-btn{
color:#d8ffe6 !important;
background:rgba(255,255,255,.08) !important;
}
/* Dedo mejor dirigido a los tres puntos */
.song-row.is-playing-demo .song-actions::after{
content:"👉" !important;
right:34px !important;
top:50% !important;
width:30px !important;
height:30px !important;
font-size:24px !important;
transform:translateY(-50%) !important;
animation:demoFingerPointToDots .85s ease-in-out infinite !important;
z-index:12 !important;
}
@keyframes demoFingerPointToDots{
0%,100%{ transform:translate(-7px,-50%) scale(1); opacity:.72; }
50%{ transform:translate(2px,-50%) scale(1.08); opacity:1; }
}
/* TOP HITS: botón play proporcional al cover y más transparente */
.album-cover:after{
background:rgba(0,0,0,.08) !important;
}
.album-cover-play{
width:44% !important;
max-width:68px !important;
min-width:44px !important;
background:rgba(0,0,0,.12) !important;
border-color:rgba(255,255,255,.30) !important;
color:rgba(255,255,255,.92) !important;
backdrop-filter:blur(1px) !important;
box-shadow:0 8px 22px rgba(0,0,0,.26) !important;
}
.album-cover-play i{
font-size:50% !important;
margin-left:3px !important;
}
.album-cover img{
filter:brightness(.86) saturate(1.02) !important;
}
@media (max-width:420px){
.album-cover-play{
width:46% !important;
min-width:42px !important;
}
}
/* El menú queda encima y se comporta como toggle */
.song-options-menu.show{
display:block !important;
}
/* AJUSTES FINALES SOLICITADOS - SIN DEEZER, BANNER PC SINGA, TOP HITS
COMO RESULTADO */
/* Ocultar por completo resultados Deezer/cotización automática */
#deezerWorldWrap,
.deezer-world-wrap{
display:none !important;
visibility:hidden !important;
height:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
}
/* El buscador y la canasta siempre visibles para que se entienda el vuelo del pedido */
.search-topbar{
position:sticky !important;
top:0 !important;
z-index:9800 !important;
display:block !important;
opacity:1 !important;
visibility:visible !important;
transform:none !important;
}
/* Color activo recomendado: carbón premium con acento verde, más integrado al diseño
oscuro */
.song-row.is-playing-demo{
background:rgba(255,255,255,.085) !important;
box-shadow:inset 3px 0 0 rgba(23,232,122,.72), inset 0 0 0 1px rgba(255,255,255,.055), 0
10px 28px rgba(0,0,0,.18) !important;
border-bottom-color:rgba(255,255,255,.05) !important;
}
.song-row.is-playing-demo .song-cover img{
filter:brightness(.76) saturate(1.06) !important;
}
.song-row.is-playing-demo .cover-play-btn{
background:rgba(23,232,122,.16) !important;
border-color:rgba(23,232,122,.42) !important;
color:#e8fff0 !important;
}
.song-row.is-playing-demo .song-title{ color:#ffffff !important; }
.song-row.is-playing-demo .song-artist{ color:#b8bec8 !important; }
.song-row.is-playing-demo .play-btn{
color:#d8ffe6 !important;
background:rgba(255,255,255,.08) !important;
}
/* Dedo apuntando mejor a los 3 puntos */
.song-row.is-playing-demo .song-actions::after{
content:"👉" !important;
right:34px !important;
top:50% !important;
width:30px !important;
height:30px !important;
font-size:24px !important;
transform:translateY(-50%) !important;
animation:demoFingerPointToDotsFinal .85s ease-in-out infinite !important;
z-index:12 !important;
}
@keyframes demoFingerPointToDotsFinal{
0%,100%{ transform:translate(-7px,-50%) scale(1); opacity:.72; }
50%{ transform:translate(2px,-50%) scale(1.08); opacity:1; }
}
/* Play de resultados: menos difuminado y más claro */
.cover-play-btn{
background:rgba(0,0,0,.12) !important;
border-color:rgba(255,255,255,.52) !important;
color:rgba(255,255,255,.96) !important;
backdrop-filter:none !important;
box-shadow:0 8px 20px rgba(0,0,0,.25) !important;
}
.song-cover img{
filter:brightness(.72) saturate(1.04) !important;
}
.song-cover img.cover-blur{
filter:blur(1.2px) brightness(.72) saturate(1.04) !important;
}
/* TOP HITS: el play proporcional al cover, más grande y más transparente */
.album-cover:after{
background:rgba(0,0,0,.05) !important;
}
.album-cover-play{
width:54% !important;
max-width:82px !important;
min-width:52px !important;
aspect-ratio:1/1 !important;
background:rgba(0,0,0,.10) !important;
border:1px solid rgba(255,255,255,.38) !important;
color:rgba(255,255,255,.95) !important;
backdrop-filter:none !important;
box-shadow:0 8px 22px rgba(0,0,0,.22) !important;
}
.album-cover-play i{
font-size:52% !important;
margin-left:4px !important;
}
.album-cover img{
filter:brightness(.90) saturate(1.03) !important;
}
@media (max-width:420px){
.album-cover-play{
width:56% !important;
min-width:50px !important;
}
}
/* Banner estilo Singa: más aire en escritorio */
@media (min-width:1024px){
.app-shell{
max-width:none !important;
padding-left:0 !important;
padding-right:0 !important;
}
.hero{
max-width:1344px !important;
margin:0 auto !important;
padding:44px 0 30px !important;
}
.premium-card{
width:100% !important;
max-width:1344px !important;
min-height:auto !important;
aspect-ratio:1344 / 400 !important;
border-radius:8px !important;
padding:0 56px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:hidden !important;
}
.premium-content{
max-width:650px !important;
text-align:center !important;
margin:0 auto !important;
}
.premium-kicker{
font-size:12px !important;
margin-bottom:10px !important;
}
.premium-title{
max-width:680px !important;
font-size:38px !important;
line-height:1.08 !important;
letter-spacing:-.035em !important;
}
.premium-sub{
max-width:640px !important;
margin:14px auto 0 !important;
font-size:23px !important;
line-height:1.25 !important;
font-weight:500 !important;
letter-spacing:.02em !important;
}
.premium-btn{
margin-top:38px !important;
min-width:164px !important;
height:48px !important;
border-radius:8px !important;
font-size:16px !important;
font-weight:700 !important;
}
.section,
.catalog-sticky,
#list,
#statusBox{
max-width:1500px !important;
margin-left:auto !important;
margin-right:auto !important;
}
}
@media (min-width:1380px){
.hero{
max-width:1344px !important;
}
}
/* Aire para forma de pago dentro del pedido */
#paymentCartWrap{
margin-top:14px !important;
margin-bottom:12px !important;
}
#paymentCartWrap label:first-child,
#paymentCartWrap > label{
display:block !important;
margin-bottom:10px !important;
color:#e9edf5 !important;
font-size:12.5px !important;
line-height:1.25 !important;
font-weight:900 !important;
}
#paymentCartWrap .payment-options{
gap:10px !important;
margin-top:2px !important;
}
/* Reproductor gris solo, sin título ni artista */
.bottom-demo-cover,
.bottom-demo-title,
.bottom-demo-artist{
display:none !important;
}
.bottom-demo-player{
grid-template-columns:1fr 34px !important;
}
/* AJUSTE FINAL - BANNER MÁS CERCA DEL BUSCADOR Y PLAY TOP HITS MÁS
GRANDE
PARA CAMBIAR EL TAMAÑO DEL TRIANGULITO DE TOP HITS:
cambia --top-hit-triangle-size: 34px;
Si quieres agrandar/achicar el círculo completo, cambia --top-hit-play-scale,
--top-hit-play-max o --top-hit-play-min.
*/
:root{
--top-hit-play-scale:58%;
--top-hit-play-max:92px;
--top-hit-play-min:66px;
--top-hit-triangle-size:34px;
}
/* El banner ya no queda tan separado del buscador */
.hero{
padding-top:10px !important;
}
/* TOP HITS: botón circular proporcional al cover y triángulo mucho más visible */
.album-cover-play{
width:var(--top-hit-play-scale) !important;
max-width:var(--top-hit-play-max) !important;
min-width:var(--top-hit-play-min) !important;
aspect-ratio:1/1 !important;
background:rgba(0,0,0,.07) !important;
border:1px solid rgba(255,255,255,.34) !important;
color:rgba(255,255,255,.96) !important;
backdrop-filter:none !important;
box-shadow:0 8px 22px rgba(0,0,0,.20) !important;
}
.album-cover-play i{
font-size:var(--top-hit-triangle-size) !important;
line-height:1 !important;
margin-left:4px !important;
}
.album-cover:after{
background:rgba(0,0,0,.04) !important;
}
.album-cover img{
filter:brightness(.93) saturate(1.03) !important;
}
/* Resultados/listado: play más claro, menos difuminado */
.cover-play-btn{
background:rgba(255,255,255,.08) !important;
border-color:rgba(255,255,255,.58) !important;
color:rgba(255,255,255,.98) !important;
backdrop-filter:none !important;
}
.song-cover img{
filter:brightness(.78) saturate(1.04) !important;
}
.song-cover img.cover-blur{
filter:blur(1px) brightness(.78) saturate(1.04) !important;
}
@media (max-width:420px){
:root{
--top-hit-play-scale:58%;
--top-hit-play-max:78px;
--top-hit-play-min:58px;
--top-hit-triangle-size:30px;
}
}
@media (min-width:1024px){
/* El ancho del banner queda alineado con el ancho de TOP HITS/listado */
.hero{
max-width:1500px !important;
margin:0 auto !important;
padding:18px 18px 24px !important;
}
.premium-card{
width:100% !important;
max-width:1500px !important;
aspect-ratio:1344 / 400 !important;
min-height:auto !important;
}
}
@media (min-width:1380px){
.hero{
max-width:1500px !important;
}
}
/* BARRA VERDE DE PROGRESO EN EL COVER ACTIVO */
.song-cover{
position:relative !important;
overflow:hidden !important;
}
.cover-demo-progress{
position:absolute;
left:0;
bottom:0;
width:0%;
height:4px;
border-radius:0 999px 999px 0;
background:linear-gradient(90deg,#17e87a,#75ffab);
box-shadow:0 0 14px rgba(23,232,122,.62);
opacity:0;
pointer-events:none;
z-index:9;
transition:width .16s linear, opacity .16s ease;
}
.song-row.is-playing-demo .cover-demo-progress{
width:calc(var(--demo-progress,0) * 1%);
opacity:1;
}
.song-row.is-playing-demo .song-cover::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:4px;
background:rgba(255,255,255,.14);
z-index:8;
pointer-events:none;
}
.song-row.is-playing-demo .song-cover{
box-shadow:0 0 0 1px rgba(23,232,122,.24), 0 0 18px rgba(23,232,122,.13) !important;
}
/* MINI FRANJA FIJA: REPRODUCIENDO AHORA */
:root{
--search-sticky-height:72px;
}
.now-playing-sticky{
display:none;
position:sticky;
top:var(--search-sticky-height);
z-index:9700;
padding:0 18px 8px;
margin-top:-2px;
background:linear-gradient(180deg,rgba(5,6,7,.95),rgba(5,6,7,.78),rgba(5,6,7,0));
backdrop-filter:blur(12px);
}
.now-playing-sticky.show{
display:block;
}
.now-playing-card{
width:100%;
min-height:58px;
display:grid;
grid-template-columns:42px 1fr 38px;
align-items:center;
gap:10px;
padding:8px 9px;
border-radius:16px;
background:linear-gradient(135deg,rgba(23,232,122,.11),rgba(255,255,255,.055));
border:1px solid rgba(23,232,122,.22);
box-shadow:0 12px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.now-playing-cover{
width:42px;
height:42px;
border-radius:10px;
overflow:hidden;
background:#111318;
position:relative;
box-shadow:0 8px 18px rgba(0,0,0,.32);
}
.now-playing-cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:brightness(.82);
}
.now-playing-cover:after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:3px;
background:var(--green);
transform-origin:left center;
transform:scaleX(calc(var(--demo-progress-now,0) / 100));
box-shadow:0 0 10px rgba(23,232,122,.65);
}
.now-playing-info{
min-width:0;
}
.now-playing-label{
color:#8affb6;
font-size:9.5px;
line-height:1;
font-weight:900;
letter-spacing:.45px;
text-transform:uppercase;
margin-bottom:5px;
}
.now-playing-title{
color:#fff;
font-size:13.5px;
line-height:1.12;
font-weight:800;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.now-playing-artist{
margin-top:3px;
color:#8d939f;
font-size:11px;
line-height:1.1;
font-weight:650;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.now-playing-more{
width:36px;
height:36px;
border-radius:999px;
border:0;
background:rgba(255,255,255,.08);
color:#d7d9de;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}
.now-playing-more i{
font-size:17px;
}
.now-playing-more:active,
.now-playing-more.is-active{
background:rgba(23,232,122,.16);
color:#8affb6;
}
.song-options-menu.from-now-playing{
z-index:9900 !important;
}
.song-options-menu.from-now-playing:before{
content:"";
position:absolute;
top:-6px;
right:18px;
width:12px;
height:12px;
background:#2b2d30;
border-left:1px solid rgba(255,255,255,.08);
border-top:1px solid rgba(255,255,255,.08);
transform:rotate(45deg);
}
@media (min-width:1024px){
:root{ --search-sticky-height:74px; }
.now-playing-sticky{
padding-left:18px;
padding-right:18px;
}
.now-playing-card{
max-width:620px;
}
}
/* AJUSTE FINAL: INDICACIÓN DE PLAY Y SIN FRANJA ESTÁTICA */
/* Para no recargar la pantalla, la mini franja fija de "Reproduciendo demo" queda apagada.
*/
.now-playing-sticky,
#nowPlayingBar{
display:none !important;
visibility:hidden !important;
height:0 !important;
overflow:hidden !important;
padding:0 !important;
margin:0 !important;
}
/* Reproductor gris inferior con microindicación clara */
.demo-play-hint{
display:none;
width:100%;
padding:0 40px 6px;
color:#b9c0ca;
text-align:center;
font-size:12px;
line-height:1.2;
font-weight:850;
letter-spacing:.1px;
text-shadow:0 1px 8px rgba(0,0,0,.45);
pointer-events:none;
}
.bottom-demo-player.show .demo-play-hint{
display:block;
}
/* Damos aire inferior para que el reproductor + aviso no tapen el contenido */
body{
padding-bottom:112px !important;
}
.bottom-demo-player{
padding-top:8px !important;
}
#bottomDemoAudio.is-active{
height:40px !important;
}
#bottomDemoDrive.is-active{
height:74px !important;
}
@media (max-width:390px){
.demo-play-hint{
font-size:11.5px;
padding-left:34px;
padding-right:34px;
}
}
@media (min-width:720px){
.demo-play-hint{
font-size:12.5px;
padding-bottom:7px;
}
body{
padding-bottom:118px !important;
}
}
/* AJUSTE FINAL: MARQUESINA CLICKEABLE DEBAJO DEL REPRODUCTOR */
.bottom-demo-player{
padding:8px 8px calc(10px + env(safe-area-inset-bottom)) !important;
}
.bottom-demo-info{
width:100% !important;
min-width:0 !important;
padding:0 !important;
}
.demo-play-hint{
display:none;
width:100%;
margin-top:6px;
padding:6px 10px;
border-radius:999px;
background:rgba(14,17,22,.82);
border:1px solid rgba(255,255,255,.08);
color:#d7dce5;
font-size:12px;
line-height:1.15;
font-weight:850;
letter-spacing:.1px;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
pointer-events:auto;
user-select:none;
box-shadow:0 8px 22px rgba(0,0,0,.32);
}
.bottom-demo-player.show .demo-play-hint{
display:block !important;
}
.demo-play-hint:active{
background:rgba(23,232,122,.12);
border-color:rgba(23,232,122,.24);
color:#eafff1;
}
.demo-play-hint-track{
display:inline-flex;
align-items:center;
gap:44px;
min-width:max-content;
animation:demoHintMarquee 16s linear infinite;
will-change:transform;
}
.demo-play-hint span{
display:inline-block;
white-space:nowrap;
}
@keyframes demoHintMarquee{
0%{ transform:translateX(0); }
100%{ transform:translateX(calc(-50% - 22px)); }
}
.song-row.return-highlight{
animation:returnRowPulse 1.2s ease-out 1;
}
@keyframes returnRowPulse{
0%{ box-shadow:inset 0 0 0 2px rgba(23,232,122,.85), 0 0 0 rgba(23,232,122,0); }
45%{ box-shadow:inset 0 0 0 2px rgba(23,232,122,.85), 0 0 28px rgba(23,232,122,.18); }
100%{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.055), 0 10px 28px rgba(0,0,0,.18); }
}
body{
padding-bottom:122px !important;
}
@media (min-width:720px){
.bottom-demo-player{
padding-left:14px !important;
padding-right:14px !important;
}
.demo-play-hint{
max-width:720px;
margin-left:auto;
margin-right:auto;
font-size:12.5px;
}
body{
padding-bottom:128px !important;
}
}


/* =========================================================
   DJGABO 20260728-23 · COVERS LIMPIOS Y RESPUESTA INMEDIATA
   El Play aparece solo al interactuar. Las imágenes reservan
   espacio y se muestran con una transición breve al cargar.
   ========================================================= */
.album-cover,
.song-cover{
  overflow:hidden;
  background:linear-gradient(135deg,#171b22,#252b35 52%,#171b22)!important;
}
.album-cover:after{
  background:transparent!important;
  transition:background .16s ease!important;
}
.album-cover img,
.song-cover img,
.song-cover img.cover-blur{
  filter:none!important;
  transform:translateZ(0);
  transition:opacity .16s ease,filter .16s ease,transform .18s ease!important;
}
.dj-cover-image{
  opacity:0;
}
.dj-cover-image.is-loaded{
  opacity:1;
}
.album-cover-play,
.cover-play-btn{
  opacity:0!important;
  visibility:hidden!important;
  transform:scale(.82)!important;
  pointer-events:none!important;
  transition:opacity .15s ease,transform .15s ease,visibility .15s ease!important;
}
@media (hover:hover) and (pointer:fine){
  .album-card:hover .album-cover:after,
  .album-card:focus-visible .album-cover:after{
    background:rgba(0,0,0,.18)!important;
  }
  .album-card:hover .album-cover img,
  .album-card:focus-visible .album-cover img{
    filter:brightness(.78)!important;
    transform:scale(1.018)!important;
  }
  .album-card:hover .album-cover-play,
  .album-card:focus-visible .album-cover-play,
  .song-cover:hover .cover-play-btn,
  .song-cover:focus-within .cover-play-btn{
    opacity:1!important;
    visibility:visible!important;
    transform:scale(1)!important;
  }
  .song-cover:hover img,
  .song-cover:focus-within img{
    filter:brightness(.76)!important;
  }
}
@media (hover:none), (pointer:coarse){
  .album-card:active .album-cover-play,
  .song-cover:active .cover-play-btn{
    opacity:1!important;
    visibility:visible!important;
    transform:scale(1)!important;
  }
  .album-card:active .album-cover img,
  .song-cover:active img{
    filter:brightness(.76)!important;
  }
}
/* La pista que está sonando conserva su acento, pero no tapa el cover. */
.song-row.is-playing-demo .cover-play-btn{
  opacity:0!important;
  visibility:hidden!important;
}
@media (hover:hover) and (pointer:fine){
  .song-row.is-playing-demo .song-cover:hover .cover-play-btn{
    opacity:1!important;
    visibility:visible!important;
  }
}


/* =========================================================
   DJGABO 20260728-26 · CARGA DE COVERS SIN PARPADEO BLANCO
========================================================= */
.album-cover,
.song-cover{
  background:
    linear-gradient(110deg,#151a21 8%,#242b35 18%,#151a21 33%)!important;
  background-size:200% 100%!important;
}
.album-cover:has(.dj-cover-image:not(.is-loaded)),
.song-cover:has(.dj-cover-image:not(.is-loaded)){
  animation:djgaboCoverSkeleton 1.05s linear infinite;
}
.dj-cover-image{
  background:transparent!important;
  color:transparent!important;
}
.dj-cover-image.is-loaded{
  animation:none!important;
}
.dj-cover-image.is-error{
  opacity:1!important;
  background:linear-gradient(135deg,#171b22,#252b35 52%,#171b22)!important;
}
@keyframes djgaboCoverSkeleton{
  to{background-position-x:-200%;}
}
@media (prefers-reduced-motion:reduce){
  .album-cover:has(.dj-cover-image:not(.is-loaded)),
  .song-cover:has(.dj-cover-image:not(.is-loaded)){
    animation:none!important;
  }
}


/* =========================================================
   DJGABO 20260728-27 · COVERS HÍBRIDOS ULTRARRÁPIDOS
========================================================= */
.album-cover,
.song-cover{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 28% 24%,rgba(40,213,115,.18),transparent 34%),
    linear-gradient(135deg,#12171e,#252d38 52%,#11161c)!important;
}

/* Cover provisional elegante: nunca vuelve a verse un cuadro blanco. */
.album-cover::before,
.song-cover::before{
  content:"🎙";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:0;
  color:rgba(255,255,255,.28);
  font-size:clamp(18px,28%,32px);
  opacity:.88;
  transition:opacity .12s ease;
}

.album-cover:has(.dj-cover-image.is-loaded)::before,
.song-cover:has(.dj-cover-image.is-loaded)::before{
  opacity:0;
}

.dj-cover-image{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.015);
  transition:opacity .12s ease,transform .16s ease;
  background:transparent!important;
}

.dj-cover-image.is-loaded{
  opacity:1!important;
  transform:scale(1);
}

.dj-cover-image.is-error{
  opacity:0!important;
}

/* El modal reserva el espacio y hace una transición corta, sin destello. */
#songModalCover{
  background:
    radial-gradient(circle at 30% 22%,rgba(40,213,115,.18),transparent 34%),
    linear-gradient(135deg,#12171e,#252d38 52%,#11161c)!important;
  opacity:.22;
  transition:opacity .12s ease;
}
#songModalCover.is-cover-ready{
  opacity:1;
}

/* La animación de espera anterior queda anulada para evitar sensación de lag. */
.album-cover:has(.dj-cover-image:not(.is-loaded)),
.song-cover:has(.dj-cover-image:not(.is-loaded)){
  animation:none!important;
}


/* =========================================================
   DJGABO 20260728-28 · FALLBACK INSTANTÁNEO SIN INTERNET
   Igual al principio usado por la web PACK PISTAS:
   si no existe cover real, se dibuja localmente con CSS.
========================================================= */
.song-cover,
.album-cover{
  --c1:#14b8a6;
  --c2:#22c55e;
  --c3:#3b82f6;
  --c4:#0f172a;
  --c5:#1e293b;
  background:
    radial-gradient(circle at 22% 18%,var(--c1),transparent 38%),
    radial-gradient(circle at 78% 25%,var(--c2),transparent 40%),
    radial-gradient(circle at 45% 82%,var(--c3),transparent 44%),
    linear-gradient(135deg,var(--c4),var(--c5))!important;
}

/* Variaciones automáticas: no descargan imágenes. */
.song-row:nth-child(8n+1) .song-cover,
.album-card:nth-child(8n+1) .album-cover{--c1:#f97316;--c2:#0ea5e9;--c3:#22c55e;--c4:#172033;--c5:#26364b;}
.song-row:nth-child(8n+2) .song-cover,
.album-card:nth-child(8n+2) .album-cover{--c1:#8b5cf6;--c2:#ec4899;--c3:#06b6d4;--c4:#211934;--c5:#302247;}
.song-row:nth-child(8n+3) .song-cover,
.album-card:nth-child(8n+3) .album-cover{--c1:#facc15;--c2:#fb7185;--c3:#38bdf8;--c4:#302514;--c5:#3d2c1c;}
.song-row:nth-child(8n+4) .song-cover,
.album-card:nth-child(8n+4) .album-cover{--c1:#14b8a6;--c2:#84cc16;--c3:#f59e0b;--c4:#122a26;--c5:#26341c;}
.song-row:nth-child(8n+5) .song-cover,
.album-card:nth-child(8n+5) .album-cover{--c1:#ef4444;--c2:#3b82f6;--c3:#a855f7;--c4:#30171c;--c5:#22294a;}
.song-row:nth-child(8n+6) .song-cover,
.album-card:nth-child(8n+6) .album-cover{--c1:#0f766e;--c2:#64748b;--c3:#eab308;--c4:#15222a;--c5:#29303c;}
.song-row:nth-child(8n+7) .song-cover,
.album-card:nth-child(8n+7) .album-cover{--c1:#db2777;--c2:#7c3aed;--c3:#0891b2;--c4:#28172b;--c5:#202641;}
.song-row:nth-child(8n+8) .song-cover,
.album-card:nth-child(8n+8) .album-cover{--c1:#ea580c;--c2:#16a34a;--c3:#2563eb;--c4:#2b1d13;--c5:#183226;}

.song-cover::before,
.album-cover::before{
  content:"🎙";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:0;
  color:rgba(255,255,255,.88);
  font-size:18px;
  text-shadow:0 2px 7px rgba(0,0,0,.45);
  opacity:.94;
}

/* Con cover real, desaparece el fondo generado en 0.12 s. */
.song-cover:has(.dj-cover-image.is-loaded:not(.is-generated-cover))::before,
.album-cover:has(.dj-cover-image.is-loaded:not(.is-generated-cover))::before{
  opacity:0;
}

/* Sin cover real: no hay solicitud a Imgur; el CSS permanece visible. */
.dj-cover-image.is-generated-cover,
.dj-cover-image.missing-cover.is-generated-cover{
  opacity:0!important;
  visibility:hidden!important;
}

/* Imagen real: transición mínima. */
.dj-cover-image:not(.is-generated-cover){
  opacity:0;
  transition:opacity .12s ease!important;
}
.dj-cover-image.is-loaded:not(.is-generated-cover){
  opacity:1!important;
}

/* Evita que reglas antiguas conviertan el fallback en un cuadro oscuro. */
.song-cover:has(.is-generated-cover),
.album-cover:has(.is-generated-cover){
  filter:none!important;
}


/* =========================================================
   DJGABO 20260728-31 · DISTINGUIR COVER REAL Y COVER GENERADO
========================================================= */
/* Cuando existe un cover real, no se muestra un cover falso de colores. */
.song-cover,
.album-cover{
  background:linear-gradient(135deg,#10151c,#202833 52%,#0d1218)!important;
}
.song-cover::before,
.album-cover::before{
  content:""!important;
  opacity:0!important;
}

/* Los colores y el micrófono aparecen únicamente cuando COVER está vacío. */
.song-cover:has(.dj-cover-image.is-generated-cover),
.album-cover:has(.dj-cover-image.is-generated-cover){
  --c1:#14b8a6;
  --c2:#22c55e;
  --c3:#3b82f6;
  --c4:#0f172a;
  --c5:#1e293b;
  background:
    radial-gradient(circle at 22% 18%,var(--c1),transparent 38%),
    radial-gradient(circle at 78% 25%,var(--c2),transparent 40%),
    radial-gradient(circle at 45% 82%,var(--c3),transparent 44%),
    linear-gradient(135deg,var(--c4),var(--c5))!important;
}
.song-cover:has(.dj-cover-image.is-generated-cover)::before,
.album-cover:has(.dj-cover-image.is-generated-cover)::before{
  content:"🎙"!important;
  opacity:.94!important;
  color:rgba(255,255,255,.88)!important;
}

/* Variaciones solo para pistas que realmente no tienen cover. */
.song-row:nth-child(8n+1) .song-cover:has(.is-generated-cover),
.album-card:nth-child(8n+1) .album-cover:has(.is-generated-cover){--c1:#f97316;--c2:#0ea5e9;--c3:#22c55e;--c4:#172033;--c5:#26364b;}
.song-row:nth-child(8n+2) .song-cover:has(.is-generated-cover),
.album-card:nth-child(8n+2) .album-cover:has(.is-generated-cover){--c1:#8b5cf6;--c2:#ec4899;--c3:#06b6d4;--c4:#211934;--c5:#302247;}
.song-row:nth-child(8n+3) .song-cover:has(.is-generated-cover),
.album-card:nth-child(8n+3) .album-cover:has(.is-generated-cover){--c1:#facc15;--c2:#fb7185;--c3:#38bdf8;--c4:#302514;--c5:#3d2c1c;}
.song-row:nth-child(8n+4) .song-cover:has(.is-generated-cover),
.album-card:nth-child(8n+4) .album-cover:has(.is-generated-cover){--c1:#14b8a6;--c2:#84cc16;--c3:#f59e0b;--c4:#122a26;--c5:#26341c;}
.song-row:nth-child(8n+5) .song-cover:has(.is-generated-cover),
.album-card:nth-child(8n+5) .album-cover:has(.is-generated-cover){--c1:#ef4444;--c2:#3b82f6;--c3:#a855f7;--c4:#30171c;--c5:#22294a;}
.song-row:nth-child(8n+6) .song-cover:has(.is-generated-cover),
.album-card:nth-child(8n+6) .album-cover:has(.is-generated-cover){--c1:#0f766e;--c2:#64748b;--c3:#eab308;--c4:#15222a;--c5:#29303c;}
.song-row:nth-child(8n+7) .song-cover:has(.is-generated-cover),
.album-card:nth-child(8n+7) .album-cover:has(.is-generated-cover){--c1:#db2777;--c2:#7c3aed;--c3:#0891b2;--c4:#28172b;--c5:#202641;}
.song-row:nth-child(8n+8) .song-cover:has(.is-generated-cover),
.album-card:nth-child(8n+8) .album-cover:has(.is-generated-cover){--c1:#ea580c;--c2:#16a34a;--c3:#2563eb;--c4:#2b1d13;--c5:#183226;}


/* =========================================================
   DJGABO 20260811 · FALLBACK REAL DIFUMINADO
   Si COVER está vacío, se usa otro cover real del catálogo.
   La clase .missing-cover identifica únicamente ese estado temporal.
========================================================= */
.song-cover:has(.dj-cover-image.missing-cover),
.album-cover:has(.dj-cover-image.missing-cover){
  overflow:hidden!important;
  background:#0d1218!important;
}
.dj-cover-image.missing-cover{
  opacity:1!important;
  visibility:visible!important;
  filter:blur(13px) brightness(.62) saturate(.82)!important;
  transform:scale(1.16)!important;
  transition:none!important;
}
.song-cover:has(.dj-cover-image.missing-cover)::before,
.album-cover:has(.dj-cover-image.missing-cover)::before{
  content:""!important;
  opacity:0!important;
}


/* DOS FILAS DE 10 - FRANJAS SUPERIORES */
#newRail,
#mostRequestedRail{
  display:grid !important;
  grid-template-columns:repeat(10,126px);
  grid-template-rows:repeat(2,auto);
  grid-auto-flow:row;
  align-items:start;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:6px;
  scroll-snap-type:x proximity;
}
#newRail .album-card,
#mostRequestedRail .album-card{
  width:126px;
  min-width:0;
  flex:none !important;
}
#newRail .album-cover,
#mostRequestedRail .album-cover{
  width:126px;
}
@media (min-width:720px){
  #newRail,
  #mostRequestedRail{
    grid-template-columns:repeat(10,148px);
    gap:18px;
  }
  #newRail .album-card,
  #mostRequestedRail .album-card,
  #newRail .album-cover,
  #mostRequestedRail .album-cover{
    width:148px;
  }
}
@media (min-width:1024px){
  #newRail,
  #mostRequestedRail{
    grid-template-columns:repeat(10,minmax(0,1fr));
    gap:12px;
    overflow-x:hidden;
  }
  #newRail .album-card,
  #mostRequestedRail .album-card,
  #newRail .album-cover,
  #mostRequestedRail .album-cover{
    width:100%;
  }
}