/*=============================================================================

 ███████╗██╗██████╗  ██████╗██╗
 ██╔════╝██║██╔══██╗██╔════╝██║
 ███████╗██║██████╔╝██║     ██║
 ╚════██║██║██╔═══╝ ██║     ██║
 ███████║██║██║     ╚██████╗██║
 ╚══════╝╚═╝╚═╝      ╚═════╝╚═╝


Framework : SIPCI UI
Archivo   : login.css
Módulo    : Login SIPCI Manager
Versión   : 1.0.0

=============================================================================*/

/*
╔══════════════════════════════════════════════════════╗
║                SIPCI TECHNOLOGIES                    ║
║----------------------------------------------------- ║
║ Sistema desarrollado por Abel Flores Terán           ║
║                                                      ║
║ Product ID : SIPCI-MANGER                            ║
║ Version    : 1.0.0                                   ║
║ Build      : 2026.07.16                              ║
║ Developer  : Abel Flores Terán                       ║
║ Signature  : AFT-8F5D-91AC-2026                      ║
║                                                      ║
║ © Todos los derechos reservados                      ║
╚══════════════════════════════════════════════════════╝
*/

/*==================================================
LAYOUT PRINCIPAL
==================================================*/


.sip-login{

    min-height:100vh;

    display:flex;

    overflow:hidden;

    background:var(--bg-body);

}



/*==================================================
PANEL IZQUIERDO BRAND
==================================================*/
.sip-login-left{

    width:50%;

    min-height:100vh;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:var(--space-80);


    background-image:

    linear-gradient(
        135deg,
        var(--sip-primary),
        var(--sip-primary-dark)
    ),

    url("../../img/circuitos.png");


    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;


    overflow:hidden;

}

.sip-login-left::before{

    content:"";

    position:absolute;

    inset:0;


    background:

    radial-gradient(
        circle at center,
        rgba(255,193,7,.25),
        transparent 45%
    );


    opacity:.7;

    z-index:1;

}

.sip-login-left::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:url("../../img/circuitos.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    opacity:.25;

    z-index:1;

}


.sip-login-left::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:url("../../img/circuitos.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    opacity:.12;

    z-index:1;

}

/*==================================================
CONTENIDO BRAND
==================================================*/

.sip-login-brand{

    position:relative;

    z-index:2;

}


/* LOGO */


.sip-login-brand img{

    width:260px;

    margin-bottom:30px;

}







/* TITULO */


.sip-login-brand h1{


    font-family:var(--font-title);


    font-size:3.4rem;


    font-weight:var(--weight-black);


    letter-spacing:3px;


    color:var(--text-white);



    margin:0;



}





.sip-login-brand h1 span{


    color:var(--sip-accent);


}







/* DESCRIPCIÓN */


.sip-login-brand p{


    margin-top:var(--space-20);


    font-family:var(--font-primary);


    font-size:var(--font-xl);


    font-weight:var(--weight-medium);


    line-height:1.6;


    color:var(--text-white);



}








/*==================================================
FEATURE CARDS
==================================================*/


.sip-features{


    width:100%;


    margin-top:var(--space-64);



    display:grid;


    grid-template-columns:repeat(4,1fr);



    gap:var(--space-20);



}





.sip-features div{


    min-height:110px;



    padding:var(--space-16);



    border-radius:var(--radius-lg);



    display:flex;



    flex-direction:column;



    align-items:center;



    justify-content:center;



    text-align:center;



    background:

    rgba(255,255,255,.12);



    border:

    1px solid rgba(255,255,255,.25);



    backdrop-filter:blur(12px);



    color:var(--text-white);



    transition:var(--transition-normal);



}





.sip-features div:hover{


    transform:translateY(-8px);


    background:

    rgba(255,255,255,.20);


}






.sip-features i{


    font-size:var(--icon-xl);


    color:var(--sip-accent);


    margin-bottom:var(--space-12);


}





.sip-features span{


    font-size:var(--font-sm);


    font-weight:var(--weight-semibold);



}

/*==================================================
PANEL DERECHO LOGIN
==================================================*/


.sip-login-right{


    width:50%;


    min-height:100vh;


    position:relative;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    background:var(--text-white);



}






/*==================================================
TITULO SUPERIOR
==================================================*/


.sip-login-top{


    position:relative;


    margin-bottom:24px;



    text-align:center;



    font-family:var(--font-primary);


    font-size:var(--font-lg);



    color:var(--text-primary);



}





.sip-login-top strong{


    display:block;



    margin-top:8px;



    font-family:var(--font-title);



    font-size:var(--font-2xl);



    font-weight:var(--weight-bold);



    color:var(--sip-primary);



}






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


.sip-login-box{


    width:470px;



    padding:var(--space-48);



    border-radius:var(--radius-xl);



    background:var(--text-white);



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



    position:relative;



}







/* LOGO LOGIN */


.sip-logo-login{


    width:190px;



    display:block;



    margin:0 auto;



}


.sip-login-box{

    max-height: 650px;

}



.sip-login-box p{


    text-align:center;



    margin:

    var(--space-20)

    0

    var(--space-32);



    color:var(--text-muted);



    font-size:var(--font-md);



}







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


.sip-input-group{


    height:var(--input-height);



    width:100%;



    display:flex;



    align-items:center;



    gap:var(--space-12);



    padding:0 var(--space-16);



    margin-bottom:var(--space-20);



    border:1px solid #d1d5db;



    border-radius:var(--radius-md);



    background:var(--text-white);



    transition:var(--transition-normal);



}





.sip-input-group:focus-within{


    border-color:var(--sip-primary);



    box-shadow:

    0 0 0 4px rgba(14,77,164,.12);



}






.sip-input-group i{


    color:var(--sip-primary);



    font-size:var(--icon-md);



}





.sip-input-group input{


    width:100%;



    border:none;



    outline:none;



    background:none;



    font-family:var(--font-primary);



    font-size:var(--font-md);



    color:var(--text-primary);



}







/*==================================================
RECUPERAR PASSWORD
==================================================*/


.forgot{


    display:block;



    text-align:right;



    margin-bottom:var(--space-16);



    color:var(--sip-primary);



    font-size:var(--font-sm);



    cursor:pointer;



}







/*==================================================
BOTON PRINCIPAL
==================================================*/


.sip-btn-login{


    width:100%;



    height:var(--button-height);



    border:none;



    border-radius:var(--radius-md);



    background:var(--sip-primary);



    color:var(--text-white);



    font-size:var(--font-lg);



    font-weight:var(--weight-semibold);



    cursor:pointer;



    display:flex;



    justify-content:center;



    align-items:center;



    gap:var(--space-12);



    transition:var(--transition-normal);



}






.sip-btn-login:hover{


    background:var(--sip-primary-dark);



    transform:translateY(-3px);



}






/*==================================================
DIVIDER
==================================================*/


.divider{


    display:flex;



    align-items:center;



    justify-content:center;



    margin:

    var(--space-24)

    0;



    color:var(--text-muted);



    font-size:var(--font-sm);



}





.divider::before,


.divider::after{


    content:"";



    flex:1;



    height:1px;



    background:#e5e7eb;



    margin:0 var(--space-12);



}






/*==================================================
GOOGLE BUTTON
==================================================*/


.google-btn{
    width:100%;
    height:var(--button-height);
    border-radius:var(--radius-md);
    border:1px solid var(--sip-primary);
    background:transparent;
    color:var(--sip-primary);
    font-weight:var(--weight-semibold);
    font-size:var(--font-md);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-12);
    cursor:pointer;
    transition:var(--transition-normal);
    margin-top: var(--space-10);
}

.google-btn:hover{
    background:var(--bg-body);
}

.google-btn i{
    font-size:var(--icon-md);
}


/*==================================================
FOOTER
==================================================*/

.sip-login-right footer{
    position:relative;
    margin-top:25px;
    bottom:auto;
    text-align:center;
}

.sip-login-right footer i{
    color:var(--sip-primary);
}


.login-alert{

    display:flex;

    align-items:center;

    gap:10px;


    background:#fee2e2;


    color:var(--sip-danger);


    padding:12px 15px;


    border-radius:var(--radius-md);


    font-size:var(--font-sm);


    margin-bottom:20px;


}

/*==================================================
RESPONSIVE SYSTEM
==================================================*/


/*==================================================
ULTRA WIDE DESKTOP
1400px +
==================================================*/

@media(min-width:1400px){


.sip-login-left{

    padding:var(--space-80);

}


.sip-login-brand img{

    width:300px;

}


.sip-login-brand h1{

    font-size:3.4rem;

}



.sip-login-box{

    width:480px;

}



}





/*==================================================
DESKTOP
1200px - 1399px
==================================================*/

@media(max-width:1399px){


.sip-login-left{

    padding:var(--space-48);

}



.sip-login-brand img{

    width:250px;

}



.sip-login-brand h1{

    font-size:2.8rem;

}



.sip-login-brand p{

    font-size:var(--font-md);

}




.sip-features{

    gap:var(--space-12);

}




.sip-features div{

    height:95px;

}




.sip-login-box{

    width:420px;

    padding:var(--space-40);

}



}





/*==================================================
TABLET LANDSCAPE
992px
==================================================*/

@media(max-width:992px){


.sip-login{


    flex-direction:column;


}





/* BRAND */


.sip-login-left{


    width:100%;

    min-height:auto;

    padding:var(--space-48) var(--space-32);


}




.sip-login-brand{


    width:100%;

    max-width:700px;

    margin:auto;


}




.sip-login-brand img{


    width:220px;


}




.sip-login-brand h1{


    font-size:2.5rem;


}




.sip-features{


    grid-template-columns:repeat(2,1fr);


}





/* LOGIN */


.sip-login-right{


    width:100%;

    min-height:auto;

    padding:var(--space-48) var(--space-24);


}




.sip-login-top{


    position:relative;

    top:auto;

    margin-bottom:var(--space-24);


}





.sip-login-box{


    width:100%;

    max-width:480px;


}



.sip-login-right footer{


    position:relative;

    bottom:auto;

    margin-top:var(--space-32);


}



}








/*==================================================
TABLET VERTICAL
768px
==================================================*/

@media(max-width:768px){



.sip-login-left{


    padding:var(--space-40) var(--space-24);


}




.sip-login-brand img{


    width:190px;


}





.sip-login-brand h1{


    font-size:2rem;


}





.sip-login-brand p{


    font-size:var(--font-md);


}





.sip-features{


    grid-template-columns:repeat(2,1fr);


    width:100%;


}





.sip-features div{


    height:100px;


}





.sip-login-right{


    padding:var(--space-32) var(--space-16);


}





.sip-login-box{


    padding:var(--space-32);


}





}







/*==================================================
MOBILE
576px
==================================================*/

@media(max-width:576px){



.sip-login-left{


    padding:var(--space-32) var(--space-16);


}




.sip-login-brand img{


    width:160px;


}




.sip-login-brand h1{


    font-size:1.7rem;

    letter-spacing:1px;


}





.sip-login-brand p{


    font-size:var(--font-sm);


}





.sip-features{


    grid-template-columns:1fr;


}





.sip-features div{


    height:85px;


}





.sip-login-right{


    padding:var(--space-16);


}





.sip-login-box{


    padding:var(--space-24);

    border-radius:var(--radius-lg);


}





.sip-logo-login{


    width:130px;


}





.sip-input-group{


    height:44px;


}





.sip-btn-login,

.google-btn{


    height:44px;

    font-size:var(--font-md);


}




.sip-login-top strong{


    font-size:var(--font-xl);


}





.sip-login-right footer{


    font-size:var(--font-xs);


}



}








/*==================================================
SMALL MOBILE
390px
==================================================*/

@media(max-width:390px){



.sip-login-brand img{


    width:130px;


}





.sip-login-brand h1{


    font-size:1.45rem;


}





.sip-login-brand p{


    line-height:1.4;


}




.sip-features div{


    min-height:80px;


}




.sip-login-box{


    padding:20px;


}





.sip-login-top{


    font-size:var(--font-sm);


}





.sip-input-group{


    padding:0 10px;


}




.sip-input-group i{


    font-size:var(--icon-sm);


}




.sip-btn-login,

.google-btn{


    font-size:var(--font-sm);


}



}

/*==================================================
AJUSTE FINAL DESKTOP
==================================================*/

@media(min-width:1200px){


.sip-login-left{

    align-items:center;

    justify-content:center;

    padding:40px;

}



.sip-login-brand{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}



.sip-login-brand img{

    width:230px;

    margin-bottom:25px;

}




.sip-login-brand h1{

    margin:0;

    font-size:3rem;

}




.sip-login-brand p{

    margin-top:20px;

    line-height:1.5;

}




.sip-features{

    margin-top:45px;

    width:90%;

    gap:15px;

}




.sip-features div{

    height:90px;

}





/* PANEL DERECHO */


.sip-login-right{

    justify-content:center;

}



.sip-login-top{

    margin-bottom:32px;

}



.sip-login-box{

    width:430px;

    padding:40px;

}




.sip-logo-login{

    width:130px;

}



}

@media(max-width:992px){


.sip-features{

    margin-bottom:20px;

}



.sip-login-left{

    min-height:auto;

}



}