/* ==========================================================================
   Arquivo:
   autenticacao/static/autenticacao/css/esqueci_senha.css

   Objetivo:
   Estilos exclusivos da tela "Esqueci minha senha".

   Escopo:
   Este arquivo deve conter apenas estilos relacionados à interface da tela
   de recuperação de senha da Extranet ESBSP.
========================================================================== */

/* ==========================================================
   PÁGINA
========================================================== */

.esqueci-senha-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#C8102E;

    padding:50px;

}


/* ==========================================================
   CARD
========================================================== */

.esqueci-senha-card{

    width:100%;
    max-width:520px;

    background:#FFF;

    border-radius:28px;

    padding:30px 36px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.20);

}


/* ==========================================================
   CABEÇALHO
========================================================== */

.esqueci-senha-header{

    text-align:center;

    margin-bottom:22px;

}


/* ==========================================================
   LOGO
========================================================== */

.esqueci-senha-logo img{

    width:170px;

    height:auto;

    margin-bottom:24px;

}


/* ==========================================================
   TÍTULO
========================================================== */

.esqueci-senha-title{

    color:#222;

    font-size:1.15rem;

    font-weight:700;

    margin:0;

}


/* ==========================================================
   DIVISOR
========================================================== */

.esqueci-senha-divider{

    width:280px;

    height:2px;

    background:#C8102E;

    border-radius:50px;

    margin:10px auto 10px;

}



/* ==========================================================
   FORM
========================================================== */
.esqueci-senha-form{

    margin-top:24px;

}

.form-group{

    margin-bottom:18px;

}

.form-label{

    margin-bottom:6px;

    font-size:.88rem;

}

.form-control{

    height:52px;

}


/* ==========================================================
   INPUT
========================================================== */

.esqueci-senha-input{

    position:relative;

    width:100%;

    margin-top:5px;

}



.esqueci-senha-input input{

    width:100%;

    padding-left:62px;

    padding-right:60px;

}

.esqueci-senha-form .btn{

    width:100%;

    height:52px;

    font-size:1rem;

    font-weight:600;

    border-radius:12px;

}

/* ==========================================================
   RESPONSIVIDADE
========================================================== */

@media (max-width: 575.98px){

    .esqueci-senha-page{

        min-height:100vh;
        min-height:100dvh;
        padding:12px;

    }

    .esqueci-senha-card{

        width:100%;
        max-width:none;
        margin:auto;
        border-radius:24px;
        padding:24px 22px;

    }

    .esqueci-senha-logo img{

        width:140px;
        margin-bottom:20px;

    }

    .esqueci-senha-divider{

        width:60%;
        max-width:280px;

    }

}

@media (orientation: landscape) and (max-height: 600px){

    .esqueci-senha-page{

        min-height:100vh;
        min-height:100dvh;
        padding:
            max(6px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(6px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
        overflow-y:auto;

    }

    .esqueci-senha-card{

        width:100%;
        max-width:900px;
        margin:auto;
        border-radius:18px;
        padding:10px 18px;
        display:grid;
        grid-template-columns:minmax(140px, .7fr) minmax(0, 2fr);
        align-items:center;
        column-gap:22px;

    }

    .esqueci-senha-header{

        min-width:0;
        margin:0;

    }

    .esqueci-senha-logo img{

        width:108px;
        margin-bottom:10px;

    }

    .esqueci-senha-divider{

        width:90px;
        margin:8px auto 0;

    }

    .esqueci-senha-form{

        min-width:0;
        margin:0;

    }

    .esqueci-senha-form .form-group{

        margin-bottom:6px;

    }

    .esqueci-senha-form .form-control,
    .esqueci-senha-form .btn{

        height:38px;

    }

}