@font-face {
    font-family: 'AvenirBold';
    src: url('../assets/fonts/Avenir.ttc') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirNextMedium';
    src: url('../assets/fonts/AvenirNext.ttc') format('truetype');
    font-weight: 500; /* medium */
    font-style: normal;
}

@font-face {
    font-family: 'AvenirNextCondensedSemiBold';
    src: url('../assets/fonts/AvenirNextCondensed.ttc') format('truetype');
    font-weight: 600; /* semi-bold */
    font-style: normal;
}

/* Ejemplo de cómo usar las fuentes definidas */
body {
    font-family: 'AvenirBold', sans-serif !important;
}

h1,h2,strong,input,select {
    font-family: 'AvenirNextMedium', sans-serif !important;
}

p,label {
    font-family: 'AvenirNextCondensedSemiBold', sans-serif !important;
}


.card {

    width: 100%;

    max-width: 400px;

    border: none;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}



.eyes{

    cursor: pointer;

}



body {

    background-color: #f8f9fa;

    font-family: Arial, sans-serif;

    overflow-x: hidden; /* Previene que aparezcan las barras de desplazamiento */

    overflow-y: auto;

}



.sticky-container { 
    position: relative;
    width: 100%;
    z-index: 1020
}



.fixed {
    position: fixed;
    top: 0;
    width: 30% !important; /* Ajusta según tus necesidades */
}



.form-control {

    margin-bottom: 15px;

}



.forgot-password-link {

    color: #007bff;

    text-decoration: none;

}



.forgot-password-link:hover {

    text-decoration: underline;

}



.container {

    position: relative; /* Contenedor relativo para mantener las pelotas dentro */                 

    padding-bottom: 60px; /* Añade espacio para el footer */

    overflow-x: hidden;

}



.logo {

    display: block;

    margin: 0 auto;

    max-width: 150px; /* Ajusta el tamaño del logo según sea necesario */

}



.logo-tv {
    display: block;    
    max-width: 120px; /* Ajusta el tamaño del logo según sea necesario */
}



.bg-gray{

    background-color: #F2F2F2 !important;

}



.bg-blue{

    background-color: #0049B7 !important;

    color: white !important;

}



.bg-green{

 background-color: #DEF241 !important;

}



.btn-outline-light {

    background-color: #fff !important;

    border: 1px solid #fff !important;    

    margin-bottom: 10px !important;

}



.btn-outline-light:hover {

    background-color: #e6e6e6 !important;

    border-color: #e6e6e6 !important;

}



.footer {

    position: absolute;

    bottom: 20px;

    text-align: center;

    width: 100%;

}



.container-fluid {

        position: relative; /* Contenedor relativo para mantener las pelotas dentro */

        width: 100vw;

       /* height: 100vh;*/

        overflow: hidden; /* Asegura que no haya desplazamiento */

}



/* PELOTAS SIN MOVIMIENTO */



.ball-nomove {

    position: absolute;

    width: 220px;

    height: 220px;

    background-image: url('../assets/pelota2.png'); /* Asegúrate de que la ruta a la imagen sea correcta */

    background-size: cover;

    clip-path: circle(110px at center); /* Ajusta para mantener la pelota redonda */

    z-index: -1; /* Posiciona las pelotas detrás del contenido */    

}



.ball1-nomove {

    top: 0;

    left: -30px;    

}



.ball2-nomove {

    bottom: 0;

    left: -30px;    

}



.ball3-nomove {

    top: 50%;

    right: 0;

    transform: translateY(-50%);    

}



.ball4-nomove {

    bottom: -300px;

    right: 0;

}





#loader {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background: rgba(255, 255, 255, 0.8);

    z-index: 1000;

}



.loader-ball {

    width: 50px;

    height: 50px;

    background-color: #007bff;

    border-radius: 50%;

    display: inline-block;

    animation: bounce 0.6s infinite alternate;

}



.loader-ball:nth-child(2) {

    animation-delay: 0.2s;

}



.loader-ball:nth-child(3) {

    animation-delay: 0.4s;

}



@keyframes bounce {

    to {

        transform: translateY(-100px);

    }

}



/* PELOTAS EN MOVIMIENTO */

.ball {

        position: absolute;

        width: 220px;

        height: 220px;

        background-image: url('../assets/pelota2.png'); /* Asegúrate de que la ruta a la imagen sea correcta */

        background-size: cover;

        clip-path: circle(110px at center); /* Ajusta para mantener la pelota redonda */

        z-index: -1; /* Posiciona las pelotas detrás del contenido */

        animation-timing-function: linear;

    }



    .ball1 {

        top: 10px;

        left: 10px;

        animation: moveBall1 4s infinite;

    }



    .ball2 {

        bottom: 10px;

        left: 10px;

        animation: moveBall2 4.5s infinite; /* Animación específica para ball2 */

    }



    .ball3 {

        top: 50%;

        right: 10px;

        transform: translateY(-50%);

        animation: moveBall3 5s infinite; /* Animación específica para ball3 */

    }



    @keyframes moveBall1 {

        0%, 100% {

            transform: translate(-100px, -100px);

            animation-timing-function: ease-in-out;

        }

        25% {

            transform: translate(100px, -100px);

            animation-timing-function: ease-in;

        }

        50% {

            transform: translate(100px, 100px);

            animation-timing-function: ease-out;

        }

        75% {

            transform: translate(-100px, 100px);

            animation-timing-function: ease-in;

        }

    }



    @keyframes moveBall2 {

        0% {

            transform: translate(0, 0);

        }

        25% {

            transform: translate(-60px, -30px);

        }

        50% {

            transform: translate(-120px, 0);

        }

        75% {

            transform: translate(-60px, 30px);

        }

        100% {

            transform: translate(-80px, 100px);

        }

    }



    @keyframes moveBall3 {

        0% {

            transform: translate(0, -100px);

        }

        25% {

            transform: translate(100px, -30px);

        }

        50% {

            transform: translate(0, -60px);

        }

        75% {

            transform: translate(30px, -30px);

        }

        100% {

            transform: translate(0, 0);

        }

    }