/* css/main/profile-switcher-and-drawer-footer.css — part 14/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      /* ── WHICH DEVICE THIS IS (2026-08-24) ────────────────────────────────
         Shares the geometry of `.drawer-item` —same indent, same gap
         for the icon— so it doesn't read as something pasted from another screen,
         but it is NOT a button: no `cursor`, no hover, no focus. A datum that
         looks tappable and does nothing is a dead button
         ([[reference_dead_buttons_toast_overlay]]).
         ⛔ And the separator goes BELOW: what follows are options, and without the line
         the role would read as the first of them. */
      /* ═══ THE SINGLE VEIL — «Switching to…» and whatever comes next (ticket #133) ═══
         ⚠️ A DIRECT child of <body> and `position: fixed` on purpose: that is how
         the `appConfirm` sweep finds it, climbing above any
         veil so as not to paint underneath. It is the failure there was on
         2026-08-12 with «opening Competiciones» —the question was visible through
         the veil and the veil ate the taps—.
         ⚠️ The 99999 is not an invented value: it is the one the other ten
         hand-written veils already use. When the app has a `--z-*` scale like
         Score, this becomes a `lock`. */
      .tl-velo {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        background: color-mix(in srgb, var(--bg) 88%, transparent);
        backdrop-filter: blur(2px);
      }
      .tl-velo-caja {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 0 32px;
        text-align: center;
      }
      .tl-velo-txt {
        color: var(--text);
        font-size: 14px;
        line-height: 1.4;
        max-width: 22em;
      }
      .tl-velo-giro {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 3px solid var(--border);
        border-top-color: var(--accent);
        animation: tlVeloGiro 0.9s linear infinite;
      }
      @keyframes tlVeloGiro { to { transform: rotate(360deg); } }
      /* ⛔ No spinning for anyone who asks for less motion: the point of this is
         to say «wait», and the text says that just as well. */
      @media (prefers-reduced-motion: reduce) {
        .tl-velo-giro { animation: none; border-top-color: var(--accent); opacity: 0.7; }
      }

      /* ═══ WHICH PROFILE I AM IN — the header line (ticket #133) ═══
         It goes under the view title and shows ALWAYS, with one or with five
         profiles: if it appeared only on creating the second, someone's layout
         would shift with no explanation (Santi, 2026-08-30).
         ⚠️ 11 px from the scale and `--muted`: it has to be readable without competing with the
         title, which is what you come to look at. */
      .hdr-perfil {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
        margin: 1px 0 0;
        padding: 0;
        background: none;
        border: 0;
        color: var(--muted);
        font-size: 11px;
        line-height: 1.2;
        letter-spacing: 0.3px;
        cursor: pointer;
        min-width: 0;
      }
      .hdr-perfil-ico { display: flex; flex: 0 0 auto; }
      .hdr-perfil-ico svg { width: 12px; height: 12px; }
      /* A long federation name gets truncated; it doesn't split the header in two. */
      .hdr-perfil-txt {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .hdr-perfil:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: 6px;
      }

      /* ═══ ON A PHONE, THE HEADER IN TWO ROWS (Santi, 2026-09-29) ═══
         With menu, quick menu, help, reload and «Backup» on one row, a 375 px
         phone left the title about 90 px: it read «COMP…» and was pushed off
         centre, because the right group is wider than the left one.
         Row 1: the buttons at the ends and the profile line between them.
         Row 2: the title alone, centred on the full width. It costs about
         16 px of height, since the profile line moves up to the buttons' row.
         ⚠️ Tablets and computers keep the single row: everything fits there. */
      @media (max-width: 599px) {
        header.app-hdr {
          display: grid !important;
          grid-template-columns: auto minmax(0, 1fr) auto;
          grid-template-areas: "izq perfil der" "tit tit tit";
          column-gap: 8px;
          row-gap: 2px;
          padding-top: 6px !important;
          padding-bottom: 6px !important;
        }
        .app-hdr .hdr-izq { grid-area: izq; }
        .app-hdr .hdr-der { grid-area: der; }
        .app-hdr .hdr-centro { display: contents; }
        .app-hdr #sectionTitle { grid-area: tit; text-align: center; }
        .app-hdr #hdrPerfil { grid-area: perfil; margin: 0; align-self: center; }
      }

      /* ═══ PROFILE SWITCHER — the group, in the menu list ═══
         The rows are plain old `.drawer-item`s: here we only separate the
         block from the rest of the menu. */
      /* ⛔ THE BLOCK IS SEPARATED FROM THE REST OF THE MENU (Santi, 2026-08-30): *"something
         different that perfectly separates what the profile
         options are"*. With just a line below it read as one more option, and it isn't
         one: it doesn't navigate anywhere, it changes the whole app.
         ⚠️ A veil of the accent and NOT a fixed grey: the grey would have to be chosen twice
         —once per theme— and the next pair to touch it would leave one of the
         two behind. With `color-mix` over the accent, the block tints itself in
         light and dark. It is the same trick the role pill already uses in
         «Mi perfil». */
      .drawer-perfiles {
        background: color-mix(in srgb, var(--accent) 7%, transparent);
        border-top: 1px solid var(--border-soft);
        border-bottom: 1px solid var(--border-soft);
        padding: 2px 0 4px;
        margin-bottom: 6px;
      }
      /* The collapsed line. Same geometry as `.drawer-item` —indent, gap,
         touch target— so it reads as one more menu option and not as
         an ornament pasted on top. */
      .drawer-perfiles-tog {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 10px 18px;
        background: none;
        border: 0;
        color: var(--accent);
        font-size: 13px;
        text-align: left;
        cursor: pointer;
      }
      .drawer-perfiles-tog:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
      }
      /* ⛔ THE ICON NEEDS ITS OWN SIZE. `.di-icon` only has one under
         `.drawer-item`, so here the SVG came out with no dimensions — that is,
         invisible. Santi: *"it has no icon on the left"*. It had one; it wasn't
         visible, which amounts to the same thing.
         ⚠️ Same measurements as in the menu (22 box, 20 stroke) so the icon
         column stays aligned from top to bottom. */
      .drawer-perfiles-tog .di-icon {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
      }
      .drawer-perfiles-tog .di-icon svg { width: 20px; height: 20px; }
      /* The label, in the title typography and in accent: it is the header
         of a block, not an option. Same treatment as «which device this
         is», its neighbour. */
      .drawer-perfiles-tog .dp-tit {
        font-family: "Oswald", sans-serif;
        font-size: 13px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--accent);
      }
      .dp-chevron {
        width: 16px;
        height: 16px;
        margin-left: auto;
        flex: 0 0 auto;
        transition: transform 180ms ease;
      }
      .drawer-perfiles-tog[aria-expanded="true"] .dp-chevron { transform: rotate(180deg); }
      /* ⛔ No rotation for anyone who asks for less motion: the state is already told by the
         list, which appears or not. */
      @media (prefers-reduced-motion: reduce) {
        .dp-chevron { transition: none; }
      }
      /* The profile in use: same treatment as the active menu option, plus
         a dot on the right. ⛔ Colour is NOT the only indicator (UX rule
         §2): the dot accompanies it. */
      .drawer-perfiles .drawer-item[aria-current="true"] { color: var(--accent); }
      .drawer-perfiles .dp-punto {
        margin-left: auto;
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
      }

      .drawer-ident {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 10px 18px 12px;
        border-bottom: 1px solid var(--border-soft);
        margin-bottom: 4px;
        box-sizing: border-box;
      }
      .drawer-ident .di-icon { color: var(--muted); flex: 0 0 auto; }
      .drawer-ident-txt { display: flex; flex-direction: column; min-width: 0; }
      /* The role in the title typography and accent colour: it is WHAT
         YOU COME TO READ, and it has to win at a glance over the rest of the menu. */
      .drawer-ident-puesto {
        font-family: "Oswald", sans-serif;
        /* 16 px and not 15: the layout has THIRTEEN steps and 15 is not one
           (`unit-escala-visual`). And the step above is the right one — this is
           what you come to read, and below the 14 px of the menu
           options it would not win at a glance. */
        font-size: 16px;
        letter-spacing: 0.8px;
        color: var(--accent);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      /* And below, whose identity it is: on a tablet shared between a
         club and its federation, «Árbitro 3» on its own doesn't say whose. */
      .drawer-ident-ent {
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.4px;
        line-height: 1.3;
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .drawer-item .di-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .drawer-item .di-icon svg {
        width: 20px;
        height: 20px;
      }

      /* ⛔ SINGLE-ADMINISTRATOR WARNING (#88, 2026-08-15).
         It heads the ORGANIZACIÓN block.

         ⛔ RAISED TO RED ON 2026-08-20 (Santi, in the final test): *"it needs a
         bit more force… and in a red that hurts"*. It was in
         golden `var(--warn)` and read like one more item in the list.

         ⚠️ It uses `var(--alerta)` because it is the red that sounds loudest, and it is
         measured in both themes: 5.42:1 in dark and 5.88:1 in light. When this was
         written, `var(--danger)` was also IMPOSSIBLE here —#c0392b on
         the dark background measured 3.33:1—; since 2026-08-22 it is #ec7063 and now
         passes, so the choice above is about tone, not contrast.

         ⛔ And colour is not the only indicator (UX/UI rules): it carries an icon, the
         word «ATENCIÓN», bold and a red bar on the left. */
      .drawer-item.drawer-warn {
        color: var(--alerta);
        font-weight: 800;
        background: var(--alerta-dim);
        box-shadow: inset 3px 0 0 0 var(--alerta);
      }
      .drawer-item.drawer-warn span[data-i18n] { white-space: normal; line-height: 1.35; }
      .drawer-item.drawer-warn:hover { background: var(--alerta-dim); filter: brightness(1.15); }
      .drawer-item.drawer-warn:focus-visible { outline-color: var(--alerta); }

      .drawer-footer {
        padding: 8px 18px 12px;
        border-top: 1px solid var(--border);
        font-size: 11px;
        color: var(--muted);
        line-height: 1.5;
        flex-shrink: 0;
      }
      /* ⛔ TWO ROWS, not four: the links on top, and below the copyright on the
         left with the version —and the DEBUG, which hooks on behind— on the
         right. On adding «Licencias» this looked broken, but the cause
         predated it: `.footer-ver` is `position:absolute` for the
         `.page-footer` of the views, which IS `position:relative`. Here there is no
         positioned ancestor, so the version left the flow and floated
         alone. It is returned to the flow ONLY inside the drawer, without touching the
         global rule that the other footer still uses. */
      .drawer-footer .df-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
      .drawer-footer .df-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        /* ⛔ `flex-end` + the copyright's `margin-right:auto`, and NOT
           `space-between`. Both distribute the same when everything fits in one row,
           but on WRAPPING they behave the other way round: with `space-between` what drops down
           starts flush to the left edge, hanging loose. With the console already out
           of the footer (it is the last menu option since 2026-09-02) this
           should never wrap — it is kept because the copyright and the version
           can grow when translated, and that day the difference shows. */
        justify-content: flex-end;
        gap: 2px 10px;
      }
      .drawer-footer .df-copy { white-space: nowrap; margin-right: auto; }
      /* ⭐ The legal links fold (Santi, 2026-09-29), with the SAME button as
         Appearance at the top. The links sit ABOVE this row, so the chevron
         reads the other way round: down = fold them, up = unfold them. */
      .drawer-footer .df-legal-toggle { width: 30px; height: 30px; }
      .drawer-footer .df-legal-toggle .dat-chevron { width: 18px; height: 18px; }
      .drawer-footer .df-legal-toggle[aria-expanded="true"] .dat-chevron { transform: rotate(180deg); }
      .drawer-footer .df-legal-toggle[aria-expanded="false"] .dat-chevron { transform: none; }
      .drawer-footer .df-links {
        overflow: hidden;
        max-height: 60px;
        transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
      }
      /* `#appDrawer` so it beats the second row's negative margin, written
         further down; `visibility` so the folded links leave the tab order. */
      #appDrawer .drawer-footer.legal-collapsed .df-links {
        max-height: 0;
        opacity: 0;
        margin: 0;
        visibility: hidden;
        pointer-events: none;
      }
      @media (prefers-reduced-motion: reduce) {
        .drawer-footer .df-links { transition: none; }
      }
      .drawer-footer .footer-ver {
        position: static;
        right: auto;
        display: inline-flex;
        align-items: center;
      }
      .drawer-footer .priv-link {
        background: none;
        border: none;
        color: var(--accent);
        cursor: pointer;
        font-size: 12px;
        padding: 8px 6px;
        margin: 0;
        min-height: 36px;
        font-family: "Inter", sans-serif;
        border-radius: 6px;
        /* Privacy is an <a> (crawlable by Google), not a button:
           we match the look to the rest of the drawer controls. */
        display: inline-block;
        text-decoration: none;
        box-sizing: border-box;
      }
      .drawer-footer .priv-link:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 0;
      }
      /* The side padding separates the links from one another; on the first one it is surplus,
         because all it does is pull it away from the menu margin. */
      .drawer-footer .df-links .priv-link:first-child { margin-left: -6px; }
      /* ⛔ THE SECOND ROW MOVES CLOSER TO THE FIRST (Santi, 2026-09-23): between
         «Privacidad» and «Condiciones de uso» there was more air than between
         «Condiciones de uso» and the footer, because each row is of tall links
         (36 px, 44 with a finger) with centred text, and the gap between two
         rows adds up both margins. Measured: 27 px versus 17 with a mouse (it goes up 8: the row height changes with the shift), and
         29 versus 16 with a finger. What is surplus is pulled up and they end up equal.
         ⚠️ With a finger the two rows overlap by 13 px: «Privacidad» is left
         with 31 tappable px instead of 44. That is the cost of equalising them. */
      .drawer-footer .df-links + .df-links { margin-top: -8px; }
      /* The house touch target (UX-UI-normas §1): 44 px with a finger. It fits with room to
         spare because the footer went from four rows to two. */
      @media (pointer: coarse) {
        .drawer-footer .priv-link {
          min-height: 44px;
          display: inline-flex;
          align-items: center;
        }
        .drawer-footer .df-links + .df-links { margin-top: -13px; }
      }

      /* ═══ THE «UPDATING TIROLOG» WINDOW (2026-10-10, js/update-window.js) ═══
         Built on `.tl-velo`, above: same full-screen layer, background and
         z-index. Only the box, the bar and the texts are new. */
      .tl-velo.tl-act {
        backdrop-filter: blur(4px);
      }
      .tl-act-caja {
        width: min(320px, calc(100vw - 32px));
        box-sizing: border-box;
        padding: 24px 20px 20px;
        border-radius: 14px;
        background: var(--card);
        border: 1px solid var(--border);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
        text-align: center;
      }
      /* Focused only so screen readers announce it; it is not a control. */
      .tl-act-caja:focus { outline: none; }
      .tl-act-titulo {
        color: var(--text);
        font-family: "Oswald", sans-serif;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 0.02em;
        line-height: 1.3;
      }
      .tl-act-barra {
        margin: 18px 0 6px;
        height: 8px;
        border-radius: 999px;
        background: var(--border);
        overflow: hidden;
      }
      /* The fill grows with `transform`, not `width`: no layout on every step. */
      .tl-act-relleno {
        height: 100%;
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.25s ease-out;
      }
      .tl-act-pct {
        color: var(--text-dim);
        font-size: 13px;
        font-variant-numeric: tabular-nums;
      }
      .tl-act-nota {
        margin-top: 14px;
        color: var(--text-dim);
        font-size: 14px;
        line-height: 1.45;
      }
      /* Done: the title already says «App updated»; the percentage is redundant. */
      .tl-act-listo .tl-act-pct { visibility: hidden; }
      @media (prefers-reduced-motion: reduce) {
        .tl-act-relleno { transition: none; }
      }