/* =========================================================
   MediFlow ERP
   Responsive específico para Login / Auth
   ========================================================= */

.auth-body {
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
}

.auth-body .container-fluid {
    width: 100%;
}

.auth-body .row {
    min-height: calc(100dvh - 3rem);
}

/* =========================================================
   LAPTOPS / PANTALLAS CON MENOR ÁREA ÚTIL
   Ej.: 1366x768, 1536x864, Windows con escala 125%-150%
   ========================================================= */

@media (max-width: 1536px), (max-height: 900px) {

    .auth-body {
        padding: .8rem 1rem;
    }

    .auth-body .row {
        min-height: calc(100dvh - 1.6rem);
        --bs-gutter-x: 2rem;
        --bs-gutter-y: .75rem;
    }

    .auth-side {
        max-width: 470px;
    }

    .auth-side > img {
        height: 48px !important;
        margin-bottom: 1rem !important;
    }

    .auth-side h2 {
        font-size: 1.75rem;
        line-height: 1.15;
        margin-bottom: .65rem;
    }

    .auth-side p {
        font-size: .92rem;
        line-height: 1.45;
        margin-top: .65rem !important;
        margin-bottom: .8rem;
    }

    .auth-side ul {
        margin-top: .8rem !important;
        margin-bottom: 0;
    }

    .auth-side li {
        font-size: .9rem;
        line-height: 1.3;
        margin-bottom: .4rem;
    }

    .auth-card {
        max-width: 445px;
        padding: 1.35rem 1.5rem;
        border-radius: 1rem;
    }

    .auth-card .brand {
        margin-bottom: .8rem;
    }

    .auth-card .brand img {
        height: 48px;
    }

    .auth-card h1 {
        font-size: 1.3rem;
        margin-bottom: .35rem;
    }

    .auth-card p {
        font-size: .88rem;
        margin-bottom: .9rem;
    }

    .auth-card .form-label {
        font-size: .82rem;
        margin-bottom: .2rem;
    }

    .auth-card .form-control,
    .auth-card .form-select {
        min-height: 36px;
        font-size: .87rem;
        padding-top: .35rem;
        padding-bottom: .35rem;
    }

    .auth-card .input-group .btn {
        min-height: 36px;
    }

    .auth-card .form-check-label,
    .auth-card a {
        font-size: .82rem;
    }

    .auth-card .btn-primary {
        min-height: 38px;
        font-size: .88rem;
    }

    .auth-card .alert {
        padding: .55rem .7rem;
        margin-bottom: .75rem;
        font-size: .82rem;
    }

    .demo-box {
        padding: .55rem .7rem;
        font-size: .74rem;
        line-height: 1.35;
        margin-top: .75rem !important;
    }

    .auth-card + p {
        margin-top: .55rem !important;
        margin-bottom: 0;
        font-size: .74rem;
    }
}

/* =========================================================
   PANTALLAS BAJAS
   ========================================================= */

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

    .auth-body {
        align-items: flex-start;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    .auth-body .row {
        min-height: calc(100dvh - 1rem);
    }

    .auth-card {
        padding: 1rem 1.3rem;
    }

    .auth-card .brand {
        margin-bottom: .55rem;
    }

    .auth-card .brand img {
        height: 42px;
    }

    .auth-card h1 {
        font-size: 1.18rem;
    }

    .auth-card p {
        margin-bottom: .6rem;
    }

    .auth-card .mb-3 {
        margin-bottom: .6rem !important;
    }

    .demo-box {
        padding: .45rem .65rem;
        font-size: .7rem;
        line-height: 1.25;
    }

    .auth-side h2 {
        font-size: 1.55rem;
    }

    .auth-side p,
    .auth-side li {
        font-size: .84rem;
    }
}

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

@media (max-width: 991.98px) {

    .auth-body {
        padding: 1rem;
        align-items: center;
    }

    .auth-body .row {
        min-height: calc(100dvh - 2rem);
        margin: 0;
    }

    .auth-card {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 575.98px) {

    .auth-body {
        padding: .6rem;
        align-items: flex-start;
    }

    .auth-body .container-fluid {
        padding: 0;
    }

    .auth-body .row {
        min-height: auto;
        margin: 0;
    }

    .auth-card {
        width: 100%;
        max-width: none;
        padding: 1.2rem 1rem;
        border-radius: .85rem;
    }

    .auth-card .brand img {
        height: 48px;
    }

    .auth-card h1 {
        font-size: 1.25rem;
    }

    .demo-box {
        font-size: .74rem;
        overflow-wrap: anywhere;
    }
}