.login {
    background: var(--color-fondo-login);
    color: var(--color-texto-login);
    box-shadow: var(--box-shadow-1);
    border: var(--borde-1);
    border-radius: var(--borde-radio-1);    

    padding: var(--login-padding-form);    
    width: 100%;
    max-width: var(--login-tamaño-form);
    text-align: center;

    font-weight: var(--font-weight-medium);
}

/* Estilos del formulario */
.login form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Estilos de los fieldsets */
.login fieldset {
    border: none;
    margin-bottom: 0px;
    text-align: left;
}

/* Estilos de etiquetas */
.login label {    
    display: block;
    margin-bottom: 8px;
}

/* Estilos de los inputs */
.login input {
    background-color: var(--fondo-color-input);
    width: 100%;
    padding: 10px;
    border: var(--borde-1);
    border-radius: var(--borde-radio-1);
}

/* Botón de login */
.login button {
    background: var(--color-fondo-login-boton);
    color: var(--color-texto-login-boton);
    border: var(--borde-1);
    padding: 12px;
    cursor: pointer;
    border-radius: var(--borde-radio-1);
    margin-top: 10px;
    font-weight: var(--font-weight-medium);
    font-family: var(--body-font);
}

.login button:hover {
    background: var(--color-fondo-login-boton-hover);
}

.login-loader {
    display: none;
    border: 4px solid var(--color-spiner-login);
    border-top: 4px solid #333;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 10px auto;
}

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

    100% {
        transform: rotate(360deg);
    }
}

.login-message {
    font-size: 12px;
    font-weight: 500;
    margin-top: 10px;
    color: var(--color-texto-error-login);
    display: none;
}




.fondo-imagen-bienvenida-transp{
    background: url('../asset/consultoria-estrategica-imghome-transp.png') no-repeat center center;
    background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
}

.fondo-imagen-bienvenida{
    background: url('../asset/consultoria-estrategica-imghome-transp-80.png') no-repeat center center;
    background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
}

.fondo-transparencia{
    background-color: rgba(255, 255, 255, 1); /* Fondo con transparencia */
    background-blend-mode: darken; /* Mezcla la transparencia con la imagen */
}

.bienvenido {    
    width: fit-content;
    display: inline-block; /* Para que el contenedor se ajuste al tamaño de la imagen */
}

.bienvenido img {
    display: block;
    width: 100%; /* Ajusta el ancho al contenedor */
    height: auto;
}

.bienvenido h3 {
    color: var(--texto-color-white); /* Color del texto */
    background: var(--fondo-color-1-transp); /* Fondo semi-transparente */
    border-radius: var(--borde-radio-1);
    border: var(--borde-1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el texto */    
    padding: 80px 80px;
    text-align: center;
    font-size: 2em;
    letter-spacing: 1.2px;
}