/* ----------------------------------------------------------------
   ESTILOS ORIGINALES EXTRAÍDOS DE index-radio.html
   ---------------------------------------------------------------- */

/* Permitir Barra de Desplazamiento */
html, body {
  /* overflow: hidden !important; <--- ELIMINAR O COMENTAR ESTO */
  overflow-y: auto; /* Permite la barra de desplazamiento vertical solo si el contenido excede la altura */
  height: auto; /* Permite que la altura se ajuste al contenido */
}

body { background: #121212; margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

/* Player */
#player {
  border-radius:18px;
  max-width:640px;
  margin:28px auto;
  padding:18px;
  box-shadow:0 6px 28px rgba(0,0,0,0.6);
  color:#fff;
  position: relative; 
  overflow: hidden;
  background: transparent;
}


/* PSEUDO-FONDO: portada difuminada y con overlay para legibilidad */
#player::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0; 
  pointer-events: none;
  filter: blur(8px) saturate(0.9);
  transition: opacity .45s ease, transform .45s ease;
  /* overlay oscuro + variable de imagen (definida por JS) */
  background:
    linear-gradient(rgba(24,24,24,0.62), rgba(24,24,24,0.62)),
    var(--bg-cover-url);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
  transform: scale(1.02); 
}

/* Contenido encima del fondo */
.player-content { position: relative; z-index: 1; }

/* Ajustes internos */
.top-row { display:flex; gap:14px; align-items:center; justify-content: space-between; }

img#cover { width:150px; height:150px; object-fit:cover; border-radius:8px; display:block; box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
.meta { display:flex; flex-direction:column; gap:6px; min-width:0; }
strong#title { font-size:18px; font-weight:700; color:#fff; white-space: normal; overflow: visible; text-overflow: clip; word-wrap: normal; word-break: normal; }
.sub { color:#bdbdbd; font-size:13px; display:flex; gap:4px; flex-wrap:wrap; }

.rating-container { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 4px; }
.total-votes-display { font-size: 14px; font-weight: 500; color: #bdbdbd; margin-bottom: 2px; }
#totalScoreCount { font-size: 20px; font-weight: 700; color: #1DB954; }
.average-display { font-size: 16px; font-weight: 700; color: #1DB954; }
.average-display .average-text { font-size: 12px; font-weight: 500; color: #bdbdbd; margin-right: 4px; }
.rating-value { font-size: 20px; }
.rating-max { font-size: 14px; color: #bdbdbd; }
.rating-controls { display:flex; justify-content:flex-end; }
.star { background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:0 2px; transition: color .1s; line-height:1; }
.star:hover, .star:focus { color:#2DE06C; outline:none; }
.star.rated { color: #1DB954; }
.rating-prompt { font-size:12px; color:#bdbdbd; margin-top:4px; }
.voted-alert { font-size:11px; font-weight:700; color:#1DB954; margin-top:4px; text-align:right; display:none; }

.controls-wrap { margin-top:14px; display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03)); }
.left-controls { display:flex; gap:10px; align-items:center; }
button.ctrl { background:transparent; border:none; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; cursor:pointer; transition: background .12s, transform .08s, opacity .12s; color:#fff; }
button.ctrl:active { transform: scale(.98); }
button.ctrl:hover { background: rgba(255,255,255,0.03); }

#playPause { width:48px; height:48px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background: linear-gradient(180deg,#1DB954,#169144); box-shadow: 0 6px 14px rgba(20,80,40,0.28); border:none; color:#fff; }

.progress-area { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.time { color:#bdbdbd; font-size:12px; min-width:44px; text-align:center; }
.progress { -webkit-appearance:none; appearance:none; width:100%; height:8px; background: rgba(255,255,255,0.06); border-radius:999px; position:relative; outline:none; }
.progress::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,0.45); margin-top:-3px; }
.progress::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:#fff; border:none; }
.progress[data-fill]{ background-image: linear-gradient(90deg, #1DB954 0%, #1DB954 var(--fill,0%), rgba(255,255,255,0.06) var(--fill,0%)); }

.lyrics-wrap { margin-top:12px; max-height:290px; overflow:auto; background:transparent; border-radius:8px; display:flex; flex-direction:column; }
.scroll-indicator { text-align: center; font-size: 14px; font-weight: bold; color: #1db954; opacity: 0.75; margin: 6px 0; flex: 0 0 auto; user-select: none; display: none; }
#lyrics { color:#e6e6e6; font-size:14px; line-height:1.55; padding:12px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)); border-radius:8px; white-space:pre-wrap; flex:1 1 auto; }

/* Media Queries */
@media (max-width:720px){
  img#cover { width:72px; height:72px; }
  strong#title { font-size:16px; }
  .average-display { font-size: 14px; }
  .rating-value { font-size: 18px; }
  .star { font-size: 18px; }
}
@media (max-width:390px){
  .time { display:none; }
  #player { padding:14px; }
  .controls-wrap { padding:8px; gap:8px; }
  #playPause { width:42px; height:42px; }
}

/* Animaciones */
.fade-in { animation: fadeIn .22s ease forwards; }
.fade-out { opacity:0.0; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }

.sub #album {
  font-weight: 900;  /* negrita */
  flex: 0 0 100%;  /* ocupa línea completa */
  margin-bottom: 4px;
}