/* Ajustes finales TIENDA_PISTAS_WEB: pastillas iguales al catálogo */

/* La referencia oficial son las pastillas de las franjas/listado. */
.bottom-demo-title-pill,
.modal .pill,
.cart-modal .pill,
.song-order-modal .pill{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  min-height:17px !important;
  height:auto !important;
  padding:3px 6px !important;
  border-radius:5px !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.35px !important;
}

/* Mismos colores que usa actualmente el catálogo. */
.bottom-demo-title-pill.is-coro,
.modal .pill-coro{
  background:#4438ca !important;
  color:#fff !important;
}

.bottom-demo-title-pill.is-vivo,
.bottom-demo-title-pill.is-live,
.modal .pill-vivo,
.modal .pill-live{
  background:#23d66f !important;
  color:#062112 !important;
}

/* Contador público de reproducciones del demo.
   Va junto a CORO / EN VIVO, pero NO es una pastilla. */
.demo-listen-count{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  margin-left:4px !important;
  padding:2px 0 !important;
  min-height:17px !important;
  color:#8b919b !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  vertical-align:middle !important;
}

.demo-listen-count[hidden]{
  display:none !important;
}

.demo-listen-count i{
  font-size:10px !important;
  opacity:.92 !important;
}

.tag-row > .demo-listen-count:first-child,
#songModalTags > .demo-listen-count:first-child{
  margin-left:0 !important;
}

.demo-listen-only-row{
  min-height:17px !important;
}

/* El botón principal siempre debe quedar por encima de la onda y aceptar toque/clic. */
.bottom-demo-control.main{
  pointer-events:auto !important;
  touch-action:manipulation !important;
  position:relative !important;
  z-index:50 !important;
}

/* =========================================================
   HOME · COVERS GRANDES TIPO YOUTUBE MUSIC · V2
   SOLO RECIÉN AGREGADOS + DESTACADOS
   ========================================================= */
#newRail,
#mostRequestedRail{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:flex-start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  gap:16px !important;
  padding:0 18px 12px 0 !important;
  scroll-snap-type:x mandatory !important;
  scrollbar-width:none !important;
  -webkit-overflow-scrolling:touch !important;
}

#newRail::-webkit-scrollbar,
#mostRequestedRail::-webkit-scrollbar{
  display:none !important;
}

#newRail .album-card,
#mostRequestedRail .album-card{
  flex:0 0 152px !important;
  width:152px !important;
  min-width:152px !important;
  max-width:152px !important;
  scroll-snap-align:start !important;
}

#newRail .album-cover,
#mostRequestedRail .album-cover{
  width:152px !important;
  height:152px !important;
  aspect-ratio:1/1 !important;
  border-radius:12px !important;
  box-shadow:0 14px 30px rgba(0,0,0,.34) !important;
  transition:transform .16s ease,box-shadow .16s ease !important;
}

/* Título y artista: una sola línea; si exceden el ancho del cover, usar puntos suspensivos. */
#newRail .album-title,
#mostRequestedRail .album-title{
  margin-top:9px !important;
  margin-bottom:0 !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  font-size:14px !important;
  line-height:17px !important;
  font-weight:800 !important;
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-box-orient:unset !important;
  -webkit-line-clamp:unset !important;
}

#newRail .album-sub,
#mostRequestedRail .album-sub{
  margin-top:2px !important;
  width:100% !important;
  min-width:0 !important;
  font-size:12px !important;
  line-height:15px !important;
  min-height:15px !important;
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  color:#8b919b !important;
}

@media (hover:hover) and (pointer:fine){
  #newRail .album-card:hover .album-cover,
  #mostRequestedRail .album-card:hover .album-cover{
    transform:translateY(-2px) !important;
    box-shadow:0 18px 36px rgba(0,0,0,.42) !important;
  }
}

@media (max-width:390px){
  #newRail,
  #mostRequestedRail{gap:14px !important;}
  #newRail .album-card,
  #mostRequestedRail .album-card{
    flex-basis:146px !important;
    width:146px !important;
    min-width:146px !important;
    max-width:146px !important;
  }
  #newRail .album-cover,
  #mostRequestedRail .album-cover{
    width:146px !important;
    height:146px !important;
  }
}

@media (max-width:365px){
  #newRail .album-card,
  #mostRequestedRail .album-card{
    flex-basis:138px !important;
    width:138px !important;
    min-width:138px !important;
    max-width:138px !important;
  }
  #newRail .album-cover,
  #mostRequestedRail .album-cover{
    width:138px !important;
    height:138px !important;
  }
}

@media (min-width:720px){
  #newRail,
  #mostRequestedRail{gap:18px !important;}
  #newRail .album-card,
  #mostRequestedRail .album-card{
    flex-basis:184px !important;
    width:184px !important;
    min-width:184px !important;
    max-width:184px !important;
  }
  #newRail .album-cover,
  #mostRequestedRail .album-cover{
    width:184px !important;
    height:184px !important;
  }
  #newRail .album-title,
  #mostRequestedRail .album-title{
    font-size:14.5px !important;
    line-height:18px !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
  }
}

@media (min-width:1024px){
  #newRail,
  #mostRequestedRail{gap:20px !important;}
  #newRail .album-card,
  #mostRequestedRail .album-card{
    flex-basis:218px !important;
    width:218px !important;
    min-width:218px !important;
    max-width:218px !important;
  }
  #newRail .album-cover,
  #mostRequestedRail .album-cover{
    width:218px !important;
    height:218px !important;
  }
  #newRail .album-title,
  #mostRequestedRail .album-title{
    font-size:15px !important;
  }
  #newRail .album-sub,
  #mostRequestedRail .album-sub{
    font-size:12.5px !important;
  }
}

@media (min-width:1380px){
  #newRail .album-card,
  #mostRequestedRail .album-card{
    flex-basis:228px !important;
    width:228px !important;
    min-width:228px !important;
    max-width:228px !important;
  }
  #newRail .album-cover,
  #mostRequestedRail .album-cover{
    width:228px !important;
    height:228px !important;
  }
}


/* =========================================================
   CRO FASE 1 · ACCIONES DE COMPRA COMPACTAS
   Nativas, sin observers ni capas flotantes.
   ========================================================= */
.catalog-wrap .song-row{
  grid-template-columns:48px minmax(0,1fr) 34px !important;
  gap:10px !important;
}
.catalog-wrap .song-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:0 !important;
  min-width:34px !important;
}
.quick-add-btn{
  width:30px;
  height:30px;
  min-width:30px;
  flex:0 0 30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  border-radius:999px;
  border:1px solid rgba(37,211,102,.24);
  background:rgba(37,211,102,.08);
  color:#72e5a0;
  font-size:12px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.quick-add-btn:hover{
  background:rgba(37,211,102,.14);
  border-color:rgba(37,211,102,.38);
  color:#a0efbd;
}
.quick-add-btn:active{transform:scale(.94);}
.quick-add-btn.is-added{
  background:rgba(37,211,102,.12);
  border-color:rgba(37,211,102,.30);
  color:#25d366;
  cursor:pointer;
  opacity:.95;
}
.quick-add-btn:disabled{
  cursor:default;
  opacity:.7;
}
.quick-add-btn.is-gift{
  background:rgba(255,193,7,.10);
  border-color:rgba(255,193,7,.34);
  color:#ffd45a;
}
.quick-add-btn.is-gift:hover{
  background:rgba(255,193,7,.16);
  border-color:rgba(255,193,7,.48);
  color:#ffe58f;
}
.song-row.is-playing-demo .song-actions::after{
  display:none !important;
  content:none !important;
}

/* Reproductor: icono pequeño de agregar, integrado a la barra existente. */
#bottomDemoPlayer .bottom-demo-order-download{
  border:1px solid rgba(37,211,102,.22) !important;
  border-radius:10px !important;
  background:rgba(37,211,102,.07) !important;
  color:#72e5a0 !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent !important;
}
#bottomDemoPlayer .bottom-demo-order-download:hover{
  background:rgba(37,211,102,.13) !important;
  border-color:rgba(37,211,102,.36) !important;
  color:#a0efbd !important;
}
#bottomDemoPlayer .bottom-demo-order-download:active{
  transform:scale(.95) !important;
}
#bottomDemoPlayer .bottom-demo-order-download.is-added{
  background:rgba(37,211,102,.12) !important;
  border-color:rgba(37,211,102,.30) !important;
  color:#25d366 !important;
  opacity:.95 !important;
  cursor:pointer !important;
}
#bottomDemoPlayer .bottom-demo-order-download:disabled{
  opacity:.7 !important;
  cursor:default !important;
}
#bottomDemoPlayer .bottom-demo-order-download.is-gift{
  background:rgba(255,193,7,.10) !important;
  border-color:rgba(255,193,7,.34) !important;
  color:#ffd45a !important;
}

@media (max-width:700px){
  .catalog-wrap .song-row{
    grid-template-columns:45px minmax(0,1fr) 32px !important;
    gap:9px !important;
  }
  .catalog-wrap .song-actions{
    min-width:32px !important;
  }

  #bottomDemoPlayer.bottom-demo-player{
    grid-template-columns:52px minmax(0,1fr) 32px !important;
    column-gap:7px !important;
  }
  #bottomDemoPlayer .bottom-demo-pro{
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
  }
  #bottomDemoPlayer .bottom-demo-order-download{
    display:flex !important;
    grid-column:3 !important;
    grid-row:1 !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    padding:0 !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
    justify-self:center !important;
    font-size:13px !important;
  }
}

@media (max-width:365px){
  .catalog-wrap .song-row{
    grid-template-columns:44px minmax(0,1fr) 30px !important;
    gap:8px !important;
  }
  .catalog-wrap .song-actions{
    min-width:30px !important;
    gap:0 !important;
  }
  .quick-add-btn{
    width:28px;
    height:28px;
    min-width:28px;
    flex-basis:28px;
    font-size:11px;
  }
  #bottomDemoPlayer.bottom-demo-player{
    grid-template-columns:50px minmax(0,1fr) 30px !important;
    column-gap:6px !important;
  }
  #bottomDemoPlayer .bottom-demo-order-download{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
    font-size:12px !important;
    border-radius:9px !important;
  }
}


/* WhatsApp rápido: la primera letra del título conserva exactamente el look del texto. */
button.title-share-link{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  padding:0;
  margin:0;
  display:inline;
  cursor:pointer;
  vertical-align:baseline;
}
button.title-share-link:hover{
  color:var(--blue);
}


/* =========================================================
   DJGABO · ESTADO SELECCIONADO V1
   Diferencia inequívoca entre + disponible y ✓ seleccionada.
   Solo visual: no modifica carrito, precios ni lógica.
   ========================================================= */
.quick-add-btn.is-added{
  background:#22e676 !important;
  border-color:#22e676 !important;
  color:#04130b !important;
  opacity:1 !important;
  box-shadow:0 6px 18px rgba(34,230,118,.24) !important;
}

.quick-add-btn.is-added:hover{
  background:#35ee86 !important;
  border-color:#35ee86 !important;
  color:#04130b !important;
}

/* La fila seleccionada recibe un halo/borde sutil sin alterar su tamaño. */
.catalog-wrap .song-row:has(.quick-add-btn.is-added){
  border-radius:14px !important;
  background:linear-gradient(90deg,rgba(34,230,118,.085),rgba(34,230,118,.025) 72%,rgba(34,230,118,.06)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(34,230,118,.42),
    inset 0 0 26px rgba(34,230,118,.035) !important;
}

.catalog-wrap .song-row:has(.quick-add-btn.is-added) .quick-add-btn i{
  font-size:13px !important;
}