/* Reproductor Spotify para Elementor - estilos base.
   Los colores/medidas se sobre-escriben desde el panel de Elementor. */
.spe-player{
  position:fixed; left:0; right:0; bottom:0; z-index:99999;
  display:flex; align-items:center; gap:16px;
  width:100%; max-width:100%; margin:0 auto;
  height:80px; box-sizing:border-box; padding:0 20px;
  background:#121212;
  box-shadow:0 -4px 24px rgba(0,0,0,.4);
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.spe-cover{flex:0 0 auto; order:1;}
.spe-cover img{width:56px; height:56px; object-fit:cover;
  border-radius:6px; display:block; background:#333;}
.spe-info{display:flex; flex-direction:column; justify-content:center;
  min-width:0; flex:1 1 160px; overflow:hidden; order:2;}
.spe-title{color:#fff; font-size:14px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.spe-artist{color:#b3b3b3; font-size:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.spe-controls{display:flex; align-items:center; gap:12px; flex:0 0 auto; order:7;}
.spe-play{width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:#1db954; display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease; padding:0;}
.spe-play:hover{transform:scale(1.06);}
.spe-play svg{width:24px; height:24px; fill:#000;}
.spe-live{display:flex; align-items:center; gap:6px;
  color:#b3b3b3; font-size:11px; font-weight:600; letter-spacing:.5px;}
.spe-live-dot{width:8px; height:8px; border-radius:50%;
  background:#e22134; display:inline-block;}
.spe-player.is-playing .spe-live-dot{animation:spe-pulse 1.2s infinite;}
@keyframes spe-pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
.spe-volume{display:flex; align-items:center; gap:8px; flex:0 0 auto; order:8;}
.spe-vol-icon{width:20px; height:20px; fill:#b3b3b3;}
.spe-vol{-webkit-appearance:none; appearance:none; width:100px; height:4px;
  border-radius:2px; background:#5a5a5a; outline:none; cursor:pointer;}
.spe-vol::-webkit-slider-thumb{-webkit-appearance:none; appearance:none;
  width:12px; height:12px; border-radius:50%; background:#1db954;}
.spe-vol::-moz-range-thumb{width:12px; height:12px; border:0;
  border-radius:50%; background:#1db954;}

/* ---- Banners ---- */
.spe-banner{flex:0 0 auto; position:relative; overflow:hidden;
  width:160px; height:56px; display:block; background:transparent;}
.spe-banner a{display:block; width:100%; height:100%;}
.spe-banner img{width:100%; height:100%; object-fit:cover; display:block;}
.spe-banner-1{order:0;}
.spe-banner-1.spe-hidden{display:none !important;}
.spe-banner-1 .spe-b1-link{display:block;width:100%;height:100%;}
/* Ocultar banners por dispositivo (breakpoints estandar de Elementor) */
@media (min-width:768px) and (max-width:1024px){
  .spe-banner.spe-hide-tablet{display:none !important;}
}
@media (max-width:767px){
  .spe-banner.spe-hide-mobile{display:none !important;}
}
.spe-banner-2{order:9;}
.spe-banner-2 .spe-slide{position:absolute; top:0; left:0; width:100%; height:100%;
  transition-duration:.6s; transition-timing-function:ease; pointer-events:none; z-index:1;}
.spe-banner-2 .spe-slide.is-active{pointer-events:auto; z-index:2;}
.spe-banner-2 .spe-slide a, .spe-banner-2 .spe-slide img{display:block; width:100%; height:100%;}
/* Efecto desvanecido */
.spe-fx-fade .spe-slide{opacity:0; transition-property:opacity;}
.spe-fx-fade .spe-slide.is-active{opacity:1;}
/* Efecto deslizamiento */
.spe-fx-slide{overflow:hidden;}
.spe-fx-slide .spe-slide{opacity:1; transform:translateX(100%); transition-property:transform;}
.spe-fx-slide .spe-slide.is-active{transform:translateX(0);}
.spe-fx-slide .spe-slide.is-leaving{transform:translateX(-100%);}

@media (max-width:600px){
  .spe-player{gap:10px; padding:0 12px;}
  .spe-volume{display:none;}
}

/* Auto-ocultar cuando el stream esta offline */
.spe-player.spe-offline{display:none !important;}