/* DELTA — design «Sereno» (pilota /anteprima). Token+componenti portati dall'artifact validato 2026-07-11. Self-contained: NON dipende da style.css. */ /* ============ FONT (self-hosted su file, no CDN) ============ */ @font-face{font-family:"Hanken Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url("/static/fonts/hanken-grotesk-400.woff2") format("woff2");} @font-face{font-family:"Hanken Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url("/static/fonts/hanken-grotesk-500.woff2") format("woff2");} @font-face{font-family:"Hanken Grotesk";font-weight:600;font-style:normal;font-display:swap;src:url("/static/fonts/hanken-grotesk-600.woff2") format("woff2");} @font-face{font-family:"Hanken Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url("/static/fonts/hanken-grotesk-700.woff2") format("woff2");} @font-face{font-family:"Fraunces";font-weight:400;font-style:normal;font-display:swap;src:url("/static/fonts/fraunces-400.woff2") format("woff2");} @font-face{font-family:"Fraunces";font-weight:500;font-style:normal;font-display:swap;src:url("/static/fonts/fraunces-500.woff2") format("woff2");} @font-face{font-family:"Fraunces";font-weight:600;font-style:normal;font-display:swap;src:url("/static/fonts/fraunces-600.woff2") format("woff2");} /* ============ FONT (self-hosted, data-URI — nessuna CDN) ============ */ /* ============ TOKEN — Sereno (chiaro, fedele al mock) ============ */ :root{ color-scheme:light; --ground:#F5F6F8; --surface:#FFFFFF; --surface-2:#EEF0F3; --top-bg:rgba(255,255,255,.82); --ink:#14181D; --ink-soft:#5B6472; --muted:#98A2B0; --line:#E4E7EC; --line-strong:#D6DAE1; --accent:#0E9F6E; --accent-ink:#FFFFFF; --accent-2:#0B7F58; --accent-wash:#D8F3E7; --chip-bg:#EEF0F3; --ok:#16A34A; --ok-bg:#E6F6EC; --ok-line:#C6E9D2; --info:#2E6FA6; --info-bg:#EAF1F8; --info-line:#D4E1F0; --warn:#CA8A04; --warn-bg:#FBF3DA; --warn-line:#EFE0B0; --crit:#DC2626; --crit-bg:#FCEAEA; --crit-line:#F5D0D0; --neu:#6B7280; --neu-bg:#EEF0F3; /* Varianti LEGGIBILI dei semantici: gli stessi colori usati come TESTO su fondo chiaro non arrivano a 4.5:1 (accento 3.39, ok 2.94, warn 2.72). Questi token servono SOLO per il testo; sfondi, bordi e icone continuano a usare gli originali, così la tavolozza di marca resta quella. Il fondo dei pulsanti primari sta in --accent-strong (sotto): per un tenant con accento proprio lo calcola branding.py e lo inietta base_sereno.html, perché la quantità di scurimento dipende dalla tinta e in CSS non si può misurare. */ /* Fondo dei pulsanti primari: la stessa tinta dell'accento, scurita quanto basta perché il testo sopra regga AA (#0E9F6E col bianco è 3.39:1). NON è un color-mix: scurire di una quantità costante non basta su una tinta chiara e non ha ripiego sui motori che non lo supportano. Per un tenant con accento proprio, base_sereno.html sovrascrive questa coppia col valore calcolato da branding.py. */ --accent-strong:#0C845B; --accent-text:#0A7752; --ok-text:#12703A; --warn-text:#92610A; --crit-text:#C81E1E; --neu-text:#565E6B; /* Le cinque bande di scadenza escono tutte da `ui.banda_pill`, dichiarata «unica traduzione banda→colore dell'app»: lasciarle indietro voleva dire due ori diversi sulla stessa riga di scadenza. Ognuna è la propria tinta, scurita quanto basta sul proprio fondo. */ --sc-scaduto-text:#CD2323; --sc-30-text:#B94609; --sc-60-text:#916303; --sc-ok-text:#117C38; --sc-nd-text:#656B78; /* Il pill PIENO porta il testo sopra la tinta piena, non sul suo wash: nel tema scuro --crit è più brillante e il bianco ci cade a 3.76:1, quindi lì l'inchiostro si scurisce. */ --crit-solid-ink:#FFFFFF; /* Bande di scadenza (Figma 0:1) — cinque livelli, allineati a dataload.alert_da_giorni. Distinte dai semantici generici: «≤ 30» ha un arancio proprio, che --warn non dava. */ --sc-scaduto:#DC2626; --sc-scaduto-bg:#FCEAEA; --sc-scaduto-line:#F5D0D0; --sc-30:#EA580C; --sc-30-bg:#FDEEE3; --sc-30-line:#F8D5BC; --sc-60:#CA8A04; --sc-60-bg:#FBF3DA; --sc-60-line:#EFE0B0; --sc-ok:#16A34A; --sc-ok-bg:#E6F6EC; --sc-ok-line:#C6E9D2; --sc-nd:#6B7280; --sc-nd-bg:#EEF0F3; --sc-nd-line:#DCE0E6; --shadow-sm:0 1px 2px rgba(20,30,50,.05); --shadow:0 1px 2px rgba(20,30,50,.04),0 8px 24px rgba(20,30,50,.06); --shadow-lg:0 12px 44px rgba(20,30,50,.14); --r-shell:16px; --r-card:14px; --r-el:12px; --r-pill:999px; --font-display:"Fraunces",Georgia,"Times New Roman",serif; --font-body:"Hanken Grotesk",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif; /* Sidebar (Figma 97:7 aperta / 97:208 rail). `--sb-gap` è il distacco della scheda dal bordo: sta sulla .sidebar e NON su .app, così la colonna del contenuto non si sposta in verticale — la workspace posta ha l'altezza cablata su quella geometria. */ --sb-w:256px; --sb-mini-w:78px; --sb-gap:12px; /* Scala spaziatura (griglia 4px) — margini/gap/padding SOLO da questi token */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-8:48px; } @media (prefers-color-scheme:dark){ :root{ color-scheme:dark; --ground:#0B0D10; --surface:#14171C; --surface-2:#1A1E24; --top-bg:rgba(11,13,16,.72); --ink:#F2F4F7; --ink-soft:#98A2B0; --muted:#667085; --line:#262C34; --line-strong:#333A44; --accent:#10B981; --accent-ink:#04140E; --accent-2:#34D3A2; --accent-wash:#0F2E24; --chip-bg:#1A1E24; --ok:#22C55E; --ok-bg:#0F2A1B; --ok-line:#1E4A31; --info:#5AA0DE; --info-bg:#122130; --info-line:#274a68; --warn:#EAB308; --warn-bg:#2A2413; --warn-line:#4E4324; --crit:#F04438; --crit-bg:#2B1615; --crit-line:#5A2A28; --neu:#98A2B0; --neu-bg:#1A1E24; /* Su fondo scuro i semantici passano già (accento 7.08, ok 7.88, warn 9.37): i token di testo puntano agli originali e --accent-strong non scurisce nulla, perché lì il testo sull'accento è quasi nero, non bianco. */ --accent-strong:var(--accent); --accent-text:var(--accent-2); --ok-text:var(--ok); --warn-text:var(--warn); --crit-text:var(--crit); --neu-text:var(--ink-soft); --sc-scaduto-text:var(--sc-scaduto); --sc-30-text:var(--sc-30); --sc-60-text:var(--sc-60); --sc-ok-text:var(--sc-ok); --sc-nd-text:var(--sc-nd); --crit-solid-ink:#14181D; /* Bande di scadenza (Figma 0:1) — cinque livelli, allineati a dataload.alert_da_giorni. Distinte dai semantici generici: «≤ 30» ha un arancio proprio, che --warn non dava. */ --sc-scaduto:#F04438; --sc-scaduto-bg:#2B1615; --sc-scaduto-line:#5A2A28; --sc-30:#F97316; --sc-30-bg:#2A1A0F; --sc-30-line:#55321A; --sc-60:#EAB308; --sc-60-bg:#2A2413; --sc-60-line:#4E4324; --sc-ok:#22C55E; --sc-ok-bg:#0F2A1B; --sc-ok-line:#1E4A31; --sc-nd:#98A2B0; --sc-nd-bg:#1A1E24; --sc-nd-line:#2E353E; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.45); --shadow-lg:0 14px 48px rgba(0,0,0,.6); } } :root[data-theme="light"]{ color-scheme:light; --ground:#F5F6F8; --surface:#FFFFFF; --surface-2:#EEF0F3; --top-bg:rgba(255,255,255,.82); --ink:#14181D; --ink-soft:#5B6472; --muted:#98A2B0; --line:#E4E7EC; --line-strong:#D6DAE1; --accent:#0E9F6E; --accent-ink:#FFFFFF; --accent-2:#0B7F58; --accent-wash:#D8F3E7; --chip-bg:#EEF0F3; --ok:#16A34A; --ok-bg:#E6F6EC; --ok-line:#C6E9D2; --info:#2E6FA6; --info-bg:#EAF1F8; --info-line:#D4E1F0; --warn:#CA8A04; --warn-bg:#FBF3DA; --warn-line:#EFE0B0; --crit:#DC2626; --crit-bg:#FCEAEA; --crit-line:#F5D0D0; --neu:#6B7280; --neu-bg:#EEF0F3; /* Varianti LEGGIBILI dei semantici: gli stessi colori usati come TESTO su fondo chiaro non arrivano a 4.5:1 (accento 3.39, ok 2.94, warn 2.72). Questi token servono SOLO per il testo; sfondi, bordi e icone continuano a usare gli originali, così la tavolozza di marca resta quella. Il fondo dei pulsanti primari sta in --accent-strong (sotto): per un tenant con accento proprio lo calcola branding.py e lo inietta base_sereno.html, perché la quantità di scurimento dipende dalla tinta e in CSS non si può misurare. */ /* Fondo dei pulsanti primari: la stessa tinta dell'accento, scurita quanto basta perché il testo sopra regga AA (#0E9F6E col bianco è 3.39:1). NON è un color-mix: scurire di una quantità costante non basta su una tinta chiara e non ha ripiego sui motori che non lo supportano. Per un tenant con accento proprio, base_sereno.html sovrascrive questa coppia col valore calcolato da branding.py. */ --accent-strong:#0C845B; --accent-text:#0A7752; --ok-text:#12703A; --warn-text:#92610A; --crit-text:#C81E1E; --neu-text:#565E6B; /* Le cinque bande di scadenza escono tutte da `ui.banda_pill`, dichiarata «unica traduzione banda→colore dell'app»: lasciarle indietro voleva dire due ori diversi sulla stessa riga di scadenza. Ognuna è la propria tinta, scurita quanto basta sul proprio fondo. */ --sc-scaduto-text:#CD2323; --sc-30-text:#B94609; --sc-60-text:#916303; --sc-ok-text:#117C38; --sc-nd-text:#656B78; /* Il pill PIENO porta il testo sopra la tinta piena, non sul suo wash: nel tema scuro --crit è più brillante e il bianco ci cade a 3.76:1, quindi lì l'inchiostro si scurisce. */ --crit-solid-ink:#FFFFFF; /* Bande di scadenza (Figma 0:1) — cinque livelli, allineati a dataload.alert_da_giorni. Distinte dai semantici generici: «≤ 30» ha un arancio proprio, che --warn non dava. */ --sc-scaduto:#DC2626; --sc-scaduto-bg:#FCEAEA; --sc-scaduto-line:#F5D0D0; --sc-30:#EA580C; --sc-30-bg:#FDEEE3; --sc-30-line:#F8D5BC; --sc-60:#CA8A04; --sc-60-bg:#FBF3DA; --sc-60-line:#EFE0B0; --sc-ok:#16A34A; --sc-ok-bg:#E6F6EC; --sc-ok-line:#C6E9D2; --sc-nd:#6B7280; --sc-nd-bg:#EEF0F3; --sc-nd-line:#DCE0E6; --shadow-sm:0 1px 2px rgba(20,30,50,.05); --shadow:0 1px 2px rgba(20,30,50,.04),0 8px 24px rgba(20,30,50,.06); --shadow-lg:0 12px 44px rgba(20,30,50,.14); } :root[data-theme="dark"]{ color-scheme:dark; --ground:#0B0D10; --surface:#14171C; --surface-2:#1A1E24; --top-bg:rgba(11,13,16,.72); --ink:#F2F4F7; --ink-soft:#98A2B0; --muted:#667085; --line:#262C34; --line-strong:#333A44; --accent:#10B981; --accent-ink:#04140E; --accent-2:#34D3A2; --accent-wash:#0F2E24; --chip-bg:#1A1E24; --ok:#22C55E; --ok-bg:#0F2A1B; --ok-line:#1E4A31; --info:#5AA0DE; --info-bg:#122130; --info-line:#274a68; --warn:#EAB308; --warn-bg:#2A2413; --warn-line:#4E4324; --crit:#F04438; --crit-bg:#2B1615; --crit-line:#5A2A28; --neu:#98A2B0; --neu-bg:#1A1E24; /* Su fondo scuro i semantici passano già (accento 7.08, ok 7.88, warn 9.37): i token di testo puntano agli originali e --accent-strong non scurisce nulla, perché lì il testo sull'accento è quasi nero, non bianco. */ --accent-strong:var(--accent); --accent-text:var(--accent-2); --ok-text:var(--ok); --warn-text:var(--warn); --crit-text:var(--crit); --neu-text:var(--ink-soft); --sc-scaduto-text:var(--sc-scaduto); --sc-30-text:var(--sc-30); --sc-60-text:var(--sc-60); --sc-ok-text:var(--sc-ok); --sc-nd-text:var(--sc-nd); --crit-solid-ink:#14181D; /* Bande di scadenza (Figma 0:1) — cinque livelli, allineati a dataload.alert_da_giorni. Distinte dai semantici generici: «≤ 30» ha un arancio proprio, che --warn non dava. */ --sc-scaduto:#F04438; --sc-scaduto-bg:#2B1615; --sc-scaduto-line:#5A2A28; --sc-30:#F97316; --sc-30-bg:#2A1A0F; --sc-30-line:#55321A; --sc-60:#EAB308; --sc-60-bg:#2A2413; --sc-60-line:#4E4324; --sc-ok:#22C55E; --sc-ok-bg:#0F2A1B; --sc-ok-line:#1E4A31; --sc-nd:#98A2B0; --sc-nd-bg:#1A1E24; --sc-nd-line:#2E353E; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.45); --shadow-lg:0 14px 48px rgba(0,0,0,.6); } *{box-sizing:border-box;} /* `[hidden]{display:none}` è una regola dello USER-AGENT: perde contro qualunque `display:` d'autore di pari specificità. Tre componenti (.tabbar-pop, .paga-edit/.compenso-form, .cf-row) la sconfiggevano e restavano disegnati; altri tredici se la ridichiaravano a mano, uno per uno. Questa riga la rende vera una volta per tutte, per ogni componente presente e futuro: `hidden` torna a essere un contratto e non un suggerimento. Chi deve mostrare l'elemento toglie l'attributo (modalOpen, sereno-tabs.js…), non lo sovrascrive col CSS. */ [hidden]{display:none !important;} html,body{margin:0;padding:0;} body{ background:var(--ground); color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } svg{display:block;} .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;} .ic-sm{width:16px;height:16px;stroke-width:2;} .ic-xs{width:12px;height:12px;stroke-width:2.2;} /* icona dentro un pill/chip */ .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} /* Utility di layout — sostituiscono gli stili inline (spazi solo dai token --sp-*) */ .stack{display:flex;flex-direction:column;gap:var(--sp-4);} .stack-sm{display:flex;flex-direction:column;gap:var(--sp-2);} .stack-lg{display:flex;flex-direction:column;gap:var(--sp-6);} .row{display:flex;align-items:center;gap:var(--sp-3);} .cluster{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;} .toolbar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin:0 0 var(--sp-4);} .spacer{flex:1;} .grow{flex:1;min-width:0;} a{color:inherit;text-decoration:none;} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;} button{font-family:inherit;} /* ============ SHELL ============ */ .app{display:flex;min-height:100vh;} /* Scheda staccata dal fondo (Figma 97:7): bordo su TUTTI i lati, non solo a destra. Non scorre più lei: scorre `.nav-scroll`, così marchio e footer restano fermi. */ .sidebar{ width:var(--sb-w);flex:0 0 var(--sb-w); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-shell); box-shadow:var(--shadow-sm); display:flex;flex-direction:column;position:sticky;overflow:hidden; margin:var(--sb-gap);top:var(--sb-gap);height:calc(100vh - var(--sb-gap)*2); transition:width .18s ease,flex-basis .18s ease; } .brand{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:20px 16px 16px;border-bottom:1px solid var(--line);} .brand-mark{ width:38px;height:38px;border-radius:11px;flex:0 0 auto; background:var(--accent-strong);color:var(--accent-ink); display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:.02em; } /* Logo ufficiale (immagine) nella sidebar: contenuto intatto, angoli morbidi. */ .brand-logo{width:36px;height:36px;border-radius:10px;object-fit:contain;flex:0 0 auto;} .brand-in{display:flex;align-items:center;gap:10px;min-width:0;} .brand-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0;} .brand-txt b{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:-.01em;} .brand-txt small{color:var(--ink-soft);font-size:11px;} /* Comando del rail. Non è `.icon-btn`: quello è 34px tondo da topbar, questo 28px quadrato. */ .sb-toggle{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;border:0;cursor:pointer; background:var(--surface-2);color:var(--ink-soft);border-radius:6px;transition:background .15s,color .15s;} .sb-toggle:hover{background:var(--line);color:var(--ink);} .sb-toggle .ic{width:20px;height:20px;} .side-nav{flex:1;min-height:0;display:flex;flex-direction:column;} /* `overflow-x:hidden` esplicito: con il solo `overflow-y:auto` l'asse X vale `auto`, e bastava un contatore a tre cifre nel rail per far comparire una barra di scorrimento ORIZZONTALE dentro una colonna da 78px. Qui non c'è niente che debba scorrere in orizzontale. */ .nav-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px; display:flex;flex-direction:column;gap:2px;} .nav-group{display:flex;flex-direction:column;gap:2px;} /* Il filetto della sezione è il bordo dell'etichetta stessa: un nodo in meno per sezione. Colore `--line` e NON `--surface-2` come nel frame: in tema scuro --surface-2 (#1A1E24) su --surface (#14171C) non si vede. */ .nav-lbl{margin:12px 12px 4px;padding-bottom:4px;border-bottom:1px solid var(--line); font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);} .nav-item{ display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px; color:var(--ink);font-size:13.5px;font-weight:500;transition:background .15s,color .15s; } .nav-item:hover{background:var(--surface-2);color:var(--ink);} .nav-item .ic{width:18px;height:18px;color:var(--ink-soft);transition:color .15s;} .nav-item:hover .ic{color:var(--ink);} /* La barretta d'accento è un'ombra INTERNA, non un border-left: un bordo sposterebbe di 3px il contenuto della sola riga attiva rispetto a tutte le altre. */ .nav-item.is-active{background:var(--accent-wash);color:var(--accent-text);font-weight:700; box-shadow:inset 3px 0 0 var(--accent-strong);} .nav-item.is-active .ic{color:var(--accent);} .nav-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .nav-mini{display:none;} .nav-foot{border-top:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:2px;} /* Contatore in riga (non lette della posta): pill pieno, come gli altri rossi dell'app. */ .nav-count{margin-left:auto;font-size:10px;font-weight:700;padding:2px 6px;border-radius:var(--r-pill); background:var(--crit);color:var(--crit-solid-ink);font-variant-numeric:tabular-nums;} /* ---- Rail chiuso (Figma 97:208). La classe sta su , non su .app: lì Alpine gestisce già `nav-open` del drawer mobile e due sorgenti sulla stessa lista di classi si pestano. Tutto il blocco vive sopra i 920px: sotto la sidebar è un drawer, e un drawer da 78px non ha senso. Scoprendo la soglia col media query non serve rimettere a mano nessun valore. ---- */ @media (min-width:921px){ html.sb-mini{--sb-w:var(--sb-mini-w);} html.sb-mini .brand{flex-direction:column;justify-content:center;gap:8px;padding:16px 4px 12px;} html.sb-mini .brand-txt{display:none;} html.sb-mini .brand-logo{width:32px;height:32px;} /* Nel rail la barra di scorrimento si nasconde. Due motivi, uno di allineamento e uno di spazio: toglieva larghezza a .nav-scroll ma non a .nav-foot, e in una colonna a contenuto CENTRATO questo sfasava di ~7,5px le icone della lista rispetto a quelle del piede fisso; e i 15px che si prendeva su 78 troncavano le mini-etichette che esistono apposta per non essere troncate (riservare il varco sui due lati raddrizzava il centro ma peggiorava il troncamento). Lo scorrimento resta: rotella, trackpad, tastiera. Sopra i 920px, cioè con la sidebar aperta, la barra è quella normale. */ html.sb-mini .nav-scroll{padding:10px 4px;gap:6px;scrollbar-width:none;} html.sb-mini .nav-scroll::-webkit-scrollbar{width:0;height:0;} html.sb-mini .nav-item{flex-direction:column;gap:4px;padding:8px 4px;border-radius:8px; text-align:center;position:relative;} html.sb-mini .nav-item.is-active{box-shadow:none;} html.sb-mini .nav-txt{display:none;} html.sb-mini .nav-mini{display:block;font-size:10px;line-height:1.1;max-width:100%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* L'etichetta di sezione si riduce al solo filetto: la parola non ci sta in 78px. */ html.sb-mini .nav-lbl{margin:6px auto;padding:0;width:40px;height:0;overflow:hidden; border-bottom:1px solid var(--line);} html.sb-mini .nav-foot{padding:10px 4px;gap:6px;} /* Nel rail il contatore diventa un PUNTO. Il numero era ancorato col bordo sinistro al centro della voce, quindi cresceva solo verso destra: copriva un terzo dell'icona e da tre cifre usciva dalla colonna. E il numero vero non è piccolo — la casella di produzione ne ha 1.477. In 78px accanto a un'icona da 18 un pill a più cifre non ci sta: il punto dice «c'è posta da leggere» senza mai sbordare, e il numero esatto resta nel nome accessibile della voce e nella sidebar aperta. Il Figma 97:208 disegna un badge da 12px con una cifra sola: stessa posizione (angolo in alto a destra dell'icona), senza la cifra che a quella misura non regge. */ html.sb-mini .nav-count{position:absolute;top:6px;left:calc(50% + 6px);margin:0; width:8px;height:8px;padding:0;font-size:0;line-height:0;border-radius:50%;} } .main{flex:1;min-width:0;display:flex;flex-direction:column;} .topbar{ position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px; padding:12px 26px;background:var(--top-bg);backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); } .tb-left{display:flex;align-items:center;gap:18px;flex:1;min-width:0;} .page-title{margin:0;font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.015em;white-space:nowrap;} .search{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line); border-radius:var(--r-pill);padding:7px 14px;max-width:300px;flex:1;transition:border-color .15s,box-shadow .15s;} .search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);} .search .ic{color:var(--ink-soft);} .search input{border:0;background:transparent;color:var(--ink);font-size:13.5px;width:100%;outline:none;} .search input::placeholder{color:var(--ink-soft);} .search{position:relative;} .search-live{position:absolute;top:100%;left:0;right:0;margin-top:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-lg);max-height:360px;overflow:auto;z-index:50;} .search-live[hidden]{display:none;} .sl-titolo{padding:8px 14px;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--ink-soft);letter-spacing:.04em;border-bottom:1px solid var(--line);} .sl-voce{display:flex;flex-direction:column;gap:2px;padding:9px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink-soft);font-size:13.5px;} .sl-voce:last-child{border-bottom:0;} .sl-voce:hover{background:var(--accent-wash);color:var(--accent-text);} .sl-label{font-weight:500;color:var(--ink);} .sl-meta{font-size:11px;color:var(--ink-soft);} /* ============ COMMAND PALETTE (Figma 12:53) ============ */ .cmdk-overlay{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;} .cmdk-overlay[hidden]{display:none;} .cmdk-box{width:min(603px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-lg);overflow:hidden;} .cmdk-input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:var(--sp-4) var(--sp-5);font-family:var(--font-body);font-size:15px;color:var(--ink);outline:none;} .cmdk-input::placeholder{color:var(--ink-soft);} .cmdk-list{max-height:52vh;overflow-y:auto;padding:var(--sp-2);} .cmdk-list .sl-voce.is-sel{background:var(--accent-wash);} .cmdk-list .sl-voce.is-sel .sl-label{color:var(--accent-2);} .tb-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;} .data-chip{font-size:12px;color:var(--ink-soft);white-space:nowrap;} .data-chip b{color:var(--ink-soft);font-weight:600;font-variant-numeric:tabular-nums;} .icon-btn,.notif-bell{ width:38px;height:38px;border-radius:11px;border:1px solid transparent;background:transparent;color:var(--ink-soft); display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s;position:relative; } .icon-btn:hover,.notif-bell:hover{background:var(--surface-2);color:var(--ink);} .avatar{width:36px;height:36px;border-radius:var(--r-pill);background:var(--accent-strong);color:var(--accent-ink); display:grid;place-items:center;font-size:12.5px;font-weight:700;letter-spacing:.03em;flex:0 0 auto;} /* ============ MENU UTENTE (Figma 3:7) ============ */ /* `.avatar` resta quella storica (sereno.css:189): qui si azzerano solo gli stili di button. */ .usermenu{position:relative;flex:0 0 auto;} .avatar--btn{border:0;cursor:pointer;padding:0;font-family:var(--font-body);} .usermenu-pop{position:absolute;right:0;top:calc(100% + var(--sp-2));z-index:30; min-width:216px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-el);box-shadow:var(--shadow-lg);padding:var(--sp-2); display:flex;flex-direction:column;gap:2px;} .usermenu-head{display:flex;align-items:center;gap:10px;padding:10px 12px;} .usermenu-id{display:flex;flex-direction:column;min-width:0;} .usermenu-id b{font-size:13px;font-weight:500;color:var(--ink);} .usermenu-id small{font-size:11px;color:var(--ink-soft);} .usermenu-sep{height:1px;border:0;background:var(--line);margin:var(--sp-1) var(--sp-2);} .usermenu-item{display:flex;align-items:center;gap:var(--sp-2);width:200px; padding:9px 12px;border:0;border-radius:6px;background:transparent;cursor:pointer; font-family:var(--font-body);font-size:13px;color:var(--ink);text-align:left;} .usermenu-item:hover{background:var(--surface-2);} .usermenu-item .ic{color:var(--ink-soft);} .usermenu-item.is-esci,.usermenu-item.is-esci .ic{color:var(--crit);} .usermenu-item.is-esci:hover{background:var(--crit-bg);} /* ============ TAB BAR CON OVERFLOW (Figma 3:37) ============ */ .tabbar{display:flex;align-items:center;gap:4px;padding:6px;position:relative; background:var(--surface);border:1px solid var(--line);border-radius:10px;margin:4px 0 18px;} .tabbar-tab{border:0;background:transparent;cursor:pointer;padding:7px 14px;border-radius:7px; font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--ink-soft);white-space:nowrap;} .tabbar-tab:hover{background:var(--surface-2);color:var(--ink);} .tabbar-tab.is-on{background:var(--accent-wash);color:var(--accent-text);} .tabbar-more{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:7px 14px; border-radius:7px;font-family:var(--font-body);font-size:13px;color:var(--ink-soft);white-space:nowrap;} .tabbar-more:hover{background:var(--surface-2);color:var(--ink);} .tabbar-pop{position:absolute;right:6px;top:calc(100% + 4px);z-index:25; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-el); box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;gap:2px;} .tabbar-popitem{width:170px;padding:8px 12px;border:0;border-radius:6px;background:transparent; cursor:pointer;text-align:left;font-family:var(--font-body);font-size:13px;color:var(--ink);} .tabbar-popitem:hover{background:var(--surface-2);} /* ============ SKELETON (Figma 3:57) ============ */ .skeleton{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);} .skeleton-bar{height:12px;border-radius:6px;background:var(--surface-2); background-image:linear-gradient(90deg,var(--surface-2) 0%,var(--chip-bg) 50%,var(--surface-2) 100%); background-size:200% 100%;animation:skeleton-shimmer 1.4s ease-in-out infinite;} @keyframes skeleton-shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}} @media (prefers-reduced-motion:reduce){ .skeleton-bar{animation:none;background-image:none;} } /* ============ KPI: trend e sparkline (Figma 3:72) ============ */ .kpi-trend{display:inline-flex;align-items:center;margin-left:var(--sp-3);padding:3px 8px; border-radius:var(--r-pill);font-size:11px;font-weight:500; background:var(--neu-bg);color:var(--neu);white-space:nowrap;} .kpi-trend.is-buono{background:var(--accent-wash);color:var(--accent-text);} .kpi-trend.is-cattivo{background:var(--crit-bg);color:var(--crit-text);} .kpi-spark{display:block;width:140px;height:26px;margin-top:var(--sp-2);color:var(--accent);} .kpi.is-crit .kpi-spark{color:var(--crit);} /* ============ EMPTY STATE (Figma 3:64) ============ */ .empty-ico{width:48px;height:48px;border-radius:var(--r-pill);display:grid;place-items:center; background:var(--surface-2);color:var(--ink-soft);margin:0 auto var(--sp-2);} .empty-hint{max-width:260px;margin:0 auto;text-align:center;font-size:12px;color:var(--ink-soft);} /* ============ COSTI: colonna dipendente e menu di riga (Figma 5:89) ============ */ .costo-dip{display:flex;flex-direction:column;line-height:1.25;} .costo-dip b{font-weight:500;color:var(--ink);} .costo-dip-cf{font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums;} /* La colonna azioni resta ancorata a destra: nel Figma «···» è sempre visibile, niente scroll orizzontale per raggiungerla. */ .costo-azioni{position:sticky;right:0;background:var(--surface);width:48px;} .rowmenu{position:relative;} .rowmenu-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:25;min-width:152px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-el); box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;gap:2px;} .rowmenu-item{border:0;background:transparent;cursor:pointer;padding:8px 12px;border-radius:6px; text-align:left;font-family:var(--font-body);font-size:13px;color:var(--ink);white-space:nowrap;} .rowmenu-item:hover{background:var(--surface-2);} .rowmenu-item.is-elimina{color:var(--crit);} .rowmenu-item.is-elimina:hover{background:var(--crit-bg);} /* ============ COSTI — VISTA ANALITICA (Figma 11:2) ============ */ .graf-barre{width:100%;height:200px;color:var(--accent);} .graf-lbl{font-size:9px;fill:var(--ink-soft);} /* `fill:` non è `color:`: era sfuggita */ .budget-riga{display:grid;grid-template-columns:100px 1fr auto;align-items:center; gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--line);} .budget-riga:last-child{border-bottom:0;} .budget-code{font-weight:600;font-variant-numeric:tabular-nums;} .budget-bar{height:8px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;} .budget-fill{display:block;height:100%;background:var(--accent);} .budget-bar.is-sforato .budget-fill{background:var(--crit);} .budget-bar.is-vuota{background:var(--surface-2);} .budget-num{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap;} .notif{position:relative;} .notif-badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill); background:var(--crit);color:var(--crit-solid-ink);font-size:10px;font-weight:700;display:grid;place-items:center; border:2px solid var(--surface);font-variant-numeric:tabular-nums;} .notif-panel{ position:absolute;top:calc(100% + 10px);right:0;width:320px;max-width:82vw; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-lg); overflow:hidden;z-index:40; } .notif-panel[hidden]{display:none;} .np-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);} .np-head b{font-family:var(--font-display);font-weight:600;font-size:15px;} .np-clear{background:none;border:0;color:var(--accent-2);font-size:12px;font-weight:600;cursor:pointer;padding:4px;} .np-list{max-height:340px;overflow-y:auto;} .np-item{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);} .np-item:last-child{border-bottom:0;} .np-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:0 0 auto;background:var(--muted);} .np-item.unread .np-dot{background:var(--accent);} .np-item.unread{background:var(--accent-wash);} .np-txt b{display:block;font-size:13px;font-weight:600;} .np-txt span{font-size:12px;color:var(--ink-soft);} /* ============ CONTENT ============ */ .content{padding:26px;max-width:1200px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:22px;} /* Variante full-width: SOLO le pagine che la chiedono via `{% block content_class %}` (oggi /mail, layout stile Gmail). Il default 1200px centrato resta per tutte le altre. */ .content--full{max-width:none;padding:16px 20px;} .eyebrow{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:11px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);} .eyebrow .ic{width:15px;height:15px;color:var(--accent);} /* banner onboarding */ .banner{display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-shell);box-shadow:var(--shadow);padding:18px 22px;overflow:hidden; transition:opacity .3s,transform .3s,margin .3s,max-height .3s;} .banner-copy{flex:1;min-width:0;} .banner-copy h2{margin:8px 0 12px;font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.01em;} .banner-copy h2 span{color:var(--accent-2);} .track{height:7px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;max-width:420px;} .track>span{display:block;height:100%;border-radius:var(--r-pill); background:linear-gradient(90deg,var(--accent),var(--accent-2));} .banner-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;} .banner.closing{opacity:0;transform:translateY(-6px);max-height:0;margin-top:-22px;padding-top:0;padding-bottom:0;border-color:transparent;} .btn{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600; padding:9px 16px;border-radius:var(--r-pill);cursor:pointer;border:1px solid transparent; transition:filter .15s,background .15s,border-color .15s,transform .05s;} .btn:active{transform:translateY(1px);} .btn-pri{background:var(--accent-strong);color:var(--accent-ink);} .btn-pri:hover{filter:brightness(1.06);} .btn-ghost{background:transparent;color:var(--ink-soft);border-color:var(--line-strong);} .btn-ghost:hover{background:var(--surface-2);color:var(--ink);} /* KPI */ .kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;} .kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-sm); padding:16px 17px;display:flex;flex-direction:column;gap:2px;transition:box-shadow .18s,transform .18s,border-color .18s;} .kpi:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--line-strong);} .kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;} .kpi-ico{width:34px;height:34px;border-radius:10px;background:var(--accent-wash);color:var(--accent);display:grid;place-items:center;} .kpi-ico .ic{width:18px;height:18px;} .kpi-badge{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; padding:3px 9px;border-radius:var(--r-pill);background:var(--chip-bg);color:var(--ink-soft);} .kpi-lbl{margin:0;font-size:12.5px;color:var(--ink-soft);font-weight:500;} .kpi-n{margin:1px 0 0;font-size:34px;font-weight:600;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;} .kpi-d{margin:4px 0 0;font-size:11.5px;color:var(--ink-soft);} .kpi.is-crit .kpi-ico{background:var(--crit-bg);color:var(--crit-text);} .kpi.is-crit .kpi-n{color:var(--crit-text);} .kpi.is-crit .kpi-badge{background:var(--crit-bg);color:var(--crit-text);} .kpi.is-warn .kpi-ico{background:var(--warn-bg);color:var(--warn-text);} .kpi.is-warn .kpi-n{color:var(--warn-text);} .kpi.is-warn .kpi-badge{background:var(--warn-bg);color:var(--warn-text);} .kpi.is-info .kpi-ico{background:var(--info-bg);color:var(--info);} .kpi.is-info .kpi-badge{background:var(--info-bg);color:var(--info);} /* is-ok: il tono positivo mancava, così un badge «In Uso» usciva neutro come «In Stock». Il numero resta su --ink: colorarlo di verde farebbe sembrare un'allerta ciò che è normale. */ .kpi.is-ok .kpi-ico{background:var(--ok-bg);color:var(--ok-text);} .kpi.is-ok .kpi-badge{background:var(--ok-bg);color:var(--ok-text);} /* panel */ .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-shell);box-shadow:var(--shadow);overflow:hidden;} .panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px 14px;} .panel-head h2{margin:0;display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.01em;} .panel-head h2 .ic{width:18px;height:18px;color:var(--accent);} .head-actions{display:flex;align-items:center;gap:8px;} .chip-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--ink-soft); background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 13px;cursor:pointer;transition:background .15s,border-color .15s;} .chip-btn:hover{background:var(--chip-bg);border-color:var(--line-strong);} .panel-sub{margin:0;padding:0 20px 14px;font-size:13px;color:var(--ink-soft);} .panel-sub b{color:var(--crit);font-weight:700;} /* stato scadenze bar */ .bar{display:flex;gap:4px;height:16px;padding:0 20px;margin-bottom:16px;} .bar-seg{border-radius:var(--r-pill);min-width:8px;transition:filter .15s,transform .15s;cursor:pointer;} .bar-seg:hover{filter:brightness(1.08);transform:scaleY(1.18);} .seg-scad{background:var(--crit);} .seg-r{background:#E07A54;} .seg-g{background:var(--warn);} .seg-v{background:var(--ok);} .seg-o{background:var(--neu);opacity:.55;} .legend{display:flex;flex-wrap:wrap;gap:10px 22px;padding:0 20px 20px;} .lg{display:flex;align-items:center;gap:9px;} .lg .sw{width:11px;height:11px;border-radius:4px;flex:0 0 auto;} .lg-txt{display:flex;flex-direction:column;line-height:1.25;} .lg-lbl{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);} .lg-n{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;} /* urgenti */ .filterbar{display:flex;align-items:center;gap:8px;padding:0 20px 8px;} .seg-toggle{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;gap:2px;} .seg-toggle button{border:0;background:transparent;color:var(--ink-soft);font-size:12.5px;font-weight:600; padding:6px 14px;border-radius:var(--r-pill);cursor:pointer;transition:background .15s,color .15s;} .seg-toggle button.seg-on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);} .reclist{list-style:none;margin:0;padding:0;transition:opacity .2s;} .reclist.busy{opacity:.45;pointer-events:none;} .rec{display:flex;align-items:center;gap:16px;padding:14px 20px;border-top:1px solid var(--line);} .rec-lead{display:flex;flex-direction:column;gap:6px;align-items:flex-start;flex:0 0 128px;} .rec-gg{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-soft);} .rec-gg.is-crit{color:var(--crit-text);} .rec-gg.is-warn{color:var(--warn-text);} .rec-gg.is-ok{color:var(--ok-text);} .rec-gg.is-info{color:var(--info);} .rec-main{flex:1;min-width:0;} .rec-title{margin:0;font-size:14.5px;font-weight:600;} .rec-sub{margin:2px 0 0;font-size:12.5px;color:var(--ink-soft);} .rec-foot{display:flex;align-items:center;gap:14px;flex:0 0 auto;} .rec-date{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;} .rec-date .ic{width:15px;height:15px;} .rec[hidden]{display:none;} .rec-updated{padding:12px 20px;font-size:11.5px;color:var(--ink-soft);border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;} .spin{width:13px;height:13px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--accent);animation:sp .7s linear infinite;} .rec-updated .spin{display:none;} .rec-updated.loading .spin{display:inline-block;} .rec-updated.loading .rec-updated-txt{opacity:.6;} @keyframes sp{to{transform:rotate(360deg);}} /* pill */ .pill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;letter-spacing:.02em; padding:4px 11px;border-radius:var(--r-pill);border:1px solid transparent;white-space:nowrap;} .pill-ok{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-line);} .pill-info{background:var(--info-bg);color:var(--info);border-color:var(--info-line);} .pill-warn{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-line);} .pill-crit{background:var(--crit-bg);color:var(--crit-text);border-color:var(--crit-line);} .pill-neu{background:var(--neu-bg);color:var(--neu-text);} /* Bande di scadenza — soft, come i .pill semantici; la banda SCADUTO resta la più forte. */ .pill-sc-scaduto{background:var(--sc-scaduto-bg);color:var(--sc-scaduto-text);border-color:var(--sc-scaduto-line);} .pill-sc-30{background:var(--sc-30-bg);color:var(--sc-30-text);border-color:var(--sc-30-line);} .pill-sc-60{background:var(--sc-60-bg);color:var(--sc-60-text);border-color:var(--sc-60-line);} .pill-sc-ok{background:var(--sc-ok-bg);color:var(--sc-ok-text);border-color:var(--sc-ok-line);} .pill-sc-nd{background:var(--sc-nd-bg);color:var(--sc-nd-text);border-color:var(--sc-nd-line);} /* Data/ora standard: il tempo relativo è secondario rispetto alla data. */ .dtf{font-variant-numeric:tabular-nums;white-space:nowrap;} .dtf.is-vuoto{color:var(--ink-soft);} .sec-link{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--accent-2);} .sec-link .ic{width:15px;height:15px;} /* footer note */ .pv-note{max-width:1200px;margin:2px auto 8px;padding:0 26px 24px;color:var(--ink-soft);font-size:12px;line-height:1.6;} .pv-note b{color:var(--ink-soft);} /* mobile chrome */ .only-mobile{display:none;} .backdrop{display:none;} .bottomnav{display:none;} @media (max-width:920px){ .kpis{grid-template-columns:repeat(2,1fr);} /* Il drawer resta a filo: la scheda staccata (margine+raggio) è un fatto da desktop, su mobile fluttuerebbe dentro lo schermo con una striscia di fondo intorno. */ .sidebar{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow-lg); margin:0;height:100vh;border-radius:0;border-width:0 1px 0 0;} .app.nav-open .sidebar{transform:translateX(0);} .sb-toggle{display:none;} /* il drawer si apre dall'hamburger, non dal rail */ .backdrop{display:block;position:fixed;inset:0;background:rgba(10,15,13,.42);z-index:50;opacity:0;pointer-events:none;transition:opacity .25s;} .app.nav-open .backdrop{opacity:1;pointer-events:auto;} .only-mobile{display:grid;} .search{display:none;} .content{padding:18px 16px 90px;} .topbar{padding:11px 16px;} .bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:45;background:var(--surface); border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;} .bn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;border-radius:10px;color:var(--ink-soft);font-size:10.5px;font-weight:600;background:none;border:0;cursor:pointer;} .bn .ic{width:21px;height:21px;} .bn.on{color:var(--accent);} .rec{flex-wrap:wrap;gap:8px 14px;} .rec-lead{flex-direction:row;align-items:center;flex-basis:auto;gap:10px;} .rec-foot{width:100%;justify-content:space-between;} .banner{flex-direction:column;align-items:flex-start;} .data-chip{display:none;} } @media (max-width:480px){ .kpis{grid-template-columns:1fr 1fr;} .kpi-n{font-size:30px;} } /* entrance */ @media (prefers-reduced-motion:no-preference){ .rise{opacity:0;transform:translateY(10px);animation:rise .5s cubic-bezier(.2,.7,.3,1) forwards;} @keyframes rise{to{opacity:1;transform:none;}} } /* ============ Filtro Tutte/Critiche (Alpine mette data-mode; il CSS filtra) ============ */ .urgenti-scope[data-mode="crit"] .rec:not([data-sev="crit"]){display:none;} /* ============ Spinner refresh HTMX (hx-indicator) ============ */ .htmx-indicator{display:none;} .htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline-block;} /* Alpine: nascondi finche' non inizializzato per evitare flash */ [x-cloak]{display:none!important;} /* ══════════════════════════════════════════════════════════════════════════════ LIBRERIA COMPONENTI (Fase 0) — stessi nomi-classe dei template legacy, in Sereno. Migrare una pagina = `extends base_sereno.html`; il markup esistente si stila qui. ══════════════════════════════════════════════════════════════════════════════ */ /* ---------- Tipografia helper ---------- */ .muted{color:var(--ink-soft);} .t-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);} .t-data{font-variant-numeric:tabular-nums;} .t-section{font-family:var(--font-display);font-weight:600;font-size:17px;line-height:24px;letter-spacing:-.01em;} .t-caption{font-size:13px;line-height:18px;color:var(--ink-soft);} .txt-err{color:var(--crit-text);} .txt-ok{color:var(--ok-text);} .txt-warn{color:var(--warn-text);} .txt-info{color:var(--info);} /* ---------- Intestazione di pagina ---------- */ .page-head{display:flex;align-items:center;gap:11px;margin:0 0 6px;} .page-head h1{margin:0;font-family:var(--font-display);font-weight:600;font-size:28px;line-height:34px;letter-spacing:-.015em;text-wrap:balance;} .page-head .ph-icon{color:var(--accent);} /* Variante `page_head(..., cls='page-head--chip')`: l'icona sta in una pastiglia invece che nuda accanto al titolo. Il padding vale perché il viewBox dell'SVG si mappa sul content box, quindi il disegno resta di 20px dentro un riquadro di 38. */ .page-head--chip .ph-icon{box-sizing:border-box;width:38px;height:38px;padding:9px; border-radius:10px;background:var(--accent-wash);color:var(--accent-text);} /* `.page-head` è `justify-content:space-between` (riga più sotto): con tre figli — icona, titolo, azioni — il titolo finiva spinto in mezzo alla fascia, staccato dalla sua icona. L'`auto` lo riattacca a sinistra e lascia le azioni a destra. */ .page-head--chip h1{margin-right:auto;} /* ---------- Bottoni (varianti legacy unificate) ---------- */ .btn-soft,button.ghost,.mini{font-family:var(--font-body);font-size:13.5px;font-weight:600;cursor:pointer; /* un