﻿.login-background {
    background: url('/images/FONDO-01.jpg') no-repeat center center fixed;
    background-size: cover; /* Asegura que la imagen de fondo cubra completamente el área */

    min-height: 100vh;
}

.cuadroblanco {
    position: absolute;
    top: 0;
    right: 0; /* Cambiado de 'left' a 'right' */
    margin: 0px;
    width: 53%; /* Ajusta este valor según necesites */
    height: 91.5%;
    z-index: 0; /* Valor bajo para quedar detrás */
}

.logo {
    position: absolute;
    top: 0;
    right: 0; /* Cambiado de 'left' a 'right' */
    margin: 40px;
    width: 150px; /* Ajusta este valor según necesites */
    height: auto;
}

.columna-formulario {
    padding-left: 100px !important;
    padding-right: 300px !important; /* Un padding menor para mantener algo de espacio */
    position: relative;
    z-index: 1; /* Valor bajo para quedar detrás */
    font-family: 'Roboto', sans-serif;
}

.columna-imagen {
    padding-right: 150px !important; /* Un padding menor para mantener algo de espacio */
    padding-left: 120px !important;
}


.login {
    margin-top: 20px;
    width: 100%; /* Hace que el botón tenga el mismo largo que las cajas de texto */
    background-color: rgb(72, 179, 141);
    border: none; /* Elimina el borde */
    border-radius: 80000px; /* Ajusta este valor para los bordes redondeados */
}

    .login:hover {
        background-color: rgb(48, 130, 135); /* Color cuando el cursor está sobre el botón */
    }

.container {
    padding-left: 0px; /* Elimina el padding izquierdo */
    padding-right: 0px;
    margin-right: 0;
    margin-left: 0;
    max-width: 100%;
}

.img-fluid {
    width: 75%; /* Ajusta este valor según necesites */
    height: 50%;
}

.columna-formulario h2 {
    margin-bottom: 50px; /* Ajusta este valor según la cantidad de espacio deseado */
}

.input-icon {
    width: 20px; /* O el tamaño que prefieras */
    height: auto;
    margin-right: 5px; /* Añade un poco de espacio entre el ícono y el texto */
    vertical-align: middle; /* Alinea verticalmente el ícono con el texto */
}

/* Estilo para los inputs */
.form-control {
    background-color: rgb(231, 231, 231); /* Fondo gris */
    border: none; /* Elimina los bordes */
    border-radius: 80000px; /* Bordes redondeados */
    text-align: center; /* Centra el texto horizontalmente */
}

    /* Mantener el estilo al hacer clic o al enfocar el cuadro de texto */
    .form-control:focus {
        background-color: rgb(231, 231, 231); /* Mismo fondo gris */
        border: none; /* Elimina el borde */
        box-shadow: none; /* Elimina cualquier sombra (como el borde azul en Bootstrap) */
        text-align: center; /* Centra el texto horizontalmente */
    }

/* Añadir un margen inferior a las etiquetas para crear espacio */
.form-group > label {
    margin-bottom: 5px; /* Ajusta este valor según necesites */
}


