/* formulario unificados para todo el sitio */

:root {
    --field-text: #0d2054;
    --field-muted: #6b7280;
    --field-placeholder: #9aa1b0;
    --field-border: #e4e7ef;
    --field-border-hover: #cfd5e2;
    --field-focus: #00a3e3;
    --field-ring: 0 0 0 4px rgba(0, 163, 227, 0.16);
    --field-error: #d93a3a;
    --field-error-ring: 0 0 0 4px rgba(217, 58, 58, 0.14);
    --field-radius: 14px;
    --field-height: 52px;
}

/*   campo base   */

.field__input,
input.form-control,
textarea.form-control {
    display: block;
    width: 100%;
    height: var(--field-height);
    padding: 0 18px;
    border: 1.5px solid var(--field-border);
    border-radius: var(--field-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(13, 32, 84, 0.04);
    color: var(--field-text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea.field__input,
textarea.form-control {
    height: auto;
    min-height: 140px;
    padding: 14px 18px;
    resize: vertical;
}

.field__input::placeholder,
.form-control::placeholder {
    color: var(--field-placeholder);
    opacity: 1;
}

.field__input:hover,
.form-control:hover {
    border-color: var(--field-border-hover);
}

.field__input:focus,
.form-control:focus {
    border-color: var(--field-focus);
    box-shadow: var(--field-ring);
    color: var(--field-text);
}

/* error solo después de que el usuario interactuó */
.field__input:user-invalid,
.form-control:user-invalid,
.form-control[aria-invalid="true"] {
    border-color: var(--field-error);
}

.field__input:user-invalid:focus,
.form-control:user-invalid:focus,
.form-control[aria-invalid="true"]:focus {
    box-shadow: var(--field-error-ring);
}

.field__input[disabled],
.form-control[disabled] {
    background: #f5f7fb;
    cursor: not-allowed;
}

/*    label   */

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--field-text);
}

.field__hint {
    font-size: 0.8rem;
    color: var(--field-muted);
}

/*    avisos    */

.form-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: var(--field-radius);
    font-size: 0.9rem;
    line-height: 1.45;
}

.form-alert.-error {
    background: #fdf1f1;
    color: #8f1f1f;
    border: 1px solid #f6d5d5;
}

.form-alert ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*    ajustes de formularios existentes    */

/* newsletter: botón a la altura del input */
#newsletter .btn {
    height: var(--field-height);
    border-radius: var(--field-radius);
}

/* modal de contacto: nombre y apellido con aire entre sí */
#contactoform .form-row.name-lastaname {
    gap: 12px;
    flex-wrap: nowrap;
}

#contactoform .form-row.name-lastaname .form-control {
    margin-right: 0;
}