/* login.css — estilos específicos de la vista de login */

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: radial-gradient(ellipse at top left, #2e003f 0%, #0d0018 100%);
  min-height: 100vh;
  color: #fdf4ff;
  animation: bgmove 13s ease-in-out infinite alternate;
}

@keyframes bgmove {
  0%   { background-position: 20% 30%; }
  100% { background-position: 80% 70%; }
}

.neon-card {
  background: rgba(18, 0, 24, 0.98);
  border: 3px solid;
  border-image: linear-gradient(120deg, #a040fd 10%, #ff31b6 70%, #00ffc3 100%) 1;
  box-shadow: 0 0 48px 16px #a040fd77, 0 8px 60px #000c;
  animation: borderGlow 2.2s linear infinite alternate;
  border-radius: 2rem;
  backdrop-filter: blur(3px);
  overflow: hidden;
}

@keyframes borderGlow {
  0% {
    box-shadow: 0 0 36px 6px #a040fdcc, 0 8px 80px #000b;
    border-color: #a040fd;
  }
  50% {
    box-shadow: 0 0 80px 22px #ff31b6dd, 0 8px 90px #a040fd88;
    border-color: #00ffc3;
  }
  100% {
    box-shadow: 0 0 36px 6px #a040fdcc, 0 8px 80px #000b;
    border-color: #a040fd;
  }
}

.input-neon {
  background: #210030;
  border: 2px solid #a040fd;
  color: #fdf4ff;
  font-weight: bold;
  box-shadow: 0 0 8px #a040fd88;
  transition: box-shadow 0.3s, border 0.3s;
}

.input-neon:focus {
  border: 2.2px solid #00ffc3;
  box-shadow: 0 0 15px #00ffc3, 0 0 20px #a040fd66;
  outline: none;
}

.btn-neon {
  background: linear-gradient(90deg, #a040fd 30%, #ff31b6 70%, #00ffc3 100%);
  color: #fff;
  font-weight: bold;
  box-shadow: 0 0 18px #a040fd77, 0 2px 15px #00ffc399;
  border: none;
  transition: filter 0.18s, transform 0.17s;
  filter: brightness(1.09);
  position: relative;
  overflow: hidden;
}

.btn-neon:hover {
  filter: brightness(1.18) drop-shadow(0 0 10px #00ffc3);
  transform: scale(1.045);
}

.animate-flame {
  display: inline-block;
  animation: flameFlicker 0.8s infinite alternate;
  filter: drop-shadow(0 0 10px #ff8b17cc) drop-shadow(0 0 7px #ff31b6cc);
}

@keyframes flameFlicker {
  0%   { transform: translateY(0) scale(1);   opacity: 1;   }
  100% { transform: translateY(-1px) scale(1.04); opacity: 0.9; }
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1.5px solid #a040fd55;
}

.divider:not(:empty)::before {
  margin-right: 0.75em;
}

.divider:not(:empty)::after {
  margin-left: 0.75em;
}

.login-link {
  color: #00ffc3;
  font-weight: 600;
  text-decoration: underline dotted #a040fd;
  transition: color 0.16s, text-decoration-thickness 0.16s;
}

.login-link:hover {
  color: #ff31b6;
  text-decoration-thickness: 3px;
}

.neon-glow-welcome {
  color: #ff31b6;
  text-shadow:
    0 0 18px #a040fd,
    0 0 38px #00ffc3,
    0 0 8px #ff31b6cc;
  letter-spacing: 1.5px;
  filter: brightness(1.3);
  animation: welcomeglow 1.4s infinite alternate;
}

@keyframes welcomeglow {
  0% {
    text-shadow:
      0 0 18px #a040fd,
      0 0 32px #00ffc3,
      0 0 10px #ff31b6;
  }
  100% {
    text-shadow:
      0 0 28px #ff31b6,
      0 0 44px #a040fd,
      0 0 18px #00ffc3;
  }
}