/*
|--------------------------------------------------------------------------
| Matec Component: Form
|--------------------------------------------------------------------------
| Inputs, labels, helpers y grupos reutilizables.
|--------------------------------------------------------------------------
*/

.mtc-form {
    display: grid;
    gap: var(--mtc-space-md);
}

.mtc-form__group,
.mtc-field {
    display: grid;
    gap: var(--mtc-space-2xs);

    margin: 0;
}

.mtc-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mtc-space-md);
}

.mtc-label,
.mtc-field > span,
.mtc-form__label {
    color: var(--mtc-color-text-soft);

    font-size: var(--mtc-font-size-xs);
    font-weight: var(--mtc-font-weight-semibold);
    line-height: var(--mtc-line-height-snug);
}

.mtc-input,
.mtc-select,
.mtc-textarea,
.mtc-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.mtc-form select,
.mtc-form textarea {
    width: 100%;

    border: 1px solid var(--mtc-color-input-border);
    border-radius: var(--mtc-radius-md);
    outline: none;

    background: var(--mtc-color-input-bg);
    color: var(--mtc-color-input-text);

    font-family: var(--mtc-font-family-base);
    font-size: var(--mtc-font-size-sm);
    line-height: var(--mtc-line-height-base);

    transition:
        background-color var(--mtc-transition-fast),
        border-color var(--mtc-transition-fast),
        box-shadow var(--mtc-transition-fast),
        color var(--mtc-transition-fast);
}

.mtc-input,
.mtc-select,
.mtc-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.mtc-form select {
    min-height: var(--mtc-size-input-height);
    padding-inline: var(--mtc-space-md);
}

.mtc-textarea,
.mtc-form textarea {
    min-height: 120px;
    padding: var(--mtc-space-sm) var(--mtc-space-md);
    resize: vertical;
}

.mtc-input::placeholder,
.mtc-textarea::placeholder,
.mtc-form input::placeholder,
.mtc-form textarea::placeholder {
    color: var(--mtc-color-input-placeholder);
}

.mtc-input:focus,
.mtc-select:focus,
.mtc-textarea:focus,
.mtc-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.mtc-form select:focus,
.mtc-form textarea:focus {
    border-color: var(--mtc-color-input-focus-border);
    background: var(--mtc-color-input-focus-bg);
    box-shadow: 0 0 0 4px var(--mtc-color-focus-soft);
}

.mtc-input:disabled,
.mtc-select:disabled,
.mtc-textarea:disabled,
.mtc-form input:disabled,
.mtc-form select:disabled,
.mtc-form textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.mtc-help,
.mtc-form__help {
    margin: 0;

    color: var(--mtc-color-text-muted);

    font-size: var(--mtc-font-size-xs);
    line-height: var(--mtc-line-height-snug);
}

.mtc-error,
.mtc-form__error {
    margin: 0;

    color: var(--mtc-color-danger);

    font-size: var(--mtc-font-size-xs);
    font-weight: var(--mtc-font-weight-semibold);
    line-height: var(--mtc-line-height-snug);
}

/*
|--------------------------------------------------------------------------
| Checkbox / Radio
|--------------------------------------------------------------------------
*/

.mtc-check,
.mtc-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--mtc-space-xs);

    color: var(--mtc-color-text-soft);

    font-size: var(--mtc-font-size-sm);
    line-height: var(--mtc-line-height-snug);

    cursor: pointer;
}

.mtc-check input,
.mtc-radio input {
    width: 18px;
    height: 18px;

    accent-color: var(--mtc-color-primary);
}

/*
|--------------------------------------------------------------------------
| Search field helper
|--------------------------------------------------------------------------
*/

.mtc-input-wrap {
    position: relative;
}

.mtc-input-wrap svg,
.mtc-input-wrap__icon {
    position: absolute;
    left: var(--mtc-space-md);
    top: 50%;

    width: var(--mtc-size-icon-sm);
    height: var(--mtc-size-icon-sm);

    color: var(--mtc-color-text-muted);

    transform: translateY(-50%);
    pointer-events: none;
}

.mtc-input-wrap .mtc-input {
    padding-left: calc(var(--mtc-space-md) + var(--mtc-size-icon-sm) + var(--mtc-space-sm));
}

/*
|--------------------------------------------------------------------------
| Form actions
|--------------------------------------------------------------------------
*/

.mtc-form__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mtc-space-sm);

    padding-top: var(--mtc-space-sm);
}

@media (max-width: 768px) {
    .mtc-form__row {
        grid-template-columns: 1fr;
    }

    .mtc-form__actions {
        display: grid;
    }

    .mtc-form__actions .mtc-button,
    .mtc-form__actions .mtc-btn {
        width: 100%;
    }
}