.banner-container {
    position: absolute; /* Necesario para el posicionamiento del contenido de login */
    z-index: -1; /* Asegura que el banner esté detrás de la sección de login */
    /*width: 100%;  /*Ocupa todo el ancho del contenedor */
    height: 20vw; /* Ocupa todo el alto del contenedor */
    overflow: hidden; /* Oculta cualquier desbordamiento de la imagen */
    display: flex; /* Usar flexbox para centrar el contenido */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    background: url('/img/fondo3-desktop.jpg') repeat center center;
    background-size: cover; /* Ajusta la imagen al tamaño del div */
    height: 32.2vh;
    width: 100%;
}

/*.banner-image {
    height: 100%; 
    width: auto; 
    display: block; 
}*/

#login-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Ajusta el alineamiento vertical */
    height: 50vh;
    padding: 20px;
    width: 1200px;
    margin: 0 auto; /* Centra el contenedor de login */
    background-color: #f4f4f400;
}

.login-section {
    position: relative;
    max-width: 1200px; /* Ajusta el ancho máximo de la sección de login en desktop */
    margin: 20px auto; /* Ajusta el margen superior e inferior, centrándola horizontalmente */
    padding: 20px 40px 20px 40px;
    background: rgba(255, 255, 255, 0);
    border-radius: 10px;
    z-index: 1; /* Asegura que la sección de login esté encima del banner */
    width: 100%;
    margin: -150px auto 20px auto; /* Ajusta el valor negativo para el efecto de superposición */
    align-items: center;
    align-items: flex-start;
}

.login-left {
    font-family: 'LTSaeada', sans-serif;
    flex: 1;
    padding: 20px;
    text-align: left;
    background-color: var(--background-color-transparent);
    border-radius: 10px;
    margin-right: 20px;
    color: var(--text-color-secondary);
}

.login-vision-title {
    font-size: 36px;
    font-weight: bold;
    color: var(--accent-color1);
    margin-bottom: 20px;
    text-align: left;
}

.login-vision-context {
    font-size: 16px;
    color: var(--text-color-secondary);
    text-align: left;
}

.login-right {
    flex: 1;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}




.login-title {
    margin-top: 0;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

.login-form {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 15px;
}

.input-field {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 16px;
}

.terms-container {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.terms-checkbox {
    margin-right: 10px;
}

.terms-label {
    font-size: 14px;
}

.submit-button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

.submit-button:hover {
    background-color: #45a049;
}

.social-login {
    margin-top: 15px;
}

.social-title {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 20px;
}

.social-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #ececec;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 16px;
}

.social-btn:hover {
    background-color: #ccc;
}

.register-link {
    text-align: center;
    margin-top: 15px;
}

.register-link a {
    color: #007BFF;
    text-decoration: none;
}

.register-link a:hover {
    text-decoration: underline;
}
.social-icon {
    width: 20px; /* Tamaño del icono */
    height: 20px;
    margin-right: 10px; /* Espacio entre el icono y el texto */
}

.error-message {
    display: none; /* Oculta el contenedor de errores al inicio */
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f9e2e2; /* Un color suave para el fondo del mensaje de error */
    border: 1px solid #e2b1b1; /* Un borde suave */
    border-radius: 8px; /* Bordes redondeados */
    color: #d9534f; /* Color de texto amigable */
    font-size: 14px; 
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Opcional: centra horizontalmente el contenido */
    height: auto; /* Ajusta la altura automáticamente para que se adapte al contenido */
    text-align: left;
}

.success-message {
    display: none; /* Oculta el contenedor al inicio */
    margin-bottom: 15px;
    padding: 10px;
    background-color: #d4edda; /* Color de fondo verde suave */
    border: 1px solid #c3e6cb; /* Borde verde claro */
    border-radius: 8px; /* Bordes redondeados */
    color: #155724; /* Color de texto verde */
    font-size: 14px;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Opcional: centra horizontalmente */
    height: auto; /* Ajusta la altura automáticamente */
    text-align: center; /* Opcional: centra el texto horizontalmente */
}

/* Estilos para el indicador de carga */
.loading-spinner {
    display: none; /* Oculta el spinner por defecto */
    border: 3px solid #f3f3f3; /* Fondo del spinner */
    border-top: 3px solid #3498db; /* Color del spinner */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite; /* Animación de giro */
    margin-left: 10px; /* Espacio entre el texto y el spinner */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.submit-button {
    position: relative;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

.submit-button:disabled {
    background-color: #dcdcdc; /* Color de fondo para estado deshabilitado */
    cursor: not-allowed;
}

.submit-button #loading-spinner {
    display: none; /* Oculta el spinner por defecto */
}


/* Media Queries */
@media (min-width: 100px) and (max-width: 1023px){
    #login-container {
        height: auto;
        width: auto;
    }
    .login-section {
        margin: -45px auto 20px auto;
    }
    .login-vision-title {
        font-size: 26px;
        text-align: center;
    }
    .login-vision-context {
        font-size: 16px;
        text-align: center;
    }
    .banner-image{
        content: url('../img/fondo3-mobile.jpg');
    }
    .login-left {
        margin: 0 0 20px 0; /* Espacio entre el panel izquierdo y el panel derecho */
        
        margin-top: 9rem;
        
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
}

@media (min-width: 1024px){
    #login-container {
        height: 100%;
        margin: 66px auto 82px auto; 
        width: auto;
    }
    .login-section {
        display: flex;
        flex-direction: row; /* Alinea los paneles de login en fila */
        justify-content: space-between; /* Distribuye el espacio entre los paneles */
        margin: 0px;
    }
    .login-left{        
        padding-top: 4rem;
    }

    .login-right {
        flex: 1;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .banner-image{
        content: url('../img/fondo3-desktop-large.jpg');
    }

    .login-vision-title {
        color: #fff;
    }
    
}