:root{
  --classic-green:#39f15e;
  --classic-white:#fff;
  --classic-muted:rgba(255,255,255,.76);
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body.player-page{display:grid;place-items:center;padding:10px;background:transparent;color:#fff;font-family:Roboto,"Segoe UI",Arial,sans-serif}
audio{display:none}
button,input{-webkit-tap-highlight-color:transparent}

.classic-radio-player{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:#1d4f75 url("assets/player-classic/player-background.jpg") center/cover no-repeat;
  box-shadow:0 24px 58px rgba(0,0,0,.58);
}
.classic-radio-player:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(145deg,rgba(0,0,0,.05),rgba(2,15,30,.2));
  pointer-events:none;
}
.classic-display,.classic-console,.classic-player-links{position:relative;z-index:1}
.classic-display{display:flex;align-items:center;justify-content:center}
.classic-artwork{
  position:relative;
  flex:0 0 auto;
  overflow:visible;
  border:0;
  background:transparent;
  box-shadow:none;
}
.classic-artwork img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 13px 18px rgba(0,0,0,.42))}
.classic-onair{min-width:0;color:#fff;font-weight:300;text-align:left}
.classic-onair small{display:block;margin-bottom:7px;color:rgba(255,255,255,.75);font-size:10px;font-weight:600;letter-spacing:.11em}
.classic-onair h1{max-width:100%;margin:0;overflow:hidden;font-weight:300;text-overflow:ellipsis;white-space:nowrap}
.classic-onair p{max-width:100%;margin:5px 0 0;overflow:hidden;color:#fff;font-weight:300;text-overflow:ellipsis;white-space:nowrap}
.classic-onair time{display:block;margin-top:7px;color:#f0f0f0;font-weight:300}

.classic-console{
  background-image:url("assets/player-classic/controls-sprite.png");
  background-repeat:no-repeat;
  background-position:center -23px;
}
.classic-playback{
  position:relative;
  display:block;
  width:72px;
  height:72px;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:50%;
  background:transparent url("assets/player-classic/controls-sprite.png") no-repeat -1px -210px;
  cursor:pointer;
}
.classic-playback:hover{background-position:-83px -210px}
.classic-radio-player.is-playing .classic-playback{background-position:-165px -210px}
.classic-radio-player.is-playing .classic-playback:hover{background-position:-247px -210px}
.classic-radio-player.is-playing .classic-playback:after{
  content:"";
  position:absolute;
  inset:0;
  background:transparent url("assets/player-classic/controls-sprite.png") no-repeat -330px -210px;
  animation:classic-spin 3s linear infinite;
}
.classic-play-icon{display:none}
.classic-volume-area{min-width:0}
.classic-volume{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:center}
.speaker-icon{display:grid;place-items:center;width:28px;height:28px;color:#fff;font-size:24px;line-height:1;transform:rotate(180deg)}
.classic-volume input{width:100%;height:8px;margin:0;accent-color:var(--classic-green);cursor:pointer}
.classic-status{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px;align-items:center;margin-top:8px;color:#fff}
.classic-status i{width:7px;height:7px;border-radius:50%;background:var(--classic-green);box-shadow:0 0 9px rgba(57,241,94,.85)}
.classic-status b{overflow:hidden;font-size:11px;font-weight:400;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.classic-status small{color:var(--classic-green);font-size:9px;font-weight:800;letter-spacing:.08em}
.classic-player-links{display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;text-align:center}
.classic-player-links span{display:block;font-size:11px;font-weight:400}
.classic-player-links a{position:relative;top:0;display:inline-flex;opacity:.82;transition:transform .2s,opacity .2s,top .2s}
.classic-player-links a:hover{top:-3px;opacity:1;transform:scale(1.05)}
.classic-player-links img{display:block;width:31px;height:31px}

/* Reproductor original adaptado a columna vertical. Esta es la versión usada en la web. */
.classic-radio-player.vertical{
  width:min(100%,306px);
  min-height:472px;
  padding:20px 14px 15px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:26px;
}
.vertical .classic-display{min-height:295px;flex-direction:column;gap:15px;text-align:center}
.vertical .classic-artwork{width:142px;height:142px}
.vertical .classic-onair{width:100%;text-align:center}
.vertical .classic-onair h1{font-size:25px}
.vertical .classic-onair p{font-size:15px}
.vertical .classic-onair time{font-size:12px}
.vertical .classic-console{
  min-height:94px;
  margin:0 -14px;
  padding:11px 17px 9px;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:14px;
  align-items:center;
  background-position:center -23px;
  background-size:auto 500px;
}
.vertical .classic-volume-area{padding-right:3px}
.vertical .classic-player-links{min-height:44px;padding-top:9px;flex-wrap:wrap;gap:8px}
.vertical .classic-player-links span{flex:0 0 100%;margin-bottom:-2px}

/* Conserva la composición horizontal del reproductor clásico original. */
.classic-radio-player.horizontal{
  width:min(100%,720px);
  min-height:340px;
  border-radius:8px;
}
.horizontal .classic-display{min-height:235px;padding:36px 34px 25px;gap:22px}
.horizontal .classic-artwork{width:140px;height:140px}
.horizontal .classic-onair{width:min(440px,calc(100% - 180px))}
.horizontal .classic-onair h1{font-size:30px}
.horizontal .classic-onair p{font-size:22px}
.horizontal .classic-onair time{font-size:14px}
.horizontal .classic-console{
  min-height:98px;
  padding:13px 10px 7px;
  display:grid;
  grid-template-columns:72px minmax(180px,1fr) 220px;
  gap:10px;
  align-items:center;
}
.horizontal .classic-volume-area{padding:0 8px}
.horizontal .classic-player-links{height:65px;align-content:center;flex-wrap:wrap;gap:8px}
.horizontal .classic-player-links span{flex:0 0 100%;margin-bottom:-2px}

@keyframes classic-spin{to{transform:rotate(360deg)}}
@media(max-width:560px){
  body.player-page{padding:6px}
  .classic-radio-player.horizontal{min-height:458px;border-radius:16px}
  .horizontal .classic-display{min-height:295px;padding:25px 18px;flex-direction:column;gap:14px}
  .horizontal .classic-artwork{width:145px;height:145px}
  .horizontal .classic-onair{width:100%;text-align:center}
  .horizontal .classic-onair h1{font-size:24px}
  .horizontal .classic-onair p{font-size:15px}
  .horizontal .classic-console{min-height:154px;grid-template-columns:72px minmax(0,1fr);padding:12px 17px;gap:12px}
  .horizontal .classic-player-links{grid-column:1/-1;height:auto;padding-top:4px}
}
@media(max-width:340px){
  .classic-radio-player.vertical{min-height:450px;padding-inline:10px}
  .vertical .classic-display{min-height:278px}
  .vertical .classic-artwork{width:138px;height:138px}
  .vertical .classic-console{margin-inline:-10px;padding-inline:12px;gap:9px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}