#nav-main
{
	padding: 0.4rem 1rem;
}
/* Navbar Container */
#bootscore-navbar
{
	display: flex;
	align-items: center;
	transition: all 0.3s ease;
}
/* Header con mayor especificidad para sobrescribir Bootstrap */
header#masthead,
header#masthead.site-header,
header#masthead.bg-body-tertiary,
#masthead,
#masthead.site-header,
#masthead.bg-body-tertiary
{
	background-color: #00193a !important;
}
.navbar-brand img	
{
	max-width: 70px;
}
/* Nav Items */
#bootscore-navbar .nav-item
{
	margin: 0;
	padding: 0;
}

#bootscore-navbar .nav-item:hover
{
	transform: none;
}

/* Nav Links - Colores ajustados para fondo azul oscuro con acentos dorados */
#bootscore-navbar .nav-link
{
	padding: 0.75rem 1.25rem;
	color: #e0e0e0;
	font-weight: 500;
	text-decoration: none;
	border-radius: 8px;
	transition: all 0.3s ease;
	background: transparent;
	display: inline-block;
	margin: 0;
	border: none;
}

/* Nav Link Hover State - Color dorado suave */
#bootscore-navbar .nav-link:hover
{
	color: #ffffff;
	background-color: rgba(221, 181, 98, 0.15);
}

/* Active Nav Link - Fondo dorado destacado */
#bootscore-navbar .nav-link.active
{
	color: #00193a;
	background-color: #ddb562;
	font-weight: 700;
}

/* Active Nav Link Hover */
#bootscore-navbar .nav-link.active:hover
{
	background-color: #d4ac5a;
	color: #00193a;
}
#bootscore-navbar .nav-item
{
	margin: 0;
}
/* Responsive Gap Spacing */
@media (min-width: 1200px)
{
	#bootscore-navbar
	{
		gap: 1.2rem;
	}

	#bootscore-navbar .nav-link
	{
		padding: 0.875rem 1.5rem;
		font-size: 1rem;
	}
}

@media (max-width: 1199px)
{
	#bootscore-navbar .nav-link
	{
		padding: 0.625rem 1rem;
		font-size: 0.95rem;
	}
}

/* Mobile Responsive */
@media (max-width: 768px)
{
	#bootscore-navbar
	{
		flex-direction: column;
		gap: 0.5rem;
		align-items: stretch;
	}

	#bootscore-navbar .nav-item
	{
		margin: 0;
		width: 100%;
	}

	#bootscore-navbar .nav-link
	{
		display: block;
		width: 100%;
		text-align: center;
		padding: 0.75rem 1rem;
		border-radius: 6px;
	}

	#bootscore-navbar .nav-item:hover
	{
		transform: none;
	}

	#bootscore-navbar .nav-link:hover
	{
		transform: none;
	}
}

/* Smooth Scroll Behavior */
html
{
	scroll-behavior: smooth;
}

/* Focus States for Accessibility - Con acento dorado */
#bootscore-navbar .nav-link:focus
{
	outline: 2px solid #ddb562;
	outline-offset: 2px;
}

/* Navbar Brand - Ajustar color si es texto */
.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus
{
	color: #ffffff;
}

/* Botones en el header - Ajustar colores con acento dorado */
#masthead .btn-outline-secondary
{
	color: #e0e0e0;
	border-color: #4a5568;
	background-color: transparent;
}

#masthead .btn-outline-secondary:hover
{
	color: #ddb562;
	border-color: #ddb562;
	background-color: rgba(221, 181, 98, 0.1);
}

/* Botón activo con estilo dorado */
#masthead .btn-outline-secondary.active,
#masthead .btn-outline-secondary:active
{
	color: #00193a;
	background-color: #ddb562;
	border-color: #ddb562;
}

/* Texto general en el header */
#masthead,
#masthead .navbar,
#masthead .navbar-nav
{
	color: #e0e0e0;
}

/* Ajustar iconos y otros elementos del header con acento dorado */
#masthead i,
#masthead .fa,
#masthead svg
{
	color: #e0e0e0;
}

#masthead i:hover,
#masthead .fa:hover
{
	color: #ddb562;
}

/* Items del dropdown/offcanvas con estilo dorado */
#masthead .dropdown-menu .dropdown-item:hover,
#masthead .dropdown-menu .dropdown-item.active
{
	background-color: rgba(221, 181, 98, 0.15);
	color: #ddb562;
}

#masthead .dropdown-menu .dropdown-item.active
{
	background-color: #ddb562;
	color: #00193a;
	font-weight: 600;
}