/* ===== Playlists (scope de la sección) ===== */
.playlists{ gap:1.25rem; }

/* ---------- Grilla del índice ---------- */
.playlists .pl-grid{
  display:grid; gap:1rem;
}
@media (min-width:820px){
  .playlists .pl-grid{ grid-template-columns:1fr 1fr; align-items:start; }
}

/* ---------- Tarjeta del índice ---------- */
.playlists .pl-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem 1.125rem;
}
.playlists .pl-title{ margin:0 0 .25rem; font-size:clamp(1.05rem,1.2vw + .9rem,1.25rem); }
.playlists .pl-desc{ margin:0; opacity:.8; font-size:.95rem; }

/* Link discreto */
.playlists .unstyled-link{ color:inherit; text-decoration:none; }
.playlists .unstyled-link:hover{ text-decoration:underline; }

/* ---------- Contenedor 16:9 genérico (img o iframe) ---------- */
.playlists .pl-ratio{ position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden;
  border-radius:calc(var(--radius) - 4px); }
.playlists .pl-fill{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }

/* ---------- Página de detalle ---------- */
.playlists .pl-layout{ display:grid; gap:1rem; }
@media (min-width:980px){ .playlists .pl-layout{ grid-template-columns:2fr 1fr; align-items:start; } }

.playlists .pl-player{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:.75rem;
}

/* ===== Chips (lista derecha sin miniaturas) ===== */
.playlists .pl-list--chips{ display:grid; gap:.5rem; }

/* Chip base */
.playlists .pl-chip{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.6rem;
  width:100%; padding:.55rem .7rem;
  background:var(--card); border:1px solid var(--border); border-radius:9999px; box-shadow:var(--shadow);
  cursor:pointer; text-align:left;
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
.playlists .pl-chip:hover{ transform:translateY(-1px); }

/* Activo */
.playlists .pl-chip.is-active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent);
}

/* Número */
/* ===== Badge moderno para números ===== */
.playlists .pl-badge {
  display:inline-grid; place-items:center;
  width:28px; height:28px;
  border-radius:50%;

  /* Tipografía más fina */
  font-size:.8rem; 
  font-weight:600;
  letter-spacing:0.2px;

  /* Estilo moderno: borde + transparencia */
  background: transparent;
  border:1.5px solid var(--accent);
  color: var(--accent);

  /* Sutil sombra para dar relieve */
  box-shadow: 0 0 6px rgba(0,0,0,.3);
  transition: all .2s ease;
}

/* Cuando el chip está activo */
.playlists .pl-chip.is-active .pl-badge {
  background: var(--accent);
  color:#fff;
  border-color: var(--accent);
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 50%, transparent);
}


/* Texto del chip */
.playlists .pl-chip-text{ min-width:0; }
.playlists .pl-chip-title{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;
  font-weight:700; font-size:.95rem; line-height:1.2rem;
}
.playlists .pl-chip-desc{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;
  opacity:.8; font-size:.85rem; line-height:1.1rem;
}

/* Ajuste leve en pantallas grandes */
@media (min-width:1200px){ .playlists .pl-card{ padding:1.1rem 1.25rem; } }

/* === Contraste alto para chips (títulos y descripciones en blanco) === */
.playlists .pl-chip-title { 
  color: #fff;                 /* blanco pleno */
}
.playlists .pl-chip-desc {
  color: rgba(255, 255, 255, .88);  /* gris muy claro, buena legibilidad */
  opacity: 1;                  /* anulamos la opacidad del bloque anterior */
}
.playlists .pl-badge {
  color: #fff;                 /* número en blanco */
}

/* (Opcional) un toque de contraste al hover/activo */
.playlists .pl-chip:hover {
  background: color-mix(in oklab, #ffffff 6%, var(--card));
}
.playlists .pl-chip.is-active {
  background: color-mix(in oklab, var(--accent) 12%, var(--card));
}