/* RadioStreaming.pe — Player (dentro del iframe). Los colores llegan como variables desde player.js */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;background:transparent;overflow:hidden;}
body{font-family:'Fugaz One','Sora',sans-serif;color:var(--txt);-webkit-font-smoothing:antialiased;}
.rsx-container{display:flex;justify-content:center;align-items:flex-start;width:100%;padding:8px;}
.rsx-wrap{position:relative;overflow:hidden;width:100%;margin:0 auto;color:var(--txt);}
.rsx-wrap i.fas{font-family:"Font Awesome 6 Free";font-weight:900;}
.rsx-wrap i.fab{font-family:"Font Awesome 6 Brands";font-weight:400;}
button{font:inherit;}

@keyframes rsx-spin{to{transform:rotate(360deg);}}
@keyframes rsx-blink{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--c88);}50%{opacity:.5;box-shadow:0 0 0 6px var(--c00);}}
@keyframes rsx-glow{0%,100%{box-shadow:0 0 8px var(--c55);}50%{box-shadow:0 0 var(--glow) var(--c);}}
@keyframes rsx-marq{0%,15%{transform:translateX(0);}85%,100%{transform:translateX(var(--mq,0));}}

/* Badge de estado */
.rsx-live{display:inline-flex;align-items:center;gap:7px;background:var(--ibg);border:1px solid var(--ibd);border-radius:100px;
  padding:5px 12px 5px 8px;font-size:10.5px;line-height:1.2;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  color:var(--dim);width:max-content;white-space:nowrap;flex-shrink:0;}
.rsx-live b{font:inherit;}
.rsx-live i{width:7px;height:7px;border-radius:50%;background:#888;display:inline-block;flex-shrink:0;}
.rsx-live.on{color:var(--txt);}
.rsx-live.on i{background:var(--c);animation:rsx-blink 1.3s ease-in-out infinite;}
.rsx-live.load i{background:#f9b800;}
.rsx-live.off i{background:#e3262f;}

/* Compartir */
.rsx-share{display:inline-flex;gap:7px;flex-shrink:0;}
.rsx-share a{background:var(--ibg);color:var(--icol);width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;text-decoration:none;transition:background .2s,color .2s;}
.rsx-share a:hover,.rsx-share a:focus-visible{background:var(--c);color:#fff;outline:none;}

/* Carátula */
.rsx-art-wrap{flex-shrink:0;position:relative;}
.rsx-art{width:100%;height:100%;background-size:cover;background-position:center;background-color:#1a1a1e;background-image:var(--art);}
.rsx-art-square{border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.4);}
.rsx-art-circle{border-radius:50%;border:4px solid var(--c);animation:rsx-spin 14s linear infinite paused;}
.playing .rsx-art-circle{animation-play-state:running;}
.rsx-art-wrap.glow::after{content:"";position:absolute;inset:-8px;border-radius:inherit;z-index:-1;background:var(--c);
  filter:blur(var(--glow));opacity:var(--glowop);}

/* Botón play */
.rsx-play{--w:54px;--h:54px;--fs:20px;--pbg:var(--c);--pcol:#fff;--pbd:none;--anim:rsx-glow 2.6s ease-in-out infinite;
  -webkit-appearance:none;appearance:none;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:var(--w);height:var(--h);padding:0;margin:0;font-size:var(--fs);line-height:1;background:var(--pbg);color:var(--pcol);
  border:var(--pbd);animation:var(--anim);transition:filter .2s,transform .15s;}
.rsx-play:hover{filter:brightness(1.1);}
.rsx-play:active{transform:scale(.95);}
.rsx-play:focus-visible{outline:2px solid var(--c);outline-offset:3px;}
.rsx-play-circle{border-radius:50%;}
.rsx-play-square{border-radius:var(--r,14px);}
.rsx-play-stretch{align-self:stretch;height:auto;}

/* Textos */
.rsx-name{font-family:'Fugaz One',cursive;font-weight:400;letter-spacing:.3px;color:var(--txt);text-transform:uppercase;line-height:1.25;word-break:break-word;}
.rsx-marquee-box{overflow:hidden;white-space:nowrap;max-width:100%;}
.rsx-marquee{display:inline-block;white-space:nowrap;font-family:'JetBrains Mono',monospace;color:var(--c);font-weight:500;font-size:12.5px;line-height:1.4;}
.rsx-marquee.mq{animation:rsx-marq 9s ease-in-out infinite alternate;}
.rsx-artist{color:var(--dim);font-size:11.5px;font-family:'Sora',sans-serif;margin-top:2px;}
.rsx-info{flex:1;min-width:0;overflow:hidden;text-align:left;}
.rsx-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px;}

/* ---------- RESPONSIVE (ancho del iframe) ---------- */
@media (max-width:440px){
  .rsx-row{flex-direction:column!important;align-items:center!important;text-align:center!important;gap:14px!important;}
  .rsx-wrap.rsx-row{padding:22px 18px!important;border-radius:22px!important;}
  .rsx-info{width:100%;flex:none;text-align:center;}
  .rsx-top{justify-content:center;}
  .rsx-art-wrap{margin:0 auto;}
  .rsx-m2 .rsx-art-wrap,.rsx-m7 .rsx-art-wrap,.rsx-m8 .rsx-art-wrap{width:90px!important;height:90px!important;}
  .rsx-wrap.rsx-m5{padding:0!important;}
  .rsx-m5 .rsx-art-wrap{width:150px!important;height:150px!important;padding:18px 0 0!important;}
  .rsx-m5 .rsx-info{padding:0 16px!important;}
  .rsx-m5 .rsx-play{width:100%;height:58px;border-radius:0 0 22px 22px;align-self:stretch;}
  .rsx-wrap.rsx-m6{flex-direction:row!important;padding:9px!important;border-radius:50px!important;text-align:left!important;}
  .rsx-m6 .rsx-info{width:auto;flex:1;text-align:left;}
  .rsx-m6 .rsx-top{justify-content:flex-start;}
  .rsx-m6 .rsx-art-wrap{margin:0;}
  .rsx-m10 .rsx-row .rsx-art-wrap{order:-1;}
  .rsx-m10>.rsx-live{display:flex;margin:0 auto;}
  .rsx-m10 .rsx-share-row{justify-content:center!important;}
}
@media (max-width:300px){
  .rsx-share a{width:26px;height:26px;}
  .rsx-m1,.rsx-m10{padding:18px 14px!important;}
  .rsx-m1 .rsx-top{justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .rsx-art-circle,.rsx-play,.rsx-marquee.mq,.rsx-live.on i{animation:none!important;}
}