:root {
    --navy: #142e58;
    --ink: #1d2e45;
    --muted: #64748b;
    --line: #dce4ed;
    --soft-blue: #edf5ff;
    --orange: #ff7900;
    --orange-dark: #de6500;
    --green: #16835d;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
}

* { box-sizing: border-box; }
body { position: relative; min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 50% 22%, #fff 0, #f9fbfd 48%, #edf3f8 100%); }
body::before { position: fixed; z-index: -2; inset: 0 auto 0 0; width: min(36vw, 530px); content: ""; opacity: .15; background: linear-gradient(90deg, rgba(247,250,253,.18), rgba(247,250,253,.96)), url('/assets/brand/facultad-san-fernando.jpg') left bottom / auto 80% no-repeat; }
body::after { position: fixed; z-index: -2; right: -165px; bottom: -176px; width: 450px; height: 450px; border: 2px solid rgba(67, 106, 150, .08); border-radius: 50%; content: "UNMSM"; color: rgba(67, 106, 150, .08); font-family: Georgia, serif; font-size: 68px; font-weight: 700; line-height: 450px; text-align: center; transform: rotate(-22deg); }
button, input { font: inherit; }
.ambient-motto { position: fixed; z-index: -1; top: 8.3vh; right: max(5vw, 42px); color: rgba(30, 61, 107, .24); font-family: Georgia, serif; font-size: clamp(1rem, 1.55vw, 1.34rem); font-style: italic; line-height: 1.02; }
.ambient-motto span { display: block; width: 54px; height: 2px; margin-top: 19px; background: rgba(210, 143, 46, .58); }
.page-shell { display: grid; min-height: calc(100vh - 74px); place-items: center; padding: 70px 24px 42px; }
.access-card { width: min(100%, 678px); overflow: hidden; border: 1px solid rgba(223, 231, 239, .9); border-radius: 22px; background: rgba(255, 255, 255, .94); box-shadow: 0 24px 70px rgba(29, 54, 87, .12); backdrop-filter: blur(6px); }
.card-header { display: flex; align-items: center; justify-content: center; gap: 30px; padding: 48px 48px 25px; }
.institutional-lockup { display: block; width: min(295px, 46vw); height: auto; }
.brand-divider { width: 1px; height: 106px; background: #9eafc7; }
.elsevier-logo { display: block; width: min(138px, 21vw); height: auto; }
.intro { padding: 16px 34px 10px; text-align: center; }
h1 { margin: 0; color: #092752; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 5.7vw, 2.75rem); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; }
.subtitle { margin: 10px 0 0; color: #627392; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1rem, 2.4vw, 1.22rem); }
.access-form { padding: 30px 84px 14px; }
fieldset { min-width: 0; padding: 0; border: 0; }
legend, label { display: block; margin-bottom: 10px; color: #374a66; font-size: .9rem; font-weight: 700; }
.segmented-control { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 1px solid #dbe4ef; border-radius: 999px; background: #fff; }
.type-button { min-height: 45px; border: 0; border-radius: 999px; color: #25395b; background: transparent; font-family: Georgia, serif; font-size: 1rem; font-weight: 600; cursor: pointer; }
.type-button.is-selected { color: #07519a; background: linear-gradient(105deg, #edf6ff, #d7e9ff); box-shadow: none; }
.type-button:focus-visible, input:focus-visible, .submit-button:focus-visible, .login-submit-button:focus-visible { outline: 3px solid rgba(32, 115, 199, .38); outline-offset: 2px; }
.field-group { margin-top: 23px; }
input { width: 100%; min-height: 60px; padding: 0 19px; border: 1px solid #bfcce0; border-radius: 9px; color: var(--navy); background: #fff; font-size: 1rem; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
input::placeholder { color: #94a3b8; }
input:focus { border-color: #3977bd; box-shadow: 0 0 0 3px rgba(57, 119, 189, .13); }
.field-hint { margin: 8px 0 0; color: var(--muted); font-size: .79rem; line-height: 1.45; }
.submit-button { display: inline-flex; width: 100%; min-height: 62px; align-items: center; justify-content: center; gap: 13px; margin-top: 26px; padding: 0 18px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(110deg, #ff7400, #ff820d); font-family: Georgia, serif; font-size: 1.12rem; font-weight: 700; cursor: pointer; box-shadow: 0 8px 16px rgba(227, 104, 17, .18); transition: background-color .15s ease, transform .15s ease; }
.submit-button:not(:disabled):hover { background: var(--orange-dark); transform: translateY(-1px); }
.submit-button:disabled { color: #fff; background: #c8d2dd; box-shadow: none; cursor: not-allowed; }
.submit-button svg { width: 20px; height: 20px; }
.login-submit-button { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 10px; margin-top: 11px; padding: 0 16px; border: 1px solid #b9cbe0; border-radius: 10px; color: #174f88; background: #fff; font-size: .91rem; font-weight: 700; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.login-submit-button:not(:disabled):hover { border-color: #6d9dcc; background: #f3f8fe; transform: translateY(-1px); }
.login-submit-button:disabled { color: #8796a8; border-color: #d6dee7; background: #f7f9fb; cursor: not-allowed; }
.login-submit-button svg { width: 18px; height: 18px; }
.spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.48); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.login-submit-button .spinner { border-color: rgba(23, 79, 136, .25); border-top-color: #174f88; }
.is-loading .spinner { display: block; }
.is-loading svg { display: none; }
.account-help { margin: 10px 4px 0; color: var(--muted); font-size: .76rem; line-height: 1.45; text-align: center; }
.status-message { min-height: 24px; margin: 15px 0 0; color: var(--muted); font-size: .91rem; line-height: 1.45; text-align: center; }
.status-message.is-error { color: #b1332b; }
.status-message.is-success { color: var(--green); font-weight: 700; }
.redirect-note { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 0; padding: 9px 34px 32px; color: #5c6d83; font-size: .87rem; line-height: 1.45; text-align: center; }
.redirect-note svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--green); }
.card-footer { display: grid; grid-template-columns: 1fr 1fr; margin: 0 84px; border-top: 1px solid #dfe7ef; background: transparent; }
.card-footer span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 78px; padding: 12px 16px; color: #53677f; font-size: .8rem; font-weight: 600; line-height: 1.35; text-align: center; }
.card-footer span + span { border-left: 1px solid #ccd8e7; }
.card-footer svg { width: 18px; height: 18px; color: #376ba5; }
.institutional-footer { padding: 0 20px 26px; color: #7081a0; font-size: .68rem; font-weight: 700; letter-spacing: .3em; text-align: center; text-transform: uppercase; }
.institutional-footer span { display: inline-block; width: 30px; height: 1px; margin: 0 10px 3px; background: #d3a046; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 620px) { body::before, body::after, .ambient-motto { display: none; } .page-shell { min-height: calc(100vh - 58px); padding: 18px 12px 22px; } .access-card { border-radius: 15px; } .card-header { gap: 16px; padding: 28px 20px 18px; } .institutional-lockup { width: min(245px, 53vw); } .brand-divider { height: 72px; } .elsevier-logo { width: min(110px, 23vw); } .intro { padding: 18px 21px 7px; } .access-form { padding: 24px 21px 12px; } .card-footer { margin: 0 21px; } .card-footer span { min-height: 60px; padding: 10px 8px; font-size: .73rem; } .redirect-note { padding: 8px 21px 23px; } .institutional-footer { padding-bottom: 18px; font-size: .55rem; letter-spacing: .18em; } .institutional-footer span { width: 17px; margin-inline: 5px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }