/* css/main/info-boxes-cards-and-news.css — part 10/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      /* An `.info-box` that opens a list and needs to be separated from it. It exists
         as a CLASS and not as `style="margin-bottom:12px"` because inline
         style on an element that already has a class is invisible to the token
         guard and the scale guard, and gets copied and pasted without thinking. */
      .info-box-sep { margin-bottom: 12px; }
      .info-box {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 14px;
        font-size: 13px;
        line-height: 1.6;
        color: var(--muted);
        margin-bottom: 16px;
      }
      .info-box strong {
        color: var(--text);
      }
      /* ══ ALERT BOX — «this must be read before continuing» ═══════════
         Sister of `.info-box`, and born because there was none: the first place
         that needed a notice of this weight —the anti-fraud disclaimer of the
         wizard, in `index.html`— solved it with loose styles and a fixed hex
         (`#c0392b`), which is exactly what the norms forbid and what leaves a
         color computed for one theme painting in the other.

         ⛔ THE ROLE, and that is why it is `--alerta` and not `--warn`: `--warn` says «this
         is worth looking at» and this says «this must be read». It is the distinction
         the token already had written; here it is only used.

         PLANE 0 — no shadow, on purpose: a notice does not float above the
         text, it belongs to it. What floats is the dialog that contains it. */
      .alert-box {
        background: var(--alerta-dim);
        border: 1px solid var(--alerta);
        border-radius: 10px;
        padding: 14px;
        font-size: 13px;
        line-height: 1.6;
        color: var(--text);
        margin-bottom: 16px;
      }
      /* The title carries icon + text: color CANNOT be the only signal
         (§2 of the norms), and whoever cannot tell red apart has to see all the same that
         this weighs more than a paragraph. */
      .alert-box-title {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--alerta);
        font-weight: 700;
        font-size: 13px;
        letter-spacing: .5px;
        margin-bottom: 8px;
      }
      .alert-box-title svg {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
      }
      .alert-box strong {
        color: var(--text);
      }
      /* The «I have read it» checkbox. The touch area is the WHOLE LABEL, not
         the little 16 px square: with a finger, hitting a native checkbox is
         precisely the gesture that fails and makes one think the screen does not respond. */
      .alert-check {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        min-height: 44px;
        padding: 8px 0 0;
        cursor: pointer;
        line-height: 1.5;
      }
      .alert-check input[type="checkbox"] {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        margin: 0;
        accent-color: var(--alerta);
        cursor: pointer;
      }
      .alert-check input[type="checkbox"]:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      /* ⛔ `.card` DID NOT EXIST, and it was used in four places. All four painted
         a `<div class="card">` that was not a card: no background, no
         border, no padding and NO SPACING. That is why the People and
         access list came out run together, with one row's manager stuck to the
         next (Santi saw it on 2026-08-13). It was not that a separator was missing:
         the whole class was.
         Same visual language as `.info-box` and `.mc-card`, which are the
         cards the app already had. */
      /* PLANE 1 — rests on the background. The shadow does the job that before
         a 1 px line did alone, so the border is thinned and stops
         competing: two signals for the same thing cancel each other. */
      /* Radius 14, the same as Score and the directory: the app's card
         was at 10 and looked harder than theirs (Santi, 2026-08-20). */
      .card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px;
        /* 12 px, not 8: it is the same air that the directory cards leave
           (`.cc-card`), and with a lateral margin of 8 it fell short — the cards
           read as a continuous block instead of as separate pieces. Two
           card families with two different spacings was, besides, another
           of the drifts of 2026-08-27. */
        margin-bottom: 12px;
        box-shadow: var(--elev-1);
      }
      /* The last one does not drag a gap: a margin at the end of the list separates
         nothing from nothing, it only throws off whatever comes below. */
      .card:last-child {
        margin-bottom: 0;
      }
      /* ══ THE ORGANIZATION'S NEWS CHANNEL (2026-08-14) ══
         It moved from the directory to the app, so its styles did too. ⛔ Only
         theme variables, never hex: the same error that left the «unused»
         chip brown on black in People and access, and that is not seen by reading
         the code because it only breaks in one theme. */
      /* ⛔ HERE LIVED `.not-chips` AND `.not-chip`, and they are gone entirely
         (2026-08-21). They were the SECOND family of filter pill: the comment
         of `.chip`, above, had already declared on 2026-08-20 that only one would remain,
         but only half was done —`.chip` received the colors by
         discipline and this one stayed alive—. And it was not neutral: it forced the 44 px
         touch target on the BOX (`min-height`), so the five channels of the
         publish selector took two lines where the Manage
         competitions filter fits on one. `.chip` solves it with an overlaid
         sensitive zone that does not widen the pill.
         No compatibility layer: the News channel uses `.chip` with
         `.chip-aire/-fuego/-aahh/-plato`, which are the same four classes and the
         same `--cv-type-*` tokens as always. */
      .not-row {
        cursor: pointer;
        border: 1px solid var(--border);
        /* ⚠️ The width lives HERE and not in the row's `style=` (2026-08-27): a
           `<button>` with automatic width shrinks to its text, so it
           has to be declared — and inline it cannot be corrected from the sheet, which is
           what the shooter's screen needs to give it its margin. */
        width: 100%;
      }
      .not-row:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .not-row-top {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
      }
      .not-ch {
        font-family: "Oswald", sans-serif;
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--accent);
      }
      /* ⛔ The badge ALWAYS carries its text: nothing is told apart by color alone.
         A «Deleted» news item has to read as deleted, not just look more muted. */
      .not-badge {
        background: var(--surface);
        color: var(--muted);
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 2px 8px;
        font-size: 11px;
      }
      .not-badge-del {
        background: var(--warn-dim);
        color: var(--warn);
        border-color: var(--warn);
      }
      .not-row-t {
        font-size: 14px;
        font-weight: 500;
        color: var(--text);
        line-height: 1.35;
      }
      .not-row-sub {
        font-size: 12px;
        color: var(--muted);
        margin-top: 4px;
      }
      /* ⛔ `.chip-row` DID NOT EXIST and yet `.chip-row-tight` presupposes it:
         the latter only ADJUSTS (do not wrap, less gap, lateral scrolling)
         and sets not even `display:flex`. Whoever used it made up for it with
         inline style, so every filter row was laid out on its
         own. The filter row is ONE job and has ONE family. */
      .chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 8px;
      }
      /* Checkbox + text row, with the full touch target: the entire `label`
         is pressable, not just the little 18 px square. */
      .chk-row {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        padding: 8px 12px;
        margin-top: 8px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 10px;
        font-size: 14px;
        color: var(--text);
        cursor: pointer;
      }
      .chk-row input[type="checkbox"] {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        accent-color: var(--accent);
        cursor: pointer;
      }
      .chk-row:focus-within {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }