/* Solo se carga en las páginas que usan [spotify]. */
.spotify-bloque{margin:22px 0;border-radius:12px;overflow:hidden;background:#191414}
.spotify-listo{background:transparent}
.spotify-bloque iframe{display:block;width:100%;border:0;border-radius:12px}

.spotify-cargar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:inherit;padding:38px 20px;border:0;
  background:linear-gradient(160deg,#1db954,#12833c);color:#fff;font:inherit;font-weight:600;
  cursor:pointer;text-align:center}
.spotify-cargar:hover{filter:brightness(1.06)}
.spotify-cargar small{font-weight:400;opacity:.85;font-size:13px}
.spotify-logo{width:34px;height:34px}

.spotify-aviso{border:1px dashed #c66;background:#fff6f6;color:#a33;padding:10px 14px;
  border-radius:8px;font-size:14px;margin:12px 0}

/* Mientras el reproductor no ha entrado, el hueco ya está reservado: así la
   página no da saltos cuando aparece (eso es lo que mide el CLS). */
.spotify-esqueleto{width:100%;height:100%;min-height:inherit;border-radius:12px;
  background:linear-gradient(100deg,#1f1d1d 30%,#2a2828 50%,#1f1d1d 70%);
  background-size:200% 100%;animation:spotifyCargando 1.4s ease-in-out infinite}
@keyframes spotifyCargando{0%{background-position:150% 0}100%{background-position:-50% 0}}
@media (prefers-reduced-motion: reduce){.spotify-esqueleto{animation:none}}