/* ===================================================
   RESET
=================================================== */

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

html,
body {
    width: 100%;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

/* ===================================================
   LOGIN
=================================================== */

.login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #004aad 0%, #0099e6 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.login-card {

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

    background:#fff;

    border-radius:22px;

    padding:40px;

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

}

.logo-circle{

    width:72px;
    height:72px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:#004aad;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:36px;

    font-weight:bold;

}

.login-card h1{

    text-align:center;

    color:#004aad;

    margin-bottom:10px;

    font-size:34px;

}

.login-card p{

    text-align:center;

    color:#666;

    margin-bottom:30px;

    line-height:1.5;

}

.login-card label{

    display:block;

    margin-bottom:8px;

    color:#333;

    font-weight:bold;

}

.login-card input{

    width:100%;

    height:56px;

    border:1px solid #d6d6d6;

    border-radius:12px;

    padding:0 18px;

    font-size:18px;

    transition:.2s;

}

.login-card input:focus{

    outline:none;

    border-color:#004aad;

}

.login-card button{

    width:100%;

    height:56px;

    margin-top:20px;

    background:#004aad;

    color:#fff;

    border:none;

    border-radius:12px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

.login-card button:hover{

    background:#003b93;

}

.login-card button:disabled{

    opacity:.7;

    cursor:not-allowed;

}

.erro{

    background:#ffe1e1;

    color:#b50000;

    padding:14px;

    border-radius:10px;

    margin-bottom:20px;

    text-align:center;

    font-size:15px;

}

/* ===================================================
   IFRAME
=================================================== */

.app-page{

    width:100vw;
    height:100dvh;

    overflow:hidden;

    background:#fff;

}

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:60px;

    padding:0 24px;

    background:#004aad;

    color:#fff;

}

.brand{

    font-size:22px;

    font-weight:bold;

}

.logout{

    text-decoration:none;

    color:#fff;

    padding:10px 18px;

    border-radius:10px;

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

    transition:.2s;

}

.logout:hover{

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

}

.iframe-area{

    width:100vw;

    height:calc(100dvh - 60px);

}

.app-iframe{

    width:100%;

    height:100%;

    border:none;

}

/* ===================================================
   MOBILE
=================================================== */

@media(max-width:768px){

.login-page{

    padding:20px;

}

.login-card{

    padding:28px;

}

.login-card h1{

    font-size:30px;

}

.login-card p{

    font-size:15px;

}

.login-card input{

    height:54px;

    font-size:17px;

}

.login-card button{

    height:54px;

}

.topbar{

    display:none;

}

.iframe-area{

    height:100dvh;

}

}