/* ==========================================================================
   PÁGINA DE INICIO DE SESIÓN - BRANDING EXTROPIAN (RESTAURADO)
   ========================================================================== */

/* Contenedor completo alineado al centro de la pantalla */
.login-page-wrapper {
  width: 100%;
  min-height: calc(100vh); /* Ajusta restando la altura de tu navbar actual */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: transparent; /* Tu fondo oscuro base */
  padding: 2rem;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

/* Tarjeta inspirada en el feed/posters de tu derecha */
.login-card {
  width: 100%;
  max-width: 440px;
  
  /* 🚀 EL SECRETO DEL CRISTAL PURO:
     1. Subimos la opacidad base a 0.07 para que resalte del fondo.
     2. Cambiamos el fondo plano por un gradiente lineal inclinado. 
        Esto simula un reflejo de luz física cruzando el cristal de arriba a abajo. */
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.09) 0%, 
    rgba(255, 255, 255, 0.5) 100%
  ) !important;
  
  /* 🚀 EXPANSIÓN ÓPTICA: Incrementamos el desenfoque a 32px para licuar el verde de fondo */
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  
  color: #cdfa1b; 
  padding: 3.5rem 2.5rem;
  border-radius: 24px; 
  
  /* 🚀 EL REFLEJO EN EL CANTO:
     Cambiamos el borde blanco plano por un degradado lineal. 
     Esto hace que el borde superior izquierdo brille más (reflejo de luz) 
     y el borde inferior derecho se disuelva en la sombra, imitando un canto de vidrio real. */
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-top-color: rgba(255, 255, 255, 0.25) !important;
  border-left-color: rgba(255, 255, 255, 0.25) !important;
  
  /* Sombra profunda y suave con dispersión alta para despegar la tarjeta del fondo */
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; /* Micro-brillo interno */
  
  text-align: center;
}

/* Estilos de los títulos */
.login-title {
  font-family: 'Helvetica Neue STL Pro Extended', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 2rem;
  letter-spacing: 1px;
  margin: 0 0 0.5rem 0;
}

.login-subtitle {
  font-family: 'Helvetica Neue STL Pro Extended', 'Helvetica Neue', Arial, sans-serif;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  margin-bottom: 2.5rem;
}

/* Estructura del formulario */
.form-group {
  margin-bottom: 1.2rem;
}

/* Campos de texto inputs */
.form-input {
  width: 100%;
  padding: 16px;
  
  /* Cambiado de blanco sólido a un blanco muy translúcido */
  background-color: rgba(255, 255, 255, 0.05); 
  
  /* Borde sutil para delimitar el campo sobre el vidrio */
  border: 1px solid rgba(255, 255, 255, 0.1);
  
  border-radius: 30px; 
  color: #ffffff;
   font-family: 'Helvetica Neue STL Pro Extended', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9rem;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
  text-align: center; 
}

.form-input:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.1); /* Se aclara un poco al escribir */
  border-color: #cdfa1b; 
  box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.2);
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Botón Sign In (Estilo píldora como 'Explore our Work') */
.btn-login {
  width: 100%;
  padding: 16px;
  background-color: #ffffff; 
  color: #0b0f12;
   font-family: 'Helvetica Neue STL Pro Extended', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0.5rem;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

.btn-login:hover {
  background-color: #cdfa1b; 
  color: #0b0f12; /* Mantiene el texto oscuro legible sobre el verde lima */
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 0, 0.3); /* Brillo verde al pasar el mouse */
}

/* Enlace inferior */
.login-footer-links {
  margin-top: 2rem;
}

.forgot-password-link {
   font-family: 'Helvetica Neue STL Pro Extended', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.forgot-password-link:hover {
  color: #cdfa1b;
  text-decoration: underline;
}