/* =========================================================
   ZNEXUS APP — Login (complementa style.css do site)
   ========================================================= */

.login-wrap{ min-height:100vh; }

/* ---------- Mensagem de erro ---------- */
.form-error{
  display:none;
  align-items:center; gap:10px;
  background:rgba(225,46,46,.08);
  border:1px solid rgba(225,46,46,.25);
  color:#C81E1E;
  padding:12px 14px;
  border-radius:6px;
  font-size:13.5px;
  margin-bottom:20px;
}
.form-error.show{ display:flex; }
.form-error i{ font-size:14px; flex:0 0 auto; }

.form-field input.has-error{
  border-color:#E12E2E;
  box-shadow:0 0 0 3px rgba(225,46,46,.10);
}

/* ---------- Campo de senha com toggle ---------- */
.pass-field{ position:relative; }
.pass-field input{ padding-right:42px; }
.toggle-eye{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--slate-soft); font-size:15px; cursor:pointer;
  transition:color .15s ease;
}
.toggle-eye:hover{ color:var(--blue); }

/* ---------- Lembrar usuário / esqueci a senha ---------- */
.form-options{
  display:flex; align-items:center; justify-content:space-between;
  margin:-6px 0 24px;
  font-size:13.5px;
}
.checkbox-field{
  display:flex; align-items:center; gap:8px;
  color:var(--slate); cursor:pointer; user-select:none;
}
.checkbox-field input{ width:auto; accent-color:var(--blue); }
.forgot-link{ color:var(--blue); font-weight:500; }
.forgot-link:hover{ color:var(--blue-2); text-decoration:underline; }

/* ---------- Botão com loading ---------- */
.btn-login, #btn-login{ position:relative; }
#btn-login.loading{ pointer-events:none; opacity:.85; }
#btn-login.loading i{ animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Demo credentials ---------- */
.demo-section{ margin-top:30px; }
.demo-divider{
  position:relative; text-align:center; margin-bottom:18px;
}
.demo-divider::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--line);
}
.demo-divider span{
  position:relative; background:#fff; padding:0 12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--slate-soft);
}
.demo-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.demo-pill{
  border:1px solid var(--line); border-radius:6px;
  padding:10px 10px; text-align:left; cursor:pointer;
  transition:border-color .15s ease, transform .15s ease;
}
.demo-pill:hover{ border-color:var(--blue); transform:translateY(-2px); }
.dp-role{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--teal-2); font-weight:600; margin-bottom:4px;
}
.dp-user{ font-size:13px; font-weight:600; color:var(--ink); }
.dp-pass{ font-size:11.5px; color:var(--slate-soft); font-family:var(--font-mono); }

@media (max-width:520px){
  .demo-grid{ grid-template-columns:1fr; }
}