/******************************************************************************
 * PeopleHub Login
 ******************************************************************************/

*
{
    box-sizing:
        border-box;
}

html,
body
{
    width:
        100%;

    height:
        100%;

    margin:
        0;

    padding:
        0;
}

body
{
    font-family:
        var(--ph-font-family);

    background:
        var(--ph-gray-100);

    color:
        var(--ph-text);
}


/******************************************************************************
 * Login Container
 ******************************************************************************/

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

.login-container
{
    position:
        relative;

    width:
        100%;

    height:
        100vh;

    min-height:
        100vh;

    display:
        flex;

    overflow:
        hidden;
}


/******************************************************************************
 * Branding
 ******************************************************************************/

.login-brand
{
    position:
        relative;

    width:
        50%;

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        60px;

    overflow:
        hidden;

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

    color:
        var(--ph-white);
        
    box-sizing:
        border-box;
}


/******************************************************************************
 * Branding Content
 ******************************************************************************/

.login-brand-content
{
    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        520px;
}

.login-logo
{
    width:
        76px;

    height:
        76px;

    display:
        block;

    object-fit:
        contain;

    margin-bottom:
        24px;
}

.login-brand-name
{
    font-size:
        2rem;

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

    letter-spacing:
        -.02em;

    margin-bottom:
        42px;
}

.login-brand h1
{
    margin:
        0 0 20px;

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.6rem
        );

    line-height:
        1.08;

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

    letter-spacing:
        -.04em;
}

.login-brand p
{
    max-width:
        430px;

    margin:
        0;

    font-size:
        1.05rem;

    line-height:
        1.7;

    color:
        rgb(255 255 255 / .82);
}


/******************************************************************************
 * Branding Decoration
 ******************************************************************************/

.login-brand-decoration
{
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;
}

.login-brand-decoration span
{
    position:
        absolute;

    display:
        block;

    border:
        1px solid
        rgb(255 255 255 / .16);

    border-radius:
        50%;

    animation:
        loginFloat
        8s
        ease-in-out
        infinite;
}

.login-brand-decoration span:nth-child(1)
{
    width:
        420px;

    height:
        420px;

    right:
        -160px;

    top:
        -100px;
}

.login-brand-decoration span:nth-child(2)
{
    width:
        280px;

    height:
        280px;

    left:
        -130px;

    bottom:
        -90px;

    animation-delay:
        -2s;
}

.login-brand-decoration span:nth-child(3)
{
    width:
        120px;

    height:
        120px;

    right:
        18%;

    bottom:
        12%;

    background:
        rgb(255 255 255 / .05);

    border:
        none;

    animation-delay:
        -4s;
}

@keyframes loginFloat
{
    0%,
    100%
    {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    50%
    {
        transform:
            translate3d(
                0,
                -18px,
                0
            );
    }
}


/******************************************************************************
 * Login Panel
 ******************************************************************************/

.login-panel
{
    width:
        50%;
        
    box-sizing:
         border-box;

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        40px;

    background:
        var(--ph-white);

    overflow:
        hidden;
}


/******************************************************************************
 * Login Card
 ******************************************************************************/

.login-card
{
    width:
        100%;

    max-width:
        440px;
}


/******************************************************************************
 * Mobile Brand
 ******************************************************************************/

.login-mobile-brand
{
    display:
        none;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        40px;
}

.login-mobile-brand img
{
    width:
        42px;

    height:
        42px;

    object-fit:
        contain;
}

.login-mobile-brand span
{
    font-size:
        1.2rem;

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


/******************************************************************************
 * Login Header
 ******************************************************************************/

.login-header
{
    margin-bottom:
        32px;
}

.login-header h2
{
    margin:
        0 0 8px;

    font-size:
        2rem;

    line-height:
        1.2;

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

    color:
        var(--ph-gray-900);
}

.login-header p
{
    margin:
        0;

    color:
        var(--ph-text-secondary);

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


/******************************************************************************
 * Login Form
 ******************************************************************************/

.login-form
{
    width:
        100%;
}

.login-field
{
    margin-bottom:
        20px;
}

.login-field label
{
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--ph-gray-800);

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

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


/******************************************************************************
 * Login Input
 ******************************************************************************/

.login-input
{
    position:
        relative;

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    border:
        1px solid
        var(--ph-border);

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

    background:
        var(--ph-white);

    transition:
        border-color
        var(--ph-transition),

        box-shadow
        var(--ph-transition);
}

.login-input:focus-within
{
    border-color:
        var(--ph-primary);

    box-shadow:
        var(--ph-focus-ring);
}

.login-input > i
{
    width:
        46px;

    flex-shrink:
        0;

    text-align:
        center;

    color:
        var(--ph-gray-500);

    font-size:
        .95rem;
}

.login-input input
{
    width:
        100%;

    min-width:
        0;

    height:
        48px;

    padding:
        0
        12px
        0
        0;

    border:
        none;

    outline:
        none;

    background:
        transparent;

    color:
        var(--ph-gray-900);

    font-family:
        inherit;

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

.login-input input::placeholder
{
    color:
        var(--ph-placeholder);
}


/******************************************************************************
 * Password Toggle
 ******************************************************************************/

.login-password-toggle
{
    width:
        44px;

    height:
        44px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    background:
        transparent;

    color:
        var(--ph-gray-500);

    cursor:
        pointer;

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

.login-password-toggle:hover
{
    color:
        var(--ph-gray-700);

    background:
        var(--ph-gray-100);
}


/******************************************************************************
 * Login Options
 ******************************************************************************/

.login-options
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin:
        4px 0 28px;
}

.login-remember
{
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0;

    color:
        var(--ph-text-secondary);

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

    cursor:
        pointer;
}

.login-remember input
{
    width:
        16px;

    height:
        16px;

    margin:
        0;

    accent-color:
        var(--ph-primary);

    cursor:
        pointer;
}

.login-forgot
{
    color:
        var(--ph-primary);

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

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

    text-decoration:
        none;
}

.login-forgot:hover
{
    color:
        var(--ph-primary-dark);

    text-decoration:
        underline;
}


/******************************************************************************
 * Submit
 ******************************************************************************/

.login-submit
{
    width:
        100%;

    min-height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border:
        none;

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

    background:
        linear-gradient(
            90deg,
            var(--ph-primary),
            var(--ph-secondary)
        );

    color:
        var(--ph-white);

    font-family:
        inherit;

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

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

    cursor:
        pointer;

    box-shadow:
        var(--ph-shadow-sm);

    transition:
        transform
        var(--ph-transition),

        box-shadow
        var(--ph-transition),

        filter
        var(--ph-transition);
}

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

    box-shadow:
        var(--ph-shadow-md);

    filter:
        brightness(.98);
}

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

/******************************************************************************
 * Login Alert
 ******************************************************************************/

.login-alert
{
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        20px;

    padding:
        12px
        14px;

    border:
        1px solid
        rgb(220 38 38 / .18);

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

    background:
        rgb(220 38 38 / .06);

    color:
        #B91C1C;

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

    line-height:
        1.4;
}

.login-alert i
{
    flex-shrink:
        0;

    font-size:
        1rem;
}

.login-success {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;
    padding: 12px 14px;

    border-radius: 10px;

    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.25);

    color: #059669;

    font-size: 13px;
    line-height: 1.4;
}

.login-success i {
    flex-shrink: 0;

    color: #10b981;
}

/* ================================================================
   Form Loading State
   ================================================================ */

.login-submit.is-loading {
    cursor: wait;
    pointer-events: none;
    opacity: .85;
}

.login-submit.is-loading .login-submit-spinner {
    display: inline-block;
}

.login-submit-spinner {
    display: none;

    width: 14px;
    height: 14px;

    margin-right: 8px;

    border: 2px solid currentColor;
    border-right-color: transparent;

    border-radius: 50%;

    vertical-align: -2px;

    animation: login-submit-spin .7s linear infinite;
}

@keyframes login-submit-spin {

    to {
        transform: rotate(360deg);
    }

}

/******************************************************************************
 * Footer
 ******************************************************************************/

.login-footer
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-top:
        32px;

    padding-top:
        20px;

    border-top:
        1px solid
        var(--ph-gray-200);

    color:
        var(--ph-gray-500);

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


/******************************************************************************
 * PeopleHub Splash
 ******************************************************************************/

.login-splash
{
    position:
        fixed;

    inset:
        0;

    z-index:
        999999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #1877f2 0%,
            #159fd0 48%,
            #12c5b3 100%
        );

    opacity:
        1;

    visibility:
        visible;

    transition:
        opacity .45s ease,
        visibility .45s ease;
}

.login-splash.is-hidden
{
    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;
}


/******************************************************************************
 * Splash Content
 ******************************************************************************/

.login-splash-content
{
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    animation:
        loginSplashContent
        .75s
        ease-out
        both;
}

.login-splash-logo
{
    width:
        86px;

    height:
        86px;

    object-fit:
        contain;

    margin-bottom:
        18px;

    filter:
        drop-shadow(
            0
            12px
            24px
            rgba(0,0,0,.12)
        );

    animation:
        loginSplashLogo
        .75s
        cubic-bezier(.22,.61,.36,1)
        both;
}

.login-splash-name
{
    color:
        #ffffff;

    font-size:
        2rem;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        -.04em;
}


/******************************************************************************
 * Splash Waves
 ******************************************************************************/

.login-splash-waves
{
    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;
}

.login-splash-waves span
{
    position:
        absolute;

    display:
        block;

    width:
        900px;

    height:
        900px;

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

    border-radius:
        48% 52% 45% 55%;

    transform:
        rotate(25deg);

    animation:
        loginSplashWave
        12s
        ease-in-out
        infinite;
}

.login-splash-waves span:nth-child(1)
{
    left:
        -560px;

    top:
        -360px;
}

.login-splash-waves span:nth-child(2)
{
    right:
        -580px;

    top:
        -280px;

    width:
        820px;

    height:
        820px;

    opacity:
        .75;

    animation-delay:
        -3s;
}

.login-splash-waves span:nth-child(3)
{
    left:
        -420px;

    bottom:
        -600px;

    width:
        760px;

    height:
        760px;

    opacity:
        .55;

    animation-delay:
        -6s;
}

.login-splash-waves span:nth-child(4)
{
    right:
        -300px;

    bottom:
        -520px;

    width:
        620px;

    height:
        620px;

    opacity:
        .45;

    animation-delay:
        -8s;
}


/******************************************************************************
 * Splash Animation
 ******************************************************************************/

@keyframes loginSplashContent
{
    from
    {
        opacity:
            0;

        transform:
            translateY(12px);
    }

    to
    {
        opacity:
            1;

        transform:
            translateY(0);
    }
}

@keyframes loginSplashLogo
{
    from
    {
        opacity:
            0;

        transform:
            scale(.82);
    }

    to
    {
        opacity:
            1;

        transform:
            scale(1);
    }
}

@keyframes loginSplashWave
{
    0%
    {
        transform:
            translate3d(
                -20px,
                0,
                0
            )
            rotate(25deg);
    }

    50%
    {
        transform:
            translate3d(
                20px,
                -15px,
                0
            )
            rotate(29deg);
    }

    100%
    {
        transform:
            translate3d(
                -20px,
                0,
                0
            )
            rotate(25deg);
    }
}


/******************************************************************************
 * Remembered Account Link
 ******************************************************************************/

.login-not-me
{
    display:
        block;

    width:
        fit-content;

    margin-left:
        auto;

    margin-top:
        10px;

    color:
        var(--ph-primary);

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

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

    text-decoration:
        none;

    transition:
        color
        var(--ph-transition);
}

.login-not-me:hover
{
    color:
        var(--ph-primary-dark);

    text-decoration:
        none;
}

/******************************************************************************
 * Tablet
 ******************************************************************************/

@media (max-width: 900px)
{
    .login-brand
    {
        width:
            42%;

        padding:
            40px;
    }

    .login-panel
    {
        width:
            58%;

        padding:
            32px;
    }

    .login-brand h1
    {
        font-size:
            2.5rem;
    }
}

/******************************************************************************
 * Mobile App
 ******************************************************************************/

@media (max-width: 700px)
{
    html,
    body
    {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    body
    {
        background: #f7fbff;
    }


    /**************************************************************************
     * Container
     **************************************************************************/

    .login-container
    {
        position: relative;

        width: 100%;
        height: 100svh;
        min-height: 100svh;

        display: block;

        overflow: hidden;

        background:
            linear-gradient(
                180deg,
                #f7fbff 0%,
                #ffffff 55%,
                #f3fffd 100%
            );
    }


    /******************************************************************************
     * Mobile Login Decoration
     ******************************************************************************/
    
    .login-brand-decoration
    {
        position:
            absolute;
    
        inset:
            0;
    
        z-index:
            0;
    
        display:
            block;
    
        overflow:
            hidden;
    
        pointer-events:
            none;
    }
    
    .login-brand-decoration span
    {
        position:
            absolute;
    
        display:
            block;
    
        border:
            2px solid
            rgb(37 99 235 / .14);
    
        border-radius:
            50%;
    
        animation:
            loginFloat
            12s
            ease-in-out
            infinite;
    }
    
    
    /* ================================================================
       Onda superior derecha
       ================================================================ */
    
    .login-brand-decoration span:nth-child(1)
    {
        width:
            560px;
    
        height:
            560px;
    
        right:
            -350px;
    
        top:
            -350px;
    
        border:
            2px solid
            rgb(37 99 235 / .16);
    
        box-shadow:
            0 0 0 18px
                rgb(20 184 166 / .035),
            0 0 0 38px
                rgb(37 99 235 / .025);
    
        transform:
            rotate(20deg);
    }
    
    
    /* ================================================================
       Onda inferior izquierda
       ================================================================ */
    
    .login-brand-decoration span:nth-child(2)
    {
        width:
            470px;
    
        height:
            470px;
    
        left:
            -340px;
    
        bottom:
            -300px;
    
        border:
            2px solid
            rgb(20 184 166 / .16);
    
        box-shadow:
            0 0 0 20px
                rgb(37 99 235 / .035),
            0 0 0 42px
                rgb(20 184 166 / .025);
    
        animation-delay:
            -4s;
    }
    
    
    /* ================================================================
       Acento turquesa
       ================================================================ */
    
    .login-brand-decoration span:nth-child(3)
    {
        width:
            180px;
    
        height:
            180px;
    
        right:
            -70px;
    
        top:
            22%;
    
        border:
            none;
    
        background:
            rgb(20 184 166 / .08);
    
        box-shadow:
            0 0 0 1px
            rgb(20 184 166 / .10);
    
        animation-delay:
            -7s;
    }


    /**************************************************************************
     * Desktop Branding Hidden
     **************************************************************************/

    .login-brand
    {
        display: none;
    }


    /**************************************************************************
     * Login Panel
     **************************************************************************/
     
    .login-panel:has(.login-remembered) .login-header
    {
        margin-top:
            32vh;
    }
    
    .login-panel:has(.login-remembered) .login-card
    {
        max-width:
            390px;
    }
    
    .login-panel:has(.login-remembered) .login-remembered
    {
        margin-top:
            4px;
    }

    .login-panel
    {
        position: relative;

        z-index: 1;

        width: 100%;
        height: 100svh;
        min-height: 100svh;

        padding:
            0 24px;

        display: block;

        background: transparent;

        overflow: hidden;
    }


    /**************************************************************************
     * Login Card
     **************************************************************************/

    .login-card
    {
        position: relative;

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

        height: 100%;

        margin: 0 auto;

        padding:
            28px 0 80px;

        display: flex;

        flex-direction: column;

        justify-content: flex-start;
    }


    /**************************************************************************
     * Mobile Branding
     **************************************************************************/

    .login-mobile-brand
    {
        display: flex;

        align-items: center;

        gap: 12px;

        margin: 0;
    }

    .login-mobile-brand img
    {
        width: 42px;
        height: 42px;

        object-fit: contain;
    }

    .login-mobile-brand span
    {
        font-size: 1.25rem;

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

        color:
            var(--ph-gray-900);
    }


    /**************************************************************************
     * Header
     **************************************************************************/

    .login-header
    {
        margin-top: 22vh;

        margin-bottom: 28px;
    }

    .login-header h2
    {
        margin:
            0 0 8px;

        font-size:
            2rem;

        line-height:
            1.15;
    }

    .login-header p
    {
        font-size:
            1rem;
    }


    /**************************************************************************
     * Form
     **************************************************************************/

    .login-form
    {
        width: 100%;
    }

    .login-field
    {
        margin-bottom: 18px;
    }

    .login-field label
    {
        margin-bottom: 7px;
    }

    .login-input
    {
        min-height: 54px;

        border-radius:
            14px;
    }

    .login-input input
    {
        height: 52px;

        font-size:
            1rem;
    }


    /**************************************************************************
     * Options
     **************************************************************************/

    .login-options
    {
        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 12px;

        margin:
            4px 0 22px;
    }

    .login-remember
    {
        flex-shrink: 0;
    }

    .login-forgot
    {
        white-space: nowrap;
    }


    /**************************************************************************
     * Submit
     **************************************************************************/

    .login-submit
    {
        width: 100%;

        min-height: 54px;

        border-radius:
            14px;
    }


    /**************************************************************************
     * Remembered Account
     **************************************************************************/

    .login-remembered
    {
        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }

    .login-remembered form
    {
        width: 100%;

        margin: 0;
    }

    .login-remembered .login-submit
    {
        width: 100%;
    }


    /**************************************************************************
     * Footer
     **************************************************************************/

    .login-footer
    {
        position: absolute;

        left: 0;
        right: 0;

        bottom: 22px;

        z-index: 3;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 12px;

        margin: 0;

        padding: 0;

        border: none;

        color:
            var(--ph-gray-400);

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

/******************************************************************************
 * Reduced Motion
 ******************************************************************************/

@media (prefers-reduced-motion: reduce)
{
    .login-brand-decoration span
    {
        animation:
            none;
    }

    .login-submit,
    .login-input,
    .login-password-toggle
    {
        transition:
            none;
    }
}