html, body {
	background-color: #0d4d9b; /* Fondo oscuro */
	color: #fdf5d5; /* Color de texto personalizado */
	filter: none !important;
	opacity: 1 !important;
	font-family: 'Nunito', sans-serif;
}



.album-cover {
	width: 100%;
	max-width: 400px; /* Ajusta según la lista */
	display: block;
	margin-bottom: 10px;
	border-radius: 8px;
}

.titulo {
	text-align: center;
	width: 100%;
	margin: 10px 0; /* Espaciado superior e inferior */
}

.container {
	max-width: 900px; /* Ajusta el ancho según lo necesites */
	display: flex;
	flex-direction: column;
	align-items: center; /* Centra horizontalmente */
	justify-content: center; /* Centra verticalmente si es necesario */
	text-align: center; /* Centra el texto */
	min-height: 100vh; /* Ocupar toda la altura de la pantalla */
	margin-top: 5px;
	width: 100%;
}

.audio-container {
	display: flex;
	flex-direction: column;
	align-items: center; /* Centrar imagen y nombre */
	justify-content: center;
	text-align: center;
	gap: 10px; /* Espaciado entre imagen y texto */
}

.audio-image {
	width: 250px;
	height: 250px;
	object-fit: cover;
	margin-right: 30px;
}

.audio-controls {
	margin-top: 20px;
	margin-bottom: 20px; /* Añadir espacio debajo de los botones */
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px; /* Espacio entre los botones */
}

/* Botón de play verde */
.btn-play-list {
	background-color: #000000 !important; /* Negro */
	color: white;
	border-radius: 50%;
	padding: 10px 14px;
	font-size: 16px;
	border: none;
	transition: background-color 0.3s ease;
}

	.btn-play-list:hover {
		background-color: #5a6268; /* Gris oscuro al pasar el mouse */
	}

/* Cambiar a gris más oscuro cuando se usa el mismo color para el botón */
.btn-play-list-dark {
	background-color: #000000; /* Gris más oscuro */
}

	.btn-play-list-dark:hover {
		background-color: #5a6268; /* Gris aún más oscuro al pasar el mouse */
	}

/* Estilo para la lista de canciones */
/* Contenedor de la lista */
.song-list {
	width: 100%;
	max-width: 400px;
	background-color: #0d4d9b; /* Mismo color que la página */
	color: white;
	padding: 5px;
	margin-top: 20px; /* Espaciado para centrar mejor */
	border-radius: 8px;
	max-height: 200px; /* Altura máxima antes de que aparezca el scroll */
	overflow-y: auto; /* Agrega la barra de desplazamiento vertical si es necesario */
}

	/* Elementos de la lista */
	.song-list li {
		padding: 4px 8px; /* Reducido */
		border-bottom: 1px solid #333; /* Línea separadora sutil */
		transition: background 0.3s; /* Efecto suave al pasar el mouse */
		cursor: pointer; /* Indicar que se puede hacer clic */
		display: flex; /* Mantener alineación */
		align-items: center; /* Centrar verticalmente */
		gap: 5px; /* Menos espacio entre icono y texto */
		color: white; /* Color del texto */
		font-size: 14px; /* Opcional: reducir el tamaño de la fuente */
	}

		/* Último elemento sin borde */
		.song-list li:last-child {
			border-bottom: none;
		}

		/* Efecto hover */
		.song-list li:hover {
			background: #000000; /* Un gris oscuro al pasar el mouse */
		}

		/* Canción activa */
		.song-list li.active {
			background: #000000; /* Azul para resaltar la canción activa */
			color: white;
			font-weight: bold;
			border-radius: 6px;
		}

		.song-list li:hover {
			background-color: #000000;
			transform: scale(1.02); /* Efecto ligero de zoom */
		}

	/* Personalizar la barra de desplazamiento en WebKit (Chrome, Edge, Safari) */
	.song-list::-webkit-scrollbar {
		width: 8px; /* Grosor del scroll */
	}

	.song-list::-webkit-scrollbar-track {
		background: rgba(255, 255, 255, 0.1); /* Color del fondo del track */
		border-radius: 10px;
	}

	.song-list::-webkit-scrollbar-thumb {
		background: #ffffff; /* Color del scroll */
		border-radius: 10px;
	}

		.song-list::-webkit-scrollbar-thumb:hover {
			background: #ffffff; /* Color más oscuro cuando pasas el mouse */
		}

/* Botón de play/pause */
.btn-play-pause,
.btn-control {
	background-color: #000000;
	color: white;
	border-radius: 50%;
	padding: 8px 12px; /* Tamaño reducido */
	font-size: 14px; /* Ícono más pequeño */
	border: none;
	transition: background-color 0.3s ease;
}

.btn-control {
	background-color: #000000; /* Mantiene el color original */
}

.btn-play-pause:hover {
	background-color: #000000;
}

.btn-control:hover {
	background-color: #000000;
}

/* Estilo de la barra de progreso */
.progress-bar {
	width: 100%;
	height: 10px;
	border-radius: 10px; /* Esquinas redondeadas */
	background: #333; /* Fondo gris oscuro */
	overflow: hidden; /* Asegura que no se salgan los bordes */
	box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2); /* Sombra sutil */
}

	.progress-bar::-webkit-progress-value {
		background: linear-gradient(90deg, #ffffff, #f0f0f0); /* Degradado a blanco */
		border-radius: 10px;
		transition: width 0.2s ease; /* Transición suave */
	}

	.progress-bar::-moz-progress-bar {
		background: linear-gradient(90deg, #ffffff, #f0f0f0); /* Degradado a blanco */
		border-radius: 10px;
		transition: width 0.2s ease;
	}

	.progress-bar::-webkit-progress-bar {
		background: #333; /* Fondo gris para WebKit */
	}

	.progress-bar::-moz-progress-bar {
		background: #333; /* Fondo gris para Firefox */
	}


/* Ocultar controles estándar del audio */
audio {
	display: none;
}

.song-play-btn {
	background-color: #000; /* Negro */
	color: white;
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
}

	.song-play-btn i {
		font-size: 14px;
	}

	.song-play-btn:hover {
		background-color: #000000; /* Negro más claro al pasar el mouse */
	}

.song-play-btn-playing {
	background-color: #000000 !important; /* Verde cuando la canción está sonando */
}

.cancion-container {
	display: flex;
	flex-direction: column;
	align-items: center; /* Centra horizontalmente */
	justify-content: center; /* Centra verticalmente si es necesario */
	text-align: center;
	width: 100%; /* Ocupar todo el ancho disponible */
}

#nombreCancion {
	font-size: 20px;
	width: auto; /* Que se ajuste al contenido */
	max-width: 400px; /* Igual que la lista */
	word-wrap: break-word;
	overflow-wrap: break-word;
	text-align: center;
	font-weight: bold;
	margin-top: 10px;
}

.modal-content {
	background-color: #2c3e50;
	color: white;
}

.list-group-item {
	transition: background 0.3s ease-in-out;
}

	.list-group-item:hover {
		background-color: #34495e;
	}

.song-play-btn {
	border: none;
	background: none;
	color: white;
	font-size: 1.2rem;
	transition: transform 0.2s;
}

	.song-play-btn:hover {
		transform: scale(1.1);
	}

.active-song {
	font-weight: bold;
	color: #f39c12;
}

.fixed-buttons {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: black; /* Fondo negro para que se vea bien */
	padding: 10px 0;
	display: flex;
	justify-content: center; /* Centrar los botones */
	gap: 20px; /* Espaciado entre botones */
	z-index: 1000; /* Asegurar que estén encima del resto */
}

	.fixed-buttons button {
		background-color: #333; /* Color oscuro para los botones */
		color: white;
		border: none;
		padding: 10px 15px;
		border-radius: 5px;
		font-size: 16px;
		cursor: pointer;
		transition: background 0.3s;
	}

		.fixed-buttons button:hover {
			background-color: #555; /* Efecto al pasar el mouse */
		}

.info-container {
	display: flex;
	align-items: center; /* Alinea verticalmente */
	gap: 10px; /* Espacio entre elementos */
}

h3, .time-display {
	color: white; /* Color del texto */
	margin: 0; /* Elimina márgenes predeterminados */
}

	h3#nombreCancion {
		margin-top: 10px; /* Reduce el margen superior */
	}

.floating-buttons {
	position: absolute;
	right: 20px; /* Ajusta según necesites */
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

	.floating-buttons .btn {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
		transition: all 0.3s ease-in-out;
	}

		.floating-buttons .btn:hover {
			background-color: rgba(255, 255, 255, 0.9);
			color: black;
		}


	.floating-buttons button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
	}

#nombreBanda, #nombreCancion {
	text-align: center;
}

.audio-image {
	border: 5px solid white; /* Borde blanco */
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Sombra para resaltar */
	border-radius: 5px; /* Bordes redondeados opcionales */
	width: 250px;
	height: 250px;
	object-fit: cover;
	display: block; /* Elimina posibles márgenes de línea */
	margin: 0 auto; /* Centra la imagen horizontalmente */
}

.floating-buttons span {
	font-size: 12px; /* Reduce el tamaño del texto */
	text-align: center;
	color: #FFFFFF;
}

#audioProgress {
	width: 100%;
	max-width: 600px; /* Ajusta este valor según sea necesario */
	display: block;
	margin: 10px auto;
}