/* ============================================================================
   ESPERALOYA — login.css  v3.0
   ============================================================================ */

#login-screen {
  min-height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--navy) 0%, #1a2f48 100%);
}

#login-box {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 40px 32px 36px;
  width: 100%; max-width: 390px;
  box-shadow: var(--shadow-lg);
}

/* Safety: when body is flex (desktop), login-screen must still fill viewport */
body:has(#app.is-visible) #login-screen { display: none !important; }

#login-brand {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 28px;
}
#login-brand .brand-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--pink) 0%, #F472B6 100%);
  display: flex; align-items: center; justify-content: center;
}
#login-brand strong { font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: -.4px; }

#login-box h1 {
  font-size: 22px; margin: 0 0 4px;
  color: var(--navy); font-weight: 800; letter-spacing: -.5px;
}
#login-box p { font-size: 13px; color: var(--g400); margin: 0 0 24px; }

#login-box label {
  display: block; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--g500); margin-bottom: 7px;
}
#login-box .field { margin-bottom: 16px; }
#login-box input {
  border: 1.5px solid var(--g200);
  border-radius: var(--r-sm);
  height: 46px;
}

#login-box button[type="submit"] {
  width: 100%; height: 50px;
  background: linear-gradient(135deg, var(--blue) 0%, #1D4ED8 100%);
  color: white; border: none;
  border-radius: var(--r-sm);
  font-size: 15px; font-weight: 700;
  letter-spacing: -.1px;
  transition: opacity var(--t), transform var(--t);
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
  cursor: pointer;
}
#login-box button[type="submit"]:hover { opacity: .9; transform: translateY(-1px); }

#login-error {
  display: none;
  background: var(--red-light); color: #991B1B;
  border: 1px solid #FECACA;
  font-size: 13px; padding: 12px 14px;
  border-radius: var(--r-sm); margin-bottom: 16px;
  font-weight: 500;
}