.login-page {
    height: 100vh;
    background-color: #f5f7fa;
    overflow: hidden;
}

/* ================================
   LADO IZQUIERDO
================================ */

.login-port {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background-color: #173d65;
}

.login-port-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.login-port-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 135deg, rgba(8, 43, 82, .94) 0%, rgba(15, 62, 105, .75) 45%, rgba(23, 73, 116, .30) 100% );
}

/* ================================
   CORTE DIAGONAL
================================ */

.login-port::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 90px;
    height: 100%;
    background-color: #f5f7fa;
    clip-path: polygon( 100% 0, 100% 100%, 0 100% );
    z-index: 10;
}

/* ================================
   FORMAS DECORATIVAS
================================ */

.shape-one {
    position: absolute;
    width: 350px;
    height: 350px;
    background-color: rgba(9, 38, 72, .20);
    transform: rotate(45deg);
    top: -220px;
    left: -130px;
    z-index: 1;
}

.shape-two {
    position: absolute;
    width: 350px;
    height: 350px;
    background-color: rgba(9, 38, 72, .50);
    transform: rotate(45deg);
    bottom: -210px;
    left: -130px;
    z-index: 1;
}



/* ================================
   ICONOS INFERIORES
================================ */

.port-features {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px 100px 15px 22px;
    z-index: 4;
    background: linear-gradient( 90deg, rgba(6, 32, 63, .96), rgba(8, 43, 80, .90) );
    box-sizing: border-box;
}

    .port-features .row {
        transform: translateX(-30px);
    }

.feature-item {
    color: white;
    text-align: center;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .feature-item:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, .22);
    }

    .feature-item ion-icon {
        font-size: 27px;
        margin-bottom: 4px;
    }

    .feature-item span {
        font-size: .78rem;
        line-height: 1.2;
    }

/* ================================
   LADO DERECHO
================================ */

.login-right {
    position: relative;
    height: 100vh;
    background-color: #f5f7fa;
    overflow: hidden;
}

.login-content {
    width: 100%;
    max-width: 455px;
}

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

.login-card {
    border: 1px solid #e3e7ec;
    border-radius: 11px;
    background-color: white;
    box-shadow: 0 8px 25px rgba(15, 42, 75, .10);
}

    .login-card .card-body {
        padding: 24px 32px 20px;
    }

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

.login-logo {
    width: 62px;
    height: 62px;
    background-color: #183f6c;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(24, 63, 108, .15);
}

    .login-logo ion-icon {
        font-size: 31px;
    }

/* ================================
   TITULOS
================================ */

.login-title {
    color: #183f6c;
    font-weight: 700;
    font-size: 1.55rem;
}

.login-subtitle {
    color: #7a838d;
    font-size: .86rem;
}
/* ================================
   LABELS
================================ */

.login-label {
    color: #33445a;
    font-size: .80rem;
    font-weight: 600;
    margin-bottom: 4px;
}

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

.login-input {
    border: 1px solid #d7dee7;
    border-radius: 6px;
    overflow: hidden;
    background-color: white;
}

    .login-input .input-group-text {
        border: 0;
        border-right: 1px solid #d7dee7;
        background-color: white;
        color: #62748a;
        min-width: 42px;
        justify-content: center;
    }

        .login-input .input-group-text ion-icon {
            font-size: 17px;
        }

    .login-input .form-control {
        border: 0;
        background-color: white;
        padding: 8px 11px;
        font-size: .86rem;
        box-shadow: none;
    }

        .login-input .form-control:focus {
            box-shadow: none;
        }

    .login-input:focus-within {
        border-color: #447db6;
        box-shadow: 0 0 0 .12rem rgba(33, 93, 153, .12);
    }

/* ================================
   QUITAR FLECHAS INPUT NUMBER
================================ */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

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

.login-footer {
    color: #68788b;
    font-size: .75rem;
    text-align: center;
    margin-top: 10px;
}

.login-footer-title {
    color: #435a72;
    font-weight: 600;
    margin-bottom: 1px;
}

.login-footer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #8391a1;
    margin-bottom: 3px;
}

    .login-footer-icon ion-icon {
        font-size: 15px;
    }

/* ================================
   LINKS
================================ */

.login-card a {
    font-size: .80rem;
}

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

@media (max-width: 991.98px) {

    html,
    body {
        overflow: auto;
    }

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

    .login-right {
        min-height: 100vh;
        height: auto;
        overflow: visible;
    }

    .login-content {
        max-width: 440px;
    }

    .login-card .card-body {
        padding: 28px 26px 22px;
    }
}

@media (max-width: 576px) {

    .login-right {
        padding-left: 15px;
        padding-right: 15px;
    }

    .login-card {
        box-shadow: none;
        border: 0;
        background-color: transparent;
    }

        .login-card .card-body {
            padding: 22px 5px;
        }

    .login-logo {
        width: 58px;
        height: 58px;
    }

        .login-logo ion-icon {
            font-size: 29px;
        }

    .login-title {
        font-size: 1.45rem;
    }

    .login-subtitle {
        font-size: .82rem;
    }

    .login-footer {
        margin-bottom: 10px;
    }
}

/* ================================
   PANTALLAS BAJAS
   Ejemplo notebooks 1366x768
================================ */

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

    .login-content {
        max-width: 430px;
    }

    .login-card .card-body {
        padding: 20px 28px 17px;
    }

    .login-logo {
        width: 55px;
        height: 55px;
        margin-bottom: 7px;
    }

        .login-logo ion-icon {
            font-size: 28px;
        }

    .login-title {
        font-size: 1.45rem;
        margin-bottom: 2px !important;
    }

    .login-subtitle {
        font-size: .80rem;
    }

    .login-divider {
        margin: 9px 0 11px;
    }

    .login-label {
        font-size: .76rem;
        margin-bottom: 3px;
    }

    .login-input .form-control {
        padding: 7px 10px;
        font-size: .82rem;
    }

    .login-input .input-group-text {
        min-width: 40px;
    }

    .btn-login {
        padding: 8px;
    }

    .login-footer {
        margin-top: 7px;
        font-size: .70rem;
    }

    .port-brand {
        top: 6%;
    }

        .port-brand ion-icon {
            font-size: 48px;
        }

        .port-brand h1 {
            font-size: 2rem;
        }

        .port-brand h5 {
            font-size: .85rem;
        }

    .port-features {
        padding: 11px 20px;
    }

    .feature-item {
        min-height: 62px;
    }

        .feature-item ion-icon {
            font-size: 24px;
        }

        .feature-item span {
            font-size: .72rem;
        }
}