/* ==========================================================
   eSipo - LOGIN DEFAULT
   Portal de Operaciones
   ========================================================== */


/* ==========================================================
   PALETA DEFAULT eSipo
   ========================================================== */

:root {
    /* AZUL MARINO DEL PANEL - COLOR PRINCIPAL */
    --esipo-navy: #0F1B2D;
    --esipo-navy-soft: #0F1B2D;
    /* AZUL SOLO PARA EL BOTÓN ENTRAR */
    --esipo-blue: #168BD4;
    --esipo-blue-dark: #0873C9;
    /* NEUTROS */
    --esipo-white: #FFFFFF;
    --esipo-bg: #F4F7FA;
    --esipo-text: #2F3740;
    --esipo-text-soft: #657386;
    --esipo-border: #DCE3EB;
}

/* ==========================================================
   BASE
   ========================================================== */

html,
body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-weight: 400;
    background: var(--esipo-white);
    color: var(--esipo-navy);
}

* {
    box-sizing: border-box;
}


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

.login-page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--esipo-white);
}


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

.login-header {
    position: relative;
    z-index: 20;
    flex: 0 0 76px;
    width: 100%;
    height: 76px;
    background: var(--esipo-white);
    border-bottom: 3px solid var(--esipo-blue);
}

.login-header-inner {
    width: 100%;
    max-width: 1360px;
    height: 100%;
    margin: 0 auto;
    padding: 0 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* ==========================================================
   MARCA
   ========================================================== */

.login-brand {
    display: flex;
    align-items: center;
}

.login-brand-logo {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    font-size: 41px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -2px;
}

.brand-e {
    color: var(--esipo-blue);
}

.brand-name {
    color: var(--esipo-navy);
}

.login-brand-divider {
    width: 1px;
    height: 29px;
    margin: 0 18px;
    background: var(--esipo-border);
}

.login-brand-title {
    color: var(--esipo-navy-soft);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    white-space: nowrap;
}


/* ==========================================================
   MENÚ SUPERIOR
   ========================================================== */

.login-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.login-nav-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--esipo-navy);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1px;
    white-space: nowrap;
}

    .login-nav-item svg {
        width: 22px;
        height: 22px;
        color: var(--esipo-navy);
    }


/* ==========================================================
   HERO
   ========================================================== */

.login-hero {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* ==========================================================
   FONDO
   ========================================================== */

.login-hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/images/login/login-warehouse.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: saturate(58%) contrast(82%) brightness(1.10);
}


    /* ==========================================================
   CAPA CLARA SOBRE LA IMAGEN
   ========================================================== */

    .login-hero-background::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(244, 245, 247, 0.72) 0%, rgba(244, 245, 247, 0.62) 32%, rgba(244, 245, 247, 0.48) 62%, rgba(244, 245, 247, 0.34) 100% );
        pointer-events: none;
    }


    .login-hero-background::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(244, 245, 247, 0.72) 0%, rgba(244, 245, 247, 0.62) 32%, rgba(244, 245, 247, 0.48) 62%, rgba(244, 245, 247, 0.34) 100% );
        pointer-events: none;
    }

    .login-hero-background::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(255, 255, 255, 0.12) 0%, rgba(244, 245, 247, 0.14) 45%, rgba(244, 245, 247, 0.30) 75%, rgba(244, 245, 247, 0.48) 100% );
        pointer-events: none;
    }
    /* ==========================================================
   VELO INFERIOR
   ========================================================== */

    .login-hero-background::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(255, 255, 255, 0.14) 0%, rgba(242, 249, 253, 0.16) 45%, rgba(232, 246, 253, 0.35) 75%, rgba(224, 242, 252, 0.53) 100% );
        pointer-events: none;
    }


/* ==========================================================
   CONTENIDO PRINCIPAL
   ========================================================== */

.login-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 40px 70px 18px;
    display: grid;
    grid-template-columns: minmax(290px, 1fr) 380px minmax(290px, 1fr);
    align-items: center;
}


/* ==========================================================
   MENSAJE IZQUIERDO
   ========================================================== */

.login-message {
    width: 100%;
    max-width: 320px;
    align-self: center;
}

    .login-message h1 {
        margin: 0;
        color: var(--esipo-navy);
        font-size: 32px;
        line-height: 1.12;
        font-weight: 700;
        letter-spacing: -0.4px;
    }

        .login-message h1 span {
            color: var(--esipo-blue);
        }

.login-message-line {
    width: 51px;
    height: 4px;
    margin: 18px 0 14px;
    background: var(--esipo-blue);
}

.login-message p {
    margin: 0;
    color: var(--esipo-text-soft);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
    letter-spacing: 0;
}


/* ==========================================================
   CENTRO
   ========================================================== */

.login-center {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}


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

.login-card {
    width: 100%;
    max-width: 380px;
    padding: 27px 35px 26px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(18, 61, 114, 0.08);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(18, 61, 114, 0.14);
    animation: fadeSlideIn 0.45s ease-out;
}


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

    .login-card h2 {
        margin: 0 0 5px;
        text-align: center;
        color: var(--esipo-navy);
        font-size: 22px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: -0.2px;
    }

.login-subtitle {
    margin: 0 0 22px;
    text-align: center;
    color: var(--esipo-text-soft);
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 400;
}


/* ==========================================================
   DIVISOR BAJO TÍTULO
   ========================================================== */

.login-card-divider {
    width: 48px;
    height: 3px;
    margin: 0 auto 17px;
    border-radius: 2px;
    background: var(--esipo-blue);
}


/* ==========================================================
   LABEL
   ========================================================== */

.login-card label {
    display: block;
    margin: 0 0 5px;
    color: var(--esipo-navy);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}


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

.input-icon-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 14px;
}


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

.input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    color: #748CA8;
    pointer-events: none;
    transition: color 0.2s ease;
}


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

.login-card input[type="text"],
.login-card input[type="password"] {
    width: 100%;
    height: 41px;
    padding: 0 40px;
    border: 1px solid var(--esipo-border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--esipo-navy);
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.login-card input::placeholder {
    color: #8094AD;
    font-weight: 400;
}

.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus {
    border-color: var(--esipo-blue);
    background: var(--esipo-white);
    box-shadow: 0 0 0 3px rgba(22, 139, 212, 0.10);
}

.input-icon-wrap:focus-within .input-icon {
    color: var(--esipo-blue);
}


/* ==========================================================
   OJO CONTRASEÑA
   ========================================================== */

.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 29px;
    height: 29px;
    padding: 5px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #748CA8;
    cursor: pointer;
}

    .password-toggle svg {
        width: 17px;
        height: 17px;
    }

    .password-toggle:hover {
        color: var(--esipo-blue);
        background: var(--esipo-blue-light);
    }

    .password-toggle.is-visible {
        color: var(--esipo-blue);
    }


/* ==========================================================
   RECORDAR USUARIO
   ========================================================== */

.login-options {
    width: 100%;
    margin: -1px 0 14px;
}

.login-card .remember-user {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--esipo-text-soft);
    font-size: 11.5px;
    font-weight: 400;
    cursor: pointer;
}

.remember-user input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.remember-check {
    position: relative;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 1px solid #9EB1C7;
    border-radius: 3px;
    background: var(--esipo-white);
}

.remember-user input[type="checkbox"]:checked + .remember-check {
    border-color: var(--esipo-blue);
    background: var(--esipo-blue);
}

    .remember-user input[type="checkbox"]:checked + .remember-check::after {
        content: "";
        position: absolute;
        left: 4px;
        top: 1px;
        width: 4px;
        height: 8px;
        border: solid var(--esipo-white);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

.remember-user:hover .remember-check {
    border-color: var(--esipo-blue);
}


/* ==========================================================
   ERROR
   ========================================================== */

.login-error {
    margin: -4px 0 12px;
    padding: 7px 9px;
    border: 1px solid #EFB7B7;
    border-radius: 5px;
    background: #FFF3F3;
    color: #B42323;
    font-size: 11.5px;
    font-weight: 400;
}


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

.btn-login {
    width: 100%;
    height: 47px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: none;
    border-radius: 7px;
    background: linear-gradient( 90deg, var(--esipo-blue) 0%, var(--esipo-blue-dark) 100% );
    color: var(--esipo-white);
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(8, 115, 201, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-login-arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 19px rgba(8, 115, 201, 0.26);
}

    .btn-login:hover .btn-login-arrow {
        transform: translateX(3px);
    }


/* ==========================================================
   TARJETAS INFERIORES
   ========================================================== */

.login-features {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1360px;
    margin: auto auto 27px;
    padding: 0 42px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 21px;
}


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

.login-feature-card {
    position: relative;
    min-height: 92px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(18, 61, 114, 0.10);
    border-radius: 7px;
    box-shadow: 0 7px 19px rgba(18, 61, 114, 0.08);
    overflow: hidden;
}

.login-feature-card::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background: #D9E1EA;
}

/* ==========================================================
   ICONOS TARJETAS
   ========================================================== */

.login-feature-icon {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(18, 63, 120, 0.10);
    color: var(--esipo-navy);
}

    .login-feature-icon svg {
        width: 29px;
        height: 29px;
    }


/* ==========================================================
   TEXTO TARJETAS
   ========================================================== */

.login-feature-card h3 {
    margin: 0 0 4px;
    color: var(--esipo-navy);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.1px;
}

.login-feature-card p {
    margin: 0;
    color: var(--esipo-text-soft);
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 400;
}


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

.login-footer {
    flex: 0 0 60px;
    width: 100%;
    height: 60px;
    background: var(--esipo-navy);
    color: var(--esipo-white);
}
.login-footer-inner {
    width: 100%;
    max-width: 1360px;
    height: 100%;
    margin: 0 auto;
    padding: 0 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.login-footer-brand,
.login-footer-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 10.5px;
    font-weight: 400;
}

    .login-footer-brand strong {
        color: var(--esipo-white);
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.5px;
    }

.footer-divider {
    color: rgba(255, 255, 255, 0.43);
}


/* ==========================================================
   ANIMACIÓN
   ========================================================== */

@keyframes fadeSlideIn {

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

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


/* ==========================================================
   PANTALLAS ALTAS
   ========================================================== */

@media (min-width: 901px) and (min-height: 850px) {

    .login-hero-content {
        padding-top: 46px;
    }

    .login-features {
        margin-bottom: 31px;
    }
}


/* ==========================================================
   LAPTOP CON MENOR ALTURA
   ========================================================== */

@media (min-width: 901px) and (max-height: 800px) {

    .login-header {
        flex-basis: 68px;
        height: 68px;
    }

    .login-brand-logo {
        font-size: 37px;
    }

    .login-brand-divider {
        height: 26px;
    }

    .login-hero-content {
        padding-top: 23px;
        padding-bottom: 12px;
    }

    .login-message h1 {
        font-size: 29px;
    }

    .login-card {
        padding: 23px 32px 21px;
    }

        .login-card h2 {
            font-size: 20px;
        }

    .login-card-divider {
        margin-bottom: 14px;
    }

    .login-subtitle {
        margin-bottom: 14px;
    }

    .input-icon-wrap {
        margin-bottom: 11px;
    }

    .login-options {
        margin-bottom: 11px;
    }

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

    .login-feature-card {
        min-height: 82px;
    }

    .login-feature-icon {
        width: 49px;
        height: 49px;
        flex-basis: 49px;
    }

        .login-feature-icon svg {
            width: 26px;
            height: 26px;
        }

    .login-footer {
        flex-basis: 55px;
        height: 55px;
    }
}


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

@media (max-width: 900px) {

    html,
    body {
        height: auto;
    }

    .login-page {
        min-height: 100vh;
    }

    .login-header {
        flex-basis: 70px;
        height: 70px;
    }

    .login-header-inner {
        padding: 0 22px;
    }

    .login-brand-logo {
        font-size: 36px;
    }

    .login-brand-divider {
        height: 26px;
        margin: 0 13px;
    }

    .login-brand-title {
        font-size: 13px;
    }

    .login-nav {
        display: none;
    }

    .login-hero {
        min-height: auto;
        overflow: visible;
    }

    .login-hero-content {
        display: flex;
        flex-direction: column;
        padding: 29px 20px 23px;
    }

    .login-message {
        max-width: 520px;
        margin: 0 auto 23px;
        text-align: center;
    }

        .login-message h1 {
            font-size: 28px;
        }

    .login-message-line {
        margin: 15px auto 13px;
    }

    .login-message p {
        font-size: 13.5px;
    }

    .login-center {
        width: 100%;
    }

    .login-card {
        max-width: 380px;
    }

    .login-features {
        margin: 5px auto 23px;
        padding: 0 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .login-footer {
        flex-basis: auto;
        height: auto;
        min-height: 60px;
    }

    .login-footer-inner {
        min-height: 60px;
        padding: 14px 22px;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
    }
}


/* ==========================================================
   CELULAR
   ========================================================== */

@media (max-width: 576px) {

    .login-header {
        height: 63px;
        flex-basis: 63px;
        border-bottom-width: 3px;
    }

    .login-header-inner {
        padding: 0 14px;
        justify-content: center;
    }

    .login-brand-logo {
        font-size: 32px;
    }

    .login-brand-divider {
        height: 23px;
        margin: 0 10px;
    }

    .login-brand-title {
        font-size: 11.5px;
    }

    .login-hero-background {
        background-position: 38% center;
    }


    /* MENSAJE */

    .login-hero-content {
        padding: 19px 13px 17px;
    }

    .login-message {
        margin-bottom: 16px;
    }

        .login-message h1 {
            font-size: 23px;
        }

            .login-message h1 br {
                display: none;
            }

    .login-message-line {
        width: 42px;
        height: 3px;
        margin: 11px auto;
    }

    .login-message p {
        font-size: 12.5px;
    }

        .login-message p br {
            display: none;
        }


    /* LOGIN */

    .login-card {
        width: 100%;
        max-width: 360px;
        padding: 22px 18px;
        border-radius: 12px;
    }

        .login-card h2 {
            font-size: 20px;
        }

    .login-card-divider {
        margin-bottom: 13px;
    }

    .login-subtitle {
        margin-bottom: 17px;
        font-size: 12px;
    }

    .input-icon-wrap {
        margin-bottom: 13px;
    }

    .login-card input[type="text"],
    .login-card input[type="password"] {
        height: 41px;
    }

    .login-options {
        margin-bottom: 13px;
    }

    .btn-login {
        height: 45px;
        font-size: 14px;
    }


    /* TARJETAS */

    .login-features {
        display: none;
    }


    /* FOOTER */

    .login-footer {
        min-height: 58px;
    }

    .login-footer-inner {
        min-height: 58px;
        padding: 11px 14px;
        text-align: center;
    }

    .login-footer-brand,
    .login-footer-copy {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

        .login-footer-brand strong {
            font-size: 18px;
        }

    .login-footer-copy {
        font-size: 9.5px;
    }
}


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

@media (prefers-reduced-motion: reduce) {

    * {
        animation: none !important;
        transition: none !important;
    }
}