:root{
  --ru-purple:#7b2c86;
  --ru-purple-dark:#4f1959;
  --ru-white:#ffffff;
  --ru-soft:#f7eef9;
  --ru-red:#ef233c;
}

.ru-top-player{
  position:sticky;
  top:0;
  z-index:99999;
  width:100%;
  background:var(--ru-white);
  border-bottom:3px solid var(--ru-purple);
  box-shadow:0 8px 24px rgba(123,44,134,.16);
  font-family:Arial, Helvetica, sans-serif;
}

.ru-player-inner{
  display:grid;
  grid-template-columns:280px 1fr;
  width:100%;
}

.ru-brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 22px;
  background:var(--ru-purple);
  color:var(--ru-white);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.ru-brand-title{font-size:18px;}

.ru-brand-live{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  white-space:nowrap;
}

.ru-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--ru-red);
  box-shadow:0 0 0 0 rgba(239,35,60,.65);
  animation:ruPulse 1.6s infinite;
}

.ru-signals{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--ru-white);
}

.ru-signal{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  padding:12px 18px;
  color:var(--ru-purple-dark);
  border-left:1px solid rgba(123,44,134,.18);
}

.ru-signal.is-playing,
.ru-signal.is-open{background:var(--ru-soft);}

.ru-signal-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:2px solid var(--ru-purple);
  border-radius:999px;
  color:var(--ru-purple);
  font-size:18px;
  font-weight:900;
  flex:0 0 auto;
}

.ru-play-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:0;
  border-radius:999px;
  background:var(--ru-purple);
  color:var(--ru-white);
  font-size:18px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  transition:transform .18s ease, opacity .18s ease;
  flex:0 0 auto;
}

.ru-play-btn:hover{transform:scale(1.06);}
.ru-play-btn:active{transform:scale(.96);}

.ru-signal-text{
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.05;
  text-transform:uppercase;
}

.ru-signal-text strong{
  font-size:15px;
  color:var(--ru-purple);
  letter-spacing:.4px;
}

.ru-signal-text span{
  margin-top:4px;
  font-size:12px;
  color:var(--ru-purple-dark);
  opacity:.82;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ru-sc-panel{
  display:none;
  border-top:1px solid rgba(123,44,134,.18);
  background:var(--ru-white);
  padding:12px 16px 16px;
}

.ru-sc-panel.is-open{display:block;}

.ru-sc-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
  color:var(--ru-purple-dark);
  text-transform:uppercase;
}

.ru-sc-header strong{
  display:block;
  color:var(--ru-purple);
  font-size:15px;
  line-height:1.1;
}

.ru-sc-header span{
  display:block;
  margin-top:3px;
  font-size:11px;
  opacity:.75;
}

.ru-sc-close{
  width:34px;
  height:34px;
  border:0;
  border-radius:999px;
  background:var(--ru-purple);
  color:var(--ru-white);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.ru-sc-frame iframe{
  display:block;
  width:100%;
  height:180px;
  border:0;
  border-radius:14px;
}

@keyframes ruPulse{
  0%{box-shadow:0 0 0 0 rgba(239,35,60,.65);}
  70%{box-shadow:0 0 0 8px rgba(239,35,60,0);}
  100%{box-shadow:0 0 0 0 rgba(239,35,60,0);}
}

@media(max-width:820px){
  .ru-player-inner{grid-template-columns:1fr;}
  .ru-brand{padding:10px 14px;}
  .ru-signals{grid-template-columns:1fr;}
  .ru-signal{
    padding:10px 14px;
    border-left:0;
    border-top:1px solid rgba(123,44,134,.18);
  }
  .ru-signal-number{width:30px;height:30px;font-size:15px;}
  .ru-play-btn{width:36px;height:36px;font-size:15px;}
  .ru-sc-frame iframe{height:220px;}
}

/* Iconos SVG limpios */
.ru-icon,
.ru-icon svg{
  display:block;
  width:20px;
  height:20px;
}

.ru-icon svg{
  fill:currentColor;
}

.ru-spinner{
  fill:none !important;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:38 18;
  animation:ruSpin .8s linear infinite;
}

.ru-play-btn:focus-visible{
  outline:3px solid rgba(123,44,134,.28);
  outline-offset:3px;
}

.ru-signal.is-playing .ru-play-btn{
  box-shadow:0 0 0 5px rgba(123,44,134,.12);
}

.ru-now-playing{
  transition:opacity .2s ease;
}

.ru-signal.has-metadata .ru-now-playing{
  font-weight:700;
  opacity:1;
}

@keyframes ruSpin{
  to{transform:rotate(360deg);}
}