:root{
    --ink:#10264e;
    --muted:#8290a6;
    --brand:#3157d5;
    --brand2:#5b52cf;
    --border:#dfe5ef;
}

*{
    box-sizing:border-box;
}

html,
body{
    min-height:100%;
}

body{
    margin:0;

    font-family:
        Estedad,
        Tahoma,
        sans-serif;

    color:var(--ink);

    background:
        radial-gradient(
            800px 520px at 88% 10%,
            rgba(49,87,213,.11),
            transparent 62%
        ),
        radial-gradient(
            650px 500px at 8% 100%,
            rgba(100,75,205,.07),
            transparent 65%
        ),
        #f3f6fb;
}

button,
input{
    font:inherit;
}

.login-page{
    min-height:100vh;

    padding:30px 16px;

    display:grid;
    place-items:center;
}

.login-card{
    width:min(440px,100%);

    padding:34px 34px 24px;

    border:
        1px solid rgba(18,42,82,.06);

    border-radius:26px;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 30px 90px
        rgba(15,32,70,.13);

    backdrop-filter:
        blur(16px);
}

.login-brand{
    text-align:center;

    margin-bottom:27px;
}

.login-logo{
    width:118px;
    height:72px;

    margin:0 auto 14px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.login-logo img{
    display:block;

    max-width:100%;
    max-height:100%;

    object-fit:contain;
}

.login-brand h1{
    margin:0;

    color:#112650;

    font-size:20px;
    font-weight:850;
}

.login-brand p{
    margin:6px 0 0;

    color:#8b96a9;

    font-size:10px;
}

.login-alert{
    margin-bottom:18px;
    padding:11px 12px;

    display:flex;
    align-items:flex-start;
    gap:9px;

    border:
        1px solid #ffd6cf;

    border-radius:11px;

    color:#9f3429;
    background:#fff3f1;

    font-size:9px;
    line-height:1.8;
}

.login-alert > span{
    width:21px;
    height:21px;

    flex:0 0 21px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#fff;
    background:#d94a3c;

    font-weight:800;
}

.login-form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.login-field label{
    display:block;

    margin-bottom:8px;

    color:#293a57;

    font-size:10px;
    font-weight:750;
}

.login-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.login-label-row > span{
    margin-bottom:8px;

    color:#a0a9b8;

    font-size:8px;
}

.login-input{
    min-height:52px;

    padding:5px 6px;

    display:flex;
    align-items:center;
    gap:8px;

    border:
        1px solid var(--border);

    border-radius:13px;

    background:#fbfcfe;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.login-input:focus-within{
    border-color:
        rgba(49,87,213,.43);

    background:#fff;

    box-shadow:
        0 0 0 4px
        rgba(49,87,213,.07);
}

.login-input__icon{
    width:34px;
    height:34px;

    flex:0 0 34px;

    display:grid;
    place-items:center;

    border-radius:9px;

    color:#3157d5;
    background:#edf2ff;

    font-size:11px;
    font-weight:800;
}

.login-input input{
    width:100%;
    min-width:0;

    height:40px;

    padding:0 5px;

    border:0;
    outline:0;

    color:#172843;
    background:transparent;

    box-shadow:none;

    font-size:11px;
}

.login-input input[dir="ltr"]{
    text-align:left;
}

.login-password-toggle{
    min-width:57px;
    height:34px;

    border:0;
    border-radius:8px;

    color:#4e5d73;
    background:#edf0f5;

    font-size:8px;
    font-weight:700;

    cursor:pointer;
}

.captcha-box{
    min-height:70px;

    margin-bottom:9px;

    padding:6px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    border:
        1px solid #dfe5ef;

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            #f8faff,
            #f4f7fc
        );
}

.captcha-image{
    width:210px;
    max-width:calc(100% - 52px);
    height:64px;

    display:block;

    border-radius:9px;

    user-select:none;
}

.captcha-refresh{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:grid;
    place-items:center;

    border:
        1px solid rgba(49,87,213,.10);

    border-radius:10px;

    color:#3157d5;
    background:#eaf0ff;

    font-size:17px;

    cursor:pointer;
}

.captcha-refresh.is-loading{
    animation:
        captcha-spin .65s linear infinite;
}

@keyframes captcha-spin{
    to{
        transform:rotate(360deg);
    }
}

.captcha-input input{
    font-family:
        Arial,
        sans-serif;

    font-size:14px;
    font-weight:700;

    letter-spacing:4px;
}

.login-submit{
    min-height:50px;

    margin-top:2px;

    border:0;
    border-radius:13px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--brand),
            var(--brand2)
        );

    box-shadow:
        0 13px 28px
        rgba(49,87,213,.22);

    font-size:11px;
    font-weight:800;

    cursor:pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.login-submit:hover:not(:disabled){
    transform:
        translateY(-1px);

    box-shadow:
        0 17px 34px
        rgba(49,87,213,.27);
}

.login-submit:disabled{
    opacity:.65;

    cursor:wait;
}

.login-footer{
    margin-top:22px;
    padding-top:16px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    border-top:
        1px solid #edf0f5;

    color:#99a3b4;

    font-size:8px;
}

.login-honeypot{
    position:absolute !important;

    left:-10000px !important;
    top:auto !important;

    width:1px !important;
    height:1px !important;

    overflow:hidden !important;
}

/*
 * Remove browser yellow autofill.
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
    -webkit-text-fill-color:
        #172843 !important;

    -webkit-box-shadow:
        0 0 0 1000px
        #fbfcfe inset !important;

    box-shadow:
        0 0 0 1000px
        #fbfcfe inset !important;

    transition:
        background-color 9999s ease-out 0s;
}

@media(max-width:540px){

    .login-page{
        padding:18px 12px;
    }

    .login-card{
        padding:
            27px 20px 21px;

        border-radius:21px;
    }

    .login-logo{
        width:105px;
        height:65px;
    }

    .login-brand h1{
        font-size:18px;
    }

    .captcha-image{
        width:190px;
    }

    .login-footer{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

}


/* =======================================================
   STAGE 13D — COMPACT LOGIN / NO SCROLL
   ======================================================= */

html,
body{
    width:100%;
    max-width:100%;

    margin:0;
    padding:0;

    overflow-x:hidden !important;
}

body{
    min-width:0;
}

.login-page{
    width:100%;
    max-width:100%;

    min-height:100svh;

    padding:18px 14px;

    overflow-x:hidden;

    display:grid;
    place-items:center;
}

.login-card{
    width:min(410px, calc(100% - 4px));

    padding:24px 28px 20px;

    border-radius:23px;
}

.login-brand{
    margin-bottom:20px;
}

.login-logo{
    width:112px;
    height:64px;

    margin:0 auto;
}

.login-logo img{
    max-width:100%;
    max-height:100%;
}

.login-form{
    gap:14px;
}

.login-field label{
    margin-bottom:6px;
}

.login-input{
    min-height:48px;
}

.login-input input{
    height:36px;
}

.login-input__icon{
    width:32px;
    height:32px;

    flex-basis:32px;
}

.login-password-toggle{
    height:32px;
}

.login-label-row > span{
    margin-bottom:6px;
}

.captcha-box{
    min-height:62px;

    margin-bottom:7px;
    padding:4px 6px;
}

.captcha-image{
    width:195px;
    height:56px;

    object-fit:contain;
}

.captcha-refresh{
    width:36px;
    height:36px;

    flex-basis:36px;
}

.captcha-input{
    min-height:48px;
}

.captcha-input input{
    height:36px;

    font-size:13px;
    letter-spacing:3px;
}

.login-submit{
    min-height:47px;

    margin-top:0;
}

.login-footer{
    margin-top:17px;
    padding-top:13px;
}


/*
 * Desktop/tablet:
 * keep login completely inside viewport.
 */
@media(
    min-width:541px
)
and
(
    min-height:700px
){

    html,
    body{
        height:100%;
        min-height:100%;
        overflow-y:hidden;
    }

    .login-page{
        height:100svh;
        min-height:0;
        overflow:hidden;
    }

}


/*
 * Short screens may scroll vertically,
 * but horizontal scrolling is never allowed.
 */
@media(max-height:699px){

    html,
    body{
        overflow-y:auto;
    }

    .login-page{
        min-height:100svh;

        padding-top:14px;
        padding-bottom:14px;
    }

    .login-card{
        padding-top:20px;
        padding-bottom:17px;
    }

    .login-brand{
        margin-bottom:15px;
    }

    .login-logo{
        height:54px;
    }

    .login-form{
        gap:11px;
    }

    .captcha-box{
        min-height:56px;
    }

    .captcha-image{
        height:50px;
    }

    .login-footer{
        margin-top:13px;
    }

}


@media(max-width:540px){

    html,
    body{
        overflow-x:hidden !important;
    }

    .login-page{
        width:100%;

        padding:14px 10px;
    }

    .login-card{
        width:100%;

        padding:22px 18px 18px;

        border-radius:20px;
    }

    .login-logo{
        width:100px;
        height:58px;
    }

    .captcha-image{
        width:180px;
        max-width:calc(100% - 48px);
    }

}