/* FORMULARIO CONTACTO - COMPLETAMENTE CONFIGURABLE */

/* Configuración general del formulario */
#form {
    max-width: 600px;
    margin: auto;
    background-color: #f7f7f7; /* Color de fondo configurable */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Estilo de las etiquetas */
#form label {
    display: block;
    color: #333; /* Color del texto de las etiquetas */
    font-size: 16px; /* Tamaño del texto de las etiquetas */
    margin-bottom: 8px;
    font-weight: bold;
}

/* Campos de texto, select y textarea */
#form input[type="text"],
#form input[type="email"],
#form input[type="tel"],
#form select,
#form textarea {
    width: 100%;
    color: #000; /* Color del texto dentro de los campos */
    font-size: 14px; /* Tamaño del texto dentro de los campos */
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 40px;
    box-sizing: border-box;
}

/* Estilo de textarea */
#form textarea {
    min-height: 120px;
    resize: vertical;
}

/* Grupo de checkbox o radio */
#form .checkbox-group,
#form .radio-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

#form .checkbox-group input,
#form .radio-group input {
    margin-right: 8px;
}

/* Botón de envío */
#btnEnviar {
    background-color: #007bff; /* Color del botón */
    color: #fff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#btnEnviar:hover {
    background-color: #0056b3; /* Color del botón al pasar el mouse */
}

/* Campos marcados como inválidos */
#form input:invalid,
#form select:invalid,
#form textarea:invalid {
    border: 2px solid red;
}

/* Estilo del DatePicker */
.ui-datepicker {
    background: #fff;
    border: 1px solid #ccc;
    z-index: 9999 !important;
}