/**
 * GlobalCSS — Inputs
 * Campos de texto, date, number. Focus ring de 3px.
 * Ref: design-style-guide.md §6 Inputs
 */

/* ── Input base ── */

.gs-input {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border, #d2d2d7);
    border-radius: 6px;
    font-size: var(--gs-font-body);
    background: var(--color-bg-surface, #fff);
    color: var(--color-text, #1d1d1f);
    box-sizing: border-box;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}

.gs-input:focus {
    border-color: var(--color-primary, #007aff);
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-subtle, rgba(0,122,255,0.2));
}

.gs-input::placeholder {
    color: var(--color-text-tertiary, #aeaeb2);
}

/* ── Input compacto (barras de filtro, subheaders) ── */

.gs-input--compact {
    height: 30px;
    padding: 0 var(--space-md);
    border: 1px solid var(--color-border, #d2d2d7);
    border-radius: 8px;
    font-size: var(--gs-font-caption);
    background: var(--color-bg-surface, #fff);
    color: var(--color-text, #1d1d1f);
    box-sizing: border-box;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}

.gs-input--compact:focus {
    border-color: var(--color-primary, #007aff);
    outline: none;
    box-shadow: 0 0 0 3.5px var(--color-primary-subtle, rgba(0,122,255,0.2));
}

.gs-input--compact::placeholder {
    color: var(--color-text-tertiary, #aeaeb2);
}

/* ── Date input ── */

.gs-input-date {
    height: 30px;
    padding: 0 var(--space-md);
    border: 1px solid var(--color-border-light, #d2d2d7);
    border-radius: 8px;
    font-size: var(--gs-font-caption);
    color: var(--color-text, #1d1d1f);
    background: var(--color-bg, #fff);
    box-sizing: border-box;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}

.gs-input-date:focus {
    border-color: var(--color-primary, #007aff);
    outline: none;
    box-shadow: 0 0 0 3.5px var(--color-primary-subtle, rgba(0,122,255,0.2));
}

/* ── Range inputs wrapper (fecha desde — hasta) ── */

.gs-range-inputs {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.gs-range-inputs span {
    color: var(--color-text-tertiary, #aeaeb2);
    font-size: var(--gs-font-caption);
}