/* Barra personalizada */
.custom-navbar {
  border-bottom: 1px solid #02558b;
  /* color de la barrita (cámbialo al gusto) */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  /* sombra leve inferior */
}

.navbar-toggler-icon {
  background-image: url("../files/images/hamburger.svg");
  /* ruta a tu archivo */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Links */
.navbar .nav-link {
  color: #02558b;
  font-weight: 400;
  transition: color 0.2s ease;
  padding-left: 15px;
  font-size: 1rem;
  font-family: 'Archivo', sans-serif;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #02558b;
}

/* Botones de idioma */
.lang-btn {
  padding: .2rem .6rem;
  font-size: .8rem;
  font-weight: 600;
  color: #02558b;
  border: 1px solid #02558b;
  border-radius: .4rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.lang-btn:hover {
  background: #c7e2fc;
}

.lang-btn.active {
  background: #02558b;
  color: #fff;
}

:root {
  --navbar-accent: #0b74d0;
}

#nav>nav.custom-navbar {
  position: fixed;
  /* fija arriba SIEMPRE */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  /* por encima del contenido */
  /*border-bottom: 1px solid var(--navbar-accent);*/
  box-shadow: 0 2px 4px rgba(2, 85, 139, .08);
  background: #fff;
  /* asegura fondo blanco */
}

.navbar-toggler:hover {
  background: #c7e2fc;
}

.navbar-toggler:focus {
  outline: none;
  /* saca el borde azul por defecto */
  box-shadow: 0 0 0 0.1rem #02558b;
  /* tu color personalizado */
  border-color: #02558b;
  /* cambia también el borde */
}

/* Ajustar el botón */
.navbar-toggler {
  padding: 0.5rem;
  /* espacio interno */
  font-size: 1rem;
  /* escala del ícono */
  line-height: 1;
  width: 40px;
  /* ancho fijo */
  height: 40px;
  /* alto fijo */
  border: 1px solid #02558b;
}

/* Ajustar el ícono dentro */
.navbar-toggler-icon {
  width: 100%;
  height: 100%;
  background-size: 80% 80%;
  /* qué tan grandes se ven las rayitas dentro */
}

/* Fondo SOLO del menú desplegado */
.custom-navbar .navbar-collapse {
  background: rgba(2, 85, 139, 0.1);
  backdrop-filter: blur(6px);
  /* opcional */
  border-radius: .5rem;
  padding: .5rem 0;
}

.custom-navbar .container {
  position: relative;
}

/* Collapse más chico tipo dropdown */
.custom-navbar .navbar-collapse {
  position: absolute;
  top: 100%;
  /* justo debajo de la navbar */
  left: 0.5rem;
  /* un poco separado del borde izquierdo */
  width: 220px;
  /* ancho fijo del panel */
  border-radius: .5rem;
  padding: .5rem 0;
}

/* que no expanda a todo el ancho */
.custom-navbar .navbar-collapse.show {
  display: block;
}

@media (max-width: 992px) {
  .custom-navbar .navbar-collapse {
    width: 150px !important;
}


  .custom-navbar .navbar-collapse.show {
  display: block;
  width: 150px !important;
}

}