/* ===== Login — misma línea editorial del cockpit ===== */
.login-wrap{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:24px; font-family:var(--font-body); color:var(--text);
}
.login-card{
  width:100%; max-width:400px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); padding:38px 36px 26px;
  animation:login-in .28s ease-out;
}
@keyframes login-in{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){ .login-card{ animation:none } }

.login-brand{ display:flex; align-items:center; gap:13px; margin-bottom:26px; }
.login-mark{
  width:44px; height:44px; border-radius:12px; background:var(--accent); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:21px;
}
.login-name{ font-family:var(--font-head); font-weight:600; font-size:19px; line-height:1.2; }
.login-tag{ font-size:12.5px; color:var(--text-3); margin-top:2px; }

.login-err{
  background:var(--warn-soft); color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 25%, transparent);
  font-size:13px; line-height:1.5; border-radius:var(--r-sm); padding:10px 13px; margin-bottom:16px;
}

.login-label{ display:block; font-size:13px; font-weight:600; color:var(--text-2); margin:14px 0 6px; }
.login-input{
  width:100%; height:44px; box-sizing:border-box; padding:0 13px;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--border-2); border-radius:var(--r-sm);
  font:500 15px/1 var(--font-body); outline:none; transition:border-color .15s, box-shadow .15s;
}
.login-input::placeholder{ color:var(--text-3); }
.login-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.login-passwrap{ position:relative; }
.login-passwrap .login-input{ padding-right:46px; }
.login-eye{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--text-3); cursor:pointer; border-radius:8px;
}
.login-eye:hover{ color:var(--text); background:var(--surface-inset); }

.login-btn{
  width:100%; height:44px; margin-top:18px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; gap:9px;
  font:600 14.5px var(--font-body); cursor:pointer; text-decoration:none;
  transition:opacity .15s, transform .1s; box-sizing:border-box;
}
.login-btn:active{ transform:scale(.985); }
.login-btn.primary{ background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); }
.login-btn.primary:disabled{ opacity:.45; cursor:default; }
.login-btn.google{ background:var(--surface); color:var(--text); border:1px solid var(--border-2); }
.login-btn.google:hover{ background:var(--surface-inset); }

.login-or{ display:flex; align-items:center; gap:12px; margin-top:18px; color:var(--text-3); font-size:12px; }
.login-or::before,.login-or::after{ content:""; flex:1; height:1px; background:var(--border); }

.login-spin{
  width:15px; height:15px; border-radius:50%; flex:none;
  border:2px solid color-mix(in srgb, var(--on-accent) 35%, transparent); border-top-color:var(--on-accent);
  animation:login-rot .7s linear infinite;
}
@keyframes login-rot{ to{ transform:rotate(360deg) } }

.login-2fa-head{ display:flex; gap:12px; align-items:flex-start; margin-top:4px; }
.login-2fa-head svg{ width:22px; height:22px; color:var(--ok); flex:none; margin-top:2px; }
.login-2fa-t{ font:600 15px var(--font-head); }
.login-2fa-s{ font-size:13px; color:var(--text-2); line-height:1.55; margin-top:3px; }
.login-code{ letter-spacing:.45em; text-align:center; font-size:19px; font-weight:600; }

.login-back{
  width:100%; margin-top:12px; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:5px;
  color:var(--text-2); font:500 13px var(--font-body); padding:9px; border-radius:var(--r-sm);
}
.login-back:hover{ color:var(--text); background:var(--surface-inset); }
.login-back svg{ width:15px; height:15px; }

.login-foot{
  margin-top:24px; padding-top:16px; border-top:1px solid var(--border);
  text-align:center; font-size:11.5px; color:var(--text-3);
}