/* Layout Principal */
	@media (min-width: 1024px) {
		.main-content-layout {
			display: grid;
			/* Cambiamos 300px por un ancho mayor (ej. 380px) para la sidebar */
			grid-template-columns: 1fr 320px; 
			gap: 5px; /* Espacio reducido entre reproductor y sidebar */
			align-items: start;
			margin-bottom: 5px; /* Minimiza espacio marcado en azul (10px) */
			
		}

		.sidebar-desktop {
			text-align:center;
			display: flex;
			flex-direction: column;
			/* Altura máxima basada en el reproductor o la ventana */
			max-height: 100%; 
			/* ACTIVAR SCROLL VERTICAL AUTOMÁTICO */
			overflow-y: auto; 
			padding-right: 10px; /* Espacio para que el scroll no tape el contenido */
			position: sticky;
			top: 80px;
			padding-top: 100;
		}

		/* Estilo del Scrollbar para que combine con XelWap */
		.sidebar-desktop::-webkit-scrollbar {
			width: 6px;
		}
		.sidebar-desktop::-webkit-scrollbar-thumb {
			background: var(--accent);
			border-radius: 10px;
		}
		
		/* Estilo de las mini-cards de la sidebar */
		.sidebar-card {
			display: flex;
			align-items: center;
			gap: 5px;
			background: var(--bg-card);
			padding: 5px;
			border-radius: 8px;
			margin-bottom: 12px;
			text-decoration: none;
			border: 1px solid rgba(0, 255, 221, 0.05);
			transition: 0.3s;
			height:40px;
		}

		.sidebar-card:hover {
			border-color: var(--accent);
			transform: translateX(5px);
		}

		.sidebar-card img {
			width: 60px;
			height: 45px;
			object-fit: cover;
			border-radius: 4px;
		}

		.sidebar-card span {
			font-size: 0.9rem;
			color: #fff;
		}

	}

/* Ocultar en móviles por defecto si prefieres que solo se vea la lista abajo */
@media (max-width: 679px) {
    .sidebar-desktop {
		text-align:center;
        margin-top: 40px;
		
    }
    .sidebar-grid {
        
		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
		gap:16px;

    }
	
		/* Estilo de las mini-cards de la sidebar */
	.sidebar-card {
		display: flex;
		align-items: center;
		gap: 5px;
		background: var(--bg-card);
		padding: 10px;
		border-radius: 8px;
		margin-bottom: 2px;
		text-decoration: none;
		border: 1px solid rgba(0, 255, 221, 0.05);
		transition: 0.3s;
		height:30px;
	}

	.sidebar-card:hover {
		border-color: var(--accent);
		transform: translateX(5px);
	}

	.sidebar-card img {
		width: 60px;
		height: 45px;
		object-fit: cover;
		border-radius: 4px;
	}

	.sidebar-card span {
		font-size: 0.9rem;
		color: #fff;
	}

}


/* *********************** */	
	/* Reducción de espacios globales */
	.player-container {
		margin-bottom: 10px; /* Ajuste azul para minimizar espacio inferior */
		padding: 0; /* Asegúrate de que no haya padding interno que genere blanco */
	}

	.section {
		margin-bottom: 5px; /* Compacta las secciones verticales */
	}