/* Estilos para el menú lateral */
@media (max-width: 991.98px) {
	#mainNav {
		position: fixed;
		top: 0;
		right: -300px;
		width: 300px;
		height: 100vh;
		background: white;
		z-index: 1050;
		transition: all 0.3s ease-in-out;
		padding: 20px;
		box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
		overflow-y: auto;
	}

	#mainNav.show {
		right: 0;
	}

	.navbar-collapse {
		display: block !important;
		height: 100% !important;
	}

	.navbar-nav {
		margin-top: 60px;
	}

	.navbar-nav .nav-item {
		margin: 10px 0;
	}

	.navbar-nav .nav-link {
		font-size: 18px;
		padding: 10px 0;
	}

	/* Overlay para cuando el menú está abierto */
	.menu-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1040;
	}

	.menu-overlay.show {
		display: block;
	}

	/* Botón de cierre */
	.menu-close {
		position: absolute;
		top: 20px;
		right: 20px;
		font-size: 24px;
		background: none;
		border: none;
		color: #333;
		cursor: pointer;
	}

	/* Ajuste del botón toggle */
	.navbar-toggler {
		z-index: 1060;
	}
}