/* =========================================================
   PodoCRM — Login Premium
   Arquivo: public/assets/css/login.css
   ========================================================= */

:root{
    --login-purple-dark:#24103f;
    --login-purple-deep:#3b176b;
    --login-purple:#6d28d9;
    --login-purple-light:#9b5cff;
    --login-purple-soft:#c79bff;
    --login-pink:#d946ef;

    --login-green:#16b364;

    --login-bg:#f8f5ff;
    --login-card:rgba(255,255,255,.86);

    --login-text:#17132b;
    --login-muted:#746e83;

    --login-border:rgba(109,40,217,.12);

    --login-shadow:
        0 24px 70px rgba(49,24,94,.14);
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    min-height:100%;
}

body{
    margin:0;
    overflow-x:hidden;
    background:var(--login-bg);
    color:var(--login-text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/* =========================================================
   Estrutura principal
   ========================================================= */

.login-page{
    position:relative;
    min-height:100vh;
    width:100%;
    display:grid;

    grid-template-columns:
        minmax(300px,30%)
        minmax(0,1fr);

    overflow:hidden;

    background:
        radial-gradient(
            circle at 77% 8%,
            rgba(186,121,255,.28),
            transparent 29%
        ),
        radial-gradient(
            circle at 91% 80%,
            rgba(124,58,237,.15),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #f9f6ff 0%,
            #f2ecff 44%,
            #fbf9ff 100%
        );
}

.login-page::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        linear-gradient(
            120deg,
            transparent 60%,
            rgba(255,255,255,.40) 74%,
            transparent 88%
        );
}

.login-page::after{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-210px;
    top:-210px;
    border-radius:50%;
    pointer-events:none;

    background:
        radial-gradient(
            circle,
            rgba(192,132,255,.22),
            transparent 70%
        );

    filter:blur(8px);
}

/* =========================================================
   Painel lateral
   ========================================================= */

.login-brand-panel{
    position:relative;
    z-index:2;

    min-height:100vh;
    overflow:hidden;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:
        42px
        42px
        34px;

    color:#fff;

    background:
        radial-gradient(
            circle at 13% 18%,
            rgba(185,103,255,.25),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(122,70,255,.20),
            transparent 34%
        ),
        linear-gradient(
            155deg,
            #24103f 0%,
            #3b176b 45%,
            #58239c 100%
        );
}

.login-brand-panel::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.06),
            transparent 28%,
            transparent 70%,
            rgba(255,255,255,.03)
        );
}

.login-brand-panel::after{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    left:-140px;
    bottom:-120px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(197,121,255,.23),
            transparent 70%
        );

    filter:blur(14px);

    pointer-events:none;
}

.login-brand-top,
.login-brand-center,
.login-brand-bottom{
    position:relative;
    z-index:2;
}

/* =========================================================
   Logo
   ========================================================= */

.login-brand{
    display:flex;
    align-items:center;
    gap:13px;
}

.login-brand__logo{
    width:54px;
    height:54px;
    min-width:54px;

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

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            #ba70ff,
            #8b3df1 60%,
            #6d28d9
        );

    color:#fff;

    box-shadow:
        0 15px 34px rgba(124,58,237,.30),
        inset 0 1px 0 rgba(255,255,255,.30);
}

.login-brand__logo svg{
    width:27px;
    height:27px;
    display:block;
}

.login-brand__content h1{
    margin:0;

    font-size:28px;
    line-height:1;

    font-weight:800;

    letter-spacing:-1px;
}

.login-brand__content h1 span{
    color:#c079ff;
}

.login-brand__content p{
    margin:6px 0 0;

    font-size:8px;
    line-height:1.1;

    letter-spacing:4px;

    text-transform:uppercase;

    color:
        rgba(255,255,255,.57);
}

/* =========================================================
   Conteúdo lateral
   ========================================================= */

.login-brand-center{
    max-width:370px;

    margin:
        45px 0
        34px;
}

.login-brand-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-bottom:22px;

    padding:
        7px
        12px;

    border-radius:999px;

    border:
        1px solid rgba(255,255,255,.12);

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

    backdrop-filter:blur(12px);
}

.login-brand-eyebrow__dot{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#c77cff;

    box-shadow:
        0 0 0 5px
        rgba(199,124,255,.10);
}

.login-brand-eyebrow span:last-child{
    font-size:9px;

    font-weight:700;

    letter-spacing:.6px;

    text-transform:uppercase;

    color:
        rgba(255,255,255,.78);
}

.login-brand-title{
    margin:0;

    max-width:340px;

    font-size:
        clamp(
            32px,
            3vw,
            42px
        );

    line-height:1.08;

    letter-spacing:-1.5px;

    font-weight:400;

    color:
        rgba(255,255,255,.91);
}

.login-brand-title strong{
    display:block;

    margin-top:3px;

    font-weight:800;

    background:
        linear-gradient(
            90deg,
            #d08cff,
            #b16aff,
            #e080ff
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
}

.login-brand-line{
    width:50px;
    height:2px;

    margin:
        26px 0;

    background:
        linear-gradient(
            90deg,
            #cf86ff,
            rgba(207,134,255,.05)
        );
}

.login-brand-features{
    display:grid;
    gap:13px;
}

.login-brand-feature{
    display:flex;
    align-items:center;
    gap:12px;

    color:
        rgba(255,255,255,.73);

    font-size:12px;
}

.login-brand-feature__icon{
    width:31px;
    height:31px;
    min-width:31px;

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

    border-radius:10px;

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

    border:
        1px solid rgba(255,255,255,.08);

    color:#dca8ff;
}

.login-brand-feature__icon svg{
    width:16px;
    height:16px;
    display:block;
}

/* =========================================================
   Rodapé lateral
   ========================================================= */

.login-brand-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    padding-top:24px;

    border-top:
        1px solid rgba(255,255,255,.08);
}

.login-brand-quote{
    font-size:11px;

    line-height:1.55;

    color:
        rgba(255,255,255,.46);
}

.login-brand-badge{
    padding:
        6px
        9px;

    border-radius:999px;

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

    border:
        1px solid rgba(255,255,255,.08);

    font-size:9px;

    color:
        rgba(255,255,255,.44);
}

/* =========================================================
   Área principal
   ========================================================= */

.login-content{
    position:relative;
    z-index:3;

    min-height:100vh;

    display:flex;
    flex-direction:column;

    padding:
        26px
        clamp(28px,5vw,72px)
        28px;
}

/* =========================================================
   Topo
   ========================================================= */

.login-content-top{
    min-height:44px;

    display:flex;

    align-items:center;

    justify-content:flex-end;
}

.login-help{
    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:
        8px
        10px;

    border-radius:10px;

    color:#7c3aed;

    font-size:10px;

    font-weight:700;

    background:
        rgba(255,255,255,.35);
}

.login-help svg{
    width:15px;
    height:15px;
    display:block;
}

/* =========================================================
   Centro
   ========================================================= */

.login-main-wrapper{
    width:100%;
    max-width:920px;

    margin:auto;

    display:grid;

    grid-template-columns:
        minmax(0,640px)
        minmax(140px,1fr);

    align-items:center;

    gap:28px;

    padding:
        14px 0
        20px;
}

/* =========================================================
   Card principal
   ========================================================= */

.login-card{
    position:relative;

    width:100%;

    padding:
        clamp(
            28px,
            3vw,
            42px
        );

    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.86);

    border-radius:30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.89),
            rgba(255,255,255,.72)
        );

    box-shadow:
        var(--login-shadow);

    backdrop-filter:
        blur(26px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(26px)
        saturate(135%);

    animation:
        loginFadeUp
        .48s ease
        both;
}

.login-card::before{
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    top:-125px;
    right:-90px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(177,104,255,.19),
            transparent 70%
        );

    pointer-events:none;
}

.login-card::after{
    content:"";

    position:absolute;

    width:190px;
    height:190px;

    left:-100px;
    bottom:-105px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(117,84,255,.11),
            transparent 70%
        );

    pointer-events:none;
}

/* =========================================================
   Cabeçalho
   ========================================================= */

.login-card-header{
    position:relative;
    z-index:2;

    margin-bottom:24px;
}

.login-eyebrow{
    display:inline-block;

    margin-bottom:10px;

    color:
        var(--login-purple);

    font-size:10px;

    line-height:1;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;
}

.login-card-header h2{
    margin:0;

    color:
        var(--login-text);

    font-size:
        clamp(
            31px,
            3.4vw,
            43px
        );

    line-height:1.05;

    letter-spacing:-1.6px;

    font-weight:800;
}

.login-card-header h2 span{
    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #b74cff
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
}

.login-card-header p{
    max-width:500px;

    margin:
        11px 0 0;

    color:
        var(--login-muted);

    font-size:12px;

    line-height:1.6;
}

/* =========================================================
   Alerta
   ========================================================= */

.login-alert{
    position:relative;
    z-index:2;

    margin-bottom:18px;

    padding:
        12px
        14px;

    border:
        1px solid rgba(220,38,38,.15);

    border-radius:14px;

    background:
        rgba(254,242,242,.86);

    color:#991b1b;

    font-size:12px;

    font-weight:600;
}

/* =========================================================
   Formulário
   ========================================================= */

.login-form{
    position:relative;
    z-index:2;

    display:flex;

    flex-direction:column;

    gap:16px;
}

.login-field{
    display:flex;

    flex-direction:column;

    gap:7px;
}

.login-field__label{
    color:
        var(--login-text);

    font-size:12px;

    font-weight:700;
}

.login-field__control{
    position:relative;

    display:flex;

    align-items:center;
}

.login-field__icon{
    position:absolute;

    left:14px;

    top:50%;

    transform:
        translateY(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#8c82a2;

    pointer-events:none;

    z-index:2;
}

.login-field__icon svg{
    width:17px;
    height:17px;
    display:block;
}

.login-field input{
    width:100%;

    min-height:50px;

    padding:
        0
        44px;

    border:
        1px solid
        rgba(114,91,167,.18);

    border-radius:14px;

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

    color:
        var(--login-text);

    font-size:13px;

    outline:none;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85);

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        transform .18s ease;
}

.login-field input::placeholder{
    color:#aaa4b7;
}

.login-field input:focus{
    border-color:
        rgba(124,58,237,.65);

    background:#fff;

    box-shadow:
        0 0 0 4px
        rgba(124,58,237,.10),
        0 8px 22px
        rgba(81,44,145,.06);
}

/* =========================================================
   Botão mostrar senha
   ========================================================= */

.login-password-toggle{
    position:absolute;

    right:12px;

    top:50%;

    transform:
        translateY(-50%);

    width:32px;
    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:0;

    border-radius:9px;

    background:transparent;

    color:#90879f;

    cursor:pointer;

    transition:
        color .18s ease,
        background .18s ease;
}

.login-password-toggle:hover{
    color:
        var(--login-purple);

    background:
        rgba(124,58,237,.07);
}

.login-password-toggle svg{
    width:17px;
    height:17px;
    display:block;
}

/* =========================================================
   Botão entrar
   ========================================================= */

.login-submit{
    width:100%;

    min-height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:2px;

    border:0;

    border-radius:14px;

    background:
        linear-gradient(
            100deg,
            #7c3aed 0%,
            #9d3cf3 48%,
            #c026d3 100%
        );

    color:#fff;

    font-size:13px;

    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 15px 30px
        rgba(124,58,237,.23);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.login-submit:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 19px 36px
        rgba(124,58,237,.29);

    filter:
        saturate(1.06);
}

.login-submit:active{
    transform:
        translateY(0);
}

.login-submit svg{
    width:17px;
    height:17px;
    display:block;

    transition:
        transform .18s ease;
}

.login-submit:hover svg{
    transform:
        translateX(3px);
}

/* =========================================================
   Segurança
   ========================================================= */

.login-security-note{
    position:relative;
    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    margin-top:18px;

    color:#898394;

    font-size:9px;
}

.login-security-note svg{
    width:14px;
    height:14px;

    color:
        var(--login-purple);

    display:block;
}

/* =========================================================
   Frase lateral
   ========================================================= */

.login-signature{
    max-width:170px;

    color:
        rgba(124,58,237,.66);

    font-size:18px;

    line-height:1.45;

    font-style:italic;

    transform:
        rotate(-4deg);

    text-align:center;

    text-shadow:
        0 6px 18px rgba(124,58,237,.10);
}

/* =========================================================
   Benefícios inferiores
   ========================================================= */

.login-benefits-footer{
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:18px;

    margin-top:8px;
}

.login-footer-benefit{
    min-width:0;

    display:flex;

    align-items:center;

    gap:10px;

    padding:
        10px
        12px;

    border-radius:14px;

    background:
        rgba(255,255,255,.28);
}

.login-footer-benefit__icon{
    width:34px;
    height:34px;
    min-width:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

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

    border:
        1px solid rgba(124,58,237,.09);

    color:
        var(--login-purple);

    box-shadow:
        0 6px 16px rgba(67,39,120,.05);
}

.login-footer-benefit__icon svg{
    width:17px;
    height:17px;
    display:block;
}

.login-footer-benefit strong{
    display:block;

    color:
        var(--login-text);

    font-size:9px;

    line-height:1.3;
}

.login-footer-benefit small{
    display:block;

    margin-top:2px;

    color:
        var(--login-muted);

    font-size:8px;

    line-height:1.3;
}

/* =========================================================
   Animação
   ========================================================= */

@keyframes loginFadeUp{
    from{
        opacity:0;
        transform:
            translateY(14px);
    }

    to{
        opacity:1;
        transform:
            translateY(0);
    }
}

/* =========================================================
   Responsividade
   ========================================================= */

@media (max-width:1180px){

    .login-page{
        grid-template-columns:
            285px
            minmax(0,1fr);
    }

    .login-brand-panel{
        padding:
            34px
            28px;
    }

    .login-brand-title{
        font-size:34px;
    }

    .login-content{
        padding:
            24px
            26px
            28px;
    }

    .login-main-wrapper{
        grid-template-columns:
            minmax(0,1fr)
            135px;

        gap:18px;
    }

}

@media (max-width:960px){

    .login-page{
        display:block;
    }

    .login-brand-panel{
        min-height:auto;

        padding:
            24px
            26px;
    }

    .login-brand-center,
    .login-brand-bottom{
        display:none;
    }

    .login-brand__logo{
        width:46px;
        height:46px;
        min-width:46px;

        border-radius:14px;
    }

    .login-brand__logo svg{
        width:23px;
        height:23px;
    }

    .login-brand__content h1{
        font-size:24px;
    }

    .login-brand__content p{
        font-size:7px;
        letter-spacing:3px;
    }

    .login-content{
        min-height:
            calc(100vh - 95px);

        padding:
            16px
            18px
            26px;
    }

    .login-main-wrapper{
        max-width:660px;

        grid-template-columns:1fr;

        padding-top:16px;
    }

    .login-signature{
        display:none;
    }

    .login-benefits-footer{
        max-width:660px;

        margin:
            0 auto;

        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}

@media (max-width:660px){

    .login-content-top{
        min-height:36px;
    }

    .login-help{
        font-size:9px;
    }

    .login-card{
        padding:
            24px
            18px;

        border-radius:24px;
    }

    .login-card-header h2{
        font-size:31px;
    }

    .login-card-header p{
        font-size:11px;
    }

    .login-field input{
        min-height:48px;
    }

    .login-benefits-footer{
        grid-template-columns:1fr;

        gap:8px;

        margin-top:12px;
    }

    .login-footer-benefit{
        padding:
            8px
            10px;
    }

}

@media (prefers-reduced-motion:reduce){

    .login-card,
    .login-field input,
    .login-submit,
    .login-submit svg,
    .login-password-toggle{
        animation:none;
        transition:none;
    }

    .login-submit:hover{
        transform:none;
    }

    .login-submit:hover svg{
        transform:none;
    }

}