/* =========================================================
   Tela de login (Área do Cliente) — layout dividido
   ========================================================= */

:root{
    --ink:#07111f;
    --ink-2:#0b1728;
    --primary:#14b8a6;
    --primary-2:#2dd4bf;
    --primary-soft:#e9fbf8;
    --blue:#2f7df4;
    --text:#445268;
    --muted:#758196;
    --line:#e6eaf0;
    --surface:#ffffff;
    --soft:#f6f8fb;
    --danger:#dc3545;
    --font:'Manrope',sans-serif;
    --display:'Plus Jakarta Sans',sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--font)}
body{
    min-height:100vh;
    background:#07111f;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
a{text-decoration:none}
button,input{font:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--display);letter-spacing:-.035em}

.page-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(420px,1.05fr) minmax(430px,.95fr);
}

/* LADO VISUAL */
.visual-side{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:44px clamp(34px,5vw,78px);
    background:
        radial-gradient(circle at 82% 16%,rgba(47,125,244,.22),transparent 29%),
        radial-gradient(circle at 38% 82%,rgba(20,184,166,.13),transparent 32%),
        linear-gradient(145deg,#07111f 0%,#0a1729 56%,#0b1d33 100%);
}
.visual-side::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.14;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
    background-size:58px 58px;
    mask-image:linear-gradient(to bottom,#000,transparent 96%);
    pointer-events:none;
}
.visual-side::after{
    content:"";
    position:absolute;
    width:500px;height:500px;
    border-radius:50%;
    right:-260px;bottom:-150px;
    border:1px solid rgba(45,212,191,.10);
    box-shadow:
        0 0 0 90px rgba(45,212,191,.025),
        0 0 0 180px rgba(45,212,191,.015);
    pointer-events:none;
}

.visual-top,.visual-content,.visual-bottom{position:relative;z-index:2}

.brand{
    display:inline-flex;
    align-items:center;
    gap:11px;
    color:#fff;
}
.brand:hover{color:#fff}
.brand-mark{
    width:43px;height:43px;
    border-radius:13px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#5eead4,#14b8a6);
    color:#04110f;
    font-family:var(--display);
    font-weight:900;
    box-shadow:0 10px 28px rgba(20,184,166,.28);
}
.brand-name{
    font-family:var(--display);
    font-size:1.28rem;
    font-weight:800;
    letter-spacing:-.06em;
}
.brand-name span{color:var(--primary-2)}

.back-site{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:22px;
    color:#7e90a4;
    font-size:.75rem;
    font-weight:800;
    transition:.2s;
}
.back-site:hover{color:#d7e1eb}

.visual-content{
    max-width:640px;
    margin:70px 0;
}
.visual-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(94,234,212,.16);
    background:rgba(94,234,212,.07);
    color:#9df5e8;
    font-size:.7rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:24px;
}
.visual-content h1{
    margin:0 0 22px;
    max-width:650px;
    color:#fff;
    font-size:clamp(2.8rem,5vw,4.8rem);
    line-height:1.02;
    font-weight:800;
}
.visual-content h1 span{color:var(--primary-2)}
.visual-content>p{
    max-width:590px;
    margin:0;
    color:#aab7c7;
    font-size:1rem;
    line-height:1.8;
}

.security-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:34px;
}
.security-item{
    padding:16px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:15px;
    background:rgba(255,255,255,.035);
}
.security-item i{
    display:block;
    color:#79ead9;
    margin-bottom:9px;
}
.security-item strong{
    display:block;
    color:#d2dce7;
    font-size:.68rem;
    margin-bottom:4px;
}
.security-item span{
    display:block;
    color:#6f8195;
    font-size:.55rem;
    line-height:1.45;
}

.visual-bottom{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:center;
    color:#66798f;
    font-size:.68rem;
}
.visual-bottom a{color:#8092a7}
.visual-bottom a:hover{color:#fff}

/* LADO LOGIN */
.login-side{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px;
    background:#fff;
    position:relative;
}
.mobile-brand{
    display:none;
    margin-bottom:36px;
}
.mobile-brand .brand-name{color:var(--ink)}
.login-card{
    width:100%;
    max-width:430px;
}
.login-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--primary);
    font-size:.68rem;
    text-transform:uppercase;
    font-weight:900;
    letter-spacing:.1em;
    margin-bottom:14px;
}
.login-card h2{
    margin:0 0 10px;
    color:var(--ink);
    font-size:2rem;
    font-weight:800;
}
.login-subtitle{
    margin:0 0 31px;
    color:#788596;
    font-size:.88rem;
    line-height:1.65;
}

.alert-custom{
    display:none;
    margin-bottom:16px;
    padding:13px 14px;
    border:1px solid #f1c9cd;
    border-radius:12px;
    background:#fff5f6;
    color:#b42331;
    font-size:.79rem;
    font-weight:700;
}
.info-custom{
    display:none;
    margin-bottom:16px;
    padding:13px 14px;
    border:1px solid #b9d4fb;
    border-radius:12px;
    background:#f0f6ff;
    color:#1d4f9e;
    font-size:.79rem;
    font-weight:700;
}

.field{margin-bottom:17px}
.field label{
    display:block;
    margin-bottom:7px;
    color:#445268;
    font-size:.72rem;
    font-weight:800;
}
.input-shell{position:relative}
.input-shell>i.field-icon{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    color:#91a0b2;
    font-size:.96rem;
    pointer-events:none;
}
.input-shell input{
    width:100%;
    height:52px;
    padding:0 46px 0 44px;
    border:1px solid #dfe5eb;
    border-radius:13px;
    outline:0;
    background:#fafbfd;
    color:var(--ink);
    font-size:.87rem;
    transition:.22s;
}
.input-shell input::placeholder{color:#a4afbc}
.input-shell input:focus{
    background:#fff;
    border-color:#69d4c7;
    box-shadow:0 0 0 4px rgba(20,184,166,.10);
}
.password-toggle{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    border:0;
    background:transparent;
    color:#91a0b2;
    padding:3px;
    cursor:pointer;
}
.password-toggle:hover{color:var(--primary)}

.form-row{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin:-2px 0 20px;
}
.forgot-link{
    color:#718094;
    font-size:.74rem;
    font-weight:800;
}
.forgot-link:hover{color:var(--primary)}

.submit-btn{
    width:100%;
    min-height:52px;
    border:0;
    border-radius:13px;
    background:var(--primary);
    color:#05221e;
    font-size:.83rem;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    box-shadow:0 12px 28px rgba(20,184,166,.21);
    transition:.24s;
}
.submit-btn:hover{
    background:var(--primary-2);
    transform:translateY(-1px);
}
.submit-btn:disabled{
    opacity:.65;
    cursor:not-allowed;
    transform:none;
}

/* hCaptcha */
.hcaptcha-campo{margin:6px 0 18px;display:flex;flex-direction:column;align-items:center}
.hcaptcha-campo .h-captcha,
.hcaptcha-campo iframe{max-width:100%}
.hcaptcha-erro{
    display:none;width:100%;margin-top:10px;text-align:center;
    background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;
    border-radius:11px;padding:9px 12px;font-size:.74rem;font-weight:800;
}
.hcaptcha-campo.erro .hcaptcha-erro{display:block}
.hcaptcha-campo.erro .h-captcha iframe{border-radius:10px;box-shadow:0 0 0 3px rgba(239,68,68,.28)}
.hcaptcha-aviso{
    display:flex;align-items:flex-start;gap:8px;margin:0 0 16px;
    background:#f8fafc;border:1px dashed #cbd5e1;color:#64748b;
    border-radius:12px;padding:11px 13px;font-size:.72rem;font-weight:700;line-height:1.5;
}
.hcaptcha-aviso code{background:#eef2f7;border-radius:5px;padding:1px 5px;font-size:.7rem}

/* Botões do 2FA */
.btn-whatsapp { background: #25d366; color: #fff; box-shadow: 0 12px 28px rgba(37, 211, 102, .21); }
.btn-whatsapp:hover { background: #1ebd5a; color: #fff; }
.btn-email { background: #3b82f6; color: #fff; box-shadow: 0 12px 28px rgba(59, 130, 246, .21); }
.btn-email:hover { background: #2563eb; color: #fff; }

.register-box{
    margin-top:23px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--soft);
    text-align:center;
    color:#758195;
    font-size:.78rem;
}
.register-box a{
    color:#0a8f80;
    font-weight:900;
}
.register-box a:hover{color:#076e63}

.login-trust{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:26px;
    color:#97a2b0;
    font-size:.62rem;
    font-weight:700;
}
.login-trust span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.login-trust i{color:#42b8a9}

.login-footer{
    margin-top:35px;
    padding-top:22px;
    border-top:1px solid var(--line);
    text-align:center;
}
.footer-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:11px;
}
.footer-links a{
    color:#8995a5;
    font-size:.66rem;
    font-weight:700;
}
.footer-links a:hover{color:var(--primary)}
.footer-info{
    color:#a0aab6;
    font-size:.62rem;
    line-height:1.55;
}

.whatsapp-float{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:1025;
    width:54px;height:54px;
    border-radius:17px;
    display:grid;
    place-items:center;
    background:#25d366;
    color:#fff;
    font-size:1.45rem;
    box-shadow:0 16px 36px rgba(37,211,102,.26);
    transition:.25s;
}
.whatsapp-float:hover{
    color:#fff;
    transform:translateY(-3px);
}

@media(max-width:980px){
    .page-shell{grid-template-columns:1fr}
    .visual-side{display:none}
    .login-side{
        min-height:100vh;
        padding:38px 24px;
        background:
            radial-gradient(circle at 15% 10%,rgba(20,184,166,.06),transparent 25%),
            #fff;
    }
    .mobile-brand{display:flex}
}

@media(max-width:520px){
    .login-side{padding:28px 18px}
    .login-card{max-width:100%}
    .mobile-brand{margin-bottom:32px}
    .login-card h2{font-size:1.75rem}
    .whatsapp-float{
        width:50px;height:50px;
        right:15px;bottom:15px;
    }
}