/* Paleta L2Nyx: azul profundo + hielo (combina con el logo) */
:root {
  --nyx-bg-top: #040a1c;
  --nyx-bg-bottom: #0a1f4d;
  --nyx-card: rgba(6, 14, 34, 0.92);
  --nyx-input: #0b1530;
  --nyx-input-border: #21375f;
  --nyx-ice: #cfe4ff;
  --nyx-ice-strong: #8fc1ff;
  --nyx-glow: rgba(70, 140, 255, 0.35);
}

body, html {
  height: 100%;
  font-family: 'Orbitron', sans-serif;
  background: radial-gradient(ellipse at 50% 35%, #123a86 0%, var(--nyx-bg-bottom) 40%, var(--nyx-bg-top) 100%);
  color: #eee;
}
/* Solo login/registro: centrado flexible con scroll si la tarjeta es más alta que la pantalla */
body.auth-page {
  margin: 0;
  padding: 24px 0;
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  align-items: flex-start; /* que la tarjeta NO se estire a toda la altura */
  overflow-x: hidden;
  overflow-y: auto;
}

/* Fundo com leve partícula/fumaça */
body::before, body::after {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 40% 40%, rgba(120, 180, 255, 0.06), transparent 60%),
              radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 0.04), transparent 50%);
  animation: smokeMove 45s linear infinite;
  z-index: 0;
}
body::after {
  animation-delay: 20s;
  filter: blur(60px);
}

.login-container {
  position: relative;
  z-index: 1;
  width: 450px;
  max-width: 95vw;
  margin: auto; /* centrado vertical y horizontal; con scroll si no entra */
  background: var(--nyx-card);
  border: 1px solid rgba(120, 170, 255, 0.12);
  border-radius: 18px;
  padding: 40px 40px 30px;
  box-shadow: 0 0 40px var(--nyx-glow);
  text-align: center;
  animation: floatUpDown 10s ease-in-out infinite;
}

.login-container .logo {
  max-width: 360px;
  width: 100%;
  margin: 0 auto 10px auto;
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(70, 140, 255, 0.45);
  display: block;
  animation: fadeIn 2.5s ease;
}

.login-container h2 {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.8rem;
  color: var(--nyx-ice);
  text-shadow: 0 0 12px rgba(120, 180, 255, 0.45);
  margin-bottom: 25px;
}

.login-container button {
  margin-top: 25px;
  width: 100%;
  padding: 14px;
  font-size: 1.1rem;
  border-radius: 10px;
  border: none;
  background: linear-gradient(to right, #9dcbff, #3f7fe6);
  color: #061027;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.login-container button:hover {
  background: linear-gradient(to right, #c4e0ff, #2f6bd0);
  box-shadow: 0 0 14px var(--nyx-ice-strong);
}

.login-container .error {
  margin-top: 15px;
  font-size: 1rem;
  color: #ff5f5f;
  font-weight: 600;
}

/* Selector de idioma (al pie de la tarjeta) */
.auth-lang {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(120, 170, 255, 0.15);
  text-align: center;
}
.auth-lang a { margin: 0 6px; opacity: .6; transition: opacity .2s, transform .2s; display: inline-block; }
.auth-lang a:hover, .auth-lang a.active { opacity: 1; transform: scale(1.08); }
.auth-lang img { width: 30px; vertical-align: middle; border-radius: 3px; box-shadow: 0 0 6px rgba(0,0,0,.6); }

@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(10px) translateX(3px);
  }
}

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

@keyframes smokeMove {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(15%, 15%) scale(1.03); }
  100% { transform: translate(0, 0) scale(1); }
}
.input-group {
  position: relative;
  margin: 14px 0;
}

.input-group i {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: #8aa4cf;
  font-size: 1.1rem;
}

.input-group input {
  width: 85%;
  padding: 14px 18px 14px 45px; /* espaço para o ícone */
  font-size: 1.1rem;
  border: 1px solid var(--nyx-input-border);
  border-radius: 10px;
  background: var(--nyx-input);
  color: #eee;
  transition: all 0.3s ease;
}

.input-group input:focus {
  background: #101d3f;
  border-color: var(--nyx-ice-strong);
  box-shadow: 0 0 10px rgba(120, 180, 255, 0.3);
  outline: none;
}

.captcha-display {
  font-family: monospace;
  font-size: 1.1rem;
  letter-spacing: 4px;
  margin-top: 10px;
  background: #070f24;
  border: 1px dashed #4a6aa8;
  padding: 12px;
  border-radius: 10px;
  color: var(--nyx-ice-strong);
  user-select: none;
  text-align: center;
}
input[name="captcha"] {
  text-transform: uppercase;
}
.register-link {
  margin-top: 15px;
  font-size: 0.95rem;
  color: #b9c9e6;
}

.register-link a {
  color: var(--nyx-ice-strong);
  text-decoration: none;
  font-weight: bold;
}

.register-link a:hover {
  text-decoration: underline;
  color: #dbeaff;
}
.success {
  margin-top: 15px;
  font-size: 1rem;
  color: #73ff7c;
  font-weight: 600;
}