/* Login ROFC · nubes+estrellas (Canvallax) + card centrada con halo verde exterior. */

html, body { height:100%; }
body { margin:0; min-height:100vh; font-family:"Inter", Arial, sans-serif; overflow:hidden; }

.canvallax, .bg-canvas { position:fixed !important; inset:0; z-index:0; display:block; }

.container { position:relative; z-index:2; min-height:100vh; display:grid; place-items:center; padding:24px; }

.login-container {
  position:relative; width:100%; max-width:392px; background:var(--surface);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg);
  padding:38px 34px; transition:transform .6s var(--ease), opacity .3s;
}
/* halo verde difuminado alrededor del exterior del card */
.login-container::before {
  content:""; position:absolute; inset:-26px; z-index:-1; border-radius:34px; pointer-events:none;
  background:radial-gradient(closest-side,
    color-mix(in srgb, var(--green-400) 60%, transparent),
    color-mix(in srgb, var(--green-600) 30%, transparent) 55%, transparent 80%);
  filter:blur(30px); opacity:.9;
}

.login-header { text-align:center; margin-bottom:22px; }
.login-header .mark { width:62px; height:62px; object-fit:contain; margin:0 auto 8px; display:block;
  filter:drop-shadow(0 4px 10px rgba(26,41,28,.22)); }
.login-header h2 { font-size:24px; font-weight:800; letter-spacing:-.03em; margin:0; }
.login-header .logo-login { height:20px; margin:10px auto 0; display:block; filter:brightness(0); opacity:.85; }
[data-theme="dark"] .login-header .logo-login { filter:brightness(0) invert(1); opacity:.92; }
.login-header p { color:var(--muted); font-size:14px; margin:8px 0 0; }

.form-group { margin-bottom:15px; text-align:left; }
.form-group label { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  color:var(--ink-2); margin-bottom:6px; }
.form-group label svg { width:15px; height:15px; }
.password-container { position:relative; }
.password-container input { padding-right:38px; }
.password-container .toggle-password { position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:clamp(22px, 6vw, 26px); height:clamp(22px, 6vw, 26px); display:grid; place-items:center;
  color:var(--muted); cursor:pointer; background:none; border:none; padding:0; border-radius:6px; }
.password-container .toggle-password svg { width:16px; height:16px; }
.password-container .toggle-password:hover { color:var(--brand); }
.login-btn { width:100%; justify-content:center; gap:8px; padding:11px; margin-top:10px; font-size:14px; }
.login-footer { text-align:center; margin-top:20px; color:var(--muted); font-size:12px; }

.theme-toggle { position:fixed; top:16px; right:16px; z-index:6; }

.alert.alert-danger { background:var(--danger-bg); color:var(--danger); }

/* animación de submit */
.login-container.descending { transform:translateY(58vh) scale(.985); opacity:.5; }
.login-container.shake { animation:loginShake .5s var(--ease); }
@keyframes loginShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(4px)} }
.login-overlay-white { position:fixed; inset:0; background:var(--bg); opacity:0; pointer-events:none;
  z-index:50; transition:opacity .5s var(--ease); }
.login-overlay-white.show { opacity:1; }
.login-overlay-white.hide-fast { transition:opacity .2s; opacity:0; }

@media (max-width:460px) { .login-container { padding:30px 22px; } }