:root{--sd-blue:#005ca9;--sd-blue-deep:#003b70;--sd-cyan:#00a6cf;--sd-ink:#14283b;--sd-muted:#647789;--sd-border:#d9e3eb;--sd-focus:rgba(0,114,188,.22)}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;min-height:100%;font-family:Arial,"Helvetica Neue",sans-serif}
body.sd-login-page{min-height:100dvh;overflow-x:hidden;background:#eef4f8;color:var(--sd-ink);font-size:14px}
.sd-login-shell{width:100%;min-height:100dvh;margin-inline:auto;background:#fff}
.sd-login-visual{display:none}
.sd-login-panel{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));background:linear-gradient(160deg,#f5f9fc 0%,#fff 42%,#edf5fa 100%)}
.sd-mobile-brand{width:min(100%,440px);margin:0 auto clamp(1.1rem,4vh,1.8rem);text-align:center}
.sd-mobile-brand img{display:block;width:clamp(150px,48vw,205px);height:auto;margin:0 auto .85rem;object-fit:contain}
.sd-mobile-brand div{display:grid;gap:.2rem;color:var(--sd-blue-deep);font-size:.76rem;line-height:1.3}
.sd-mobile-brand div span{color:var(--sd-muted)}
.sd-mobile-brand h1{margin:.8rem 0 0;color:var(--sd-blue);font-size:clamp(1.7rem,9vw,2.35rem);font-weight:750;letter-spacing:-.035em}
.sd-login-card{width:min(100%,440px);margin-inline:auto;padding:clamp(1.25rem,6vw,2rem);background:rgba(255,255,255,.96);border:1px solid rgba(205,220,231,.92);border-radius:clamp(1rem,4vw,1.4rem);box-shadow:0 1.25rem 3rem rgba(28,66,96,.12)}
.sd-login-heading>span{display:block;margin-bottom:.45rem;color:var(--sd-blue);font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.sd-login-heading h2{margin:0;color:var(--sd-ink);font-size:clamp(1.75rem,7vw,2.45rem);font-weight:750;letter-spacing:-.035em}
.sd-login-heading p{margin:.55rem 0 1.35rem;color:var(--sd-muted);font-size:.9rem;line-height:1.5}
.sd-login-alert{display:flex;align-items:flex-start;gap:.65rem;margin-bottom:1.1rem;padding:.75rem .85rem;border-radius:.7rem;font-size:.82rem;line-height:1.4}
.sd-login-alert i{margin-top:.1rem;flex:0 0 auto}
.sd-login-form{display:grid;gap:1.05rem}
.sd-field{display:grid;gap:.4rem}
.sd-field label{font-size:.82rem;font-weight:700;color:#263d52}
.sd-field small{color:#778898;font-size:.7rem}
.sd-input-wrap{min-height:48px;display:flex;align-items:center;border:1px solid var(--sd-border);border-radius:.7rem;background:#fff;transition:border-color .18s ease,box-shadow .18s ease}
.sd-input-wrap:focus-within{border-color:var(--sd-blue);box-shadow:0 0 0 .22rem var(--sd-focus)}
.sd-input-wrap>i{width:46px;flex:0 0 46px;text-align:center;color:var(--sd-blue);font-size:1rem}
.sd-input-wrap input{width:100%;min-width:0;height:46px;border:0;outline:0;background:transparent;color:var(--sd-ink);font-size:.9rem;padding:.65rem .7rem .65rem 0}
.sd-input-wrap input::placeholder{color:#91a0ad;opacity:1}
.sd-password-toggle{width:46px;height:46px;flex:0 0 46px;border:0;border-radius:.6rem;background:transparent;color:#60788d;font-size:1rem}
.sd-password-toggle:hover{color:var(--sd-blue);background:#edf6fb}
.sd-password-toggle:focus-visible,.sd-login-submit:focus-visible,.sd-forgot-link:focus-visible{outline:3px solid var(--sd-focus);outline-offset:2px}
.sd-login-submit{min-height:48px;margin-top:.25rem;display:flex;align-items:center;justify-content:center;gap:.75rem;border:1px solid var(--sd-blue);border-radius:.72rem;background:linear-gradient(110deg,var(--sd-blue-deep),var(--sd-blue));color:#fff;font-size:.9rem;font-weight:750;box-shadow:0 .7rem 1.4rem rgba(0,92,169,.2);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.sd-login-submit:hover{filter:brightness(1.07);box-shadow:0 .85rem 1.6rem rgba(0,92,169,.26);transform:translateY(-1px)}
.sd-login-submit:active{transform:translateY(0)}
.sd-forgot-link{justify-self:center;color:var(--sd-blue);font-size:.82rem;font-weight:650;text-underline-offset:.2rem}
.sd-login-footer{width:min(100%,440px);margin:1rem auto 0;text-align:center;color:#7c8d9b;font-size:.68rem;letter-spacing:.035em}

@media(min-width:577px){
 .sd-login-shell{display:grid;grid-template-rows:minmax(245px,34dvh) auto}
 .sd-login-visual{position:relative;display:flex;min-height:245px;overflow:hidden;background-color:var(--sd-blue-deep);background-image:linear-gradient(105deg,rgba(0,48,90,.91) 0%,rgba(0,76,133,.72) 43%,rgba(0,61,113,.18) 100%),url("../img/login/login-super-dengue.jpg");background-size:cover;background-position:center 48%}
 .sd-visual-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,34,68,.06),rgba(0,44,82,.42));pointer-events:none}
 .sd-visual-content{position:relative;z-index:1;width:100%;padding:clamp(1.5rem,4vw,2.5rem);display:flex;flex-direction:column;color:#fff}
 .sd-institutional-brand{display:flex;align-items:center;gap:clamp(1rem,2.5vw,1.6rem)}
 .sd-institutional-brand img{width:clamp(160px,24vw,230px);height:auto;padding:.35rem .55rem;object-fit:contain;background:rgba(255,255,255,.92);border-radius:.55rem;box-shadow:0 4px 14px rgba(0,35,68,.14)}
 .sd-management{display:grid;gap:.25rem;padding-left:clamp(1rem,2.5vw,1.6rem);border-left:1px solid rgba(255,255,255,.62);font-size:clamp(.7rem,1.3vw,.86rem);line-height:1.3;text-shadow:0 1px 3px rgba(0,31,60,.5)}
 .sd-management span{color:rgba(255,255,255,.86)}
 .sd-system-copy{margin-top:auto}
 .sd-kicker{font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#9de5f6}
 .sd-system-copy h1{margin:.25rem 0;color:#fff;font-size:clamp(2.2rem,5vw,4.2rem);font-weight:760;letter-spacing:-.045em;text-shadow:0 3px 18px rgba(0,31,60,.36)}
 .sd-system-copy p{margin:0;font-size:clamp(.9rem,1.65vw,1.2rem);line-height:1.35;color:rgba(255,255,255,.92)}
 .sd-capabilities{display:none}
 .sd-login-panel{min-height:auto;padding:clamp(2rem,6vw,4rem)}
 .sd-mobile-brand{display:none}
}

@media(min-width:768px) and (orientation:portrait){
 .sd-login-shell{grid-template-rows:minmax(300px,38dvh) auto}
 .sd-login-panel{padding-block:clamp(1.75rem,4vh,2.5rem)}
}

@media(min-width:577px) and (max-width:991.98px) and (orientation:landscape){
 .sd-login-shell{grid-template-columns:minmax(0,46%) minmax(0,54%);grid-template-rows:1fr}
 .sd-login-visual{min-height:100dvh;background-position:58% center}
 .sd-login-panel{min-height:100dvh;padding:clamp(1rem,3vw,2rem);overflow-y:auto}
 .sd-visual-content{padding:clamp(1.2rem,3vw,2rem)}
 .sd-institutional-brand{align-items:flex-start;flex-direction:column;gap:.75rem}
 .sd-institutional-brand img{width:clamp(145px,23vw,195px)}
 .sd-management{padding:.6rem 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.58)}
 .sd-login-card{padding:clamp(1.15rem,3vw,1.7rem)}
}

@media(min-width:992px){
 body.sd-login-page{background:#dce7ee}
 .sd-login-shell{grid-template-columns:minmax(0,60%) minmax(0,40%);grid-template-rows:1fr;max-width:2200px;box-shadow:0 0 4rem rgba(17,52,78,.15)}
 .sd-login-visual{min-height:100dvh;background-position:52% center}
 .sd-visual-content{padding:clamp(2.25rem,4vw,4.75rem)}
 .sd-institutional-brand img{width:clamp(185px,17vw,270px)}
 .sd-management{font-size:clamp(.72rem,.9vw,.9rem)}
 .sd-system-copy h1{font-size:clamp(3rem,4.2vw,4.9rem)}
 .sd-capabilities{display:flex;gap:clamp(.8rem,1.5vw,1.4rem);margin-top:clamp(1.4rem,4vh,2.8rem)}
 .sd-capabilities span{min-height:42px;display:flex;align-items:center;gap:.55rem;padding:.55rem .8rem;border:1px solid rgba(255,255,255,.26);border-radius:.65rem;background:rgba(0,49,91,.3);backdrop-filter:blur(5px);font-size:.76rem;font-weight:700}
 .sd-capabilities i{color:#8ce4f5;font-size:1rem}
 .sd-login-panel{min-height:100dvh;padding:clamp(1.6rem,4vw,4.5rem);overflow-y:auto}
 .sd-login-card{max-width:470px;padding:clamp(1.8rem,3vw,2.8rem)}
 .sd-login-footer{max-width:470px}
}

@media(min-width:1367px){
 .sd-login-shell{grid-template-columns:minmax(0,63%) minmax(0,37%)}
}

@media(min-width:992px) and (max-height:820px){
 .sd-visual-content{padding-block:clamp(1.5rem,4vh,2.5rem)}
 .sd-capabilities{margin-top:1.1rem}
 .sd-login-panel{padding-block:1.25rem}
 .sd-login-card{padding-block:1.6rem}
 .sd-login-heading p{margin-bottom:1rem}
 .sd-login-form{gap:.8rem}
}

@media(max-width:576px) and (max-height:680px){
 .sd-login-panel{justify-content:flex-start;padding-top:max(.5rem,env(safe-area-inset-top));padding-bottom:max(.5rem,env(safe-area-inset-bottom));overflow-y:auto}
 .sd-mobile-brand{margin-bottom:.4rem}
 .sd-mobile-brand img{width:125px;margin-bottom:.3rem}
 .sd-mobile-brand div{font-size:.64rem}
 .sd-mobile-brand h1{margin-top:.2rem;font-size:1.55rem}
 .sd-login-card{padding:.75rem 1.15rem}
 .sd-login-heading>span{margin-bottom:.2rem}
 .sd-login-heading h2{font-size:1.55rem}
 .sd-login-heading p{margin:.3rem 0 .75rem;font-size:.8rem}
 .sd-login-form{gap:.55rem}
 .sd-input-wrap{min-height:44px}
 .sd-input-wrap input,.sd-password-toggle{height:42px}
 .sd-login-submit{min-height:44px}
 .sd-login-footer{margin-top:.35rem}
}

@media(prefers-reduced-motion:reduce){.sd-input-wrap,.sd-login-submit{transition:none}.sd-login-submit:hover{transform:none}}