/* Icono de play en cada fila del Top 10.
   Va justo a la izquierda del carrito y sirve de pista visual: al pulsarlo se
   despliega la fila igual que si tocaras en cualquier parte de la línea. */

/* =====================================================================
   PIEL DEL TOP — nivel 2
   El HTML de las filas lo pinta el tema Pro Radio. Aquí se toma el control
   de la capa visual que nos importa (alineación, tamaño de iconos, alto de
   fila, hover) sin reescribir su comportamiento: el acordeón y el
   reproductor siguen siendo del tema. Todo va acotado a .pmt-chart-skin,
   que añade el JavaScript, así que si el script no corre no pasa nada.
   ===================================================================== */

.pmt-chart-skin {
	--pmt-accent: #f2bf07;
	--pmt-icon: 26px;
	--pmt-row-h: 78px;
}

/* Alto uniforme y contenido centrado en vertical. */
.pmt-chart-skin .proradio-chart-track .proradio-chart-table {
	min-height: var(--pmt-row-h) !important;
	align-items: center;
}

/* La celda de acciones pasa a ser nuestra: ancho propio y sin recortes. */
.pmt-chart-skin .proradio-chart-table .proradio-action {
	width: auto !important;
	min-width: 76px !important;
	white-space: nowrap !important;
	text-align: right !important;
	vertical-align: middle !important;
	padding-right: 10px !important;
}

/* Un único tamaño de icono para el play y el carrito: es lo que hacía que
   uno pareciera más grande que el otro. */
.pmt-chart-skin .pmt-actions-row .material-icons {
	font-size: var(--pmt-icon);
	line-height: 1;
	vertical-align: middle;
}

.pmt-chart-skin .pmt-actions-row > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	width: 32px;
	line-height: 1;
	vertical-align: middle;
	color: var(--pmt-accent);
	transition: opacity .16s ease, transform .16s ease;
}

.pmt-chart-skin .pmt-actions-row > a:hover {
	opacity: .85;
	transform: scale(1.06);
}

/* Fila flexible que crea el JavaScript envolviendo el contenido del tema:
   así el play y el carrito comparten eje vertical sin tocar su HTML. */
.pmt-actions-row {
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	vertical-align: middle;
	line-height: 1;
}

.pmt-actions-row > * {
	vertical-align: middle;
	flex: 0 0 auto;
}

.pmt-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #f2bf07;
	cursor: pointer;
	line-height: 1;
	user-select: none;
	transition: background .16s ease, transform .16s ease;
	-webkit-tap-highlight-color: transparent;
}

.pmt-play:hover {
	background: rgba(242, 191, 7, .14);
	transform: scale(1.06);
}

.pmt-play:focus-visible {
	background: rgba(242, 191, 7, .14);
	outline: none;
	box-shadow: 0 0 0 2px rgba(242, 191, 7, .45);
}

.pmt-play:active {
	transform: scale(.94);
}

.pmt-play .material-icons {
	font-size: 26px;
	line-height: 1;
}

/* Con la fila abierta, el play se convierte en tres barras que se mueven. */
.pmt-play__wave {
	display: none;
	align-items: flex-end;
	gap: 3px;
	height: 18px;
}

.pmt-play__wave span {
	width: 3px;
	background: #f2bf07;
	border-radius: 1px;
	animation: pmt-play-bar .9s ease-in-out infinite;
}

.pmt-play__wave span:nth-child(1) { height: 60%;  animation-delay: 0s; }
.pmt-play__wave span:nth-child(2) { height: 100%; animation-delay: .18s; }
.pmt-play__wave span:nth-child(3) { height: 45%;  animation-delay: .36s; }

@keyframes pmt-play-bar {
	0%, 100% { transform: scaleY(.45); }
	50%      { transform: scaleY(1); }
}

li.qt-collapsible-item.active > .collapsible-header .pmt-play .material-icons,
li.active > .collapsible-header .pmt-play .material-icons {
	display: none;
}

li.qt-collapsible-item.active > .collapsible-header .pmt-play__wave,
li.active > .collapsible-header .pmt-play__wave {
	display: inline-flex;
}

li.qt-collapsible-item.active > .collapsible-header .pmt-play::after,
li.active > .collapsible-header .pmt-play::after {
	animation: none;
	opacity: 0;
}

/* Respeto por quien prefiere menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	.pmt-play,
	.pmt-play::after,
	.pmt-play__wave span {
		animation: none !important;
		transition: none !important;
	}
}

/* En pantallas pequeñas se reduce para no robar sitio al título. */
@media (max-width: 600px) {
	.proradio-chart-tracklist .proradio-chart-track .proradio-chart-table .proradio-action {
		min-width: 74px !important;
	}
	.pmt-play {
		width: 30px;
		height: 30px;
		margin-right: 5px;
	}
	.pmt-play .material-icons { font-size: 18px; }
}

/* ------------------------------------------------------------------ Sesión */

.pmt-sesion {
	margin: 40px 0 0;
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.pmt-sesion__title {
	margin: 0 0 6px;
	font-size: 20px;
	letter-spacing: .01em;
}

.pmt-sesion__nota {
	margin: 0 0 18px;
	font-size: 14px;
	opacity: .7;
}

.pmt-sesion__embed {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	background: #0d0d0f;
}

.pmt-sesion__embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

.pmt-sesion__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border: 1px solid rgba(242, 191, 7, .5);
	border-radius: 999px;
	color: #f2bf07;
	text-decoration: none;
	transition: background .18s ease;
}

.pmt-sesion__link:hover {
	background: rgba(242, 191, 7, .12);
}