/* Distribución responsive final del reproductor Jason Noise. */

/* Estado final de las canciones: superficie morada y selección persistente. */
.jnmp-player .jnmp-track-card,
.jnmp-player .jnmp-track-card:hover,
.jnmp-player .jnmp-track-card:focus-visible{
  background:#2b1f36 !important;
}

.jnmp-player .jnmp-track-card.is-active,
.jnmp-player .jnmp-track-card.is-active:hover,
.jnmp-player .jnmp-track-card.is-active:focus-visible{
  border-color:#a855f7 !important;
  background:#2b1f36 !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.36),
    0 0 24px rgba(168,85,247,.18) !important;
}

.jnmp-featured__info h3{
  font-family:"Bebas Neue",sans-serif !important;
  font-weight:400 !important;
}

.jnmp-featured__info .jnmp-kicker{
  margin-bottom:7px !important;
  font-family:"Poppins",sans-serif !important;
  font-size:12px !important;
  font-weight:500 !important;
}

.jnmp-artist,
.jnmp-credits,
.jnmp-time{
  font-family:"Poppins",sans-serif !important;
  font-weight:400 !important;
}

/* Tarjetas del carrusel */
.jnmp-track-rail{
  grid-auto-columns:minmax(400px,calc((100% - 32px)/3));
}

.jnmp-track-card{
  min-height:192px;
  padding:18px;
  grid-template-columns:132px minmax(0,1fr);
  gap:22px;
}

.jnmp-track-card__cover{
  position:relative;
  width:132px;
  height:132px;
}

.jnmp-track-card__cover::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(7,6,10,.64);
  opacity:0;
  transition:opacity .2s ease;
}

.jnmp-track-card__copy small{
  color:#a855f7;
  font-family:"Poppins",sans-serif !important;
  font-size:12px;
  font-weight:500 !important;
  line-height:1.2;
  letter-spacing:.11em;
}

.jnmp-track-card__copy strong{
  width:100%;
  margin-top:7px;
  overflow:visible;
  color:#fff;
  font-family:"Bebas Neue",sans-serif !important;
  font-size:29px;
  font-weight:400 !important;
  line-height:.95;
  text-overflow:clip;
  white-space:normal;
}

.jnmp-track-card__copy>span{
  width:100%;
  margin-top:0;
  overflow:visible;
  color:#fff;
  font-family:"Poppins",sans-serif !important;
  font-size:11px;
  font-weight:400 !important;
  line-height:1.35;
  text-overflow:clip;
  white-space:normal;
}

.jnmp-track-card__copy em{
  width:100%;
  margin-top:0;
  overflow:visible;
  color:#dcb5ff;
  font-family:"Poppins",sans-serif !important;
  font-size:9px;
  font-weight:400 !important;
  line-height:1.35;
  letter-spacing:.05em;
  text-overflow:clip;
  white-space:normal;
}

.jnmp-track-card__play{
  position:absolute;
  z-index:2;
  top:50%;
  left:84px;
  width:48px;
  height:48px;
  opacity:0;
  transform:translate(-50%,-62%) scale(.82);
  background:#a855f7;
  box-shadow:0 14px 30px rgba(168,85,247,.34);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}

.jnmp-track-card__play::after{
  content:"ESCUCHAR";
  position:absolute;
  top:calc(100% + 9px);
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  font-family:"Poppins",sans-serif;
  font-size:7px;
  font-weight:500;
  line-height:1;
  letter-spacing:.12em;
  white-space:nowrap;
}

.jnmp-track-card:hover .jnmp-track-card__cover::after,
.jnmp-track-card:focus-visible .jnmp-track-card__cover::after{
  opacity:1;
}

.jnmp-track-card:hover .jnmp-track-card__play,
.jnmp-track-card:focus-visible .jnmp-track-card__play{
  opacity:1;
  transform:translate(-50%,-62%) scale(1);
}

@media(max-width:820px){
  .jnmp-track-rail{grid-auto-columns:minmax(330px,72%)}
}

@media(max-width:620px){
  body{padding:22px 12px}

  /* Reproductor principal compacto, inspirado en los mini players clásicos. */
  .jnmp-featured{
    min-height:0;
    padding:12px;
    grid-template-columns:82px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:12px;
    row-gap:10px;
    align-items:center;
    border-radius:18px;
  }

  .jnmp-featured__cover{
    grid-column:1;
    grid-row:1;
    width:82px;
    height:82px;
    aspect-ratio:1;
    border-radius:12px;
    box-shadow:0 12px 26px rgba(0,0,0,.42);
  }

  .jnmp-featured__info{
    grid-column:2;
    grid-row:1;
    min-width:0;
    text-align:left;
  }

  .jnmp-featured__info .jnmp-kicker{
    margin-bottom:3px !important;
    font-size:8.5px !important;
    line-height:1 !important;
  }

  .jnmp-featured__info h3{
    overflow:hidden;
    font-size:28px !important;
    line-height:.92 !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .jnmp-artist{
    margin-top:3px !important;
    overflow:hidden;
    font-size:9.5px !important;
    line-height:1.2 !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .jnmp-credits{
    margin-top:3px !important;
    overflow:hidden;
    font-size:7.5px !important;
    line-height:1.25 !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .jnmp-featured__audio{
    grid-column:1/-1;
    grid-row:2;
    width:100%;
  }

  .jnmp-waveform{
    height:32px;
    gap:2px;
  }

  .jnmp-waveform i{
    width:2px;
    min-width:1px;
  }

  .jnmp-transport{
    margin-top:5px;
    grid-template-columns:38px 30px minmax(70px,1fr) 30px;
    gap:6px;
  }

  .jnmp-play{
    width:38px;
    height:38px;
    min-width:38px;
  }

  .jnmp-play-icon{
    border-top-width:5px;
    border-bottom-width:5px;
    border-left-width:8px;
  }

  .jnmp-time{font-size:7px}
  .jnmp-progress::before,
  .jnmp-progress>span{height:3px}

  /* En móvil el carrusel se convierte en una lista compacta. */
  .jnmp-carousel-shell{margin-top:10px}
  .jnmp-track-rail{
    width:100%;
    max-height:282px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scroll-snap-type:none;
    scrollbar-width:thin;
    scrollbar-color:rgba(168,85,247,.62) rgba(255,255,255,.035);
    touch-action:pan-y;
    cursor:default;
  }

  .jnmp-track-rail::-webkit-scrollbar{width:4px;height:0}
  .jnmp-track-rail::-webkit-scrollbar-track{
    background:rgba(255,255,255,.035);
    border-radius:99px;
  }
  .jnmp-track-rail::-webkit-scrollbar-thumb{
    background:rgba(168,85,247,.62);
    border-radius:99px;
  }

  .jnmp-track-card{
    width:100%;
    min-height:66px;
    padding:7px;
    grid-template-columns:52px minmax(0,1fr) 30px;
    gap:10px;
    border-radius:12px;
    box-shadow:0 10px 24px rgba(0,0,0,.24);
  }

  .jnmp-track-card:hover,
  .jnmp-track-card.is-active{transform:none}

  .jnmp-track-card__cover{
    width:52px;
    height:52px;
    border-radius:8px;
  }

  .jnmp-track-card__copy small{
    font-size:7.5px;
    line-height:1;
  }

  .jnmp-track-card__copy strong{
    margin-top:3px;
    font-size:18px;
    line-height:.95;
    white-space:nowrap;
  }

  .jnmp-track-card__copy>span{
    margin-top:2px;
    font-size:8.5px;
    line-height:1.1;
    white-space:nowrap;
  }

  .jnmp-track-card__copy em{
    margin-top:2px;
    font-size:7px;
    line-height:1.1;
    white-space:nowrap;
  }

  .jnmp-track-card__play{
    position:relative;
    top:auto;
    left:auto;
    width:30px;
    height:30px;
    display:grid;
    opacity:1;
    transform:none;
    background:transparent;
    box-shadow:none;
  }

  /* El hover de escritorio no debe deformar las filas compactas. */
  .jnmp-track-card:hover .jnmp-track-card__play,
  .jnmp-track-card:focus-visible .jnmp-track-card__play{
    position:relative;
    top:auto;
    left:auto;
    width:30px;
    height:30px;
    opacity:1;
    transform:none;
    background:transparent;
    box-shadow:none;
  }

  .jnmp-track-card__play::after,
  .jnmp-track-card:hover .jnmp-track-card__play::after,
  .jnmp-track-card:focus-visible .jnmp-track-card__play::after{display:none}

  .jnmp-track-card.is-active .jnmp-track-card__play,
  .jnmp-track-card.is-active:hover .jnmp-track-card__play,
  .jnmp-track-card.is-active:focus-visible .jnmp-track-card__play{
    background:#a855f7;
    box-shadow:0 7px 18px rgba(168,85,247,.25);
  }

  .jnmp-track-card__cover::after{display:none}
}

/* Escritorio: la misma lista compacta y estable que en móvil. */
@media(min-width:821px){
  .jnmp-player{
    width:100%;
    max-width:none;
    margin-right:auto;
    margin-left:auto;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .jnmp-featured{
    border:0;
    border-radius:30px;
    background:
      radial-gradient(circle at 78% 35%,rgba(168,85,247,.09),transparent 32%),
      linear-gradient(145deg,#0d0c11,#08080b 72%);
    box-shadow:
      0 32px 85px rgba(0,0,0,.55),
      0 0 38px rgba(168,85,247,.08),
      inset 0 1px 0 rgba(255,255,255,.025);
  }

  .jnmp-carousel-shell{
    width:100%;
    max-width:none;
    margin:12px 0 0;
    padding:6px;
    overflow:hidden;
    border:1px solid rgba(168,85,247,.3);
    border-radius:18px;
    background:linear-gradient(150deg,rgba(16,16,20,.96),rgba(8,8,11,.98));
    box-shadow:0 18px 42px rgba(0,0,0,.3),0 0 28px rgba(168,85,247,.06);
  }

  .jnmp-track-rail{
    width:100%;
    max-height:290px;
    padding:0 18px 0 0;
    display:flex;
    flex-direction:column;
    gap:6px;
    overflow-x:hidden;
    overflow-y:scroll;
    overscroll-behavior-y:contain;
    scroll-snap-type:none;
    scrollbar-gutter:stable;
    scrollbar-width:none;
    cursor:default;
  }

  .jnmp-track-rail::-webkit-scrollbar{width:0;height:0}
  .jnmp-track-rail::-webkit-scrollbar-track{
    background:rgba(255,255,255,.055);
    border-radius:99px;
  }
  .jnmp-track-rail::-webkit-scrollbar-thumb{
    background:#a855f7;
    border-radius:99px;
    box-shadow:0 0 10px rgba(168,85,247,.42);
  }

  .jnmp-list-scrollbar{
    position:absolute;
    z-index:5;
    top:8px;
    right:6px;
    bottom:8px;
    width:8px;
    border-radius:99px;
    background:rgba(255,255,255,.07);
  }

  .jnmp-list-scrollbar__thumb{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    min-height:34px;
    border-radius:99px;
    background:#a855f7;
    box-shadow:0 0 11px rgba(168,85,247,.5);
    cursor:grab;
    touch-action:none;
  }

  .jnmp-list-scrollbar__thumb:active{cursor:grabbing}

  .jnmp-track-card{
    width:100%;
    flex:0 0 68px;
    min-height:68px;
    padding:8px;
    grid-template-columns:52px minmax(0,1fr) 32px;
    gap:8px;
    opacity:1;
    filter:none;
    transform:none;
    border:1px solid transparent;
    border-radius:12px;
    background:linear-gradient(145deg,#101014,#0c0b0f);
    box-shadow:0 12px 28px rgba(0,0,0,.28);
  }

  .jnmp-track-card:hover,
  .jnmp-track-card.is-active,
  .jnmp-track-card.is-active:hover{
    transform:none;
    border-color:rgba(168,85,247,.72);
    background:linear-gradient(145deg,#17101d,#0d0c10);
    box-shadow:0 14px 32px rgba(0,0,0,.36),0 0 22px rgba(168,85,247,.1);
  }

  .jnmp-track-card:not(:last-child):not(.is-active){
    border-bottom-color:rgba(255,255,255,.07);
  }

  .jnmp-track-card__cover{
    width:52px;
    height:52px;
    border-radius:8px;
  }

  .jnmp-track-card__cover::after{display:none}

  .jnmp-track-card__copy{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(105px,.65fr);
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:0;
  }

  .jnmp-track-card__copy small{
    grid-column:3;
    grid-row:1/3;
    align-self:stretch;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-left:1px solid rgba(168,85,247,.2);
    font-size:12px;
    line-height:1;
  }

  .jnmp-track-card__copy strong{
    grid-column:1;
    grid-row:1;
    margin-top:0;
    padding-right:16px;
    font-size:23px;
    line-height:.95;
    white-space:nowrap;
  }

  .jnmp-track-card__copy>span{
    grid-column:1;
    grid-row:2;
    margin-top:4px;
    padding-right:16px;
    font-size:13px;
    line-height:1.1;
    white-space:nowrap;
  }

  .jnmp-track-card__copy em{
    grid-column:2;
    grid-row:1/3;
    align-self:stretch;
    margin-top:0;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-left:1px solid rgba(168,85,247,.2);
    font-size:11px;
    line-height:1.1;
    white-space:nowrap;
  }

  .jnmp-track-card__play,
  .jnmp-track-card:hover .jnmp-track-card__play,
  .jnmp-track-card:focus-visible .jnmp-track-card__play{
    position:relative;
    top:auto;
    left:auto;
    width:32px;
    height:32px;
    display:grid;
    opacity:1;
    transform:none;
    background:transparent;
    box-shadow:none;
  }

  .jnmp-track-card::before{
    content:"";
    position:absolute;
    top:14px;
    right:66px;
    bottom:14px;
    width:1px;
    background:rgba(168,85,247,.2);
    pointer-events:none;
  }

  .jnmp-track-card__play::after{display:none}

  .jnmp-track-card.is-active .jnmp-track-card__play{
    background:#a855f7;
    box-shadow:0 8px 20px rgba(168,85,247,.25);
  }
}

/* Escritorio: distribución horizontal tipo consola musical. */
@media(min-width:821px){
  .jnmp-track-card{
    grid-template-columns:
      52px
      40px
      minmax(110px,1fr)
      minmax(100px,.85fr)
      76px
      minmax(140px,1fr);
    grid-template-rows:1fr 1fr;
    column-gap:8px;
  }

  .jnmp-track-card::before{display:none}

  .jnmp-track-card__cover{
    grid-column:1;
    grid-row:1/3;
  }

  .jnmp-track-card__play,
  .jnmp-track-card:hover .jnmp-track-card__play,
  .jnmp-track-card:focus-visible .jnmp-track-card__play{
    grid-column:2;
    grid-row:1/3;
    justify-self:center;
  }

  .jnmp-track-card__copy{display:contents}

  .jnmp-track-card__copy strong{
    grid-column:3;
    grid-row:1/3;
    align-self:center;
    margin:0;
    padding:0 6px 0 0;
    font-size:18px;
  }

  .jnmp-track-card__copy small{
    grid-column:5;
    grid-row:1/3;
    align-self:stretch;
    padding:0 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-left:0;
    font-size:10px;
  }

  .jnmp-track-card__copy>span{
    grid-column:4;
    grid-row:1/3;
    align-self:center;
    margin:0;
    padding:0 6px;
    overflow:hidden;
    border-left:0;
    font-size:10px;
    font-weight:500;
    letter-spacing:.04em;
    text-transform:uppercase;
    white-space:nowrap;
  }

  .jnmp-track-card__copy em{
    grid-column:6;
    grid-row:1/3;
    align-self:center;
    margin:0;
    padding:0 6px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    overflow:visible;
    border:0;
    text-align:right;
    font-size:10px;
    white-space:normal;
  }

}

@media(min-width:821px) and (max-width:980px){
  .jnmp-player{padding-right:0;padding-left:0}
}

/* PC: cuatro tarjetas delgadas visibles. */
@media(min-width:981px){
  .jnmp-track-rail{max-height:266px;gap:6px}

  .jnmp-track-card{
    flex-basis:62px;
    min-height:62px;
    padding:7px;
    grid-template-columns:
      48px
      40px
      minmax(150px,1.12fr)
      minmax(145px,1fr)
      minmax(105px,.72fr)
      minmax(190px,1.18fr);
    column-gap:11px;
  }

  .jnmp-track-card__cover{width:48px;height:48px;border-radius:8px}

  .jnmp-track-card__play,
  .jnmp-track-card:hover .jnmp-track-card__play,
  .jnmp-track-card:focus-visible .jnmp-track-card__play{width:30px;height:30px}

  .jnmp-track-card__copy strong{padding-right:14px;font-size:19px}

  .jnmp-track-card__copy small{padding-right:14px;padding-left:14px}

  .jnmp-track-card__copy>span{padding-right:14px;padding-left:14px}

  .jnmp-track-card__copy em{padding-right:18px;padding-left:12px}

  .jnmp-track-card__copy>span,
  .jnmp-track-card__copy small,
  .jnmp-track-card__copy em{font-size:12px}
}

/* Tablet: la misma composición compacta de móvil, con escala cómoda. */
@media(min-width:621px) and (max-width:820px){
  .jnmp-player{width:100%;max-width:none;margin-inline:auto;padding:0}
  .jnmp-featured{min-height:0;padding:16px;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:13px;align-items:center;border-radius:22px}
  .jnmp-featured::after{content:"";position:absolute;z-index:-2;inset:-18px;background:linear-gradient(90deg,rgba(8,8,11,.96),rgba(8,8,11,.82)),var(--jnmp-cover-image) center/cover no-repeat;filter:blur(15px) saturate(.72);opacity:.58;transform:scale(1.06);pointer-events:none}
  .jnmp-featured__cover{grid-column:1;grid-row:1;width:112px;height:112px;aspect-ratio:1;border-radius:16px}
  .jnmp-featured__info{grid-column:2;grid-row:1;min-width:0;padding:0 58px 0 0;text-align:left}
  .jnmp-featured__info .jnmp-kicker{margin-bottom:4px!important;font-size:10px!important;line-height:1!important}
  .jnmp-featured__info h3{overflow:hidden;font-size:38px!important;line-height:.92!important;text-overflow:ellipsis;white-space:nowrap}
  .jnmp-artist{margin-top:4px!important;overflow:hidden;font-size:11px!important;line-height:1.2!important;text-overflow:ellipsis;white-space:nowrap}
  .jnmp-credits{margin-top:4px!important;overflow:hidden;font-size:9px!important;line-height:1.25!important;text-overflow:ellipsis;white-space:nowrap}
  .jnmp-featured__audio{grid-column:1/-1;grid-row:2;width:100%;padding:0}
  .jnmp-waveform{height:48px;gap:2px}
  .jnmp-waveform i{width:3px;min-width:2px}
  .jnmp-transport{margin-top:6px;grid-template-columns:max-content minmax(70px,1fr) max-content;grid-template-areas:"current progress duration";gap:10px}
  .jnmp-transport .jnmp-play{position:absolute;top:45px;right:16px;width:44px;height:44px;min-width:44px}
  .jnmp-transport .jnmp-time:first-of-type{grid-area:current;text-align:left}
  .jnmp-transport .jnmp-progress{grid-area:progress}
  .jnmp-transport .jnmp-time:last-of-type{grid-area:duration;text-align:right}
  .jnmp-time{font-size:8px}
  .jnmp-carousel-shell{margin-top:10px}
  .jnmp-track-rail{width:100%;max-height:298px;padding:0;display:flex;flex-direction:column;gap:6px;overflow-x:hidden;overflow-y:auto;scroll-snap-type:none;scrollbar-width:thin;scrollbar-color:rgba(168,85,247,.62) rgba(255,255,255,.035);touch-action:pan-y;cursor:default}
  .jnmp-track-card{width:100%;min-height:70px;padding:7px;grid-template-columns:56px minmax(0,1fr) 34px;grid-template-rows:1fr;gap:11px;border-radius:13px;transform:none!important}
  .jnmp-track-card__cover{position:relative;grid-column:1;grid-row:1;width:56px;height:56px;border-radius:9px}
  .jnmp-track-card__cover::after{display:none}
  .jnmp-track-card__copy{grid-column:2;grid-row:1;display:flex;min-width:0;width:100%;flex-direction:column;align-items:flex-start;justify-content:center}
  .jnmp-track-card__copy small,
  .jnmp-track-card__copy strong,
  .jnmp-track-card__copy>span,
  .jnmp-track-card__copy em{position:static;grid-column:auto;grid-row:auto;align-self:auto;width:100%;padding:0;display:block;overflow:hidden;border:0;text-align:left;text-overflow:ellipsis;white-space:nowrap}
  .jnmp-track-card__copy small{font-size:8px;line-height:1}
  .jnmp-track-card__copy strong{margin-top:3px;font-size:20px;line-height:.95}
  .jnmp-track-card__copy>span{margin-top:2px;font-size:9px;line-height:1.1}
  .jnmp-track-card__copy em{margin-top:2px;font-size:7.5px;line-height:1.1}
  .jnmp-track-card__play,
  .jnmp-track-card:hover .jnmp-track-card__play,
  .jnmp-track-card:focus-visible .jnmp-track-card__play{position:relative;grid-column:3;grid-row:1;inset:auto;width:34px;height:34px;display:grid;opacity:1;transform:none;background:transparent;box-shadow:none}
  .jnmp-track-card__play::after{display:none}
  .jnmp-list-scrollbar{display:none!important}
}

/* Móvil: el botón principal conserva la posición superior derecha de PC. */
@media(max-width:620px){
  .jnmp-featured__info{padding-right:46px}
  .jnmp-transport{grid-template-columns:max-content minmax(70px,1fr) max-content;grid-template-areas:"current progress duration";gap:8px}
  .jnmp-transport .jnmp-play{position:absolute;top:29px;right:12px;width:38px;height:38px;min-width:38px}
  .jnmp-transport .jnmp-time:first-of-type{grid-area:current;text-align:left}
  .jnmp-transport .jnmp-progress{grid-area:progress}
  .jnmp-transport .jnmp-time:last-of-type{grid-area:duration;text-align:right}
}