/* css/main/competition-history-and-ranking.css — part 21/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      /* ═══ THE RANKING SCALE (ficha #110) ═══
         Eleven numeric boxes and a simulator. The five classes here are
         ONLY for this screen; everything else (`.card`, `.input`, `.chip`,
         `.form-actions`) belongs to the system and is not touched.

         ⛔ Two columns on mobile. With just one, the eleven rows force
         scrolling to see the effect in the simulator —which is what makes
         the rule understandable— and the screen stops explaining itself. */
      .rank-grid {
        display: grid;
        /* It adjusts itself: two columns on a phone, four on a tablet, one
           on very narrow screens. ⛔ With two fixed columns, on a tablet
           250 px were left over on the right and on a small phone the labels
           broke. The 150 px are the minimum with which «10th» and its 68 px
           box live together without being cut. */
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 8px 10px;
        margin-top: 10px;
      }
      .rank-row {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }
      .rank-row-lb {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 13px;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      /* ⛔ 16 px type and no less: below that, iOS zooms the page when
         the field is focused and never comes back. Fixed width so the two columns
         do not dance depending on the number inside. */
      .rank-row-in {
        flex: 0 0 68px;
        width: 68px;
        text-align: center;
        font-size: 16px;
        padding: 8px 6px;
      }
      .rank-chips {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin: 10px 0 12px;
      }
      /* The resulting distribution. It is read at a glance, so it goes in a grid
         that adjusts itself instead of a table that forces scrolling. */
      .rank-sim {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 8px;
      }
      .rank-sim-c {
        flex: 0 0 auto;
        padding: 5px 9px;
        border: 1px solid var(--border-soft);
        border-radius: 6px;
        background: var(--surface);
        font-size: 13px;
        color: var(--text);
      }
      .rank-sim-c b {
        color: var(--muted);
        font-weight: 600;
        margin-right: 3px;
      }
      .rank-sim-cola {
        margin-top: 8px;
        font-size: 13px;
        color: var(--muted);
      }

      /* ═══════════════════════════════════════════════════════════════
         COMPETITION DIRECTORY · History · Honors
         Phase 1 of the unification (2026-08-26). Ported from
         `competitions/index.html`, which disappears when the plan ends
         (`Documentos/plan-directorio-unificacion.md`).

         ⛔ WHAT WAS NOT BROUGHT OVER, and it is what avoids a second family:
           · `.es-ic/.es-title/.es-sub` → here it is `.empty-state-*`, which already
             exists and 33 screens use.
           · `.rk-sim` / `.rk-sim-c` → here it is `.rank-sim` / `.rank-sim-c`,
             which already lives above (the «Ranking points» scale). It is
             literally the same chip: two names for the same thing was
             precisely the drift that `tokens-check.py` measures.
           · `.view-title` → the app titles in the HEADER (`sectionKeys`,
             guarded by `titulo-vista-check.py`). Repeating it inside the
             body would be saying the same thing twice.
         ═══════════════════════════════════════════════════════════════ */


      /* ── Competition history · Honors ──
         Sober list: the competition rules (name + date) and the own
         result goes below. The organization sees the same cards WITHOUT the result
         block, because it does not compete.
         ⛔ The medal is never just color: it carries the place number inside
         (UX norms §2, color cannot be the only indicator). */
      .hist-card {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        text-align: left;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 10px;
        color: inherit;
        font: inherit;
        cursor: pointer;
        transition: border-color 0.15s;
      }
      .hist-card:hover { border-color: var(--accent); }
      .hist-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .hist-main { flex: 1 1 auto; min-width: 0; }
      .hist-name {
        font-family: "Oswald", sans-serif;
        font-size: 16px;
        line-height: 1.25;
        color: var(--text);
        word-break: break-word;
      }
      .hist-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
      .hist-chev { flex: 0 0 auto; display: inline-flex; color: var(--muted); }
      .hist-chev svg { width: 20px; height: 20px; transform: rotate(-90deg); }
      .hist-res { display: flex; align-items: baseline; gap: 10px; margin-top: 9px; }
      .hist-pos {
        display: inline-flex;
        align-items: baseline;
        gap: 5px;
        font-family: "Oswald", sans-serif;
        font-size: 16px;
        color: var(--accent);
      }
      .hist-pos small,
      .hist-mp small { font-size: 12px; color: var(--muted); font-family: inherit; }
      .hist-tot {
        font-family: "Oswald", sans-serif;
        font-size: 16px;
        color: var(--text);
        font-variant-numeric: tabular-nums;
      }
      .hist-mods { margin-top: 9px; border-top: 1px solid var(--border-soft); }
      .hist-mrow {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 6px 0;
        border-bottom: 1px solid var(--border-soft);
      }
      .hist-mrow:last-child { border-bottom: 0; }
      .hist-mn { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--muted); }
      .hist-mn i {
        font-style: normal;
        font-size: 12px;
        color: var(--accent);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .hist-mp {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: baseline;
        gap: 4px;
        font-family: "Oswald", sans-serif;
        font-size: 14px;
        color: var(--accent);
      }
      .hist-mt {
        flex: 0 0 auto;
        min-width: 42px;
        text-align: right;
        font-family: "Oswald", sans-serif;
        font-size: 14px;
        color: var(--text);
        font-variant-numeric: tabular-nums;
      }
      /* ⛔ The three medal colors are METAL, not theme: gold is gold in
         light and in dark. That is why they carry a fixed text color — on a
         background that does not change, the text token would change and the number
         would stop being readable in one of the two themes. */
      .hist-med {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        height: 22px;
        padding: 0 7px;
        border-radius: 999px;
        font-family: "Oswald", sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: #1a1400;
      }
      .hist-med.g { background: #d4af37; }
      .hist-med.s { background: #c0c4cc; }
      .hist-med.b { background: #cd7f32; }
      .hist-trunc {
        font-size: 12px;
        color: var(--muted);
        text-align: center;
        padding: 10px 4px 2px;
      }
      /* ── The YEAR selector of the history, the honors and My diplomas (#257,
         2026-09-24). Centered, with the year large between two 44 px arrows.
         An arrow that leads nowhere (before the first year, after
         the current one) is dimmed, it does not disappear: so the year does not move around. */
      .anio-sel {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 0 0 12px;
      }
      .anio-btn {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--card);
        color: var(--text);
        cursor: pointer;
      }
      .anio-btn svg { width: 20px; height: 20px; }
      .anio-btn:disabled { opacity: .35; cursor: default; }
      .anio-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .anio-val {
        min-width: 64px;
        text-align: center;
        font-family: 'Oswald', sans-serif;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 1px;
        color: var(--text);
      }

      /* ── Ranking (honor roll) ──
         ⛔ `--text` and not `--accent` on the pressable text: measured, gold
         on a light background stays at 4.33:1 and the norms require 4.5. The
         underline already says it can be pressed, so color is not the
         only indicator. */
      .rk-link {
        background: none;
        border: 0;
        padding: 0;
        font: inherit;
        color: var(--text);
        text-decoration: underline;
        text-underline-offset: 2px;
        cursor: pointer;
      }
      .rk-link:hover { color: var(--accent); }
      .rk-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .rk-sub { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
      .rk-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
      .rk-chips-2 { margin-top: -4px; }
      .rk-chip {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 6px 14px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface);
        color: var(--muted);
        font-family: "Oswald", sans-serif;
        font-size: 13px;
        letter-spacing: 0.4px;
        cursor: pointer;
      }
      .rk-chip:hover { color: var(--text); }
      .rk-chip.active {
        background: var(--accent);
        color: var(--accent-fg);
        border-color: var(--accent);
      }
      .rk-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      @media (pointer: coarse) { .rk-chip { min-height: 44px; } }

      /* Elegir entidad */
      .rk-elige-t {
        font-family: "Oswald", sans-serif;
        font-size: 16px;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
      }
      .rk-elige-s { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
      .rk-orgs { display: flex; flex-direction: column; gap: 8px; }
      .rk-org {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 56px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        color: var(--text);
        text-align: left;
        cursor: pointer;
      }
      .rk-org:hover { border-color: var(--accent); }
      .rk-org:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .rk-org-n {
        flex: 1 1 auto;
        min-width: 0;
        font-family: "Oswald", sans-serif;
        font-size: 14px;
      }
      .rk-org-s { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
      .rk-org svg {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        color: var(--muted);
        transform: rotate(-90deg);
      }

      /* La lista */
      .rk-lista { display: flex; flex-direction: column; gap: 6px; }
      .rk-fila,
      .rk-yo-linea {
        display: flex;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        background: var(--surface);
      }
      /* ⛔ The own row is marked with BORDER and background, not just with text
         color: color as the only indicator is forbidden by the norms. */
      .rk-fila-yo,
      .rk-yo-linea { border-color: var(--accent); background: var(--accent-dim); }
      .rk-yo-linea { margin-top: 10px; }
      .rk-yo-no {
        display: block;
        color: var(--muted);
        font-size: 13px;
        text-align: center;
      }
      .rk-pos {
        flex: 0 0 40px;
        font-family: "Oswald", sans-serif;
        font-size: 18px;
        color: var(--accent);
        text-align: right;
        line-height: 1.3;
      }
      /* ⛔ In the own row the number goes in text color, not in gold: the
         background of that row is a tint of the gold itself and measured it gives 3.66:1 in
         light theme, below the 4.5 the norms require. The row is already
         told apart by its border and its background. */
      .rk-fila-yo .rk-pos,
      .rk-yo-linea .rk-pos { color: var(--text); }
      .rk-cuerpo-f { flex: 1 1 auto; min-width: 0; }
      .rk-pts { font-size: 14px; color: var(--text); }
      .rk-junto { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
      .rk-ms { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
      .rk-m { font-size: 13px; color: var(--muted); }
      .rk-m + .rk-m::before { content: "·"; margin-right: 6px; color: var(--border); }
      /* The own registration, in bold IN ADDITION to the row's box. */
      .rk-yo { color: var(--text); font-weight: 600; }
      .rk-g { font-style: normal; font-size: 11px; opacity: 0.75; margin-left: 2px; }
      .rk-mas { font-style: italic; }
      .rk-pie {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin-top: 14px;
        font-size: 13px;
      }
      /* The footer is pressable text: without its own height it stays at 17 px, below
         the 44 that the norms require on touch screens. */
      @media (pointer: coarse) {
        .rk-pie .rk-link { min-height: 44px; display: inline-flex; align-items: center; }
      }

      /* The criteria table, inside the dialog */
      .rk-crit { font-size: 14px; line-height: 1.5; color: var(--text); }
      .rk-crit-b {
        font-size: 12px;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 10px;
      }
      /* Places as a scoreboard: five per row, place small and points large. */
      .rk-crit-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
      }
      .rk-crit-pos {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 6px 0;
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        background: var(--card);
      }
      .rk-crit-n { font-size: 12px; color: var(--muted); line-height: 1.2; }
      .rk-crit-v {
        font-family: "Oswald", sans-serif;
        font-size: 18px;
        color: var(--text);
        line-height: 1.3;
      }
      .rk-crit-nota { font-size: 13px; color: var(--muted); margin-top: 10px; }
      /* The rules: one per line with its icon, separated from the scale by a divider. */
      .rk-crit-rs {
        list-style: none;
        margin: 16px 0 0;
        padding: 16px 0 0;
        border-top: 1px solid var(--border-soft);
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .rk-crit-r, .rk-crit-fin { display: flex; gap: 12px; align-items: flex-start; }
      .rk-crit-ic { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: var(--muted); }
      .rk-crit-ic svg { width: 18px; height: 18px; display: block; }
      .rk-crit-fin {
        margin-top: 16px;
        padding: 12px;
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        background: var(--card);
        font-size: 13px;
        color: var(--muted);
      }

      /* The shooter's breakdown, inside the dialog. Lines separated by a
         divider and not cards: inside an already boxed dialog, boxing
         each competition again only adds noise. */
      .rk-dg { display: flex; flex-direction: column; margin-bottom: 12px; }
      .rk-dg-f {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-soft);
      }
      .rk-dg-f:first-child { padding-top: 0; }
      .rk-dg-i { flex: 1 1 auto; min-width: 0; }
      .rk-dg-n {
        display: block;
        font-size: 13px;
        color: var(--text);
        overflow-wrap: anywhere;
      }
      .rk-dg-d { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
      .rk-dg-r { flex: 0 0 auto; text-align: right; }
      /* ⛔ `--text` and not `--accent`: it is the same gold that in the list
         stayed at 4.33:1 on a light background, and here there is also one per line. */
      .rk-dg-q {
        display: block;
        font-family: "Oswald", sans-serif;
        font-size: 16px;
        color: var(--text);
        line-height: 1.2;
      }
      .rk-dg-p { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
      /* Zero points is NOT painted as an error: it took part and ended up where it ended up, and that
         is part of the answer. Italics like the «and N others», never red. */
      .rk-dg-0 { font-style: italic; }
      .rk-dg-tot { font-size: 14px; color: var(--text); }
      .rk-dg-s { font-size: 12px; color: var(--muted); margin-top: 6px; }

      /* ── My diplomas (phase 2 of the unification, 2026-08-26) ──
         The card is the history one (.hist-card): it is the same row —a
         competition with its chevron— and giving it another class would have been a second
         family for the same thing. */
      .dip-premio {
        font-family: "Oswald", sans-serif;
        font-size: 13px;
        color: var(--accent);
        margin-top: 5px;
      }
      .dip-circ { color: var(--muted); font-family: inherit; }

      /* ── The viewer, full screen ──
         ⛔ IT ALSO CARRIES `.modal-overlay.open`, and it is not decoration: the handler
         of the app's BACK button (`popstate`, js/app.js) only knows the
         `.modal-overlay.open`. Without that class, back took away the view
         underneath and left the diploma floating over another screen.
         ⚠️ That is why these rules are written as `.modal-overlay.dip-visor`:
         two classes are needed to beat `.modal-overlay.open`, which sets
         `display:flex`. With a single class the viewer was painted like a bottom
         sheet. */
      .modal-overlay.dip-visor {
        position: fixed;
        inset: 0;
        /* Above the view overlays (860). The app does not yet have the
           --z-* scale that Score does use; when it has it, this is a `viewer`. */
        z-index: 1200;
        background: var(--bg);
        display: block;
        align-items: initial;
        overflow: auto;
        /* Cuts the chaining to the document behind when reaching the end, just
           like `.cd-scroll` and `.wizvis-scroll`. */
        overscroll-behavior: contain;
      }
      .dip-barra {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        padding: 10px 12px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
      }
      /* ⛔ 44 px minimum height and spacing: the house's touch norm, and this
         bar is used with a finger on a tablet as much as with a mouse on a PC. */
      .dip-btn {
        min-height: 44px;
        padding: 10px 18px;
        border-radius: 10px;
        cursor: pointer;
        font-family: "Oswald", sans-serif;
        font-size: 14px;
        letter-spacing: 0.3px;
        background: var(--surface);
        color: var(--text);
        border: 1px solid var(--border);
      }
      .dip-btn-pri {
        background: var(--accent);
        color: var(--accent-fg);
        border-color: var(--accent);
      }
      .dip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      /* The sheet, with the real A4 proportion in each orientation: if it
         were distorted, what is seen on screen would not be what comes out of the
         printer. */
      .dip-hoja {
        margin: 16px auto;
        /* vw is divided by the desktop body zoom, like the rest of the app:
           otherwise a narrow PC window showed the sheet wider than the screen. */
        width: min(760px, calc(94vw / var(--tl-zoom, 1)));
        aspect-ratio: 794 / 1123;
        background: #fff;
        box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
        border-radius: 6px;
        overflow: hidden;
      }
      .dip-hoja.land { width: min(1000px, calc(96vw / var(--tl-zoom, 1))); aspect-ratio: 1123 / 794; }
      .dip-hoja svg { display: block; width: 100%; height: 100%; }
      body.dip-visor-abierto { overflow: hidden; }

      /* ⛔ WHEN PRINTING NOTHING IS SEEN BUT THE DIPLOMA. Without this the browser
         prints the whole screen —menu, bar, cards— and the diploma comes out the
         size of a postcard in a corner. The paper orientation is set by the
         viewer with its own @page rule, taken from the SIGNED document. */
      @media print {
        body.dip-visor-abierto > *:not(.dip-visor) { display: none !important; }
        body.dip-visor-abierto { overflow: visible; }
        .modal-overlay.dip-visor { position: static; background: #fff; overflow: visible; }
        .dip-barra { display: none !important; }
        .dip-hoja {
          margin: 0;
          width: 210mm;
          height: 297mm;
          aspect-ratio: auto;
          box-shadow: none;
          border-radius: 0;
        }
        .dip-hoja.land { width: 297mm; height: 210mm; }
      }