/* Aplicar degradado al navbar con fondo blanco */
.navbar-bg {
  height: var(--navbar-height);
  background-color: white !important;  /* Capa blanca base para bloquear el fondo gris de .main */
  background-image: var(--gradient-navbar) !important;  /* Gradiente encima */
}

/* Botón hamburguesa */
#btn-hamburguesa {
  width: 28px;
  height: auto;
}

/* Barra de búsqueda */
.input-group-navbar {
  width: 285px;
  height: 35px;
}

.input-group-navbar .form-control {
  font-size: var(--font-size-body);
  color: var(--corporate-black);
}

.input-group-navbar .form-control::placeholder {
  font-style: italic;
  font-size: var(--font-size-body);
}

#btn-search {
  width: 50px;
}

/* Iconos del navbar */
.navbar .nav-icon {
  margin: 0 11.5px;
}

.navbar .nav-icon img {
  width: var(--icon-size-small);
  height: var(--icon-size-small);
}

/* Avatar */
#avatar {
  width: 30px;
  height: 30px;
  border-radius: 15px;
}

/* Dropdowns del navbar */
.nav-link.dropdown-toggle {
  font-size: var(--font-size-body);
}

/* Eliminar flecha predeterminada */
.dropdown-toggle:after {
  display: none !important;
}

/* Flecha SVG personalizada */
.dropdown-toggle {
  position: relative;
  padding-right: 1.5rem !important;
}

.dropdown-toggle::before {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background-image: url("../../iconos/flecha-icon.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.2s;
}

/* Indicador de notificaciones */
.navbar .indicator {
  background: var(--corporate-light-blue);
  height: 20px;
  width: 20px;
  color: var(--corporate-black);
  font-size: var(--font-size-small);
  font-weight: bold;
}