/* css/main/shooter-competitions.css — part 23/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      /* ═══════════════════════════════════════════════════════════════
         MY COMPETITIONS (phase 4a of the unification, 2026-08-26)
         Shares the card with Search (`.cc-*`): it is the same competition
         seen another way. What is specific here is the status label,
         what the shooter asked for, and the two stamps.
         ═══════════════════════════════════════════════════════════════ */
      .mc-top {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 10px;
        flex-wrap: wrap;
      }
      .mc-badge {
        font-family: "Oswald", sans-serif;
        font-size: 11px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 999px;
      }
      .mc-pre {
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 14%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
      }
      /* ⛔ `var(--success)` and not the `#0a7d34` the directory carried: a fixed
         hex paints the same on a black background as on a white one. */
      .mc-ins {
        color: var(--accent-fg);
        background: var(--success);
        border: 1px solid var(--success);
        font-weight: 700;
      }
      /* «Resultados publicados» is a button: it opens the results (2026-10-05). */
      .mc-badge-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; }
      .mc-badge-btn svg { width: 12px; height: 12px; flex: none; }
      .mc-badge-btn:hover { filter: brightness(1.08); }
      .mc-badge-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      @media (pointer: coarse) {
        .mc-badge-btn { position: relative; }
        .mc-badge-btn::after { content: ""; position: absolute; inset: -8px -4px; }
      }
      .mc-cancel-badge,
      .mc-annul-badge {
        color: var(--danger);
        background: color-mix(in srgb, var(--danger) 12%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
      }
      /* Compact header actions, the same height as the label */
      .mc-hdbtn {
        min-height: 34px;
        padding: 5px 11px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        font-family: "Oswald", sans-serif;
        font-size: 11px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        cursor: pointer;
      }
      .mc-hdbtn:hover { border-color: var(--accent); }
      .mc-hdbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      /* ⛔ Cancel goes SEPARATED and last, and with the red outline: on
         screen the destructive is not painted solid — it calls attention to exactly what
         must not be pressed (house rule, 2026-08-20). */
      .mc-hd-cancel { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
      .mc-hd-cancel:hover { border-color: var(--danger); }
      @media (pointer: coarse) { .mc-hdbtn { min-height: 44px; padding: 8px 13px; } }

      /* ⛔ "Requested" up front: this line is what the shooter ASKED for, not
         what they got — the draw may give them another range, another day or another
         relay. Without the label, the two read as if they were the same and
         contradict each other (Santi, 2026-07-31). */
      .mc-prefs { margin-top: 10px; font-size: 13px; color: var(--text); line-height: 1.5; }
      .mc-prefs-lb {
        font-family: "Oswald", sans-serif;
        font-size: 11px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--muted);
        margin-right: 6px;
      }
      .mc-mods { margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.5; }
      .mc-note {
        margin-top: 10px;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface2);
        font-size: 13px;
        line-height: 1.45;
        color: var(--text);
      }
      .mc-note-warn {
        border-color: color-mix(in srgb, var(--danger) 28%, transparent);
        background: color-mix(in srgb, var(--danger) 8%, var(--surface));
      }
      /* ⛔⭐ THE CROSSED STAMP WAS WITHDRAWN ON 2026-09-12 — Santi, on seeing it: *"I
         don't like the stamp at all… I prefer a label on top, a bit bigger,
         one that stands out well"*. He had asked for it himself, and on using it
         he changed his mind.
         ⛔ And it had a defect that was not about taste: the stamp sat at **50 % of the
         card's height**, so on expanding the draw the card grew and
         the stamp ended up **in the middle of something else** — which is what he described
         as *"put the stamp back, but lower"*. A ribbon anchored
         on top does not move whatever happens below.
         ⚠️ The ribbon leaves the card's padding with negative margins: it is
         an edge-to-edge band, not a loose label. The top radius
         is 13 and not 14 —that of `.cc-card`— because it goes INSIDE its 1 px border.
         ⭐ And it is still not the only thing saying it: the notice below tells it in
         words, which is the rule of not entrusting a state to colour alone. */
      /* ⛔⭐⭐ NO `opacity`, and it was removed on 2026-09-12 by MEASUREMENT, not by taste.
         The dimming existed to accompany the crossed stamp. With the ribbon
         inside, that 0.85 composites **the text AND its background** against the page
         background and takes the contrast with it: what is declared measures 4.83:1 in
         dark and 5.17:1 in light, but what is SEEN measured **3.89:1 and 4.18:1** —
         below the rule's 4.5.
         ⛔ It is EXACTLY the same bug that made us withdraw the menu title's
         band this same session, with another cause: there it was a `color-mix`, here
         an inherited `opacity`. And no guard sees it — `unit-contraste-tokens`
         measures token over surface, not the composition with an ancestor.
         ⭐ And it is not needed: the ribbon says "CANCELLED" edge to edge. Also dimming
         the card was reinforcing a signal that is no longer timid. */
      .mc-card-off { position: relative; }
      .cc-cinta {
        margin: -14px -14px 12px;
        padding: 9px 14px;
        /* ⚠️ 14 and not 13: the mock-up's radii are FOUR and `unit-escala-visual`
           watches it. The ribbon sits 1 px inside the card's border,
           so the radius overshoots that pixel — invisible, and preferable
           to inventing a fifth value. */
        border-radius: 14px 14px 0 0;
        font-family: "Oswald", sans-serif;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-align: center;
        color: var(--danger);
        background: color-mix(in srgb, var(--danger) 14%, var(--surface));
        border-bottom: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
      }

      /* ═══════════════════════════════════════════════════════════════
         "WHEN AND WHERE YOU SHOOT" — the draw (phase 4b, 2026-08-26)
         Unfolds inside the card of a competition in which the
         shooter is already REGISTERED and whose range has already been drawn. It is what
         they look at the day before, so the TIME rules.
         ═══════════════════════════════════════════════════════════════ */
      .mc-sorteo-b {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 34px;
        padding: 5px 11px;
        border-radius: 10px;
        border: 1px solid var(--accent);
        background: var(--accent);
        color: var(--accent-fg);
        font-family: "Oswald", sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        cursor: pointer;
      }
      .mc-sorteo-b[aria-expanded="true"] { background: transparent; color: var(--accent); }
      .mc-sorteo-b .mc-sorteo-chev { transition: transform 0.18s ease; }
      .mc-sorteo-b[aria-expanded="true"] .mc-sorteo-chev { transform: rotate(180deg); }
      .mc-sorteo-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      @media (pointer: coarse) { .mc-sorteo-b { min-height: 44px; padding: 8px 13px; } }
      @media (prefers-reduced-motion: reduce) { .mc-sorteo-b .mc-sorteo-chev { transition: none; } }

      .so {
        margin-top: 12px;
        border: 1px solid var(--accent);
        border-radius: 10px;
        overflow: hidden;
        background: var(--bg);
      }
      .so-hd { padding: 10px 13px; background: var(--accent-dim); border-bottom: 1px solid var(--border); }
      .so-hd .t {
        font-family: "Oswald", sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--accent);
      }
      .so-hd .s { font-size: 12px; color: var(--muted); margin-top: 2px; }
      .so-empty { padding: 14px 13px; font-size: 13px; line-height: 1.5; color: var(--muted); }
      /* ⛔ "Show up an hour early" is the notice that prevents
         anyone arriving late to their relay: it goes on top, not at the foot. */
      .so-warn {
        display: flex;
        gap: 9px;
        align-items: flex-start;
        margin: 11px 12px 4px;
        padding: 10px 11px;
        border: 1px solid color-mix(in srgb, var(--warn) 60%, transparent);
        background: color-mix(in srgb, var(--warn) 14%, var(--surface));
        border-radius: 10px;
      }
      .so-warn svg { flex: 0 0 auto; margin-top: 1px; color: var(--text); }
      .so-warn .w { font-size: 13px; line-height: 1.5; color: var(--text); }
      .so-dia { margin-top: 12px; }
      .so-dia-hd {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 0 13px 6px;
        border-bottom: 1px solid var(--border);
      }
      .so-dia-hd .d {
        font-family: "Oswald", sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--accent);
      }
      .so-dia-hd .n { font-size: 11px; color: var(--muted); }
      .so-campo {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 9px 13px 3px;
        font-size: 12px;
        color: var(--muted);
      }
      .so-campo svg { flex: 0 0 auto; }
      .so-campo b { color: var(--text); font-weight: 600; }
      .so-row {
        display: flex;
        gap: 12px;
        padding: 10px 13px;
        border-top: 1px solid var(--border-soft);
        align-items: flex-start;
      }
      .so-row:first-of-type { border-top: 0; }
      /* The TIME rules: it is the datum for which this screen is opened. */
      .so-hora { flex: 0 0 auto; min-width: 58px; text-align: center; }
      .so-hora .hh {
        font-family: "Oswald", sans-serif;
        font-size: 20px;
        font-weight: 700;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        color: var(--text);
      }
      .so-hora .lb {
        display: block;
        font-size: 9px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 3px;
      }
      .so-body { flex: 1 1 auto; min-width: 0; }
      .so-l1 { font-size: 14px; color: var(--text); line-height: 1.35; }
      .so-l2 { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
      .so-puesto {
        display: inline-block;
        margin-left: 8px;
        font-family: "Oswald", sans-serif;
        font-size: 12px;
        letter-spacing: 0.4px;
        color: var(--accent);
      }
      .so-tag {
        display: inline-block;
        margin-left: 6px;
        padding: 1px 7px;
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
        font-size: 10px;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: var(--accent);
      }
      /* ⚠️ The footer is no ornament: it says the stations may be readjusted
         until the start, which is why one must look again the day before. */
      .so-foot {
        padding: 10px 13px;
        border-top: 1px solid var(--border-soft);
        font-size: 12px;
        line-height: 1.45;
        color: var(--muted);
      }

      /* ═══════════════════════════════════════════════════════════════
         TEAMS (phase 4c of the unification, 2026-08-26)
         ⛔ Two systems: the competition's team (one per shooter) and
         the team modalities of historical arms (one per
         modality). They share the teammate selector and little else.
         ═══════════════════════════════════════════════════════════════ */

      /* The formed team, inside the card */
      .mc-team {
        margin-top: 10px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface2);
      }
      .mc-team-h {
        font-family: "Oswald", sans-serif;
        font-size: 11px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 6px;
      }
      .mc-tm-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
      .mc-tm-name { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
      /* ⛔ Undoing affects the WHOLE team, so it goes in the house red and
         with confirmation — never as a discreet cross that is pressed by accident. */
      .mc-tm-x {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
        border-radius: 10px;
        background: transparent;
        color: var(--danger);
        cursor: pointer;
      }
      .mc-tm-x:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
      .mc-tm-x:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
      @media (pointer: coarse) { .mc-tm-x { width: 44px; height: 44px; } }
      .mc-tm-mod { padding: 6px 0; border-top: 1px solid var(--border-soft); }
      .mc-tm-mod:first-of-type { border-top: 0; padding-top: 0; }
      .mc-tm-modn {
        font-family: "Oswald", sans-serif;
        font-size: 13px;
        color: var(--accent);
        margin-bottom: 2px;
      }

      /* Teammate selector */
      .tmp-search { position: relative; margin: 10px 0 12px; }
      .tmp-search-ic {
        position: absolute;
        left: 11px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        color: var(--muted);
        pointer-events: none;
      }
      .tmp-search-ic svg { width: 18px; height: 18px; }
      .tmp-input { padding-left: 38px; }
      .tmp-list { display: flex; flex-direction: column; gap: 8px; }
      .tmp-row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 48px;
        padding: 8px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        color: var(--text);
        text-align: left;
        font-size: 14px;
        cursor: pointer;
      }
      .tmp-row:hover { border-color: var(--accent); }
      .tmp-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      /* ⛔ Chosen is marked with the CHECK and with the border, not just colour. */
      .tmp-row.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
      .tmp-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
      .tmp-check { flex: 0 0 auto; display: inline-flex; opacity: 0; color: var(--accent); }
      .tmp-check svg { width: 20px; height: 20px; }
      .tmp-row.sel .tmp-check { opacity: 1; }
      .tmp-empty { padding: 18px 4px; text-align: center; font-size: 13px; color: var(--muted); }

      /* Team modalities (historical arms) */
      .at-row {
        padding: 12px 0;
        border-top: 1px solid var(--border-soft);
      }
      .at-row:first-child { border-top: 0; padding-top: 0; }
      /* ⚠️ A modality to which what you shoot does NOT give access shows dimmed, but
         it shows: and right below it the reason is written. */
      .at-row-off { opacity: 0.72; }
      .at-name {
        font-family: "Oswald", sans-serif;
        font-size: 16px;
        color: var(--text);
        line-height: 1.25;
        overflow-wrap: anywhere;
      }
      .at-tag {
        display: inline-block;
        margin-left: 8px;
        padding: 1px 8px;
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
        font-family: "Oswald", sans-serif;
        font-size: 10px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--accent);
      }
      .at-tag-warn {
        border-color: color-mix(in srgb, var(--danger) 45%, transparent);
        color: var(--danger);
      }
      .at-reason { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }
      .at-team {
        margin-top: 8px;
        padding: 8px 10px;
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        background: var(--surface2);
      }
      .at-mem { font-size: 13px; color: var(--text); padding: 2px 0; overflow-wrap: anywhere; }
      .at-warn {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.45;
        color: var(--text);
        background: color-mix(in srgb, var(--danger) 8%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
        border-radius: 10px;
        padding: 8px 10px;
      }
      .at-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
      .at-btn {
        min-height: 40px;
        padding: 8px 14px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        font-family: "Oswald", sans-serif;
        font-size: 13px;
        letter-spacing: 0.4px;
        cursor: pointer;
      }
      .at-btn:hover { border-color: var(--accent); }
      .at-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .at-btn-del { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
      @media (pointer: coarse) { .at-btn { min-height: 44px; } }

      /* ═══════════════════════════════════════════════════════════════
         SHOOTING RANGES MAP (phase 5 of the unification, 2026-08-26)
         ═══════════════════════════════════════════════════════════════ */
      .mapa-radios { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
      .mapa-radio {
        min-height: 40px;
        padding: 6px 14px;
        border-radius: 999px;
        cursor: pointer;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        font-family: "Oswald", sans-serif;
        font-size: 13px;
        letter-spacing: 0.3px;
      }
      .mapa-radio.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
      .mapa-radio:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      @media (pointer: coarse) { .mapa-radio { min-height: 44px; } }
      .mapa-box { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
      /* ⛔ The map lives in its OWN stacking context. Leaflet's internal
         controls go at z-index 1000 and its layers at 400: without isolating them,
         they covered the app's side menu. With `isolation` they stay contained. */
      #dirMapaCanvas {
        width: 100%;
        height: min(60vh, 520px);
        background: var(--surface2);
        position: relative;
        z-index: 0;
        isolation: isolate;
      }
      .mapa-pin { background: none; border: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); }
      .mapa-pin svg { display: block; }
      .mapa-hint { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.45; }

      /* ⚠️ INSIDE THE LEAFLET POPUP THE COLOURS ARE FIXED, and that is correct: that
         bubble is painted by the library with a WHITE background in both themes, so a
         text token (which in dark is almost white) would become illegible. It is
         the exception to the house rule, not an oversight — do not replace with
         `var(--text)` or `var(--muted)`. */
      .mapa-pop { min-width: 190px; font-size: 14px; color: #222; }
      .mapa-pop b { display: block; margin-bottom: 4px; }
      .mapa-pop-n {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #0a7d34;
        margin-bottom: 6px;
      }
      .mapa-pop-none,
      .mapa-pop-load,
      .mapa-pop-err { font-size: 13px; color: #666; margin-bottom: 6px; }
      .mapa-pop-err { color: #c0392b; }
      .mapa-pop-comp {
        display: block;
        width: 100%;
        text-align: left;
        margin-bottom: 6px;
        padding: 7px 9px;
        border: 1px solid #d8d2c2;
        border-radius: 6px;
        background: #fff;
        color: #222;
        cursor: pointer;
      }
      .mapa-pop-comp .mpc-n { display: block; font-weight: 600; }
      .mapa-pop-comp .mpc-d { display: block; font-size: 12px; color: #666; }
      .mapa-pop-btn {
        width: 100%;
        min-height: 36px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        background: var(--accent);
        color: var(--accent-fg);
        font-family: "Oswald", sans-serif;
        font-size: 12px;
        letter-spacing: 0.4px;
        text-transform: uppercase;
      }
      /* "Report" on the pin's card: discreet on purpose —it is there
         for whoever needs it, not to invite—, but with its full touch
         target. The Leaflet bubble is white in both themes, hence the fixed
         grey of `.mapa-pop` and not a theme variable. */
      .mapa-pop-den {
        display: block;
        width: 100%;
        margin-top: 8px;
        min-height: 36px;
        border: 0;
        background: transparent;
        color: #444;
        font-size: 14px;
        text-decoration: underline;
        cursor: pointer;
      }
      /* The number of ranges at the same spot, over the pin.
         Fixed colours like the pin itself (`PIN_SVG`): it goes over the map,
         which is the same in both themes. */
      .mapa-pin { position: relative; }
      .mapa-pin-n {
        position: absolute;
        top: -6px;
        right: -8px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 999px;
        background: #b3271a;
        color: #fff;
        border: 2px solid #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
      }
      .mapa-pop-den:focus-visible { outline: 2px solid #555; outline-offset: 2px; }
      @media (pointer: coarse) {
        .mapa-pop-btn { min-height: 44px; }
        .mapa-pop-comp { min-height: 44px; }
        .mapa-pop-den { min-height: 44px; }
      }

      /* ═══════════════════════════════════════════════════════════════
         REGISTRATION LOG (phase 6 of the unification, 2026-08-26)
         Two steps: the competitions with activity, and on entering one,
         its timeline.
         ═══════════════════════════════════════════════════════════════ */
      .h-complist { margin: 6px 2px 0; }
      .h-comprow {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 12px 14px;
        margin-bottom: 8px;
        cursor: pointer;
        min-height: 44px;
      }
      .h-comprow:hover { border-color: var(--accent); }
      .h-comprow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .h-comprow-main { flex: 1 1 auto; min-width: 0; }
      .h-comprow-name {
        font-family: "Oswald", sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
        word-break: break-word;
      }
      .h-comprow-org { font-size: 12px; color: var(--muted); margin-top: 2px; word-break: break-word; }
      .h-comprow-side { flex: 0 0 auto; text-align: right; }
      .h-comprow-when { font-size: 12px; color: var(--muted); }
      .h-comprow-count { font-size: 12px; color: var(--accent); margin-top: 3px; white-space: nowrap; }
      .h-comprow-chev { flex: 0 0 auto; color: var(--muted); font-size: 20px; line-height: 1; }

      .h-back { margin-bottom: 12px; }
      .h-detail-title {
        font-family: "Oswald", sans-serif;
        font-size: 18px;
        color: var(--text);
        word-break: break-word;
      }
      .h-detail-org { font-size: 13px; color: var(--muted); margin-top: 2px; word-break: break-word; }

      /* The timeline */
      .h-timeline { position: relative; margin: 14px 2px 0; padding-left: 22px; }
      .h-timeline::before {
        content: "";
        position: absolute;
        left: 5px;
        top: 4px;
        bottom: 4px;
        width: 2px;
        background: var(--border);
      }
      .h-item { position: relative; padding: 0 0 16px 0; }
      /* ⛔ The colour dot is NEVER the only thing saying what happened: the text next
         to it tells it in words. Colour is a reinforcement. */
      .h-dot {
        position: absolute;
        left: -21px;
        top: 4px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--surface);
        border: 2px solid var(--border);
        box-sizing: border-box;
      }
      .h-pre .h-dot { border-color: var(--accent); }
      .h-ins .h-dot { border-color: var(--success); background: var(--success); }
      .h-baja .h-dot { border-color: var(--border); }
      .h-canc .h-dot { border-color: var(--danger); background: var(--danger); }
      .h-act { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; }
      .h-canc .h-act { color: var(--danger); }
      .h-when { font-size: 12px; color: var(--muted); margin-top: 3px; letter-spacing: 0.2px; }

      /* ═══════════════════════════════════════════════════════════════
         THE LIST OF PROMISED NOTICES (phase 6b of the unification, 2026-08-26)
         ⛔ ONE single family for the TWO products: the shooter's window
         (`js/avisos.js`) and the organisation's card (`js/org-avisos.js`)
         enumerate the same thing —what whoever asks for the permission commits
         to send— and until today they painted it with two sets of hand-written
         styles, one of them inline. It is the text that justifies a permission that
         is only granted once: it must read the same in both places.
         ═══════════════════════════════════════════════════════════════ */
      /* The organisation's card while notifications are off: folded to one
         line so the team list stays in view; the list and the activate button
         unfold inside it. */
      .orgav-plegable { padding: 0; margin-bottom: 10px; }
      .orgav-plegable summary {
        cursor: pointer;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0 12px;
        font-size: 13px;
        color: var(--muted);
        list-style: none;
        border-radius: 10px;
      }
      .orgav-plegable summary::-webkit-details-marker { display: none; }
      .orgav-plegable summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .orgav-plegable summary svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform 0.2s; }
      .orgav-plegable[open] summary svg { transform: rotate(90deg); }
      .orgav-plegable[open] summary { border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0; }
      .orgav-cuerpo { padding: 10px 12px 12px; }
      .orgav-intro { font-size: 13px; color: var(--text); }
      .orgav-cuerpo .orgav-btn { width: auto; margin-top: 8px; padding: 8px 14px; min-height: 44px; font-size: 13px; }
      @media (prefers-reduced-motion: reduce) { .orgav-plegable summary svg { transition: none; } }
      .av-list { margin: 10px 0 0; padding: 0; list-style: none; }
      .av-list li {
        position: relative;
        padding: 7px 0 7px 20px;
        font-size: 14px;
        color: var(--text);
        line-height: 1.5;
        border-top: 1px solid var(--border);
      }
      .av-list li:first-child { border-top: 0; }
      /* The dot is decoration: whoever cannot see it still reads the whole sentence. */
      .av-list li::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 15px;
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: var(--accent);
      }