/* --------------------------------------------------------------------------- Barlow — SIL Open Font License 1.1. Il testo integrale e in OFL.txt, in questa stessa cartella: la licenza **deve** accompagnare i file, ed e il motivo per cui sta qui e non in docs/ (docs/ non va sul server del cliente). Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow) Prelevati dal repository dell'autore, tag 1.422, il 2026-10-03. 2a74a99f47e8234a4bf31a1e63b7bc2d8edf7ab069cd90b89fcd9c0bed7332f0 Barlow-Regular.woff2 fb08e02f3c06ae4749e5e8fe745ff46815b20169eaf295f11efdc41eb9e66c6e Barlow-SemiBold.woff2 File **intatti**: nessun subsetting, nessuna riconversione. Conta, perche la OFL riserva il nome: una versione modificata non potrebbe piu chiamarsi Barlow. Il ragionamento completo e nella documentazione del fornitore. --------------------------------------------------------------------------- */ /* =========================================================================== BSS//CORE — stile di base. I token di colore sono quelli del prototipo grafico fornito dal committente. Non si cambiano a occhio: il cliente riconosce la propria azienda dai colori. (Il riferimento interno sta nella documentazione del fornitore, non qui: questi file non vengono compilati, quindi viaggiano in chiaro sul server del cliente.) ⚠️ NESSUN `@import` e nessun `` verso internet. Questa interfaccia gira sul server del cliente, in rete locale: una richiesta a fonts.googleapis.com su una macchina senza internet non "degrada", BLOCCA il rendering per tutto il tempo del timeout DNS. ⭐ Barlow ADESSO C'E', e arriva da questa stessa cartella (2026-10-03). Prima si vedeva soltanto se era installato sulla macchina, altrimenti si cadeva su Segoe UI: cioe' l'interfaccia era un carattere diverso a seconda del PC da cui la si apriva. I due `.woff2`, la licenza SIL OFL e la provenienza stanno in `stile/`, accanto a questo file — vedi `stile/OFL.txt`. =========================================================================== */ /* ============================== I CARATTERI ============================== 🔴 Percorsi RELATIVI a questo file, serviti dalla stessa origine dell'API. Nessun `src: url(https://...)`: la regola di non uscire in rete vale anche per un carattere, e un `url()` esterno in un `@font-face` e' una richiesta esterna esattamente come un `` — solo meno visibile. `font-display:swap`: il testo si legge subito col carattere di sistema e passa a Barlow appena il file e' pronto. Da disco sono 60 KB e non si vede, ma un testo invisibile per tre secondi e' peggio di un testo che cambia carattere, e `swap` e' l'unico valore che non ha quel rischio. ⚠️ Due pesi, non nove: 400 per il testo corrente e 600 per `strong`. Ogni peso in piu' e' un file in piu' nell'artefatto che nessuna regola chiede. ⚠️ I file sono INTATTI, non sottoinsiemati: la OFL riserva il nome «Barlow» alla versione non modificata, e questi lo sono. Chi li tocca cambia nome. ========================================================================== */ @font-face{ font-family:"Barlow"; font-style:normal; font-weight:400; font-display:swap; src:url("Barlow-Regular.woff2") format("woff2"); } @font-face{ font-family:"Barlow"; font-style:normal; font-weight:600; font-display:swap; src:url("Barlow-SemiBold.woff2") format("woff2"); } :root{ color-scheme: dark; /* --- i token del prototipo, invariati --- */ --bg:#070a0d; --panel:#0d1217; --panel-2:#111820; --line:#1b252e; --line-2:#26333e; --fg:#d7dee4; --muted:#7c8996; --dim:#4b5763; --idle:#48c9dc; --think:#ff3434; --talk:#35f07c; --warn:#f0b43c; --state:var(--idle); /* --- il marchio: scudo araldico, blu istituzionale e argento --- Il blu NON si usa come colore di interfaccia: un blu scuro su fondo scuro non si vede. Si usa per l'identita' e per lo stato attivo del selettore. */ --blu:#003e7b; --argento:#d2d3d5; /* --- caratteri: Barlow arriva da `stile/`, gli altri due se ci sono --- ⚠️ `--f-display` e `--f-mono` restano "se c'e'": Chakra Petch e JetBrains Mono non sono nell'artefatto, e i loro ripieghi sono dichiarati in coda. Chi un giorno li porta dentro segue la stessa strada di Barlow: file in questa cartella, licenza accanto, `@font-face` qui sopra. */ --f-display:"Chakra Petch","Rajdhani","Arial Narrow","Segoe UI",sans-serif; --f-body:"Barlow","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace; /* scala del testo: la vista campo la alza (vedi campo.css) */ --scala:1; } *{box-sizing:border-box} html,body{height:100%} body{ background:var(--bg); color:var(--fg); margin:0; font:calc(15px * var(--scala))/1.5 var(--f-body); -webkit-text-size-adjust:100%; } button,input,textarea,select{font:inherit;color:inherit} /* ⚠️ 600 e non il `bold` predefinito: dei pesi di Barlow nell'artefatto ci sono 400 e 600, e un `font-weight:700` farebbe scegliere al browser il 600 per sostituzione — che e' lo stesso esito, deciso da qualcun altro. Dichiararlo evita anche il grassetto SINTETICO (lettere ingrassate a calcolo) nel caso in cui un giorno si aggiunga un peso 700 per un altro carattere. */ strong{font-weight:600} :focus-visible{outline:2px solid var(--state);outline-offset:2px} a{color:var(--state)} [hidden]{display:none !important} /* `body.chiuso` non nasconde un pannello SOPRA i dati: tiene `.app` fuori dal documento visibile. Senza cookie il menu e l'area centrale sono vuoti perche' non sono stati costruiti, non perche' sono coperti. */ body.chiuso .app{display:none} /* ======================= ACCESSO E CAMBIO PASSWORD ======================= */ .accesso{ min-height:100%; display:grid; place-items:center; padding:24px 16px; background: radial-gradient(ellipse at 50% 30%, rgba(72,201,220,.07), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px), var(--bg); } .accesso-riquadro{ width:100%; max-width:420px; border:1px solid var(--line); background:var(--panel); padding:26px 22px 22px; } .marchio{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:700;letter-spacing:.12em} .marchio small{display:block;font:500 10px/1.4 var(--f-mono);letter-spacing:.14em;color:var(--muted);letter-spacing:.12em} /* ⭐ Il marchio e' quello vero: scudo araldico, blu istituzionale #003e7b e argento #d2d3d5. Il file e' servito dalla stessa origine — nessun CDN. */ .marchio .scudo{ width:34px;height:34px;flex:none;object-fit:contain; background:var(--blu);padding:2px;border:1px solid rgba(210,211,213,.35); } .marchio.grande .scudo{width:44px;height:44px} .marchio.grande{font-size:15px;margin-bottom:22px} .accesso-modulo{display:flex;flex-direction:column;gap:6px} .accesso-modulo label{font:500 10px var(--f-mono);letter-spacing:.14em;color:var(--muted);margin-top:10px} .accesso-modulo input{ background:var(--bg);border:1px solid var(--line-2);color:var(--fg); padding:12px;border-radius:3px;min-height:48px; } .accesso-modulo input:focus{outline:none;border-color:var(--state)} .accesso-modulo button{ margin-top:18px;min-height:52px;cursor:pointer;border-radius:3px; border:1px solid var(--state);background:transparent;color:var(--state); font:600 13px var(--f-display);letter-spacing:.18em; } .accesso-modulo button:hover:not(:disabled){background:var(--state);color:var(--bg)} .accesso-modulo button:disabled{opacity:.45;cursor:progress} .accesso-errore{ margin:14px 0 0;padding:10px 12px;border:1px solid var(--think); color:#ffb4b4;font-size:14px;background:rgba(255,52,52,.07); } .accesso-regola{margin:16px 0 0;font:12px/1.55 var(--f-body);color:var(--muted)} .accesso-nota{margin:0 0 4px;font:13px var(--f-body);color:var(--fg)} .accesso-origine{ margin:14px 0 0;padding:10px 12px;border:1px dashed var(--warn); color:var(--warn);font:12px/1.5 var(--f-mono); } /* ============================== IL GUSCIO ============================== */ .app{ height:100%; display:grid; grid-template-columns:224px minmax(0,1fr) 400px; grid-template-rows:56px minmax(0,1fr); } /* --- barra in alto --- */ .top{ grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:0 16px; border-bottom:1px solid var(--line);background:var(--panel);min-width:0; } .top .spazio{flex:1} .top .meta{font:12px var(--f-mono);color:var(--muted);display:flex;gap:16px;font-variant-numeric:tabular-nums;white-space:nowrap} .top .meta b{color:var(--fg);font-weight:500} .top .esci{ border:1px solid var(--line-2);background:none;color:var(--muted); padding:7px 12px;border-radius:3px;cursor:pointer; font:500 10px var(--f-mono);letter-spacing:.14em;min-height:34px; } .top .esci:hover{color:var(--fg);border-color:var(--muted)} /* Il badge di manutenzione sta in ogni schermata, in alto a destra. ⚠️ Dice solo cose vere: in caso di dubbio non accusa. */ .badge{ font:500 10px var(--f-mono);letter-spacing:.1em;padding:4px 8px; border:1px solid currentColor;border-radius:2px;white-space:nowrap; } .badge.ok{color:var(--muted)} .badge.attenzione{color:var(--warn)} /* --- menu di sinistra: si costruisce dai moduli di `GET /api/io` --- */ .nav{ border-right:1px solid var(--line);background:var(--panel); padding:14px 10px;display:flex;flex-direction:column;gap:2px;overflow:auto; } .nav .etichetta{font:500 10px var(--f-mono);letter-spacing:.16em;color:var(--dim);padding:10px 10px 6px} .nav .voce{ display:flex;align-items:center;justify-content:space-between;gap:8px; padding:10px;border:0;border-radius:3px;background:none;text-align:left; color:var(--muted);font-weight:500;cursor:pointer;width:100%;min-height:42px; } .nav .voce:hover{background:var(--panel-2);color:var(--fg)} .nav .voce[aria-current="true"]{background:var(--panel-2);color:var(--fg);box-shadow:inset 2px 0 0 var(--blu)} .nav .sotto{display:flex;flex-direction:column;gap:1px;padding:2px 0 6px 10px} .nav .sotto button{ border:0;background:none;color:var(--dim);text-align:left;cursor:pointer; padding:7px 10px;border-radius:3px;font-size:13.5px;min-height:34px; } .nav .sotto button:hover{color:var(--fg)} .nav .sotto button[aria-current="true"]{color:var(--state)} /* --- area centrale --- */ .main{overflow:auto;padding:18px;display:flex;flex-direction:column;gap:18px;min-width:0} /* Il nucleo ha due formati, e la scelta non e' estetica: dipende da cosa sta facendo la persona (pieno in centrale, ridotto sopra la chat, assente sul campo). E' UN SOLO canvas, agganciato all'uno o all'altro contenitore. */ .palco{ position:relative;flex:none; height:clamp(300px,42vh,520px); border:1px solid var(--line);overflow:hidden; background: radial-gradient(ellipse at center,rgba(255,255,255,.025),transparent 60%), repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),#05080a; } .palco canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .palco.ridotto{height:120px} .hud{position:absolute;font:500 11px var(--f-mono);letter-spacing:.14em;color:var(--state);transition:color .6s;pointer-events:none} .hud.tl{top:12px;left:14px;color:var(--muted)} .hud.tr{top:12px;right:14px;text-align:right} .hud.bl{bottom:12px;left:14px;color:var(--muted)} .palco.ridotto .hud.bl{display:none} .hud .cur{animation:lampeggia 1s steps(1) infinite} @keyframes lampeggia{50%{opacity:0}} /* --- schede in alto nell'area centrale (le stesse del menu: ridondanza voluta) --- */ .schede{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);padding-bottom:10px} .schede button{ border:1px solid var(--line-2);background:none;color:var(--muted); padding:7px 12px;border-radius:3px;cursor:pointer;min-height:38px; font:500 12px var(--f-display);letter-spacing:.1em;text-transform:uppercase; } .schede button:hover{color:var(--fg)} .schede button[aria-current="true"]{color:var(--fg);border-color:var(--blu);background:rgba(0,62,123,.35)} .titolo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0} .titolo h2{margin:0;font:600 18px var(--f-display);letter-spacing:.06em} .titolo .fonte{font:10px var(--f-mono);letter-spacing:.12em;color:var(--dim);border:1px solid var(--line-2);padding:3px 6px} .spiega{margin:0;font:12.5px/1.6 var(--f-body);color:var(--muted);max-width:76ch} .spiega.avviso{color:var(--warn);border-left:2px solid var(--warn);padding-left:10px} /* --- riquadri e tabelle --- */ .griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .riquadro{border:1px solid var(--line);background:var(--panel);padding:13px 15px;min-width:0} .riquadro h3{ margin:0 0 10px;font:600 11px var(--f-display);letter-spacing:.16em; text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between; align-items:baseline;gap:10px; } .riquadro h3 b{font:600 24px var(--f-display);color:var(--fg);letter-spacing:.02em;font-variant-numeric:tabular-nums} .riquadro .nota{margin:8px 0 0;font:11.5px/1.5 var(--f-body);color:var(--dim)} .righe{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .righe li{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center; padding:8px 0;border-top:1px solid var(--line);font-size:13.5px; } .righe li:first-child{border-top:0} .righe .t{font:12px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .righe .x{min-width:0;overflow-wrap:anywhere} .righe .x small{display:block;color:var(--muted);font-size:11.5px} .tabella-involucro{overflow-x:auto;border:1px solid var(--line);background:var(--panel)} table.tabella{border-collapse:collapse;width:100%;font-size:13px} table.tabella th,table.tabella td{ text-align:left;padding:8px 11px;border-bottom:1px solid var(--line);vertical-align:top; } table.tabella th{ font:500 10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase; color:var(--muted);white-space:nowrap;position:sticky;top:0;background:var(--panel-2); } table.tabella td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--f-mono)} table.tabella tr:last-child td{border-bottom:0} .pillola{ font:500 10px var(--f-mono);letter-spacing:.08em;padding:2px 6px; border:1px solid currentColor;border-radius:2px;white-space:nowrap;display:inline-block; } .p-alta{color:var(--think)} .p-media{color:var(--warn)} .p-bassa{color:var(--muted)} .p-ok{color:var(--talk)} .vuoto{margin:0;padding:18px 0;color:var(--dim);font:13px var(--f-body)} .errore{ margin:0;padding:11px 13px;border:1px solid var(--think);color:#ffb4b4; background:rgba(255,52,52,.07);font-size:13.5px;overflow-wrap:anywhere; } .caricamento{margin:0;padding:18px 0;color:var(--state);font:12px var(--f-mono);letter-spacing:.14em} /* --- bottoni d'azione --- */ .azioni{display:flex;flex-wrap:wrap;gap:8px} button.agisci{ border:1px solid var(--state);background:transparent;color:var(--state);cursor:pointer; padding:9px 15px;border-radius:3px;min-height:42px; font:600 12px var(--f-display);letter-spacing:.14em; } button.agisci:hover:not(:disabled){background:var(--state);color:var(--bg)} button.agisci.calmo{border-color:var(--line-2);color:var(--muted)} button.agisci.calmo:hover:not(:disabled){background:var(--panel-2);color:var(--fg)} button.agisci:disabled{opacity:.45;cursor:progress} form.campi{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end} form.campi label{display:flex;flex-direction:column;gap:4px;font:500 10px var(--f-mono);letter-spacing:.12em;color:var(--muted)} form.campi input,form.campi select,form.campi textarea{ background:var(--bg);border:1px solid var(--line-2);color:var(--fg); padding:9px 10px;border-radius:3px;min-height:40px;font-family:var(--f-body); } form.campi input:focus,form.campi select:focus,form.campi textarea:focus{outline:none;border-color:var(--state)} /* ============================== LA CHAT ============================== */ .chat{border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0} .chat-testa{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;min-width:0} .chat-testa .ttl{font:600 13px var(--f-display);letter-spacing:.1em} .chat-testa .st{font:11px var(--f-mono);color:var(--state);letter-spacing:.1em;transition:color .6s} .chat-testa .motore{margin-left:auto;font:10px var(--f-mono);letter-spacing:.08em;color:var(--muted);border:1px solid var(--line-2);padding:3px 6px;white-space:nowrap} /* Il contenitore del nucleo in formato RIDOTTO, sopra la chat. Porta anche `.palco.ridotto`: e' quello che gli da' altezza e `position:relative`, e senza cui il canvas non sta in assoluto. Vedi la nota in `app/assistente.js`. */ .chat .palco-chat{border:0;border-bottom:1px solid var(--line)} .diario{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:13px;min-height:0} .msg{max-width:94%;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere} .msg.io{align-self:flex-end;background:var(--panel-2);border:1px solid var(--line-2);padding:9px 12px;border-radius:10px 10px 2px 10px} .msg.lui{align-self:flex-start;padding-left:12px;border-left:2px solid var(--line-2)} .msg.lui.vivo{border-left-color:var(--state)} .msg.lui .chi{display:block;font:500 10px var(--f-mono);letter-spacing:.14em;color:var(--muted);margin-bottom:3px} .msg.lui.attesa .corpo{color:var(--state);font-family:var(--f-mono);font-size:12.5px} .msg .strumenti{display:block;margin-top:7px;font:10.5px/1.5 var(--f-mono);color:var(--dim);letter-spacing:.06em} .msg .avviso-chat{display:block;margin-top:7px;font:11px/1.5 var(--f-body);color:var(--warn)} .msg .conferma{display:block;margin-top:8px;padding:8px 10px;border:1px dashed var(--warn);color:var(--warn);font:11.5px/1.5 var(--f-body)} .msg.errore-chat{border-left-color:var(--think);color:#ffb4b4} .diario p{margin:0 0 .5em} .diario p:last-child{margin-bottom:0} .composizione{display:flex;gap:8px;padding:11px 16px calc(13px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)} .composizione textarea{ flex:1;resize:none;background:var(--bg);border:1px solid var(--line-2);color:var(--fg); font:14.5px/1.4 var(--f-body);padding:10px 12px;border-radius:3px;height:46px;min-width:0; } .composizione textarea:focus{outline:none;border-color:var(--state)} .composizione button{ flex:none;border:1px solid var(--state);background:transparent;color:var(--state); font:600 12px var(--f-display);letter-spacing:.14em;padding:0 15px;cursor:pointer; border-radius:3px;min-height:46px;min-width:70px; } .composizione button:hover:not(:disabled){background:var(--state);color:var(--bg)} .composizione button:disabled{opacity:.45;cursor:progress} .chat-nota{font:11px/1.5 var(--f-mono);color:var(--dim);padding:0 16px 10px} /* ======================= LA MODALITA' AUTOMATICA ======================= Il pannello sotto il nucleo: sta in `.area`, cioe' nella sezione aperta. Quando la modalita' non e' attiva questo pannello NON ESISTE — non e' nascosto: `guscio.js` svuota l'area a ogni cambio di scheda, e l'area appartiene a chi sta lavorando (vedi `app/sezioni/automatica.js`). ⚠️ Qui non si da' MAI altezza o `position` a un contenitore di canvas: il nucleo sta in `.palco`, sopra quest'area, e non si duplica. */ .automatica-corpo{display:flex;flex-direction:column;gap:14px} .domanda-fatta{margin:0;font-size:14.5px;line-height:1.55;color:var(--fg);overflow-wrap:anywhere} /* Ambra tratteggiata: e' il segno che nel prototipo marca una cosa che il sistema NON fa senza un si' umano. Lo stesso segno, lo stesso significato. */ .riquadro.in-attesa-di-si{border:1px dashed var(--warn)} .riquadro.in-attesa-di-si h3 b{color:var(--warn)} /* Un collegamento che e' un bottone: porta a un'altra SEZIONE, non a un indirizzo. Resta un `