/* === MEJORA DE MENÚ Y ALINEACIÓN (UX/UI) === */
/* Fijar el logo y el menú al mismo nivel en pantallas grandes */
@media (min-width: 992px) {
.main__header .container nav.navbar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.navbar-header {
float: none !important;
flex: 0 0 auto;
}
.navbar-collapse {
float: none !important;
flex: 1 1 auto;
padding-top: 0 !important;
}
nav .collapse { display: block !important; }
.navbar-nav {
display: flex !important;
flex-wrap: wrap;
justify-content: flex-end; /* Alinear a la derecha */
width: 100%;
margin: 0 !important;
}
/* Controlar ancho en pantallas grandes para que el logo no empuje el menu */
.navbar-nav > li {
float: none !important;
}
}
/* Rediseño visual del Header y Fondo Agradable */
.main__header {
background: rgba(255, 255, 255, 0.95) !important; /* Blanco translúcido tipo cristal */
backdrop-filter: blur(10px); /* Efecto Glassmorphism */
box-shadow: 0 4px 20px rgba(17, 115, 188, 0.08) !important; /* Sombra sutil colorizada */
border-bottom: 1px solid rgba(17, 115, 188, 0.1);
padding: 10px 0 !important; /* Más elegante */
transition: all 0.3s ease;
}
/* Imagen del logo */
.navbar-header img {
height: 60px; /* Tamaño consistente con el menú en la misma fila */
width: auto;
transition: transform 0.3s ease;
object-fit: contain;
}
.navbar-header img:hover {
transform: scale(1.02);
}
/* Botones del menú con diseño Pill (Píldora) y espaciado corregido */
.navbar-default .navbar-nav>li>a {
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.5px;
padding: 10px 14px !important; /* Espaciado compacto pero cómodo */
margin: 0 3px !important;
color: #454545 !important;
border-radius: 20px !important; /* Bordes suaves */
border-bottom: none !important;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
/* Hover interactivo y estado activo */
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li.active>a {
background: #1173bc !important; /* Azul grenewic */
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(17, 115, 188, 0.3) !important; /* Sombra en el boton activo */
transform: translateY(-2px); /* Efecto de elevación */
}
/* Menú Desplegable (Dropdown) */
ul.dropdown-menu {
border-radius: 12px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
border: 1px solid rgba(17, 115, 188, 0.1) !important;
padding: 10px !important;
margin-top: 10px !important;
background: #ffffff !important;
}
ul.dropdown-menu>li>a {
border-radius: 8px;
margin-bottom: 4px;
font-size: 14px;
color: #555;
padding: 8px 16px;
transition: background 0.2s ease, padding-left 0.2s ease;
}
ul.dropdown-menu>li>a:hover {
background: #f0f7fc !important;
color: #1173bc !important;
padding-left: 20px; /* Animación de desplazamiento suave a la derecha al hacer hover */
}