/* =========================================
   LOGIN - TABLET
========================================= */

@media (max-width: 980px) {

    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-presentation {
        min-height: auto;
        padding: 30px 34px 36px;
    }

    .login-presentation-content {
        margin: 70px 0 34px;
    }

    .login-presentation-content h1 {
        font-size: 44px;
    }

    .login-presentation-content p {
        margin: 20px 0 24px;
    }

    .login-presentation-footer {
        display: none;
    }

    .login-access {
        min-height: auto;
        padding: 34px 22px 46px;
    }

}


/* =========================================
   LOGIN - MOBILE
========================================= */

@media (max-width: 640px) {

    .login-presentation {
        padding: 22px 20px 26px;
    }

    .login-brand-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .login-brand-name {
        font-size: 14px;
    }

    .login-presentation-content {
        margin: 46px 0 10px;
    }

    .login-eyebrow {
        margin-bottom: 12px;
    }

    .login-presentation-content h1 {
        font-size: 34px;
    }

    .login-presentation-content p {
        margin: 16px 0 20px;
        font-size: 14px;
        line-height: 1.6;
    }

    .login-feature-list {
        display: none;
    }

    .login-access {
        padding: 0;
        background: var(--login-fondo);
    }

    .login-container {
        max-width: none;
        padding: 30px 22px calc(28px + env(safe-area-inset-bottom));
        border: none;
        border-radius: 28px 28px 0 0;
        box-shadow: none;
    }

    .login-logo {
        margin-bottom: 24px;
    }

    .logo-circle {
        width: 60px;
        height: 60px;
        border-radius: 18px;
    }

    .login-title {
        font-size: 26px;
    }

    .modal-overlay {
        padding: 10px;
        align-items: flex-end;
    }

    .custom-modal {
        max-height: calc(100vh - 20px);
        border-radius: 24px 24px 0 0;
    }

    .modal-fields-grid {
        grid-template-columns: 1fr;
    }

    .custom-modal-footer {
        padding-bottom: calc(
            18px + env(safe-area-inset-bottom)
        );
    }

    .btn-modal-secondary,
    .btn-modal-primary {
        flex: 1;
    }

}


/* =========================================
   LOGIN - MOBILE PEQUEÑO
========================================= */

@media (max-width: 390px) {

    .login-presentation-content h1 {
        font-size: 30px;
    }

    .login-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .custom-modal-footer {
        flex-direction: column-reverse;
    }

}


/* =========================================
   IDENTIDAD OBSESSION MD - NOTEBOOK
========================================= */

@media (max-width: 1380px) {

    .login-presentation {
        padding-right: 330px;
    }

    .login-tomas-card {
        right: 28px;
        width: 270px;
    }

    .login-tomas-image-wrapper {
        height: 290px;
    }

}


/* =========================================
   IDENTIDAD OBSESSION MD - TABLET
========================================= */

@media (max-width: 1100px) {

    .login-presentation {
        padding-right: 34px;
    }

    .login-tomas-card {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        max-width: 560px;
        margin-top: 28px;
        display: grid;
        grid-template-columns: 190px 1fr;
        transform: none;
    }

    .login-tomas-image-wrapper {
        height: 190px;
    }

    .login-tomas-copy {
        justify-content: center;
    }

}


/* =========================================
   IDENTIDAD OBSESSION MD - MOBILE
========================================= */

@media (max-width: 640px) {

    .login-presentation {
        padding-right: 20px;
    }

    .login-brand-logo {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 14px;
    }

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

    .login-brand-description {
        max-width: 220px;
        font-size: 10px;
        line-height: 1.35;
    }

    .login-tomas-card {
        max-width: none;
        margin-top: 22px;
        grid-template-columns: 118px 1fr;
        border-radius: 20px;
    }

    .login-tomas-image-wrapper {
        height: 134px;
    }

    .login-tomas-copy {
        padding: 14px;
    }

    .login-tomas-copy strong {
        font-size: 12px;
    }

    .login-presentation-footer {
        display: none;
    }

}


/* =========================================
   LOGIN TOMAS - TABLET
========================================= */

@media (max-width: 1180px) {

    .login-tomas-portrait {
        top: 84px;
        right: 34px;
        width: 250px;
    }

    .login-presentation-content {
        padding-top: 230px;
    }

}


/* =========================================
   LOGIN TOMAS - TABLET VERTICAL
========================================= */

@media (max-width: 980px) {

    .login-presentation {
        min-height: 620px;
    }

    .login-tomas-portrait {
        top: 92px;
        right: 7%;
        width: 235px;
    }

    .login-presentation-content {
        position: relative;
        z-index: 4;
        padding-top: 205px;
    }

    .login-presentation-content h1 {
        max-width: 640px;
    }

}


/* =========================================
   LOGIN TOMAS - MOBILE
========================================= */

@media (max-width: 640px) {

    .login-presentation {
        min-height: 500px;
    }

    .login-tomas-portrait {
        top: 82px;
        right: 14px;
        width: 168px;
        opacity: 0.96;
    }

    .login-tomas-circle {
        border-width: 2px;
        box-shadow:
            0 18px 38px rgba(0, 0, 0, 0.25),
            0 0 0 6px rgba(211, 164, 119, 0.06);
    }

    .login-presentation-content {
        z-index: 4;
        padding-top: 168px;
    }

    .login-presentation-content h1 {
        position: relative;
        z-index: 5;
        max-width: 92%;
        font-size: 33px;
        text-shadow: 0 2px 18px rgba(16, 27, 37, 0.48);
    }

    .login-presentation-content p {
        position: relative;
        z-index: 5;
        max-width: 92%;
    }

}


/* =========================================
   LOGIN TOMAS - MOBILE PEQUEÑO
========================================= */

@media (max-width: 390px) {

    .login-tomas-portrait {
        top: 86px;
        right: 8px;
        width: 145px;
    }

    .login-presentation-content {
        padding-top: 150px;
    }

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

}


/* =========================================
   LOGIN - MOBILE MÁS COMPACTO
========================================= */

@media (max-width: 640px) {

    .login-presentation {
        min-height: 360px;
        padding:
            17px
            17px
            20px;
    }

    .login-brand {
        gap: 9px;
    }

    .login-brand-logo {
        width: 37px;
        height: 37px;
        border-radius: 11px;
    }

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

    .login-brand-description {
        max-width: 210px;
        font-size: 8px;
        white-space: nowrap;
    }

    .login-tomas-portrait {
        top: 70px;
        right: 13px;
        width: 132px;
    }

    .login-presentation-content {
        margin: 0;
        padding-top: 134px;
    }

    .login-eyebrow {
        margin-bottom: 8px;
        font-size: 9px;
    }

    .login-presentation-content h1 {
        max-width: 72%;
        margin: 0;
        font-size: 29px;
        line-height: 1.04;
    }

    .login-presentation-content p {
        max-width: 88%;
        margin: 12px 0 0;
        font-size: 11px;
        line-height: 1.45;
    }

    .login-feature-list {
        display: none;
    }

    .login-access {
        min-height: auto;
    }

    .login-container {
        padding:
            23px
            20px
            calc(24px + env(safe-area-inset-bottom));
    }

    .login-logo {
        margin-bottom: 19px;
    }

    .logo-circle {
        width: 52px;
        height: 52px;
        margin-bottom: 11px;
    }

    .login-title {
        font-size: 23px;
    }

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

    .login-form-group {
        margin-bottom: 14px;
    }

    .login-form-group input {
        height: 48px;
    }

    .btn-login {
        height: 48px;
    }

}


/* =========================================
   LOGIN - MOBILE PEQUEÑO
========================================= */

@media (max-width: 390px) {

    .login-presentation {
        min-height: 345px;
    }

    .login-tomas-portrait {
        top: 68px;
        right: 8px;
        width: 117px;
    }

    .login-presentation-content {
        padding-top: 122px;
    }

    .login-presentation-content h1 {
        max-width: 76%;
        font-size: 26px;
    }

    .login-presentation-content p {
        max-width: 91%;
        font-size: 10px;
    }

}