/* Estilo para el contenedor con imagen de fondo */
.login-background {
    background-image: url('../img/fondo_login.jpg'); /* Cambia la ruta por tu imagen */
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    height: 500px; /* Altura personalizada */
    width: 70%; /* Ancho personalizado */
    margin: 50px auto;
    display: flex;
    justify-content: flex-end; /* Mueve el formulario a la derecha */
    align-items: center;
    padding-right: 50px; /* Espacio desde la derecha */
    border-radius: 10px; /* Opcional: bordes redondeados */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra para darle estilo */
}


/* Estilo para el título */
.titulo-sistema {
    background-color: #4BADE8; /* Color de fondo */
    color: white; /* Color del texto */
    padding: 15px 20px; /* Espaciado interno */
    text-align: center;
    font-size: 22px; /* Tamaño de la fuente */
    font-weight: bold;
    border-radius: 5px; /* Bordes redondeados */
    margin: 1% auto -2% auto; /* Margen superior y sin margen inferior */
    width: 70%; /* Ajusta el ancho al contenido */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para el título */
}

/* Ajustar el tamaño del formulario dentro del contenedor */  

.sign-box {
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco con opacidad */
    padding: 20px;
    border-radius: 8px;
    margin-left: 50%; /* Garantiza que el cuadro esté alineado hacia la derecha */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra para resaltar el cuadro */
}