/*
Color fondo login pages removed to match new design
body {
    min-height: 100vh;
    background: linear-gradient(
        135deg,
        #f5f9ff 0%,
        #eef4ff 40%,
        #e6f0ff 100%
    );
} */

/* Puntos
body {
    min-height: 100vh;
    background-color: #f5f9ff;
    background-image:
        radial-gradient(#dbe7ff 1px, transparent 1px);
    background-size: 24px 24px;
} */

/* 
Lineas diagonales
body {
    min-height: 100vh;
    background-color: #f5f9ff;
    background-image:
        repeating-linear-gradient(
            135deg,
            rgba(0, 123, 255, 0.04),
            rgba(0, 123, 255, 0.04) 1px,
            transparent 1px,
            transparent 16px
        );
} */
/* 
Degradado radial
body {
    min-height: 100vh;
    background:
        radial-gradient(circle at center,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(240, 246, 255, 0.9) 35%,
            #0061f2 100%);
} */

/* Grid tecnico */
/* body {
    min-height: 100vh;
    background-color: #f7faff;
    background-image:
        linear-gradient(#e3ecff 1px, transparent 1px),
        linear-gradient(90deg, #e3ecff 1px, transparent 1px);
    background-size: 40px 40px;
} */

/* Ondas */
/* body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 20%, rgba(0, 123, 255, 0.06), transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(0,123,255,0.06), transparent 40%),
        #f5f9ff;
} */
/* 
Lineas horizontales suaves
body {
    min-height: 100vh;
    background-color: #f7faff;
    background-image:
        repeating-linear-gradient(
            to bottom,
            rgba(0, 123, 255, 0.03),
            rgba(0, 123, 255, 0.03) 1px,
            transparent 1px,
            transparent 20px
        );
} */

/* Patron geometrico */
/* body {
    min-height: 100vh;
    background-color: #f6f9ff;
    background-image:
        linear-gradient(30deg, #e1ebff 12%, transparent 12.5%, transparent 87%, #e1ebff 87.5%, #e1ebff),
        linear-gradient(150deg, #e1ebff 12%, transparent 12.5%, transparent 87%, #e1ebff 87.5%, #e1ebff),
        linear-gradient(90deg, #e1ebff 12%, transparent 12.5%, transparent 87%, #e1ebff 87.5%, #e1ebff);
    background-size: 60px 104px;
} */

/* Centro circular suave */
/* body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 30%, rgba(0,123,255,0.10), transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(0,123,255,0.08), transparent 40%),
        #f5f9ff;
} */

/* Lineas verticales suaves */
/* body {
    min-height: 100vh;
    background-color: #f6f9ff;
    background-image:
        repeating-linear-gradient(
            to right,
            rgba(0,123,255,0.025),
            rgba(0,123,255,0.025) 1px,
            transparent 1px,
            transparent 28px
        );
} */

/* Lineas diagonales finas */
/* body {
    min-height: 100vh;
    background-color: #f5f9ff;
    background-image:
        repeating-linear-gradient(
            135deg,
            rgba(0,123,255,0.035),
            rgba(0,123,255,0.035) 1px,
            transparent 1px,
            transparent 14px
        );
} */

/* Degradado radial suave */
/* body {
    min-height: 100vh;
    background:
        radial-gradient(circle at center,
            #ffffff 0%,
            rgba(0,97,242,0.10) 45%,
            rgba(0,97,242,0.20) 100%
        );
} */

/* Grid mas fuerte */
/* body {
    min-height: 100vh;
    background-color: #f6f9ff;
    background-image:
        linear-gradient(rgba(0,97,242,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,97,242,0.06) 1px, transparent 1px);
    background-size: 42px 42px;
} */

/* Combinacion radial y puntos */
/* body {
    min-height: 100vh;
    background:
        radial-gradient(rgba(0,97,242,0.06) 1px, transparent 1px),
        radial-gradient(circle at 70% 30%, rgba(0,97,242,0.20), transparent 40%),
        #f7faff;
    background-size: 26px 26px;
} */

/* Degradado radial azul intenso */
/* body {
    min-height: 100vh;
    background:
        radial-gradient(circle at center,
            rgba(0,97,242,0.35),
            #0047b3
        );
} */

/* Degradado radial azul moderado */
/* body {
    min-height: 100vh;
    background:
        radial-gradient(circle at center,
            rgba(0,97,242,0.40),
            rgba(0,97,242,0.18) 45%,
            #002f73 100%
        );
} */

/* Patron de puntos suaves */
/* body {
    min-height: 100vh;
    background-color: #f6f9ff;
    background-image:
        radial-gradient(circle at 30% 30%, rgba(0, 97, 242, 0.192) 2px, transparent 2px),
        radial-gradient(circle at 70% 70%, rgba(0, 97, 242, 0.192) 2px, transparent 2px);
    background-size: 48px 48px;
} */

/* Lineas diagonales suaves */
/* body {
    min-height: 100vh;
    background-color: #f6f9ff;
    background-image:
        repeating-linear-gradient(
            135deg,
            rgba(0, 97, 242, 0.04),
            rgba(0, 97, 242, 0.04) 10px,
            transparent 10px,
            transparent 20px
        );
} */


/* --------------------------------- */
main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.img-login {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 50%;
    height: auto;
    padding: 0.25rem;
}

h3 {
    margin-bottom: 0;
}

@media screen and (min-width: 1801px) {
    .img-login {
        max-width: 70%;
    }

    .display-6 {
        font-size: 2.3rem;
    }
}

.card-body-right-login {
    padding-top: 0 !important;
    padding-bottom: 0.3rem !important;
}
@media screen and (max-width: 1800px) {

    .section-right-login {
        margin-bottom: 0 !important;
    }

    .display-6 {
        font-size: 2.1rem;
    }

}

/* SVG Animaciones */

/* Agent SVG */

svg#freepik_stories-active-support:not(.animated) .animable {
    opacity: 0;
}

svg#freepik_stories-active-support.animated #freepik--support-character--inject-2 {
    animation: 3s Infinite linear floating;
    animation-delay: 1s;
}

@keyframes floating {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.animator-hidden {
    display: none;
}

/* Customer SVG */

svg#freepik_stories-internship:not(.animated) .animable {
    opacity: 0;
}

svg#freepik_stories-internship.animated #freepik--speech-bubbles-2--inject-8 {
    animation: 6s Infinite linear floating;
    animation-delay: 0s;
}

svg#freepik_stories-internship.animated #freepik--speech-bubbles-1--inject-8 {
    animation: 6s Infinite linear shake;
    animation-delay: 0s;
}

@keyframes floating {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.animator-hidden {
    display: none;
}