.login-page{background:radial-gradient(ellipse at top right,#dceffa,transparent 60%),#f6f9fc!important}
.login-page .theme-nav{background:transparent;border-bottom:1px solid #dce7ef;padding-inline:max(24px,calc((100vw - 1180px)/2))}
.login-page .login-main{max-width:1100px;padding-block:36px!important}
.login-page .login-box{grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:24px!important;box-shadow:0 20px 70px #18354b0d!important;min-height:620px}
.login-page .login-brand-panel{background:linear-gradient(145deg,#123e58,#075985);color:#fff!important;position:relative;padding:44px!important;gap:28px}
.login-page .login-brand-logo{background:#ffffffed;padding:10px;border-radius:16px;width:76px;height:86px}
.login-page .login-brand-panel h1{font-family:"Segoe UI",Arial,sans-serif;font-size:36px;font-weight:650!important;line-height:1.2;letter-spacing:-1px}
.login-page .login-brand-panel .lead{color:#d9edf8;font-size:15px;line-height:1.8;opacity:1!important}
.login-page .login-brand-panel>small{color:#c2deec;opacity:1!important;font-size:10px}
.access-features{display:grid;gap:16px;font-size:13px;color:#e3f3fb}
.access-features span{display:flex;align-items:center;gap:12px}
.access-features i{font-size:19px;color:#91d7f4}
.login-page .login-form-panel{padding:40px!important}
.login-page .login-intro h2{font-size:28px;line-height:1.2}
.login-page .login-intro>p{font-size:14px;line-height:1.7;margin-top:10px}
.access-steps{display:flex;gap:22px;list-style:none;padding:0;margin:0 0 28px;font-size:12px;color:#60788b}
.access-steps li{display:flex;align-items:center;gap:8px}
.access-steps span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eef3f7;font-weight:600}
.access-steps [aria-current="step"]{color:#0369a1;font-weight:600}
.access-steps [aria-current="step"] span{color:white;background:#0369a1}
.login-page .form-label{font-size:13px}
.login-page .form-control{background:#fbfdff}
.login-page .btn-lg{min-height:50px;font-size:15px;font-weight:600}
.login-page .btn-link{font-size:13px}
.login-page .alert{font-size:13px;line-height:1.6}
.access-code-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#eaf6ff;color:#0369a1;font-size:26px;margin-bottom:16px}
#accessCode{font-size:24px;letter-spacing:.45em;text-align:center;font-variant-numeric:tabular-nums}
.access-expiry{font-size:13px;font-weight:600;color:#0369a1;font-variant-numeric:tabular-nums}
.access-footer{text-align:center;padding:0 24px 24px;color:#60788b;font-size:11px}
/* Verificación: conserva todas las indicaciones con un espaciado compacto. */
.login-page .login-form-panel:has(#codeForm:not(.hidden)){padding:24px 32px!important}
.login-page .login-form-panel:has(#codeForm:not(.hidden)) .login-intro{margin-bottom:12px!important}
.login-page .login-form-panel:has(#codeForm:not(.hidden)) .login-intro>a{margin-bottom:10px!important}
.login-page .login-form-panel:has(#codeForm:not(.hidden)) .access-steps{margin-bottom:12px}
.login-page .login-form-panel:has(#codeForm:not(.hidden)) .login-intro>p{margin-top:6px;margin-bottom:0;font-size:13px;line-height:1.5}
.login-page #codeForm{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.login-page #codeForm.hidden{display:none}
.login-page #codeForm .access-code-icon{width:36px;height:36px;font-size:21px;border-radius:10px;margin:0}
.login-page #codeForm p{margin:0;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.login-page #codeForm .form-label{margin:0}
.login-page #codeForm #accessCode{min-height:46px;padding:8px 12px;margin:0!important;font-size:22px;line-height:1.2}
.login-page #codeForm .btn-lg{min-height:44px;padding:10px 14px}
.login-page #codeForm #backToLogin{margin:0!important;padding:5px 8px;font-size:12px;min-height:36px}
.login-page #codeForm .alert{margin:0;padding:8px 12px}
@media(max-height:740px){
  .login-page .login-form-panel:has(#codeForm:not(.hidden)){padding:18px 26px!important}
  .login-page .login-form-panel:has(#codeForm:not(.hidden)) .login-intro{margin-bottom:8px!important}
  .login-page .login-form-panel:has(#codeForm:not(.hidden)) .login-intro>a{margin-bottom:8px!important}
  .login-page .login-form-panel:has(#codeForm:not(.hidden)) .access-steps{margin-bottom:8px}
  .login-page #codeForm{gap:6px}
  .login-page #codeForm .access-code-icon{display:none}
}
/* La altura depende del contenido y del espacio disponible en la pantalla. */
.login-page{min-height:100dvh!important;display:flex;flex-direction:column}
.login-page .theme-nav{min-height:64px;padding-block:12px;flex-shrink:0}
.login-page .login-main{flex:1 0 auto;padding:20px 24px!important;justify-content:center}
.login-page .login-box{min-height:0;max-width:1000px;margin:auto!important}
.login-page .login-brand-panel{padding:30px 36px!important;gap:20px;min-height:0}
.login-page .login-brand-logo{width:62px;height:70px;padding:8px;border-radius:12px}
.login-page .login-brand-panel h1{font-size:32px}
.login-page .login-brand-panel .lead{line-height:1.6;margin-bottom:0}
.login-page .login-brand-panel .mt-4{margin-top:18px!important}
.login-page .access-features{gap:10px;font-size:12px}
.login-page .login-form-panel{padding:28px 36px!important}
.login-page .login-intro{margin-bottom:18px!important}
.login-page .login-intro>a{margin-bottom:16px!important;font-size:13px}
.login-page .access-steps{margin-bottom:18px}
.login-page .login-intro>p{margin-bottom:0}
.login-page .access-footer{padding:0 20px 12px;flex-shrink:0;line-height:1.5}
@media(max-height:740px){
  .login-page .theme-nav{min-height:56px;padding-block:8px}
  .login-page .login-main{padding-block:12px!important}
  .login-page .login-brand-panel{padding:24px 30px!important;gap:14px}
  .login-page .login-brand-logo{width:48px;height:54px}
  .login-page .login-brand-panel h1{font-size:28px}
  .login-page .login-brand-panel .lead{font-size:13px;margin-top:10px!important}
  .login-page .login-brand-panel .mt-4{margin-top:12px!important}
  .login-page .login-form-panel{padding:22px 30px!important}
  .login-page .login-intro{margin-bottom:12px!important}
  .login-page .login-intro>a{margin-bottom:10px!important}
  .login-page .access-steps{margin-bottom:12px}
  .login-page .login-intro h2{font-size:25px}
  .login-page .login-intro>p{margin-top:6px;font-size:13px}
  .login-page #loginForm .mb-3{margin-bottom:12px!important}
  .login-page .form-control-lg,.login-page .input-group-lg>.form-control,.login-page .btn-lg{min-height:44px;font-size:15px}
  .login-page .access-code-icon{width:36px;height:36px;font-size:21px;margin-bottom:10px}
  .login-page #codeForm p{margin-bottom:10px}
}
@media(max-width:991.98px){.login-page .login-box{grid-template-columns:minmax(0,1fr);min-height:0;max-width:500px}.login-page .login-form-panel{padding:36px!important}}
@media(max-width:420px){.login-page .login-main{padding:20px 14px!important}.login-page .login-form-panel{padding:26px 22px!important}.login-page .login-intro h2{font-size:25px}.access-steps{gap:16px;font-size:11px}.login-page .theme-nav{min-height:68px}.access-footer{font-size:10px}}
@media(max-width:991.98px) and (max-height:740px){
  .login-page .login-main{padding:10px 14px!important}
  .login-page .login-form-panel{padding:20px 22px!important}
  .login-page .theme-nav{min-height:52px;flex-wrap:nowrap;gap:12px;padding:8px 20px}
  .login-page .theme-brand{font-size:18px}
  .login-page .theme-nav nav{gap:14px;font-size:12px}
  .login-page .access-footer{padding-bottom:8px;font-size:10px}
}