/*
===========================================================
AOTECH CONTROL
Login - V4 Ajustado
===========================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root{
    --verde:#16886f;
    --verde-hover:#11755f;
    --laranja:#f2a529;
    --cinza-900:#1f2b38;
    --cinza-700:#697585;
    --cinza-500:#9aa4b0;
    --cinza-300:#dfe5eb;
    --branco:#fff;
    --radius:10px;
}

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

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
}

body{
    font-family:'Inter', sans-serif;
    background:#fff;
    color:var(--cinza-900);
}

.login-container{
    width:100vw;
    height:100vh;
    display:grid;
    grid-template-columns:32% 68%;
}

/* ESQUERDA */

.login-left{
    background:#fff;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 44px;
    box-shadow:0 0 45px rgba(0,0,0,.22);
    z-index:3;
}

.login-box{
    width:100%;
    max-width:360px;
    transform:translateY(-28px);
}

.login-logo{
    width:255px;
    max-width:100%;
    display:block;
    margin:0 auto 40px auto;
}

.login-title{
    margin-top:-6px;
}

.login-title span{
    display:block;
    font-size:15px;
    font-weight:500;
    color:var(--cinza-900);
    margin-bottom:4px;
}

.login-title strong{
    display:block;
    font-size:25px;
    line-height:1.1;
    font-weight:900;
    color:var(--cinza-900);
    margin-bottom:8px;
}

.login-title p{
    font-size:13px;
    color:var(--cinza-700);
}

.login-divider{
    width:100%;
    height:1px;
    background:var(--cinza-300);
    margin:18px 0 20px;
}

.login-form label{
    display:block;
    font-size:13px;
    font-weight:800;
    color:var(--cinza-900);
    margin-bottom:7px;
}

.input-group{
    width:100%;
    height:48px;
    border:1px solid #d6dde5;
    border-radius:var(--radius);
    background:#fff;
    display:flex;
    align-items:center;
    padding:0 14px;
    margin-bottom:17px;
    transition:.2s ease;
}

.input-group:focus-within{
    border-color:var(--verde);
    box-shadow:0 0 0 3px rgba(22,136,111,.12);
}

.input-group i{
    font-size:15px;
    color:#7d8794;
    margin-right:11px;
}

.input-group input{
    flex:1;
    border:0;
    outline:0;
    background:transparent;
    font-family:'Inter', sans-serif;
    font-size:13px;
    color:var(--cinza-900);
    min-width:0;
}

.input-group input::placeholder{
    color:#969faa;
}

.input-eye{
    flex:0 0 34px;
    width:34px;
    height:34px;

    margin-left:8px;

    border:0;
    outline:0;

    background:transparent;

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

    cursor:pointer;

    color:#8a95a3;

    border-radius:8px;

    transition:.2s;
}

.input-eye:hover{
    background:rgba(22,136,111,.08);
    color:var(--verde);
}

.input-eye i{
    font-size:17px;
    margin:0!important;
}

.login-form button[type="submit"]{
    width:100%;
    height:52px;
    border:0;
    border-radius:var(--radius);
    background:linear-gradient(180deg,#1a9477 0%,#16866b 100%);
    color:#fff;
    font-family:'Inter',sans-serif;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:.2s ease;
}

.login-form button[type="submit"]:hover{
    background:linear-gradient(180deg, #17876c 0%, #116f59 100%);
    transform:translateY(-1px);
    box-shadow:0 14px 28px rgba(22,136,111,.25);
}

.login-form button i{
    font-size:19px;
}

.login-footer{
    margin-top:26px;
    padding-top:17px;
    border-top:1px solid var(--cinza-300);
    text-align:center;
    color:var(--cinza-700);
}

.login-footer span{
    display:block;
    font-size:13px;
    font-weight:700;
    color:var(--cinza-900);
    margin-bottom:8px;
}

.login-footer p{
    font-size:12px;
    line-height:1.4;
}

/* DIREITA */

.login-right{
    height:100vh;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(rgba(7,18,27,.78), rgba(7,18,27,.86)),
        url('../img/login-bg.jpg') center center / cover no-repeat;
}

.login-right::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 45%, rgba(29,137,111,.22), transparent 26%),
        linear-gradient(90deg, rgba(7,18,27,.2), rgba(7,18,27,.72));
    backdrop-filter:blur(3px);
    z-index:1;
}

.login-right::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle, rgba(64,181,174,.45) 2px, transparent 2px),
        linear-gradient(35deg, transparent 0%, transparent 49%, rgba(64,181,174,.16) 49.4%, transparent 50.2%),
        linear-gradient(120deg, transparent 0%, transparent 48%, rgba(64,181,174,.13) 48.4%, transparent 49.2%);
    background-size:115px 115px, 330px 330px, 390px 390px;
    background-position:20px 35px, -80px 20px, 90px 120px;
    opacity:.38;
    z-index:2;
}

.tech-lines{
    position:absolute;
    inset:0;
    z-index:2;
    opacity:.26;
    background:
        radial-gradient(circle at 16% 87%, rgba(41,181,165,.8) 0 2px, transparent 3px),
        radial-gradient(circle at 86% 16%, rgba(41,181,165,.8) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 86%, rgba(41,181,165,.8) 0 2px, transparent 3px);
}

.right-content{
    position:relative;
    z-index:4;
    width:78%;
    max-width:760px;
    text-align:center;
    transform:translateY(8px);
}

.right-logo{
    width:100%;
    max-width:520px;
    height:auto;
    display:block;
    margin:0 auto 30px auto;
    filter:
        drop-shadow(0 28px 48px rgba(0,0,0,.55))
        saturate(1.08)
        contrast(1.05);
    animation:float 7s ease-in-out infinite;
}

.right-separator{
    width:205px;
    height:1px;
    background:rgba(255,255,255,.18);
    margin:0 auto 26px auto;
    position:relative;
}

.right-separator span{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:82px;
    height:4px;
    border-radius:20px;
    background:var(--laranja);
    box-shadow:0 0 22px rgba(242,165,41,.45);
}

.right-content p{
    color:rgba(255,255,255,.86);
    font-size:15px;
    font-weight:300;
    letter-spacing:6px;
    text-transform:uppercase;
    line-height:1.9;
    margin-bottom:24px;
}

.right-icons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    color:rgba(255,255,255,.72);
}

.right-icons i{
    font-size:32px;
    font-weight:300;
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.3));
}

.right-icons span{
    width:1px;
    height:34px;
    background:rgba(255,255,255,.22);
}

/* ANIMAÇÃO SUAVE */

@keyframes float{
    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }

    100%{
        transform:translateY(0);
    }
}

/* RESPONSIVO */

@media(max-width:980px){
    html,
    body{
        overflow:auto;
    }

    .login-container{
        display:block;
        min-height:100vh;
    }

    .login-right{
        display:none;
    }

    .login-left{
        width:100%;
        min-height:100vh;
        padding:32px;
        box-shadow:none;
        align-items:center;
    }

    .login-box{
    max-width:410px;
    transform:none;
    }

    .login-logo{
        width:300px;
        margin-bottom:48px;
    }
}

@media(max-height:780px){
    .login-left{
        padding:24px 52px;
    }

     .login-box{
       transform:translateY(-25px);
    }
    
    .login-logo{
        width:245px;
        margin-bottom:30px;
    }

    .login-title strong{
        font-size:24px;
    }

    .login-divider{
        margin:16px 0 18px;
    }

    .input-group{
        height:48px;
        margin-bottom:16px;
    }

    .login-form button{
        height:48px;
    }

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

    .right-logo{
        max-width:500px;
        margin-bottom:30px;
    }

    .right-content p{
        font-size:13px;
        letter-spacing:7px;
        margin-bottom:30px;
    }
}