/* css/main/simulation-and-guided-tour.css — part 20/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      /* ═════════════════════════════════════════════════════════════════
         SIMULATED COMPETITION — the band and the «+» menu
         (plan-competiciones-prueba.md, S1, S6 and S7)
         ─────────────────────────────────────────────────────────────────
         ⛔ THE SIGNAL IS THE STRIPED BAND, not the color: the color wheel was
         already full (see «Competición simulada» in scripts/design-tokens.json).
         Stripes + icon + uppercase text, so it does not depend on telling
         a hue apart. Santi: «in a very clear, very visual, big way». */
      .tl-sim-band{
        display:flex; align-items:center; gap:10px; box-sizing:border-box; width:100%;
        padding:10px 12px; border:1.5px solid var(--sim-bd); border-radius:10px;
        background:repeating-linear-gradient(135deg, var(--sim-stripe) 0 10px, transparent 10px 20px), var(--sim-bg);
        color:var(--sim-fg);
      }
      .tl-sim-band-ic{flex:0 0 auto; width:24px; height:24px}
      .tl-sim-band-ic svg{width:24px; height:24px; display:block}
      .tl-sim-band-tx{min-width:0; display:flex; flex-direction:column; gap:2px}
      .tl-sim-band-t{font-family:"Oswald",sans-serif; font-size:18px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; line-height:1.15}
      .tl-sim-band-d{font-size:13px; line-height:1.35; font-weight:500}
      .cv-item-inner .tl-sim-band{margin-bottom:8px}
      .wiz-sim-band{margin:10px 0 2px}
      /* Wizard on a phone, or any screen made short by the keyboard: the band
         scrolls with the form instead of staying fixed above it, and the
         catalogue shortcuts go away while typing. Santi, 2026-10-08: with all
         of it fixed there was no room left to see the field being typed in. */
      .wiz-sim-band-inline{display:none; margin:0 0 12px}
      @media (max-width: 767px), (max-height: 520px){
        #view-wizard-cv #wizSimBanner{display:none}
        #view-wizard-cv .wiz-sim-band-inline{display:flex}
      }
      @media (max-height: 520px){
        #view-wizard-cv > .filter-bar{display:none}
      }

      /* The «+» menu: two paths, Competition and Simulation. Plane 2 (floating).
         ⛔ z-index 45/46: ABOVE the bottom bar (20) and the top one,
         so the layer covers them and any tap outside CLOSES the menu instead of
         navigating with it open (F3 review). Below the drawer (49) and
         the dialogs (50). The app has no `--z-*` scale yet. */
      .tl-crear-ov{position:fixed; inset:0; z-index:45; background:rgba(0,0,0,.35)}
      .tl-crear-menu{
        position:fixed; z-index:46;
        right:max(16px, calc(50vw - 240px + 16px));
        bottom:calc(60px + env(safe-area-inset-bottom, 0px) + 16px + 56px + 12px);
        width:min(340px, calc(100vw - 32px)); box-sizing:border-box;
        display:flex; flex-direction:column; gap:4px; padding:6px;
        background:var(--card); border:1px solid var(--border); border-radius:14px;
        box-shadow:var(--elev-2);
        animation:tlCrearIn .16s ease-out;
      }
      body.tl-zoomed .tl-crear-menu{right:16px}
      .tl-crear-item{
        display:flex; align-items:center; gap:12px; width:100%; min-height:64px;
        padding:10px 12px; border:none; border-radius:10px; background:transparent;
        color:var(--text); text-align:left; cursor:pointer; font:inherit;
        transition:background-color .15s ease;
      }
      .tl-crear-item:hover{background:var(--hover-soft)}
      .tl-crear-item:focus-visible{outline:3px solid var(--accent-2); outline-offset:-3px}
      .tl-crear-ic{flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-sizing:border-box}
      .tl-crear-ic svg{width:22px; height:22px}
      .tl-crear-ic.real{background:var(--accent-dim); color:var(--accent); border:1.5px solid var(--accent)}
      .tl-crear-ic.sim{background:repeating-linear-gradient(135deg, var(--sim-stripe) 0 6px, transparent 6px 12px), var(--sim-bg); color:var(--sim-fg); border:1.5px solid var(--sim-bd)}
      .tl-crear-tx{min-width:0}
      .tl-crear-t{display:block; font-family:"Oswald",sans-serif; font-size:16px; font-weight:600; letter-spacing:.03em}
      .tl-crear-d{display:block; font-size:13px; color:var(--text-dim); line-height:1.35; margin-top:2px}
      @keyframes tlCrearIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
      @media (prefers-reduced-motion:reduce){ .tl-crear-menu{animation:none} .tl-crear-item{transition:none} }

      /* Registrations of a SIMULATED one: the three product buttons (S9, S13). */
      /* ⛔ ONE ROW, COMPACT (Santi, 2026-09-17): with two rows of 48 px buttons
         they ate the list of pre-registered people. Short label in view, the long one in
         aria-label/title. 44 px only with a coarse pointer (UX-UI-normas §touch). */
      .wiz-sim-fechas{margin:0 0 10px}
      .sim-ins-barra{display:flex; gap:6px; margin-top:8px}
      .sim-ins-barra button{flex:1 1 auto; width:auto; min-width:0; min-height:36px; margin:0; padding:6px; font-size:12px; letter-spacing:0; line-height:1.15; display:flex; align-items:center; justify-content:center; gap:4px}
      .sim-ins-barra button svg{width:14px; height:14px; flex:0 0 auto}
      .sim-ins-barra button span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
      @media (pointer: coarse){ .sim-ins-barra button{min-height:44px} }
      .tl-sim-band.compacta{padding:6px 10px; gap:8px}
      .tl-sim-band.compacta .tl-sim-band-t{font-size:14px}
      .tl-sim-band.compacta .tl-sim-band-ic,.tl-sim-band.compacta .tl-sim-band-ic svg{width:18px; height:18px}

      /* «Generate simulated shooters» panel (F4). On top of Registrations, which
         is 99999; the app has no `--z-*` scale yet. */
      /* ⛔ `max-height:100%` and NOT `100dvh`: on tablet and desktop the body has
         `zoom` and is the containing block of fixed elements, so `100dvh` measured the
         screen WITHOUT zoom and the footer with the buttons ended up outside (Santi,
         2026-09-17). The 100% is the layer, which already fills the frame exactly. */
      .sim-gen-ov{position:fixed; inset:0; z-index:100001; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box}
      .sim-gen-dlg{width:100%; max-width:460px; max-height:100%; display:flex; flex-direction:column; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:14px; box-shadow:var(--elev-2); overflow:hidden}
      .sim-gen-cab{padding:14px 16px 0}
      .sim-gen-tit{font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:16px; color:var(--sim-fg)}
      .sim-gen-cuerpo{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 16px 8px}
      .sim-gen-pie{display:flex; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--border)}
      .sim-gen-pie button{flex:1; min-height:46px; margin:0}
      /* Why Generate is off, right above it (the pie wraps so it takes a full row). */
      .sim-gen-pie{flex-wrap:wrap}
      .sim-gen-motivo{flex-basis:100%; color:var(--danger); font-size:13px; font-weight:600; line-height:1.4}
      .sim-gen-libres{font-size:13px; font-weight:600; color:var(--text)}
      .sim-gen-fila{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0; font-size:14px}
      .sim-gen-etq{min-width:0; flex:1}
      .sim-gen-num{width:88px; min-height:44px; text-align:right; flex:0 0 auto}
      /* Locked (mixed pair): make it visible that it cannot be changed. */
      .sim-gen-num:disabled{opacity:.55; cursor:not-allowed}
      .sim-gen-nota{margin:-2px 0 6px}
      .sim-gen-bloque{border:1px solid var(--border); border-radius:10px; margin:12px 0 0; padding:4px 12px 8px}
      .sim-gen-bloque legend{padding:0 4px}
      .sim-gen-total{font-size:13px; text-align:right; color:var(--text-dim); margin-top:4px}
      .sim-gen-total.mal{color:var(--danger); font-weight:600}
      .sim-gen-cap,.sim-gen-error{margin-top:10px}
      .sim-gen-error{color:var(--danger); font-size:13px; font-weight:600}
      /* Historical weapons (F5): entries table, quick split, gaps and teams. */
      .sim-aahh-rapido{display:flex; gap:6px; margin:4px 0 6px}
      .sim-aahh-rapido button{flex:1 1 auto; width:auto; min-width:0; min-height:36px; margin:0; padding:6px; font-size:12px; letter-spacing:0; line-height:1.15}
      .sim-aahh-rapido button[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-dim)}
      @media (pointer: coarse){ .sim-aahh-rapido button{min-height:44px} }
      .sim-aahh-sub{margin:12px 0 0; padding-top:8px; border-top:1px solid var(--border)}
      .sim-aahh-chip{display:inline-block; margin-left:4px; padding:1px 6px; border-radius:6px; border:1px solid var(--border); font-size:11px; color:var(--text-dim); vertical-align:middle}
      .sim-aahh-necesita{display:block; font-size:12px; color:var(--text-dim); margin-top:2px}
      .sim-aahh-necesita:empty{display:none}
      .sim-aahh-necesita.mal{color:var(--danger); font-weight:600}
      .sim-aahh-huecos{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; margin-top:6px}
      .sim-aahh-hueco{font-size:12px; padding:2px 8px; border-radius:6px; border:1px solid var(--border); color:var(--text)}
      .sim-aahh-hueco.mal{border-color:var(--danger); color:var(--danger); font-weight:600}
      .sim-aahh-huecos .sim-gen-total{flex-basis:100%}

      /* The «Competition simulation» window: sister of the beta one, with two
         lists (what it includes / what it does not) instead of one. */
      .wizvis-ov .wizvis-grupo{font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:12px; font-weight:600; color:var(--muted); margin:12px 0 2px}
      .wizvis-ov .wizvis-card.sim{border:1.5px solid var(--sim-bd); background:radial-gradient(120% 90% at 100% 0%, var(--sim-bg), transparent 60%), var(--card)}
      .wizvis-ov .wizvis-price.sim .amt{color:var(--sim-fg)}
      .wizvis-ov .wizvis-fic.si{color:var(--sim-fg)}
      .wizvis-ov .wizvis-fic.no{color:var(--muted)}

      /* ═════════════════════════════════════════════════════════════════
         GUIDED TOUR OF THE MENU (js/tour.js)
         ─────────────────────────────────────────────────────────────────
         ⛔ THE VEIL IS NOT A FULL-SCREEN PANEL: it is the frame's
         shadow. `.tltour-hole` paints nothing inside —it is a transparent
         rectangle— and its 9999 px outward `box-shadow` darkens
         EVERYTHING else. This way the hole is truly a hole: what is
         being pointed at keeps its colors and its contrast, without cloning
         anything or touching the z-index of a menu entry, which is where
         these tours break the screen they want to show.

         ⚠️ z-index 1300: above the menu (50) and the app's overlays
         (1200), below `.wizvis-ov` (99990) — which is what one leaves
         to enter here, so they never coincide. */
      .tltour-ov{position:fixed; inset:0; z-index:1300}
      .tltour-hole{
        position:fixed; border-radius:10px; pointer-events:none;
        box-shadow:0 0 0 9999px rgba(0,0,0,.72);
        outline:2px solid var(--accent); outline-offset:1px;
        transition:top .22s ease, left .22s ease, width .22s ease, height .22s ease;
      }
      .tltour-pop{
        position:fixed; left:50%; transform:translateX(-50%);
        /* ⚠️ The REAL width is set by `tour.js` at each step: inside the body's
           `zoom`, `100vw` is multiplied again and the balloon overflowed on
           the sides. This is only the fallback if the script did not arrive. */
        /* ⛔ `.tltour-pop` is registered in the scrollers list of
           `app.js` (the `touchmove` handler that prevents the pull-to-
           refresh). Without that the balloon can be pulled down but NOT up, and the
           gesture gets stuck — see reference_scroll_overlay_allowlist.
           `touch-action:pan-y` ensures the vertical gesture, just like on
           `.wizvis-scroll`. */
        width:min(460px, calc(100vw - 24px)); overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y;
        /* Semi-transparent on purpose (Santi): it lets the menu behind be
           sensed, so it reads as a layer over the app and not as another
           screen. The dark veil behind sustains the contrast in both
           themes. */
        background:color-mix(in srgb, var(--card) 92%, transparent);
        -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
        border:1px solid var(--border); border-radius:14px;
        padding:15px 16px 13px;
        box-shadow:0 22px 50px -20px rgba(0,0,0,.7);
        transition:top .22s ease;
      }
      .tltour-pop:focus{outline:none}
      .tltour-pop:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
      .tltour-step{font-family:'Oswald',sans-serif; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
      .tltour-t{font-family:'Oswald',sans-serif; font-weight:600; font-size:18px; line-height:1.15; color:var(--text); margin-top:3px}
      .tltour-d{color:var(--muted); font-size:14px; line-height:1.55; margin-top:7px}
      .tltour-btns{display:flex; align-items:center; gap:8px; margin-top:15px}
      .tltour-btn{
        min-height:44px; padding:0 14px; cursor:pointer; border-radius:10px;
        font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.04em;
        text-transform:uppercase; font-size:14px;
        border:1.5px solid var(--border); background:var(--card); color:var(--text);
        display:inline-flex; align-items:center; justify-content:center;
        transition:background .18s, border-color .18s, opacity .18s;
      }
      /* ⛔ THREE DIFFERENT WEIGHTS, GRADED ON PURPOSE (Santi,
         2026-08-26): *«encourage them to press next, next, next
         until the end; if the close option is very obvious or very near
         next, then they can close it»*.
           · NEXT  — solid, in the brand color. It is what is expected.
           · BACK  — outline only. It is there when needed, without calling attention.
           · CLOSE — link, no box, dimmed and at the other end of the row.
         ⚠️ CLOSE IS TEXT AND NOT AN «X», even though an X would weigh even less:
         it has been a house rule for a long time (`feedback_cerrar_no_x`) and is not
         broken for one case. The weight is removed with styling, not by removing
         the letters.
         ⚠️ And it carries an UNDERLINE besides color: color cannot be the only
         indicator that something is tappable (UX-UI-normas §2). */
      /* ⚠️ IT IS DIMMED WITH OPACITY AND NOT WITH `var(--muted)`, and it is no whim:
         in DARK theme `--text`, `--muted`, `--text-dim` and `--text-muted`
         are all FOUR `#f0ede8` — so there is no level of
         secondary text there and painting it «dimmed» with a token dims nothing.
         Measured on 2026-08-26. (In light they do differ: #1a1a1a / #3a3631.)
         Opacity works the same in both themes and leaves the contrast well
         above the minimum. */
      .tltour-btn.ghost{
        background:transparent; border-color:transparent; color:var(--muted);
        font-size:13px; letter-spacing:.02em; padding:0 8px; margin-right:auto;
        text-decoration:underline; text-underline-offset:3px; opacity:.78;
      }
      .tltour-btn.ghost:hover{color:var(--text); border-color:transparent; opacity:1}
      .tltour-btn.ghost:focus-visible{opacity:1}
      .tltour-btn.gold{background:var(--accent); color:var(--accent-fg); border-color:var(--accent)}
      .tltour-btn.tltour-prev{background:transparent}
      .tltour-btn:hover{border-color:var(--accent)}
      .tltour-btn.gold:hover{filter:brightness(1.06)}
      .tltour-btn:disabled{opacity:.4; cursor:default}
      .tltour-btn:disabled:hover{border-color:var(--border)}
      .tltour-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
      @media (max-width:359px){ .tltour-btn{padding:0 10px; font-size:13px} }
      @media (prefers-reduced-motion:reduce){
        .tltour-hole{transition:none} .tltour-pop{transition:none} .tltour-btn{transition:none}
      }


      /* (The iOS 16 px minimum on touch controls lived here until 2026-09-29.
         It must be the LAST stylesheet to win by order, so it moved to its own
         sheet: css/ios-touch-min-font.css.) */