/* Spotify Player Pro v10 - Estilos con Scrollbar Fina Oscura */
.elementor-widget-sp_spotify_embed_pro { width: 100% !important; }

.sp-pro-wrapper {
	position: relative;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.sp-pro-overlay {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	z-index: 1; pointer-events: none;
}

.sp-pro-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
}

.sp-actions-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}

.sp-btn-subscribe {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: #1DB954;
	color: #ffffff !important;
	font-size: 13px;
	font-weight: 700;
	padding: 8px 18px;
	border-radius: 50px;
	text-decoration: none !important;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.sp-btn-subscribe:hover { background-color: #1ed760; transform: scale(1.03); }

.sp-share-group { display: flex; align-items: center; gap: 8px; }
.sp-share-title { font-size: 12px; font-weight: 600; color: #ffffff; opacity: 0.9; }

.sp-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff !important;
	font-size: 14px;
	text-decoration: none !important;
	backdrop-filter: blur(5px);
	transition: background 0.2s ease, transform 0.2s ease;
}

.sp-share-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.3); }
.sp-share-btn.wa:hover { background: #25D366; }
.sp-share-btn.fb:hover { background: #1877F2; }
.sp-share-btn.mail:hover { background: #EA4335; }

.sp-main-grid { display: flex; width: 100%; gap: 20px; }
.sp-main-grid.layout-split_right { flex-direction: row; }
.sp-main-grid.layout-split_left { flex-direction: row-reverse; }
.sp-main-grid.layout-single, .sp-main-grid.layout-buttons { flex-direction: column; }

.sp-iframe-holder {
	flex: 1; width: 100%; border-radius: 12px; overflow: hidden;
}

.sp-iframe-holder iframe {
	display: block; width: 100% !important; height: 100% !important; border: none;
}

.sp-episodes-panel {
	width: 320px; flex-shrink: 0;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px; padding: 15px;
	display: flex; flex-direction: column;
	backdrop-filter: blur(8px);
}

.sp-panel-title {
	margin: 0 0 12px 0; font-size: 13px; font-weight: 700; color: #fff;
	text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 8px;
}

/* Custom Scrollbar Fina e Integrada */
.sp-episodes-list {
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-right: 6px;
}

.sp-episodes-list::-webkit-scrollbar {
	width: 5px;
}

.sp-episodes-list::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
}

.sp-episodes-list::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.25);
	border-radius: 10px;
}

.sp-episodes-list::-webkit-scrollbar-thumb:hover {
	background: #1DB954;
}

.sp-ep-item {
	display: flex; align-items: center; gap: 10px; padding: 10px 12px;
	background: rgba(255, 255, 255, 0.06); border-radius: 8px; cursor: pointer;
	border-left: 3px solid transparent; transition: all 0.2s ease;
}

.sp-ep-item:hover { background: rgba(255, 255, 255, 0.15); }
.sp-ep-item.active { background: rgba(29, 185, 84, 0.2); border-left-color: #1DB954; }

.sp-ep-icon { color: #1DB954; font-size: 14px; }
.sp-ep-info { display: flex; flex-direction: column; overflow: hidden; }
.sp-ep-title { font-size: 12px; font-weight: 600; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-ep-date { font-size: 10px; color: #aaa; margin-top: 2px; }

/* Botones de Navegación */
.sp-nav-bar {
	display: flex; align-items: center; justify-content: space-between; padding-top: 10px; width: 100%;
}

.sp-nav-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background-color: #1DB954; color: #ffffff !important; border: none;
	padding: 10px 22px; border-radius: 50px; font-size: 13px; font-weight: 700;
	cursor: pointer; box-shadow: 0 4px 12px rgba(29, 185, 84, 0.3); transition: all 0.2s ease;
}

.sp-nav-btn:hover { background-color: #1ed760; transform: translateY(-2px); }
.sp-nav-info { font-size: 13px; font-weight: 600; color: #ffffff; }

@media (max-width: 768px) {
	.sp-main-grid { flex-direction: column !important; }
	.sp-episodes-panel { width: 100%; }
}