:root {
  color-scheme: light;
  font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #153653;
  background: #143a5a;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.login-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.skip-link { position: absolute; top: 8px; left: 16px; z-index: 2; padding: 10px 16px; background: white; color: #143a5a; border-radius: 6px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.login-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 9px clamp(20px, 4vw, 68px); background: #143a5a; color: #fff; }
.irya-brand { display: flex; align-items: center; gap: 26px; min-width: 0; }
.irya-logo { width: auto; height: 70px; object-fit: contain; flex: none; }
.unam-logo { width: auto; height: 66px; object-fit: contain; flex: none; }
.brand-title { padding-left: 26px; border-left: 1px solid #8295a6; font-size: clamp(21px, 2.2vw, 29px); letter-spacing: -.03em; white-space: nowrap; }
.brand-title strong { font-weight: 750; }
.login-scene {
  flex: 1;
  min-height: calc(100vh - 88px);
  min-height: calc(100svh - 88px);
  display: grid;
  place-items: center;
  padding: 48px 16px 80px;
  background-color: #637c92;
  background-image: linear-gradient(rgba(10, 35, 65, .35), rgba(10, 35, 65, .35)), url("img/login/background.png");
  background-size: cover;
  background-position: center;
}
.login-card { width: min(420px, 100%); padding: 36px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 14px; background: rgba(255, 255, 255, .98); box-shadow: 0 12px 40px rgba(0, 0, 0, .2); }
.card-heading { text-align: center; margin-bottom: 28px; }
.card-heading h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.035em; margin: 0 0 12px; color: #102f50; font-weight: 750; }
.card-heading p { margin: 0; color: #526780; font-size: 15px; text-wrap: balance; }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 650; color: #153653; }
.input-wrap { position: relative; }
.field-icon { position: absolute; left: 13px; top: 14px; width: 20px; height: 20px; color: #5c718a; pointer-events: none; }
.input-wrap input { display: block; width: 100%; min-width: 0; height: 48px; padding: 11px 14px 11px 42px; border: 1px solid #a5b4c6; border-radius: 6px; background: #fff; color: #153653; font-size: 15px; outline: none; }
.input-wrap input::placeholder { color: #64758b; opacity: 1; }
.input-wrap input:hover { border-color: #637e9d; }
.input-wrap input:focus-visible { border-color: #0d63ad; box-shadow: 0 0 0 3px rgba(13, 99, 173, .2); }
.input-wrap input[aria-invalid="true"] { border-color: #ad3941; }
.input-wrap input:disabled { cursor: not-allowed; color: #64758b; background: #e9edf2; }
.password-wrap input { padding-right: 50px; }
.password-toggle { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 4px; color: #5c718a; background: transparent; padding: 10px; }
.password-toggle[hidden] { display: none; }
.password-toggle:hover { color: #143a5a; background: #e9eff5; }
.password-toggle svg { width: 22px; height: 22px; }
.password-toggle[aria-pressed="true"] .eye-slash { display: none; }
.password-toggle:disabled { cursor: not-allowed; opacity: .55; }
.login-submit { width: 100%; min-height: 50px; display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 4px; border: 1px solid #075b9f; border-radius: 6px; padding: 11px 16px; background: #0865b6; color: #fff; font-size: 16px; font-weight: 650; }
.login-submit svg { width: 22px; height: 22px; }
.login-submit:hover { background: #075596; }
.login-submit:active { background: #064578; }
.login-submit:disabled { cursor: not-allowed; background: #617b92; border-color: #617b92; }
button:focus-visible, .skip-link:focus-visible { outline: 3px solid #2b7ebc; outline-offset: 3px; }
.access-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 26px 0 0; padding-top: 20px; border-top: 1px solid #d1dae4; color: #526780; font-size: 12px; text-align: center; }
.access-note svg { width: 16px; height: 16px; flex: none; }
.login-error { margin: 0 0 22px; padding: 12px 14px; border: 1px solid #e3b2b6; border-radius: 6px; background: #fff1f2; color: #8b2531; font-size: 14px; }
@media (max-width: 600px) {
  .login-header { min-height: 72px; gap: 16px; padding: 10px 16px; }
  .irya-brand { gap: 16px; }
  .irya-logo { height: 50px; }
  .unam-logo { height: 48px; }
  .brand-title { padding-left: 16px; font-size: 20px; }
  .login-scene { min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); padding: 32px 16px 48px; background-position: 54% center; }
  .login-card { padding: 30px 24px; }
  .card-heading h1 { font-size: 28px; }
}
@media (max-width: 360px) {
  .irya-brand { gap: 10px; }
  .brand-title { padding-left: 10px; font-size: 17px; }
  .irya-logo { height: 46px; }
  .unam-logo { height: 44px; }
  .login-card { padding: 28px 20px; }
}
@media (max-height: 600px) and (min-width: 601px) {
  .login-scene { padding-top: 28px; padding-bottom: 28px; }
}