/* css/main/page-header-stats-and-fab.css — part 3/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      .page-header {
        padding: 16px 16px 12px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .page-title {
        font-family: "Oswald", sans-serif;
        font-size: 20px;
        letter-spacing: 1px;
        color: var(--accent);
      }
      .section {
        padding: 12px 16px;
      }
      .section-label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--muted);
        margin-bottom: 8px;
      }
      .stats-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        padding: 0 16px 0;
      }
      .stat-box {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 6px;
        text-align: center;
        cursor: pointer;
        font-family: inherit;
        color: inherit;
        transition:
          border-color 0.15s,
          background 0.15s;
      }
      .stat-box:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      /* Floating action button — standard mobile pattern.
         Anchored to the bottom-right corner, above the bottom-nav.
         On wide screens (>480px) it anchors to the right edge of the
         body's centred column. */
      .fab {
        position: fixed;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 16px);
        right: max(16px, calc(50vw - 240px + 16px));
        width: 56px;
        height: 56px;
        border-radius: 50%;
        /* ⛔ GOLD, not teal (Santi, 2026-08-20). The "+" is the main action
           of its screen and gold is what that means across the whole
           product — the directory's was already gold and the app's teal,
           i.e. the same button in two colours. `--accent-2` stays
           free for what is truly secondary. */
        background: var(--accent);
        color: var(--accent-fg);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
        z-index: 18;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
      }
      /* On tablet (zoomed body) the position:fixed container becomes
         the body (not the viewport). Since body is already centred by
         max-width:480px+margin auto, the FAB with right:16px anchors
         correctly to the column's right edge without needing the
         50vw calculation that assumed the viewport as CB. */
      body.tl-zoomed .fab {
        right: 16px;
      }
      /* ⛔ THE COUNTER GOES ON THE BUTTON, NOT IN A SENTENCE (Santi, 2026-08-20).
         At the very top it said "You have 60 news items of 60 left this month" and that
         took a whole line of the screen to explain something a
         number explains alone: *"when one sees 1/60 and next time sees 2/60, there is
         nothing to explain"*. And it sits next to the button because it is ITS limit: what
         gets spent on pressing it.
         The gold contrasts with the floating button's teal —they are the two brand
         colours and are measured: 8.48:1 in dark and 5.12:1 in light—. */
      .fab-contador {
        position: fixed;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 7px);
        right: max(16px, calc(50vw - 240px + 16px));
        width: 56px;
        text-align: center;
        z-index: 19;
        pointer-events: none;
      }
      body.tl-zoomed .fab-contador {
        right: 16px;
      }
      .fab-contador span {
        display: inline-block;
        padding: 1px 8px;
        border-radius: 999px;
        background: var(--accent);
        color: var(--accent-fg);
        font-size: 11px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        box-shadow: var(--elev-1);
      }
      /* When little is left, it changes colour AND is still a number: no
         sentence is needed to understand 58/60. */
      .fab-contador.al-limite span {
        background: var(--warn);
        color: var(--accent-fg);
      }
      .fab:active {
        transform: scale(0.94);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
      }
      .fab:focus-visible {
        outline: 3px solid var(--accent-2);
        outline-offset: 3px;
      }
      .fab svg {
        width: 28px;
        height: 28px;
      }
      @media (prefers-reduced-motion: reduce) {
        .fab { transition: none; }
      }

      /* ⛔ A "REPORT" IS NOT A SLAB FROM SIDE TO SIDE. In History it took its own
         bar under the list, with a rule on top, for an action used
         once every many sessions — while the "+", which is the everyday one,
         fitted in a circle (Santi, 2026-08-22). Now it is a SECONDARY
         floating button stacked ABOVE the "+": smaller, on a surface and not in
         solid gold, so the hierarchy reads without explaining it.
         ⚠️ 48 px and not 40: below 44 it fails the touch target (§1).
         ⚠️ The `right` carries 4 px more than `.fab` because it is 8 px
         narrower: without that the two circles do not share a vertical axis. */
      .fab-mini {
        position: fixed;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 16px + 56px + 12px);
        right: max(20px, calc(50vw - 240px + 20px));
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--card);
        color: var(--accent);
        border: 1px solid var(--border);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--elev-2);
        z-index: 18;
        transition: transform 0.15s ease, background 0.15s ease;
      }
      /* Same reason as in `.fab`: with the body zoomed the `position: fixed`
         container becomes the body, already centred. */
      body.tl-zoomed .fab-mini {
        right: 20px;
      }
      .fab-mini:active {
        transform: scale(0.94);
        background: var(--accent-dim);
      }
      .fab-mini:focus-visible {
        outline: 3px solid var(--accent-2);
        outline-offset: 3px;
      }
      /* Nothing to act on (e.g. printing a year with no competitions): it
         stays in its place, so the screen does not jump, but reads as off. */
      .fab-mini:disabled {
        opacity: 0.4;
        cursor: default;
        box-shadow: none;
        transform: none;
        background: var(--card);
      }
      .fab-mini svg {
        width: 22px;
        height: 22px;
      }
      @media (prefers-reduced-motion: reduce) {
        .fab-mini { transition: none; }
      }

      /* ⛔ WHILE SEARCHING BY TEXT THERE IS NOTHING TO ADD OR PRINT. The search
         panel replaces the list and brings its own buttons —"Cancel"
         and "Search"—, and the two floating buttons stayed ON TOP: "Search" and
         "+" overlapped (Santi, 2026-08-22). Besides, neither makes
         sense there: there is no list to print and adding a session mid-search
         is not what anyone wants. They return as soon as there are
         results, which is when they serve a purpose again. */
      .view.tl-buscando .fab,
      .view.tl-buscando .fab-mini {
        display: none;
      }
      .stat-val {
        font-family: "Oswald", sans-serif;
        font-size: 20px;
        color: var(--accent);
        line-height: 1;
      }
      .stat-lbl {
        font-size: 11px;
        color: var(--muted);
        margin-top: 2px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        font-weight: 600;
      }

      /* ⛔ SELECTED STATE of a `.stat-box` that also FILTERS (History).
         In Modalities the four boxes only navigate and none stays "on";
         here one of the four is always active and it must be seen.

         ⛔ And it is NOT SIGNALLED BY COLOUR ALONE (rule §2): the border is doubled
         inside with an `inset` —which does not move the layout, unlike going up
         to `2px`—, the background switches to the gold layer and the label goes from `--muted`
         to `--text`. ⚠️ The label is NOT made gold on purpose: `--accent`
         over `--accent-dim` measures 3.66:1 in light theme and this is 10 px. */
      .stat-box.is-active,
      .stat-box:active {
        border-color: var(--accent);
        background: var(--accent-dim);
        box-shadow: inset 0 0 0 1px var(--accent);
      }
      /* ⛔ And the NUMBER LEAVES THE GOLD on being selected, which is not a decision
         of taste: `--accent` over `--accent-dim` measures **3.66:1** in light theme
         —measured right here, not estimated— and it is 20 px at normal weight, i.e.
         NORMAL text for the rule, which asks 4.5. In `--text` it measures 13.26. The
         selected card is recognised by the doubled border and by the gold
         layer; the number's gold is kept by whoever is NOT selected. */
      .stat-box.is-active .stat-val,
      .stat-box:active .stat-val,
      .stat-box.is-active .stat-lbl,
      .stat-box:active .stat-lbl {
        color: var(--text);
      }

      /* The History row uses REAL labels ("Training",
         "Competition"), not the four short words of Modalities, and that
         forces squeezing the box. Measured in the browser at 375 px, which is his
         phone:

         ⛔ `minmax(0, 1fr)` and not `1fr`. With `1fr` —which inside is
         `minmax(auto, 1fr)`— a column GROWS if its content does not fit, and the
         four cards came out at different widths (62 / 71 / 104 / 88) and the
         row touched the edge. With `minmax(0, …)` they are equal, always.

         ⛔ The label in LOWER CASE and without spacing. It is the only difference from
         `.stat-lbl`, and it is for room, not taste: in caps
         "Entrenamiento" measures 93 px and cannot fit at all. In lower case
         it measures 70, and the worst of the nine languages —"Entrenamendua", Basque— 76.
         The room is 80 px on a 360 phone (the narrowest seen today) and
         84 on a 375 one, so the real margin is 4 px and 8 px. It is little: that is why
         the test has the 13-character cap, and why the side
         padding of these cards is 1 px and not the 6 of Modalities.

         ⚠️ `nowrap` + clipping is the NET, not the plan: today it does not trigger in any
         language. It is kept because splitting the word is worse —the test
         browser does not hyphenate and gave "Entrenami / ento"— and because overflowing
         would break the whole row. Watched by
         `tests/unit-historial-filtros.test.js`, which fails if a future
         translation runs too long. */
      .stats-row-filtro {
        padding: 8px 8px;
        gap: 4px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-bottom: 1px solid var(--border);
      }
      .stats-row-filtro .stat-box {
        padding: 9px 1px;
      }
      .stats-row-filtro .stat-lbl {
        font-size: 10px;
        letter-spacing: 0;
        text-transform: none;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }