/* Componente Campo de formulario */
.form-field {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.form-field-label {
    align-self: stretch;
    color: var(--paleta-principal-azul-cielo-latino, #2D6DF6);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--desktop-caption-regular-font-family);
    font-size: var(--desktop-caption-regular-font-size);
    font-style: var(--desktop-caption-regular-font-style);
    font-weight: var(--desktop-caption-regular-font-weight);
    line-height: var(--desktop-caption-regular-line-height);
}

.form-field-help {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    color: var(--paleta-principal-azul-cielo-latino, #2D6DF6);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--desktop-caption-regular-font-family);
    font-size: var(--desktop-caption-regular-font-size);
    font-style: var(--desktop-caption-regular-font-style);
    font-weight: var(--desktop-caption-regular-font-weight);
    line-height: var(--desktop-caption-regular-line-height);
}

.form-field:has(.text-input:disabled) .form-field-label,
.form-field:has(.dropdown-select:disabled) .form-field-label,
.form-field:has(.text-area:disabled) .form-field-label,
.form-field:has(.number-input:disabled) .form-field-label,
.form-field:has(input[type="radio"]:disabled+label) .form-field-label,
.form-field:has(input[type="date"]:disabled) .form-field-label {
    color: var(--escala-grises-gris-500, #3F3F41);
}

.form-field:has(.text-input:disabled) .form-field-help,
.form-field:has(.dropdown-select:disabled) .form-field-help,
.form-field:has(.text-area:disabled) .form-field-help,
.form-field:has(.number-input:disabled) .form-field-help,
.form-field:has(input[type="radio"]:disabled+label) .form-field-help,
.form-field:has(input[type="date"]:disabled) .form-field-help {
    color: var(--tonos-neutros-pantone-429-C, #B4B4B5);
}

/* Plain text label for non-editable fields */
.form-field-plain-text {
    /* align-self: stretch; */
    color: var(--escala-grises-gris-500, #3F3F41);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--desktop-caption-regular-font-family);
    font-size: var(--desktop-caption-regular-font-size);
    font-style: var(--desktop-caption-regular-font-style);
    font-weight: var(--desktop-caption-regular-font-weight);
    line-height: var(--desktop-caption-regular-line-height);
}

.form-field:has(.error) .form-field-label,
.form-field:has(.error) .form-field-help,
.form-field:has(.error) .text-input,
.form-field:has(.error) .text-icon,
.form-field:has(.error) .dropdown-select,
.form-field:has(.error) .dropdown-icon,
.form-field:has(.error) .text-area,
.form-field:has(.error) .number-input,
.form-field:has(.error) .number-icon,
.form-field:has(.error) .date-input,
.form-field:has(.error) .date-icon {
    color: var(--colores-alerta-error-1, #D12D35) !important;
}

.form-field:has(.error) .text-input-container,
.form-field:has(.error) .dropdown-select,
.form-field:has(.error) .text-area-container,
.form-field:has(.error) .number-input-container,
.form-field:has(.error) .date-input-container,
.form-field:has(.error) .radio-visual .radio-mark,
.form-field:has(.error) .custom-checkbox-visual .custom-checkbox-mark {
    border-color: var(--colores-alerta-error-1, #D12D35);
}

.form-field:has(.form-field-plain-text) .form-field-label {
    color: var(--escala-grises-gris-500, #3F3F41);
    font-family: var(--desktop-caption-bold-font-family);
    font-size: var(--desktop-caption-bold-font-size);
    font-style: var(--desktop-caption-bold-font-style);
    font-weight: var(--desktop-caption-bold-font-weight);
    line-height: var(--desktop-caption-bold-line-height);
}

.form-field:has(.status-tag) .form-field-label {
    color: var(--escala-grises-gris-500, #3F3F41) !important;
    font-family: var(--desktop-caption-bold-font-family);
    font-size: var(--desktop-caption-bold-font-size);
    font-style: var(--desktop-caption-bold-font-style);
    font-weight: var(--desktop-caption-bold-font-weight);
    line-height: var(--desktop-caption-bold-line-height);
}