/* css/main/list-rows-and-swipe.css — part 4/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      .mod-item {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: 8px;
        position: relative;
        overflow: hidden;
        isolation: isolate;
        user-select: none;
        -webkit-user-select: none;
      }
      .mod-inner {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 14px;
        cursor: pointer;
        transition: transform 0.25s ease;
        background: var(--card);
        position: relative;
        z-index: 1;
        touch-action: pan-y;
      }
      /* Same story as .log-entry:active — opaque, or the delete red
         behind the row shows through. */
      .mod-inner:active {
        background: color-mix(in srgb, var(--card) 90%, var(--accent) 10%);
      }
      .mod-inner:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
      }
      /* Side "+" button to add a quick session.
         Replaces the old inline orange button (it broke the palette).
         Uses the accent (gold), consistent with the other primary actions. */
      .mod-add-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        margin: -12px -14px -12px 0;
        padding: 0 16px;
        min-width: 48px;
        background: var(--accent);
        color: var(--accent-fg);
        border: none;
        border-radius: 0 10px 10px 0;
        cursor: pointer;
        flex-shrink: 0;
        transition: opacity 0.15s;
      }
      .mod-add-btn:active {
        opacity: 0.85;
      }
      .mod-add-btn:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -4px;
      }
      .mod-add-btn svg {
        width: 22px;
        height: 22px;
      }
      .drag-handle {
        cursor: grab;
        color: var(--muted);
        padding: 4px 10px;
        touch-action: none;
        flex-shrink: 0;
        user-select: none;
        -webkit-user-select: none;
        background: none;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .drag-handle svg {
        width: 18px;
        height: 18px;
        display: block;
      }
      .mod-name {
        font-weight: 600;
        font-size: 14px;
      }
      /* ══ COLLABORATORS — the modifiers of this list, 2026-09-10 ═════════════
         ⛔ `.comp-inner` IS USED AS A SELECTOR from `tiradores.js` (it is the
         element that moves when swiping), so it existed in the HTML and in NO
         stylesheet: it was one of the two invented classes this guard
         didn't see. It is defined instead of removed, because the hook is needed.
         ⛔ And what it carried in `style="..."` comes here: an inline style on
         an element that ALREADY has a class is invisible to the scale guard and
         to the tokens guard, and gets copy-pasted without thought. */
      .comp-inner { justify-content: space-between; }
      .comp-inner .mod-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        /* 13 px: one of the sizes of the common scale (`unit-escala-visual`). */
        font-size: 13px;
      }
      .comp-count {
        max-width: 520px;
        margin: 0 auto;
        padding: 0 16px 10px;
        font-size: 11px;
        color: var(--muted);
        letter-spacing: .5px;
      }
      /* ⛔ IT WAS A HARDCODED `#8a8a8a`, measured on 2026-08-25 when launching "Mis clubes":
         **3.45:1 in LIGHT theme** at 12 px, below the 4.5 that UX rule
         §2 requires — and 4.83 in dark, which is exactly the "mid grey" that same
         rule forbids because of halation. A hardcoded hex doesn't change with the theme, so
         the same grey was painted on a black background and on a bone background.
         With `--muted` it is 14.28:1 in dark and 11.99:1 in light.
         ⚠️ 11 places in 10 views use it (weapons, fields, modalities, notes,
         templates, categories…): the change shows in all of them, and for the better.
         ⚠️ AND THREE SIBLINGS REMAIN with the same hex and the same flaw —
         `.log-date`, `.log-note` and `.log-phases`, at 11-12 px—. They are not touched
         here because they belong to another screen and couldn't be checked; they are
         noted in ticket #121. */
      .mod-sub {
        font-size: 12px;
        color: var(--muted);
        margin-top: 3px;
      }
      .mod-arrow {
        color: var(--accent);
        font-size: 20px;
        flex-shrink: 0;
      }
      .mod-actions {
        display: flex;
        gap: 6px;
        align-items: center;
      }
      .icon-btn {
        background: none;
        border: none;
        color: var(--muted);
        font-size: 16px;
        cursor: pointer;
        padding: 6px 8px;
        border-radius: 6px;
        transition: color 0.15s;
        line-height: 1;
      }
      .icon-btn.del:active {
        color: var(--danger);
      }
      .mod-item.dragging {
        opacity: 0.4;
        border: 2px dashed var(--accent);
      }
      .mod-item.drag-over {
        border-top: 2px solid var(--accent);
      }
      .log-entry {
        position: relative;
        background: var(--card);
        border: 1px solid var(--border);
        border-left: 4px solid var(--accent);
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: background 0.15s;
        overflow: hidden;
        touch-action: pan-y;
      }
      .log-entry.is-train {
        border-left: 4px solid #27ae60 !important;
      }
      .log-entry.is-train::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #27ae60;
      }
      .log-entry.is-comp {
        border-left: 4px solid #c0392b !important;
      }
      .log-entry.is-comp::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #c0392b;
      }
      /* ⛔ The pressed state of a ROW must be OPAQUE. Behind each row
         is the red "swipe to delete" background (.swipe-bg), so a
         translucent colour lets it show: when resting the finger to scroll the
         list, the row turned RED (Santi, 2026-08-06). Before it was a fixed dark
         grey, opaque but black in light theme. The mix solves both
         things: it starts from the card colour, so it is opaque and follows
         the theme. */
      .log-entry:active {
        background: color-mix(in srgb, var(--card) 90%, var(--text) 10%);
      }
      .log-entry:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(5px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .log-left {
        flex: 1;
        min-width: 0;
      }
      .log-mod {
        font-weight: 600;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      /* ⛔ The THREE below were hardcoded `#8a8a8a`, siblings of the one
         fixed in `.mod-sub`: 3.45:1 in LIGHT theme —below the 4.5 of UX
         rule §2— and 4.83 in dark, which is the "mid grey" that same
         rule forbids because of halation. A hardcoded hex doesn't change with the theme, so
         the same grey was painted on a black background and on a bone background. And these
         are 11-12 px, so worse still: WCAG's 4.5:1 is calibrated
         for 16 px and never relaxes downward.
         With `--muted`: 14.28:1 in dark and 11.99:1 in light. */
      .log-date {
        font-size: 12px;
        color: var(--muted);
        margin-top: 2px;
      }
      .log-note {
        font-size: 11px;
        color: var(--muted);
        margin-top: 2px;
        font-style: italic;
      }
      .log-scores {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        flex-shrink: 0;
      }
      .log-total {
        font-family: "Oswald", sans-serif;
        font-size: 24px;
        color: var(--accent);
        line-height: 1;
      }
      .log-phases {
        font-size: 11px;
        color: var(--muted);
        margin-top: 2px;
        text-align: right;
      }
      .swipe-row {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        margin-bottom: 8px;
        isolation: isolate;
        animation: fadeIn 0.2s ease;
      }
      .swipe-row .log-entry {
        margin-bottom: 0;
        border-radius: 10px;
        position: relative;
        z-index: 1;
      }
      /* ⛔ WITHOUT `touch-action: pan-y` YOU CAN'T SWIPE TO DELETE, and it gives
         no error: the browser keeps the horizontal gesture for its own
         scrolling and sends `pointercancel` before the
         `pointermove` `preventDefault()` arrives in time. The finger drags
         and the row doesn't move.

         It happened to the COUNTER log (Santi, 2026-08-22): its rows use
         `.ctr-log-item`, a class that DID NOT EXIST in this sheet —its whole look
         was inline styles from the JS— and so it lacked the only
         property that can't be inlined by oversight. The other three swipeable
         lists (History, Purchases and Modalities) did have it,
         each written in its own place.

         ⭐ That's why they go HERE and TOGETHER, with the four selectors passed
         to `attachSwipeDelete()`: the list of sliders and the list of those that can
         be swiped are the same, and separating them is what left one out.
         Guarded by `tests/unit-deslizar-borrar.test.js`. */
      .swipe-row .log-entry,
      .swipe-row .mod-inner,
      .swipe-row .ctr-log-item {
        touch-action: pan-y;
      }
      /* The counter log paints its row with inline styles; all it
         needs from the sheet is the gesture and the animated return to its place. */
      .ctr-log-item {
        transition: transform 0.25s ease;
      }
      /* ══ COLLABORATIONS — a LIST, not cards with a huge button ═════════════
         Santi, 2026-09-08. Each row swipes left to stop
         collaborating, with the same gesture and the same background as withdrawing a
         competition: `.swipe-bg` is the SAME class, not a copy. */
      /* ⛔⛔ THIS LIST USES `.mod-item` / `.mod-inner` / `.mod-name`, THE HOUSE
         FAMILY — fixed on 2026-09-10. Until today it introduced its own
         family (`.colab-fila`, `.colab-n`) to do exactly the same as
         Weapons, Shooting fields and Collaborators: a row that swipes.
         ⚠️ AND IT WASN'T COSMETIC. It was seen in windowless Chrome, in both themes:
         `.colab-fila` had no `border`, and in LIGHT THEME `--card` is the same
         white as the modal — so the rows couldn't be told from the background or
         from each other. It was, literally, a block of plain text. `.mod-item` brings
         the border, the 10 radius and the `isolation:isolate` that keeps the gesture's
         red from showing at the corners.
         Only what truly differs remains here: this row stacks two or three
         lines, while Weapons' is a single one. */
      .colab-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        min-height: 56px;
        /* ⛔ AND THE CURSOR GOES BACK TO NORMAL. `.mod-inner` brings
           `cursor:pointer` because in Weapons and Shooting fields the row IS
           pressed to edit. This one isn't: its only action is swiping, which with a mouse
           doesn't even exist. Inheriting the hand without the action promises a click
           that does nothing — review catches it, not the browser. */
        cursor: default;
      }
      /* The secondary tone does NOT come from `--muted` or `--text-dim`: both equal
         `--text` in this project. A mix does actually lower it. */
      .colab-d { font-size: 12px; line-height: 1.45; color: color-mix(in srgb, var(--text) 62%, transparent); }
      .colab-m { font-size: 12px; margin-top: 4px; color: var(--accent); }
      /* ⛔ 44, NOT 40. `.btn-secondary` comes with 48 by default and here it was lowered so
         the row wouldn't grow — but 40 breaks the house's touch minimum
         ("controls ≥44×44 px in @media (pointer: coarse)", `UX-UI-normas.md`),
         and this is the ONLY control in that row. Trim what can be trimmed without
         crossing the floor. */
      .colab-inner .btn-secondary { margin-top: 8px; min-height: 44px; }
      /* The hint that it can be swiped: ONE line, on top and muted. */
      .colab-pista {
        font-size: 12px;
        line-height: 1.45;
        margin-bottom: 10px;
        color: color-mix(in srgb, var(--text) 62%, transparent);
      }

      .swipe-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        background: #c0392b;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 22px;
        pointer-events: none;
      }
      .swipe-bg svg {
        width: 22px;
        height: 22px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }