.vg3d-avatar-img { display:block; width:28px; height:28px; border-radius:50%; object-fit:cover; }

.nameUser{
  color: #007BEA;
  margin-right: 30px;
}
/* Cabecera translúcida con blur */
.vg3d-navbar {
  /* Fondo semitransparente para que funcione backdrop-filter */
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  transition: background-color 200ms ease, box-shadow 200ms ease, backdrop-filter 200ms ease;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Estado scrolled: más opaco y con sombra */
.vg3d-navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
}

/* En tema oscuro (si habilitas .dark en body, por ejemplo) */
body.dark .vg3d-navbar {
  background-color: rgba(18, 18, 18, 0.5);
  border-bottom-color: rgba(255,255,255,0.08);
}

body.dark .vg3d-navbar.scrolled {
  background-color: rgba(18, 18, 18, 0.85);
}

/* Ajustes menores de la navbar */
/* Forzar colores legibles en la navbar translúcida */
.vg3d-navbar .navbar-brand,
.vg3d-navbar .nav-link {
  color: #111 !important;
}

.vg3d-navbar .nav-link:hover,
.vg3d-navbar .nav-link:focus {
  color: #0d6efd !important;
}

.vg3d-navbar .navbar-toggler {
  border-color: rgba(0,0,0,0.2);
}
.vg3d-navbar .navbar-toggler-icon {
  filter: invert(0); /* visible sobre fondo claro */
}

/* Avatar contenedor (por si en el futuro ponemos foto) */
.vg3d-navbar .vg3d-avatar {
  display: inline-flex;
  width: 28px; height: 28px;
  border-radius: 50%;
  overflow: hidden;
  align-items: center; justify-content: center;
}