.nav{
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between; /* 🔥 IMPORTANTE */
  padding:0 20px;
  background:linear-gradient(90deg,#052a51,#073a6b);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  color:#fff;
  gap:12px;
}

/* LINKS CENTRO */
.nav-links{
  display:flex;
  gap:12px;
  list-style:none;
  padding:0;
  margin:0;
}

/* cada botón */
.nav-links li{
  border-radius:12px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
  transition:.2s;
}

/* link interno */
.nav-links li a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  text-decoration:none;
  color:#e2e8f0;
  font-size:13px;
  font-weight:500;
  border-radius:12px;
  transition:.2s;
}

/* icono blanco */
.nav-links li a i{
  color:#fff;
  font-size:14px;
}

/* hover moderno */
.nav-links li:hover{
  background:linear-gradient(135deg,#142554,#081123);
}

.nav-links li:hover a{
  color:#fff;
}

.nav-links li:hover i{
  color:#fff;
}

/* derecha */
.nav-right{
  display:flex;
  align-items:center;
  gap:12px;
}

/* card más pequeña */
.user-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px; /* 👈 más compacta */
  border-radius:12px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
  max-height:70px; /* 👈 evita que crezca */
}

.avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  background:#1e90ff;
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.extra{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:2px;
}

.number-card{
  font-size:10px;
  color:#93c5fd;
  letter-spacing:.5px;
  padding:2px 6px;
  border:1px solid rgba(147,197,253,.3);
  border-radius:6px;
  background:rgba(147,197,253,.08);
}

.info{display:flex;flex-direction:column;line-height:1.1}

.name{font-size:13px;font-weight:600}
.role{font-size:10px;color:#b7c3d0;margin-top: 1px;}

.status{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  color:#cbd5e1;
  margin-top:1px;
}

.dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 6px rgba(34,197,94,.7);
}

.logout-btn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-size:12px;
  color:#fff;
  background:linear-gradient(135deg,#04213f,#031a33); /* 👈 azul oscuro coherente */
  box-shadow:0 3px 10px rgba(0,0,0,.25);
  transition:.2s;
}

.logout-btn:hover{
  background:linear-gradient(135deg,#031a33,#021327);
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
.logout-btn i{
  font-size:13px;
}