/* css/main/listing-bars-empty-state-and-improvements.css — part 16/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      /* ─────────────────────────────────────────────
         LIVE COMPETITION — list view (top-level), action bar
         ───────────────────────────────────────────── */
      .cv-link-bar {
        padding: 8px 16px 6px;
        text-align: center;
        flex-shrink: 0;
        display: flex;
        gap: 14px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
      }
      /* Catalogues bar: a single line, minimal gap. The labels are
         short (Organizers, Fields, Templates, Payments) and must fit on
         standard phone screens without scrolling. */
      .cv-link-bar.cv-link-bar-cats {
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
      }
      .cv-link-bar.cv-link-bar-cats .cv-link {
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
        padding: 4px 2px;
      }
      .cv-link-bar-sep {
        color: var(--muted);
      }
      .cv-link {
        background: none;
        border: none;
        color: var(--accent);
        font-size: 12px;
        cursor: pointer;
        font-family: "Inter", sans-serif;
        text-decoration: underline;
        text-underline-offset: 2px;
        padding: 4px 6px;
        border-radius: 6px;
      }
      .cv-link:hover { color: #e0bd5a; }
      .cv-link:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .cv-listing-bar {
        padding: 8px 12px;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
        display: flex;
        gap: 8px;
      }
      .cv-listing-btn {
        flex: 1;
        min-height: 44px;
        padding: 0 6px;
        border-radius: 10px;
        font-family: "Oswald", sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        cursor: pointer;
        transition: opacity 0.15s, background 0.15s;
      }
      .cv-listing-btn:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .cv-listing-btn-primary {
        background: var(--accent);
        color: var(--accent-fg);
        border: none;
      }
      .cv-listing-btn-primary:active { opacity: 0.85; }
      .cv-listing-btn-secondary {
        background: var(--card);
        color: var(--text);
        border: 1px solid var(--border);
      }
      .cv-listing-btn-secondary:active { background: var(--hover-strong); }

      /* ⛔ "BACK — TO WHERE?" — still contextual, but NO LONGER LIVES HERE.
         First the button was hidden when the view was opened from the menu or
         from the nav bar (it's a ROOT: both exits are already on screen).
         Then the bar had to be hidden too, because `.cv-listing-bar` has a
         rule ABOVE and BELOW and what remained were two lines with a gap.

         On 2026-08-20, seeing Shooting fields already with the "+", Santi settled
         it at the root: *"the back button is now alone… I don't know if here a
         button next to the hamburger could be used"*. And that's right:
         a whole bar for a single button takes the most expensive line of the phone.

         Now it's `#hdrBackBtn`, in the header. The ten bars that only
         carried it were removed, and with them `.cv-btn-volver` and `solo-volver`.
         ⛔ Since 2026-08-22 it starts OFF and is only turned on by whoever builds
         the return (`tlNavConVuelta`); before it was the other way round and it showed everywhere. */

      /* ── People and access: the row that unfolds ───────────────────────
         Two lines per person; the detail (retention, permissions, buttons)
         appears on tapping the header. See the why in `_fila` of
         js/views/dispositivos.js. */
      .disp-cab { min-height: 44px; }
      .disp-galon {
        flex: 0 0 auto;
        color: var(--muted);
        transition: transform .18s ease;
      }
      .disp-fila.abierta .disp-galon { transform: rotate(180deg); }
      /* ⛔ Visible focus: the header is a control, and it is reached with the
         tab key. Without this, keyboard users don't know where they are. */
      /* ⛔ FOCUS INSIDE AND NOT OUTSIDE. With `outline-offset: 2px` the
         ring drew a golden box SEPARATE around the header, and on
         tapping the row on the tablet it stayed on: it looked like a frame of
         the layout, not a focus (Santi, 2026-08-20, with screenshot). Inward
         it reads as what it is —"you are here"— and doesn't invent a border. */
      .disp-cab:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
        border-radius: 10px;
      }
      /* ⛔ And the chevron is NOT animated if the system asks for less motion. */
      @media (prefers-reduced-motion: reduce) {
        .disp-galon { transition: none; }
      }
      /* ⛔ `.empty-state` WAS NOT DEFINED ANYWHERE, and it is used 33 times
         across the whole app: it is the empty state of almost every list.
         With no rule, each of those `<div>`s inherited whatever was above it —
         hence in the news channel it came out bold, with another size and
         another typeface "that I haven't seen anywhere in the app" (Santi,
         2026-08-20, final test)—.

         ⚠️ IT'S THE SAME FLAW AS `.card`, which also didn't exist and was discovered on
         2026-08-13 because the People and access list came out shifted. A
         class invented when writing HTML inside JavaScript gives no
         error: it simply does nothing, and what you see is the parent's
         inheritance, which changes depending on where it's painted. That's why the same empty state
         looked fine on some screens and odd on others.
         Guard: `tests/unit-clases-css-existen.test.js`. */
      /* ══ WHEN THERE'S NOTHING — a single piece for the whole app ═══════════
         ⛔ WHY (Santi, 2026-08-20). FOUR families were doing this:
         `.empty` (40 px emoji icon), `.empty-state` (a loose, centred
         sentence, on 24 screens), `.cv-empty-state` (the good one: icon, title
         and line) and `.tl-picker-empty`. Four different paddings and three ways
         of placing the icon. ONE remains.

         ⛔ THE ICON IS FROM THE SAME SET AS THE NAV BAR: SVG with `stroke-width:
         1.6`, `viewBox="0 0 24 24"`, MONOCHROME and in `currentColor`. Never an
         emoji, never a colour illustration. His complaint, looking at price
         Templates: "suddenly you put a blue icon there that looks like a
         credit card and doesn't fit at all".

         ⛔ AND THE TITLE IS READABLE: 16 px. If it's the only thing on the screen it
         can't be 13 px grey, like a footnote.

         ⚠️ Without children, `.empty-state` remains valid as a status block
         —"Loading…", "Offline: … read from the server", the permissions
         error—. Those are NOT empty states: they are situation notices and carry
         no icon or title. */
      .empty-state {
        padding: 28px 16px;
        text-align: center;
        font-size: 13px;
        line-height: 1.6;
        color: var(--muted);
      }
      .empty-state-ic {
        display: flex;
        justify-content: center;
        margin-bottom: 12px;
        color: var(--muted);
        opacity: 0.75;
      }
      .empty-state-ic svg { width: 44px; height: 44px; }
      .empty-state-t {
        font-family: "Oswald", sans-serif;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.4px;
        color: var(--text);
        line-height: 1.35;
      }
      .empty-state-s {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.5;
        margin-top: 6px;
        max-width: 34ch;
        margin-left: auto;
        margin-right: auto;
      }
      /* The one action under an empty state (e.g. «Vinculaciones» when not
         affiliated with anyone): same side margins as the block above, never
         edge to edge, and not wider than a phone column on a big screen. */
      /* ⛔ ONE SIZE EVERYWHERE (Santi, 2026-09-29: in News it filled the whole
         width and elsewhere it didn't). The size is set HERE, not inherited
         from each screen's container, so all five screens match. */
      .empty-state-acc {
        display: flex;
        justify-content: center;
        margin: -12px 0 0;
        padding: 0 16px 16px;
      }
      .empty-state-acc .btn-primary {
        width: auto;
        min-width: 200px;
        max-width: 100%;
        min-height: 44px;
        margin: 0;
        padding: 10px 28px;
      }
      /* The updated legal texts notice (js/app.js, tlLegalAviso): one
         button per document to read it, and "Understood" below. */
      .lav-docs { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
      .lav-docs .btn-secondary { margin: 0; }
      /* ══ IMPROVEMENTS (js/views/mejoras.js, 2026-09-28) ══════════════════
         The improvements log: one card per improvement, grouped by the
         version that shipped them. The TYPE goes on top and quiet (`.badge-quieto`),
         the title leads, and the tags close the card in small print. The
         modality carries its usual colour (the `--cv-type-*` tokens), and
         never colour alone: each tag states its name. */
      .mj-actual {
        text-align: center;
        font-family: "Oswald", sans-serif;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: 0.4px;
        color: var(--accent);
        margin: 4px 0 14px;
      }
      .mj-filtros { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
      .mj-grupo {
        font-family: "Oswald", sans-serif;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.5px;
        color: var(--text);
        margin: 20px 0 10px;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--border);
      }
      .mj-filtros + .mj-grupo { margin-top: 4px; }
      /* Compact (Santi, 2026-09-28): the usual card, with the page padding,
         .card's side margin and its own, ate too much width
         of a phone for a text that is already short. */
      .mj-item { padding: 10px 12px; margin: 0 0 8px; }
      .mj-tipo { display: block; margin-bottom: 4px; }
      .mj-tipo-correccion { color: var(--muted); }
      .mj-titulo {
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
        line-height: 1.35;
        margin: 0 0 6px;
      }
      .mj-texto { font-size: 14px; color: var(--text); line-height: 1.55; }
      .mj-texto p { margin: 0 0 8px; }
      .mj-texto p:last-child { margin-bottom: 0; }
      .mj-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
      .mj-et {
        background: var(--surface);
        color: var(--muted);
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 2px 9px;
        font-size: 12px;
        line-height: 1.5;
      }
      .mj-et-aire  { background: var(--cv-type-aire-bg);  color: var(--cv-type-aire-fg);  border-color: var(--cv-type-aire-bd); }
      .mj-et-fuego { background: var(--cv-type-fuego-bg); color: var(--cv-type-fuego-fg); border-color: var(--cv-type-fuego-bd); }
      .mj-et-aahh  { background: var(--cv-type-aahh-bg);  color: var(--cv-type-aahh-fg);  border-color: var(--cv-type-aahh-bd); }
      .mj-et-plato { background: var(--cv-type-plato-bg); color: var(--cv-type-plato-fg); border-color: var(--cv-type-plato-bd); }
      .cv-empty-prueba {
        font-size: 12px;
        color: var(--text);
        line-height: 1.55;
        margin-top: 14px;
        padding: 12px 14px;
        background: var(--accent-dim);
        border: 1px solid var(--border);
        border-radius: 10px;
      }