/**
 * GlobalCSS — Selects
 * Select personalizado con flecha SVG, hover, focus.
 * Ref: design-style-guide.md §6 Inputs
 */

/* ── Select base ── */

.gs-select {
    height: 30px;
    padding: 0 26px 0 var(--space-md);
    border: 1px solid var(--color-border-light, #d2d2d7);
    border-radius: 8px;
    font-size: var(--gs-font-caption);
    font-weight: 500;
    color: var(--color-text, #1d1d1f);
    background-color: var(--color-bg, #fff);
    cursor: pointer;
    box-sizing: border-box;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5.75 4 4.25 7.5.75' stroke='%23999' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease,
                width 0.2s ease;
    max-width: 280px;
}

.gs-select:hover {
    border-color: var(--color-border, #c7c7cc);
}

.gs-select: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));
}

/* ── Filter selects wrapper ── */

.gs-filter-selects {
    display: flex;
    gap: var(--space-sm);
    margin-left: auto;
}