/* ================================================================
   components/forms.css — Inputs, selects y labels del design system
   Clase canónica: .form-input (reemplaza Bootstrap .form-control/.form-select)
   ================================================================ */

.form-input {
    display: block;
    width: 100%;
    height: var(--input-height);         /* 36px */
    padding: 0 var(--space-3);
    font-size: var(--text-base);
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow   var(--duration-base) var(--ease-out);
    appearance: auto;   /* mantiene flecha nativa en <select> */
}

.form-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.form-input::placeholder { color: var(--text-tertiary); }

.form-input:disabled {
    background: var(--gray-100);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

.form-input[type="file"] {
    padding: 4px var(--space-2);
    font-size: var(--text-sm);
}

.form-input.error,
.form-input.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* Variante pequeña — filter bars, toolbars */
.form-input-sm {
    height: 30px;
    font-size: var(--text-sm);
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
}

/* Label */
.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

/* Hint / help text */
.form-hint, .form-text {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

/* Error message */
.form-error, .invalid-feedback {
    display: block;
    font-size: var(--text-sm);
    color: var(--danger-text);
    margin-top: var(--space-1);
}