/* ============================================================================
   Tema di RequestOnline.
   
   **Perche' un foglio di stile e non un rifacimento.** Le 56 pagine di questa
   applicazione usano tutte le classi standard di Bootstrap: btn, card, table, badge.
   Bootstrap 5.3 le disegna a partire da variabili CSS, quindi ridefinendo quelle si
   cambia l'aspetto di tutte e 56 senza toccarne nessuna. Riscrivere le pagine
   significherebbe rimettere le mani su codice che funziona — e su un gestionale, una
   regressione la notano tutti mentre un bordo piu' o meno tondo non lo nota nessuno.

   Il carattere di questo tema: **densita' da strumento di lavoro, non da sito
   vetrina.** Chi usa un ticketing ci passa la giornata e guarda elenchi: conta che le
   righe si distinguano, che i numeri si incolonnino e che lo stato di un ticket si
   legga senza fermarsi a pensare. Le ombre sono appena accennate, i raggi piccoli, e
   il colore e' speso dove porta informazione invece che decorazione.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Le basi
   --------------------------------------------------------------------------- */
:root {
    /* Il blu del prodotto, portato dal #183e5c originale verso qualcosa che regga
       accanto a un'interfaccia contemporanea senza diventare un altro marchio. */
    --ro-blu-50:  #eef4fb;
    --ro-blu-100: #d8e6f6;
    --ro-blu-200: #b3cdec;
    --ro-blu-300: #7faadd;
    --ro-blu-400: #4a82c9;
    --ro-blu-500: #2b63ae;
    --ro-blu-600: #1f4d8f;
    --ro-blu-700: #1a3f73;
    --ro-blu-800: #17355d;
    --ro-blu-900: #142b4b;
    --ro-blu-950: #0d1b30;

    /* Neutri con una punta di freddo: un grigio perfettamente neutro sembra non
       scelto, e accanto a un blu vira visibilmente al giallo. */
    --ro-grigio-50:  #f7f8fa;
    --ro-grigio-100: #eef0f4;
    --ro-grigio-200: #e2e5eb;
    --ro-grigio-300: #cbd0da;
    --ro-grigio-400: #98a1b2;
    --ro-grigio-500: #6b7588;
    --ro-grigio-600: #4e576a;
    --ro-grigio-700: #3a4152;
    --ro-grigio-800: #262c3a;
    --ro-grigio-900: #171c27;
    --ro-grigio-950: #0e1119;

    /* Gli stati. Verde e rosso spostati verso toni meno acidi di quelli di serie:
       in un elenco di cinquanta righe il rosso Bootstrap urla. */
    --ro-verde:   #0f8a5f;
    --ro-verde-c: #e6f6ef;
    --ro-ambra:   #b06f00;
    --ro-ambra-c: #fdf3e0;
    --ro-rosso:   #c2384a;
    --ro-rosso-c: #fceef0;
    --ro-info:    #1b7fa8;
    --ro-info-c:  #e6f4f9;

    --ro-ombra-1: 0 1px 2px rgba(15, 23, 42, .05);
    --ro-ombra-2: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
    --ro-ombra-3: 0 4px 12px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .04);

    --ro-raggio:   8px;
    --ro-raggio-s: 6px;
    --ro-raggio-l: 12px;

    --ro-fondo:     var(--ro-grigio-50);
    --ro-superficie: #ffffff;
    --ro-bordo:     var(--ro-grigio-200);
    --ro-testo:     var(--ro-grigio-900);
    --ro-testo-2:   var(--ro-grigio-500);
    --ro-barra:     var(--ro-blu-950);
}

/* Le variabili di Bootstrap, riscritte: e' da qui che passano tutte le pagine. */
:root,
[data-bs-theme="light"] {
    --bs-primary: var(--ro-blu-600);
    --bs-primary-rgb: 31, 77, 143;
    --bs-primary-text-emphasis: var(--ro-blu-800);
    --bs-primary-bg-subtle: var(--ro-blu-50);
    --bs-primary-border-subtle: var(--ro-blu-200);

    --bs-success: var(--ro-verde);
    --bs-success-rgb: 15, 138, 95;
    --bs-success-bg-subtle: var(--ro-verde-c);
    --bs-success-text-emphasis: #0a6344;

    --bs-warning: var(--ro-ambra);
    --bs-warning-rgb: 176, 111, 0;
    --bs-warning-bg-subtle: var(--ro-ambra-c);
    --bs-warning-text-emphasis: #7d4f00;

    --bs-danger: var(--ro-rosso);
    --bs-danger-rgb: 194, 56, 74;
    --bs-danger-bg-subtle: var(--ro-rosso-c);
    --bs-danger-text-emphasis: #8d2635;

    --bs-info: var(--ro-info);
    --bs-info-rgb: 27, 127, 168;
    --bs-info-bg-subtle: var(--ro-info-c);

    --bs-body-bg: var(--ro-fondo);
    --bs-body-color: var(--ro-testo);
    --bs-secondary-color: var(--ro-testo-2);
    --bs-border-color: var(--ro-bordo);
    --bs-border-radius: var(--ro-raggio);
    --bs-border-radius-sm: var(--ro-raggio-s);
    --bs-border-radius-lg: var(--ro-raggio-l);
    --bs-link-color: var(--ro-blu-600);
    --bs-link-hover-color: var(--ro-blu-800);
}

/* ---------------------------------------------------------------------------
   2. Tipografia
   
   Due caratteri e non uno: l'interfaccia in un grottesco moderno, i codici e le
   cifre in un monospaziato. **Un numero di ticket e un indirizzo MAC letti in un
   carattere proporzionale si sbagliano**, e in assistenza si leggono a voce al
   telefono tutto il giorno.
   --------------------------------------------------------------------------- */
html, body {
    color: var(--ro-testo);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.006em;
}

code, kbd, samp, pre, .font-mono, .ticket-num {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    font-size: 0.9em;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 650;
    letter-spacing: -0.02em;
    /* **Il colore si eredita, non si impone.** Un titolo dentro un'intestazione blu o dentro
       una scheda colorata prende il bianco dal genitore; fissare qui il grigio scuro lo
       batterebbe — l'ereditarieta' perde sempre contro un selettore, per debole che sia — e il
       titolo tornerebbe nero su fondo scuro. E' esattamente cosi' che si rompono le
       intestazioni colorate senza accorgersene, perche' sulle pagine chiare non si vede. */
    color: inherit;
    text-wrap: balance;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.22rem; }
h4 { font-size: 1.08rem; }
h5 { font-size: 0.98rem; }

/* Le cifre si incolonnano: in una tabella di importi o di conteggi, cifre di
   larghezza diversa fanno ballare le colonne a ogni aggiornamento. */
table, .table, .tabular, td, th, .badge {
    font-variant-numeric: tabular-nums;
}

.text-muted { color: var(--ro-testo-2) !important; }

/* Le superfici scure portano con se' il testo chiaro, e se lo passano ai figli.
   
   Le utility di Bootstrap colorano il fondo ma non decidono il testo: sta alla pagina
   aggiungere `text-white`, e su decine di schermate qualcuno se lo dimentica. Dirlo qui una
   volta sola vale per tutte, comprese quelle scritte domani.
   
   I badge sono esclusi di proposito: li' `bg-primary` significa una pastiglia a pieno tenue
   con testo scuro, che e' il contrario. */
.bg-primary:not(.badge), .bg-dark:not(.badge), .bg-success:not(.badge),
.bg-danger:not(.badge), .bg-info:not(.badge), .bg-secondary:not(.badge),
.card-header.bg-primary, .card-header.bg-dark, .card-header.bg-success,
.card-header.bg-danger, .card-header.bg-info, .card-header.bg-secondary {
    color: #fff;
}

/* I discendenti seguono la superficie su cui stanno, invece di ripescare il colore del
   corpo: e' quello che fa restare bianchi i sottotitoli e le icone dentro un'intestazione. */
.bg-primary:not(.badge) :where(h1,h2,h3,h4,h5,h6,p,span,small,div,i,strong,label),
.bg-dark:not(.badge)    :where(h1,h2,h3,h4,h5,h6,p,span,small,div,i,strong,label),
.bg-success:not(.badge) :where(h1,h2,h3,h4,h5,h6,p,span,small,div,i,strong,label),
.bg-danger:not(.badge)  :where(h1,h2,h3,h4,h5,h6,p,span,small,div,i,strong,label),
.bg-info:not(.badge)    :where(h1,h2,h3,h4,h5,h6,p,span,small,div,i,strong,label) {
    color: inherit;
}

/* Un testo dichiarato «spento» dentro una superficie scura non puo' restare grigio ferro:
   si schiarisce, mantenendo la gerarchia invece di sparire. */
.bg-primary:not(.badge) .text-muted, .bg-dark:not(.badge) .text-muted,
.bg-success:not(.badge) .text-muted, .bg-danger:not(.badge) .text-muted,
.bg-info:not(.badge) .text-muted, [class*="gradient"] .text-muted {
    color: rgba(255, 255, 255, .78) !important;
}

/* Dove la pagina ha gia' dichiarato testo chiaro, tutto quello che sta dentro lo segue.
   Vale per le schede della dashboard, che hanno un gradiente scritto a mano e si affidano a
   `text-white` sul contenitore. */
.text-white :where(h1,h2,h3,h4,h5,h6,p,span,small,div,i,strong,label),
.text-white-50, .text-white .text-white-50 {
    color: inherit;
}
.text-white-50 { opacity: .82; }

/* ---------------------------------------------------------------------------
   3. La struttura: barra laterale e area di lavoro
   --------------------------------------------------------------------------- */
.page { background: var(--ro-fondo); }

.sidebar {
    background: var(--ro-barra) !important;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.sidebar .top-row {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    height: 3.75rem;
}

.sidebar .navbar-brand {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    font-size: 1.05rem;
}

.sidebar .nav-item { padding-bottom: .15rem; font-size: .875rem; }

.sidebar .nav-item ::deep a,
.sidebar .nav-link {
    color: rgba(255, 255, 255, .68) !important;
    border-radius: var(--ro-raggio-s);
    height: 2.4rem;
    line-height: 2.4rem;
    padding: 0 .7rem;
    margin: 0 .15rem;
    font-weight: 500;
    transition: background-color .12s ease, color .12s ease;
}

.sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
}

/* La voce attiva si riconosce da un blocco pieno e non da una sfumatura: in una
   barra con venticinque voci, un segno debole si perde. */
.sidebar .nav-link.active {
    background: var(--ro-blu-600) !important;
    color: #fff !important;
    font-weight: 600;
}

.sidebar .bi { opacity: .85; font-size: 1rem; }
.sidebar .nav-link.active .bi { opacity: 1; }

/* --- I gruppi del menu -----------------------------------------------------
   Venticinque voci in fila si leggono una per una; sei gruppi si leggono a colpo
   d'occhio. Il gruppo che contiene la pagina aperta si apre da solo, perche' un
   gruppo chiuso che nasconde la voce evidenziata toglie a chi guarda l'unica
   informazione che cercava: dove si trova.
   --------------------------------------------------------------------------- */
.nav-gruppo { margin-top: .35rem; }

.nav-gruppo-testa {
    display: flex; align-items: center; gap: .5rem;
    width: calc(100% - .6rem);
    margin: 0 .3rem;
    padding: .42rem .7rem;
    background: transparent;
    border: 0;
    border-radius: var(--ro-raggio-s);
    color: rgba(255, 255, 255, .5);
    font-size: .7rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
    text-align: left;
    cursor: pointer;
    transition: color .12s ease, background-color .12s ease;
}
.nav-gruppo-testa:hover { color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .05); }
.nav-gruppo-testa.aperto { color: rgba(255, 255, 255, .72); }

.nav-gruppo-nome { flex: 1; }
.nav-gruppo-icona { font-size: .85rem; opacity: .75; }

/* La freccia gira invece di cambiare simbolo: il movimento dice da solo cosa e'
   appena successo, senza che l'occhio debba riconoscere un'altra icona. */
.nav-gruppo-freccia {
    font-size: .7rem;
    opacity: .6;
    transform: rotate(-90deg);
    transition: transform .16s ease;
}
.nav-gruppo-testa.aperto .nav-gruppo-freccia { transform: rotate(0deg); }

.nav-gruppo-voci { padding-top: .1rem; }

/* Le voci dentro un gruppo rientrano, e una linea sottile le tiene insieme: si
   vede a quale gruppo appartengono anche quando due gruppi sono aperti insieme. */
.nav-gruppo-voci .nav-item { padding-left: 1.55rem !important; position: relative; }
.nav-gruppo-voci::before {
    content: "";
    position: absolute;
    left: 1.25rem;
    width: 1px;
    height: 0;
}
.nav-gruppo-voci .nav-item::before {
    content: "";
    position: absolute;
    left: 1.15rem; top: 0; bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, .1);
}
.nav-gruppo-voci .nav-link { font-size: .845rem; height: 2.15rem; line-height: 2.15rem; }

@media (prefers-reduced-motion: reduce) {
    .nav-gruppo-freccia { transition: none; }
}

main > .top-row {
    background: var(--ro-superficie) !important;
    border-bottom: 1px solid var(--ro-bordo);
    height: 3.75rem;
    box-shadow: var(--ro-ombra-1);
}

.content, article.content { padding-top: 1.5rem !important; }

/* ---------------------------------------------------------------------------
   4. Le superfici
   --------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--ro-bordo);
    border-radius: var(--ro-raggio-l);
    box-shadow: var(--ro-ombra-1);
    background: var(--ro-superficie);
}

.card-header {
    background: var(--ro-superficie);
    border-bottom: 1px solid var(--ro-bordo);
    padding: .85rem 1.1rem;
    font-weight: 600;
    border-radius: var(--ro-raggio-l) var(--ro-raggio-l) 0 0 !important;
}

.card-body { padding: 1.1rem; }

/* ---------------------------------------------------------------------------
   5. I comandi
   --------------------------------------------------------------------------- */
.btn {
    font-weight: 550;
    border-radius: var(--ro-raggio-s);
    padding: .42rem .85rem;
    font-size: .89rem;
    letter-spacing: -0.005em;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn-sm { padding: .26rem .6rem; font-size: .82rem; }
.btn-lg { padding: .6rem 1.2rem; font-size: 1rem; }

.btn-primary {
    background: var(--ro-blu-600);
    border-color: var(--ro-blu-600);
    box-shadow: var(--ro-ombra-1);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--ro-blu-700);
    border-color: var(--ro-blu-700);
}

.btn-outline-secondary {
    color: var(--ro-grigio-700);
    border-color: var(--ro-grigio-300);
    background: var(--ro-superficie);
}
.btn-outline-secondary:hover {
    background: var(--ro-grigio-100);
    color: var(--ro-grigio-900);
    border-color: var(--ro-grigio-400);
}

.btn-secondary {
    background: var(--ro-grigio-600);
    border-color: var(--ro-grigio-600);
}

/* Il fuoco da tastiera si vede: chi lavora con gli elenchi tutto il giorno usa il
   tabulatore, e un anello invisibile lo costringe al mouse. */
.btn:focus-visible, .form-control:focus, .form-select:focus, a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ro-blu-100), 0 0 0 1px var(--ro-blu-500);
    border-color: var(--ro-blu-500);
}

/* ---------------------------------------------------------------------------
   6. I campi
   --------------------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: var(--ro-raggio-s);
    border-color: var(--ro-grigio-300);
    padding: .45rem .7rem;
    font-size: .9rem;
    background: var(--ro-superficie);
}
.form-control::placeholder { color: var(--ro-grigio-400); }
.form-label { font-weight: 550; font-size: .855rem; color: var(--ro-grigio-700); margin-bottom: .3rem; }
.form-text { color: var(--ro-testo-2); font-size: .8rem; }
.form-check-input:checked { background-color: var(--ro-blu-600); border-color: var(--ro-blu-600); }

/* ---------------------------------------------------------------------------
   7. Gli elenchi
   
   E' la schermata su cui si passa piu' tempo, e quella che il tema di serie tratta
   peggio: intestazioni indistinguibili dal contenuto e righe che si confondono
   quando sono molte.
   --------------------------------------------------------------------------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; }

.table > thead > tr > th,
.table thead.table-light th {
    background: var(--ro-grigio-50);
    color: var(--ro-grigio-600);
    font-weight: 600;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .045em;
    border-bottom: 1px solid var(--ro-bordo);
    padding: .65rem .85rem;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--ro-grigio-100);
    vertical-align: middle;
    font-size: .89rem;
}

.table-hover > tbody > tr:hover > * {
    background: var(--ro-blu-50);
    --bs-table-accent-bg: var(--ro-blu-50);
}

.card > .table-responsive:last-child .table > tbody > tr:last-child > td { border-bottom: 0; }

/* --- Normalizzazione degli elenchi -----------------------------------------
   Censite le 44 tabelle dell'applicazione, ognuna era arrivata a una convenzione
   sua: 15 con `align-middle` e 29 senza, 8 a righe zebrate e 36 no, 12 compatte e
   32 normali. Nessuna di queste differenze corrisponde a una differenza di
   contenuto — sono sedimentazioni di chi ha scritto quella pagina quel giorno.
   Uniformarle qui vale per tutte e 44 senza toccare una riga di markup.
   --------------------------------------------------------------------------- */

/* Celle centrate verticalmente ovunque. Senza, una riga che contiene una pastiglia
   o un bottone e' piu' alta e il testo delle altre celle le galleggia in cima. */
.table > tbody > tr > td, .table > tbody > tr > th { vertical-align: middle; }

/* Le righe zebrate sparivano contro l'evidenziazione al passaggio del mouse e
   rendevano otto tabelle diverse da tutte le altre. Il bordo sottile fra le righe
   fa lo stesso lavoro — tenere l'occhio sulla riga giusta — senza il rumore. */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background-color: transparent;
}

/* Le tabelle dentro una scheda non hanno bisogno del proprio bordo esterno: lo
   fornisce gia' la scheda, e due bordi a un millimetro l'uno dall'altro si vedono. */
.card > .table-responsive > .table { border: 0; }

/* Niente intestazione che resta appiccicata in cima: `position: sticky` dentro un
   contenitore con `overflow-x: auto` si aggancia a quel contenitore, che in
   verticale non scorre, e non succede niente. Meglio non prometterlo che
   prometterlo e non farlo. Se servira' davvero, vuole un'altezza massima sulla
   tabella — una scelta da prendere elenco per elenco, non da imporre a tutte.
   
   E le tabelle senza involucro scorrevole si correggono nel markup delle tre
   pagine che ne erano prive: farlo da qui con `display: block` costringerebbe a
   ridichiarare il layout di tabella e rovinerebbe le larghezze delle colonne. */

/* La riga cliccabile lo dichiara. In diverse pagine la riga porta a un dettaglio ma
   niente lo suggerisce, e si scopre per caso. */
.table-hover > tbody > tr[style*="cursor"] > td,
.table-hover > tbody > tr.cliccabile > td { cursor: pointer; }


/* ---------------------------------------------------------------------------
   8. Gli stati
   
   Pieni tenui con testo scuro invece di colori saturi: in un elenco di cinquanta
   ticket, cinquanta pastiglie sature diventano un semaforo rotto e **nessuna
   priorita' si distingue piu' dalle altre** — che e' esattamente il contrario di
   quello a cui servono.
   --------------------------------------------------------------------------- */
.badge {
    font-weight: 600;
    font-size: .74rem;
    padding: .3em .6em;
    border-radius: var(--ro-raggio-s);
    letter-spacing: .01em;
}

.badge.bg-primary   { background: var(--ro-blu-50) !important;   color: var(--ro-blu-700) !important; }
.badge.bg-success   { background: var(--ro-verde-c) !important;  color: #0a6344 !important; }
.badge.bg-warning   { background: var(--ro-ambra-c) !important;  color: #7d4f00 !important; }
.badge.bg-danger    { background: var(--ro-rosso-c) !important;  color: #8d2635 !important; }
.badge.bg-info      { background: var(--ro-info-c) !important;   color: #145f7e !important; }
.badge.bg-secondary { background: var(--ro-grigio-100) !important; color: var(--ro-grigio-600) !important; }
.badge.bg-light     { background: var(--ro-grigio-100) !important; color: var(--ro-grigio-700) !important; }
.badge.bg-dark      { background: var(--ro-grigio-800) !important; color: #fff !important; }

.alert {
    border-radius: var(--ro-raggio);
    border: 1px solid transparent;
    padding: .8rem 1rem;
    font-size: .89rem;
}
.alert-danger  { background: var(--ro-rosso-c); border-color: #f3c9cf; color: #8d2635; }
.alert-success { background: var(--ro-verde-c); border-color: #bfe6d5; color: #0a6344; }
.alert-warning { background: var(--ro-ambra-c); border-color: #f0dcb4; color: #7d4f00; }
.alert-info    { background: var(--ro-info-c);  border-color: #bfe0ec; color: #145f7e; }
.alert-light   { background: var(--ro-superficie); border-color: var(--ro-bordo); color: var(--ro-grigio-700); }

/* ---------------------------------------------------------------------------
   9. Il resto
   --------------------------------------------------------------------------- */
.modal-content { border: 0; border-radius: var(--ro-raggio-l); box-shadow: var(--ro-ombra-3); }
.modal-header { border-bottom: 1px solid var(--ro-bordo); padding: 1rem 1.2rem; }
.modal-footer { border-top: 1px solid var(--ro-bordo); padding: .85rem 1.2rem; }

.dropdown-menu {
    border: 1px solid var(--ro-bordo);
    border-radius: var(--ro-raggio);
    box-shadow: var(--ro-ombra-3);
    padding: .3rem;
    font-size: .89rem;
}
.dropdown-item { border-radius: var(--ro-raggio-s); padding: .4rem .6rem; }
.dropdown-item:hover { background: var(--ro-grigio-100); }

.nav-tabs { border-bottom: 1px solid var(--ro-bordo); gap: .15rem; }
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--ro-testo-2);
    font-weight: 550;
    font-size: .89rem;
    padding: .5rem .85rem;
}
.nav-tabs .nav-link:hover { color: var(--ro-grigio-900); border-bottom-color: var(--ro-grigio-300); }
.nav-tabs .nav-link.active {
    color: var(--ro-blu-600);
    border-bottom-color: var(--ro-blu-600);
    background: transparent;
}

.spinner-border { color: var(--ro-blu-600); }

.progress { background: var(--ro-grigio-200); border-radius: 99px; height: .5rem; }
.progress-bar { background: var(--ro-blu-600); border-radius: 99px; }

/* Barre di scorrimento discrete: su una pagina piena di elenchi, quelle di serie
   di Windows tagliano il contenuto in blocchi grigi. */
* { scrollbar-width: thin; scrollbar-color: var(--ro-grigio-300) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--ro-grigio-300); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ro-grigio-400); background-clip: content-box; }

/* Chi non vuole le animazioni non le ha: e' una preferenza di sistema, e qui non
   c'e' niente che dipenda da un movimento per essere capito. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}