/* Tela de login */
.login { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); min-height: 100dvh; }
.login-col { display: flex; flex-direction: column; gap: 2.5rem; padding: 2rem clamp(1rem, 5vw, 3.5rem); background: var(--bg); }
.login-brand { display: flex; align-items: center; gap: 0.7rem; color: var(--ink); text-decoration: none; width: fit-content; }
.login-brand:hover { color: var(--ink); }
.login-brand img { width: 36px; height: 36px; }
.login-brand .wm { display: grid; line-height: 1.1; }
.login-brand .wm b { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.login-brand .wm span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

.login-form { display: grid; gap: 1.1rem; width: 100%; max-width: 380px; margin-block: auto; animation: login-in 320ms var(--ease-out) both; }
@keyframes login-in { from { opacity: 0; transform: translateY(6px); } }
.login-titles { display: grid; gap: 0.5rem; margin-bottom: 0.4rem; }
.login-titles h1 { font-size: 1.65rem; letter-spacing: -0.025em; }
.login-titles p { color: var(--ink-3); font-size: 0.92rem; max-width: 42ch; }
.login-form .input { min-height: 42px; }
.login-form .input-group .input { padding-left: 0.7rem; padding-right: 2.6rem; }
.login-submit { min-height: 44px; font-size: 0.95rem; margin-top: 0.35rem; }
.login-form .callout { grid-template-columns: 1fr; }

.login-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--ink-3); }

/* Painel lateral: folha pautada com uma chave de acesso fictícia em grupos, desenhada só com CSS. */
.login-art {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in oklch, var(--line) 70%, transparent) 31px 32px),
    var(--surface-2);
  border-left: 1px solid var(--line);
}
.login-art::before {
  content: "CHAVE DE ACESSO\A 4314 9022 1234 5678 0001\A 9500 0000 0000 0104 0260\A 9281 2345 67";
  position: absolute; left: 12%; top: 320px;
  white-space: pre; font-family: var(--font-mono); font-size: clamp(0.95rem, 1.6vw, 1.3rem);
  letter-spacing: 0.06em; line-height: 32px; color: var(--ink-3); opacity: 0.7;
}

@media (max-width: 860px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-art { display: none; }
  .login-col { min-height: 100dvh; }
}
@media (prefers-reduced-motion: reduce) { .login-form { animation: none; } }