/* Presentación del acceso: conserva formularios, rutas y autenticación. */
@media screen {
  html body.is-login:not(.is-authenticated):has(#loginScreen) {
    min-height: 100svh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 24px !important;
    overflow: auto !important;
    background: radial-gradient(ellipse at 8% 0%, #dce8f9, transparent 55%), #f0f4fa !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
  }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr) !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 1160px !important;
    min-height: 680px !important;
    height: auto !important;
    max-height: none !important;
    margin: 12px auto !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 24px 70px #123d781c !important;
    animation: none !important;
  }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen::before,
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen::after { content: none !important; display: none !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-photo-brand {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    min-height: 100% !important;
    padding: 56px !important;
    background: linear-gradient(145deg, #092e68f5, #123d78e0 60%, #14519bd9), url('../assets/fondo-aerea-colegio-login.jpg') center/cover !important;
    color: #fff !important;
    overflow: hidden !important;
  }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-photo-brand::before,
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-photo-brand::after { content: none !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-photo-content {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
    transform: none !important;
  }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-photo-logo {
    display: block !important;
    width: 116px !important;
    height: 116px !important;
    margin: 0 0 36px !important;
    padding: 12px !important;
    border-radius: 24px !important;
    object-fit: contain !important;
    background: #ffffffed !important;
    box-shadow: 0 10px 28px #031b4233 !important;
    animation: none !important;
    filter: none !important;
  }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-photo-content > span {
    display: block !important;
    margin: 0 0 8px !important;
    color: #c8daf6 !important;
    -webkit-text-fill-color: #c8daf6 !important;
    font: 600 16px/1.2 "Segoe UI", Arial, sans-serif !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
  }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-photo-content > strong {
    display: block !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font: 750 clamp(42px, 4.6vw, 64px)/1.05 "Segoe UI", Arial, sans-serif !important;
    letter-spacing: -.045em !important;
    text-shadow: none !important;
  }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-photo-content > i {
    display: block !important;
    width: 48px !important;
    height: 5px !important;
    margin: 24px 0 !important;
    border-radius: 5px !important;
    background: #ffdb55 !important;
    box-shadow: none !important;
  }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-photo-content > p {
    text-align: left !important;
    margin: 0 !important;
    max-width: 360px !important;
    color: #e0eafb !important;
    -webkit-text-fill-color: #e0eafb !important;
    font: 400 20px/1.6 "Segoe UI", Arial, sans-serif !important;
    text-shadow: none !important;
  }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-photo-content > p b { color: #ffdf67 !important; -webkit-text-fill-color: #ffdf67 !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-modern-values {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    margin-top: 36px !important;
  }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-modern-values span {
    min-height: 0 !important;
    height: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px 11px !important;
    border: 1px solid #ffffff2c !important;
    border-radius: 9px !important;
    background: #ffffff0b !important;
  }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-modern-values b { color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 12px !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-modern-values i { color: #ffdf67 !important; -webkit-text-fill-color: #ffdf67 !important; font-size: 14px !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-panel {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 42px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #10243f !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    animation: none !important;
  }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-badge {
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-badge img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-title-block { display: block !important; align-items: stretch !important; margin: 0 0 26px !important; text-align: left !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen #loginSystemTitle { margin: 0 0 8px !important; text-align: left !important; color: #10243f !important; -webkit-text-fill-color: #10243f !important; font: 750 32px/1.15 "Segoe UI", Arial, sans-serif !important; letter-spacing: -.025em !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-title-block > p { margin: 0 !important; text-align: left !important; color: #60718a !important; -webkit-text-fill-color: #60718a !important; font: 14px/1.5 "Segoe UI", Arial, sans-serif !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-title-block::after { margin-left: 0 !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-title-block :is(h1,p) { display: block !important; width: 100% !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-modern-values span { aspect-ratio: auto !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-form { display: grid !important; gap: 15px !important; width: 100% !important; margin: 0 !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-form > * { grid-row: auto !important; grid-column: auto !important; order: initial !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-field-group { display: grid !important; gap: 16px !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-label-text { display: block !important; margin-bottom: 7px !important; color: #203754 !important; -webkit-text-fill-color: #203754 !important; font: 650 13px/1.3 "Segoe UI", Arial, sans-serif !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-input-shell { position: relative !important; display: flex !important; align-items: center !important; gap: 10px !important; min-height: 50px !important; padding: 0 14px !important; border: 1px solid #cbd7e7 !important; border-radius: 11px !important; background: #f8fafd !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-input-shell:focus-within { border-color: #2460ac !important; box-shadow: 0 0 0 3px #2460ac20 !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-input-shell > i { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; color: #4a6c98 !important; -webkit-text-fill-color: #4a6c98 !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 16px !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen :is(.login-input-shell,.login-field-label,.login-remember)::before,
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen :is(.login-input-shell,.login-field-label,.login-remember)::after { content: none !important; display: none !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-form input:not([type="checkbox"]) { width: 100% !important; min-width: 0 !important; height: 48px !important; min-height: 48px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #10243f !important; -webkit-text-fill-color: #10243f !important; font: 15px "Segoe UI", Arial, sans-serif !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-form input::placeholder { color: #71829b !important; -webkit-text-fill-color: #71829b !important; opacity: 1 !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .password-field input { padding-right: 34px !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen #toggleLoginPassword { position: absolute !important; right: 8px !important; top: 5px !important; width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #123d78 !important; -webkit-text-fill-color: #123d78 !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen #toggleLoginPassword i { color: inherit !important; -webkit-text-fill-color: inherit !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-options-row { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; gap: 10px !important; margin: 0 !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-remember { display: flex !important; align-items: center !important; gap: 7px !important; color: #435c7c !important; font-size: 12px !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-remember input { width: 16px !important; height: 16px !important; min-height: 16px !important; accent-color: #123d78; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-remember span { color: #435c7c !important; -webkit-text-fill-color: #435c7c !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-forgot-link { color: #123d78 !important; -webkit-text-fill-color: #123d78 !important; font-size: 12px !important; font-weight: 600 !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen #loginStaffHint { position: static !important; width: 100% !important; max-width: none !important; display: inline-flex !important; text-align: left !important; align-items: center !important; gap: 6px !important; flex-basis: 100% !important; color: #60718a !important; -webkit-text-fill-color: #60718a !important; font: 11px/1.5 "Segoe UI", Arial, sans-serif !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen #loginStaffHint i { color: inherit !important; -webkit-text-fill-color: inherit !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-submit { display: flex !important; justify-content: center !important; align-items: center !important; gap: 12px !important; min-height: 48px !important; padding: 12px 16px !important; border: 1px solid #ecc03e !important; border-radius: 11px !important; background: #ffdc62 !important; color: #10243f !important; -webkit-text-fill-color: #10243f !important; font: 750 15px/1.3 "Segoe UI", Arial, sans-serif !important; box-shadow: 0 6px 16px #edc34c25 !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-submit :is(span,i) { color: #10243f !important; -webkit-text-fill-color: #10243f !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen #guardianAccessBtn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; min-height: 44px !important; padding: 11px 14px !important; border: 1px solid #cbd7e7 !important; border-radius: 11px !important; background: #fff !important; color: #123d78 !important; -webkit-text-fill-color: #123d78 !important; font: 650 12px/1.35 "Segoe UI", Arial, sans-serif !important; text-decoration: none !important; box-shadow: none !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen #guardianAccessBtn :is(span,i) { color: #123d78 !important; -webkit-text-fill-color: #123d78 !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-secure-separator { display: none !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen #loginHelp { color: #b91c1c !important; -webkit-text-fill-color: #b91c1c !important; font: 13px/1.4 "Segoe UI", Arial, sans-serif !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen #loginHelp:empty { display: none !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .guardian-login-notice { background: #fff7d7 !important; color: #43536b !important; -webkit-text-fill-color: #43536b !important; padding: 11px !important; border-radius: 9px !important; font-size: 12px !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen [hidden] { display: none !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-modern-note { display: flex !important; align-items: start !important; gap: 8px !important; padding-top: 10px !important; margin: 0 !important; border-top: 1px solid #e5ebf3 !important; color: #75849b !important; -webkit-text-fill-color: #75849b !important; font: 11px/1.55 "Segoe UI", Arial, sans-serif !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-platform-watermark { display: block !important; margin: 0 !important; text-align: center !important; color: #7c8da6 !important; -webkit-text-fill-color: #7c8da6 !important; font-size: 10px !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen :is(button,a,input):focus-visible { outline: 2px solid #2460ac !important; outline-offset: 3px !important; }
}
@media screen and (max-width: 860px) {
  html body.is-login:not(.is-authenticated):has(#loginScreen) { padding: 18px !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen { max-width: 480px !important; min-height: 0 !important; grid-template-columns: minmax(0, 1fr) !important; margin: 12px auto !important; border-radius: 20px !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-photo-brand { display: none !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-panel { padding: 30px !important; }
}
@media screen and (max-width: 420px) {
  html body.is-login:not(.is-authenticated):has(#loginScreen) { padding: 12px !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .login-panel { padding: 24px !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen #loginSystemTitle { font-size: 29px !important; }
}

@media screen { html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen .guardian-login-notice:not([hidden]) { display: flex !important; gap: 8px !important; align-items: start !important; } }
@media screen {
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen #guardianLoginNotice#guardianLoginNotice:not([hidden]) { display: flex !important; visibility: visible !important; opacity: 1 !important; position: static !important; transform: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; margin: 0 !important; padding: 11px !important; background: #fff7d7 !important; color: #43536b !important; -webkit-text-fill-color: #43536b !important; font: 12px/1.5 "Segoe UI", Arial, sans-serif !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen #guardianLoginNotice#guardianLoginNotice :is(span,b) { display: block !important; position: static !important; transform: none !important; visibility: visible !important; opacity: 1 !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; overflow: visible !important; white-space: normal !important; color: #43536b !important; -webkit-text-fill-color: #43536b !important; font-size: 12px !important; line-height: 1.5 !important; }
  html body.is-login:not(.is-authenticated) #loginScreen#loginScreen#loginScreen #guardianLoginNotice#guardianLoginNotice > span { flex: 1 1 auto !important; }
}