/* FilterControls — reusable filter-bar controls (segmented chips + styled select).
 * Shared by the standardized world (views/manage/world.php) and the Essays / Matriz de Pulso
 * subtab, and meant for gradual adoption across Umáximo. Visual contract; behavior lives in
 * assets/js/components/FilterControls.js. Docs: docs/frontend/FILTER-CONTROLS.md.
 *
 * Self-contained: the design tokens it needs are declared on the component roots
 * (.fw-seg / .fw-selwrap), so it renders correctly on any page without depending on a
 * page-level :root. Class names keep the legacy `fw-` prefix (stable; world.php/world.js
 * already use them) — treat them as this component's API.
 *
 *   Segmented control (single-select chips):
 *     <div class="fw-seg" data-fc-seg>
 *       <button class="fw-chip active" data-value="2" aria-pressed="true">SIMCE</button>
 *       <button class="fw-chip"        data-value="5" aria-pressed="false">DIA</button>
 *     </div>
 *
 *   Select field (with chevron + optional clear button):
 *     <div class="fw-selwrap">
 *       <select aria-label="...">...</select>
 *       <button class="fw-select-clear" hidden aria-label="Limpiar">…✕…</button>   (optional)
 *       <svg class="fw-select-ico" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
 *     </div>
 */

.fw-seg, .fw-selwrap {
    --tq: #1CC7A6; --tq-700: #12A98C; --tq-800: #0C7864;
    --ink: #2C3346; --slate: #576279; --slate-2: #7E879A; --slate-3: #A6AEBE;
    --line: #E4E8EF; --line-2: #EEF1F6; --bg: #F5F7FA;
    --r-pill: 999px;
    --sh-sm: 0 2px 8px rgba(40, 52, 76, .06), 0 1px 2px rgba(40, 52, 76, .04);
}

/* Segmented control: chips live in one grouped track (saves space vs separate pills);
   the active segment is a teal fill. */
.fw-seg { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: var(--r-pill); background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); }
.fw-chip {
    display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-weight: 700; font-size: 13.5px;
    color: var(--slate); padding: 7px 14px; border: none; border-radius: var(--r-pill);
    background: transparent; cursor: pointer; transition: .16s ease; white-space: nowrap;
}
.fw-chip:hover { color: var(--ink); }
.fw-chip.active { background: var(--tq); color: #fff; box-shadow: var(--sh-sm); }

/* Select field */
.fw-selwrap { position: relative; }
.fw-selwrap select {
    appearance: none; -webkit-appearance: none; font-family: inherit; font-weight: 700; font-size: 13.5px;
    color: var(--slate); background: #fff; border: 1.5px solid var(--line);
    padding: 9px 34px 9px 14px; border-radius: var(--r-pill); cursor: pointer; outline: none; transition: .16s;
}
.fw-selwrap select:hover { border-color: var(--slate-3); }
.fw-select-ico { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; stroke: var(--slate-2); pointer-events: none; }
.fw-selwrap.is-active select { padding-right: 64px; border-color: var(--tq); background: #fff; color: var(--ink); box-shadow: 0 0 0 3px rgba(28, 199, 166, .12); }
.fw-selwrap.is-active .fw-select-ico { stroke: var(--tq-800); }
.fw-select-clear {
    position: absolute; right: 25px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent; color: var(--slate-3);
    cursor: pointer; transition: .16s; z-index: 2;
}
/* Self-contained: author `display:flex` would otherwise beat the UA `[hidden]` rule, so the
   component honors `hidden` itself (no page-level [hidden] protection required). */
.fw-select-clear[hidden] { display: none !important; }
.fw-select-clear svg { width: 14px; height: 14px; stroke: currentColor; pointer-events: none; }
.fw-select-clear:hover { background: var(--line-2); color: var(--ink); }
.fw-select-clear:focus-visible { outline: 2px solid var(--tq); outline-offset: 2px; }

@media (max-width: 880px) {
    .fw-selwrap.is-active select { padding-right: 72px; }
}