:root {
  --login-font: "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --login-ink: #182230;
  --login-soft-ink: #475467;
  --login-muted: #667085;
  --login-line: #e4e7ec;
  --login-surface: #ffffff;
  --login-canvas: #f7f9fc;
  --login-blue: #2f6fae;
  --login-blue-soft: #e9f3ff;
  --login-teal: #2f8f83;
  --login-danger: #c2413a;
  --login-radius: 8px;
}

html,
body {
  font-family: var(--login-font);
}

body,
body * {
  letter-spacing: 0 !important;
}

body.login-body {
  min-height: 100vh;
  padding: clamp(1rem, 3vw, 2.5rem);
  background:
    linear-gradient(180deg, #ffffff 0, transparent 240px),
    var(--login-canvas);
}

.login-card {
  width: min(100%, 1120px);
  max-width: 1120px;
  height: min(660px, calc(100vh - 2rem));
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(420px, 1.08fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--login-line);
  border-radius: var(--login-radius);
  background: var(--login-surface);
  box-shadow: 0 10px 30px rgb(16 24 40 / .06);
}

.login-hero {
  order: 2;
  position: relative;
  overflow: hidden;
  background: var(--login-blue-soft);
}

.login-hero::before {
  content: "Um Campus. Tudo o que Você Precisa.";
  position: absolute;
  left: clamp(1.5rem, 4vw, 3rem);
  right: clamp(1.5rem, 4vw, 3rem);
  bottom: clamp(1.5rem, 4vw, 3rem);
  z-index: 2;
  max-width: 30rem;
  color: #fff;
  font-size: clamp(1.35rem, 2.6vw, 2.35rem);
  font-weight: 900;
  line-height: 1.08;
}

.login-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(24 34 48 / .08), rgb(24 34 48 / .58)),
    linear-gradient(90deg, rgb(47 111 174 / .24), transparent 58%);
  pointer-events: none;
}

.login-hero img,
.login-hero video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.95) contrast(1.02);
}

.hero-fallback {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgb(47 111 174 / .16), transparent 42%),
    linear-gradient(315deg, rgb(47 143 131 / .16), transparent 46%),
    var(--login-blue-soft);
}

.login-panel {
  order: 1;
  justify-content: center;
  gap: 1rem;
  padding: clamp(2rem, 5vw, 4.5rem);
  background: var(--login-surface);
}

.login-kicker {
  width: fit-content;
  margin: 0 0 .25rem;
  padding: .4rem .7rem;
  border: 1px solid #cde4fb;
  border-radius: 999px;
  background: var(--login-blue-soft);
  color: var(--login-blue);
  font-size: .78rem;
  font-weight: 900;
}

.login-brand {
  margin: 0;
  color: var(--login-ink);
  background: none;
  -webkit-background-clip: initial;
  font-family: var(--login-font);
  font-size: clamp(2.35rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1;
  text-align: left;
}

.login-sub {
  max-width: 32rem;
  margin: .4rem 0 1rem;
  color: var(--login-muted);
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
}

.login-form {
  gap: .9rem;
}

.field {
  min-height: 50px;
  padding: .7rem .9rem .7rem 2.8rem;
  border: 1px solid var(--login-line);
  border-radius: var(--login-radius);
  background: #fff;
}

.field:hover {
  border-color: #cfd6df;
  background: #fff;
}

.field:focus-within {
  border-color: var(--login-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgb(47 111 174 / .16);
}

.field input {
  color: var(--login-ink);
  font-size: .98rem;
  font-weight: 700;
}

.field input::placeholder {
  color: #98a2b3;
}

.icon {
  left: .95rem;
  color: var(--login-blue);
}

.btn-enter {
  width: 100%;
  min-height: 50px;
  justify-content: center;
  margin-top: .35rem;
  border-radius: var(--login-radius);
  border: 1px solid var(--login-blue);
  background: var(--login-blue);
  color: #fff;
  box-shadow: none;
  font-size: .98rem;
  font-weight: 900;
  text-transform: none;
}

.btn-enter:hover {
  filter: none;
  transform: none;
  border-color: #245a90;
  background: #245a90;
  color: #fff;
  box-shadow: none;
}

.btn-enter:active {
  transform: translateY(1px);
}

.alert-login {
  border-radius: var(--login-radius);
  background: #fff0ef;
  border-color: #f5cfcc;
  color: var(--login-danger);
  font-size: .92rem;
}

@media (max-width: 860px) {
  body.login-body {
    align-items: stretch;
  }

  .login-card {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .login-hero {
    order: 1;
    min-height: 220px;
    aspect-ratio: 16 / 7;
  }

  .login-hero::before {
    font-size: clamp(1.25rem, 6vw, 2rem);
  }

  .login-panel {
    order: 2;
    padding: 2rem 1.35rem 2.2rem;
  }
}

@media (max-width: 460px) {
  body.login-body {
    padding: .75rem;
  }

  .login-hero {
    min-height: 170px;
  }

  .login-brand {
    font-size: 2.35rem;
  }
}