/*==========================================================
    VARIABLES
==========================================================*/

:root{

    --primary:#7A1F5C;
    --primary-light:#9A3E78;
    --beige:#F4E8D5;
    --white:#FFFFFF;
    --text:#1D1D1D;
    --background:#F5F5F5;
    --border:#E8E8E8;
    --shadow:0 15px 40px rgba(0,0,0,.08);
    --radius:24px;
    --transition:.30s ease;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Poppins",sans-serif;
    background:var(--background);
    color:var(--text);

}

/*==========================================================
    CONTENEDOR PRINCIPAL
==========================================================*/

.login-layout{

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    padding:24px;

    gap:28px;

}

/*==========================================================
    PANEL IZQUIERDO
==========================================================*/

.left-panel{

    position:relative;

    border-radius:30px;

    overflow:hidden;

    padding:40px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    background:
    linear-gradient(
        rgba(255,255,255,.84),
        rgba(255,255,255,.84)
    ),
    url("img/login-bg.jpg");

    background-size:cover;

    background-position:center;

    box-shadow:var(--shadow);

}

/*==========================================================
    BOTÓN VOLVER
==========================================================*/

.back-link{

    width:max-content;

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

    transition:var(--transition);

}

.back-link:hover{

    transform:translateX(-5px);

}

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

.brand{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:35px;

}

.brand-logo{

    width:90px;

    height:90px;

    object-fit:contain;

}

.brand-text h1{

    font-size:2.2rem;

    font-weight:700;

    color:#111;

    line-height:1.1;

}

.brand-text p{

    margin-top:8px;

    color:#444;

    font-size:1rem;

}

/*==========================================================
    BIENVENIDA
==========================================================*/

.welcome{

    max-width:520px;

    margin-top:50px;

}

.welcome h2{

    font-size:3.2rem;

    line-height:1.15;

    margin-bottom:20px;

}

.welcome span{

    display:block;

    color:var(--primary);

}

.title-line{

    width:90px;

    height:4px;

    border-radius:20px;

    background:var(--primary);

    margin-bottom:28px;

}

.welcome p{

    font-size:1.15rem;

    line-height:1.9;

    color:#444;

}

/*==========================================================
    IMAGEN
==========================================================*/

.image-container{

    margin-top:50px;

    width:100%;

}

.image-container img{

    width:100%;

    border-radius:24px;

    display:block;

}
/*==========================================================
    PANEL DERECHO
==========================================================*/

.right-panel{

    display:flex;

    align-items:center;

    justify-content:center;

}

/*==========================================================
    TARJETA LOGIN
==========================================================*/

.login-card{

    width:100%;

    max-width:650px;

    background:var(--white);

    border-radius:30px;

    padding:50px;

    box-shadow:var(--shadow);

}

.login-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    background:rgba(122,31,92,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}

.login-icon i{

    font-size:2.3rem;

    color:var(--primary);

}

.login-card h2{

    font-size:2.4rem;

    margin-bottom:35px;

}

/*==========================================================
    FORMULARIO
==========================================================*/

.input-group{

    margin-bottom:25px;

}

.input-group label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

    font-size:1rem;

}

.input-box{

    display:flex;

    align-items:center;

    gap:15px;

    border:2px solid var(--border);

    border-radius:18px;

    padding:0 18px;

    height:64px;

    transition:var(--transition);

    background:#fff;

}

.input-box:focus-within{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(122,31,92,.10);

}

.input-box i{

    color:#8A8A8A;

    font-size:1.2rem;

}

.input-box input{

    width:100%;

    border:none;

    outline:none;

    font-size:1rem;

    font-family:"Poppins",sans-serif;

    background:transparent;

}

/*==========================================================
    MOSTRAR CONTRASEÑA
==========================================================*/

.password-box{

    position:relative;

}

.toggle-password{

    background:none;

    border:none;

    cursor:pointer;

    color:#888;

    font-size:1.2rem;

    transition:var(--transition);

}

.toggle-password:hover{

    color:var(--primary);

}

/*==========================================================
    MENSAJES DE ERROR
==========================================================*/

.error-message{

    display:block;

    margin-top:8px;

    font-size:.88rem;

    color:#d63333;

    min-height:20px;

}

/*==========================================================
    ENLACES
==========================================================*/

.login-links{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.login-links a{

    text-decoration:none;

    color:var(--primary);

    font-weight:500;

    transition:var(--transition);

}

.login-links a:hover{

    color:var(--primary-light);

    text-decoration:underline;

}

/*==========================================================
    BOTÓN LOGIN
==========================================================*/

.login-button{

    width:100%;

    height:64px;

    border:none;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:#fff;

    font-size:1.1rem;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}

.login-button:hover:not(:disabled){

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(122,31,92,.25);

}

.login-button:disabled{

    opacity:.45;

    cursor:not-allowed;

    transform:none;

}

/*==========================================================
    SEPARADOR
==========================================================*/

.separator{

    display:flex;

    align-items:center;

    gap:20px;

    margin:35px 0;

}

.separator::before,

.separator::after{

    content:"";

    flex:1;

    height:1px;

    background:#DDDDDD;

}

.separator span{

    font-weight:600;

    color:#777;

}
/*==========================================================
    BOTÓN INVITADO
==========================================================*/

.guest-button{

    width:100%;

    height:64px;

    border:2px solid var(--primary);

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:var(--primary);

    font-size:1.05rem;

    font-weight:600;

    transition:var(--transition);

}

.guest-button:hover{

    background:var(--primary);

    color:var(--white);

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(122,31,92,.20);

}

.guest-button i{

    font-size:1.1rem;

}

/*==========================================================
    INFORMACIÓN DE SEGURIDAD
==========================================================*/

.security-info{

    margin-top:45px;

    padding:22px;

    border-radius:18px;

    background:#fafafa;

    display:flex;

    align-items:flex-start;

    gap:18px;

    border:1px solid #ececec;

}

.security-info i{

    font-size:2rem;

    color:var(--primary);

}

.security-info p{

    color:#555;

    line-height:1.7;

    font-size:.95rem;

}

/*==========================================================
    EFECTOS
==========================================================*/

.login-card{

    animation:fadeUp .8s ease;

}

.left-panel{

    animation:fadeLeft .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-35px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

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

@media(max-width:1100px){

    .login-layout{

        grid-template-columns:1fr;

        gap:35px;

        padding:18px;

    }

    .left-panel{

        min-height:500px;

    }

    .welcome h2{

        font-size:2.6rem;

    }

    .login-card{

        max-width:100%;

    }

}

@media(max-width:768px){

    .left-panel{

        padding:28px;

    }

    .login-card{

        padding:35px 25px;

    }

    .brand{

        flex-direction:column;

        text-align:center;

    }

    .brand-logo{

        width:75px;

        height:75px;

    }

    .brand-text h1{

        font-size:1.8rem;

    }

    .welcome{

        margin-top:35px;

    }

    .welcome h2{

        font-size:2.2rem;

    }

    .welcome p{

        font-size:1rem;

        line-height:1.8;

    }

    .login-links{

        flex-direction:column;

        gap:12px;

        align-items:flex-start;

    }

}

@media(max-width:480px){

    .login-layout{

        padding:12px;

    }

    .left-panel{

        border-radius:20px;

        padding:22px;

    }

    .login-card{

        border-radius:20px;

        padding:28px 20px;

    }

    .login-card h2{

        font-size:2rem;

    }

    .login-icon{

        width:75px;

        height:75px;

    }

    .login-button,

    .guest-button{

        height:58px;

    }

}