/* La pantalla de acceso, del branding del legado:
   legacy/branding/vertical_band.html.twig en 637058c, verbatim. */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100% !important; max-width: none !important; min-height: 100%; margin: 0 !important; padding: 0 !important; }
body { background: #eef3fa; color: #17233d; overflow-x: hidden; }
.syn-login-shell { width: 100vw; max-width: none; min-height: 100vh; margin: 0; display: grid; grid-template-columns: minmax(540px, 610px) minmax(0, 1fr); background: #fff; }
.syn-login-access { display: flex; min-height: 100vh; padding: 46px 34px 34px; background: radial-gradient(circle at 0 0, #f4f1ff 0, transparent 32%), #fff; }
.syn-login-inner { width: min(100%, 540px); margin: auto 0; display: flex; min-height: calc(100vh - 80px); flex-direction: column; }
.syn-institute-logo { display: block; width: 310px; max-width: 80%; height: 116px; object-fit: contain; object-position: center; margin: 0 auto 58px; }
.syn-eyebrow { color: #6046df; font-weight: 750; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.syn-login-access h1 { margin: 0; color: #17233d; font-size: clamp(34px, 3vw, 49px); line-height: 1.06; letter-spacing: -.045em; font-weight: 760; }
.syn-login-intro { margin: 18px 0 34px; color: #657189; font-size: 17px; line-height: 1.55; }
.syn-login-form .form-group { display: block !important; margin: 0 0 20px !important; }
.syn-login-form .form-group > label { display: block; max-width: none; margin: 0 0 9px; padding: 0; color: #17233d; font-size: 14px; font-weight: 720; }
.syn-login-form .form-group > .col,
.syn-login-form .form-group > [class*="col-"] { width: 100%; max-width: none; padding: 0; }
.syn-login-form .input-group { display: flex; flex-wrap: nowrap; }
.syn-login-form .form-control { width: 100%; height: 58px; border: 1px solid #ccd6e4; border-radius: 13px; padding: 0 17px; color: #17233d; font-size: 16px; background: #fbfcfe; box-shadow: none; }
.syn-login-form .form-control:focus { border-color: #0878ff; box-shadow: 0 0 0 4px rgba(8,120,255,.12); background: #fff; }
.syn-login-form .input-group .form-control { border-radius: 13px 0 0 13px; }
.syn-login-form .input-group-append { margin: 0; }
.syn-login-form .input-group-text { height: 58px; min-width: 52px; justify-content: center; border-color: #ccd6e4; border-radius: 0 13px 13px 0; background: #fbfcfe; color: #75829a; }
.syn-login-form #login-button { width: 100%; min-height: 58px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #0878ff, #5a46e8); box-shadow: 0 12px 26px rgba(8,120,255,.23); font-size: 16px; font-weight: 780; }
.syn-login-form #login-button:hover, .syn-login-form #login-button:focus { filter: brightness(.97); transform: translateY(-1px); }
.syn-login-form .btn-secondary { border-radius: 13px; }
.syn-login-form .alert { border-radius: 12px; }
.syn-privacy { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; color: #75829a; font-size: 13px; }
.syn-privacy i { font-size: 13px; }
.syn-developer { margin-top: auto; padding-top: 48px; display: flex; align-items: center; gap: 13px; color: #8994a8; font-size: 12px; }
.syn-software-logo { display: block; width: 150px; height: 50px; object-fit: contain; object-position: left center; opacity: .78; }
.syn-login-visual { position: relative; min-height: 100vh; overflow: hidden; background: #162239; }
.syn-login-visual > img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.92) contrast(1.02); }
.syn-login-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,26,52,.02) 38%, rgba(12,26,52,.84) 100%), linear-gradient(90deg, rgba(20,31,54,.14), transparent 35%); }
.syn-visual-copy { position: absolute; z-index: 1; left: 34px; right: 34px; bottom: 28px; color: #fff; }
.syn-visual-copy p { max-width: 520px; margin: 0; font-size: 18px; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; }
.syn-visual-copy small { display: block; margin-top: 7px; color: rgba(255,255,255,.72); font-size: 12px; }
@media (max-width: 820px) {
  .syn-login-shell { grid-template-columns: 1fr; }
  .syn-login-visual { display: none; }
  .syn-login-access { padding: 30px 24px 24px; }
  .syn-login-inner { min-height: calc(100vh - 54px); }
  .syn-institute-logo { width: 270px; margin-bottom: 40px; }
  .syn-developer { justify-content: center; }
}