/* 
 * Estilos unificados para el navbar en todas las páginas
 * Este archivo garantiza consistencia visual en todo el sitio
 */

/* === NAVBAR PRINCIPAL === */
header.navbar-large-screen {
  min-height: 60px !important;
  height: 60px !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Contenedor centrado */
header.navbar-large-screen > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

header.navbar-large-screen > div > div {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* === LOGO === */
.navbar-logo-large {
  height: 36px !important;
  width: auto !important;
  transition: all 0.3s ease !important;
}

.navbar-logo-large:hover {
  transform: scale(1.05) !important;
}

/* === ENLACES DE NAVEGACIÓN === */
.navbar-links-large,
header nav a {
  font-size: 0.75rem !important; /* text-xs */
  font-weight: 500 !important; /* font-medium */
  letter-spacing: 0.05em !important; /* tracking-wider */
  text-transform: uppercase !important;
  color: #374151 !important; /* text-gray-700 */
  transition: color 0.3s ease, transform 0.3s ease !important;
  position: relative !important;
  padding: 0.375rem 0.5rem !important;
  white-space: nowrap !important;
}

.navbar-links-large:hover,
header nav a:hover {
  color: #3B82F6 !important; /* text-blue-600 */
  transform: translateY(-1px) !important;
}

/* Línea animada debajo del hover */
.navbar-links-large::after,
header nav a::after {
  content: '' !important;
  position: absolute !important;
  width: 0 !important;
  height: 2px !important;
  bottom: 0 !important;
  left: 50% !important;
  background-color: #3B82F6 !important;
  transition: all 0.3s ease !important;
  transform: translateX(-50%) !important;
}

.navbar-links-large:hover::after,
header nav a:hover::after {
  width: 80% !important;
}

/* === NAVEGACIÓN CENTRADA === */
header nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  max-width: none !important;
}

/* === BOTONES DE SESIÓN === */
#nav-login, 
#nav-registro,
.btn-login,
.btn-registro {
  font-size: 0.75rem !important; /* text-xs */
  font-weight: 600 !important; /* font-semibold */
  padding: 0.375rem 0.75rem !important;
  border-radius: 0.5rem !important; /* rounded-lg */
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
}

#nav-login,
.btn-login {
  color: #3B82F6 !important;
  background-color: transparent !important;
  border: 1px solid #3B82F6 !important;
}

#nav-login:hover,
.btn-login:hover {
  background-color: #3B82F6 !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2) !important;
}

#nav-registro,
.btn-registro {
  color: white !important;
  background-color: #3B82F6 !important;
  border: 1px solid #3B82F6 !important;
}

#nav-registro:hover,
.btn-registro:hover {
  background-color: #2563EB !important;
  border-color: #2563EB !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3) !important;
}

/* === MENÚ MÓVIL === */
#mobile-menu {
  background-color: white !important;
  font-family: 'Montserrat', sans-serif !important;
}

.mobile-nav-link {
  font-size: 1rem !important; /* text-base en móvil */
  font-weight: 700 !important; /* font-bold */
  color: #374151 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all 0.3s ease !important;
  padding: 1rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
  color: #3B82F6 !important;
  background-color: rgba(59, 130, 246, 0.05) !important;
  transform: translateX(5px) !important;
}

#nav-login-mobile,
#nav-registro-mobile {
  font-weight: 700 !important;
  padding: 1rem !important;
  text-align: center !important;
  border-radius: 0.5rem !important;
  margin: 0.5rem 1rem !important;
}

#nav-login-mobile {
  color: #3B82F6 !important;
  border: 2px solid #3B82F6 !important;
  background-color: white !important;
}

#nav-registro-mobile {
  color: white !important;
  background-color: #3B82F6 !important;
}

/* === RESPONSIVE 2K/3K/4K === */
@media (min-width: 1536px) {
  header.navbar-large-screen {
    height: 64px !important;
    min-height: 64px !important;
  }
  
  .navbar-logo-large {
    height: 40px !important;
  }
  
  .navbar-links-large,
  header nav a {
    font-size: 0.875rem !important; /* text-sm */
    padding: 0.5rem 0.75rem !important;
  }
  
  #nav-login, #nav-registro {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
  }
}

@media (min-width: 1920px) {
  header.navbar-large-screen {
    height: 68px !important;
    min-height: 68px !important;
  }
  
  .navbar-logo-large {
    height: 44px !important;
  }
  
  .navbar-links-large,
  header nav a {
    font-size: 0.9375rem !important; /* 15px */
    padding: 0.5rem 0.875rem !important;
  }
  
  #nav-login, #nav-registro {
    font-size: 0.9375rem !important;
    padding: 0.5rem 1.125rem !important;
  }
}

@media (min-width: 2560px) {
  header.navbar-large-screen {
    height: 72px !important;
    min-height: 72px !important;
  }
  
  .navbar-logo-large {
    height: 48px !important;
  }
  
  .navbar-links-large,
  header nav a {
    font-size: 1rem !important; /* text-base */
    padding: 0.625rem 1rem !important;
  }
  
  #nav-login, #nav-registro {
    font-size: 1rem !important;
    padding: 0.625rem 1.25rem !important;
  }
}

/* === TABLET === */
@media (min-width: 640px) and (max-width: 1023px) {
  header.navbar-large-screen {
    height: 56px !important;
    min-height: 56px !important;
  }
  
  .navbar-logo-large {
    height: 32px !important;
  }
  
  .navbar-links-large,
  header nav a {
    font-size: 0.6875rem !important; /* 11px */
    padding: 0.375rem 0.375rem !important;
  }
  
  #nav-login, #nav-registro {
    font-size: 0.6875rem !important;
    padding: 0.375rem 0.625rem !important;
  }
}

/* === MOBILE === */
@media (max-width: 639px) {
  header.navbar-large-screen {
    height: 56px !important;
    min-height: 56px !important;
  }
  
  .navbar-logo-large {
    height: 32px !important;
  }
}

/* === ACCESIBILIDAD === */
.navbar-links-large:focus,
header nav a:focus,
#nav-login:focus,
#nav-registro:focus {
  outline: 2px solid #3B82F6 !important;
  outline-offset: 2px !important;
}

/* === ANIMACIONES === */
@keyframes navbarSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

header.navbar-large-screen {
  animation: navbarSlideDown 0.3s ease-out !important;
}

/* === ESTADO ACTIVO === */
.navbar-links-large.active,
header nav a.active {
  color: #3B82F6 !important;
  font-weight: 700 !important;
}

.navbar-links-large.active::after,
header nav a.active::after {
  width: 80% !important;
}