/* ==========================================================================
   Arcadoo : fondamenta del sistema visivo — versione 2 (23 settembre 2026)
   ==========================================================================
   Fonte UNICA dei token. Documentazione: DESIGN_SYSTEM.md (componenti,
   stati, uso) e DESIGN.md (normativo). Se un valore qui e' in disaccordo con
   DESIGN.md, vince DESIGN.md e questo file va corretto.

   Cosa cambia rispetto alla versione 1 (22 settembre)
   ---------------------------------------------------
   1. Vale su TUTTE le pagine, non piu' su un elenco di rotte: la classe
      `arca-ds` la mette sempre il <head> di layout_base.xml. `arca-elenco` e
      `arca-doc` restano e continuano a dire "che tipo di pagina e'".
   2. Tema scuro: `html[data-tema="scuro"]` ridefinisce gli stessi token. Chi
      usa i token eredita il tema senza scrivere una riga.
   3. Contrasto AA misurato su ogni coppia (vedi DESIGN_SYSTEM.md §Colore):
      quattro coppie della v1 non passavano (bianco sul verde 3,13:1, blu dei
      codici 4,07:1, grigio etichetta 4,37:1, contorno dei campi 1,49:1).
   4. I caratteri IBM Plex sono ospitati qui (static/src/fonts). Nella v1
      erano dichiarati ma nessuno li caricava: si vedeva Arial.
   5. Nomi di "ruolo" per i colori pieni: `--X-fill` e' il fondo, `--on-X` il
      testo che ci va sopra. In scuro il blu pieno e' chiaro e il testo sopra
      diventa scuro: con un solo nome non si potrebbe dire.

   I nomi della v1 (--accent-dark, --azione, --giallo, --warn, --crit, --ok,
   --s-*, --h-*) restano come alias: arca_elenchi.css, arca_documento.css e
   arca_dashboard_nuova.css li usano.
   ========================================================================== */

/* --- caratteri: IBM Plex, licenza OFL (static/src/fonts/LICENSE-OFL.txt) --- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/plex-sans-latin-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/plex-sans-latin-ext-400.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap;
    src: url("../fonts/plex-sans-latin-400-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("../fonts/plex-sans-latin-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("../fonts/plex-sans-latin-ext-500.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../fonts/plex-sans-latin-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../fonts/plex-sans-latin-ext-600.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/plex-sans-latin-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/plex-sans-latin-ext-700.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/plex-mono-latin-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/plex-mono-latin-ext-400.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("../fonts/plex-mono-latin-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../fonts/plex-mono-latin-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }

/* ==========================================================================
   Token — tema chiaro (predefinito)
   ========================================================================== */
:root {
    color-scheme: light;

    /* --- superfici ------------------------------------------------------- */
    --ground:         #f5f7fb;   /* Carta: fondo di ogni pagina */
    --surface:        #ffffff;   /* Superficie: tabelle, pannelli, barre */
    --surface-alt:    #f1f3f7;   /* Superficie Fredda: intestazioni, cassetti */
    --surface-raised: #ffffff;   /* sopra il lavoro: modali, menu, suggerimenti */
    --surface-sunken: #e9edf3;   /* incavo: pista delle barre, campi di sola lettura */

    /* --- inchiostri ------------------------------------------------------ */
    --ink:    #2f363d;   /* 11,9:1 su Superficie */
    --ink-2:  #495057;   /* 8,2:1 — testo dei controlli */
    --muted:  #5f6b78;   /* 5,4:1 su bianco, 5,1:1 su Carta, 4,9:1 su Fredda */
    --ink-disabled: #8a939d; /* solo su controlli disattivati (esenti AA) */

    /* --- fili ------------------------------------------------------------ */
    --line:        #dfe3e8;   /* separatore fra righe: decorativo */
    --line-strong: #c9d0d8;   /* contorno di pannelli e schede */
    --line-campo:  #7d8793;   /* contorno dei CONTROLLI: 3,6:1 su bianco, 3,2:1 su Fredda (soglia 1.4.11) */

    /* --- blu: cio' su cui si agisce, e dove ti trovi --------------------- */
    --accent:            #2a63b8;   /* testo/icone/link: 5,9:1 su bianco */
    --accent-fill:       #2a63b8;   /* pulsante primario */
    --accent-fill-hover: #22539b;
    --on-accent:         #ffffff;   /* 5,9:1 */
    --accent-soft:       #e6effc;   /* fondo di selezione e stato acceso */
    --accent-soft-ink:   #2a5aa6;   /* testo sopra il blu tenue: 5,4:1 */
    --focus:             #3b7ddd;   /* anello di fuoco: 4,1:1, soglia 3:1 */

    /* --- verde: l'azione che conclude, e l'esito positivo ---------------- */
    --azione-fill:       #1f7a3a;   /* "Salva documento": bianco 5,4:1 */
    --azione-fill-hover: #18632f;
    --on-azione:         #ffffff;
    --ok-ink:            #1b6b33;   /* testo verde: 6,2:1 */
    --ok-soft:           #dcf1e2;

    /* --- giallo: qualcosa aspetta una decisione -------------------------- */
    --warn-fill:       #f5b800;     /* sempre con testo scuro */
    --warn-fill-hover: #dca600;
    --on-warn:         #241b00;
    --warn-ink:        #7a5a00;     /* testo giallo-bruno: 6,4:1 */
    --warn-icon:       #9a7300;     /* icone gialle (stelle, avvisi): 4,3:1, soglia 3:1 */
    --warn-soft:       #fff4cf;

    /* --- rosso: blocco, errore, eliminazione ----------------------------- */
    --crit-fill:       #c62f3c;     /* bianco 5,4:1 */
    --crit-fill-hover: #a82632;
    --on-crit:         #ffffff;
    --crit-ink:        #b3261e;     /* testo rosso: 6,5:1 */
    --crit-soft:       #fbe3e5;

    /* --- informazione neutra (non e' un'azione) -------------------------- */
    --info-ink:  #245a8a;
    --info-soft: #e5f0f8;

    /* --- navigazione: la sola superficie scura nel tema chiaro ----------- */
    --nav-bg:           #1c2530;
    --nav-bg-2:         #232e3b;   /* sottomenu, riquadro a comparsa */
    --nav-ink:          #d3dae3;   /* 11,5:1 */
    --nav-ink-muted:    #95a3b3;   /* titoli di gruppo: 6,3:1 */
    --nav-hover:        rgba(255, 255, 255, 0.07);
    --nav-current-bg:   rgba(122, 169, 239, 0.18);
    --nav-current-ink:  #ffffff;
    --nav-accent:       #7aa9ef;   /* filetto della voce corrente */
    --nav-line:         rgba(255, 255, 255, 0.10);
    --topbar-bg:        #ffffff;

    /* --- ombre: solo cio' che si stacca davvero -------------------------- */
    --ombra-sospeso:   0 8px 24px rgba(15, 23, 34, 0.16);
    --ombra-sopra:     6px 0 18px rgba(15, 23, 34, 0.28);
    --ombra-fluttua:   0 -4px 10px rgba(15, 23, 34, 0.07);
    --ombra-modale:    0 18px 48px rgba(15, 23, 34, 0.24);
    --velo:            rgba(15, 23, 34, 0.48);   /* sotto modali e cassetto */

    /* --- forma: quattro pixel dentro, sei fuori -------------------------- */
    --r-sm: 4px;
    --r-md: 6px;
    --r-pill: 999px;

    /* --- ritmo ----------------------------------------------------------- */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
    /* alias v1 */
    --s-xs: 4px; --s-sm: 8px; --s-md: 10px; --s-lg: 14px; --s-xl: 18px;

    /* --- densita' ---------------------------------------------------------
       Le altezze sono il contratto di ogni barra comandi: tutti gli elementi
       di una riga prendono la stessa, invece di ricavarla dal padding. */
    --h-riga:      30px;   /* riga di tabella */
    --h-controllo: 32px;   /* pulsanti, campi e select di una barra */
    --h-primario:  34px;   /* l'azione che conclude */
    --h-campo:     38px;   /* campo di ricerca principale */
    --h-voce:      32px;   /* voce di navigazione */
    --h-testata:   52px;   /* testata di pagina */
    --h-topbar:    44px;   /* barra superiore */
    --w-nav:       248px;
    --w-nav-icone: 56px;

    /* --- scala tipografica: px fissi, rapporto ~1,15 ----------------------
       Minimo 11 px. Nella v1 etichette e intestazioni stavano a 9,5-10 px,
       cioe' 7 px effettivi con lo zoom al 75% che usano gli operatori. */
    --fs-xs:      11px;   /* etichette in maiuscoletto, intestazioni di tabella, badge */
    --fs-sm:      12px;   /* note, testo secondario, piè di tabella */
    --fs-body:    13px;   /* celle, campi, voci, descrizioni */
    --fs-title:   14px;   /* titolo di pannello, nome nella striscia documento */
    --fs-subhead: 16px;   /* titolo di sezione di pagina */
    --fs-headline:18px;   /* titolo della pagina: uno per schermata */
    --fs-display: 26px;   /* solo gli indicatori delle dashboard */
    --lh-stretto: 1.2;
    --lh-body:    1.4;
    --ls-label:   0.06em;

    --f-ui:   "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --f-dato: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* --- movimento: comunica uno stato, non intrattiene ------------------- */
    --t-stato:    150ms;
    --t-pannello: 250ms;
    --ease:       cubic-bezier(0.2, 0, 0, 1);

    /* --- piani ---------------------------------------------------------- */
    --z-topbar:  1020;
    --z-velo:    1030;
    --z-nav:     1040;
    --z-flyout:  1045;
    --z-popover: 1070;
    --z-palette: 1080;
    --z-avviso:  1090;

    /* --- alias v1: nomi usati dai fogli del 22 settembre ------------------ */
    --accent-dark: var(--accent-soft-ink);
    --azione:      var(--azione-fill);
    --azione-dark: var(--azione-fill-hover);
    --ok:          var(--ok-ink);
    --giallo:      var(--warn-fill);
    --warn:        var(--warn-ink);
    --crit:        var(--crit-fill);
    --navigazione: var(--nav-bg);
    /* alias del vecchio <style> di layout_base.xml, usati da home.xml e
       reports.xml finche' non sono ridisegnate */
    --arcadoo-blue:  var(--accent);
    --arcadoo-green: var(--azione-fill);
    --content-bg:    var(--ground);
    --sidebar-bg:    var(--nav-bg);
}

/* ==========================================================================
   Token — tema scuro
   ==========================================================================
   Scelto dall'utente (menu utente → Tema), ricordato nel browser. Con
   "Come il sistema" segue prefers-color-scheme: lo script nel <head> di
   layout_base.xml traduce la scelta in data-tema prima del primo disegno.
   Il fondo non e' nero: e' un grigio-blu scuro, per non far vibrare il testo
   chiaro a otto ore di distanza. */
html[data-tema="scuro"] {
    color-scheme: dark;

    --ground:         #101419;
    --surface:        #171c23;
    --surface-alt:    #1e242d;
    --surface-raised: #212831;
    --surface-sunken: #0c1014;

    --ink:    #e3e7ec;   /* 13,8:1 */
    --ink-2:  #c3cad3;
    --muted:  #98a4b2;   /* 6,6:1 su Superficie */
    --ink-disabled: #66717e;

    --line:        #2a323d;
    --line-strong: #36404d;
    --line-campo:  #6b7785;   /* 3,6:1 su Superficie */

    --accent:            #7aa9ef;   /* 7,1:1 */
    --accent-fill:       #7aa9ef;
    --accent-fill-hover: #97bdf4;
    --on-accent:         #0b1526;   /* 7,6:1 */
    --accent-soft:       #1b2a42;
    --accent-soft-ink:   #a9c8f5;
    --focus:             #8fb8f3;

    --azione-fill:       #3aa864;
    --azione-fill-hover: #52b979;
    --on-azione:         #06130b;
    --ok-ink:            #6fd192;
    --ok-soft:           #14301f;

    --warn-fill:       #e8b923;
    --warn-fill-hover: #f0c84a;
    --on-warn:         #1a1400;
    --warn-ink:        #ecc75c;
    --warn-icon:       #e8b923;
    --warn-soft:       #33290c;

    --crit-fill:       #f0857f;
    --crit-fill-hover: #f49f9a;
    --on-crit:         #2a0a0c;
    --crit-ink:        #f39a95;
    --crit-soft:       #3a1719;

    --info-ink:  #8ec3ea;
    --info-soft: #14283a;

    --nav-bg:          #0c1116;
    --nav-bg-2:        #141b23;
    --nav-ink:         #cdd5df;
    --nav-ink-muted:   #8795a6;
    --nav-hover:       rgba(255, 255, 255, 0.06);
    --nav-current-bg:  rgba(122, 169, 239, 0.16);
    --nav-line:        rgba(255, 255, 255, 0.08);
    --topbar-bg:       #171c23;

    --ombra-sospeso: 0 8px 24px rgba(0, 0, 0, 0.5);
    --ombra-sopra:   6px 0 18px rgba(0, 0, 0, 0.6);
    --ombra-fluttua: 0 -4px 10px rgba(0, 0, 0, 0.4);
    --ombra-modale:  0 18px 48px rgba(0, 0, 0, 0.6);
    --velo:          rgba(0, 0, 0, 0.62);
}

/* Schermi touch: i bersagli salgono a 40 px (WCAG 2.5.8 chiede 24, il pollice
   ne vuole di piu'). La densita' resta quella del mouse dove c'e' un mouse. */
@media (pointer: coarse) {
    :root { --h-controllo: 40px; --h-primario: 42px; --h-campo: 42px; --h-voce: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    :root { --t-stato: 0ms; --t-pannello: 0ms; }
}

/* ==========================================================================
   Base: carattere, colore, superfici disegnate dal browser
   ==========================================================================
   Il blocco <style> di layout_base.xml e alcune pagine impongono
   `font-family: Inter !important` e `background-color: ... !important` su
   html e body. Un !important DENTRO un @layer vince su un !important fuori
   da ogni layer (Cascade 5: per le dichiarazioni importanti l'ordine dei
   layer si inverte), quindi qui basta un layer per prevalere senza gara di
   specificita'. Il layer `arca-forza` si usa solo per questo: vincere su
   !important preesistenti. */
@layer arca-forza {
    html.arca-ds,
    html.arca-ds body {
        font-family: var(--f-ui) !important;
        background-color: var(--ground) !important;
    }
    /* Un solo anello di fuoco per tutto il sistema. Nella v1 perdeva contro
       `outline: none !important` su paginazione, export e griglia righe. */
    html.arca-ds :focus-visible {
        outline: 2px solid var(--focus) !important;
        outline-offset: 2px !important;
    }
    html.arca-ds input:focus-visible,
    html.arca-ds select:focus-visible,
    html.arca-ds textarea:focus-visible {
        outline-offset: 0 !important;
    }
}

html.arca-ds {
    font-size: 16px;               /* 1rem = 16 px: le pagine usano i rem di Bootstrap */
    color: var(--ink);
    caret-color: var(--accent);
    font-variant-numeric: tabular-nums;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
html.arca-ds body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html.arca-ds ::selection {
    background: var(--accent-soft);
    color: var(--accent-soft-ink);
}

/* Barre di scorrimento: sottili e nei grigi del sistema. */
html.arca-ds * {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}
html.arca-ds ::-webkit-scrollbar { width: 10px; height: 10px; }
html.arca-ds ::-webkit-scrollbar-track { background: transparent; }
html.arca-ds ::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: var(--r-pill);
}
html.arca-ds ::-webkit-scrollbar-thumb:hover { background-color: var(--muted); background-clip: content-box; }
html.arca-ds ::-webkit-scrollbar-corner { background: transparent; }

html.arca-ds ::placeholder { color: var(--muted); opacity: 1; }

/* Titoli: la scala di Bootstrap arriva a 2,5 rem con calc() sul viewport,
   cioe' titoli che cambiano misura con la finestra (Regola della Scala
   Fissa). Qui la scala e' quella del sistema; le testate di pagina usano
   .ads-testata e non questi. */
:where(html.arca-ds) h1, :where(html.arca-ds) .h1 { font-size: var(--fs-headline); font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; }
:where(html.arca-ds) h2, :where(html.arca-ds) .h2 { font-size: var(--fs-subhead);  font-weight: 600; line-height: 1.3; }
:where(html.arca-ds) h3, :where(html.arca-ds) .h3 { font-size: 15px;               font-weight: 600; line-height: 1.3; }
:where(html.arca-ds) h4, :where(html.arca-ds) .h4,
:where(html.arca-ds) h5, :where(html.arca-ds) .h5 { font-size: var(--fs-title);    font-weight: 600; line-height: 1.35; }
:where(html.arca-ds) h6, :where(html.arca-ds) .h6 { font-size: var(--fs-body);     font-weight: 600; line-height: 1.35; }
/* I titoli ereditano il colore: su una fascia colorata (pagine non ridisegnate)
   il contenitore li fa bianchi, e un colore imposto qui li scuriva (MDB-073). */

:where(html.arca-ds) a { color: var(--accent); text-underline-offset: 2px; }
:where(html.arca-ds) a:hover { color: var(--accent-fill-hover); }
html[data-tema="scuro"] :where(.arca-ds) a:hover { color: var(--accent-soft-ink); }

:where(html.arca-ds) small, :where(html.arca-ds) .small { font-size: var(--fs-sm); }
:where(html.arca-ds) code, :where(html.arca-ds) kbd, :where(html.arca-ds) samp,
:where(html.arca-ds) .ads-dato { font-family: var(--f-dato); font-variant-numeric: tabular-nums; }
:where(html.arca-ds) kbd {
    font-size: var(--fs-xs);
    padding: 1px 5px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: var(--r-sm);
    background: var(--surface-alt);
    color: var(--ink-2);
}
html.arca-ds hr { border-color: var(--line); opacity: 1; }

/* ==========================================================================
   Icone di apertura e chiusura (dalla v1)
   ========================================================================== */
.ads-chevron {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    display: inline-block;
    color: currentColor;
    transition: transform var(--t-stato) var(--ease);
}
.ads-chevron path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
[aria-expanded="true"] > .ads-chevron,
.ads-aperto > .ads-chevron { transform: rotate(180deg); }

/* ==========================================================================
   Utilita' di accessibilita'
   ========================================================================== */
.ads-sr-only,
html.arca-ds .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* "Vai al contenuto": primo elemento della pagina, visibile solo al fuoco. */
.ads-salta {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 8px 14px;
    background: var(--accent-fill);
    color: var(--on-accent) !important;
    border-radius: var(--r-md);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform var(--t-stato) var(--ease);
}
.ads-salta:focus { transform: translateY(0); }