/* Estilo general */
body {
  background-color: #0a0a0a;
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Contenedor del formulario */
form#login-form {
  background: #111;
  border: 2px solid #00f0ff;
  box-shadow: 0 0 20px #00f0ff33;
  border-radius: 16px;
  padding: 40px 30px;
  width: 100%;
  max-width: 400px;
  animation: fadeIn 0.6s ease-in-out;
}

/* Títulos (Correo, Contraseña) */
h2 {
  text-align: center;
  color: #B026FF;
  margin-bottom: 15px;
  margin-top: 5px;
  animation: flicker_purple 0.15s infinite alternate;
  text-shadow:
    0 0 5px #cc00ff,
    0 0 10px #cc00ff,
    0 0 20px #cc00ff,
    0 0 40px #cc00ff;
  font-size: 20px;
}

/* Inputs */
input[type="email"],
input[type="password"] {
  width: 94%;
  padding: 12px;
  border-radius: 6px;
  border: none;
  margin-bottom: 20px;
  background-color: #222;
  color: white;
  border: 1px solid #0ff;
  outline: none;
  transition: 0.3s;
  font-size: 14px;
}

input[type="email"]:focus,
input[type="password"]:focus {
  border-color: #B026FF;
  box-shadow: 0 0 8px #B026FFaa;
}

/* Botones */
button {
  width: 100%;
  padding: 12px;
  margin: auto;
  margin-top: 10px;
  font-size: 15px;
  background-color: #B026FF;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease, color 0.3s ease;
  font-family: 'Khand';
}

button:hover {
  background: #00ffcc;
  color: #000;
}

/* Botón de Google específico */
#login-google {
  background: #db4437;
  margin-top: 12px;
}

#login-google:hover {
  background: #ff6a5e;
}

/* Enlace de registro */
a {
  display: block;
  margin-top: 40px;
  text-align: center;
  color: #0ff;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #B026FF;
  text-decoration: underline;
}

/* Animaciones */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes flicker_purple {
  0% {
    text-shadow:
      0 0 5px #d000ff,
      0 0 10px #d000ff,
      0 0 20px #d000ff,
      0 0 40px #d000ff;
    opacity: 1;
  }
  50% {
    text-shadow:
      0 0 2px #d000ff,
      0 0 5px #d000ff,
      0 0 10px #d000ff,
      0 0 20px #d000ff;
    opacity: 0.85;
  }
  100% {
    text-shadow:
      0 0 10px #d000ff,
      0 0 20px #d000ff,
      0 0 30px #d000ff,
      0 0 50px rgb(104, 5, 170);
    opacity: 1;
  }
}
/* Asegura estructura vertical con footer siempre abajo */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #0a0a0a;
  margin: 0;
  font-family: 'Kola';
}

/* El main ocupará el espacio disponible para centrar */
main.login-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 160px; /* deja espacio por la navbar */
  padding-bottom: 60px; /* espacio para que el footer no solape */
  margin-top: 350px;
}

/* Centrado del footer */
.footer-container {
  width: 100%;
  text-align: center;
}

.footer-logo{
    margin-right: 300px;
}

@media screen /*and (min-width: 393px)*/ and (max-width: 511px) {
  .login-wrapper {
    margin-top: 500px;
  }

  form#login-form {
    max-width: 320px;
    padding: 30px 20px;
  }
}

@media screen and (min-width:1361px) {
  main.login-wrapper {
      margin-top: 500px;
  }
}

@media screen and (min-width:834px) and (max-width:1360px) {
  main.login-wrapper {
      margin-top: 500px;
  }
}