*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --azul:#184b78;
    --azulEscuro:#12395d;
    --azulClaro:#2d6fa8;

    --cinza:#f2f5f8;
    --cinza2:#e7ebef;
    --cinza3:#cfd7df;

    --texto:#28323c;
    --textoClaro:#6f7b87;

    --branco:#ffffff;

    --erro:#c62828;

    --radius:10px;

    --sombra:

    0 10px 40px rgba(0,0,0,.08);

    --transicao:.25s;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:

    "Segoe UI",

    Arial,

    Helvetica,

    sans-serif;

    background:

    linear-gradient(

    180deg,

    #eef2f6 0%,

    #f8fafc 100%

    );

    color:var(--texto);

    min-height:100vh;

}

/*=========================================================*/

.background{

    position:fixed;

    inset:0;

    background:

    radial-gradient(

    circle at top,

    rgba(24,75,120,.06),

    transparent 45%

    );

    z-index:-1;

}

/*=========================================================*/

.login-container{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:35px;

}

/*=========================================================*/

.login-box{

    width:520px;

    max-width:100%;

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:var(--sombra);

    border:1px solid #dde4eb;

}

/*=========================================================*/

.topo{

    background:

    linear-gradient(

    180deg,

    var(--azul),

    var(--azulEscuro)

    );

    color:#fff;

    padding:35px;

}

/*=========================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:18px;

}

.logo-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#fff;

    color:var(--azul);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    font-weight:bold;

    letter-spacing:2px;

}

.logo h1{

    font-size:30px;

    font-weight:700;

    letter-spacing:1px;

}

.logo span{

    display:block;

    margin-top:5px;

    opacity:.85;

    font-size:15px;

}

/*=========================================================*/

.abas{

    display:flex;

    background:#f7f8fa;

    border-bottom:1px solid #dbe3ea;

}

.aba{

    flex:1;

    height:60px;

    border:none;

    cursor:pointer;

    background:none;

    font-size:15px;

    font-weight:600;

    color:#66727d;

    transition:.30s;

}

.aba:hover{

    background:#edf2f6;

}

.aba.ativa{

    background:#fff;

    color:var(--azul);

    border-bottom:4px solid var(--azul);

}

/*=========================================================*/

.painel{

    display:none;

    padding:38px;

}

.painel.ativo{

    display:block;

    animation:fade .35s;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*=========================================================*/

.painel h2{

    font-size:27px;

    color:var(--azulEscuro);

}

.painel p{

    margin-top:8px;

    margin-bottom:30px;

    color:var(--textoClaro);

    line-height:24px;

}

/*=========================================================*/

.campo{

    margin-bottom:22px;

}

.campo label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

}

.campo input{

    width:100%;

    height:52px;

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

    border-radius:8px;

    padding:0 16px;

    font-size:15px;

    outline:none;

    transition:.25s;

    background:#fcfcfc;

}

.campo input:hover{

    border-color:#b7c3cf;

}

.campo input:focus{

    border-color:var(--azul);

    background:#fff;

    box-shadow:

    0 0 0 4px

    rgba(24,75,120,.10);

}


.linha{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:28px;

    gap:15px;

}

.check{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

    user-select:none;

    font-size:14px;

    color:var(--textoClaro);

}

.check input{

    width:18px;

    height:18px;

    accent-color:var(--azul);

    cursor:pointer;

}

.linha a{

    text-decoration:none;

    color:var(--azul);

    font-size:14px;

    font-weight:600;

    transition:.25s;

}

.linha a:hover{

    color:var(--azulEscuro);

    text-decoration:underline;

}



.botao{

    width:100%;

    height:54px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    color:#FFF;

    letter-spacing:.5px;

    background:

    linear-gradient(
        180deg,
        var(--azulClaro),
        var(--azul)
    );

    transition:.25s;

}

.botao:hover{

    background:

    linear-gradient(
        180deg,
        #3b7cb4,
        var(--azulEscuro)
    );

    transform:translateY(-2px);

    box-shadow:

    0 10px 25px rgba(24,75,120,.25);

}

.botao:active{

    transform:scale(.98);

}

.botao:disabled{

    cursor:not-allowed;

    opacity:.6;

}



footer{

    border-top:1px solid #e3e7ec;

    background:#fafbfd;

    padding:22px;

    text-align:center;

}

footer div{

    margin:4px 0;

    color:var(--textoClaro);

    font-size:13px;

}

footer strong{

    color:var(--azulEscuro);

    font-size:15px;

}



::placeholder{

    color:#a1aab3;

}


::selection{

    background:var(--azul);

    color:#FFF;

}



::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef2f5;

}

::-webkit-scrollbar-thumb{

    background:#9bb2c8;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--azul);

}



button:focus,
input:focus,
a:focus{

    outline:none;

}


@media(max-width:768px){

.login-container{

    padding:20px;

}

.login-box{

    width:100%;

}

.topo{

    padding:28px;

}

.logo{

    flex-direction:column;

    text-align:center;

}

.logo h1{

    font-size:28px;

}

.logo span{

    font-size:14px;

}

.painel{

    padding:28px;

}

}


@media(max-width:520px){

.login-container{

    padding:10px;

}

.login-box{

    border-radius:12px;

}

.topo{

    padding:25px 20px;

}

.logo-icon{

    width:60px;

    height:60px;

    font-size:24px;

}

.logo h1{

    font-size:24px;

}

.abas{

    flex-direction:column;

}

.aba{

    border-bottom:1px solid #dbe3ea;

}

.aba.ativa{

    border-bottom:1px solid #dbe3ea;

    border-left:5px solid var(--azul);

}

.painel{

    padding:22px;

}

.painel h2{

    font-size:23px;

}

.linha{

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

}

.botao{

    height:52px;

}

}


@keyframes surgir{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.login-box{

    animation:surgir .45s ease;

}