/* ============================================================
   NAVBAR.CSS — isla centrada, sin logo
   ============================================================ */

/* Wrapper fijo centrado — solo el navbar, isla flotante */
.navbar-group {
  position: fixed;
  top: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-navbar);
  white-space: nowrap;
}

.navbar {
  height: 52px;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-inline: var(--spacing-lg);
  background-color: var(--glass-bg-solid);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--border-width) solid var(--glass-border);
  border-radius: var(--radius-full);
  box-shadow: var(--glass-shadow);
  transition: border-color var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.navbar--scrolled {
  border-color: var(--glass-border-strong);
  box-shadow: var(--glass-shadow), var(--glow-primary);
}

/* Logo dentro del navbar */
.navbar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.navbar__logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  transition: filter var(--duration-fast) var(--ease-smooth);
}

.navbar__logo:hover img {
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.8));
}

/* Separador vertical entre logo y links */
.navbar__divider {
  display: none;
  width: 1px;
  height: 20px;
  background-color: var(--glass-border-strong);
  margin-inline: var(--spacing-md);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .navbar__divider {
    display: block;
  }
}

/* CTA dentro del navbar — especificidad alta para ganarle a .btn */
.navbar .navbar__cta {
  font-size: 0.8rem;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  flex-shrink: 0;
  display: none;
}

/* Links */
.navbar__links {
  display: none;
  align-items: center;
  gap: var(--spacing-lg);
}

.navbar__link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  transition: color var(--duration-fast) var(--ease-smooth),
              text-shadow var(--duration-fast) var(--ease-smooth);
}

.navbar__link:hover {
  color: var(--color-primary);
  text-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}

/* Hamburger — solo mobile */
.navbar__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-text-primary);
  font-size: 1.25rem;
  border-radius: var(--radius-full);
  transition: background-color var(--duration-fast) var(--ease-smooth);
}

.navbar__hamburger:hover {
  background-color: var(--color-bg-gray-100);
}

/* Menú mobile expandido — position:absolute relativo a navbar-group (su containing block real) */
.navbar__links--open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: calc(100% + var(--spacing-sm));
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  background-color: rgba(6, 9, 18, 0.97);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--border-width) solid var(--glass-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--spacing-sm);
  gap: 0;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.04);
  z-index: calc(var(--z-navbar) + 10);
  animation: menu-slide-in var(--duration-normal) var(--ease-smooth) forwards;
}

@keyframes menu-slide-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* Links dentro del menú mobile */
.navbar__links--open .navbar__link {
  display: block;
  white-space: normal;
  padding: 0.85rem var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
  transition: background-color var(--duration-fast) var(--ease-smooth),
              color var(--duration-fast) var(--ease-smooth);
}

.navbar__links--open .navbar__link:hover {
  background-color: var(--glass-bg-hover);
  color: var(--color-text-primary);
  text-shadow: none;
}

/* Separador visual entre links */
.navbar__links--open .navbar__link + .navbar__link {
  border-top: var(--border-width) solid rgba(255, 255, 255, 0.06);
}

/* ----------------------------------------------------------
   WHATSAPP FAB — informes, esquina inferior izquierda
---------------------------------------------------------- */
.whatsapp-fab {
  position: fixed;
  bottom: var(--spacing-xl);
  left: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  height: 52px;
  padding: 0 var(--spacing-md);
  background-color: #25d366;
  border-radius: var(--radius-full);
  z-index: var(--z-navbar);
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
  transition: transform var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth);
  white-space: nowrap;
}

.whatsapp-fab:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.5);
}

.whatsapp-fab__icon {
  font-size: 1.5rem;
  color: #fff;
  flex-shrink: 0;
}

.whatsapp-fab__label {
  display: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: #fff;
}

@media (min-width: 640px) {
  .whatsapp-fab__label {
    display: inline;
  }
}

/* ----------------------------------------------------------
   LOGIN CORNER — esquina superior derecha
---------------------------------------------------------- */
.login-corner {
  position: fixed;
  top: var(--spacing-md);
  right: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  /* Mobile: cuadrado compacto como el FAB */
  width: 52px;
  height: 52px;
  padding: 0;
  background-color: var(--glass-bg-solid);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--border-width) solid var(--glass-border);
  border-radius: var(--radius-full);
  z-index: var(--z-navbar);
  transition: color var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast) var(--ease-smooth);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .login-corner {
    width: auto;
    height: 52px;
    padding: 0.45rem var(--spacing-md);
  }
}

.login-corner:hover {
  color: var(--color-text-primary);
  border-color: var(--glass-border-strong);
}

/* Mobile: texto oculto en login-corner — evita colisiones y ahorra espacio */
.login-corner__text {
  display: none;
}

@media (min-width: 640px) {
  .login-corner__text {
    display: inline;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .navbar__links {
    display: flex;
  }

  .navbar .navbar__cta {
    display: flex;
  }

  .navbar__hamburger {
    display: none;
  }
}