/*=====================================================================
 ERP WEBEMPRESA
 LOGIN V3
 Desenvolvido para AR Sistemas

 Autor.....: ChatGPT + David Rodrigues
 Projeto...: WEBEMPRESA
======================================================================*/


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

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

html{
    height:100%;
}

body{

    min-height:100vh;

    font-family:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    color:#334155;

    overflow-x:hidden;

    background:

        radial-gradient(circle at top right,
            rgba(15,118,110,.18),
            transparent 28%),

        radial-gradient(circle at bottom left,
            rgba(33,77,123,.15),
            transparent 30%),

        linear-gradient(
            135deg,
            #eef5fb 0%,
            #f5f9fd 40%,
            #ffffff 100%);
}

/*=====================================================================
 CONTAINER
======================================================================*/

.login-wrapper{

    width:1180px;

    height:min(780px,92vh);

    margin:10px auto;

    display:flex;

    overflow:visible;

    border-radius:0px;

    background:#FFF;

    box-shadow:

        0 25px 60px rgba(0,0,0,.12);

}


/*=====================================================================
 PAINEL ESQUERDO
======================================================================*/
.login-container{

    width:96%;
    max-width:1600px;
    min-height:92vh;

    margin:18px auto;

    display:flex;

    overflow:visible;

    border-radius:30px;

    background:linear-gradient(135deg,#0d3f59 0%,#0b5767 55%,#01706d 100%);

    box-shadow:
        0 15px 45px rgba(0,0,0,.18);
	position:relative;
}
.login-left{

    width:42%;
    position:relative;
    padding:30px 55px 30px;

    overflow:visible;

    color:#FFF;

    background:
        linear-gradient(
            145deg,
            #103b63 0%,
            #0d5b67 55%,
            #01706d 100%);
}

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

.left-logo{

    position:relative;

    z-index:2;

    margin-bottom:20px;
}

.left-logo img{

    max-width:260px;

    filter:

        drop-shadow(
            0 12px 18px rgba(0,0,0,.18));
}


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

.left-title{

    position:relative;

    z-index:2;

    font-size:38px;

    font-weight:700;

    line-height:48px;

    margin-bottom:18px;
}

.left-subtitle{

    position:relative;

    z-index:2;

    font-size:18px;

    line-height:30px;

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

    margin-bottom:25px;
}


/*=====================================================================
 BENEFÍCIOS
======================================================================*/

.features{

    position:relative;

    z-index:2;

    list-style:none;
}

.features li{

    display:flex;

    align-items:center;

    margin-bottom:22px;

    font-size:17px;

    font-weight:500;
}

.features li i{

    width:42px;

    height:42px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    margin-right:16px;

    font-size:18px;
}


/*=====================================================================
 CARD SEGURANÇA
======================================================================*/


.security-title{

    font-size:15px;

    font-weight:600;

    margin-bottom:8px;
}

.security-text{

    font-size:13px;

    line-height:20px;

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



/*=====================================================================
 PAINEL DIREITO
======================================================================*/

/* ==========================
   PAINEL DIREITO
========================== */

.login-right{

    width:58%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:35px;

    background:transparent;
}
.login-right{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

    position:relative;
}
/* =======================================================
   CARD DO LOGIN
======================================================= */

.scFormBorderLogin{

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

    margin:0 auto;

    background:#ffffff !important;

    border:1px solid rgba(0,0,0,.08) !important;

    border-radius:24px !important;

    overflow:visible;

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

    padding:0 !important;

    position:relative;

    transition:all .30s ease;
}
.scFormBorderLogin:hover{

    transform:translateY(-2px);

    box-shadow:
        0 24px 60px rgba(0,0,0,.22);
}
/*=====================================================================
 CARD LOGIN
======================================================================*/
.login-card{

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

    background:#fff;

    border-radius:26px;

    overflow:hidden;

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);
}

.login-card:hover{

    transform:translateY(-4px);

    box-shadow:

        0 25px 60px rgba(15,23,42,.14);
}
/*=====================================================================
 LOGO DO CARD
======================================================================*/

.login-logo{

    text-align:center;

    margin-bottom:18px;
}

.login-logo img{

    max-width:180px;

    transition:.30s;
}

.login-logo img:hover{

    transform:scale(1.03);
}


/*=====================================================================
 TÍTULOS
======================================================================*/

.login-title{

    text-align:center;

    font-size:30px;

    font-weight:700;

    color:#103b63;

    margin-bottom:8px;
}

.login-description{

    text-align:center;

    color:#64748b;

    font-size:15px;

    margin-bottom:35px;
}


/*=====================================================================
 FORMULÁRIO
======================================================================*/

.form-group{

    margin-bottom:22px;
}

.form-label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:#334155;
}


/*=====================================================================
 INPUTS
======================================================================*/

.form-control{

    width:100%;

    height:52px;

    border:1px solid #d9e2ec;

    border-radius:12px;

    background:#ffffff;

    padding:0 18px;

    font-size:15px;

    color:#334155;

    transition:all .25s ease;
}

.form-control::placeholder{

    color:#94a3b8;
}

.form-control:hover{

    border-color:#8db7dd;
}

.form-control:focus{

    outline:none;

    border-color:#01706d;

    box-shadow:

        0 0 0 4px rgba(1,112,109,.12);
}


/*=====================================================================
 INPUT COM ÍCONE
======================================================================*/

.input-group{

    position:relative;
}

.input-group i{

    position:absolute;

    top:17px;

    left:16px;

    color:#94a3b8;

    font-size:17px;
}

.input-group .form-control{

    padding-left:46px;
}


/*=====================================================================
 MOSTRAR SENHA
======================================================================*/

.password-toggle{

    position:absolute;

    top:16px;

    right:16px;

    cursor:pointer;

    color:#94a3b8;

    transition:.25s;
}

.password-toggle:hover{

    color:#01706d;
}


/*=====================================================================
 LINHA AUXILIAR
======================================================================*/

.login-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:22px 0 28px;
}

.login-options a{

    color:#01706d;

    text-decoration:none;

    font-size:14px;

    font-weight:600;
}

.login-options a:hover{

    text-decoration:underline;
}


/*=====================================================================
 CHECKBOX
======================================================================*/

.checkbox{

    display:flex;

    align-items:center;

    font-size:14px;

    color:#475569;
}

.checkbox input{

    margin-right:8px;

    width:16px;

    height:16px;

    accent-color:#01706d;
}


/*=====================================================================
 BOTÃO
======================================================================*/

.login-button{

    width:100%;

    height:54px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    color:#ffffff;

    background:

        linear-gradient(
            135deg,
            #016766,
            #014c4d);

    transition:all .30s ease;

    box-shadow:

        0 10px 25px rgba(1,103,102,.28);
}

.login-button:hover{

    transform:translateY(-2px);

    box-shadow:

        0 18px 35px rgba(1,103,102,.35);

    background:

        linear-gradient(
            135deg,
            #018887,
            #016766);
}

.login-button:active{

    transform:scale(.98);
}


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

.separator{

    display:flex;

    align-items:center;

    margin:30px 0;
}

.separator:before,

.separator:after{

    content:"";

    flex:1;

    height:1px;

    background:#e5e7eb;
}

.separator span{

    padding:0 14px;

    font-size:13px;

    color:#94a3b8;
}


/*=====================================================================
 RODAPÉ DO CARD
======================================================================*/

.login-card-footer{

    margin-top:28px;

    text-align:center;

    color:#64748b;

    font-size:13px;

    line-height:22px;
}

.login-card-footer a{

    color:#016766;

    text-decoration:none;

    font-weight:600;
}

.login-card-footer a:hover{

    text-decoration:underline;
}


/*=====================================================================
 FOOTER DA PÁGINA
======================================================================*/

.page-footer{

    width:1180px;

    margin:18px auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#64748b;

    font-size:13px;
}

.page-footer i{

    color:#01706d;

    margin-right:6px;
}


/*=====================================================================
 ANIMAÇÕES
======================================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

.login-wrapper{

    animation:fadeUp .70s ease;
}


/*=====================================================================
 RESPONSIVO
======================================================================*/

@media(max-width:1100px){

.login-wrapper{

    width:96%;
}

.login-left{
    display:flex;
    flex-direction:column;
}



.login-right{

    width:100%;
}

.login-card{

    width:100%;
}

.page-footer{

    width:96%;
}
}

@media(max-width:640px){

.login-card{

    padding:30px;
}

.login-title{

    font-size:24px;
}

.login-button{

    height:50px;
}

.form-control{

    height:48px;
}

}

body.scFormPageLogin1{
    margin:0;
    padding:0;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#eef3f8;
}


.scFormTable{
    height:auto !important;
}

.scFormTable tr{
    height:auto !important;
}

.scFormDataOddD2{
    height:auto !important;
}

#main_table_form{

    width:100% !important;

    max-width:760px;

    margin:auto;
}
.brand-area{
    margin-bottom:28px;
}

.brand-title{
    font-size:28px;
    font-weight:400;
    color:#fff;
    letter-spacing:.5px;
}

.brand-title strong{
    color:#15d0c5;
    font-weight:700;
}

.brand-subtitle{
    margin-top:12px;
    color:rgba(255,255,255,.85);
    font-size:13px;
    line-height:22px;
    letter-spacing:2px;
    text-transform:uppercase;
}


/*==========================================================
  RECURSOS
==========================================================*/

.feature-list{

    display:flex;
    flex-direction:column;
    gap:2px;

    flex:none;
	
	
}

.feature-item{

    display:flex;
    align-items:flex-start;

    gap:2px;

    margin-bottom:10px;
}

.feature-content{

    display:flex;

    flex-direction:column;

    padding-top:3px;
}

.feature-title{

    color:#FFF;

    font-size:16px;

    font-weight:700;

    line-height:1.45;

    margin-bottom:4px;
}

.feature-desc{

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

    font-size:13px;

    line-height:1.55;

    max-width:280px;

    line-height:1.35;
}

.feature-item:hover .feature-icon{

    transform:translateX(4px) scale(1.05);

    box-shadow:
        0 10px 20px rgba(0,0,0,.20),
        0 0 18px rgba(22,201,195,.35);

    background:#17d2c7;
}

.feature-icon{

    width:56px;
    height:56px;

    min-width:56px;

    border-radius:50%;

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

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

    color:#fff;

    font-size:24px;

    transition:all .25s ease;
}

.feature-item:hover .feature-icon{

    background:#16c9c3;

    transform:translateX(3px);

    box-shadow:0 8px 20px rgba(22,201,195,.30);
}

.feature-text{
    color:rgba(255,255,255,.95);
    letter-spacing:.2px;
}

.feature-item:hover{
    transform:translateX(6px);
}

.feature-item:hover .feature-text{
    color:#ffffff;
}
.login-left::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 20% 20%,
        rgba(255,255,255,.05),
        transparent 45%),

        radial-gradient(circle at 90% 10%,
        rgba(0,255,210,.05),
        transparent 35%);

    pointer-events:none;
}
.login-left::before{

    content:"";

    position:absolute;

    inset:0;

    background:url(imagens/bg-tech.png) center bottom;

    background-size:cover;

    opacity:.08;

    pointer-events:none;
}
.brand-divider{

    width:78px;

    height:3px;

    margin-top:13px;

    margin-bottom:20px;

    border-radius:3px;

    background:#18d6cd;
}
.security-box{

    margin-top:5px;

    padding:14px 16px;

    display:flex;
    align-items:center;
    gap:2px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02));

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

    backdrop-filter:blur(8px);

    transition:.30s;
}

.security-icon{

    width:48px;
    height:48px;

    flex-shrink:0;

    border-radius:50%;

    background:linear-gradient(135deg,#1bd4c8,#0e8d8b);

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

    color:#FFF;

    font-size:20px;

    box-shadow:0 6px 16px rgba(0,0,0,.22);
}

.security-title{

    font-size:18px;
    margin-bottom:4px;
}

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

.login-header{

    text-align:center;

    margin:10px 0 20px 0;

    animation:fadeUp .6s ease;
	margin-top:18px;
    margin-bottom:28px;
}

.login-header h2{

    margin:0;

    font-size:22px;
    font-weight:700;
    color:#14364b;

    letter-spacing:-0.5px;

    line-height:1.2;
}

.login-header p{

    margin:5px 0 0 0;

    font-size:15px;
    color:#6b7280;

    font-weight:400;

    letter-spacing:.0.5px;
}
.login-title-row{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:2px;

    margin-bottom:5px;
}

.login-title-row span{

    width:55px;

    height:1px;

    background:#d9e2ec;
}
.logo-container img{
    width:170px;
    height:auto;
}
.input-login{

    position:relative;

    width:100%;
}
.input-login i{

    position:absolute;

    left:4px;

    top:50%;

    transform:translateY(-50%);

    color:#8b97a7;

    font-size:20px;

    pointer-events:none;

    transition:.2s;
}
.input-login:focus-within i{

    color:#016766;
}
#id_sc_field_login,
#id_sc_field_senha{

    padding-left:30px !important;
}
.password-wrapper{

    position:relative;

    width:100%;
}
.password-wrapper i{

    position:absolute;

    left:4px;

    top:50%;

    transform:translateY(-50%);

    color:#8b97a7;

    font-size:20px;

    pointer-events:none;
}
/*====================================================
  AVISO CAPS LOCK
====================================================*/
.caps-warning strong{
    font-weight:600;
}

.caps-warning{

    position:absolute;

    left:48px;           /* alinhado com o texto do placeholder */

    top:100%;

    margin-top:0px;

    display:none;

    align-items:center;

    gap:8px;

    font-size:13px;

    color:#d97706;

    background:transparent;

    z-index:30;
	
	animation:capsFade .25s ease;
}

.caps-warning{

    left:135px;

    top:calc(59% + 8px);
}

.caps-warning span{

    font-weight:600;
}

@keyframes capsFade{

    from{
        opacity:0;
        transform:translateY(-8px);
    }

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