/* css/main/filter-bar-badges-and-chips.css — part 5/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      .filter-bar {
        padding: 10px 16px 0;
        display: flex;
        gap: 6px;
        overflow-x: auto;
      }
      body:not(.tl-zoomed) .filter-bar {
        scrollbar-width: none;
      }
      body:not(.tl-zoomed) .filter-bar::-webkit-scrollbar {
        display: none;
      }
      /* ══ BADGE — IT IS NOT A CHIP ═════════════════════════════════════
         ⛔ `.chip` is a TAPPABLE FILTER: 40 px tall, button padding and
         `cursor:pointer`, because it is tapped. Using it as a static label —«waiting
         48 hours», «administrator», «deactivated»— turned every
         row into a row of fat buttons that ate the person's name
         and competed with the real buttons. Santi saw it on
         2026-08-20 in a screenshot: the gold badge was the most eye-catching thing
         on the card, above who it belonged to.

         A badge isn't tapped, so it needs no touch target or
         relief: it is a small word stuck to the name.
         ⛔ And NEVER color alone: each one carries its text, always. */
      /* ══ THE BADGE — and now it DOES carry background and border ═══════════
         ⛔ The class carried neither, so each screen invented its own
         and there were as many variants as places (Santi, 2026-08-20). Now it
         comes complete: surface, border, Oswald and UPPERCASE.
         ⛔ And it is only applied to what CHANGES A DECISION —waiting, pending
         expulsion, deactivated—; with text, never color alone (§2).
         ⚠️ For «administrator» and other PERMANENT data there remains
         `.badge-quieto`, which is an earlier decision of his and is kept: what
         is always there shouldn't weigh the same as the name it accompanies. */
      .badge {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        padding: 3px 9px;
        border-radius: 999px;
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--muted);
        font-family: "Oswald", sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        line-height: 1.5;
        white-space: nowrap;
      }
      /* ⛔ THE PERMANENT BADGE IS QUIET. No background and no border: what
         carries a surface is what INTERRUPTS (a hold, an expulsion,
         a deactivation); «administrator» is a datum that is always there and shouldn't weigh
         the same as the name of the person it describes. */
      /* ⚠️ Overrides the background and border that `.badge` has carried since 2026-08-20. Without
         these two lines the «quiet» badge came out as a pill with a
         border and `padding: 0`, with the word stuck to the stroke — exactly the
         opposite of what the paragraph above says. */
      .badge-quieto {
        padding: 0;
        background: transparent;
        border: none;
        color: var(--accent);
        /* ⚠️ 11 px and not 10: it measures 5.12:1 in light theme —above 4.5, but
           only just—, and WCAG's 4.5 is calibrated for 16 px. At 10 px that
           reads badly even though the number complies. It is the same rule already written
           above, in the tokens: «secondary text has to be legible at
           its size». */
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      /* ══ THE CHIP — pill, and with its discipline's color ═══════════════════
         ⛔ A single family (Santi, 2026-08-20). There were TWO doing the same
         job: `.chip` (radius 14, Inter, all gold when active) in History,
         and `.not-chip` (radius 999, with the discipline's color) in the News
         Channel. The same filter being painted differently on two screens is
         exactly what makes the app look made by different hands.
         ⚠️ AND THAT DAY ONLY HALF WAS DONE: `.chip` received the per-discipline
         colors and `.not-chip` stayed alive, with its `min-height: 44px` in the
         box sending the five channels onto two lines. It was removed entirely on
         2026-08-21, when Santi saw it in the publish dialog. Writing that
         one family remains doesn't leave it as one: the other has to be deleted.
         ⭐ The 3 px accent bar is seen ALSO WHEN OFF: the color↔discipline association
         is learned before touching anything, not just on selection. */
      .chip {
        flex-shrink: 0;
        padding: 6px 13px;
        min-height: 38px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--muted);
        font-family: "Oswald", sans-serif;
        font-size: 13px;
        letter-spacing: 0.4px;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
      }
      /* On touch the sensitive area reaches 44 px without the pill growing:
         the 44 belong to the FINGER, not to the painted box (norms §8-ter e). */
      @media (pointer: coarse) {
        .chip { position: relative; }
        .chip::after {
          content: "";
          position: absolute;
          left: 0; right: 0;
          top: 50%;
          height: 44px;
          transform: translateY(-50%);
        }
      }
      .chip-aire  { border-left: 3px solid var(--cv-type-aire-bd); }
      .chip-fuego { border-left: 3px solid var(--cv-type-fuego-bd); }
      .chip-aahh  { border-left: 3px solid var(--cv-type-aahh-bd); }
      .chip-plato { border-left: 3px solid var(--cv-type-plato-bd); }
      .chip.chip-aire.active {
        background: var(--cv-type-aire-bg);
        color: var(--cv-type-aire-fg);
        border-color: var(--cv-type-aire-bd);
      }
      .chip.chip-fuego.active {
        background: var(--cv-type-fuego-bg);
        color: var(--cv-type-fuego-fg);
        border-color: var(--cv-type-fuego-bd);
      }
      .chip.chip-aahh.active {
        background: var(--cv-type-aahh-bg);
        color: var(--cv-type-aahh-fg);
        border-color: var(--cv-type-aahh-bd);
      }
      .chip.chip-plato.active {
        background: var(--cv-type-plato-bg);
        color: var(--cv-type-plato-fg);
        border-color: var(--cv-type-plato-bd);
      }
      .chip:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      /* ⛔ SOLID GOLD, not gold over faint gold. Measured 2026-08-20:
         `--accent` text over `--accent-dim` gave **3.66:1** in light theme, below
         the 4.5 of norm §2 — and at 13 px, where that number already
         falls short. With the solid fill it measures 6.5:1 and it is also exactly what
         the directory's «Todas» chip does. */
      .chip.active {
        border-color: var(--accent);
        color: var(--accent-fg);
        background: var(--accent);
      }
      /* Chips inside a dialog (`appElegirVarios`): on several rows if they don't
         fit, centered, with air before the buttons. */
      .dlg-chips {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin: 4px 0 18px;
      }
      /* Secondary floating button ALONE, without the «+» below (the competition
         history report): it drops to the height where the primary one would go. */
      .fab-mini.fab-solo {
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 16px + 4px);
      }
      /* Same criterion as `.chip.active`: solid fill. The loose hex
         `rgba(39,174,96,.12)` was also a hand-written theme-dependent value, which
         norm §2 forbids. */
      .chip.active-train {
        border-color: var(--success);
        color: var(--accent-fg);
        background: var(--success);
      }
      /* Narrow chip row: the 5 Companions filters fit on a
         single line by reducing side padding and font size. */
      /* Companions chip row: with the UI enlarged (or if in the future
         there are more filters) they don't fit → horizontal scroll. At 1× they fill with
         flex:1 and no bar appears. */
      .chip-row-tight { flex-wrap: nowrap !important; gap: 4px !important; overflow-x: auto; }
      body:not(.tl-zoomed) .chip-row-tight { scrollbar-width: none; }
      body:not(.tl-zoomed) .chip-row-tight::-webkit-scrollbar { display: none; }
      body.tl-zoomed .chip-row-tight { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
      body.tl-zoomed .chip-row-tight::-webkit-scrollbar { display: block !important; height: 6px; background: transparent; }
      body.tl-zoomed .chip-row-tight::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px; min-width: 30px; }
      .chip-row-tight .chip {
        padding: 8px 9px;
        font-size: 12px;
        min-height: 36px;
        flex: 1 1 auto;
        text-align: center;
      }