/* ===========================
   LOGIN FOMENTUM - login.css
   =========================== */

/* Paleta & base */
:root {
  --grad-a:#3b82f6;
  --grad-b:#6366f1;
  --bg-gradient:linear-gradient(135deg, var(--grad-b) 0%, var(--grad-a) 55%, #4f46e5 100%);
  --text:#0f172a;
  --text-light:#64748b;
  --danger:#dc2626;
  --radius-sm:4px;
  --radius-md:10px;
  --shadow-card:0 18px 40px -14px rgba(0,0,0,.35),0 6px 20px -10px rgba(0,0,0,.25);
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  --focus-ring:0 0 0 3px rgba(99,102,241,.35);
}

* {
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

html,body {
  margin:0;
  padding:0;
  font-family:var(--font);
  color:var(--text);
  min-height:100vh;
}

body.login-body {
  /* Fundo gradiente seguindo botão */
  background:var(--bg-gradient);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1.2rem;
}

/* Card principal */
.login-card {
  width:100%;
  max-width:460px;
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
  animation:fadeIn .55s ease;
  position:relative;
  isolation:isolate;
}

@keyframes fadeIn {
  from { opacity:0; transform:translateY(14px); }
  to { opacity:1; transform:translateY(0); }
}

/* Hero (imagem) */
.login-hero {
  width:100%;
  aspect-ratio: 16 / 8.2;
  position:relative;
  background:#111827;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.login-hero img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  animation:heroFade .8s ease;
}
@keyframes heroFade {
  from { opacity:0; scale:1.04; }
  to { opacity:1; scale:1; }
}
.login-hero.no-image {
  background:linear-gradient(145deg,#1e3a8a,#312e81);
}
.hero-fallback {
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(135deg,#312e81,#1e3a8a);
}

/* Painel de formulário */
.login-panel {
  padding:2.3rem 2.15rem 2.4rem;
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  position:relative;
}

.login-brand {
  margin:0;
  font-weight:800;
  letter-spacing:4px;
  text-align:center;
  font-size:1.95rem;
  background:linear-gradient(90deg,var(--grad-b),var(--grad-a));
  -webkit-background-clip:text;
  color:transparent;
}

.login-sub {
  margin: -0.9rem 0 0;
  text-align:center;
  font-size:.72rem;
  letter-spacing:.6px;
  font-weight:500;
  color:var(--text-light);
}

.login-form {
  display:flex;
  flex-direction:column;
  gap:.95rem;
  margin-top:.25rem;
}

/* Campos */
.field {
  position:relative;
  display:flex;
  align-items:center;
  background:#f1f5f9;
  border:1px solid #d8dee7;
  border-radius:var(--radius-sm);
  padding:.55rem .7rem .55rem 2.35rem;
  transition:border-color .2s, background-color .2s;
}

.field:focus-within {
  border-color:var(--grad-a);
  background:#ffffff;
  box-shadow:var(--focus-ring);
}

.field input {
  border:none;
  background:transparent;
  width:100%;
  font:inherit;
  font-size:.88rem;
  color:var(--text);
  padding:0;
  line-height:1.25;
  outline:none;
}

.field input::placeholder {
  color:#94a3b8;
  letter-spacing:.4px;
}

.icon {
  position:absolute;
  left:.75rem;
  width:18px;
  height:18px;
  display:inline-block;
  color:#6366f1;
  opacity:.9;
}

.icon::before {
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.i-mail::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%236366f1' fill='none' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m4 4 8 8 8-8'/><path d='M2 6v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6'/></svg>");
}
.i-lock::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%236366f1' fill='none' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
}

/* Botão ENTRAR */
.btn-enter {
  align-self:flex-start;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:2px;
  padding:.95rem 2.15rem .95rem 1.95rem;
  border-radius:4px;
  background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
  color:#fff;
  box-shadow:0 6px 18px -6px rgba(59,130,246,.55), 0 2px 6px -1px rgba(59,130,246,.45);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  text-transform:uppercase;
  transition:filter .3s, transform .18s, box-shadow .3s;
}

.btn-enter .arrow {
  font-size:1.05rem;
  line-height:1;
  transform:translateX(0);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}

.btn-enter:hover {
  filter:brightness(.94);
}
.btn-enter:hover .arrow {
  transform:translateX(4px);
}
.btn-enter:active {
  transform:translateY(2px);
  box-shadow:0 3px 12px -4px rgba(59,130,246,.55);
}

.btn-enter:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.5), 0 0 0 6px rgba(99,102,241,.55);
}

/* Alertas */
.alert-login {
  font-size:.7rem;
  line-height:1.3;
  border:1px solid transparent;
  border-radius:6px;
  padding:.6rem .75rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.alert-erro {
  background:#fee2e2;
  border-color:#fecaca;
  color:#991b1b;
}

@media (max-width:520px) {
  .login-panel { padding:2rem 1.4rem 2.2rem; }
  .login-brand { font-size:1.7rem; letter-spacing:3px; }
  .btn-enter { padding:.9rem 1.7rem; }
}

/* Dark Mode opcional via atributo (se quiser futuramente) */
:root[data-theme='dark'] body.login-body {
  background:linear-gradient(140deg,#1e1b4b,#312e81,#1e3a8a);
}
:root[data-theme='dark'] .login-card {
  background:#0f172a;
  color:#e2e8f0;
}
:root[data-theme='dark'] .login-panel { }
:root[data-theme='dark'] .field {
  background:#1e293b;
  border-color:#334155;
}
:root[data-theme='dark'] .field:focus-within {
  background:#1e293b;
}
:root[data-theme='dark'] .field input { color:#f1f5f9; }
:root[data-theme='dark'] .field input::placeholder { color:#64748b; }
:root[data-theme='dark'] .alert-erro {
  background:#422b2d;
  border-color:#7f3437;
  color:#fca5a5;
}