.radio-bar{
    position:fixed;
    bottom:0;
    left:0;
    right:0;

    height:70px;

    background:var(--ink);

    border-top:3px solid var(--red);

    display:flex;
    align-items:center;

    z-index:999999;

    box-shadow:0 -10px 30px rgba(0,0,0,.35);

    color:#fff;
}

/* BLOQUE IZQUIERDO */

.rb-brand{

    background:var(--red);

    height:100%;

    display:flex;
    align-items:center;

    gap:12px;

    padding:0 20px;

    flex-shrink:0;
}

.rb-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#fff;

    animation:pulse 1.4s infinite;
}

@keyframes pulse{

    0%{
        transform:scale(.9);
        opacity:.5;
    }

    50%{
        transform:scale(1.2);
        opacity:1;
    }

    100%{
        transform:scale(.9);
        opacity:.5;
    }

}

.rb-logo{

    width:40px;
    height:40px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid rgba(255,255,255,.2);
}

.rb-brand-text{

    display:flex;
    flex-direction:column;
}

.rb-label{

    font-size:10px;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.75;
}

.rb-name{

    font-size:18px;

    font-weight:700;

    line-height:1;
}

/* PLAY */

.rb-play{

    width:46px;
    height:46px;

    border-radius:50%;

    border:none;

    background:var(--red);

    color:#fff;

    cursor:pointer;

    margin-left:20px;

    font-size:16px;

    transition:.2s;
}

.rb-play:hover{

    transform:scale(1.08);
}

/* INFO */

.rb-info{

    flex:1;

    min-width:0;

    margin-left:18px;
}

.rb-prog{

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.rb-sub{

    font-size:11px;

    opacity:.6;

    margin-top:2px;
}

/* WAVE */

.rb-wave{

    display:flex;

    align-items:flex-end;

    gap:3px;

    height:22px;

    margin-right:20px;
}

.rb-wave span{

    width:3px;

    background:#d8b46a;

    border-radius:3px;

    animation:wave 1s infinite ease-in-out;
}

.rb-wave span:nth-child(1){
    height:40%;
}

.rb-wave span:nth-child(2){
    height:90%;
    animation-delay:.1s;
}

.rb-wave span:nth-child(3){
    height:60%;
    animation-delay:.2s;
}

.rb-wave span:nth-child(4){
    height:100%;
    animation-delay:.3s;
}

.rb-wave span:nth-child(5){
    height:50%;
    animation-delay:.4s;
}

@keyframes wave{

    0%,100%{
        transform:scaleY(.5);
    }

    50%{
        transform:scaleY(1);
    }

}

/* VOLUMEN */

.rb-volume-wrap{

    width:120px;

    margin-right:20px;
}

#srp-volume{

    width:100%;
}

/* CERRAR */

.srp-close{

    width:55px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

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

    opacity:.5;

    transition:.2s;
}

.srp-close:hover{

    opacity:1;
}

/* TABLET */

@media(max-width:1024px){

    .rb-prog{
        max-width:250px;
    }

}

/* MOBILE */

@media(max-width:768px){

    .radio-bar{

        height:60px;
    }

    .rb-brand{

        padding:0 10px;
    }

    .rb-logo{

        width:32px;
        height:32px;
    }

    .rb-name{

        font-size:13px;
    }

    .rb-label{

        font-size:8px;
    }

    .rb-info{

        display:none;
    }

    .rb-wave{

        display:none;
    }

    .rb-volume-wrap{

        display:none;
    }

    .rb-play{

        width:40px;
        height:40px;

        margin-left:10px;
    }

    .srp-close{

        width:42px;
    }

}

.rb-wave{
    opacity:.3;
}

.radio-playing .rb-wave{
    opacity:1;
}

.rb-wave span{
    animation-play-state: paused;
}

.radio-playing .rb-wave span{
    animation-play-state: running;
}

/* BOTON PLAY MODERNO */

.rb-play{

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

    transition:all .25s ease;

}

.rb-play svg{

    width:18px;
    height:18px;

}

.rb-play.playing{

    background:#d8b46a;

    box-shadow:
        0 0 15px rgba(216,180,106,.5);

}

/* ICONOS */

.srp-icon-play,
.srp-icon-pause{

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

}

/* WAVE SOLO CUANDO SUENA */

.rb-wave span{

    animation-play-state:paused;

}

.radio-playing .rb-wave span{

    animation-play-state:running;

}