﻿
/* Ajuste del contenedor del formulario */
.form {
    width: 100%;
    max-width: 400px; /* Limitar el ancho máximo del formulario */
    margin: 0 auto; /* Asegurarse de que esté centrado */
    padding: 20px;
    border-radius: 1.4rem;
    box-shadow: 0 10px 25px rgba(92,99,105,0.2);
}

/* Ajuste de los inputs */
.form__input {
    width: 100%; /* Ancho completo dentro del contenedor */
    max-width: 350px; /* Limitar el ancho máximo de los inputs */
    margin: 0 auto; /* Centrados en el contenedor */
    display: block;
    padding: 0.7rem;
    border-radius: 0.35rem;
}

/* Centrando el botón de inicio de sesión */
/*.form__button {
    width: 100%;
    max-width: 250px;*/ /* Limitar el ancho máximo del botón */
    /*display: block;
    margin: 20px auto;*/ /* Centrando el botón en el contenedor */
    /*padding: 0.75rem 1rem;
    background-color: var(--first-color);
    color: white;
    border-radius: 0.5rem;
    cursor: pointer;
}*/


/* Para pantallas grandes */
@media (min-width: 900px) {
    .l-form {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 70%;
        border-radius: 1.4rem;
    }

    .form {
        width: 100%;
        max-width: 600px; /* Asegúrate de que el formulario tenga un ancho máximo similar al texto */
        padding: 20px;
        border-radius: 1.4rem;
        box-shadow: 0 10px 25px rgba(92,99,105,0.2);
    }

    .container-fluid {
        display: flex;
        justify-content: space-between; /* Asegura que el texto y la animación Lottie ocupen lados opuestos */
        align-items: center;
        height: 100vh; /* Centrado vertical completo */
        max-width: 1200px; /* Controla el ancho total del contenido */
    }
}


/* Para pantallas pequeñas */
@media (max-width: 600px) {
    .l-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 90%;
        margin: auto;
    }

    .form {
        width: 100%;
        padding: 1rem;
        box-shadow: 0 7px 17.5px rgba(92,99,105,.2);
    }

    .form__title {
        font-size: 1.5rem;
        text-align: center;
    }

    .form__div {
        margin-bottom: 1.2rem;
    }

    .form__input {
        padding: 0.8rem;
    }

    .form__button {
        width: 100%;
        padding: 0.5rem 1rem;
    }
}
