/* Cadena Joven Radio Player — estilos aislados con prefijo "cjr-" para no
   interferir con el tema ni con Elementor. */

.cjr-radio-player{
  --cjr-c1:#22e6a8; --cjr-c2:#2f7bff; --cjr-c3:#e8248c; --cjr-c4:#ff9d1f;
  --cjr-bg:#07070a; --cjr-panel:#101018; --cjr-text:#f4f4fb; --cjr-muted:#8a8a9c;
  position:relative;
  max-width:640px;
  margin:0 auto;
  background:var(--cjr-bg);
  border-radius:24px;
  padding:28px 24px 22px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  box-sizing:border-box;
}
.cjr-radio-player *{ box-sizing:border-box; }

.cjr-glow{
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 15% 20%, rgba(34,230,168,.25), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(47,123,255,.22), transparent 42%),
    radial-gradient(circle at 75% 85%, rgba(232,36,140,.22), transparent 42%),
    radial-gradient(circle at 20% 85%, rgba(255,157,31,.2), transparent 42%);
  filter:blur(40px);
  z-index:0;
  animation:cjr-drift 14s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes cjr-drift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(2%,-2%) scale(1.06); }
}

.cjr-visualizer{
  position:relative; z-index:1;
  height:130px;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  margin-bottom:22px;
}
.cjr-canvas{ width:100%; height:100%; display:block; }

.cjr-panel{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:16px;
}

.cjr-play-btn{
  position:relative;
  flex:0 0 auto;
  width:60px; height:60px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  background:conic-gradient(from 180deg, var(--cjr-c1), var(--cjr-c2), var(--cjr-c3), var(--cjr-c4), var(--cjr-c1));
  box-shadow:0 0 0 0 rgba(255,157,31,.55);
  transition:transform .15s ease, box-shadow .3s ease;
  animation:cjr-pulse 2.2s ease-out infinite;
}
.cjr-play-btn:hover{ transform:scale(1.06); }
.cjr-play-btn:active{ transform:scale(.96); }
.cjr-play-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.cjr-radio-player.is-playing .cjr-play-btn{ animation:none; box-shadow:0 0 0 0 rgba(255,157,31,0); }

@keyframes cjr-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,157,31,.5); }
  70%{ box-shadow:0 0 0 16px rgba(255,157,31,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,157,31,0); }
}

.cjr-icon{ width:22px; height:22px; position:relative; z-index:1; }
.cjr-icon-pause{ display:none; }
.cjr-radio-player.is-playing .cjr-icon-play{ display:none; }
.cjr-radio-player.is-playing .cjr-icon-pause{ display:block; }

.cjr-spinner{
  display:none;
  position:absolute; inset:6px;
  border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;
}
.cjr-radio-player.is-loading .cjr-spinner{ display:block; animation:cjr-spin .8s linear infinite; }
.cjr-radio-player.is-loading .cjr-icon{ opacity:0; }
@keyframes cjr-spin{ to{ transform:rotate(360deg); } }

.cjr-info{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:4px;
}
.cjr-name{
  color:var(--cjr-text);
  font-size:17px; font-weight:700;
  letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cjr-status{
  display:flex; align-items:center; gap:7px;
  font-size:13px; color:var(--cjr-muted);
}
.cjr-dot{
  width:7px; height:7px; border-radius:50%;
  background:#ff3b5c;
  box-shadow:0 0 0 0 rgba(255,59,92,.6);
}
.cjr-radio-player.is-playing .cjr-dot{ animation:cjr-dot 1.4s ease-in-out infinite; }
@keyframes cjr-dot{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,59,92,.55); }
  50%{ box-shadow:0 0 0 5px rgba(255,59,92,0); }
}

.cjr-volume{
  flex:0 0 auto;
  display:flex; align-items:center; gap:8px;
  color:var(--cjr-muted);
}
.cjr-vol-icon{ width:18px; height:18px; flex:0 0 auto; }
.cjr-volume-slider{
  -webkit-appearance:none; appearance:none;
  width:80px; height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  outline:none;
  cursor:pointer;
}
.cjr-volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; border-radius:50%;
  background:#fff; cursor:pointer;
  box-shadow:0 0 0 3px rgba(255,255,255,.15);
}
.cjr-volume-slider::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; border:none;
  background:#fff; cursor:pointer;
}

@media (prefers-reduced-motion: reduce){
  .cjr-play-btn, .cjr-glow, .cjr-dot{ animation:none !important; }
}

@media (max-width:480px){
  .cjr-radio-player{ padding:20px 16px 18px; border-radius:18px; }
  .cjr-visualizer{ height:100px; margin-bottom:16px; }
  .cjr-panel{ gap:12px; flex-wrap:wrap; }
  .cjr-volume{ order:3; width:100%; }
  .cjr-volume-slider{ flex:1 1 auto; width:auto; }
  .cjr-name{ font-size:15.5px; }
}