/* ================================================================
   Sintonía+ 0.7.3
   Reproductor TV sticky + compacto + recomendados aleatorios
   ================================================================ */

.hero-player-home{
  position:relative;
  min-width:0;
  width:100%;
}

/*
 * El wrapper conserva el espacio original cuando el reproductor sale
 * del flujo y se convierte en ventana fija.
 */
body.tv-page.tv-scroll-player-active .hero-player-home{
  min-height:var(--sp-player-home-height, 0px);
}

/* ---------------------------------------------------------------
   REPRODUCTOR FIJO AL BAJAR
   Nunca se aplica a flotante, cine ni fullscreen.
   --------------------------------------------------------------- */
body.tv-page
#heroPlayer.tv-scroll-sticky:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style){
  position:fixed!important;
  z-index:1500!important;

  top:var(--sp-sticky-top, 104px)!important;

  /* 0.7.3.2: una sola posición fija en el lado IZQUIERDO. */
  left:54px!important;
  right:auto!important;

  /* Tamaño estable mientras está fijo para que no "salte" al bajar. */
  width:clamp(520px, 36vw, 650px)!important;
  max-width:calc(100vw - 24px)!important;

  height:auto!important;
  min-height:0!important;

  margin:0!important;

  border-radius:14px!important;
  border:1px solid #2b708e!important;

  box-shadow:
    0 18px 54px #000c,
    0 0 0 1px #20bdd326!important;

  transform:translateZ(0);
  animation:spStickyIn .16s ease-out;
}

@keyframes spStickyIn{
  from{
    opacity:.82;
    transform:translateY(-8px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/*
 * Al bajar más, se convierte en un reproductor compacto situado a
 * la derecha, dejando libre la mayor parte del catálogo.
 */
body.tv-page
#heroPlayer.tv-scroll-sticky.tv-scroll-compact:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style){
  /*
   * 0.7.3.2: se mantiene en el MISMO lado izquierdo y con el mismo ancho.
   * No hay cambio lateral al seguir bajando.
   */
  left:54px!important;
  right:auto!important;
  width:clamp(520px, 36vw, 650px)!important;
  border-radius:12px!important;
  box-shadow:
    0 22px 62px #000e,
    0 0 0 1px #20bdd340!important;
}

/* Etiqueta discreta mientras está fijo. */
body.tv-page
#heroPlayer.tv-scroll-sticky:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style)::after{
  content:'📌 Reproductor fijo';
  position:absolute;
  z-index:85;
  top:10px;
  right:10px;

  padding:5px 8px;

  border:1px solid #ffffff2b;
  border-radius:999px;

  background:#07131dcc;
  backdrop-filter:blur(8px);

  color:#dffbff;
  font-size:10px;
  font-weight:800;
  line-height:1;
  pointer-events:none;

  opacity:.85;
}

/* En compacto reducimos información secundaria, pero mantenemos controles. */
/* 0.7.3.1: no ocultamos información al seguir bajando; el reproductor no cambia de aspecto. */

/* ---------------------------------------------------------------
   BOTÓN CAMBIAR RECOMENDADOS
   --------------------------------------------------------------- */
.quick-stations-head{
  gap:8px;
}

.shuffle-recommendations{
  flex:0 0 auto;

  min-height:32px;
  padding:6px 10px;

  border:1px solid #25506a;
  border-radius:9px;

  background:#102a3d;
  color:#dff8ff;

  font:inherit;
  font-size:10px;
  font-weight:800;

  cursor:pointer;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.shuffle-recommendations:hover{
  border-color:#19c8cd;
  background:#12384e;
  transform:translateY(-1px);
}

.shuffle-recommendations:active{
  transform:translateY(0) scale(.97);
}

.shuffle-recommendations.is-shuffling{
  pointer-events:none;
  opacity:.72;
}

.quick-station.sp-rec-enter{
  animation:spRecEnter .2s ease-out;
}

@keyframes spRecEnter{
  from{
    opacity:.25;
    transform:scale(.94);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

/* ---------------------------------------------------------------
   TABLET / MÓVIL
   El reproductor sigue visible, pero no tapa casi toda la pantalla.
   --------------------------------------------------------------- */
@media(max-width:900px){
  body.tv-page
  #heroPlayer.tv-scroll-sticky:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style),
  body.tv-page
  #heroPlayer.tv-scroll-sticky.tv-scroll-compact:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style){
    left:8px!important;
    right:8px!important;

    width:calc(100vw - 16px)!important;
    max-width:none!important;

    border-radius:11px!important;
  }

  body.tv-page
  #heroPlayer.tv-scroll-sticky:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style)::after{
    top:7px;
    right:7px;
    font-size:9px;
  }
}

@media(max-width:560px){
  .quick-stations-head{
    align-items:flex-start;
  }

  .shuffle-recommendations{
    min-height:30px;
    padding:5px 8px;
    font-size:0;
  }

  .shuffle-recommendations::before{
    content:'🔄';
    font-size:15px;
  }

  body.tv-page
  #heroPlayer.tv-scroll-sticky:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style){
    max-height:46vh!important;
  }

  body.tv-page
  #heroPlayer.tv-scroll-sticky.tv-scroll-compact:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style)
  .hero-info h1{
    font-size:15px!important;
  }
}

/*
 * Fullscreen / modo cine / flotante siempre ganan al sticky.
 * Es una segunda defensa además de la lógica JavaScript.
 */
body.tv-page
#heroPlayer.tv-floating,
body.tv-page
#heroPlayer.tv-theater,
body.tv-page
#heroPlayer.tv-fullscreen-style{
  --sp-sticky-left:auto;
  --sp-sticky-width:auto;
}


/* 0.7.3.2 — mantener el reproductor fijo en el lado izquierdo */
@media (min-width:901px) and (max-width:1280px){
  body.tv-page
  #heroPlayer.tv-scroll-sticky:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style),
  body.tv-page
  #heroPlayer.tv-scroll-sticky.tv-scroll-compact:not(.tv-floating):not(.tv-theater):not(.tv-fullscreen-style){
    left:24px!important;
    right:auto!important;
    width:clamp(460px, 42vw, 600px)!important;
  }
}