/* Mensajes */
.dl-msg-error { color:#ef4444; }
.dl-msg-info  { color:#9ca3af; }

.dl-releases {
  --dl-gap: 16px;
  --dl-radius: 0px;
  --dl-border: transparent; /* sin borde */
  --dl-bg: transparent;     /* fondo transparente */
  --dl-bg-hover: transparent;
  --dl-text: #e5e7eb;
  --dl-muted: #9ca3af;
  --dl-accent: #60a5fa;
}

/* GRID */
.dl-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--dl-gap);
  margin:0; padding:0; list-style:none;
}
@media (min-width:1024px){
  .dl-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
}

/* CARD transparente, sin efectos del tema */
.dl-card {
  background: var(--dl-bg) !important;
  border: 1px solid var(--dl-border) !important;
  border-radius: var(--dl-radius);
  overflow:hidden;
  position:relative;
  transition: none !important;
  box-shadow: none !important;
}
.dl-card:hover {
  background: var(--dl-bg-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Enlaces internos como “botón” — neutralizar estilos del tema */
.dl-card-link {
  display:block;
  width:100%;
  text-align:left;
  background:transparent !important;
  border:0 !important;
  color:inherit !important;
  text-decoration:none !important;
  box-shadow:none !important;
}
.dl-card-link:hover,
.dl-card-link:active {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}
.dl-card-link:focus { outline:3px solid var(--dl-accent); outline-offset:2px; border-radius:14px; }

/* THUMB 1:1 */
.dl-card-thumb { aspect-ratio:1/1; width:100%; overflow:hidden; background:#171717; position:relative; }
.dl-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.dl-card-thumb-fallback { width:100%; height:100%; background:#1f2937; }

/* Indicador “sonando” */
.dl-eq{
  position:absolute; right:8px; bottom:8px; display:none; gap:2px;
}
.dl-eq i{
  display:inline-block; width:3px; height:8px; background:#a7f3d0; opacity:.9; animation:dl-eq 0.6s infinite ease-in-out;
}
.dl-card.is-playing .dl-eq{ display:inline-flex; }
.dl-eq i:nth-child(2){ animation-delay:.15s; }
.dl-eq i:nth-child(3){ animation-delay:.3s; }
@keyframes dl-eq{
  0%,100%{ transform:scaleY(0.4); }
  50%    { transform:scaleY(1); }
}

/* Meta */
.dl-card-meta { padding:10px 12px 12px; }
.dl-card-title { margin:0; font-size:14px; line-height:1.35; color:var(--dl-text); }

/* Overlay de enlaces (hover) */
.dl-links {
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:center;
  padding:10px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .18s ease, visibility .18s ease;
}
.dl-links::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 60%, transparent 100%);
  pointer-events: none; /* el velo no bloquea el click */
}
.dl-links-inner {
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:8px;
  pointer-events: auto; /* los enlaces sí reciben click */
}
.dl-btn{
  display:inline-block; font-size:12px; line-height:1; padding:8px 10px;
  background:#0f172a; border:1px solid #1f2937; color:#e5e7eb; border-radius:10px; text-decoration:none;
}
.dl-btn:hover{ background:#111827; }

@media (hover: hover) {
  .dl-card:hover .dl-links { opacity:1; visibility:visible; pointer-events:auto; }
}

/* Bloquear players ajenos */
.dl-card iframe,
.dl-card .spotify-embed,
.dl-card .player,
.dl-card .play-on-hover,
.dl-card:hover iframe,
.dl-card:hover .spotify-embed,
.dl-card:hover .player,
.dl-card:hover .play-on-hover {
  display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
}

/* Debug (opcional) */
.dl-badge{
  position:absolute; left:8px; bottom:8px; font-size:11px; line-height:1;
  padding:6px 8px; border-radius:10px; background:#111827; border:1px solid #1f2937; color:#e5e7eb;
}
.dl-badge.ok{ background:#064e3b; border-color:#065f46; }
.dl-badge.no{ background:#3f1d1d; border-color:#7f1d1d; }

/* Modal Spotify */
.dl-modal-backdrop { position: fixed; inset:0; background: rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:9999; }
.dl-modal-backdrop.is-open { display:flex; }
.dl-modal { background:#0b0b0b; border:1px solid #262626; border-radius:16px; width:min(720px,96vw); padding:12px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.dl-modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; color:#e5e7eb; font-size:14px; }
.dl-modal-close { appearance:none; border:0; background:#111; color:#e5e7eb; padding:6px 10px; border-radius:10px; cursor:pointer; }
.dl-modal-embed { position:relative; width:100%; height:352px; overflow:hidden; border-radius:12px; }
.dl-modal-embed iframe { width:100% !important; height:100% !important; display:block !important; }