/* Radio UNO Digital – Sticky Player v2.3.0 */

:root {
    --rud-red:   #e8001c;
    --rud-text:  #f0f0f0;
    --rud-muted: #888;
    --rud-h:     74px;
    --rud-z:     99999;
    --rud-font:  'Segoe UI', system-ui, -apple-system, sans-serif;
}

body { padding-bottom: var(--rud-h) !important; }

/* ── Barra ── */
#rud-bar {
    position:   fixed;
    bottom:     0; left: 0; right: 0;
    height:     var(--rud-h);
    /* FONDO SEMITRANSPARENTE CON BLUR */
    background: rgba(8, 8, 8, 0.28);
    backdrop-filter:         saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    border-top: 3px solid var(--rud-red);
    z-index:    var(--rud-z);
    box-shadow: 0 -6px 32px rgba(0,0,0,.6);
    font-family: var(--rud-font);
}

.rud-inner {
    display:     flex;
    align-items: center;
    height:      100%;
    padding:     0 18px;
    gap:         14px;
}

/* ── Artwork ── */
.rud-art-wrap { position: relative; flex-shrink: 0; }

#rud-art {
    width:  50px; height: 50px;
    border-radius: 6px;
    object-fit:    cover;
    display:       block;
    border:        2px solid rgba(255,255,255,.12);
    transition:    opacity .4s;
}

.rud-live-dot {
    width: 8px; height: 8px;
    background:    var(--rud-red);
    border-radius: 50%;
    position:      absolute; bottom: -3px; right: -3px;
    opacity:       0; transition: opacity .3s;
}
#rud-bar.is-playing .rud-live-dot { opacity:1; animation: blink 1.5s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ── Info ── */
.rud-info { flex:1; min-width:0; overflow:hidden; }

.rud-station-name {
    font-size:9px; font-weight:700; letter-spacing:1.8px;
    text-transform:uppercase; color:var(--rud-red); margin-bottom:2px;
}
.rud-title {
    font-size:14px; font-weight:600; color:var(--rud-text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition: opacity .3s;
}
.rud-artist {
    font-size:12px; color:var(--rud-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── App Badges ── */
.rud-apps { display:flex; flex-direction:row; gap:8px; flex-shrink:0; align-items:center; }

.rud-app-btn {
    display:flex; align-items:center; gap:7px;
    background:  rgba(255,255,255,.07);
    border:      1px solid rgba(255,255,255,.12);
    border-radius:7px; padding:5px 10px;
    text-decoration:none; color:var(--rud-text);
    transition: background .2s, border-color .2s, transform .15s;
    white-space:nowrap;
}
.rud-app-btn:hover { background:rgba(232,0,28,.18); border-color:var(--rud-red); transform:translateY(-1px); }
.rud-app-btn svg   { width:18px; height:18px; color:var(--rud-red); flex-shrink:0; }
.rud-app-btn span  { display:flex; flex-direction:column; line-height:1.15; }
.rud-app-btn small { font-size:9px; color:var(--rud-muted); }
.rud-app-btn strong{ font-size:11px; font-weight:700; }

/* ── Separador ── */
.rud-sep { width:1px; height:36px; background:rgba(255,255,255,.1); flex-shrink:0; }

/* ── Redes ── */
.rud-socials { display:flex; align-items:center; gap:5px; flex-shrink:0; }

.rud-soc {
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,.07);
    color:var(--rud-muted); text-decoration:none;
    transition: background .2s, color .2s, transform .15s;
}
.rud-soc:hover { background:var(--rud-red); color:#fff; transform:scale(1.12); }
.rud-soc svg   { width:15px; height:15px; }

/* ── Visualizador (a la derecha de las redes) ── */
.rud-vis {
    display:flex; align-items:flex-end;
    gap:3px; height:28px; flex-shrink:0;
    opacity:0; transition:opacity .4s;
}
#rud-bar.is-playing .rud-vis { opacity:1; }

.rud-vis span {
    display:block; width:4px;
    background:var(--rud-red);
    border-radius:2px 2px 0 0;
    animation: eq 1s ease-in-out infinite alternate;
    min-height:4px;
}
.rud-vis span:nth-child(1){animation-duration:.8s}
.rud-vis span:nth-child(2){animation-duration:1.1s;animation-delay:.1s}
.rud-vis span:nth-child(3){animation-duration:.7s;animation-delay:.2s}
.rud-vis span:nth-child(4){animation-duration:1.3s;animation-delay:.05s}
.rud-vis span:nth-child(5){animation-duration:.9s;animation-delay:.15s}
@keyframes eq { 0%{height:4px} 100%{height:26px} }

/* ── Volumen ── */
.rud-vol { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.rud-vol-ico { width:13px; height:13px; color:var(--rud-muted); flex-shrink:0; }

#rud-vol {
    -webkit-appearance:none; appearance:none;
    width:80px; height:4px;
    background:rgba(255,255,255,.15);
    border-radius:2px; outline:none; cursor:pointer;
}
#rud-vol::-webkit-slider-thumb {
    -webkit-appearance:none;
    width:13px; height:13px; border-radius:50%;
    background:var(--rud-red); cursor:pointer; transition:transform .15s;
}
#rud-vol::-webkit-slider-thumb:hover { transform:scale(1.25); }
#rud-vol::-moz-range-thumb {
    width:13px; height:13px; border-radius:50%;
    background:var(--rud-red); border:none; cursor:pointer;
}

/* ── Mute ── */
#rud-mute {
    background:none; border:none; cursor:pointer;
    padding:0; display:flex; align-items:center;
}
#rud-mute svg { width:18px; height:18px; color:var(--rud-muted); transition:color .2s; }
#rud-mute:hover svg, #rud-bar.is-muted #rud-mute svg { color:var(--rud-red); }

/* ── Play ── */
#rud-play {
    width:44px; height:44px; border-radius:50%;
    background:var(--rud-red); border:none;
    cursor:pointer; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    transition:transform .15s;
    box-shadow:0 0 0 0 rgba(232,0,28,.4);
}
#rud-play:hover { transform:scale(1.08); }
#rud-bar.is-playing #rud-play { animation:pulse 2s infinite; }
@keyframes pulse {
    0%  { box-shadow:0 0 0 0   rgba(232,0,28,.5); }
    70% { box-shadow:0 0 0 12px rgba(232,0,28,0); }
    100%{ box-shadow:0 0 0 0   rgba(232,0,28,0); }
}
#rud-play svg { width:20px; height:20px; color:#fff; }

/* ── Responsive ── */
@media (max-width:1100px) {
    .rud-apps small { display:none; }
    .rud-app-btn    { padding:5px 8px; }
}
@media (max-width:900px) {
    .rud-apps, .rud-socials, .rud-vol, #rud-mute, .rud-sep { display:none !important; }
}
@media (max-width:600px) {
    .rud-vis { display:none; }
    .rud-inner { padding:0 12px; gap:10px; }
    #rud-art   { width:44px; height:44px; }
    .rud-title { font-size:13px; }
    .rud-artist{ font-size:11px; }
}

/* ── Loading bar ── */
body.rud-loading::after {
    content:''; position:fixed; top:0; left:0; right:0;
    height:3px; background:var(--rud-red);
    z-index:calc(var(--rud-z) + 1);
    animation:progress .8s ease-in-out infinite alternate;
}
@keyframes progress {
    from { transform:scaleX(.1); transform-origin:left; }
    to   { transform:scaleX(1);  transform-origin:left; }
}