/* CLASES E IMPORTACIONES */
@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans+Condensed:wght@200..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root{
    --color_1: #2DC2B3;
    --color_2: #2A2A2A;
    --color_3: #FFFFFF;
    --color_4: #23796D;
    --color_5: #134E5F;
    --cancelar: #ff5252;
    --bg_opaco: rgba(255, 255, 255, 0.5);
    --bg_gradient: rgba(0, 255, 117, 0.30);
    --bg_img-card: linear-gradient(163deg, #2DC2B3 0%, #134E5F 100%);
}   

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Estilos generales */
body {
    margin: 0;
    font-family: 'Reddit Sans Condensed', 'Roboto';
    background-color: var(--color_4);
    height: 100vh;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Contenedor principal con los dos DIV's */
.contenedor_principal {
    display: flex;
    height: 100vh; /* Para que ocupe toda la pantalla */
}

/* %%%%%%%%%%%%%%%%%%%%%%% Contenedor de bienvenida ocupa la mitad izquierda */
.contenedor_bienvenida {
    position: relative;
    flex: 1; /* Ocupa el 50% de la pantalla */
    color: var(--color_2);
    background-image: url('../img/img_bg/bg_1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Fondo opaco */
.bg_opaco {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: var(--bg_opaco);
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Texto de Bienvenida */
.text_welcome {
    font-size: 26px;
    margin: 40px;
    text-align: justify;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: stretch;
    z-index: 2;
}

/* %%%%%%%%%%%%%% Contenedor del formulario de login ocupa la mitad derecha */
/* %%%%%%%%%%%%%% Esta configuración es el arreglo para ajustar el contenido a la mitad de la pantalla. */
.contenedor_formlogin {
    flex: 1; /* Ocupa el 50% de la pantalla */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color_5);
    color: var(--color_3);
    padding: 20px;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Estilo del formulario Login */
.form_login {
    display: flex;
    flex-direction: column;
    width: 80%;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% TITULO DEL FORM */
.contenedor_formlogin h2 {
    font-size: 40px;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Texto de los inputs - (Label's) */
.form_login label {
    font-size: 20px;
    margin-bottom: 10px;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Diseño de los inputs */
.form_login input[type="text"] {
    border-radius: 10px;
    padding: 5px;
    height: 35px;
    font-size: medium;
}

.form_login input[type="password"] {
    border-radius: 10px;
    padding: 5px;
    height: 35px;
    font-size: medium;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Acomodo de los botones del login */
.btns-login {
    display: flex;
    justify-content: space-around;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Diseño de btn de login */
.btn-login2 {
    display: inline-block;
    width: 40%;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: var(--color_3);
    background-color: var(--color_4);
    border: 2px solid var(--color_2);
    border-radius: 10px;
    box-shadow: 5px 5px 0px var(--color_2);
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 30px;
}

.btn-login2:hover {
    background-color: #fff;
    color: var(--color_1);
    border: 2px solid var(--color_1);
    box-shadow: 5px 5px 0px var(--color_1);
}

.btn-login2:active {
    background-color: var(--color_5);
    box-shadow: none;
    transform: translateY(4px);
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Responsividad */
/* Responsividad para pantallas grandes (desktops y laptops) */
@media (min-width: 1008px) {
    .contenedor_principal {
        flex-direction: row;
    }

    .contenedor_bienvenida {
        flex: 1;
    }

    .contenedor_formlogin {
        flex: 1;
    }

    .contenedor_formlogin h2 {
        font-size: 36px;
    }

    .form_login {
        width: 70%; /* Ajuste del ancho */
    }

    .form_login input {
        font-size: 16px;
        height: 40px;
    }

    .btns-login button {
        width: 40%;
        font-size: 18px;
    }
}

/* Responsividad para pantallas medianas (tablets, laptops pequeños) */
@media (min-width: 641px) and (max-width: 1007px) {
    .contenedor_principal {
        flex-direction: column;
    }

    .contenedor_bienvenida {
        flex: 1;
        height: 40%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative; /* Necesario para posicionar el texto */
    }

    .text_welcome {
        font-size: 24px;
        text-align: center;
        position: relative; /* Permite superponer al carrusel */
        width: 100%;
        animation: fade 4s linear infinite; /* Animación infinita */
    }

    .text_welcome h1, 
    .text_welcome h2, 
    .text_welcome h3 {
        opacity: 0; /* Ocultar todos inicialmente */
        position: absolute;
        transition: opacity 1s ease-in-out; /* Transiciones suaves */
    }

    .text_welcome h1.active, 
    .text_welcome h2.active, 
    .text_welcome h3.active {
        opacity: 1; /* Solo el activo será visible */
    }

    /* Opcional: efecto de fade in/out */
    @keyframes fade {
        0% {
            opacity: 0; /* Comienza invisible */
            transform: translateX(10px); /* Comienza con un pequeño desplazamiento */
        }
        10% {
            opacity: 1; /* Aparece completamente */
            transform: translateX(0); /* Posición normal */
        }
        90% {
            opacity: 1; /* Permanece visible */
            transform: translateX(0); /* Sin desplazamiento */
        }
        100% {
            opacity: 0; /* Se desvanece nuevamente */
            transform: translateX(-10px); /* Pequeño desplazamiento hacia arriba */
        }
    }

    .contenedor_formlogin {
        flex: 1;
        height: 50%;
        padding: 20px;
    }

    .contenedor_formlogin h2 {
        font-size: 32px;
    }

    .form_login {
        width: 75%; /* Reduce ligeramente el ancho */
    }

    .form_login input {
        font-size: 14px;
        height: 35px;
    }

    .btns-login button {
        width: 40%;
        font-size: 16px;
    }
}

/* Responsividad para pantallas pequeñas (móviles) */
@media (min-width: 150px) and (max-width: 640px) {
    .contenedor_principal {
        flex-direction: column;
    }

    .contenedor_bienvenida {
        flex: 1;
        height: 40%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative; /* Necesario para posicionar el texto */
    }

    .text_welcome {
        font-size: 24px;
        text-align: center;
        position: relative; /* Permite superponer al carrusel */
        width: 100%;
    }

    .text_welcome h1, .text_welcome h2, .text_welcome h3 {
        opacity: 0; 
        position: absolute;
        transition: opacity 1s ease-in-out; 
    }

    .text_welcome h1.active, 
    .text_welcome h2.active, 
    .text_welcome h3.active {
        opacity: 1; 
        animation: fade 8s linear forwards; 
    }

    /* Opcional: efecto de fade in/out */
    @keyframes fade {
        0% {
            opacity: 0;
            transform: translateX(10px);
        }
        10% {
            opacity: 1; 
            transform: translateX(0);
        }
        90% {
            opacity: 1; 
            transform: translateX(0);
        }
        100% {
            opacity: 0; 
            transform: translateX(-10px);
        }
    } */

    .contenedor_formlogin {
        flex: 1;
        height: 60%;
        padding: 10px;
    }

    .contenedor_formlogin h2 {
        font-size: 30px;
        text-align: center;
    }

    .form_login {
        width: 90%; /* Cubre más espacio para mejor usabilidad */
    }

    .form_login input {
        font-size: 12px;
        height: 30px;
    }

    .btns-login button {
        width: 45%;
        font-size: 14px;
    }
}