@import url('/css/design-system.css');

body { min-height: 100vh; display: grid; place-items: center; padding: 28px; background:
  radial-gradient(circle at 15% 20%, rgba(37,99,235,.10), transparent 32%),
  radial-gradient(circle at 85% 80%, rgba(245,158,11,.10), transparent 30%),
  #f4f7fb; }
.login-shell { width: min(980px, 100%); min-height: 580px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); background: #fff; border: 1px solid var(--edu-border); border-radius: 28px; overflow: hidden; box-shadow: 0 24px 70px rgba(15,31,51,.13); }
.login-panel { padding: clamp(32px, 6vw, 68px); display: flex; flex-direction: column; justify-content: center; }
.login-brand-panel { position: relative; overflow: hidden; background: linear-gradient(145deg, #0f1f33 0%, #173459 72%, #1d4ed8 140%); color: #fff; }
.login-brand-panel::after { content: ''; position: absolute; width: 300px; height: 300px; right: -120px; bottom: -120px; border-radius: 50%; border: 58px solid rgba(255,255,255,.06); }
.login-logo { width: 150px; max-height: 70px; object-fit: contain; object-position: left; margin-bottom: 42px; }
.login-brand-panel h2 { margin: 0 0 14px; font-size: clamp(28px, 3.3vw, 42px); letter-spacing: -.045em; line-height: 1.03; }
.login-brand-panel p { margin: 0; max-width: 390px; color: #c8d6e8; font-size: 15px; line-height: 1.65; }
.login-chip { display: inline-flex; align-self: flex-start; margin-top: 26px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); padding: 8px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #e7eef7; }
.login-form-panel { background: #fff; }
.login-kicker { color: var(--edu-blue); text-transform: uppercase; letter-spacing: .09em; font-size: 11px; font-weight: 800; }
.login-form-panel h1 { margin: 8px 0 8px; font-size: 31px; line-height: 1.1; letter-spacing: -.04em; color: #172033; }
.login-form-panel .subtitle { margin: 0 0 28px; color: var(--edu-muted); }
.login-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.login-field label { font-size: 13px; font-weight: 730; color: #344054; }
.login-field input { width: 100%; height: 46px; border: 1px solid var(--edu-border-strong); border-radius: 11px; padding: 0 13px; color: var(--edu-text); background: #fff; outline: none; }
.login-field input:focus { border-color: #84adff; box-shadow: 0 0 0 4px rgba(37,99,235,.1); }
#b_logar, #entrar { width: 100%; min-height: 46px; margin: 8px 0 0; border: 0; border-radius: 11px; background: var(--edu-blue); color: #fff; font-weight: 750; font-size: 14px; text-shadow: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 5px 12px rgba(37,99,235,.2); }
#b_logar:hover, #entrar:hover { background: #1d4ed8; }
#entrar { display: none; }
.login-footer { margin-top: 24px; color: #98a2b3; font-size: 11px; }
#links, #saudacao { display: none; }
@media (max-width: 760px) { body { padding: 14px; } .login-shell { grid-template-columns: 1fr; min-height: 0; border-radius: 20px; } .login-brand-panel { min-height: 220px; padding: 30px; } .login-logo { margin-bottom: 22px; width: 125px; } .login-brand-panel h2 { font-size: 28px; } .login-brand-panel p { font-size: 13px; } .login-form-panel { padding: 30px; } }