/* ==========================================================
   LOGIN
   Diseño Mobile First
   ========================================================== */


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

:root {

    /* COLORES CORPORATIVOS */

    --blue: #26377b;
    --blue-dark: #1d2b62;
    --blue-light: #eef0f8;

    --green: #43aa34;
    --green-dark: #378d2b;
    --green-light: #eef8ec;

    --white: #ffffff;


    /* TEXTOS */

    --text: #20252b;
    --text-secondary: #68717a;
    --text-placeholder: #9ba3aa;


    /* BORDES */

    --border: #dce1e7;
    --border-focus: #26377b;


    /* SOMBRAS */

    --shadow:
        0 18px 45px rgba(38, 55, 123, 0.10);


    /* RADIO */

    --radius: 14px;

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    width: 100%;

    min-height: 100%;

}


body {

    width: 100%;

    min-height: 100vh;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: var(--white);

    color: var(--text);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}


/* ==========================================================
   PÁGINA
   ========================================================== */

.login-page {

    width: 100%;

    min-height: 100vh;

    min-height: 100dvh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        28px
        18px;

    background:

        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 78%,
            #f7f9fc 100%
        );

}


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

.login-card {

    width: 100%;

    max-width: 430px;

    padding:
        8px 0;

}


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

/* ==========================================================
   LOGO DE LA EMPRESA
   ========================================================== */

.logo-container {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 30px;

}


.company-logo {

    width: 150px;

    height: auto;

    max-height: 120px;

    object-fit: contain;

    display: block;

}


/* ==========================================================
   HEADER
   ========================================================== */

.login-header {

    text-align: center;

    margin-bottom: 30px;

}


.login-header h1 {

    color: var(--blue);

    font-size: 28px;

    font-weight: 750;

    line-height: 1.2;

    letter-spacing: -0.5px;

    margin-bottom: 8px;

}


.login-header p {

    color: var(--text-secondary);

    font-size: 15px;

    font-weight: 400;

    line-height: 1.5;

}


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

.login-form {

    width: 100%;

}


.form-group {

    width: 100%;

    margin-bottom: 20px;

}


.form-group label {

    display: block;

    margin-bottom: 8px;

    color: var(--text);

    font-size: 14px;

    font-weight: 650;

}


/* ==========================================================
   CONTENEDOR INPUT
   ========================================================== */

.input-container {

    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

}


/* ==========================================================
   INPUT
   ========================================================== */

.input-container input {

    width: 100%;

    height: 54px;

    padding:
        0
        48px;

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

    border-radius: var(--radius);

    outline: none;

    background: var(--white);

    color: var(--text);

    font-family: inherit;

    font-size: 16px;

    font-weight: 400;

    -webkit-appearance: none;

    appearance: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;

}


/* PLACEHOLDER */

.input-container input::placeholder {

    color: var(--text-placeholder);

    opacity: 1;

}


/* FOCUS */

.input-container input:focus {

    border-color: var(--blue);

    background: var(--white);

    box-shadow:
        0 0 0 3px
        rgba(38, 55, 123, 0.12);

}


/* AUTOFILL */

.input-container input:-webkit-autofill {

    -webkit-box-shadow:
        0 0 0 1000px #ffffff inset;

    -webkit-text-fill-color: var(--text);

}


/* ==========================================================
   ICONO INPUT
   ========================================================== */

.input-icon {

    position: absolute;

    left: 16px;

    top: 50%;

    width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        translateY(-50%);

    color: var(--blue);

    pointer-events: none;

}


.input-icon svg {

    width: 20px;

    height: 20px;

    display: block;

}


/* ==========================================================
   BOTÓN MOSTRAR CONTRASEÑA
   ========================================================== */

.password-toggle {

    position: absolute;

    right: 9px;

    top: 50%;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        translateY(-50%);

    border: none;

    border-radius: 10px;

    background: transparent;

    color: var(--text-secondary);

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;

}


.password-toggle:hover {

    background: var(--blue-light);

    color: var(--blue);

}


.password-toggle:active {

    transform:
        translateY(-50%)
        scale(0.92);

}


.password-toggle svg {

    width: 20px;

    height: 20px;

}


/* ==========================================================
   OPCIONES LOGIN
   ========================================================== */

.login-options {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: 2px;

    margin-bottom: 25px;

}


/* ==========================================================
   RECORDARME
   ========================================================== */

.remember-me {

    display: flex;

    align-items: center;

    gap: 7px;

    color: var(--text-secondary);

    font-size: 13px;

    line-height: 1.4;

    cursor: pointer;

    white-space: nowrap;

}


.remember-me input {

    width: 17px;

    height: 17px;

    margin: 0;

    accent-color: var(--green);

    cursor: pointer;

}


/* ==========================================================
   OLVIDÉ CONTRASEÑA
   ========================================================== */

.forgot-password {

    color: var(--blue);

    font-size: 13px;

    font-weight: 650;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 0.2s ease;

}


.forgot-password:hover {

    color: var(--blue-dark);

    text-decoration: underline;

}


/* ==========================================================
   BOTÓN INICIAR SESIÓN
   ========================================================== */

.login-button {

    width: 100%;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    border-radius: var(--radius);

    background: var(--green);

    color: var(--white);

    font-family: inherit;

    font-size: 16px;

    font-weight: 750;

    letter-spacing: 0.1px;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

    box-shadow:
        0 8px 18px
        rgba(67, 170, 52, 0.22);

    transition:
        background-color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;

}


.login-button:hover {

    background: var(--green-dark);

    box-shadow:
        0 10px 23px
        rgba(67, 170, 52, 0.28);

}


.login-button:active {

    transform:
        scale(0.98);

    box-shadow:
        0 5px 12px
        rgba(67, 170, 52, 0.20);

}


/* ==========================================================
   MENSAJE SEGURIDAD
   ========================================================== */

.security-message {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 23px;

    color: var(--text-secondary);

    font-size: 12px;

}


.security-message svg {

    width: 15px;

    height: 15px;

    color: var(--green);

}


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

.login-footer {

    width: 100%;

    text-align: center;

    margin-top: 28px;

}


.login-footer p {

    color: #9aa1a8;

    font-size: 12px;

    line-height: 1.4;

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 600px) {


    .login-page {

        padding:
            40px
            24px;

        background:

            linear-gradient(
                135deg,
                #ffffff 0%,
                #f5f7fb 100%
            );

    }


    .login-card {

        max-width: 430px;

        padding:
            42px
            38px;

        background: var(--white);

        border-radius: 25px;

        box-shadow: var(--shadow);

    }


    .logo-container {

        margin-bottom: 28px;

    }


    .logo-placeholder {

        width: 100px;

        height: 100px;

    }

}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 900px) {


    .login-page {

        padding:
            50px
            30px;

    }


    .login-card {

        max-width: 440px;

        padding:
            45px
            40px;

    }

}


/* ==========================================================
   PANTALLAS PEQUEÑAS
   ========================================================== */

@media (max-width: 360px) {


    .login-page {

        padding:
            20px
            15px;

    }


    .logo-container {

        margin-bottom: 23px;

    }


    .logo-placeholder {

        width: 88px;

        height: 88px;

        border-radius: 20px;

    }


    .login-header {

        margin-bottom: 25px;

    }


    .login-header h1 {

        font-size: 25px;

    }


    .login-header p {

        font-size: 14px;

    }


    .form-group {

        margin-bottom: 17px;

    }


    .login-options {

        margin-bottom: 22px;

    }


    .remember-me,
    .forgot-password {

        font-size: 12px;

    }


}


/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */

button:focus-visible,
a:focus-visible,
input:focus-visible {

    outline:
        3px solid
        rgba(67, 170, 52, 0.35);

    outline-offset: 2px;

}