/* ================================
   PLAYLIST.CSS — Christian Romero
   + Album Header (big cover + text)
   ================================ */

/* ===== RESET / BASE ===== */
*{ box-sizing:border-box; }
html,body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* ===== WRAPPER ===== */
.songs-wrap{
  max-width:980px;
  margin:32px auto 60px;
  padding:0 16px;
}

/* ===== TITLE ===== */
.songs-title{
  font-size:28px;
  font-weight:900;
  letter-spacing:.5px;
  margin:0 0 16px 0;
}

.songs-title-small{
  font-size:16px;
  font-weight:800;
  letter-spacing:.5px;
  margin:0 0 16px 0;
  color:#707070;
}

/* ===== TOP ACTIONS ===== */
.songs-filters{
  display:flex;
  gap:12px;
  margin-bottom:18px;
}

.filter-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#000;
  color:#1db954;
  border:1px solid #1db954;
  padding:8px 18px;
  border-radius:999px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}

.filter-btn:hover{
  background:#1db954;
  color:#000;
}

/* =========================================================
   ✅ ALBUM HEADER (solo páginas de música; NO afecta guitarra)
   Requiere en HTML:
   <div class="album-header">
     <div class="album-text">...</div>
     <img id="albumCoverBig" ...>
   </div>
   ========================================================= */
.album-header{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:22px;
  align-items:start;
  margin: 10px 0 18px;
}

.album-text{
  font-size:18px;
  line-height:1.4;
  color:#fff;
  opacity:.92;
}

.album-cover-big,
#albumCoverBig{
  display:block;
  width:100%;
  max-width:320px;
  aspect-ratio: 1 / 1;
  border-radius:18px;
  object-fit:cover;
  border:1px solid #2a2a2a;
  background:#111;
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
}


@media (max-width:820px){
  .album-header{
    grid-template-columns: 1fr 260px;
  }
}

@media (max-width:640px){
  .album-header{
    grid-template-columns: 1fr;
  }
  .album-cover-big{
    max-width: 360px;
    margin: 0 auto;
  }
  .album-text{
    font-size:16px;
  }
}

/* ===== LIST CONTAINER ===== */
.songs-list{
  background:linear-gradient(180deg,#0f0f0f,#000);
  border:1px solid #222;
  border-radius:16px;
  overflow:hidden;
}

/* ===== ROW ===== */
.song-row{
  display:grid;
  grid-template-columns:48px 64px 1fr 200px 90px;
  gap:14px;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid #2a2a2a;
  transition:background .2s ease;
}

.song-row:last-child{ border-bottom:0; }

.song-row:hover{
  background:#2b2b2b;
}

/* ===== NUMBER ===== */
.song-num{
  text-align:right;
  opacity:.65;
  font-variant-numeric:tabular-nums;
}

/* ===== COVER ===== */
.song-cover{
  width:56px;
  height:56px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid #2a2a2a;
}

/* ===== META ===== */
.song-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.song-name{
  font-weight:800;
  font-size:16px;
}

.song-artist{
  font-size:13px;
  opacity:.7;
}

/* ===== PROGRESS ===== */
.song-progress{
  display:none;                 /* solo visible cuando está activa */
  align-items:center;
  gap:10px;
}

.song-row.is-active .song-progress{
  display:flex;
}

.song-time{
  width:40px;
  text-align:center;
  font-size:12px;
  opacity:.7;
  font-variant-numeric:tabular-nums;
}

.song-bar{
  flex:1;
  height:6px;
  background:#222;
  border-radius:999px;
  overflow:hidden;
  cursor:pointer;
}

.song-bar-fill{
  height:100%;
  width:0%;
  background:#1db954;
  border-radius:999px;
  transition:width .12s linear;
}

/* ===== PLAY BUTTON ===== */
.play-btn{
  justify-self:end;
  background:#1db954;
  color:#000;
  border:0;
  padding:10px 18px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}

.play-btn:hover{ filter:brightness(1.05); }

.play-btn.is-playing{
  background:#fff;
  color:#000;
}

/* ===== ACTIVE ROW ===== */
.song-row.is-active{
  background:#1b1b1b;
}

/* ===== MOBILE ===== */
@media (max-width:760px){
  .song-row{
    grid-template-columns:32px 56px 1fr 1fr 80px;
    padding:12px;
  }
}

@media (max-width:520px){
  .song-row{
    grid-template-columns:28px 52px 1fr 90px;
    grid-template-areas:
      "num cover meta btn"
      "num cover prog prog";
  }

  .song-num{ grid-area:num; }
  .song-cover{ grid-area:cover; }
  .song-meta{ grid-area:meta; }
  .play-btn{ grid-area:btn; }
  .song-progress{
    grid-area:prog;
    margin-top:8px;
  }
}

/* ===== FORCE: Exercise preview responsive (NO GIGANTE) ===== */
.exercise-preview{
  width:100% !important;
  margin:18px 0 22px !important;
  padding:12px !important;
  background:#0b0b0b !important;
  border:1px solid #1f1f1f !important;
  border-radius:14px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.exercise-preview #exerciseImage{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:980px !important;
  max-height:52vh !important;
  object-fit:contain !important;
  background:#fff !important;
  border-radius:10px !important;
}

@media (max-width:640px){
  .exercise-preview #exerciseImage{
    max-width:100% !important;
    max-height:38vh !important;
  }
}

/* ===== GLOBAL PROGRESS (debajo de la imagen) ===== */
.global-progress{
  display:grid;
  grid-template-columns:64px 1fr 64px;
  gap:12px;
  align-items:center;
  margin:14px 0 18px 0;
  color:#fff;
  opacity:.92;
}

.gp-time{
  font-size:14px;
  font-variant-numeric:tabular-nums;
  text-align:center;
  opacity:.85;
}

.gp-bar{
  height:10px;
  background:#2a2a2a;
  border-radius:999px;
  overflow:hidden;
  cursor:pointer;
}

.gp-fill{
  height:100%;
  width:0%;
  background:#1db954;
  border-radius:999px;
  transition:width .12s linear;
}

@media (max-width:640px){
  .global-progress{
    grid-template-columns:54px 1fr 54px;
    gap:10px;
  }
  .gp-time{ font-size:13px; }
  .gp-bar{ height:9px; }
}