/* css/main/linked-shooters-and-activity-log.css — part 11/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      /* ══ LINKED SHOOTERS (2026-08-14) ══ */
      .vin-sum {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
      }
      .vin-kpi {
        flex: 1 1 0;
        min-width: 0;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 12px 8px;
        text-align: center;
      }
      .vin-kpi-n {
        display: block;
        font-family: "Oswald", sans-serif;
        font-size: 24px;
        color: var(--text);
        line-height: 1.1;
      }
      .vin-kpi-l {
        display: block;
        font-size: 11px;
        color: var(--muted);
        margin-top: 4px;
        line-height: 1.3;
      }
      /* How many each channel reaches. The bar is DECORATIVE: the figure goes next to it
         in text, because a bar alone is not read by a screen reader nor
         told apart by whoever cannot judge length well. */
      .vin-chan {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
      }
      .vin-chan-n {
        flex: 0 0 40%;
        font-size: 13px;
        color: var(--text);
      }
      .vin-chan-bar {
        flex: 1 1 auto;
        height: 6px;
        border-radius: 6px;
        background: var(--surface);
        overflow: hidden;
      }
      .vin-chan-bar > span {
        display: block;
        height: 100%;
        background: var(--accent);
      }
      .vin-chan-v {
        flex: 0 0 auto;
        min-width: 2.5em;
        text-align: right;
        font-size: 13px;
        color: var(--muted);
      }
      .vin-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        text-align: left;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 8px;
        min-height: 44px;
        cursor: pointer;
      }
      .vin-row-ban {
        cursor: default;
      }
      .vin-row:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .vin-mat {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 13px;
        color: var(--text);
        word-break: break-word;
      }
      .vin-g {
        flex: 0 0 auto;
        font-size: 11px;
        color: var(--muted);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 2px 8px;
      }
      .vin-unban {
        flex: 0 0 auto;
      }
      /* ══ ORGANISATION ACTIVITY LOG (2026-08-16) ══
         ⛔ Theme variables only, never hex: a hand-written colour only
         breaks in one of the two themes and cannot be seen by reading the code. */
      .reg-filtros {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-end;
        margin-bottom: 10px;
      }
      .reg-f-l {
        display: block;
        font-size: 11px;
        color: var(--muted);
        margin-bottom: 2px;
      }
      .reg-f-tipo {
        flex: 1 1 220px;
        min-width: 0;
      }
      .reg-fechas {
        display: flex;
        gap: 8px;
        flex: 1 1 240px;
        min-width: 0;
      }
      .reg-f-col {
        flex: 1 1 0;
        min-width: 0;
      }
      /* ⛔ 16 px FIXED: below that iOS zooms the page in when the control is focused
         and never gives it back ([[reference_ios_zoom_16px_controles]]). */
      .reg-sel {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
        margin: 0;
      }
      /* ⛔ The day header does NOT go in gold, even though the rest of the house's labels
         do. Measured in the browser: `var(--accent)` on the light background
         gives 4.33:1 and the minimum is 4.5 — and here the text is 12 px, i.e. the
         worst case. It is the debt already noted for the whole app; what cannot
         be done is add a new case to it. It is distinguished by the typography
         (Oswald, small caps, spacing), not by colour. */
      /* ══ ACTIVITY LOG — TABLE, NOT CARDS ═══════════════════════════
         Santi, 2026-08-20: "what I want to see is a table". Each event was
         a `.card` with three stacked blocks and a club day took several
         screens of scrolling.

         ⭐ The grid lives HERE, in the container, and the cells are direct
         children: this way the time and the who stay aligned from one row to the next.
         A grid per row would make each one measure itself.

         ⛔ And IT IS TWO COLUMNS ALWAYS, NOT THREE ON A WIDE SCREEN (Santi,
         2026-08-22). There was a breakpoint at 560 px: below it, the actor
         fell BELOW what had happened; above it, it went to a third
         column on the right. He saw it on the PC, shrank the window, and with the
         narrow layout said *"this is how I would like to see it… even if it is on
         a tablet, don't put it in two columns for me"*.

         ⭐ And he is right at heart: who did something is not a PARALLEL DATUM to
         what they did —it is not compared row to row, it is not sorted by it—, it is the
         signature of that line. A column of its own gives it a weight it does not have and
         eats the width of the only thing that is really read. With a single content
         column, the sentence has the whole screen on the tablet, which
         is where it used to be squeezed.

         ⛔ The third column was `minmax(0, 30%)` precisely because with `auto`
         it ate half the screen. That workaround is no longer needed: it went away
         with the column. */
      .reg-tabla {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: 12px;
      }
      .reg-c {
        padding: 8px 0;
        border-bottom: 1px solid var(--border);
        font-size: 13px;
        line-height: 1.45;
        min-width: 0;
      }
      .reg-c-hora {
        color: var(--text-dim);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      .reg-c-que { color: var(--text); }
      /* The detail does not take a line of its own with its gap: it goes below and more
         dimmed, inside the same cell. */
      .reg-c-que .reg-det {
        display: block;
        margin-top: 2px;
      }
      /* ⛔ THE LINE'S SIGNATURE: below what happened, not next to it.
         The time spans both rows so that the line below stays ONE
         single line, and that is why `.reg-c-que` gives up its border: if it kept it
         there would be two lines with a gap.

         ⛔ And IT CARRIES ITS OWN SEPARATOR, WHICH CANNOT BE THE SAME. Santi asked for
         *"a kind of small separator that is not the same as the one separating one
         element from the other"*, and the reason is reading: if the line separating
         two events and the one separating the event from its signature were the same, each
         entry would look like two. Continuous between entries, DOTTED inside.

         ⛔ And it is INDENTED and smaller. Both traits say the same —"this
         hangs from what is above"— without needing a label. Centring it, the other
         option he considered, would leave the signature floating in the middle of a
         left-aligned text column: it would look like a table footer and
         not the authorship of that line. */
      .reg-c-que {
        border-bottom: none;
        padding-bottom: 0;
      }
      .reg-c-hora { grid-row: span 2; }
      .reg-c-quien {
        text-align: left;
        padding-top: 4px;
        padding-left: 12px;
        margin-top: 4px;
        border-top: 1px dashed var(--border);
        font-size: 11px;
      }
      /* Job title and name on the same line, separated by a middle dot. They were
         stuck together —"Director de CompeticionesAndoni Estévez"— because they were two
         inline elements with nothing between them. */
      .reg-c-quien .reg-quien-no,
      .reg-c-quien .reg-priv {
        display: inline;
        white-space: normal;
      }
      .reg-c-quien .reg-priv::before { content: " · "; }
      .reg-dia {
        grid-column: 1 / -1;
        border-bottom: none;
        font-family: "Oswald", sans-serif;
        font-size: 12px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text);
        margin: 16px 0 0;
        padding-bottom: 2px;
      }
      .reg-dia:first-child { margin-top: 0; }
      .reg-det {
        font-size: 13px;
        color: var(--muted);
        margin-top: 4px;
      }
      .reg-quien-no,
      .reg-priv {
        color: var(--muted);
      }
      /* (`.reg-frase`, `.reg-pie` and `.reg-hora` belonged to the CARDS layout,
         retired on 2026-08-20, and neither a JS nor the HTML named them any more;
         `.reg-quien` and its 44 px touch area went away with the per-person
         filter on 2026-08-22. None of that painted anything: it only suggested
         that the screen had pieces that it does not have.) */

      /* ═══ EXPORT RESULTS (org-exportar.js, 2026-10-04) ═══
         Reuses the activity log's filters above. The tree of data: one block
         per group, and the mandatory rows say «Always» in words, not only
         with a greyed-out checkbox (colour is never the only signal). */
      .exp-n { font-size: 13px; color: var(--text); margin: 4px 0 6px; }
      .exp-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
      .exp-grupo { margin-top: 12px; }
      .exp-grupo:first-of-type { margin-top: 6px; }
      .exp-grupo-t {
        font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
        color: var(--muted); margin-bottom: 4px;
      }
      .exp-obl { cursor: default; }
      .exp-obl input[type="checkbox"]:disabled { opacity: 1; cursor: default; }
      /* The wizard (four steps): where it is, and the competitions list with
         its OWN scroll so fifty of them don't stretch the page. */
      .exp-paso { font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
      .exp-marcar { display: flex; gap: 8px; flex-wrap: wrap; }
      .exp-marcar .btn-secondary { flex: 1 1 140px; min-height: 44px; margin-top: 0; }
      .exp-lista {
        max-height: 55vh; overflow-y: auto; overscroll-behavior: contain;
        border: 1px solid var(--border); border-radius: 10px; padding: 6px;
      }
      .exp-fmt-t { margin-top: 12px; }

      /* ── The wizard's frame (Santi, 2026-10-05: the design looked stuck on).
         Same language as the competition wizard: numbered step segments, the
         step title, a tinted box saying what the step is for, and the body in
         a block. The bar sticks on top (UX-UI-normas §c), 40 px, where you are
         on the left and the actions on the right. */
      .exp-barra { justify-content: flex-end; padding: 8px 0; }
      .exp-barra .exp-paso {
        margin: 0 auto 0 0; white-space: nowrap; font-family: 'Oswald', sans-serif; font-size: 12px;
        letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
      }
      .exp-btn {
        width: auto; min-height: 40px; margin-top: 0; padding: 8px 14px;
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      }
      .exp-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
      @media (pointer: coarse) { .exp-btn { min-height: 44px; } }
      .exp-progreso { display: flex; gap: 4px; margin: 2px 0 14px; }
      .exp-progreso .wiz-progress-btn { min-height: 28px; }
      .exp-progreso .wiz-progress-btn:disabled { cursor: default; }
      .exp-progreso .wiz-progress-btn.is-done:focus-visible,
      .exp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .exp-titulo { margin-bottom: 10px; }
      .exp-ayuda {
        display: flex; gap: 10px; align-items: flex-start;
        background: var(--accent-dim);
        border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
        border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
        font-size: 14px; line-height: 1.5; color: var(--text);
      }
      .exp-ayuda > svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent); margin-top: 1px; }
      .exp-ayuda p { margin: 0; }
      .exp-ayuda p + p { margin-top: 6px; color: var(--muted); font-size: 13px; }
      .exp-cuerpo { padding: 14px; }
      #exp-err:empty { display: none; }
      /* «Tick all / untick all»: secondary tools, one line, not two slabs. */
      .exp-cuerpo .exp-marcar .btn-secondary {
        flex: 1 1 0; min-height: 40px; padding: 8px 10px; white-space: nowrap;
        font-size: 12px; letter-spacing: .5px;
      }
      @media (pointer: coarse) { .exp-cuerpo .exp-marcar .btn-secondary { min-height: 44px; } }
      .exp-cuerpo .exp-n { margin: 10px 2px 8px; color: var(--muted); }
      .exp-cuerpo .reg-filtros { margin: 0; }
      /* Step 4: the summary, and the format as three cards to pick from. */
      .exp-resumen {
        font-size: 16px; line-height: 1.5; color: var(--text);
        padding: 2px 2px 12px; border-bottom: 1px solid var(--border);
      }
      .exp-fmts { display: grid; gap: 8px; }
      .exp-fmt-card {
        display: flex; align-items: center; gap: 12px; cursor: pointer;
        padding: 12px; min-height: 56px; border-radius: 10px;
        border: 1px solid var(--border); background: var(--surface);
        transition: border-color .15s, background .15s;
      }
      .exp-fmt-card:hover { border-color: var(--accent); }
      .exp-fmt-card:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
      .exp-fmt-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
      .exp-fmt-ico { width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center;
        color: var(--accent); background: var(--surface-soft); flex: 0 0 auto; }
      .exp-fmt-ico svg { width: 22px; height: 22px; }
      .exp-fmt-txt { flex: 1; min-width: 0; }
      .exp-fmt-nom { font-weight: 600; color: var(--text); }
      @media (prefers-reduced-motion: reduce) { .exp-fmt-card { transition: none; } }
      /* The format radios take the app's accent, like the checkboxes. */
      #expHost input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }