:root {
    --auth-primary: #012169;
    --auth-primary-hover: #001a54;
    --auth-primary-light: #336699;
    --auth-dark: #111827;
    --auth-text: #344054;
    --auth-muted: #7b8494;
    --auth-border: #dce3ea;
    --auth-surface: #ffffff;
    --auth-input: #f7f9fc;
}


/* ==========================================================================
   CONTENEDOR GENERAL
   ========================================================================== */

.auth-wrapper {
    min-height: 100vh;
}

.visitas-auth-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 48px 24px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #edf6fb 0%,
            #f8fafc 48%,
            #eef3f9 100%
        );
}


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

.visitas-auth-page::before,
.visitas-auth-page::after {
    position: absolute;
    content: "";
    pointer-events: none;
    border-radius: 50%;
    filter: blur(10px);
    opacity: .5;
}

.visitas-auth-page::before {
    top: -180px;
    left: -150px;
    width: 620px;
    height: 620px;

    background:
        radial-gradient(
            circle,
            rgba(1, 33, 105, .18) 0%,
            rgba(1, 33, 105, 0) 70%
        );

    animation: authFloatBlue 14s ease-in-out infinite alternate;
}

.visitas-auth-page::after {
    right: -180px;
    bottom: -220px;
    width: 700px;
    height: 700px;

    background:
        radial-gradient(
            circle,
            rgba(51, 102, 153, .16) 0%,
            rgba(51, 102, 153, 0) 68%
        );

    animation: authFloatBlueAlt 18s ease-in-out infinite alternate;
}

@keyframes authFloatBlue {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(90px, 65px, 0) scale(1.08);
    }
}

@keyframes authFloatBlueAlt {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(-85px, -55px, 0) scale(1.1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .visitas-auth-page::before,
    .visitas-auth-page::after {
        animation: none;
    }
}


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

.visitas-auth-page > .m-account {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1040px;
    overflow: hidden;
    border-radius: 18px;
    background: var(--auth-surface);
    box-shadow:
        0 24px 65px rgba(15, 23, 42, .13),
        0 4px 14px rgba(15, 23, 42, .06);
}

.visitas-auth-page > .m-account > .row {
    min-height: 650px;
}


/* ==========================================================================
   PANEL CORPORATIVO IZQUIERDO
   ========================================================================== */

.visitas-auth-content {
    position: relative;
    min-height: 100%;
    padding: 64px 54px 82px;

    display: flex;
    align-items: flex-end;
    justify-content: flex-start;

    color: #fff;
    text-align: left;

    background:
        linear-gradient(
            145deg,
            #012169 0%,
            #062b73 48%,
            #336699 100%
        );

    overflow: hidden;
}


/*
 * Decoración abstracta inspirada en tecnología/conectividad.
 * No utiliza imágenes ni modifica el logo oficial.
 */
.visitas-auth-content::before {
    position: absolute;
    content: "";
    width: 430px;
    height: 430px;
    top: -165px;
    right: -145px;
    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, .12);

    box-shadow:
        0 0 0 45px rgba(255, 255, 255, .025),
        0 0 0 90px rgba(255, 255, 255, .022),
        0 0 0 135px rgba(255, 255, 255, .018);
}

.visitas-auth-content::after {
    position: absolute;
    content: "";
    width: 170px;
    height: 170px;
    left: -65px;
    bottom: 105px;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .12) 0%,
            rgba(255, 255, 255, .03) 48%,
            transparent 70%
        );
}

.visitas-auth-content .m-account--content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 390px;
}

.visitas-auth-content .h2 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 34px;
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: -.5px;
}

.visitas-auth-content .m-account--content > p {
    margin: 0;
    max-width: 340px;
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    line-height: 1.65;
}


/* ==========================================================================
   PANEL DERECHO
   ========================================================================== */

.visitas-auth-page .m-account--form-w {
    min-height: 100%;
    padding: 55px 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--auth-text);
    background: #fff;
}

.visitas-auth-form {
    width: 100%;
    max-width: 360px;
}


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

.visitas-auth-form .logo {
    margin-bottom: 22px;
    text-align: center;
}

.visitas-auth-logo img {
    display: block;
    width: min(245px, 82%);
    max-width: 245px;
    height: auto;
    margin: 0 auto;
}


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

.visitas-auth-form .m-account--title {
    display: block;
    margin-bottom: 30px;
    color: var(--auth-primary);
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
    text-align: center;
}


/* ==========================================================================
   CAMPOS
   ========================================================================== */

.visitas-auth-form .form-group {
    margin-bottom: 16px;
}

.visitas-auth-form .input-group {
    border: 1px solid var(--auth-border);
    border-radius: 8px;
    background: var(--auth-input);
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.visitas-auth-form .input-group:focus-within {
    border-color: var(--auth-primary-light);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(51, 102, 153, .12);
}

.visitas-auth-form .input-group-prepend {
    margin-right: 0;
    padding: 0 17px;
    display: flex;
    align-items: center;

    color: var(--auth-primary);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--auth-border);
    border-radius: 0;
}

.visitas-auth-form .form-control {
    height: 48px;
    color: var(--auth-text);
    background: transparent;
    border: 0;
    box-shadow: none;
}

.visitas-auth-form .form-control:focus {
    color: var(--auth-text);
    background: transparent;
    border: 0;
    box-shadow: none;
}

.visitas-auth-form .form-control::placeholder {
    color: #98a2b3;
}

.visitas-password-group .form-control {
    border-right: 0;
}

.visitas-password-group .input-group-append {
    margin-left: 0;
}

.visitas-password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;

    color: #7b8494;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--auth-border);
    border-radius: 0 8px 8px 0;

    transition:
        color .18s ease,
        background-color .18s ease;
}

.visitas-password-toggle:hover,
.visitas-password-toggle:focus {
    color: var(--auth-primary);
    background: rgba(1, 33, 105, .04);
    border-color: var(--auth-border);
    outline: 0;
}


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

.visitas-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin-top: 18px;

    color: #667085;
    font-size: .86rem;
}

.visitas-auth-check {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: 0;
    cursor: pointer;
}

.visitas-auth-check input {
    accent-color: var(--auth-primary);
}

.visitas-auth-form .btn-link {
    padding: 0;
    color: var(--auth-primary);
    font-weight: 500;
    text-decoration: none;
}

.visitas-auth-form .btn-link:hover,
.visitas-auth-form .btn-link:focus {
    color: var(--auth-primary-hover);
    text-decoration: underline;
}


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

.visitas-auth-actions {
    margin-top: 28px;
}

.visitas-auth-actions .btn {
    min-height: 48px;
    border-radius: 8px;

    color: #fff;
    background: var(--auth-primary);
    border-color: var(--auth-primary);

    font-weight: 600;
    letter-spacing: .2px;
    text-transform: uppercase;

    box-shadow: 0 7px 16px rgba(1, 33, 105, .16);

    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .12s ease;
}

.visitas-auth-actions .btn:hover,
.visitas-auth-actions .btn:focus {
    color: #fff;
    background: var(--auth-primary-hover);
    border-color: var(--auth-primary-hover);
    box-shadow: 0 9px 20px rgba(1, 33, 105, .22);
}

.visitas-auth-actions .btn:active {
    transform: translateY(1px);
}

.visitas-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
}

.visitas-auth-submit.is-loading,
.visitas-auth-submit:disabled {
    cursor: wait;
    opacity: .88;
    transform: none;
}

.visitas-auth-submit-spinner {
    font-size: .95rem;
}


/* ==========================================================================
   PIE
   ========================================================================== */

.visitas-auth-form .m-account--footer {
    margin-top: 38px;
    color: var(--auth-muted);
    text-align: center;
}

.visitas-auth-form .m-account--footer p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.6;
}

.visitas-auth-back {
    margin-top: 1rem;
    text-align: center;
}


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

@media (max-width: 991px) {

    .visitas-auth-page > .m-account {
        max-width: 880px;
    }

    .visitas-auth-page > .m-account > .row {
        min-height: 610px;
    }

    .visitas-auth-content {
        padding: 48px 38px;
    }

    .visitas-auth-content .h2 {
        font-size: 30px;
    }

    .visitas-auth-page .m-account--form-w {
        padding: 48px 34px;
    }
}


@media (max-width: 767px) {

    .visitas-auth-page {
        padding: 24px 15px;
    }

    .visitas-auth-page > .m-account {
        border-radius: 14px;
    }

    .visitas-auth-page > .m-account > .row {
        min-height: 0;
    }

    .visitas-auth-content {
        min-height: 260px;
        padding: 38px 32px;
        align-items: center;
    }

    .visitas-auth-content .h2 {
        font-size: 27px;
    }

    .visitas-auth-page .m-account--form-w {
        padding: 42px 28px;
    }

    .visitas-auth-options {
        align-items: flex-start;
        flex-direction: column;
        gap: .75rem;
    }

    .visitas-auth-logo img {
        max-width: 220px;
    }
}


@media (max-width: 420px) {

    .visitas-auth-page {
        padding: 15px 10px;
    }

    .visitas-auth-content {
        min-height: 230px;
        padding: 30px 24px;
    }

    .visitas-auth-content .h2 {
        font-size: 24px;
    }

    .visitas-auth-page .m-account--form-w {
        padding: 36px 22px;
    }
}