/* css/main/drawer-menu.css — part 13/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      /* ═══════════════════════════════════════════════════════
         NAVIGATION — Side drawer + Bottom nav + Hamburger
         Replaces the scrolling horizontal bar and the per-view page-footers.
         ═══════════════════════════════════════════════════════ */

      /* Hide the old horizontal bar and the footers of each view. */
      .nav { display: none !important; }
      .page-footer { display: none !important; }

      /* Discreet indicator in the topbar while an auto-backup to Drive
         is uploading. It pulses softly to signal activity without
         interrupting the user. */
      .cloud-indicator {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        background: rgba(200, 168, 75, 0.12);
        animation: tl-cloud-pulse 1.5s ease-in-out infinite;
      }
      .cloud-indicator svg {
        width: 18px;
        height: 18px;
      }
      @keyframes tl-cloud-pulse {
        0%, 100% { opacity: 0.45; }
        50%      { opacity: 1; }
      }

      /* Hamburger button in the header */
      .topbar-hamb {
        background: none;
        border: 1.5px solid var(--border);
        color: var(--muted);
        border-radius: 6px;
        padding: 6px 8px;
        font-size: 16px;
        cursor: pointer;
        line-height: 1;
        /* ⛔ No `margin-right`: the gap is set by the header container,
           which already carries `gap:6px` (norms §8-ter i). With both buttons —menu and
           back— the own margin added to the gap and separated them by 12 px. */
        display: flex;
        align-items: center;
      }
      .topbar-hamb svg { width: 18px; height: 18px; display: block; }

      /* ── The header's RELOAD button, while it is requesting ──────────────
         It shares the shape of the other two header icons (`.topbar-hamb`):
         they're the same family and three different shapes up there read as three
         different origins.
         ⛔ The state is marked with `aria-busy`, which is also what a
         screen reader announces — not with a decorative class that says nothing.
         ⛔ The spin is NOT the only indicator: the button dims and ends up
         disabled, so whoever doesn't perceive the motion still sees that it's
         working (norms §2).
         ⛔ And the dimming is MEASURED, not eyeballed: with 0.55 —the first
         thing I wrote— the icon fell to 3.17:1 in LIGHT theme, so the
         «I'm working» signal read worse than the normal button exactly when it's
         needed most. With 0.7 it gives 4.78:1 in light and 7.86:1 in dark,
         measured in the browser on 2026-08-24. */
      .topbar-hamb[aria-busy="true"] { opacity: 0.7; cursor: default; }
      .topbar-hamb[aria-busy="true"] svg { animation: tl-spin 0.9s linear infinite; }
      @media (prefers-reduced-motion: reduce) {
        .topbar-hamb[aria-busy="true"] svg { animation-duration: 3s; }
      }

      /* Drawer backdrop */
      .drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 49;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
      }
      .drawer-backdrop.open {
        opacity: 1;
        pointer-events: auto;
      }

      /* Side drawer */
      .drawer {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        /* ⛔ 78% AND 252 px CAP (2026-08-26). It was 82% / 320 px, and on a 360
           phone the drawer measured 295 px —almost the whole screen, which is what
           Santi pointed out—; now it measures 252, 70%.
           ⭐ AND IT WASN'T LOWERED BY EYE: measured with the real typography in the NINE
           languages, a shooter's menu needs **240 px** in the worst case, which
           today is «Registro de inscripciones» (and its Basque equivalent,
           «Izen-emateen erregistroa»). The extra 12 px are the margin so that
           a typography change doesn't start clipping labels.
           ⚠️ WHO SETS THIS WIDTH CHANGES every time a label is shortened, so
           before touching it you have to MEASURE AGAIN. In one afternoon three different ones
           set it: «Mis clubes y federaciones» (272 px) until it became
           «Vinculaciones», then «Campos de tiro cerca» (242 px) until it
           lost the «cerca», and now the registrations register. */
        width: 78%;
        max-width: 252px;
        background: var(--surface);
        border-right: 1px solid var(--border);
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .drawer.open { transform: translateX(0); }

      .drawer-header {
        padding: calc(18px + env(safe-area-inset-top, 0px)) 18px 14px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }
      .drawer-header .brand {
        font-family: "Oswald", sans-serif;
        font-size: 20px;
        letter-spacing: 3px;
        color: var(--accent);
        line-height: 1;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .drawer-header .brand-beta {
        font-family: "Inter", sans-serif;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1px;
        color: var(--accent);
        background: rgba(200, 168, 75, 0.15);
        border: 1px solid rgba(200, 168, 75, 0.4);
        padding: 2px 6px;
        border-radius: 6px;
        line-height: 1;
      }
      .drawer-header .brand-sub {
        font-size: 10px;
        color: var(--muted);
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-top: 4px;
      }

      /* ── Standard drawer header: brand + button to fold Appearance ── */
      .drawer-brand-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .drawer-appr-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
        padding: 0;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 6px;
        color: var(--muted);
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s, background 0.15s;
      }
      .drawer-appr-toggle:hover { color: var(--accent); border-color: var(--accent); }
      .drawer-appr-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .drawer-appr-toggle .dat-chevron {
        width: 20px; height: 20px;
        transition: transform 0.2s ease;
      }
      /* Folded: chevron pointing down (invites to unfold) + hide the block. */
      .drawer-appr-toggle[aria-expanded="false"] .dat-chevron { transform: rotate(180deg); }
      .drawer-appearance {
        overflow: hidden;
        max-height: 460px;
        transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
      }
      .drawer-header.appr-collapsed .drawer-appearance {
        max-height: 0 !important;
        opacity: 0;
        margin: 0;
        pointer-events: none;
      }
      /* Theme + interface size on ONE single line. */
      .appearance-controls {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 12px;
      }
      @media (prefers-reduced-motion: reduce) {
        .drawer-appearance, .drawer-appr-toggle .dat-chevron { transition: none; }
      }

      .drawer-seg-toggles {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 0 4px;
      }
      .seg-toggle {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        padding: 8px 10px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border);
        user-select: none;
        transition: background .15s, border-color .15s;
      }
      .seg-toggle:hover { background: rgba(255, 255, 255, 0.07); }
      .seg-toggle input { position: absolute; opacity: 0; pointer-events: none; }
      .seg-toggle-slider {
        position: relative;
        width: 30px;
        height: 16px;
        background: #444;
        border-radius: 14px;
        transition: background .2s;
        flex-shrink: 0;
      }
      .seg-toggle-slider::before {
        content: '';
        position: absolute;
        left: 2px;
        top: 2px;
        width: 12px;
        height: 12px;
        background: #fff;
        border-radius: 50%;
        transition: transform .2s;
      }
      .seg-toggle input:checked + .seg-toggle-slider { background: var(--accent); }
      .seg-toggle input:checked + .seg-toggle-slider::before { transform: translateX(14px); }
      .seg-toggle input:checked ~ .seg-toggle-label { color: var(--text); }
      .seg-toggle-label {
        font-family: 'Oswald', sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .6px;
        color: var(--muted);
        text-transform: uppercase;
      }

      .drawer-list {
        flex: 1;
        overflow-y: auto;
        padding: 6px 0 12px;
        overscroll-behavior: contain;
      }
      .theme-switcher {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
      }
      .theme-opt {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
        background: transparent;
        border: 2px solid var(--border);
        border-radius: 6px;
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
      }
      .theme-opt:hover { background: var(--hover-soft); }
      .theme-opt[aria-pressed="true"] {
        border-color: var(--accent);
        background: var(--accent-dim);
      }
      .theme-swatch {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        border: 1px solid var(--border);
        flex-shrink: 0;
        display: block;
      }
      .theme-swatch-dark { background: #0d0d0d; border-color: #2e2e2e; }
      .theme-swatch-light { background: #f5f3ee; border-color: #d8d3c8; }
      /* Interface size (accessibility). Reuses the look of .theme-opt. */
      .uiscale-opt {
        min-width: 34px;
        min-height: 30px;
      }
      .uiscale-glyph {
        line-height: 1;
        font-weight: 700;
        color: var(--text, #f0ede8);
        display: block;
      }
      .uiscale-opt[aria-pressed="true"] .uiscale-glyph { color: var(--accent); }
      @media (pointer: coarse) {
        .uiscale-opt { min-width: 44px; min-height: 44px; }
      }
      /* ── Master table in READ-ONLY (block C) ──────────────────────
         Offline and with more than one device in the organization, the tables
         are consulted but not edited: there's no honest way to merge two
         edits made blind. What CREATES or DELETES is hidden; what opens
         a record to look at it stays, because consulting is possible. */
      /* ⛔ THE READ-ONLY CATALOG HIDES THE CREATE ACTION.
         `_tlCatSoloLectura()` (js/app.js) turns on `tl-cat-ro` when editing isn't
         possible without network — no coverage, or with the lock on another device—.
         ⚠️ And it broke here on 2026-08-20 when the slabs became «+»: the list
         named `.cv-listing-btn-primary`, which stopped existing in these five
         screens, so the guard hid NOTHING and the wizard could be opened
         so that the server rejected the write at the end. Now both
         forms are named, and none is removed: if a bar button comes back
         tomorrow in any of these views, it stays covered. */
      body.tl-cat-ro #view-mis-campos .cv-listing-btn-primary,
      body.tl-cat-ro #view-mis-plantillas-competicion .cv-listing-btn-primary,
      body.tl-cat-ro #view-mis-plantillas-pago .cv-listing-btn-primary,
      body.tl-cat-ro #view-catalogo-edades .cv-listing-btn-primary,
      body.tl-cat-ro #view-mis-campos .fab,
      body.tl-cat-ro #view-mis-plantillas-competicion .fab,
      body.tl-cat-ro #view-mis-plantillas-pago .fab,
      body.tl-cat-ro #view-catalogo-edades .fab,
      body.tl-cat-ro #view-companeros .fab { display: none !important; }

      /* ⛔ IT WAS MUTE, AND NOT BECAUSE OF SUBTLETY: BECAUSE OF COLOR (Santi, 2026-09-08). His
         words: *"everything looks the same, the same white color on black… you
         can't see the section change"*. And he was right for a specific cause that
         isn't seen by reading the rule: `--muted` is **#f0ede8 in dark theme** —
         almost white—, i.e. **the SAME color as the entries it labels**. The
         only thing separating it was 3 px of size and the font. A label that
         shares color with what it labels groups nothing.
         ⛔⭐ AND THE BAND WAS REMOVED ON 2026-09-12 — Santi, looking at it: *"I
         don't like it aesthetically… respect the background, everything with the same
         background, but with a slightly bigger font
         size"*. He chose the combination of two
         of the three options he was shown rendered: **accent dash
         in front of the title + thin separator line**, with the title in the
         accent color.
         ⛔⛔ AND IT WASN'T JUST TASTE: when measuring the contrast of the options it turned out that
         **the band FAILED the 4.5:1 minimum of the house norms, in
         BOTH themes** — 4.29:1 in dark and 3.30:1 in light—, because it raised the
         luminance of the background right below an accent text. Without the band, the
         label goes back to the drawer background and rises to **7.59:1 in dark and 5.12:1 in
         light**. Measured in the browser with the real CSS, with the meter
         calibrated first (black on white = 21.0:1).
         ⚠️ And watch out when measuring this again: `color-mix()` resolves as
         `color(srgb …)`, whose channels go from **0 to 1** and not 0 to 255. A
         reader that doesn't tell them apart gives 1.14:1 where there's 6.75:1 — it happened, and led to
         writing off as unreadable an option that was fine.
         ⭐ So THREE things separate it, the same as before minus the band and
         plus the dash: the ACCENT color, the short DASH that gives it a visual
         anchor, and the LINE on top that says where the previous section ends.
         ⛔⭐ THE LINE IS CARRIED BY THE ONE THAT COMES AFTER ENTRIES, not all of them — it was
         fixed on 2026-09-12 **by looking at the real menu**, which is where it was
         seen: the options mock-up didn't show it. Before, all carried it
         «because which one is the first visible changes on the fly», and with the band
         it got away with it; without the band, above HOME there were **two lines with an
         empty gap between them** —the header's and its own— and on an
         organization device **THREE**, because the identity strip brings its own.
         ⭐ `.drawer-item + .drawer-group` states the invariant without naming
         any: a label draws its line **only when it really separates from
         some entries**. The first one separates from nothing — above it is the
         header, which already brings its border.
         ⚠️ And the accent color changes with the theme (#c8a84b dark / #846b1e
         light), so the contrast is resolved in both by the variable,
         not by a value written here.
         ⚠️ `display:flex` is safe here: the segmentation hides and shows these
         labels with `style.display = ""` (`index.html:7287`), which returns the
         sheet's value. With a hand-written `"block"`, the dash would fall to
         its own line. */
      .drawer-group {
        margin-top: 18px;
        padding: 14px 18px 6px;
        font-family: "Oswald", sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1.2px;
        color: var(--accent);
        text-transform: uppercase;
        background: none;
        display: flex;
        align-items: center;
        gap: 9px;
      }
      /* The accent dash. ⛔ It goes in `::before` and not in the text: the label is
         translated by `data-i18n` rewriting the content, so a dash written
         inside would be lost as soon as the language changed. */
      .drawer-group::before {
        content: "";
        width: 14px;
        height: 2px;
        /* ⛔ 999 and not 2: the radii of this mock-up are FOUR (6 control · 10
           card · 14 dialog · 999 pill) and `unit-escala-visual` watches over it.
           On a bar 2 px tall, «pill» means the rounded ends,
           which is exactly what's needed. */
        border-radius: 999px;
        background: var(--accent);
        flex: 0 0 auto;
      }
      /* Only the one coming AFTER entries separates — see the note above. */
      .drawer-item + .drawer-group {
        border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
      }
      /* The first entry of each section breathes a little after the label. */
      .drawer-group + .drawer-item { padding-top: 8px; }
      .drawer-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 12px 18px;
        background: none;
        border: none;
        color: var(--text, #f0ede8);
        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        transition: background 0.15s;
      }
      .drawer-item:hover { background: rgba(255, 255, 255, 0.04); }
      /* «Unread» badge on a menu row (news channel).
         It was brought from the directory with card #121, with its color and its measure:
         ⚠️ `--badge` is NOT `--error`. In dark, the error red (#ef4444) gives
         3.76:1 with white text and doesn't reach the 4.5 that UX norm §2 demands; the one
         here is measured in both themes and comes from `design-tokens.json`.
         ⛔ And the number ALWAYS goes inside: an empty red circle is an alarm
         for no reason, so whoever paints it hides it when there's nothing. */
      .drawer-item .note {
        margin-left: auto;
        flex: 0 0 auto;
        font-size: 12px;
        color: var(--muted);
      }
      .drawer-item .note.badge {
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--badge);
        color: #fff;
        font-family: "Oswald", sans-serif;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1;
      }
      .drawer-item.active {
        background: rgba(200, 168, 75, 0.18);
        color: var(--accent);
        box-shadow: inset 3px 0 0 0 var(--accent);
      }
      .drawer-item:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
      }