/* ============================================================
   login.css — pagina de login
   replica o estilo do CYBERGEST antigo:
   - fundo gradient escuro com radial highlights
   - particulas flutuantes
   - caixa central com blur (glassmorphism)
   - botao entrar com gradient azul/indigo
   ============================================================ */

/* ── variaveis (mesma palette do menuSlider) ── */
:root {
  --accent:   #3b82f6;
  --accent2:  #6366f1;
  --text:     #e2e8f0;
  --text2:    #94a3b8;
  --danger:   #ef4444;
  --border:   rgba(59, 130, 246, .2);
}

/* reset basico */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: #0a0c14; /* fallback caso o gradient nao carregue */
  color: var(--text);
  overflow: hidden; /* sem scrollbars na pagina de login */
}

/* ============================================================
   PAGINA LOGIN — full-screen com gradient
   ============================================================ */
#pgLogin {
  position: fixed;
  inset: 0;                       /* top:0 right:0 bottom:0 left:0 */
  background: linear-gradient(135deg, #0a0c14 0%, #111827 40%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 9999;
}

/* radial highlights por cima do gradient (efeito atmosferico) */
#pgLogin::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, .08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(99, 102, 241, .06) 0%, transparent 60%);
  pointer-events: none; /* nao bloqueia clicks */
}

/* ============================================================
   PARTICULAS — pontinhos azuis a flutuar
   ============================================================ */
.login-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.login-particle {
  position: absolute;
  width: 3px; height: 3px;
  background: rgba(59, 130, 246, .35);
  border-radius: 50%;
  animation: floatParticle 6s infinite ease-in-out;
}

/* animacao subir/descer + fade */
@keyframes floatParticle {
  0%, 100% { transform: translateY(0) scale(1);   opacity: .3; }
  50%      { transform: translateY(-30px) scale(1.5); opacity: .6; }
}

/* ============================================================
   LOGIN BOX (caixa central com glassmorphism)
   ============================================================ */
.login-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 48px 40px;
  background: rgba(26, 34, 53, .85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px); /* safari */
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, .6),
              0 0 40px rgba(59, 130, 246, .08);
}

/* ── logo + titulo + subtitulo ── */
.login-logo {
  text-align: center;
  margin-bottom: 28px;
}
.login-logo .icon {
  width: 80px; height: 80px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 8px 24px rgba(59, 130, 246, .4);
}
.login-logo h1 {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  background: linear-gradient(135deg, #e2e8f0, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-logo p {
  color: var(--text2);
  font-size: 13px;
  margin-top: 4px;
  margin-bottom: 0;
}

/* ── selector de idioma ── */
.login-lang {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.login-lang button {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  font-size: 11px;
  cursor: pointer;
  transition: .2s;
}
.login-lang button.active {
  border-color: var(--accent);
  background: rgba(59, 130, 246, .15);
  color: var(--accent);
  font-weight: 600;
}
.login-lang button:hover { color: var(--text); }

/* ── campos de input ── */
.login-box .form-group {
  margin-bottom: 14px;
}
.login-box label {
  display: block;
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 6px;
  letter-spacing: .3px;
}
.login-box .form-control {
  width: 100%;
  padding: 12px 14px;
  background: rgba(59, 130, 246, .08);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  transition: .2s;
}
.login-box .form-control::placeholder { color: var(--text2); }
.login-box .form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .2);
  background: rgba(59, 130, 246, .12);
}

/* ── botao entrar ── */
.btn-login {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: .2s;
}
.btn-login:hover {
  opacity: .95;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, .3);
}
.btn-login:active { transform: translateY(0); }

/* ── area de erros ── */
.login-error {
  color: var(--danger);
  font-size: 13px;
  text-align: center;
  margin-top: 12px;
  min-height: 20px;
}

/* ── rodape ── */
.login-footer {
  text-align: center;
  margin-top: 18px;
  font-size: 11px;
  color: var(--text2);
  letter-spacing: .5px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
  .login-box {
    padding: 32px 24px;
    margin: 0 16px;
  }
  .login-logo .icon { width: 64px; height: 64px; font-size: 22px; }
  .login-logo h1 { font-size: 20px; }
}