* {
    box-sizing: border-box;
}

body {
    width: 100%;
    padding:0;
    align-items: center;
    font-family: 'Ubuntu', sans-serif;
    height: 100%;
    margin: 0;
}

.formContainer {
    border-radius: 10px !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    background-color: #fff;
}

/* Responsividad del formulario */
.form-responsive {
    width: 75%;
    max-width: 800px;
}

@media (max-width: 300px) {
    .form-responsive {
        width: 100%;
    }
}


@media (max-width: 768px) {
    .form-responsive {
        width: 95%;
    }
}

/* Responsividad del botón */
.btn-responsive {
    min-width: 120px;
    max-width: 200px;
}

@media (max-width: 480px) {
    .btn-responsive {
        width: 100%;
    }
}

form {
    height: 100%;
}

.headerForm {
    background-color: #135681;
    color: #FFFFFF;
}

footer {
    background-color: #222;
    color: #fff;
    padding:15px 20px;
}

    footer a {
        color: #3c97bf;
        text-decoration: none;
    }

.col-form-label {
    font-size: .9rem;
}


/* Mejora la visibilidad de los inputs */
.form-control {
    border-color:#ccc; /* Borde más visible */
    border-radius: 5px;
    padding: 8px;
    font-size: .9rem;
    background-color: #fff; /* Asegura que el fondo sea blanco */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

    /* Al enfocar el input */
    .form-control:focus {
        border-color: #dc3545; /* Rojo Bootstrap (puedes cambiarlo) */
        box-shadow: 0 0 5px rgba(220, 53, 69, 0.5); /* Resplandor sutil */
    }

/* Input en estado válido */
.was-validated .form-control:valid {
    border-color: #198754 !important; /* Verde Bootstrap */
    box-shadow: 0 0 5px rgba(25, 135, 84, 0.5) !important;
}

/* Input en estado inválido */
.was-validated .form-control:invalid {
    border-color: #dc3545 !important; /* Rojo Bootstrap */
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.5) !important;
}

/* Mejorar el color de los select */
.form-select {
    border-color:#ccc;
    background-color: #fff;
    transition: border-color 0.3s ease-in-out;
}

    .form-select:focus {
        border-color: #0d6efd; /* Azul Bootstrap */
        box-shadow: 0 0 5px rgba(13, 110, 253, 0.5);
    }

/* Estilos de mensajes de validación */
.invalid-feedback {
    color: #dc3545; /* Rojo */
    font-size: 0.9rem;
}

.valid-feedback {
    color: #198754; /* Verde */
    font-size: 0.9rem;
}