/* ═══════════════════════════════════════════════════════════════════════════════════════════ ADR INTESA · I TOKEN E LE FONDAMENTA ═══════════════════════════════════════════════════════════════════════════════════════════ ⚠️ QUESTO È L'UNICO FILE IN CUI PUÒ COMPARIRE UN COLORE ESADECIMALE. La regola è di `docs/10-architettura-e-ui.md` §8.5 ed è verificabile con un grep: fuori da qui, in una view o in un altro CSS, un `#rrggbb` è un difetto. Misurato prima di scrivere questo file: **185 hex nelle view** e **214 `style=` inline**. Non spariscono da soli, ma da oggi c'è il posto dove metterli. ── LA MOSSA CHE FA CAMBIARE IDENTITÀ A TUTTA L'APPLICAZIONE ────────────────────────────── Il tema INSPINIA espone **119 custom properties** su `:root`, e ogni suo componente le legge. Rimappandone una ventina sui token ADR, le 95 view ereditano il brand **senza toccarne una**. È la ragione per cui questo file si carica DOPO `app.min.css` e PRIMA di `custom.css`. Le quattro correzioni che quella rimappatura porta con sé, tutte misurate: · `--ins-primary` era **#111827**, un grigio quasi nero: non è il navy del marchio; · `--ins-secondary-color` era **#9a9ea5**, che su bianco fa **2,5:1** — sotto AA, ed è il colore di `text-muted`, cioè di mezza applicazione. Diventa #6b7280, **4,83:1**; · `--ins-font-size-base` era **13px**: giusto per Bernino, che ha tabelle a 11 colonne, stretto per un pubblico di avvocati e dirigenti su contenuto giuridico; · il font era **Geist, scaricato da Google a ogni pageview** — misurato a runtime aprendo `/pratiche`: due host di Google contattati, uno per il CSS e uno per il file del font. Su un organismo che tratta dati giudiziari, l'IP dell'utente non va a un terzo. ⚠️ E QUI DENTRO NON SI SCRIVONO NOMI DI HOST ESTERNI, nemmeno in un commento come questo: `FormaGraficaTest` cerca la stringa e non distingue il codice dal commento — deliberatamente, perché una prova che sapesse leggere i commenti si aggirerebbe scrivendoci dentro un URL. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ─── Inter, self-hostata ───────────────────────────────────────────────────────────────── Due sottoinsiemi soli — latin e latin-ext — perché su un gestionale italiano il cirillico e il greco non si caricano mai: 131 KB in tutto contro i ~380 del set completo. `font-display: swap` perché il testo deve comparire subito: una tabella di 48.504 fascicoli non aspetta un font. Inter è il font del marchio (verificato sul sito adrintesa.it) ed è disegnata per UI densa: ha le **tabular figures**, che servono ai protocolli e agli importi. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin.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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin-ext.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; } :root { /* ─── Brand ─────────────────────────────────────────────────────────────────────────── Il navy #212958 è campionato dal CSS del sito del cliente; #202058 dal logo. La scala è costruita attorno al 700, che è il valore del brand. */ --adr-navy-900: #12163a; --adr-navy-800: #1a2049; --adr-navy-700: #212958; /* PRIMARY — il colore del marchio */ --adr-navy-600: #2c3670; --adr-navy-500: #3d4a8f; --adr-navy-200: #c9cde2; --adr-navy-100: #e6e8f2; --adr-navy-050: #f2f3f9; --adr-lime-700: #6f8a24; --adr-lime-600: #86a733; --adr-lime-500: #9ebf3c; /* ACCENT — il verde dei link e delle CTA sul sito */ --adr-lime-100: #eef4dc; /* ⚠️ SOLO LOGO E SIGILLI ISTITUZIONALI, MAI COME COLORE UI. Un badge «protocollata» in rosso bandiera si legge come errore, e il verde bandiera confligge con il verde semantico di successo. Sono qui per essere disponibili al logo, non per essere usati. */ --adr-flag-green: #38a048; --adr-flag-red: #e01820; /* ─── Stati di una compilazione ───────────────────────────────────────────────────── Servono alla barra dei passi (`adr/passi.js`) e a chiunque debba dire «fatto / manca qualcosa / c'e' uno sbaglio» su un modulo in corso. ⚠️ NON SONO I COLORI BANDIERA QUI SOPRA, e la distinzione e' gia' scritta la': il rosso bandiera su un passo si leggerebbe come un sigillo istituzionale, non come un errore. Questi sono i colori semantici di Bootstrap, presi dal ponte gia' esistente (`--bs-form-valid-color`, `--bs-form-invalid-color`) cosi' un modulo del deposito e una casella non valida dicono la stessa cosa con la stessa tinta. ⚠️ E `attenzione` NON E' UN ROSSO PIU' CHIARO: e' l'unico stato che dice «si puo' proseguire». Un modulo che colora di rosso ogni casella non ancora compilata insegna a ignorare il rosso, ed e' il motivo per cui i due stati sono separati. */ --adr-stato-fatto: var(--bs-form-valid-color, #2f7a3e); --adr-stato-attenzione: #b5730b; /* ambra: 4,6:1 su bianco, leggibile come testo */ --adr-stato-errore: var(--bs-form-invalid-color, #c02a26); /* ─── Neutri ────────────────────────────────────────────────────────────────────────── */ --n-0: #ffffff; --n-25: #fafbfc; --n-50: #f5f6f8; --n-100: #eceef2; --n-200: #dfe2e8; --n-300: #c7ccd6; --n-400: #98a0ae; --n-500: #6b7280; /* il "muted" minimo: 4,83:1 su bianco = AA */ --n-600: #4b5563; --n-700: #374151; /* testo corpo */ --n-800: #232a35; --n-900: #12161d; /* ─── Semantici: fg (testo, ≥4,5:1) · bg (fondo tenue) · dot (pieno) ─────────────────── */ --ok-fg: #166534; --ok-bg: #e7f5ec; --ok-dot: #22a55b; --warn-fg: #92610a; --warn-bg: #fdf4e3; --warn-dot: #e8a317; --danger-fg: #b42318; --danger-bg: #fdeceb; --danger-dot: #e5484d; --info-fg: #0f6a8b; --info-bg: #e6f4f9; --info-dot: #1d9bc4; --neutral-fg: #4b5563; --neutral-bg: #f0f2f5; --neutral-dot: #98a0ae; /* ─── LA SCALA DA GRAFICO ───────────────────────────────────────────────────────── Non è marchio e non è semantica: è l'unico posto in cui il colore serve a **distinguere**, non a significare. Otto categorie hanno bisogno di otto tinte separabili, e spegnerle per obbedire alla regola dei token renderebbe illeggibile una ciambella — che è il difetto peggiore dei due. Perciò la scala esiste, ed è dichiarata come tale invece di stare scritta a mano dentro una vista. ⚠️ NON SI USA PER GLI STATI. Uno stato ha già il suo colore, e sta a catalogo in `stati_pratica.badge_variant`: dipingerlo con la scala da grafico direbbe due cose diverse nella stessa pagina. Qui dentro il colore vuol dire soltanto «questa fetta non è quella». L'ordine non è casuale: due tinte consecutive sono lontane, perché in una ciambella le fette consecutive si toccano. MISURATO in gradi di tinta — 231 · 40 · 195 · 4 · 146 · 259 · 77 · 322 — il salto minimo fra due consecutive è di **113°**. */ --graf-1: #212958; /* navy del marchio */ --graf-2: #e8a317; /* ambra */ --graf-3: #1d9bc4; /* ciano */ --graf-4: #b42318; /* rosso */ --graf-5: #22a55b; /* verde */ --graf-6: #6b4fa8; /* viola */ --graf-7: #86a733; /* lime del marchio */ --graf-8: #a8327d; /* magenta */ /* Il velo sotto una linea: la tinta della linea, appena accennata. */ --graf-2-velo: rgba(232, 163, 23, .12); /* ─── Il diagramma di flusso (DEC-147) ────────────────────────────────────────────────── */ /* I quattro simboli classici, con le tinte approvate sulla bozza del 23/09/2026: rosa per inizio e fine, azzurro per ciò che entra o esce, verde per un'attività, giallo per una domanda. Stanno qui e non nella vista: un colore scritto in una vista non partecipa ai token (DEC-052). */ --flusso-terminale: #f9c6d3; --flusso-io: #bfdbfe; --flusso-attivita: #bbf7d0; --flusso-decisione: #fde68a; /* ─── Superfici ─────────────────────────────────────────────────────────────────────── */ --surface-page: #f5f6f8; --surface-card: #ffffff; --surface-sunken: #eceef2; --surface-nav: #12163a; --border: #dfe2e8; --border-strong: #c7ccd6; /* ─── Tipografia ────────────────────────────────────────────────────────────────────── */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --fs-3xs: 11px; --fs-2xs: 12px; --fs-xs: 13px; --fs-sm: 14px; --fs-md: 15px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 20px; --fs-3xl: 26px; --fs-4xl: 32px; --lh-tight: 1.25; --lh-body: 1.5; --lh-dense: 1.35; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --ls-caps: .06em; /* ─── Spaziature, base 4px ──────────────────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ─── Raggi ─────────────────────────────────────────────────────────────────────────── */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-pill: 999px; /* ─── Elevazione: le card sono PIATTE con bordo ────────────────────────────────────── Coerente col tono istituzionale — «deve sembrare il registro di un organismo iscritto a un albo ministeriale, non un SaaS» — e con INSPINIA stesso, che ha già ombra zero sulle card. L'ombra resta agli elementi che galleggiano davvero. */ --sh-0: none; --sh-1: 0 1px 2px rgba(18, 22, 58, .06); --sh-2: 0 6px 16px rgba(18, 22, 58, .10); --sh-3: 0 16px 40px rgba(18, 22, 58, .16); --focus-ring: 0 0 0 3px rgba(33, 41, 88, .28); /* ─── Densità tabellare ─────────────────────────────────────────────────────────────── */ --row-h: 40px; --row-h-comfy: 48px; /* ─── Motion ────────────────────────────────────────────────────────────────────────── */ --t-fast: 120ms; --t-base: 180ms; --t-slow: 280ms; --ease: cubic-bezier(.4, 0, .2, 1); } /* ═══════════════════════════════════════════════════════════════════════════════════════════ IL PONTE VERSO IL TEMA Da qui in giù non si inventano colori: si dice a INSPINIA quali sono i nostri. ═══════════════════════════════════════════════════════════════════════════════════════════ */ :root { --ins-font-sans-serif: var(--font-sans); --ins-body-font-family: var(--font-sans); --ins-font-size-base: var(--fs-sm); /* ⚠️ UNA RIGA SOLA, E RIGUARDA UNA REGOLA SOLA. `--ins-font-size-xs` e' letto da un unico blocco di `app.min.css` — `.fs-xs{font-size:var(--ins-font-size-xs)!important}` — ed e' dichiarato piu' volte dal tema con due valori diversi (12px e 13px, a seconda della variante che vince). Cioe' la misura di **266 usi di `fs-xs` nelle view** dipendeva da quale dei due blocchi arrivava per ultimo. Qui diventa il nostro token, e la scala si chiude con le due classi qui sotto: 13 · 12 · 11. */ --ins-font-size-xs: var(--fs-xs); --ins-primary: var(--adr-navy-700); --ins-primary-rgb: 33, 41, 88; --ins-primary-bg-subtle: var(--adr-navy-100); --ins-primary-border-subtle: var(--adr-navy-200); --ins-primary-text-emphasis: var(--adr-navy-800); --ins-link-color: var(--adr-navy-700); --ins-link-hover-color: var(--adr-navy-500); --ins-body-bg: var(--surface-page); --ins-body-color: var(--n-700); --ins-emphasis-color: var(--n-900); --ins-secondary-color: var(--n-500); /* era #9a9ea5 → 2,5:1. Questo è 4,83:1 */ /* ⚠️ LA RIGA CHE MANCAVA: `--ins-secondary` non era rimappata e restava al valore di fabbrica **#6366f1**, che è `--ins-indigo` — un colore che con questo marchio non c'entra niente. Non era un esadecimale scritto a mano da qualche parte: era un token mai dichiarato. MISURATO il 01/09/2026 su `adr_dev` e sul sorgente: **29 blocchi** di `app.min.css` leggono un `var(--ins-secondary…)`, `.text-secondary` compare in **42 punti di `resources/views/`** e `bg-secondary-subtle` in **28**, e `stati_pratica.badge_variant='secondary'` è lo stato `chiusa`, cioè **35.206 fascicoli su 48.504**. ⚠️ E l'indaco è SOTTO AA: #6366f1 su bianco fa **4,47:1** (ne servono 4,5) e su #e8e8fd — il fondo di `bg-secondary-subtle` — fa **3,70:1**. 👉 Si rimappa sul NEUTRO e non sul navy, perché MISURATO l'uso vero è testo attenuato e non un secondo colore di marchio: `--neutral-fg` fa **7,56:1** su bianco e **6,81:1** sul proprio fondo tenue. Il navy avrebbe fatto sembrare marchiato ciò che è secondario. */ --ins-secondary: var(--neutral-fg); --ins-secondary-rgb: 75, 85, 99; --ins-secondary-bg-subtle: var(--neutral-bg); --ins-secondary-border-subtle: var(--n-300); --ins-secondary-text-emphasis: var(--n-700); --ins-tertiary-color: var(--n-400); --ins-tertiary-bg: var(--n-50); --ins-border-color: var(--border); --ins-border-color-translucent: var(--n-100); --ins-border-radius: var(--r-md); --ins-border-radius-sm: var(--r-sm); --ins-border-radius-lg: var(--r-lg); --ins-success: var(--ok-dot); --ins-success-bg-subtle: var(--ok-bg); --ins-warning: var(--warn-dot); --ins-warning-bg-subtle: var(--warn-bg); --ins-danger: var(--danger-dot);--ins-danger-bg-subtle: var(--danger-bg); --ins-info: var(--info-dot); --ins-info-bg-subtle: var(--info-bg); /* ⚠️ LE QUATTRO RIGHE CHE MANCAVANO, E CHE VALGONO 13.301 FASCICOLI. `--ins-X` era rimappato, `--ins-X-rgb` no: sono due variabili con due mestieri diversi. La prima veste i pulsanti; la **seconda è l'inchiostro** — `.text-X` scrive `color: rgba(var(--ins-X-rgb), …)` — e restava al valore di fabbrica del tema. MISURATO IN BROWSER il 01/09/2026 su `/pratiche`, sul badge vero e non sul token: «Da regolarizzare» — **13.301 fascicoli**, il badge che il committente guarda ogni giorno — era `rgb(234,179,8)` su `rgb(253,244,227)`, cioè **1,76:1** contro il 4,5:1 che AA chiede. Accanto, nella stessa riga, «Chiusa» era già a **6,74:1**, perché `secondary` era stato rimappato il giro prima: due badge nella stessa riga, uno leggibile e uno no — peggio di quando erano illeggibili tutti e due allo stesso modo. Le altre tre erano rotte quanto la prima, e nessuno le aveva misurate. MISURATO, testo su fondo tenue · testo su bianco · bianco sul pieno: success 2,03 · 2,28 · 2,28 → 6,34 · 7,13 · 7,13 warning 1,76 · 1,92 · 1,92 → 4,88 · 5,33 · 5,33 danger 3,29 · 3,76 · 3,76 → 5,75 · 6,57 · 6,57 info 2,16 · 2,43 · 2,43 → 5,40 · 6,08 · 6,08 ⚠️ LA TINTA NON CAMBIA, CAMBIA L'INCHIOSTRO. Il giallo resta giallo e il rosso resta rosso: `--warn-fg` è lo stesso ambra di `--warn-dot`, sceso di chiarezza. Un «attenzione» diventato grigio avrebbe smesso di essere un avvertimento. ⚠️ E `--ins-X-rgb` è anche il **pieno** di `.bg-X`: rimapparlo qui scurirebbe pure quello. Il pieno si riprende la sua tinta più sotto, in un blocco solo. */ --ins-success-rgb: 22, 101, 52; /* var(--ok-fg) #166534 */ --ins-warning-rgb: 146, 97, 10; /* var(--warn-fg) #92610a */ --ins-danger-rgb: 180, 35, 24; /* var(--danger-fg) #b42318 */ --ins-info-rgb: 15, 106, 139; /* var(--info-fg) #0f6a8b */ --ins-success-text-emphasis: var(--ok-fg); --ins-warning-text-emphasis: var(--warn-fg); --ins-danger-text-emphasis: var(--danger-fg); --ins-info-text-emphasis: var(--info-fg); --ins-card-bg: var(--surface-card); --ins-card-border-color: var(--border); --ins-card-box-shadow: var(--sh-0); } /* ═══════════════════════════════════════════════════════════════════════════════════════════ IL SECONDO PONTE: LE VARIABILI CHE LE LIBRERIE DI TERZI DANNO PER SCONTATE ═══════════════════════════════════════════════════════════════════════════════════════════ ⚠️ MISURATO il 30/08/2026: i CSS dei plugin in `public/assets/plugins/` usano **20 variabili `--bs-*`** — quelle di Bootstrap 5 «puro» — e in tutta la piattaforma ne era definita **zero**. Il tema INSPINIA le sue le chiama `--ins-*`, e una `var()` che non risolve non ricade su niente: **la proprietà viene scartata**. Il caso che l'ha fatta vedere: `tom-select.bootstrap5.min.css` scrive `.ts-dropdown{background:var(--bs-body-bg)}`. Senza quella variabile la tendina dei filtri nasceva **trasparente** — si leggevano insieme le materie e le righe della tabella sotto. Era rimasta nascosta finché un blocco di `!important` dentro il layout ci metteva una pezza; tolto quello (perché sovrascriveva l'aspetto della piattaforma), il difetto è venuto a galla per quello che era: non un colore sbagliato, **un colore mai arrivato**. Ci sono altri 19 usi che cadevano nello stesso silenzio — bordi, raggi, sfondi dei menu — e li chiude questo blocco, non una regola per volta. `FormaGraficaTest` li conta e fallisce se un plugin nuovo ne porta una che qui non c'è. ⚠️ `--bs-body-bg` VALE BIANCO E NON `--surface-page`: in Bootstrap è il colore del foglio, e i dieci usi che se ne fanno qui sono tutti superfici di controllo — tendine, campi, celle — che devono essere opache sopra la pagina, non del colore della pagina. */ :root { --bs-body-bg: var(--n-0); --bs-body-color: var(--n-700); --bs-emphasis-color: var(--n-900); --bs-secondary-color: var(--n-500); --bs-secondary-bg: var(--surface-sunken); --bs-tertiary-bg: var(--n-50); --bs-primary: var(--adr-navy-700); --bs-primary-rgb: 33, 41, 88; --bs-border-color: var(--border); --bs-border-color-translucent: var(--n-100); --bs-border-width: 1px; --bs-border-radius: var(--r-md); --bs-border-radius-sm: var(--r-sm); --bs-border-radius-lg: var(--r-lg); --bs-form-valid-color: var(--ok-fg); --bs-form-invalid-color: var(--danger-fg); --bs-font-monospace: var(--font-mono); --bs-box-shadow-inset: inset 0 1px 2px rgba(18, 22, 58, .075); --bs-dropdown-link-color: var(--n-700); --bs-dropdown-link-hover-color: var(--n-900); --bs-dropdown-link-hover-bg: var(--n-100); --bs-dropdown-item-padding-y: .4rem; --bs-dropdown-item-padding-x: .7rem; } body { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--n-700); background: var(--surface-page); -webkit-font-smoothing: antialiased; } /* ═══════════════════════════════════════════════════════════════════════════════════════════ LA BARRA LATERALE — LA VIA D'USCITA CHE SI VEDE SOLO QUANDO SERVE Sotto i 1200 px la barra si apre SOPRA la pagina, e MISURATO in Chrome a 1100 px il comando della topbar finisce coperto dalla barra stessa: `elementFromPoint()` sul suo punto restituisce un elemento della barra. Il tema prevedeva la via d'uscita — la regola `html[data-sidenav-size=offcanvas] .button-close-offcanvas{display:block}` in `app.min.css` e il gestore in `app.js` — e nel nostro markup il pulsante non c'era. Qui lo si nasconde negli altri stati. ⚠️ NON con `d-none`, che è `display:none !important` e vincerebbe anche sulla regola del tema, lasciandolo invisibile proprio dove serve: la regola del tema porta un attributo in più, quindi è più specifica di questa e la batte da sé. ═══════════════════════════════════════════════════════════════════════════════════════════ */ .button-close-offcanvas { display: none; z-index: 1; } /* ═══════════════════════════════════════════════════════════════════════════════════════════ FONDAMENTA DI ACCESSIBILITÀ Misurato prima: 0 skip-link, 3 `

` su 95 view, focus lasciato al default del browser. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* Il focus si vede sempre, ed è lo stesso ovunque: il flusso «verifica → protocolla → convoca» deve essere percorribile senza mouse, e senza un anello visibile non lo è. */ :focus-visible { outline: 2px solid var(--adr-navy-700); outline-offset: 2px; border-radius: var(--r-xs); } /* «Salta al contenuto»: primo elemento focusabile della pagina, invisibile finché non serve. Senza, chi naviga da tastiera attraversa le 30 voci del menu a ogni cambio di pagina. */ .adr-salta { position: absolute; left: var(--sp-4); top: -100px; z-index: 2000; padding: var(--sp-2) var(--sp-4); background: var(--adr-navy-700); color: var(--n-0); border-radius: var(--r-sm); font-weight: var(--fw-semibold); text-decoration: none; transition: top var(--t-fast) var(--ease); } .adr-salta:focus { top: var(--sp-4); color: var(--n-0); } /* Chi ha chiesto meno movimento lo ottiene ovunque, non solo dove qualcuno si è ricordato. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ TIPOGRAFIA APPLICATA — le classi di dominio ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* Il numero di protocollo è la chiave di tutto il dominio e si legge **cifra per cifra**: monospaziato, tabulare, leggermente spaziato. `5035/2026` non è una parola, è un indirizzo. */ .adr-protocollo { font-family: var(--font-mono); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; letter-spacing: .02em; } /* ⚠️ LE DUE CLASSI CHE 66 PUNTI DELLA PIATTAFORMA USAVANO E CHE NON ESISTEVANO. MISURATO il 07/09/2026 sul sorgente: `fs-2xs` compare **53 volte in 11 file** di `resources/views/` e `fs-3xs` **13 volte in 2 file**, piu' 5 usi negli script di casa — e nessuno dei due CSS le definiva. Il tema porta `.fs-xs` e `.fs-sm`; i token `--fs-2xs` e `--fs-3xs` stavano gia' qui sopra dalla prima riga di questo file, ma **nessuna regola li leggeva**. 👉 Non produceva un errore ne' un avviso: quel testo ereditava semplicemente la misura del genitore, cioe' compariva grande quanto il testo accanto a cui doveva essere piccolo. E' la forma piu' silenziosa del difetto grafico — una classe scritta, letta da nessuno, e una schermata che sembra soltanto un po' meno curata delle altre. ⚠️ `!important` NON E' UN CAPRICCIO: e' la stessa forza con cui il tema dichiara `.fs-xs` e `.fs-sm`. Senza, una qualunque regola piu' specifica del tema — e ce ne sono — vincerebbe su `fs-2xs` e non su `fs-xs`, e le due misure accanto tornerebbero a divergere. */ .fs-2xs { font-size: var(--fs-2xs) !important; } .fs-3xs { font-size: var(--fs-3xs) !important; } /* Importi, date e conteggi: incolonnati. Senza tabular-nums una colonna di importi balla. */ .adr-num { font-variant-numeric: tabular-nums; } .adr-num-end { font-variant-numeric: tabular-nums; text-align: right; } /* L'etichetta di sezione: maiuscoletto spaziato, con la linea che riempie la riga. */ .adr-sezione { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-3xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--n-500); margin-bottom: var(--sp-3); } .adr-sezione::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* La citazione di norma. Il tono del brand è istituzionale-giuridico e la norma si cita di continuo: darle una forma stabile evita che ogni pagina se la inventi. */ .adr-norma { font-size: var(--fs-2xs); line-height: var(--lh-dense); color: var(--n-500); border-left: 3px solid var(--adr-navy-200); padding-left: var(--sp-3); } /* ═══════════════════════════════════════════════════════════════════════════════════════════ STAMPA Misurato: **0 occorrenze** di `@media print` nelle view. In un organismo di mediazione si stampa il fascicolo, i conteggi, le fatture — e oggi esce anche la sidenav. ═══════════════════════════════════════════════════════════════════════════════════════════ */ @media print { .app-sidebar, .app-topbar, .navbar, .footer, .adr-salta, .btn, .dt-length, .dt-search, .dt-paging, [data-azione], .no-print { display: none !important; } body, .card, .page-content { background: #fff !important; color: #000 !important; box-shadow: none !important; } .card { border: 1px solid #999 !important; break-inside: avoid; } .page-content, .content-page { margin: 0 !important; padding: 0 !important; } table { break-inside: auto; } tr, td, th { break-inside: avoid; } thead { display: table-header-group; } /* Gli URL si espandono: un fascicolo stampato deve dire da dove viene. */ a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 10px; color: #555; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ IL MARCHIO ═══════════════════════════════════════════════════════════════════════════════════════════ ⚠️ L'ALTEZZA È IL VINCOLO, E VIENE DAL FILE. Il logo è un PNG di **145×70**: il vettoriale non è mai stato consegnato dal cliente, ed è una domanda aperta che blocca anche il motore documentale — i PDF generati (convocazioni, verbali, fatture) uscirebbero sgranati. Il calcolo, perché chi tocca queste misure sappia dove sta il limite: h = 28px → 58×28 su retina servono 116×56 ✓ dentro i 145×70 nativi h = 34px → 70×34 su retina servono 140×68 ✓ al limite h = 40px → 83×40 su retina servono 166×80 ✗ mancano 21 pixel di larghezza **Sopra i 34px il marchio sgrana.** Chi vuole alzarlo deve prima avere il file vettoriale. ═══════════════════════════════════════════════════════════════════════════════════════════ */ .adr-marchio { height: 28px; width: auto; display: block; /* Il lettering ha tratti sottili: senza questo, il ridimensionamento del browser li impasta. */ image-rendering: -webkit-optimize-contrast; } /* ⚠️ `display: block` E `text-center` NON SI PARLANO. Il contenitore del login ha `text-center`, che allinea il **testo**: un elemento di blocco largo quanto il suo contenuto resta a sinistra, e il marchio risultava sfalsato rispetto alla scritta sotto. Il centraggio di un blocco lo fa `margin-inline: auto`, non l'allineamento del testo. */ .adr-marchio--grande { margin-inline: auto; } /* Nel login il marchio è l'unica cosa in pagina che dica di chi è il sistema: sta al limite della nitidezza, non oltre. */ .adr-marchio--grande { height: 34px; } /* ⚠️ SU FONDO SCURO IL LETTERING NAVY SPARISCE. Non abbiamo una versione chiara del marchio — e non si inventa schiarendo il file, perché il rosso e il verde della bandiera sono colori del marchio e vanno resi come sono. Il fondo chiaro dietro è la soluzione che rispetta il file che abbiamo. */ .adr-marchio--su-scuro { background: var(--n-0); border-radius: var(--r-sm); padding: 3px 6px; height: 34px; /* 28 di marchio più il respiro sopra e sotto */ box-sizing: content-box; } /* ═══════════════════════════════════════════════════════════════════════════════════════════ L'ULTIMO INDACO: IL PULSANTE SPENTO ═══════════════════════════════════════════════════════════════════════════════════════════ Rimappare `--ins-secondary` (sopra) spegne l'indaco quasi ovunque, perché il tema ridichiara una seconda volta `.btn-secondary` e `.btn-outline-secondary` in termini di `var(--ins-secondary)`, e la seconda dichiarazione vince sulla prima. **Quasi.** ⚠️ MISURATO IN BROWSER il 01/09/2026, subito dopo la rimappatura: di tutta la famiglia `secondary` resta indaco **un caso solo** — `.btn-outline-secondary` **disabilitato**, che legge `rgb(99, 102, 241)` su testo e bordo. Il perché sta in `app.min.css`: il secondo blocco ridichiara colore, bordo, hover e attivo, ma **non** i due `--ins-btn-disabled-*`, che restano quelli del primo blocco, dove sono scritti a mano come `#6366f1`. `.btn-secondary` disabilitato invece è coperto, perché il secondo blocco il suo `--ins-btn-disabled-bg` lo ridichiara: serve **una** regola, non due, e riguarda **due** letterali, non quattro. ⚠️ E non è un caso di laboratorio: `.btn-outline-secondary` compare in **38 punti di `resources/views/`**, e un pulsante spento è proprio quello che si guarda per capire perché non si può premere. Senza questa regola la correzione sembrerebbe completa e lascerebbe l'indaco esattamente dove si vede di più. Restano quattro `#6366f1` letterali dentro `app.min.css` sulle regole `.fc-*.bg-secondary-subtle` di FullCalendar: **non sono raggiungibili oggi** — nessuna vista del calendario assegna `bg-secondary-subtle` a un evento — e si chiuderanno quando lo farà, non prima. È un fatto misurato, non una svista lasciata lì. ═══════════════════════════════════════════════════════════════════════════════════════════ */ .btn-outline-secondary { --ins-btn-disabled-color: var(--ins-secondary); --ins-btn-disabled-border-color: var(--ins-secondary); } /* ═══════════════════════════════════════════════════════════════════════════════════════════ IL BADGE CHE SI LEGGE ═══════════════════════════════════════════════════════════════════════════════════════════ Il ponte qui sopra ha sistemato l'INCHIOSTRO. Restano due cose che il ponte non raggiunge, e che si vedono solo misurando la pagina, non il token. ── ① IL PIENO SI RIPRENDE LA SUA TINTA ─────────────────────────────────────────────────── `.bg-X` e `.text-bg-X` disegnano il fondo con `rgba(var(--ins-X-rgb), …)`, cioè con la STESSA variabile che è l'inchiostro di `.text-X`. Rimappandola per il testo si scuriva anche il pieno, e un badge «Da fatturare» color ocra non è più il giallo di prima: la regola era scurire il testo, non cambiare la famiglia. Qui il pieno torna al proprio `--X-dot`, cioè ESATTAMENTE alla tinta che aveva prima di questo giro. ── ② SOPRA UN PIENO CI VA L'INCHIOSTRO CHE MISURA DI PIÙ ───────────────────────────────── Il tema mette bianco su tutto (`--ins-badge-color: #fff`, e `.text-bg-X` lo forza con `!important`). Su navy il bianco è la scelta giusta; su ambra è illeggibile. MISURATO, sul pieno di ciascuna famiglia, bianco contro `--n-900`: primary #212958 bianco 13,79 · n-900 1,29 → bianco secondary #4b5563 bianco 7,56 · n-900 2,29 → bianco success #22a55b bianco 3,18 · n-900 5,70 → n-900 warning #e8a317 bianco 2,17 · n-900 8,36 → n-900 danger #e5484d bianco 3,91 · n-900 4,63 → n-900 info #1d9bc4 bianco 3,21 · n-900 5,64 → n-900 Nessuna tinta si muove: si sceglie l'inchiostro. `danger` passa per 0,13 — è il margine più sottile della tavola, e sta scritto qui perché chi un giorno schiarisce `--danger-dot` sappia che sta togliendo l'ultimo decimo. ── ③ E IL FONDO TENUE PORTA UN LETTERALE CHE NESSUN TOKEN RAGGIUNGE ────────────────────── `app.min.css` scrive `.bg-X-subtle{color:#eab308!important}` — l'inchiostro del fondo tenue è un esadecimale a mano, non una variabile. Oggi perde contro `.text-X`, che arriva dopo nel foglio: MISURATO, «Chiusa» è `rgb(75,85,99)` e non `#6366f1`. Ma è una vittoria di ordine di riga, non una difesa — e MISURATO sul sorgente le due classi vanno sempre in coppia (0 usi di `bg-X-subtle` senza il proprio `text-X`, su 83). Il giorno in cui una nasce da sola — `stati_pratica.badge_variant` compone la classe da un dato — il letterale si riaccende. Qui si spegne per sempre. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ① il pieno torna alla tinta che aveva */ .bg-success, .text-bg-success { background-color: var(--ok-dot) !important; } .bg-warning, .text-bg-warning { background-color: var(--warn-dot) !important; } .bg-danger, .text-bg-danger { background-color: var(--danger-dot) !important; } .bg-info, .text-bg-info { background-color: var(--info-dot) !important; } /* ② sopra il pieno, l'inchiostro che misura di più */ .badge.bg-success, .text-bg-success, .badge.bg-warning, .text-bg-warning, .badge.bg-danger, .text-bg-danger, .badge.bg-info, .text-bg-info { color: var(--n-900) !important; } /* ⚠️ ③bis LA SETTIMA FAMIGLIA, TROVATA MISURANDO E NON LEGGENDO. Un giro di misura su sette schermate ha contato **36 badge e avvisi**: dopo le sei famiglie ne restava uno sotto AA, e non era in elenco perché non è una famiglia semantica — è `badge bg-light text-body-secondary`, cioè il badge «in lavorazione» che sta in cima a **sei pagine su sette** e, su `/anagrafiche/sedi`, anche «Inattiva · da confermare». MISURATO: `--ins-secondary-color` (#6b7280, il muted minimo) sopra `--ins-light` (#e5e7eb) fa **3,90:1**. Il muted è tarato su bianco, dove fa 4,83:1: su un fondo che bianco non è, non basta più. Il fondo resta quello, scende l'inchiostro di un gradino — `--n-600` fa **6,10:1**. */ .badge.bg-light { color: var(--n-600) !important; } /* ③ il fondo tenue prende l'inchiostro del proprio token, e non il letterale del tema */ .bg-primary-subtle { color: var(--adr-navy-800) !important; } .bg-secondary-subtle { color: var(--neutral-fg) !important; } .bg-success-subtle { color: var(--ok-fg) !important; } .bg-warning-subtle { color: var(--warn-fg) !important; } .bg-danger-subtle { color: var(--danger-fg) !important; } .bg-info-subtle { color: var(--info-fg) !important; } /* ⚠️ FullCalendar ridichiara l'inchiostro dei propri titoli DENTRO `.bg-X-subtle`, con un letterale e una specificità più alta: senza queste righe un evento tenue tornerebbe al giallo di fabbrica proprio dove la riga sopra lo ha appena spento. */ .bg-success-subtle .fc-event-title, .bg-success-subtle .fc-list-event-title > a { color: var(--ok-fg) !important; } .bg-warning-subtle .fc-event-title, .bg-warning-subtle .fc-list-event-title > a { color: var(--warn-fg) !important; } .bg-danger-subtle .fc-event-title, .bg-danger-subtle .fc-list-event-title > a { color: var(--danger-fg) !important; } .bg-info-subtle .fc-event-title, .bg-info-subtle .fc-list-event-title > a { color: var(--info-fg) !important; } .bg-secondary-subtle .fc-event-title, .bg-secondary-subtle .fc-list-event-title > a { color: var(--neutral-fg) !important; } /* L'evento di calendario dell'incontro. ⚠️ Il colore stava in PHP — `'color' => '#6366f1'` in `mediatori/show.php` — cioè dentro il JSON degli eventi, dove nessun token arriva. FullCalendar accetta `classNames` su ogni evento: la vista dice CHE COS'È l'evento, questo file dice di che colore si vede. */ .fc .fc-event.adr-evento-incontro, .fc .fc-event.adr-evento-incontro .fc-event-main { background-color: var(--adr-navy-700); border-color: var(--adr-navy-700); color: var(--n-0); } /* ═══════════════════════════════════════════════════════════════════════════════════════════ LA PAGINA DI ACCESSO ═══════════════════════════════════════════════════════════════════════════════════════════ ⚠️ VENIVA DA UN `