/* ── Dashboard filter bar (GPS Chart Reference §6 · adapted to cm tokens) ──────
   Standalone multi-select filter bar that sits above the dashboard grids.
   PARTE A: UI + estado en memoria; todavía NO filtra las cards. */

/* Más liviana que la fila de acciones (.gp-dash-bar usa surface + shadow): fondo
   sutil, sin sombra y borde suave, para que se lea como una barra de filtros. */
.gp-fbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;   /* keep the pills row + the status/clear on a SINGLE row (right no longer wraps below) */
  background: var(--cm-bg-soft);
  border: 1px solid var(--cm-border-soft);
  border-radius: var(--cm-r-3);
  padding: 7px 12px;
  margin-bottom: 14px;
  /* Sit above the cards — including a card being dragged (.gp-mv-active is z-index:20)
     — so its filter dropdowns are never covered by, and never sit under, a card. */
  position: relative;
  z-index: 30;
}

.gp-fbar-drops {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;      /* pills stay on ONE row (thin bar); scroll instead of stacking when they overflow */
  overflow-x: auto;
  scrollbar-width: thin;
  flex: 1 1 auto;
  min-width: 0;
}

.gp-fbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}

/* ── Dropdown shell ──────────────────────────────────────────────────────── */
/* inline-flex keeps the drag grip inline & vertically centred with the trigger
   (as a plain block it wrapped ABOVE the label on hover). */
.fb-drop { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }

.fb-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  max-width: 240px;
  padding: 0 9px;
  border-radius: var(--cm-r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--cm-fg-muted);
  font: 500 12px/1 var(--cm-font-sans);
  cursor: pointer;
  transition: border-color var(--cm-dur-1) var(--cm-ease),
              color var(--cm-dur-1) var(--cm-ease),
              background var(--cm-dur-1) var(--cm-ease);
}
.fb-trigger:hover { color: var(--cm-fg); background: var(--cm-surface); border-color: var(--cm-border); }
.fb-trigger > .ti { font-size: 14px; flex-shrink: 0; }
.fb-trigger .fb-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-trigger .fb-caret { font-size: 13px; margin-left: 2px; flex-shrink: 0; opacity: .7; }

/* active state */
.fb-drop.is-active .fb-trigger {
  background: var(--cm-accent-soft);
  color: var(--cm-fg-strong);
  border-color: var(--cm-border-strong);
}
.fb-drop.is-open .fb-trigger { border-color: var(--cm-accent); color: var(--cm-fg-strong); }
.fb-drop.is-open .fb-caret { transform: rotate(180deg); }

/* count badge inside the trigger */
.fb-count {
  display: none;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--cm-accent);
  color: var(--cm-fg-on-accent);
  font: 600 10.5px/17px var(--cm-font-sans);
  text-align: center;
  flex-shrink: 0;
}
.fb-drop.is-multi .fb-count { display: inline-block; }

/* clear (✕) inside the trigger */
.fb-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  color: var(--cm-fg-muted);
  flex-shrink: 0;
}
.fb-clear:hover { background: var(--cm-bg-sunk); color: var(--cm-fg-strong); }
.fb-clear .ti { font-size: 12px; }
.fb-drop.is-active .fb-clear { display: inline-flex; }

/* ── Panel ───────────────────────────────────────────────────────────────── */
.fb-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--cm-z-popover);
  width: 248px;
  max-width: 86vw;
  display: none;
  flex-direction: column;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-r-3);
  box-shadow: var(--cm-shadow-pop);
  overflow: hidden;
}
.fb-drop.is-open .fb-panel { display: flex; }

.fb-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cm-border-soft);
}
.fb-search .ti { font-size: 14px; color: var(--cm-fg-muted); flex-shrink: 0; }
.fb-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cm-fg);
  font: 500 12.5px/1 var(--cm-font-sans);
}
.fb-search input::placeholder { color: var(--cm-fg-faint); }

.fb-actions-top {
  display: flex;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--cm-border-soft);
}
.fb-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--cm-accent);
  font: 600 11.5px/1 var(--cm-font-sans);
  cursor: pointer;
}
.fb-link:hover { text-decoration: underline; }

/* Position granularity switch (only in the Position panel) */
.fb-gran {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--cm-border-soft);
}
.fb-gran-l { font: 600 10px/1 var(--cm-font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--cm-fg-faint); flex-shrink: 0; }
.fb-gran-seg { display: flex; gap: 3px; margin-left: auto; }
.fb-gran-seg button {
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--cm-border);
  background: var(--cm-bg-soft);
  color: var(--cm-fg-muted);
  font: 500 11px/1 var(--cm-font-sans);
  cursor: pointer;
}
.fb-gran-seg button:hover { color: var(--cm-fg); border-color: var(--cm-border-strong); }
.fb-gran-seg button.is-on { background: var(--cm-accent-soft); border-color: var(--cm-accent); color: var(--cm-fg-strong); }

.fb-list {
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}
.fb-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  cursor: pointer;
  font: 500 12.5px/1.2 var(--cm-font-sans);
  color: var(--cm-fg);
}
.fb-opt:hover { background: var(--cm-bg-soft); }
.fb-opt input { accent-color: var(--cm-accent); width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.fb-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-opt.is-hidden { display: none; }
.fb-empty { padding: 14px 12px; color: var(--cm-fg-muted); font: 500 12px/1.4 var(--cm-font-sans); }
/* Pista discreta: cuántas opciones ocultó la cascada. Vacía → colapsa (sin espacio). */
.fb-hidden-hint { padding: 6px 12px; color: var(--cm-fg-faint); font: 500 11px/1.3 var(--cm-font-sans); border-top: 1px solid var(--cm-border-soft); }
.fb-hidden-hint:empty { display: none; }

.fb-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--cm-border-soft);
}
.fb-apply {
  height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--cm-r-2);
  background: var(--cm-accent);
  color: var(--cm-fg-on-accent);
  font: 600 12px/1 var(--cm-font-sans);
  cursor: pointer;
}
.fb-apply:hover { background: var(--cm-accent-hover); }

/* ── Date panel ──────────────────────────────────────────────────────────── */
.fb-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cm-border-soft);
}
.fb-preset {
  height: 26px;
  padding: 0 10px;
  border-radius: var(--cm-r-pill);
  border: 1px solid var(--cm-border);
  background: var(--cm-bg-soft);
  color: var(--cm-fg-muted);
  font: 500 11.5px/1 var(--cm-font-sans);
  cursor: pointer;
}
.fb-preset:hover { color: var(--cm-fg); border-color: var(--cm-border-strong); }
.fb-preset.is-on {
  background: var(--cm-accent-soft);
  color: var(--cm-fg-strong);
  border-color: var(--cm-border-strong);
}
.fb-date-h {
  padding: 8px 12px 2px;
  font: 600 10px/1 var(--cm-font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cm-fg-faint);
}
.fb-date-h + .fb-range { padding-top: 4px; }
/* Real-dates checkbox list (multi-select), pruned by the cascade like the other filters. */
.fb-date-list { max-height: 216px; }
/* Collapsed "Custom range" advanced escape hatch under the date list. */
.fb-custom { border-top: 1px solid var(--cm-border-soft); }
.fb-custom > summary {
  padding: 8px 12px;
  font: 600 11px/1 var(--cm-font-sans);
  color: var(--cm-fg-muted);
  cursor: pointer;
  list-style: none;
}
.fb-custom > summary::-webkit-details-marker { display: none; }
.fb-custom > summary::before { content: "＋ "; color: var(--cm-fg-faint); }
.fb-custom[open] > summary::before { content: "－ "; }
.fb-range { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.fb-range label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: 600 11.5px/1 var(--cm-font-sans);
  color: var(--cm-fg-muted);
}
.fb-range input {
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-r-2);
  background: var(--cm-bg-soft);
  color: var(--cm-fg);
  font: 500 12px/1 var(--cm-font-sans);
}

/* ── Right side: global counter + clear all ──────────────────────────────── */
.fb-global {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--cm-r-pill);
  background: var(--cm-bg-sunk);
  color: var(--cm-fg-muted);
  font: 600 11.5px/1 var(--cm-font-sans);
  white-space: nowrap;
}
.fb-global.is-on { background: var(--cm-accent-soft); color: var(--cm-fg-strong); }
.fb-global .ti { font-size: 13px; }

.fb-clear-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--cm-r-pill);
  border: 1px solid var(--cm-border);
  background: transparent;
  color: var(--cm-fg-muted);
  font: 500 11.5px/1 var(--cm-font-sans);
  cursor: pointer;
}
.fb-clear-all:hover:not(:disabled) { color: var(--cm-fg-strong); border-color: var(--cm-border-strong); }
.fb-clear-all:disabled { opacity: .4; cursor: default; }
.fb-clear-all .ti { font-size: 13px; }

/* ── Configurable filters: remove (✕ on hover) + Add filter ──────────────── */
.fb-drop.fb-hidden { display: none; }
.fb-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  color: var(--cm-fg-muted);
  cursor: pointer;
  font-size: 10px;
  z-index: 5;
}
.fb-drop:hover .fb-remove { display: flex; }
.fb-remove:hover { color: var(--cm-fg-strong); border-color: var(--cm-border-strong); }
.fb-remove .ti { font-size: 11px; }

.fb-addwrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.fb-addfilter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px dashed var(--cm-border);
  border-radius: 8px;
  background: transparent;
  color: var(--cm-fg-muted);
  cursor: pointer;
  font: 500 12px/1 var(--cm-font-sans);
}
.fb-addfilter:hover { color: var(--cm-fg); border-color: var(--cm-border-strong); background: var(--cm-bg-soft); }
.fb-addfilter > .ti { font-size: 14px; }

.fb-addmenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--cm-z-popover);
  min-width: 180px;
  max-width: 86vw;
  display: none;
  flex-direction: column;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-r-3);
  box-shadow: var(--cm-shadow-pop);
  overflow: hidden;
  padding: 4px 0;
}
.fb-addmenu.is-open { display: flex; }
.fb-additem {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: 500 12.5px/1.2 var(--cm-font-sans);
  color: var(--cm-fg);
  text-align: left;
}
.fb-additem:hover { background: var(--cm-bg-soft); }
.fb-additem .ti { font-size: 14px; color: var(--cm-fg-muted); flex-shrink: 0; }
.fb-addempty { padding: 9px 12px; font: 500 11.5px/1.3 var(--cm-font-sans); color: var(--cm-fg-faint); }

/* ── Drag-to-reorder (grip handle) ───────────────────────────────────────── */
.fb-grip { display: none; align-items: center; cursor: grab; color: var(--cm-fg-muted); padding: 0 2px; }
.fb-drop:hover .fb-grip { display: inline-flex; }
.fb-grip:active { cursor: grabbing; }
.fb-grip .ti { font-size: 14px; }
.fb-drop.fb-dragging { opacity: .5; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .gp-fbar { flex-wrap: wrap; }   /* narrow screens: allow the status/clear to drop to its own row again */
  .gp-fbar-right { margin-left: 0; flex-basis: 100%; justify-content: space-between; }
  .fb-trigger { max-width: 100%; }
}