.radio-v6{position:relative;width:100%;min-width:0;box-sizing:border-box;display:grid;grid-template-columns:50px minmax(0,1fr) 42px;gap:10px;align-items:center;padding:10px;background:#fff;border:1px solid #ccd4dc;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.10);font-family:Arial,Helvetica,sans-serif;color:#555}
.radio-logo{width:48px;height:48px;min-width:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:1px solid #0870a8;border-radius:4px;background:linear-gradient(#2997d7,#0874b1);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.12)}
.radio-signal{position:relative;width:8px;height:8px;box-sizing:border-box;background:#fff;border-radius:50%}
.radio-signal:before,.radio-signal:after{content:"";position:absolute;top:50%;left:50%;box-sizing:border-box;border:2px solid rgba(255,255,255,.9);border-radius:50%;transform:translate(-50%,-50%)}
.radio-signal:before{width:22px;height:22px}
.radio-signal:after{width:34px;height:34px;opacity:.55}
.radio-info{min-width:0;overflow:hidden}
.radio-title{display:flex;align-items:center;min-width:0;gap:6px;margin:0 0 3px;padding:0;line-height:15px}
.radio-title strong{display:block;min-width:0;overflow:hidden;color:#222;font-size:13px;font-weight:bold;line-height:15px;text-overflow:ellipsis;white-space:nowrap}
.radio-live{flex:0 0 auto;display:inline-block;padding:2px 5px;border-radius:2px;background:#ec5c5c;color:#fff;font-size:8px;font-weight:bold;line-height:11px}
.radio-song{width:100%;min-width:0;overflow:hidden;margin:0 0 3px;color:#555;font-size:11px;line-height:14px;text-overflow:ellipsis;white-space:nowrap}
.radio-meta{display:flex;align-items:center;width:100%;min-width:0;overflow:hidden;margin:0 0 5px;color:#999;font-size:9px;line-height:11px;white-space:nowrap}
.radio-meta span{overflow:hidden;text-overflow:ellipsis}
.radio-dot{flex:0 0 auto;margin:0 4px}
.radio-volume-box{width:100%;height:14px;display:flex;align-items:center;box-sizing:border-box}
.radio-mute{appearance:none!important;-webkit-appearance:none!important;width:18px!important;min-width:18px!important;max-width:18px!important;height:18px!important;min-height:18px!important;max-height:18px!important;box-sizing:border-box!important;flex:0 0 18px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0 5px 0 0!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:#777!important;cursor:pointer;font-size:10px!important;line-height:18px!important}
.radio-volume{width:100%!important;min-width:0!important;height:4px!important;padding:0!important;margin:0!important;cursor:pointer;accent-color:#1681c4}
.radio-action{width:42px;min-width:42px;display:flex;align-items:center;justify-content:center}

.radio-play{appearance:none!important;-webkit-appearance:none!important;position:relative!important;width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;max-height:40px!important;aspect-ratio:1/1!important;box-sizing:border-box!important;flex:0 0 40px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;border:1px solid #12689f!important;border-radius:50%!important;outline:0!important;background:linear-gradient(#2998d7,#1176b4)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.18)!important;color:#fff!important;cursor:pointer!important;line-height:1!important;overflow:hidden!important}
.radio-play:hover{background:linear-gradient(#35a5e3,#1682c1)!important}
.radio-play:active{transform:translateY(1px)}
.radio-play-icon{display:block;width:0;height:0;margin-left:3px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid #fff}
.radio-play.is-playing .radio-play-icon{width:12px;height:13px;margin-left:0;border:0;background:linear-gradient(to right,#fff 0,#fff 4px,transparent 4px,transparent 8px,#fff 8px,#fff 12px)}
.radio-play.is-loading .radio-play-icon{width:15px;height:15px;margin:0;box-sizing:border-box;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:radioSpin .7s linear infinite}

.radio-v6.playing .radio-logo{animation:radioPulse 1.8s infinite}
.radio-v6.playing .radio-live{animation:radioLive 1.4s infinite}

@keyframes radioSpin{to{transform:rotate(360deg)}}
@keyframes radioLive{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes radioPulse{
    0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 0 rgba(18,126,190,.30)}
    70%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 7px rgba(18,126,190,0)}
    100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 0 rgba(18,126,190,0)}
}

/* MODO FLOTANTE */
.radio-v6.radio-floating{position:fixed;width:320px;right:20px;bottom:20px;z-index:999999;box-shadow:0 8px 30px rgba(0,0,0,.28);animation:radioFloatIn .2s ease-out}
.radio-floating .radio-title{cursor:move;user-select:none;-webkit-user-select:none}
.radio-floating .radio-logo{cursor:move}
.radio-float-close{display:none!important}
.radio-floating .radio-float-close{appearance:none!important;-webkit-appearance:none!important;display:flex!important;position:absolute!important;top:-9px!important;right:-9px!important;width:23px!important;min-width:23px!important;max-width:23px!important;height:23px!important;min-height:23px!important;max-height:23px!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;border:1px solid #bfc5ca!important;border-radius:50%!important;background:#fff!important;box-shadow:0 2px 5px rgba(0,0,0,.18)!important;color:#777!important;font:bold 15px/20px Arial!important;cursor:pointer!important;z-index:5}
.radio-floating .radio-float-close:hover{background:#f5f5f5!important;color:#333!important}
@keyframes radioFloatIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* BOTÓN PARA REABRIR CUANDO CIERRAN EL FLOTANTE */
.radio-reopen{appearance:none!important;-webkit-appearance:none!important;display:none;position:fixed;right:20px;bottom:20px;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;border:1px solid #0870a8!important;border-radius:50%!important;background:linear-gradient(#2997d7,#0874b1)!important;box-shadow:0 4px 15px rgba(0,0,0,.25)!important;color:#fff!important;cursor:pointer!important;font-size:18px!important;z-index:999999}
.radio-reopen.show{display:block!important}

/* HOME */
#radioHomeSlot{width:100%}

@media(max-width:500px){
    .radio-v6.radio-floating{width:calc(100vw - 24px);right:12px;bottom:12px}
}

@media(max-width:360px){
    .radio-v6{grid-template-columns:44px minmax(0,1fr) 38px;gap:7px;padding:8px}
    .radio-logo{width:42px;min-width:42px;height:42px}
    .radio-action{width:38px;min-width:38px}
    .radio-play{width:36px!important;min-width:36px!important;max-width:36px!important;height:36px!important;min-height:36px!important;max-height:36px!important;flex-basis:36px!important}
    .radio-title strong{font-size:12px}
    .radio-live{padding:2px 4px;font-size:7px}
}