/* BeatLatin — Accordion multi-versión (compartido audio/video/single/DJ) */

.bl-mixes .bl-mixes-row__song {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.bl-mixes .bl-mixes-row__index-num--static,
.bl-mixes .bl-mixes-row__index-toggle,
.bl-mixes .bl-mixes-row__index-spacer {
	flex: 0 0 18px;
	width: 18px;
	min-width: 18px;
	max-width: 18px;
	box-sizing: border-box;
}

.bl-mixes .bl-mixes-row__index-num--static {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 18px;
	color: var(--bl-mixes-secondary, rgba(255, 255, 255, 0.45));
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.bl-mixes .bl-mixes-row__index-spacer {
	display: block;
	height: 1px;
	visibility: hidden;
	pointer-events: none;
}

.bl-mixes .bl-mixes-row__index-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--bl-mixes-secondary, rgba(255, 255, 255, 0.45));
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease;
}

.bl-mixes .bl-mixes-row__index-toggle:hover,
.bl-mixes .bl-mixes-row__index-toggle:focus-visible {
	background: transparent;
	color: var(--bl-accent, #d90c0c);
}

.bl-mixes .bl-mixes-row__index-toggle .bl-mixes-row__index-num,
.bl-mixes .bl-mixes-row__index-toggle .bl-mixes-row__expand-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	transition: opacity 0.16s ease, transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.bl-mixes .bl-mixes-row__index-toggle .bl-mixes-row__expand-icon {
	width: 13px;
	height: 13px;
	color: var(--bl-accent, #d90c0c);
	opacity: 0;
	pointer-events: none;
}

.bl-mixes .bl-mixes-row.has-versions:not(.is-expanded) .bl-mixes-row__index-toggle .bl-mixes-row__index-num {
	opacity: 1;
}

.bl-mixes .bl-mixes-row.has-versions:not(.is-expanded) .bl-mixes-row__index-toggle .bl-mixes-row__expand-icon {
	opacity: 0;
	transform: rotate(0deg);
}

@media (hover: hover) {
	.bl-mixes .bl-mixes-row.has-versions:not(.is-expanded):hover .bl-mixes-row__index-toggle .bl-mixes-row__index-num,
	.bl-mixes .bl-mixes-row.has-versions:not(.is-expanded) .bl-mixes-row__index-toggle:focus-visible .bl-mixes-row__index-num {
		opacity: 0;
	}

	.bl-mixes .bl-mixes-row.has-versions:not(.is-expanded):hover .bl-mixes-row__index-toggle .bl-mixes-row__expand-icon,
	.bl-mixes .bl-mixes-row.has-versions:not(.is-expanded) .bl-mixes-row__index-toggle:focus-visible .bl-mixes-row__expand-icon {
		opacity: 1;
	}
}

@media (hover: none) {
	.bl-mixes .bl-mixes-row.has-versions:not(.is-expanded) .bl-mixes-row__index-toggle .bl-mixes-row__index-num {
		opacity: 0;
	}

	.bl-mixes .bl-mixes-row.has-versions:not(.is-expanded) .bl-mixes-row__index-toggle .bl-mixes-row__expand-icon {
		opacity: 1;
	}
}

.bl-mixes .bl-mixes-row.has-versions.is-expanded .bl-mixes-row__index-toggle .bl-mixes-row__index-num {
	opacity: 0;
}

.bl-mixes .bl-mixes-row.has-versions.is-expanded .bl-mixes-row__index-toggle .bl-mixes-row__expand-icon {
	opacity: 1;
	transform: rotate(90deg);
	color: #fff;
}

[data-theme="light"] .bl-mixes .bl-mixes-row.has-versions.is-expanded .bl-mixes-row__index-toggle .bl-mixes-row__expand-icon {
	color: #111;
}

/* DJ: chevron a la izquierda del nº→play (siempre visible si hay versiones) */
.bl-mixes .bl-mixes-row__index-cluster {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 0;
}

/* DJ expand: styles scoped below (.bl-dj-catalog) — no ensanchar col. índice */

.bl-mixes .bl-mixes-col--version-accent,
.bl-mixes .bl-mixes-version-row .bl-mixes-col--version,
.bl-mixes .bl-mixes-version-row.now-playing .bl-mixes-col--version,
.bl-mixes .bl-mixes-version-row.now-playing.paused .bl-mixes-col--version,
html body .bl-mixes .bl-mixes-version-row.now-playing td.bl-mixes-col--version {
	color: var(--bl-accent, #d90c0c) !important;
	font-weight: 600;
}

/* Grupo abierto: sombreado unificado padre + subfilas (paridad audio) */
html body .bl-mixes .bl-mixes-row.has-versions.is-expanded > td,
html body .bl-mixes .bl-mixes-version-row.is-version-open > td,
html body .remix-grid-wrapper.bl-mixes .bl-mixes-row.has-versions.is-expanded > td,
html body .remix-grid-wrapper.bl-mixes .bl-mixes-version-row.is-version-open > td,
html body .bl-single-related.bl-mixes .bl-mixes-row.has-versions.is-expanded > td,
html body .bl-single-related.bl-mixes .bl-mixes-version-row.is-version-open > td,
html body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-row.has-versions.is-expanded > td,
html body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-version-row.is-version-open > td,
html body .bl-dj-catalog.dj-container #bl-dj-table .bl-mixes-row.has-versions.is-expanded > td,
html body .bl-dj-catalog.dj-container #bl-dj-table .bl-mixes-version-row.is-version-open > td,
html body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-row.has-versions.is-expanded:hover > td,
html body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-version-row.is-version-open:hover > td,
html body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-row.has-versions.is-expanded.now-playing > td,
html body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-version-row.is-version-open.now-playing > td,
html body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-row.has-versions.is-expanded.now-playing:hover > td,
html body .remix-grid-wrapper.bl-mixes .bl-mixes-row.has-versions.is-expanded.now-playing > td,
html body .remix-grid-wrapper.bl-mixes .bl-mixes-version-row.is-version-open.now-playing > td,
html body .remix-grid-wrapper.bl-mixes .bl-mixes-row.has-versions.is-expanded:hover > td,
html body .remix-grid-wrapper.bl-mixes .bl-mixes-version-row.is-version-open:hover > td {
	background: #2c2c2c !important;
	background-color: #2c2c2c !important;
	transition: background-color 0.22s ease;
}

/* DJ: pintar también el <tr> (grid móvil) para bloque continuo padre+versiones */
html body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-row.has-versions.is-expanded,
html body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-version-row.is-version-open,
html body .bl-dj-catalog.dj-container #bl-dj-table .bl-mixes-row.has-versions.is-expanded,
html body .bl-dj-catalog.dj-container #bl-dj-table .bl-mixes-version-row.is-version-open {
	background: #2c2c2c !important;
	background-color: #2c2c2c !important;
}

html[data-theme="light"] body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-row.has-versions.is-expanded,
html[data-theme="light"] body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-version-row.is-version-open,
html[data-theme="light"] body .bl-dj-catalog.dj-container #bl-dj-table .bl-mixes-row.has-versions.is-expanded,
html[data-theme="light"] body .bl-dj-catalog.dj-container #bl-dj-table .bl-mixes-version-row.is-version-open {
	background: #ebebed !important;
	background-color: #ebebed !important;
}

/* data-theme vive en <html> → html[data-theme="light"] (NO "[data-theme] html body") */
html[data-theme="light"] body .bl-mixes .bl-mixes-row.has-versions.is-expanded > td,
html[data-theme="light"] body .bl-mixes .bl-mixes-version-row.is-version-open > td,
html[data-theme="light"] body .remix-grid-wrapper.bl-mixes .bl-mixes-row.has-versions.is-expanded > td,
html[data-theme="light"] body .remix-grid-wrapper.bl-mixes .bl-mixes-version-row.is-version-open > td,
html[data-theme="light"] body .bl-single-related.bl-mixes .bl-mixes-row.has-versions.is-expanded > td,
html[data-theme="light"] body .bl-single-related.bl-mixes .bl-mixes-version-row.is-version-open > td,
html[data-theme="light"] body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-row.has-versions.is-expanded > td,
html[data-theme="light"] body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-version-row.is-version-open > td,
html[data-theme="light"] body .bl-dj-catalog.dj-container #bl-dj-table .bl-mixes-row.has-versions.is-expanded > td,
html[data-theme="light"] body .bl-dj-catalog.dj-container #bl-dj-table .bl-mixes-version-row.is-version-open > td,
html[data-theme="light"] body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-row.has-versions.is-expanded:hover > td,
html[data-theme="light"] body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-version-row.is-version-open:hover > td,
html[data-theme="light"] body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-row.has-versions.is-expanded.now-playing > td,
html[data-theme="light"] body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-version-row.is-version-open.now-playing > td,
html[data-theme="light"] body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-row.has-versions.is-expanded.now-playing:hover > td,
html[data-theme="light"] body .remix-grid-wrapper.bl-mixes .bl-mixes-row.has-versions.is-expanded.now-playing > td,
html[data-theme="light"] body .remix-grid-wrapper.bl-mixes .bl-mixes-version-row.is-version-open.now-playing > td,
html[data-theme="light"] body .remix-grid-wrapper.bl-mixes .bl-mixes-row.has-versions.is-expanded:hover > td,
html[data-theme="light"] body .remix-grid-wrapper.bl-mixes .bl-mixes-version-row.is-version-open:hover > td,
html[data-theme="light"] body .bl-dj-catalog.bl-mixes #bl-dj-table .bl-mixes-version-row.is-version-open.now-playing > td,
html[data-theme="light"] body .bl-dj-catalog.dj-container #bl-dj-table .bl-mixes-row.has-versions.is-expanded.now-playing > td,
html[data-theme="light"] body .bl-dj-catalog.dj-container #bl-dj-table .bl-mixes-version-row.is-version-open.now-playing > td {
	background: #ebebed !important;
	background-color: #ebebed !important;
}

.bl-mixes .bl-mixes-table tr.bl-mixes-version-row[hidden],
.bl-mixes .bl-mixes-table tr.bl-mixes-version-row.is-collapsed {
	display: none !important;
}

.bl-mixes .bl-mixes-table tr.bl-mixes-version-row.is-version-open > td {
	animation: bl-remix-version-in 0.26s ease both;
}

@keyframes bl-remix-version-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Play desnudo en subfilas */
html body .bl-mixes .bl-audio-version-play.bl-mixes-row__play,
html body .bl-mixes .bl-audio-version-play.bl-mixes-row__play:hover,
html body .bl-mixes .bl-audio-version-play.bl-mixes-row__play:focus,
html body .bl-mixes .bl-audio-version-play.bl-mixes-row__play:active {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 22px !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	padding: 0 !important;
	margin: 0 10px 0 0 !important;
	border: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
	cursor: pointer;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--bl-accent, #d90c0c) !important;
}

.bl-mixes .bl-audio-version-play .bl-mixes-row__art,
.bl-mixes .bl-audio-version-play .bl-mixes-row__shade {
	display: none !important;
}

.bl-mixes .bl-audio-version-play .bl-mixes-playback-bars {
	position: absolute !important;
	inset: 0 !important;
	z-index: 2;
	display: flex !important;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	color: var(--bl-accent, #d90c0c) !important;
	background: transparent !important;
}

.bl-mixes .bl-audio-version-play .bl-mixes-playback-bars__svg,
.bl-mixes .bl-audio-version-play .bl-mixes-glyph {
	position: absolute;
	width: 14px;
	height: 14px;
	opacity: 0;
	color: var(--bl-accent, #d90c0c) !important;
}

.bl-mixes .bl-audio-version-play .bl-mixes-glyph path,
.bl-mixes .bl-audio-version-play .bl-mixes-playback-bars__bar {
	fill: currentColor;
}

.bl-mixes .bl-audio-version-play .bl-mixes-glyph--play {
	opacity: 1;
}

.bl-mixes .bl-mixes-version-row.now-playing:not(.paused) .bl-audio-version-play .bl-mixes-glyph--play {
	opacity: 0;
}

.bl-mixes .bl-mixes-version-row.now-playing:not(.paused) .bl-audio-version-play .bl-mixes-playback-bars__svg {
	opacity: 1;
}

.bl-mixes .bl-mixes-version-row.now-playing.paused .bl-audio-version-play .bl-mixes-glyph--play {
	opacity: 0;
}

.bl-mixes .bl-mixes-version-row.now-playing.paused .bl-audio-version-play .bl-mixes-glyph--pause {
	opacity: 1;
}

.bl-mixes .bl-mixes-row__version-mobile-hint,
.bl-mixes .bl-mixes-row__version-mobile {
	display: none;
}

@media (max-width: 768px) {
	.bl-mixes .bl-mixes-row__version-mobile-hint {
		display: flex;
		align-items: center;
		gap: 4px;
		margin-top: 2px;
		font-size: 12px;
		font-weight: 500;
		line-height: 1.25;
		color: var(--bl-mixes-secondary, rgba(255, 255, 255, 0.55));
	}

	.bl-mixes .bl-mixes-version-row .bl-mixes-row__title-line,
	.bl-mixes .bl-mixes-version-row .bl-mixes-row__title,
	.bl-mixes .bl-mixes-version-row .bl-mixes-row__artist {
		display: none !important;
	}

	.bl-mixes .bl-mixes-version-row .bl-mixes-row__version-mobile {
		display: block !important;
		margin: 0;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.25;
		color: var(--bl-accent, #d90c0c) !important;
	}
}

/* —— DJ: chevron ABSOLUTO a la izq. del nº (el número no se mueve) —— */
.bl-dj-catalog .bl-dj-index-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	min-width: 22px;
	vertical-align: middle;
}

.bl-dj-catalog .bl-mixes-col--index,
.bl-dj-catalog #bl-dj-table thead th.bl-mixes-col--index,
.bl-dj-catalog #bl-dj-table tbody td.bl-mixes-col--index {
	overflow: visible !important;
}

.bl-dj-catalog .bl-mixes-row__expand--dj {
	position: absolute;
	right: calc(100% + 2px);
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 22px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--bl-accent, #d90c0c);
	cursor: pointer;
	opacity: 0;
	transform: translateY(-50%) scale(0.92);
	pointer-events: none;
	transition: opacity 0.16s ease, transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.bl-dj-catalog .bl-mixes-row__expand--dj .bl-mixes-row__expand-icon {
	width: 13px;
	height: 13px;
	display: block;
	transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@media (hover: hover) {
	.bl-dj-catalog .bl-mixes-row.has-versions:not(.is-expanded):hover .bl-mixes-row__expand--dj,
	.bl-dj-catalog .bl-mixes-row.has-versions:not(.is-expanded) .bl-mixes-row__expand--dj:focus-visible {
		opacity: 1;
		transform: translateY(-50%) scale(1);
		pointer-events: auto;
	}
}

@media (hover: none) {
	.bl-dj-catalog .bl-mixes-row.has-versions:not(.is-expanded) .bl-mixes-row__expand--dj {
		opacity: 1;
		transform: translateY(-50%) scale(1);
		pointer-events: auto;
	}
}

.bl-dj-catalog .bl-mixes-row.has-versions.is-expanded .bl-mixes-row__expand--dj {
	opacity: 1;
	transform: translateY(-50%) scale(1);
	pointer-events: auto;
}

.bl-dj-catalog .bl-mixes-row.has-versions.is-expanded .bl-mixes-row__expand--dj .bl-mixes-row__expand-icon {
	transform: rotate(90deg);
}

/* Móvil DJ: chevron absoluto a la izq. del nº (el play/nº no se mueve) */
@media (max-width: 768px) {
	.bl-dj-catalog #bl-dj-table tbody tr.bl-mixes-row:not(.bl-mixes-version-row) > td.bl-mixes-col--index,
	.bl-dj-catalog #bl-dj-table tbody tr.bl-mixes-row:not(.bl-mixes-version-row) > td:nth-child(1),
	.bl-dj-catalog #bl-dj-table tbody tr.bl-mixes-version-row.is-version-open > td.bl-mixes-col--index,
	.bl-dj-catalog #bl-dj-table tbody tr.bl-mixes-version-row.is-version-open > td:nth-child(1) {
		width: 28px !important;
		min-width: 28px !important;
		justify-content: center !important;
		overflow: visible !important;
		position: relative !important;
	}

	.bl-dj-catalog .bl-dj-index-wrap,
	.bl-dj-catalog .bl-dj-index-wrap.has-versions-expand {
		position: relative !important;
		width: 22px !important;
		min-width: 22px !important;
		height: 22px !important;
	}

	.bl-dj-catalog .bl-mixes-row__expand--dj,
	.bl-dj-catalog .bl-mixes-row.has-versions:not(.is-expanded) .bl-mixes-row__expand--dj,
	.bl-dj-catalog .bl-mixes-row.has-versions.is-expanded .bl-mixes-row__expand--dj {
		position: absolute !important;
		right: calc(100% + 1px) !important;
		top: 50% !important;
		left: auto !important;
		margin: 0 !important;
		transform: translateY(-50%) !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		width: 14px !important;
		height: 22px !important;
		flex-shrink: 0 !important;
		z-index: 2;
	}

	.bl-dj-catalog .bl-mixes-row.has-versions.is-expanded .bl-mixes-row__expand--dj .bl-mixes-row__expand-icon {
		transform: rotate(90deg);
	}

	.bl-dj-catalog .bl-mixes-version-row .bl-dj-index-wrap {
		margin: 0 auto !important;
	}

	.bl-dj-catalog #bl-dj-table.bl-mixes-table tbody tr.bl-mixes-version-row[hidden],
	.bl-dj-catalog #bl-dj-table.bl-mixes-table tbody tr.bl-mixes-version-row.is-collapsed,
	.bl-dj-catalog.bl-mixes #bl-dj-table tbody tr.bl-mixes-version-row[hidden],
	.bl-dj-catalog.bl-mixes #bl-dj-table tbody tr.bl-mixes-version-row.is-collapsed {
		display: none !important;
	}
}

/* Play de subversión = misma caja 22px que el nº→play del padre */
.bl-dj-catalog .bl-mixes-version-row .bl-dj-version-play.bl-mixes-row__play,
.bl-dj-catalog .bl-mixes-version-row .bl-dj-version-play.bl-mixes-row__play:hover,
.bl-dj-catalog .bl-mixes-version-row .bl-dj-version-play.bl-mixes-row__play:focus,
.bl-dj-catalog .bl-mixes-version-row .bl-dj-version-play.bl-mixes-row__play:active {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 22px !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--bl-accent, #d90c0c) !important;
	cursor: pointer;
}

.bl-dj-catalog .bl-mixes-version-row .bl-dj-version-play .bl-mixes-playback-bars {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	color: var(--bl-accent, #d90c0c) !important;
	background: transparent !important;
}

.bl-dj-catalog .bl-mixes-version-row .bl-dj-version-play .bl-mixes-playback-bars__svg,
.bl-dj-catalog .bl-mixes-version-row .bl-dj-version-play .bl-mixes-glyph {
	position: absolute;
	width: 14px;
	height: 14px;
	opacity: 0;
	color: var(--bl-accent, #d90c0c) !important;
}

.bl-dj-catalog .bl-mixes-version-row .bl-dj-version-play .bl-mixes-glyph--play {
	opacity: 1;
}

.bl-dj-catalog .bl-mixes-version-row.now-playing:not(.paused) .bl-dj-version-play .bl-mixes-glyph--play {
	opacity: 0;
}

.bl-dj-catalog .bl-mixes-version-row.now-playing:not(.paused) .bl-dj-version-play .bl-mixes-playback-bars__svg {
	opacity: 1;
}

.bl-dj-catalog .bl-mixes-version-row.now-playing.paused .bl-dj-version-play .bl-mixes-glyph--play {
	opacity: 0;
}

.bl-dj-catalog .bl-mixes-version-row.now-playing.paused .bl-dj-version-play .bl-mixes-glyph--pause {
	opacity: 1;
}