/* stile-base — foglio di stile di RitMo Coach. Stava dentro coach.html. */ /* ===== sistema visivo: una regola sola per ogni cosa ===== */ :root{ /* scala tipografica: 7 gradini */ --t1:11px; --t2:13px; --t3:15px; --t4:17px; --t5:21px; --t6:28px; --t7:40px; /* raggi: 4 */ --r-s:10px; --r-m:14px; --r-l:20px; --r-full:999px; /* ombre: 3 livelli */ --e1:0 1px 2px rgba(20,20,22,.06); --e2:0 4px 14px rgba(20,20,22,.08); --e3:0 14px 38px rgba(20,20,22,.16); /* movimento: 2 tempi, una curva */ --fast:180ms cubic-bezier(.2,.8,.3,1); --slow:320ms cubic-bezier(.2,.8,.3,1); /* i tre ruoli del carattere: titoli e numeri, testo, dati incolonnati */ --f-display:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; --f-testo:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* IL TERZO LIVELLO DI SUPERFICIE. Prima ce n'erano due — fondo e scheda — e tutto stava sullo stesso piano: l'occhio non sapeva dove guardare. Questo e' il piano rialzato, per LA cosa in evidenza della schermata, una per schermata. Si ricava dal campo del tema, cosi' vale per tutti e settantaquattro i temi senza doverli riscrivere uno per uno. */ --rialzo:color-mix(in srgb, var(--campo) 90%, #FFFFFF); /* l'etichetta piccola in maiuscolo: un solo posto dove e' definita */ --lab-size:10.5px; --lab-track:.13em; } /* numeri incolonnati ovunque */ body { font-weight:450; font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1, "cv11" 1; } /* icone con lo stesso tratto */ svg { stroke-width: 1.75; } :root { --orange:var(--accento); --orange2:var(--accento-testo); --orange3:#FFB067; --ink:#111113; --gray:#6E6E73; --soft:#F5F5F7; --line:#E8E8EC; --ok:#2E9E5B; --warn:#C0392B; --amber:#B45309; /* rosso e ambra che si leggono sul fondo scuro: quelli sopra vengono dal tema chiaro e su questo sfondo fanno meno di 3:1 */ --pericolo:#E06C5A; --attenzione:#E0A64A; } /* Le due strisce che l'iPhone si tiene: la tacca in alto e la barretta in basso. Installata come app non c'è la barra del browser a fare da cuscinetto, quindi vanno rispettate a mano. Sono variabili e non env() dirette così il banco di collaudo può fingere un telefono con la tacca. */ :root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); } * { box-sizing:border-box; margin:0; } /* il rimbalzo a fine scorrimento mostra : dandogli il colore giusto non si vede piu il bianco ne sopra ne sotto */ html { background:#141416; overscroll-behavior-y:none; } body { overscroll-behavior-y:none; } body { font-family:var(--f-testo); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh; background: radial-gradient(700px 460px at 85% -5%, color-mix(in srgb, var(--accento) 7%, transparent), transparent 60%), linear-gradient(170deg,#232326 0%, #1A1A1D 55%, #141416 100%); background-attachment:fixed; } button { font:inherit; cursor:pointer; } input, select, textarea { font:inherit; } /* ===== LOGIN ===== */ .login { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:32px 26px; text-align:center; color:#fff; } .login .logo { width:120px; margin-bottom:22px; filter:drop-shadow(0 10px 34px color-mix(in srgb, var(--accento) 35%, transparent)); } .login h1 { font-size:28px; font-weight:900; } .login h1 span { color:var(--orange); } .login p { color:rgba(255,255,255,.6); font-size:13px; margin-top:8px; } .login form { display:flex; gap:8px; margin-top:24px; width:min(360px,90vw); } /* aspetto dei campi e del bottone: vedi il blocco "accesso-coach-suite" in fondo alla testa */ .login input { flex:1; border-radius:14px; color:#fff; outline:none; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); } .login button { border:0; font-weight:800; color:#1A1A1D; } .login .err { color:#FFB4A0; font-size:13px; min-height:18px; margin-top:8px; } .login .hint { font-size:11px; color:rgba(255,255,255,.4); margin-top:12px; } /* ===== SHELL ===== */ .app { display:none; } .app.on { display:flex; min-height:100vh; } .login.off { display:none; } .side { width:220px; flex:0 0 220px; position:sticky; top:0; height:100vh; padding:20px 12px; display:flex; flex-direction:column; gap:4px; color:#fff; } .side .brand { display:flex; align-items:center; gap:10px; padding:6px 10px 18px; font-weight:800; font-size:13px; } .side .brand img { width:30px; height:auto; } .side .brand span { display:block; font-size:11px; color:rgba(255,255,255,.5); font-weight:600; } .side nav button { display:flex; gap:11px; width:100%; text-align:left; padding:11px 13px; border-radius:14px; border:0; background:none; color:rgba(255,255,255,.7); font-size:13px; font-weight:600; } .side nav button.on { background:color-mix(in srgb, var(--accento) 14%, transparent); color:var(--orange2); } .side nav button:not(.on):hover { background:rgba(255,255,255,.07); } .main { flex:1; padding:16px 14px 100px; min-width:0; max-width:1080px; margin:0 auto; width:100%; } /* Il tasto dell'assistente galleggia in basso a destra e si sedeva sopra i tasti "Apri" dell'ultima riga. Sul computer il contenuto tiene la sua corsia libera; sul telefono ci pensa già lo spazio sopra la barra. */ @media (min-width:721px){ .main { padding-right:78px; } } /* pill-titolo + azioni (stile CA) */ .ph { display:flex; align-items:center; gap:8px; margin:6px 2px 18px; } .pill-t { display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:999px; color:#fff; font-weight:800; font-size:15px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } .hbtn { margin-left:auto; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.1); color:#fff; display:grid; place-content:center; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } .hbtn svg { width:23px; height:23px; } .pill-t svg { width:17px; height:17px; } .side nav button svg { width:17px; height:17px; flex:0 0 17px; } .setrow .si svg { width:19px; height:19px; } .page { display:none; } .page.on { display:block; } /* erano grigi e piccoli: in mezzo alle schede sparivano */ .sec-t { color:var(--inchiostro); font-size:19px; font-weight:800; letter-spacing:-.02em; margin:26px 4px 12px; display:flex; align-items:center; gap:10px; } /* 13 settembre: la barretta era verde. In Statistiche ce ne sono sette in fila, e l'accento addosso a ogni titolo non indica piu' niente: e' decorazione, che e' esattamente quello che la regola del 5% vieta. La barretta resta — da' il ritmo alla colonna — ma neutra. Il verde torna a voler dire qualcosa: dove sei, l'azione principale, lo stato. */ .sec-t::before { content:""; width:4px; height:20px; border-radius:999px; background:var(--filo-forte); } /* le righe che portano da un'altra parte: si vede che sono tasti */ .ritaglio{ position:relative; width:min(260px,70vw); aspect-ratio:1; margin:4px auto 14px; border-radius:18px; overflow:hidden; background:var(--campo); touch-action:none; cursor:grab; } .ritaglio:active{ cursor:grabbing; } .ritaglio canvas{ width:100%; height:100%; display:block; } /* l'ombra grande va FUORI dal cerchio, non dentro: quello che sta nel cerchio si deve vedere pulito, il resto si spegne */ .rit-maschera{ position:absolute; inset:0; pointer-events:none; border-radius:50%; box-shadow:0 0 0 999px color-mix(in srgb, var(--nero-pece) 62%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accento) 45%, transparent); } #ritZoom{ width:100%; margin:2px 0 12px; accent-color:var(--accento); } .rit-fondi{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; } .rit-fondi button{ border:1px solid var(--filo); background:var(--scheda); color:var(--gray); border-radius:999px; padding:8px 14px; font-family:inherit; font-size:13px; font-weight:700; } .rit-fondi button.on{ background:color-mix(in srgb, var(--accento) 18%, var(--scheda)); border-color:color-mix(in srgb, var(--accento) 45%, transparent); color:var(--accento-testo); } .riga-porta{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; margin-top:8px; padding:11px 13px; border-radius:14px; border:1px solid var(--filo); background:var(--campo); color:var(--ink); font-family:inherit; font-size:13px; font-weight:600; } .riga-porta span{ flex:1; min-width:0; } .riga-porta i{ font-style:normal; font-size:12px; font-weight:700; color:var(--accento-testo); white-space:nowrap; } @media(hover:hover){ .riga-porta:hover{ border-color:color-mix(in srgb, var(--accento) 45%, transparent); } } #registroManuale > summary::-webkit-details-marker, #temaPiega > summary::-webkit-details-marker { display:none; } #temaPiega[open] #temaApri { display:none; } /* ========================================================================== LA BARRA DEL TELEFONO: quattro sezioni + Altro Nove sezioni non stanno in una barra, e ognuno ne spegne di diverse dalle impostazioni. Quindi in basso ci vanno le quattro che si usano ogni giorno — fra quelle accese — e il resto sale in un foglio. La barra si ricostruisce da sola: se una sezione si spegne, non lascia un buco. ========================================================================== */ /* ========================================================================== L'ENTRATA DELLE SCHEDE Rubata (bene) da un sito fatto con cura: opacità più una spinta di pochi pixel dal basso, curva morbida, e un ritardo crescente sui primi elementi. Due scelte nostre: dura molto meno di un sito vetrina (0,42s invece di 0,75s) e si ferma al sesto elemento — qui si cambia sezione cinquanta volte al giorno, e un'entrata lunga diventa attesa. È un'animazione, non uno stato: se non parte, la pagina si vede lo stesso. ========================================================================== */ @keyframes saliDentro{ from{ opacity:0; transform:translate3d(0,14px,0) } to { opacity:1; transform:none } } @media (prefers-reduced-motion: no-preference){ .page.on > .card, .page.on > .sec-t, .page.on > .dash-col, .page.on > .og-testa, .page.on > .og-griglia, .page.on > .grid3, .page.on > .grid4, .page.on > .clfil, .page.on > .toolbar{ animation:saliDentro .42s cubic-bezier(.16,1,.3,1) both; } .page.on > *:nth-child(2){ animation-delay:.045s } .page.on > *:nth-child(3){ animation-delay:.09s } .page.on > *:nth-child(4){ animation-delay:.135s } .page.on > *:nth-child(5){ animation-delay:.18s } .page.on > *:nth-child(n+6){ animation-delay:.22s } } /* il valore a destra nelle righe delle impostazioni: grigio, prima della freccia */ .setrow .sv{ margin-left:auto; color:var(--grigio); font-size:13.5px; font-weight:600; max-width:44%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .setrow .st{ flex:1; min-width:0; } /* il pallino d'avviso: non e' il valore della riga, e' un «guarda qui». Quando non c'e' niente da guardare non c'e' proprio. */ .setrow .pall{ margin-left:auto; color:var(--attesa,#E0A64A); font-size:15px; line-height:1; } .setrow .pall[hidden]{ display:none; } #sezElenco .setrow .swi{ margin-left:auto; } .velo-altro{ position:fixed; inset:0; z-index:60; background:rgba(5,7,6,.55); opacity:0; transition:opacity .26s ease; } .foglio-altro{ position:fixed; left:0; right:0; bottom:0; z-index:61; background:var(--fondo); border-top:1px solid var(--filo); border-radius:22px 22px 0 0; padding:8px 10px calc(16px + var(--sab)); transform:translateY(103%); transition:transform .32s cubic-bezier(.25,1,.35,1); max-height:80dvh; overflow:auto; box-shadow:0 -18px 50px rgba(0,0,0,.5); } body.altro-aperto .velo-altro{ opacity:1; } body.altro-aperto .foglio-altro{ transform:translateY(0); } .foglio-altro .manico{ width:38px; height:4px; border-radius:99px; background:color-mix(in srgb, var(--inchiostro) 25%, transparent); margin:4px auto 10px; } /* IL FOGLIO «ALTRO». Via le tre intestazioni in maiuscolo: erano più rumore che aiuto in un elenco di sei voci. I gruppi restano, ma si vedono da una riga sottile — e i segni sono verdi, come nella spalla del computer. */ .voce-altro{ display:flex; align-items:center; gap:13px; width:100%; border:0; background:none; color:var(--inchiostro); padding:14px 12px; border-radius:14px; font-family:inherit; font-size:15px; font-weight:600; text-align:left; cursor:pointer; position:relative; } .voce-altro svg{ width:20px; height:20px; flex:0 0 20px; color:var(--accento); opacity:1; } .voce-altro:active{ background:color-mix(in srgb, var(--inchiostro) 8%, transparent); } .voce-altro .badge{ margin-left:auto; } .voce-altro .qn{ margin-left:auto; font-size:12.5px; font-weight:600; color:var(--grigio-tenue); } /* una riga discreta fra OGNI voce, non solo fra i gruppi: l'elenco si legge come un elenco, e nessuna voce sembra più importante di un'altra */ .voce-altro.sep{ margin-top:9px; } .voce-altro.sep::before{ content:""; position:absolute; left:12px; right:12px; top:-5px; height:1px; background:color-mix(in srgb, var(--filo) 70%, transparent); } @media (min-width:901px){ .velo-altro, .foglio-altro{ display:none; } } /* sullo schermo largo la giornata sta in due colonne: sessioni e soldi davanti agli occhi insieme, senza chilometri di scorrimento */ /* ---------- LA GIORNATA ---------- */ .og-testa{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:2px 2px 14px; } /* IL TITOLO DELLA GIORNATA nel carattere da titoli, largo. E' l'unica cosa grossa della schermata: da qui in giu' si scende di peso, non si sale. */ .og-h1{ font-family:var(--f-display); font-variation-settings:"wdth" 115; font-size:32px; font-weight:700; letter-spacing:-.015em; line-height:1.05; } /* la data e' un dato, non una frase: va nel carattere dei dati */ .og-data{ font-family:var(--f-mono); font-size:12px; color:var(--gray); text-align:right; letter-spacing:.01em; } /* LA SETTIMANA SENZA IL RIQUADRO ATTORNO (6 settembre 2026). Chiesto da Jacopo: via la scheda che conteneva il mese, e la striscia dei giorni grossa quanto tutto il rettangolo. Adesso sono due pezzi larghi uguali e attaccati: una testata col mese e la freccetta, e sotto i sette giorni. Un oggetto solo, come una tabella con la sua intestazione. */ /* IL RETTANGOLO ESTERNO VIA (9 settembre 2026). Jacopo, guardando Oggi: «sono due rettangoli uno dentro l'altro, non ha senso». Era la trappola di sempre: qui .og-sett spegneva fondo e bordo, ma .card li riaccende piu' in basso (riga ~2195) e a parita' di specificita' vince chi viene dopo. Restava acceso anche il padding di .card, che stringeva la striscia di 20 px per lato. Adesso il reset ha due classi e vince davvero: il blocco testata + giorni e' l'unico rettangolo, e i giorni arrivano al bordo. */ .card.og-sett{ padding:0; background:none; border:0; box-shadow:none; border-radius:0; } .og-q.og-sett{ min-height:0; } /* Senza la scatola esterna, il sollevamento al passaggio del mouse muoverebbe la striscia e disegnerebbe un'ombra sotto un rettangolo che non c'e' piu': il tocco si sente sul blocco vero, tingendo il suo bordo. */ .card.og-sett[data-vai]:hover{ border-color:transparent; transform:none; box-shadow:none; } @media(hover:hover){ .card.og-sett[data-vai]:hover .og-t, .card.og-sett[data-vai]:hover .og-giorni{ border-color:color-mix(in srgb, var(--accento) 42%, transparent); } } .og-testa.soloData{ justify-content:flex-start; } .og-sett .og-t{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; padding:11px 14px; background:var(--scheda); border:1px solid var(--filo); border-radius:var(--r-s) var(--r-s) 0 0; border-bottom:0; } .og-sett .og-giorni{ border-radius:0 0 var(--r-s) var(--r-s); border-top:0; } /* piu' larghi (niente piu' padding esterno) e un filo piu' alti, se no sette celle a tutta pagina diventano strisce basse e larghe */ .og-sett .og-g{ padding:20px 0 19px; gap:7px; } .og-sett .og-g .nn{ font-size:24px; } /* NELLA STRISCIA DELLA SETTIMANA LA RIGHINA NON SERVE (5 settembre 2026). Negli altri riquadri il filo sotto il titolo separa l'insegna dal contenuto, che è testo libero. Qui sotto c'è già un blocco con il suo bordo e le sue celle: il filo diventa una seconda riga a un pixel di distanza da un'altra riga. Jacopo, guardando l'anteprima: «la riga non è necessaria in questo caso, ci sono già i quadrati con le celle». */ /* (la vecchia regola che toglieva il filo sotto il titolo della settimana e' stata sostituita dalla testata qui sopra) */ .og-t .og-t-dx{ display:flex; align-items:center; gap:12px; } .og-mese{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--gray); margin-bottom:14px; } .og-oggi{ margin-left:auto; border:0; background:none; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--accento-testo); padding:0; cursor:pointer; } /* LA SETTIMANA COME UN BLOCCO SOLO (5 settembre 2026). Prima erano sette mattonelle staccate, ognuna col suo angolo tondo: sette oggetti per una cosa sola, che e' una settimana. Adesso e' un rettangolo unico diviso da righine di un pixel — come una tabella, che e' quello che e'. Le righine sono il fondo che passa attraverso il vuoto fra le celle. */ .og-giorni{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:1px; background:var(--filo); border:1px solid var(--filo); border-radius:var(--r-s); overflow:hidden; } .og-g{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 0 9px; border-radius:0; border:0; background:var(--scheda); cursor:pointer; font-family:inherit; color:inherit; transition:background var(--fast) ease; } .og-g:hover{ background:var(--campo); } .og-g .sg{ font-family:var(--f-mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--grigio-tenue); } .og-g .nn{ font-family:var(--f-display); font-variation-settings:"wdth" 112; font-size:21px; font-weight:600; line-height:1; } .og-g .pt{ display:flex; align-items:center; justify-content:center; gap:5px; height:6px; } .og-g .pt i{ display:block; width:5px; height:5px; border-radius:999px; background:var(--accento); } .og-g .pt i.rr{ width:12px; height:2px; border-radius:2px; background:var(--attenzione); } /* oggi si segna da dentro: col blocco unico non c'è più un bordo da tingere */ .og-g.oggi{ box-shadow:inset 0 0 0 1px var(--filo-forte); } /* IL GIORNO SCELTO, senza la mattonella di neon (5 settembre 2026). Prima il giorno aperto era un rettangolo verde acceso pieno: un quinto della striscia era accento, e l'accento che riempie aree grandi e' la cosa che fa sembrare l'interfaccia generata. Adesso il giorno scelto si alza su una superficie piu' chiara — la stessa gerarchia del resto — e il neon resta solo sul NUMERO. Si vede uguale, e non grida. */ .og-g.on{ background:var(--rialzo); } .og-g.on .nn{ color:var(--accento); } .og-g.on .sg{ color:var(--grigio); } .og-g:focus-visible{ outline:2px solid var(--accento); outline-offset:2px; } /* align-items:start: i riquadri sono alti quanto il loro contenuto. Se si stirano, quello vuoto diventa un pozzo di nero alto mezzo schermo. */ .og-griglia{ display:grid; grid-template-columns:1fr; gap:12px; align-items:start; } /* TELEFONO: PRIMA QUELLO CHE CHIEDE UNA MOSSA. Le colonne si sciolgono e l'ordine lo decide qui. Fino al 13 settembre 2026 era: oggi, come sta andando, le rate, chi tenere d'occhio — cioe' il riepilogo dei soldi, grande e alto mezzo schermo, davanti alle rate scadute. Aprendo il gestionale al mattino si vedeva un totale, e per sapere cosa fare bisognava scorrere. Adesso in cima c'e' quello su cui si agisce — la giornata, i pagamenti da seguire, i rinnovi e chi si e' fermato — e l'andamento sta sotto: si guarda quando lo si cerca, non mentre si cerca altro. */ .og-col{ display:contents; } #ogSess{ order:1 } #ogRate{ order:2 } #ogOcchio{ order:3 } #ogAnda{ order:4 } .og-q{ display:flex; flex-direction:column; margin-bottom:0; min-width:0; min-height:212px; } /* TUTTO IL RIQUADRO E' IL TASTO. E si deve vedere che lo e': il dito che passa lo alza appena e gli accende il filo del bordo. Un rettangolo che si apre ma non reagisce non lo prova nessuno. */ .og-q[data-vai]{ cursor:pointer; transition:border-color var(--fast) ease, transform var(--fast) ease, box-shadow var(--fast) ease; } @media(hover:hover){ .og-q[data-vai]:hover{ border-color:color-mix(in srgb, var(--accento) 42%, transparent); transform:translateY(-2px); box-shadow:0 10px 30px -14px color-mix(in srgb, var(--accento) 45%, transparent); } .og-q[data-vai]:hover .og-vai{ color:var(--accento); transform:translateX(3px); } } .og-q[data-vai]:active{ transform:translateY(0) scale(.995); } /* LO STESSO BAGLIORE IN TUTTE LE SEZIONI. Jacopo, 27 agosto: «di tutte le sezioni, come in Oggi: quando ci passo sopra si illumina con il led intorno». Prima ogni sezione rispondeva a modo suo allo stesso gesto — Clienti non rispondeva affatto, Messaggi cambiava il fondo, il compilatore scuriva il bordo: tre risposte diverse insegnano che il gesto non conta. Adesso e' una sola, ed e' quella di Oggi: l'anello del marchio attorno alla piastrella, due pixel di sollevamento e l'alone sotto. Il cerchio si accende solo dove c'e' un mouse vero; sul telefono resta la pressione, che e' l'unica cosa che il dito sa fare. */ .clist .cl, .conv, .bach-riga{ transition:border-color var(--fast) ease, transform var(--fast) ease, box-shadow var(--fast) ease, background var(--fast) ease; } @media(hover:hover){ .clist .cl:hover{ box-shadow:inset 4px 0 0 var(--filo-stato, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accento) 42%, transparent), 0 10px 30px -14px color-mix(in srgb, var(--accento) 45%, transparent); transform:translateY(-2px); } .conv:hover{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accento) 42%, transparent), 0 10px 30px -14px color-mix(in srgb, var(--accento) 45%, transparent); transform:translateY(-2px); } .bach-riga:hover{ border-color:color-mix(in srgb, var(--accento) 42%, transparent); box-shadow:0 10px 30px -14px color-mix(in srgb, var(--accento) 45%, transparent); transform:translateY(-2px); } } /* E SUL TELEFONO, ALLA PRESSIONE. Jacopo: «anche da telefono quando ci clicchi sopra si illuminano uguali». Il dito non ha il passaggio del mouse: ha la pressione, ed e' li' che deve arrivare la stessa risposta — stesso anello, stesso alone, solo senza il sollevamento (che sotto il dito non si vedrebbe: si vede l'affondo). */ /* E POI DAPPERTUTTO. Jacopo, 27 agosto: «vorrei che al passaggio del mouse tutte le sezioni si alzassero con il led. Tutte». Quindi non solo le righe cliccabili: qualunque riquadro dell'app reagisce allo stesso modo — si alza di due pixel e prende l'anello del marchio. Una risposta sola, ovunque, cosi' il gesto vuol dire sempre la stessa cosa. L'unico che NON si alza e' il riquadro «Scrivila da zero, a voce»: quello il led ce l'ha sempre acceso — e' li' che si lavora — e al passaggio del mouse aggiunge solo il bagliore, restando fermo dov'e'. */ .card, .day-list, .prop, .bguida, .piega, .gruppo-set, .bdet{ transition:border-color var(--fast) ease, transform var(--fast) ease, box-shadow var(--fast) ease; } @media(hover:hover){ .card:hover, .day-list:hover, .bguida:hover, .piega:hover, .gruppo-set:hover{ border-color:color-mix(in srgb, var(--accento) 42%, transparent); transform:translateY(-2px); box-shadow:0 10px 30px -14px color-mix(in srgb, var(--accento) 45%, transparent); } /* il riquadro con la faccia: fermo, solo il bagliore */ .bdet:hover{ transform:none; box-shadow:0 10px 34px -12px color-mix(in srgb, var(--accento) 52%, transparent); } } .og-q[data-vai]:active, .clist .cl:active, .conv:active, .bach-riga:active{ transform:translateY(0) scale(.995); border-color:color-mix(in srgb, var(--accento) 42%, transparent); } .clist .cl:active{ box-shadow:inset 4px 0 0 var(--filo-stato, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accento) 52%, transparent), 0 6px 22px -12px color-mix(in srgb, var(--accento) 50%, transparent); } .conv:active, .og-q[data-vai]:active, .bach-riga:active{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accento) 52%, transparent), 0 6px 22px -12px color-mix(in srgb, var(--accento) 50%, transparent); } .og-q[data-vai]:focus-visible{ outline:2px solid var(--accento); outline-offset:3px; } /* LA LINEETTA, come nelle impostazioni di Apple. Prima il filetto stava in fondo, sopra il tasto «Apri…»; tolto quello, il titolo restava appeso al contenuto. Rimesso dove serve: SOTTO il titolo, a separare l'insegna dal suo contenuto. E' la riga che dice «da qui in giu' e' roba di questo riquadro». */ .og-t{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; margin-bottom:13px; padding-bottom:11px; border-bottom:1px solid var(--line); } /* L'INSEGNA DEL RIQUADRO, non piu' in verde (5 settembre 2026). Prima ogni titolo di riquadro era verde: con quattro riquadri in pagina l'accento compariva quattro volte solo per dire «qui comincia una cosa», che e' un lavoro che l'etichetta fa meglio da sola. Adesso e' un'etichetta piccola in maiuscolo nel carattere dei dati: si legge come l'intestazione di una colonna, e il verde resta libero per dire qualcosa. */ .og-t .og-tit{ font-family:var(--f-mono); font-size:var(--lab-size); letter-spacing:var(--lab-track); text-transform:uppercase; color:var(--grigio); font-weight:500; } .og-t .og-vai{ color:var(--grigio-tenue); font-size:16px; line-height:1; transition:color var(--fast) ease, transform var(--fast) ease; } /* LE RIGHE SEPARATE DA UNA RIGHINA (5 settembre 2026). Prima le righe erano staccate da tredici pixel di vuoto: quattro blocchi che galleggiano. Adesso sono un elenco vero, diviso da un filo di un pixel — come le impostazioni di un telefono. Si legge come una tabella, ci sta più roba nella stessa altezza, e non serve nessun colore per dire dove finisce una riga e comincia l'altra. */ .og-corpo{ display:flex; flex-direction:column; gap:0; flex:1; min-width:0; } .og-corpo > .og-riga{ padding:11px 2px; } .og-corpo > .og-riga:first-child{ padding-top:2px; } .og-corpo > .og-riga:last-child{ padding-bottom:2px; } .og-corpo > .og-riga + .og-riga{ border-top:1px solid var(--filo); } /* la codina sotto l'elenco («…e altre 7 scadute») è un'altra cosa: sta sotto il suo filo, staccata */ .og-corpo > .og-riga + div{ margin-top:11px; padding-top:11px; border-top:1px solid var(--filo); } .og-corpo > .og-riga + div + div{ margin-top:5px; padding-top:0; border-top:0; } .og-piede{ margin-top:16px; padding-top:13px; border-top:1px solid var(--line); } .og-piede button{ border:0; background:none; padding:0; font-family:inherit; font-size:13px; color:var(--gray); cursor:pointer; transition:color var(--fast) ease; } .og-piede button:hover{ color:var(--accento-testo); } /* il numero che e' un lavoro da fare, non una misura: colore d'attesa */ .og-numeri .og-dafare b{ color:var(--attesa); } /* il riquadro senza niente dentro non deve occupare come uno pieno */ .og-q.og-corto{ min-height:0; } .og-q.og-corto .og-corpo{ flex:0 0 auto; } .og-q.og-corto .og-vuoto{ flex:0 0 auto; padding:6px 4px 2px; } .og-vuoto{ flex:1; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--gray); font-size:14px; padding:14px 4px; line-height:1.45; } .og-riga{ display:flex; align-items:center; gap:12px; min-width:0; text-align:left; border:0; background:none; padding:0; font-family:inherit; color:inherit; width:100%; cursor:pointer; } .og-bollo{ flex:0 0 36px; width:36px; height:36px; border-radius:9px; display:grid; place-items:center; font-family:var(--f-mono); font-size:11.5px; font-weight:500; letter-spacing:.04em; background:var(--campo); border:1px solid var(--filo); color:var(--grigio); } .og-chi{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; } .og-chi b{ font-size:15px; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .og-chi i{ font-style:normal; font-size:13px; color:var(--gray); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* l'ora e' un dato che si incolonna con quello della riga sotto */ .og-ora{ flex:0 0 auto; font-family:var(--f-mono); font-size:13.5px; color:var(--gray); } /* LE QUATTRO COLONNE DELLA RATA. In fila libera i bolli finivano ognuno a una distanza diversa dal bordo, secondo quanto era lungo il nome: cinque righe, cinque posizioni. Incolonnati si leggono tutti insieme. */ .og-rr{ display:grid; grid-template-columns:1fr auto 58px 92px; align-items:center; gap:10px; min-width:0; } .og-rr .nm{ min-width:0; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .og-rr .qd{ font-family:var(--f-mono); font-size:12px; color:var(--gray); text-align:right; } /* «non segnato» è più lungo di un importo: va tenuto su una riga sola, se no la riga cresce in altezza e l'elenco perde il passo */ .og-rr .im{ font-family:var(--f-mono); font-size:13px; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* IL BOLLO RETTANGOLARE (5 settembre 2026). Prima era una pastiglia tonda con il fondo tinto del suo colore: tre pastiglie rosse piene in colonna erano tre macchie, e il nome della persona — che è la cosa che devi leggere — veniva dopo. Adesso è un rettangolo di contorno, nel carattere dei dati: dice lo stato senza rubare la scena, e in colonna i bolli si incolonnano. */ .og-pill{ flex:0 0 auto; font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:3px; border:1px solid; background:none; white-space:nowrap; } .og-anello{ display:flex; align-items:center; gap:20px; } .og-anello .cer{ position:relative; width:104px; height:104px; flex:0 0 104px; } .og-anello .cer svg{ width:104px; height:104px; transform:rotate(-90deg); display:block; } .og-anello .cen{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; } .og-anello .cen b{ font-family:var(--f-display); font-variation-settings:"wdth" 112; font-size:21px; font-weight:700; } .og-anello .cen i{ font-style:normal; font-size:11px; color:var(--gray); } .og-anello .dx{ display:flex; flex-direction:column; gap:3px; min-width:0; } .og-anello .dx b{ font-size:17px; font-weight:550; } .og-anello .dx i{ font-style:normal; font-size:13px; color:var(--gray); } .og-numeri{ display:flex; gap:30px; margin:18px 0 4px; } .og-numeri div{ display:flex; flex-direction:column; gap:2px; } .og-numeri b{ font-family:var(--f-display); font-variation-settings:"wdth" 112; font-size:28px; font-weight:700; letter-spacing:-.015em; line-height:1.05; } .og-numeri i{ font-style:normal; font-size:13px; color:var(--gray); } .og-onda{ margin-top:14px; } .og-onda-nota{ font-size:12px; color:var(--gray); margin-top:6px; } .og-onda svg{ width:100%; height:74px; display:block; } .og-onda .mesi{ display:flex; justify-content:space-between; font-size:11px; color:var(--gray); margin-top:6px; } @media (min-width:1180px){ /* DUE COLONNE CHE SI IMPACCHETTANO DA SOLE. Con la griglia normale le due colonne condividono le righe: se il riquadro di sinistra e' corto (un giorno senza sessioni) quello sotto resta inchiodato all'altezza del piu' alto della riga, e si apre un buco. Jacopo: «rate dieci scadute, tiriamolo su… alla stessa distanza di come sta andando e da tenere d'occhio». Qui le colonne sono indipendenti: ognuna impila i suoi riquadri uno sotto l'altro con lo stesso spazio, sempre. Quando «sessioni di oggi» si riempie, «rate» scende da solo mantenendo la distanza. */ .og-griglia{ display:flex; align-items:flex-start; gap:18px; } .og-col{ display:flex; flex-direction:column; gap:18px; flex:1 1 0; min-width:0; } /* sul computer comanda l'ordine dell'HTML, non quello del telefono */ #ogSess, #ogRate, #ogAnda, #ogOcchio{ order:0 } } @media (max-width:560px){ /* dal telefono la riga della rata si spezza: il nome sopra da solo, i numeri sotto. Prima «Irene Grassi» diventava «Irene Gra…» per far posto a «non segnato». */ /* con la griglia a quattro colonne: il nome prende tutta la prima riga, sotto vanno bollo, data e importo */ .og-rr{ grid-template-columns:auto 1fr auto; row-gap:4px; } .og-rr .nm{ grid-column:1 / -1; } .og-rr .qd{ text-align:left; } /* e il perché di una riga può andare a capo invece di essere tagliato */ .og-chi i{ white-space:normal; overflow:visible; } .og-h1{ font-size:24px; } .og-sett{ padding:0; } .og-giorni{ gap:1px; } .og-g{ padding:8px 0 7px; } .og-g .nn{ font-size:18px; } /* sul telefono i giorni restano grossi: e' la cosa che si guarda per prima */ .og-sett .og-t{ padding:10px 12px; } .og-sett .og-g{ padding:14px 0 13px; } .og-sett .og-g .nn{ font-size:21px; } .og-numeri{ gap:22px; } .og-numeri b{ font-size:24px; } } #registroManuale > summary .freccia { color:var(--gray); font-weight:800; } #registroManuale[open] > summary .freccia { transform:rotate(90deg); } /* card bianche "isole di luce" */ .card { background:var(--scheda); border-radius:20px; padding:18px 20px; margin-bottom:12px; box-shadow:0 12px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); border:1px solid var(--line);} /* L'INSEGNA DEI RIQUADRI, in tutta l'applicazione (5 settembre 2026). Stessa idea dei riquadri di «Oggi»: un'etichetta piccola in maiuscolo nel carattere dei dati invece di un titolo in grassetto. Un riquadro non ha bisogno di un titolo grosso per farsi riconoscere — ha già il suo bordo. */ .card h3 { font-family:var(--f-mono); font-size:var(--lab-size); font-weight:500; letter-spacing:var(--lab-track); text-transform:uppercase; color:var(--grigio); margin-bottom:12px; display:flex; align-items:center; gap:8px; } .card h3 .badge { margin-left:auto; } /* hero sessione (Oggi) */ .hero-card { position:relative; overflow:hidden; border-left:4px solid var(--orange); } /* 6 settembre 2026: era una pastiglia tonda tinta d'accento. I bolli sono rettangoli di contorno, in mono. */ .hero-card .kick { display:inline-block; padding:3px 8px; border-radius:4px; background:transparent; border:1px solid color-mix(in srgb, var(--accento) 45%, transparent); color:var(--accento-testo); font-family:var(--f-mono); font-size:var(--lab-size); font-weight:500; text-transform:uppercase; letter-spacing:var(--lab-track); margin-bottom:10px; } .hero-card .pb { height:6px; border-radius:999px; background:var(--soft); margin:10px 0 8px; overflow:hidden; } .hero-card .pb i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--orange),var(--orange2)); } .hero-card .who { font-size:21px; font-weight:900; letter-spacing:-.01em; } .hero-card .meta { color:var(--gray); font-size:13px; margin-top:2px; } .chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; } .chip-ok { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; background:color-mix(in srgb, var(--ok) 16%, var(--scheda)); color:var(--ok); font-size:11px; font-weight:700; } .chip-n { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; background:var(--soft); color:var(--gray); font-size:11px; font-weight:700; } .chip-warn { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; background:color-mix(in srgb, var(--attenzione, #E0A64A) 16%, var(--scheda)); color:var(--attenzione, #E0A64A); font-size:11px; font-weight:700; } .todo { display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--soft); } .todo:first-of-type { border-top:0; } .todo .ic { flex:0 0 34px; height:34px; border-radius:10px; display:grid; place-content:center; font-size:15px; background:color-mix(in srgb, var(--accento) 15%, var(--scheda)); } .todo b { display:block; font-size:13px; } /* IL GRASSETTO DENTRO IL TESTO DELL'AVVISO. «.todo b» e' il TITOLO dell'avviso, ed e' un blocco. Chiunque scrivesse un dentro al corpo — per dire «premi avvia» — se lo trovava buttato su una riga tutta sua e piu' grande del testo intorno, e la frase si spezzava in tronconi. Succedeva gia' nell'avviso del foglio cambiato, dove i nomi delle colonne andavano a capo uno per uno. Con «inl» il grassetto resta dentro la riga, com'e' ovvio che sia. */ .todo b.inl { display:inline; font-size:inherit; } .todo span { font-size:11px; color:var(--gray); } .todo button { margin-left:auto; align-self:center; border:1px solid var(--line); background:var(--soft); border-radius:999px; padding:7px 13px; font-size:11px; font-weight:700; white-space:nowrap; } /* LE PASTIGLIE DIVENTANO RETTANGOLI DI CONTORNO (5 settembre 2026). Erano tonde e col fondo tinto: in un elenco di venti clienti facevano venti macchie colorate, e il nome della persona veniva dopo il suo stato. Adesso sono rettangoli di contorno nel carattere dei dati — dicono la stessa cosa, si incolonnano, e lasciano leggere prima il nome. I tre colori del semaforo non cambiano: sono quelli decisi il 27 agosto. */ .badge { display:inline-block; padding:3px 8px; border-radius:3px; font-family:var(--f-mono); font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; border:1px solid currentColor; background:none; white-space:nowrap; } .badge.ok { color:var(--st-attivo); border-color:color-mix(in srgb, var(--st-attivo) 45%, transparent); } .badge.warn { color:var(--st-scaduto); border-color:color-mix(in srgb, var(--st-scaduto) 45%, transparent); } .badge.amber { color:var(--st-attesa); border-color:color-mix(in srgb, var(--st-attesa) 45%, transparent); } /* NEL TEMA CHIARO LE PASTIGLIE DIVENTANO PIENE. Jacopo, 27 agosto: «il verde di attivo sparisce e scaduto cambia colore in rosa, il giallo è l'unico che rimane». Vero, e la causa e' aritmetica: la pastiglia e' il colore mescolato al 15% col fondo della scheda. Su fondo scuro il 15% di verde e' verde scuro e si vede; su fondo BIANCO il 15% di verde e' quasi bianco, e il rosso al 16% diventa rosa confetto. L'ambra reggeva solo perche' e' molto piu' scura delle altre due. Questi tre colori non sono decorazione: dicono attivo, scaduto e rinnovo, e devono dirlo alla stessa distanza in tutti e due i temi. Quindi sul chiaro la pastiglia si riempie e il testo diventa bianco — colori pieni, contrasto sopra 5:1, nessun rosa. */ /* sul tema chiaro restano piene: il contorno sottile su fondo bianco non regge la distanza, e questi tre colori devono dire la stessa cosa in tutti e due i temi (vedi sopra). Il rettangolo resta. */ html.tema-chiaro .badge.ok { background:var(--st-attivo-piena); color:#FFFFFF; border-color:transparent; } html.tema-chiaro .badge.warn { background:var(--st-scaduto-piena); color:#FFFFFF; border-color:transparent; } html.tema-chiaro .badge.amber { background:var(--st-attesa-piena); color:#FFFFFF; border-color:transparent; } html.tema-chiaro .badge.orange{ background:var(--accento-testo); color:#FFFFFF; border-color:transparent; } .badge.gray { color:var(--gray); border-color:var(--filo); } .badge.orange { color:var(--accento-testo); border-color:color-mix(in srgb, var(--accento) 40%, transparent); } .btn { border:0; border-radius:14px; padding:12px 18px; font-weight:800; font-size:13px; } /* tinta piena e non sfumata, e il testo sopra lo decide il tema: il colore scritto a mano si rompeva sui temi chiari */ .btn.primary { background:var(--accento); color:var(--su-accento); box-shadow:0 8px 22px color-mix(in srgb, var(--nero-pece) 45%, transparent); } .btn.ghost { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; } .btn.soft { background:var(--soft); color:var(--ink); } .btn.sm { padding:8px 12px; font-size:11px; border-radius:10px; } .toolbar { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; } .toolbar input { flex:1; min-width:180px; padding:12px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.15); background:var(--scheda); outline:none; } /* il filo dello stato non e' piu' scritto a mano nello style della riga ma passa da una variabile: cosi' l'ombra resta una regola CSS e il passaggio del mouse puo' aggiungerci la sua senza essere schiacciato dallo style inline, che vince sempre. */ /* L'ELENCO CLIENTI RESTA A SCHEDE STACCATE. Il 5 settembre le avevo unite in una lista sola divisa da righine, come nei riquadri di «Oggi». Jacopo l'ha guardata e ha detto di rimetterla com'era: «non mi dispiaceva con quella sorta di liscio prima del rettangolo con il cliente». Ha ragione, e c'è un motivo vero sotto — qui il filo di stato colorato a sinistra è l'informazione principale della riga, e su una scheda staccata si legge come una linguetta; dentro una lista unita diventa uno dei tanti fili orizzontali. Quindi: schede staccate qui, righine dentro i riquadri. */ .clist .cl { display:flex; align-items:center; gap:14px; background:var(--scheda); border-radius:20px; padding:14px 18px; margin-bottom:9px; cursor:pointer; box-shadow:inset 4px 0 0 var(--filo-stato, transparent), var(--e3); } /* IL TONDO NON PORTA PIU' LO STATO. Jacopo, 27 agosto, guardando l'elenco: «se lui li avesse tutti attivi son tutti verdi, c'e' troppo verde». Aveva ragione, ed era un errore di informazione prima che di gusto: lo stato era scritto TRE volte sulla stessa riga — il filo laterale, la pastiglia a destra e il tondo — e la terza copia, essendo la piu' grande e la piu' a sinistra, riempiva la pagina di verde senza aggiungere niente. Adesso lo stato sta solo dove serve: il filo di neon a lato (verde, ambra, rosso) e la pastiglia. Il tondo torna a fare il suo mestiere, cioe' distinguere una persona dall'altra, con le stesse tinte tenui e diverse del riquadro «Da tenere d'occhio» in Oggi (tintaDa: colore scelto dal nome, 20% su fondo scheda). Il colore arriva inline dal JS. */ /* 6 settembre 2026: stesso riquadro neutro di Messaggi. Il colore inline non arriva piu' dal JS (vedi renderClients). */ .cl .av { flex:0 0 40px; width:40px; height:40px; border-radius:10px; display:grid; place-content:center; font-family:var(--f-mono); font-weight:500; font-size:12px; letter-spacing:.04em; background:var(--campo); border:1px solid var(--filo); color:var(--grigio); overflow:hidden; } .cl .nm b { display:block; font-size:15px; } .cl .nm span { font-size:11px; color:var(--gray); } .cl .right { margin-left:auto; text-align:right; display:flex; align-items:center; gap:12px; } /* il codice è un dato, non un segnale: grigio e nel carattere dei dati */ .cl .code { font-family:var(--f-mono); font-size:11px; font-weight:500; color:var(--grigio-tenue); letter-spacing:.06em; } /* 8 settembre 2026, giro delle schermate sul telefono: col codice, il bollo «RINNOVO 37 GG» e il nome sulla stessa riga, «Tommaso Vitali» andava a capo. Sul telefono il codice si toglie dalla lista — sta nella scheda del cliente, dove serve — e il nome torna su una riga. */ @media(max-width:480px){ .cl .code { display:none; } } .back { background:none; border:0; color:rgba(255,255,255,.65); font-size:13px; font-weight:700; padding:0; margin-bottom:14px; } .chead { display:flex; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap; color:#fff; } .chead .av { width:56px; height:56px; border-radius:50%; display:grid; place-content:center; font-weight:900; background:var(--accento); color:var(--su-accento); font-size:21px; overflow:hidden; } .chead h3 { font-size:21px; font-weight:900; } .chead .sub2 { font-size:13px; color:rgba(255,255,255,.6); } .chead .acts { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; } /* ---------- LA SCHEDA DI UNA PERSONA ---------- */ /* a griglia e non a flex: dal telefono la faccia deve restare di fianco al nome e le pastiglie andare a capo da sole, non il contrario */ .cl-testa{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 16px; align-items:center; margin:2px 2px 16px; } /* 13 settembre: era un disco verde pieno con UNA lettera, mentre nell'elenco la stessa persona e' un riquadro neutro con DUE lettere in mono. Il verde nel prodotto vuol dire «va bene»: addosso a un nome non dice niente, e fa due facce alla stessa persona. Adesso e' lo stesso tondo dell'elenco, piu' grande. */ .cl-testa .av{ width:62px; height:62px; flex:0 0 62px; border-radius:999px; display:grid; place-content:center; font-family:var(--f-mono); font-size:19px; font-weight:500; letter-spacing:.04em; background:var(--campo); border:1px solid var(--filo); color:var(--grigio); overflow:hidden; } .cl-chi{ min-width:0; display:flex; flex-direction:column; gap:5px; } .cl-stati{ grid-column:1 / -1; } @media(min-width:900px){ .cl-testa{ grid-template-columns:auto minmax(0,1fr) auto; } .cl-stati{ grid-column:auto; justify-content:flex-end; } } .cl-chi h1{ font-family:var(--f-display); font-variation-settings:"wdth" 114; font-size:30px; font-weight:700; letter-spacing:-.015em; line-height:1.08; } .cl-meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:13px; color:var(--gray); } .cl-meta i{ font-style:normal; color:var(--grigio-tenue); margin-left:9px; } .cl-meta b{ color:var(--ink); font-weight:600; } .cl-stati{ display:flex; gap:8px; flex-wrap:wrap; } .cl-stato{ font-size:11px; font-weight:650; padding:4px 10px; border-radius:999px; letter-spacing:.02em; } /* quattro caselle dal 6 settembre 2026 (e' entrato «Consenso dati»): sul computer quattro in fila, sul telefono 2x2 (vedi sotto) */ /* due riquadri, non quattro: il codice e il consenso sono andati nel loro */ .cl-fatti{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:12px; } /* --- LA SCHEDA CLIENTE IN QUATTRO SEZIONI (13 settembre 2026) --- Stessa forma delle viste del calendario: la stessa cosa si fa nello stesso modo in tutto il gestionale. */ .cl-sezioni{ display:flex; gap:2px; padding:3px; background:var(--soft); border-radius:12px; margin:0 0 14px; overflow-x:auto; } .cl-sezioni button{ flex:1 1 0; min-width:0; border:0; background:none; font-family:inherit; font-size:13px; font-weight:700; color:var(--gray); padding:8px 6px; border-radius:9px; white-space:nowrap; transition:background var(--fast) ease, color var(--fast) ease; } .cl-sezioni button.on{ background:var(--scheda); color:var(--ink); box-shadow:var(--e1); } .cl-pan{ display:none; } .cl-pan.on{ display:block; } /* LA RIGA DI COSA FARE ADESSO. Non un riquadro grande: una frase, e il tasto che ci porta. Il filo a sinistra e' l'unico colore, e diventa rosso solo quando c'e' davvero un ritardo. */ .cl-azione{ display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:12px 15px; background:var(--scheda); border:1px solid var(--line); border-left-width:3px; border-left-style:solid; border-left-color:var(--accento); border-radius:16px; } /* nascosto vuol dire nascosto (nono giro): «display:flex» vinceva su «hidden» e restava un riquadro vuoto */ .cl-azione[hidden]{ display:none; } .cl-azione > div{ flex:1 1 auto; min-width:0; } .cl-azione b{ display:block; font-size:14px; font-weight:800; } .cl-azione i{ display:block; font-style:normal; font-size:12.5px; color:var(--gray); } .cl-azione.male{ border-left-color:var(--ritardo); } .cl-acc{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .cl-acc-tasti{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; } @media (max-width:560px){ .cl-acc{ grid-template-columns:1fr; } } .cl-f{ background:var(--scheda); border:1px solid var(--line); border-radius:16px; padding:12px 15px; display:flex; flex-direction:column; gap:3px; min-width:0; } .cl-f i{ font-style:normal; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); font-weight:700; } .cl-f b{ font-size:17px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cl-f.cod b{ color:var(--accento-testo); letter-spacing:.1em; } .cl-barra{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; } .cl-altro{ position:relative; } .cl-altro > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .cl-altro > summary::-webkit-details-marker{ display:none; } .cl-altro > summary::after{ content:"▾"; font-size:10px; opacity:.7; } .cl-altro-menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:196px; background:var(--scheda); border:1px solid var(--line); border-radius:14px; padding:6px; display:flex; flex-direction:column; gap:4px; box-shadow:var(--e3); } .cl-altro-menu .btn{ justify-content:flex-start; width:100%; } @media(max-width:560px){ .cl-testa .av{ width:52px; height:52px; flex:0 0 52px; font-size:18px; } .cl-chi h1{ font-size:23px; } /* con quattro caselle il codice non ha piu' bisogno di prendersi tutta la riga: 2x2, e ognuna sta al suo posto */ .cl-fatti{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .cl-altro-menu{ right:auto; left:0; } } /* l'obiettivo: una riga sola, e si vede subito che la legge il cliente */ .cl-obi h3{ align-items:baseline; } /* 13 settembre: la nota ereditava il maiuscolo del titolo, quindi si leggeva «OBIETTIVO LO LEGGE IL CLIENTE, IN CIMA ALLA SUA APP» — una frase intera gridata su due righe. E' una spiegazione, non un'etichetta. */ .cl-obi-nota{ margin-left:auto; font-size:11.5px; font-weight:600; color:var(--gray); text-transform:none; letter-spacing:0; text-align:left; } .cl-obi-r{ display:flex; gap:8px; align-items:flex-start; } /* e il campo era un di una riga: un obiettivo lungo si tagliava mentre lo si scriveva (stessa malattia del compilatore, 12 settembre). Adesso e' una textarea di una riga che cresce col testo. */ .cl-obi-r textarea{ flex:1; min-width:0; background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:11px 13px; font:inherit; font-size:15px; color:var(--ink); outline:none; resize:none; overflow:hidden; line-height:1.35; } .cl-obi-r textarea:focus{ border-color:var(--accento); } .cl-obi-r textarea::placeholder{ color:var(--grigio-tenue); } @media(max-width:560px){ .cl-obi-nota{ margin-left:0; flex-basis:100%; } .cl-obi-r{ flex-wrap:wrap; } .cl-obi-r textarea{ flex-basis:100%; } .cl-obi-r .btn{ margin-left:auto; } } /* le due righe che devi avere davanti prima di scrivere una scheda */ #dSapere .sap{ display:flex; gap:11px; align-items:flex-start; padding:2px 0; } #dSapere .sap + .sap{ margin-top:12px; } #dSapere .sap .fil{ flex:0 0 3px; align-self:stretch; min-height:20px; width:3px; border-radius:2px; background:var(--filo-forte); } #dSapere .sap.grave .fil{ background:var(--attesa); } #dSapere .sap span{ font-size:15px; line-height:1.5; } /* «1fr» non vuol dire «un terzo»: vuol dire «un terzo, ma mai meno del contenuto». Con un testo su una riga sola dentro, la colonna non si stringe e la griglia sborda dallo schermo — costato una prova rossa su GitHub il 5 settembre 2026 (vedi area-clienti.html). «minmax(0,1fr)» toglie quel minimo. Applicato a tutte le griglie a colonne uguali. */ .grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } /* I comandi del cliente. Erano sei tasti su una riga sola che non andava a capo: sul telefono la pagina diventava larga 415 su 390 e scorreva di lato, e soprattutto «Elimina» — l'unico da cui non si torna indietro — stava attaccato a «Chiudi». Adesso vanno a capo, ed «Elimina» sta per conto suo. */ .azioni-cliente { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .azioni-cliente .elimina { color:#E06C5A; margin-left:auto; } @media (max-width:720px){ .azioni-cliente .elimina { margin-left:0; margin-top:6px; flex-basis:100%; justify-content:center; } } .mini { background:var(--scheda); border-radius:14px; padding:14px 16px; box-shadow:var(--e3); border:1px solid var(--line);} .mini .l { font-size:11px; color:var(--gray); font-weight:700; text-transform:uppercase; letter-spacing:.05em; } .mini .v { font-size:15px; font-weight:800; margin-top:3px; } .cols2 { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; } /* adempimenti */ .adem { display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--soft); font-size:13px; } .adem:first-of-type { border-top:0; } .adem .dot { width:9px; height:9px; border-radius:50%; background:var(--ok); } .adem .dot.p { background:#E2B93B; } /* tre stati, tre colori: a posto, da tenere d'occhio, da fare adesso. Prima ambra e rosso erano lo stesso giallo, e una cosa mancante aveva lo stesso pallino di una che sta solo invecchiando. */ .adem .dot.p.male { background:var(--pericolo); } .adem .st { margin-left:auto; color:var(--ok); font-weight:700; font-size:13px; } .adem .re { color:var(--accento-testo); font-size:11px; font-weight:700; text-decoration:underline; background:none; border:0; padding:0; } /* calendario: il disegno del mese e dell'anno sta in «calendario.css» (rifatto il 24 settembre 2026). Qui restano il giorno e le sue righe. */ .day-list { margin-top:12px; } .cal-due { display:grid; grid-template-columns:1fr; gap:14px; align-items:start; } @media (min-width:900px){ .cal-due { grid-template-columns:1fr 330px; } .day-list { margin-top:0; position:sticky; top:12px; } } .day-list { background:var(--scheda); border-radius:20px; padding:16px 18px; box-shadow:var(--e3); } .day-list h4 { margin:0 0 3px; font-size:15px; font-weight:800; letter-spacing:-.01em; } .day-list .dl-sub { display:block; font-size:12px; color:var(--gray); margin-bottom:12px; } .appunt { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-top:1px solid var(--soft); } .appunt:first-of-type { border-top:0; } .appunt .ora { flex:0 0 46px; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; padding-top:1px; } .appunt .ora.senza { color:var(--gray); font-weight:600; font-size:11.5px; } .appunt .chi { flex:1; min-width:0; } .appunt .chi b { display:block; font-size:14px; font-weight:700; } .appunt .chi span { display:block; font-size:12px; color:var(--gray); line-height:1.45; } .appunt .via { flex:0 0 auto; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gray); background:var(--soft); border-radius:6px; padding:2px 6px; margin-top:2px; } /* 32×32: sotto i 30 pixel un dito non lo prende */ /* Era il simbolo piu' piccolo dell'interfaccia — 7 px — ed era l'unico comando della riga, e cancellava. Adesso e' un bersaglio da dito, con un riquadro che si vede: quando l'unica cosa che puoi premere e' distruttiva, almeno deve essere difficile premerla per sbaglio. */ .appunt button.x { flex:0 0 36px; width:36px; height:36px; border:1px solid transparent; border-radius:10px; background:none; color:var(--grigio); font-weight:800; font-size:16px; line-height:1; padding:0; cursor:pointer; } .appunt button.x:hover, .appunt button.x:focus-visible { color:var(--pericolo); border-color:color-mix(in srgb, var(--pericolo) 45%, transparent); background:color-mix(in srgb, var(--pericolo) 10%, transparent); } /* impostazioni: lista scura stile iOS */ .setlist { border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.1); } .setrow { display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:15px 18px; border:0; border-top:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.06); color:#fff; font-size:15px; font-weight:600; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } .setrow:first-child { border-top:0; } .setrow .si { width:34px; height:34px; border-radius:11px; display:grid; place-content:center; font-size:15px; background:color-mix(in srgb, var(--accento) 16%, transparent); } .setrow .chev { margin-left:auto; color:rgba(255,255,255,.4); font-weight:800; } /* titolo e descrizione erano attaccati ("Il mio sito0 domande"): non è mai esistita una regola che li mandasse a capo. Una riga di impostazioni ha due piani — cosa è, e com'è messo adesso. */ .setrow .st { flex:1; min-width:0; display:block; } .setrow .st b { display:block; font-size:15px; font-weight:600; line-height:1.35; } /* LE DESCRIZIONI NON SI VEDONO PIU' NELL'ELENCO. Stile Impostazioni di Apple: fuori solo il titolo e, a destra, com'e' messo adesso. La spiegazione si legge aprendo la voce, dove serve. Il testo resta nel codice perche' lo leggono i lettori di schermo. */ .setrow .st i { display:block; font-style:normal; font-size:12.5px; font-weight:500; line-height:1.4; margin-top:2px; color:var(--grigio, rgba(255,255,255,.55)); } .gruppo-set .setrow .st i, #pg-set .setlist .setrow .st i{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); margin:0; } .gruppo-set .setrow, #pg-set .setlist .setrow{ padding-top:13px; padding-bottom:13px; } .gruppo-set .setrow .st b, #pg-set .setlist .setrow .st b{ font-size:15.5px; } /* ---------- IMPOSTAZIONI A SCHERMATE ---------- */ /* La radice: una casellona sola, solo titoli, righe divise da un filo morbido. Niente tendine — vedi il commento sopra la pagina. */ .set-menu{ background:var(--scheda); border-radius:20px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--e3); } .set-menu .set-voce, .set-menu #esci{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:16px 18px; border:0; border-top:1px solid var(--line); background:none; color:var(--ink); font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; transition:background var(--fast) ease; } .set-menu > *:first-child{ border-top:0; } /* la domanda sugli strumenti: stessa faccia delle impostazioni */ .strum-box{ background:var(--scheda); border-radius:20px; padding:18px 16px 16px; margin-bottom:16px; } .strum-box h3{ margin:0 0 4px; font-size:18px; font-weight:700; } .strum-tit, .soon-tit{ font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:18px 2px 8px; } .strum-lista, .soon-lista{ border-radius:16px; overflow:hidden; background:var(--scheda2, rgba(255,255,255,.04)); } .soon-lista > *:first-child{ border-top:0; } .strum-v{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:13px 14px; background:none; border:0; border-top:1px solid var(--line); color:inherit; font:inherit; cursor:pointer; min-height:46px; } .strum-lista > *:first-child{ border-top:0; } .strum-v .st{ flex:1; min-width:0 } .strum-v .st b{ display:block; font-size:15px; font-weight:600 } .strum-v .st i{ display:block; font-size:12.5px; font-style:normal; color:var(--muted); margin-top:2px } .strum-v .sp{ flex:0 0 auto; color:var(--ok, #6BD6A0); font-weight:800 } .strum-v.on{ background:rgba(255,255,255,.06) } .strum-v[disabled]{ opacity:.45; cursor:default } /* la riga onesta sopra le due domande: un foglietto tenue, non un allarme. L'accento resta sul filo a sinistra, che e' il posto dove il tema parla. */ .strum-nota{ margin:0 0 14px; padding:10px 0 10px 12px; font-size:13px; line-height:1.5; color:var(--muted); border-left:2px solid color-mix(in srgb,var(--accento) 45%,transparent) } .strum-riga{ display:flex; align-items:center; gap:12px; background:var(--scheda); border-radius:18px; padding:12px 14px; margin-bottom:16px; } .strum-riga .st{ flex:1; min-width:0 } .strum-riga .st b{ display:block; font-size:15px; font-weight:650 } .strum-riga .st i{ display:block; font-size:12.5px; font-style:normal; color:var(--muted); margin-top:2px } .strum-invito{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--scheda); border:1px solid var(--line); border-radius:18px; padding:13px 15px; margin:0 0 14px; color:inherit; font:inherit; cursor:pointer; } .strum-invito[hidden]{ display:none } .strum-invito .st{ flex:1; min-width:0 } .strum-invito .st b{ display:block; font-size:15px; font-weight:650 } .strum-invito .st i{ display:block; font-size:12.5px; font-style:normal; color:var(--muted); margin-top:2px } .strum-invito .sa{ flex:0 0 auto; color:var(--grigio-tenue); font-size:19px; font-weight:700 } /* 5 settembre 2026: dodici tondi verdi uno sotto l'altro non dicevano niente — erano solo dodici. Le icone tornano neutre; il verde nelle impostazioni resta all'interruttore acceso e al tasto che salva. */ .set-menu .set-voce .si, .set-menu #esci .si{ flex:0 0 32px; width:32px; height:32px; border-radius:9px; display:grid; place-content:center; background:var(--campo); color:var(--grigio); border:1px solid var(--filo); } .set-menu .set-voce:hover .si{ color:var(--inchiostro); } .set-menu .si svg{ width:18px; height:18px; } .set-menu .st{ flex:1; min-width:0; } .set-menu .st b{ font-size:16px; font-weight:600; } /* La riga sotto il titolo. C'era gia' un «.set-menu #esci .st i{display:none}» che la spegneva per Esci, ma la regola che l'accendeva non e' mai esistita: una voce con la spiegazione l'avrebbe sputata in corsivo di fianco al titolo. Serve per le voci in cui il nome da solo non basta. */ .set-menu .st i{ display:block; font-style:normal; font-size:12.5px; font-weight:500; color:var(--grigio); margin-top:2px; } /* Il valore a destra, prima della freccia. Esisteva gia' nel markup del sito («Modello del sito · Palestra») ma non era mai stato vestito: usciva nero, grosso come il titolo, e sembrava una seconda voce. Adesso e' la stessa riga grigia delle impostazioni. */ .set-menu .sv{ margin-left:auto; color:var(--grigio); font-size:13.5px; font-weight:600; max-width:44%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .set-menu .sa{ flex:0 0 auto; color:var(--grigio-tenue); font-size:19px; font-weight:700; } /* 13 settembre: col mouse sopra, la riga diventava verde piena — e nella schermata del Mio sito «Nome e logo» sembrava accesa, scelta, diversa dalle altre, senza un motivo che si capisse. Il passaggio del mouse deve dire «questo è un tasto», non «questo è attivo»: si alza la superficie, non si accende il colore. */ @media(hover:hover){ .set-menu .set-voce:hover, .set-menu #esci:hover{ background:var(--campo); } } .set-menu .set-voce:active, .set-menu #esci:active{ background:color-mix(in srgb, var(--inchiostro) 10%, transparent); } /* «Esci» resta in fondo alla stessa casella, ma si legge subito che è altro */ .set-menu #esci{ border-top:1px solid var(--filo-forte); } .set-menu #esci .si{ background:color-mix(in srgb, var(--st-scaduto) 16%, transparent); color:var(--st-scaduto); } .set-menu #esci .st b{ color:var(--st-scaduto); } .set-menu #esci .st i{ display:none; } /* La schermata di un gruppo: torna indietro, titolo, e le voci come rettangoli cliccabili con la loro descrizione sotto — qui la spiegazione serve, ed è il motivo per cui fuori non c'è. */ .set-gruppo[hidden]{ display:none; } .set-indietro{ border:0; background:none; color:var(--accento-testo); font-family:inherit; font-size:14px; font-weight:650; padding:0; margin-bottom:12px; cursor:pointer; } .set-tit{ font-size:22px; font-weight:800; letter-spacing:-.01em; margin:0 0 3px; } .set-sott{ font-size:13.5px; color:var(--gray); margin:0 0 16px; } .set-gruppo .setlist{ border:0; border-radius:0; overflow:visible; display:flex; flex-direction:column; gap:10px; } .set-gruppo .setlist .setrow{ border:1px solid var(--line); border-radius:16px; background:var(--scheda); box-shadow:var(--e3); padding:15px 17px; align-items:flex-start; backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--ink); transition:border-color var(--fast) ease, transform var(--fast) ease, box-shadow var(--fast) ease; } .set-gruppo .setlist .setrow .si{ margin-top:1px; color:var(--accento-testo); } .set-gruppo .setlist .setrow .si svg{ width:18px; height:18px; } /* la descrizione qui DEVE vedersi: piu' su c'e' una regola con un id (#pg-set .setlist .setrow .st i) che la nasconde per l'elenco, e un id batte qualunque classe. Quindi qui si ripete l'id, se no perde. */ #pg-set .set-gruppo .setlist .setrow .st i{ position:static; width:auto; height:auto; overflow:visible; clip-path:none; display:block; margin-top:3px; font-size:12.5px; line-height:1.45; color:var(--gray); } .set-gruppo .setlist .setrow .sv{ margin-left:auto; align-self:center; } .set-gruppo .setlist .setrow .sa{ align-self:center; } @media(hover:hover){ .set-gruppo .setlist .setrow:hover{ border-color:color-mix(in srgb, var(--accento) 42%, transparent); transform:translateY(-2px); box-shadow:0 10px 30px -14px color-mix(in srgb, var(--accento) 45%, transparent); } } .set-gruppo .setlist .setrow:active{ transform:translateY(0) scale(.995); } .setrow .sa { flex:0 0 auto; margin-left:6px; font-weight:700; font-size:17px; color:var(--grigio-tenue, rgba(255,255,255,.35)); } .sw { margin-left:auto; flex:0 0 46px; height:28px; border-radius:999px; border:0; background:rgba(255,255,255,.2); position:relative; transition:background .2s; } .sw::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transform:translate3d(0,0,0); transition:transform .2s; box-shadow:var(--e1); } .sw.on { background:var(--ok); } .sw.on::after { transform:translate3d(18px,0,0); } .swi.spento { opacity:.4; pointer-events:none; } /* builder */ .brow { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; } .brow select, .brow input { padding:11px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.15); background:var(--scheda); outline:none; font-size:13px; } .bday { background:var(--scheda); border-radius:20px; margin-bottom:14px; overflow:hidden; box-shadow:var(--e3); } .bday-h { display:flex; align-items:center; gap:10px; padding:14px 18px; background:var(--soft); } .bday-h input { flex:1; border:0; background:none; font-weight:800; font-size:15px; outline:none; } .bday-h button { border:0; background:var(--campo); border-radius:10px; width:30px; height:30px; font-weight:800; } table.bx { width:100%; border-collapse:collapse; } .bx th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--gray); padding:9px 10px 5px; } .bx td { padding:5px 6px; border-top:1px solid var(--soft); } .bx input, .bx select { width:100%; padding:9px 10px; border-radius:10px; border:1px solid var(--line); font-size:13px; outline:none; background:var(--campo); } .bx .mv { display:flex; gap:3px; } .bx .mv button, .bx .del { border:1px solid var(--line); background:var(--soft); border-radius:10px; width:26px; height:26px; font-size:11px; font-weight:800; } .bx .del { color:var(--warn); } .addrow { margin:10px 14px 14px; border:1px dashed #D8D8DE; background:none; border-radius:10px; padding:10px 16px; font-weight:700; font-size:13px; color:var(--gray); width:calc(100% - 28px); } .bfoot { display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; } /* ---- il compilatore, seconda versione ---- Prima era un foglio di calcolo: sette colonne, bordi, caselle tutte uguali. Adesso somiglia alla scheda finita — il nome dell'esercizio si legge grande, i numeri stanno sotto in piccolo — e si scrive uguale dal telefono e dal computer. La differenza vera è la riga in cima: si dice a parole cosa cambiare, e prima di toccare niente si vede il confronto. */ .bhead { background:var(--scheda); border-radius:22px; padding:16px 18px; margin-bottom:12px; box-shadow:var(--e3); display:flex; flex-direction:column; gap:12px; } .bh-r1 { display:flex; align-items:center; gap:12px; } .bh-av { flex:0 0 auto; width:42px; height:42px; border-radius:14px; display:grid; place-items:center; font-weight:800; font-size:15px; background:linear-gradient(160deg, color-mix(in srgb, var(--accento) 26%, transparent), color-mix(in srgb, var(--accento) 10%, transparent)); color:var(--accento-testo); } .bh-cli { flex:1; min-width:0; } .bh-cli label { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray); font-weight:700; margin-bottom:1px; } .bh-cli select { width:100%; border:0; background:none; outline:none; font-family:inherit; font-size:17px; font-weight:800; color:var(--ink); padding:0; -webkit-appearance:none; appearance:none; } .bh-tit { width:100%; border:0; border-bottom:1px solid var(--line); background:none; outline:none; font-family:inherit; font-size:20px; font-weight:800; letter-spacing:-.01em; padding:2px 0 9px; color:var(--ink); } .bh-tit::placeholder { font-weight:600; font-size:17px; color:color-mix(in srgb, var(--gray) 55%, transparent); } /* Durata e Modelli. Prima "Durata: 6 sett." era scritto DENTRO la casella — cancellabile per sbaglio — e "Parti da un modello…" veniva tagliato a metà. Adesso l'etichetta sta fuori e sopra, e dentro resta solo il dato. */ .bh-meta { display:grid; grid-template-columns:minmax(120px,.8fr) minmax(150px,1.2fr); gap:10px; } .bh-f { display:block; min-width:0; } .bh-f > .bh-lab { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray); font-weight:700; margin-bottom:5px; } .bh-fin { display:flex; align-items:baseline; gap:6px; padding:9px 12px; border-radius:12px; border:1px solid var(--line); background:var(--campo); } .bh-fin input { width:2.2em; min-width:0; border:0; background:none; outline:none; font-family:inherit; font-size:15px; font-weight:800; color:var(--ink); padding:0; text-align:left; } .bh-fin i { font-style:normal; font-size:13px; color:var(--gray); white-space:nowrap; } .bh-f select { width:100%; max-width:100%; padding:9px 30px 9px 12px; border-radius:12px; border:1px solid var(--line); background:var(--campo); outline:none; font-family:inherit; font-size:14px; color:var(--ink); text-overflow:ellipsis; -webkit-appearance:none; appearance:none; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 15px) 51%, calc(100% - 10px) 51%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; } /* LA RIGA IN CUI SI DETTA. Prima icona, casella, microfono e freccia stavano tutti su una riga sola: alla casella restava una fessura e sul telefono era schiacciata. Adesso c'è una testata che dice a che cosa serve, sotto si scrive per tutta la larghezza, e i tasti stanno su una riga loro. */ .bdet { background:var(--scheda); border-radius:22px; padding:14px 14px 12px; margin-bottom:12px; box-shadow:var(--e3); border:1px solid color-mix(in srgb, var(--accento) 22%, transparent); } .bdet-h { display:flex; align-items:center; gap:10px; margin-bottom:10px; } /* stesso bollo dell'assistente in cima alla pagina. NIENTE PIATTO DIETRO: vedi la nota lunga in fondo al foglio di stile — il tondo nero era nato quando qui dentro c'era una spirale piatta, e adesso che c'e' la faccia di vetro e' solo un secondo cerchio che spunta da sotto mentre lei fluttua. Nel compilatore delle schede si vedeva benissimo, perche' la scheda e' piu' chiara della pagina. */ .bdet-ic { flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:transparent; color:color-mix(in srgb, var(--accento) 92%, #FFFFFF); } .bdet-ic svg { width:42px; height:42px; display:block; filter:drop-shadow(0 0 5px color-mix(in srgb, var(--accento) 65%, transparent)); animation:respiroSegno 2.9s cubic-bezier(.4,0,.6,1) infinite; } html.tema-chiaro .bdet-ic{ background:transparent; box-shadow:none; } html.tema-chiaro .bdet-ic svg{ filter:none; } @media (prefers-reduced-motion: reduce){ .bdet-ic svg{ animation:none; } } .bdet-h .bdet-t { min-width:0; } .bdet-h .bdet-t b { display:block; font-size:14px; font-weight:800; line-height:1.25; color:var(--ink); } .bdet-h .bdet-t i { display:block; font-style:normal; font-size:11.5px; color:var(--gray); line-height:1.35; margin-top:1px; } /* LA CASELLA SI DEVE VEDERE. Finche' dentro c'era un esempio lungo, il riquadro si capiva dal testo; tolto l'esempio restava un pezzo di scheda vuoto e nessuno capiva dove scrivere. Adesso la casella e' una casella: fondo suo, bordo, e il bordo si accende quando ci sei dentro. */ .bdet-r { display:block; background:var(--campo); border:1px solid var(--line); border-radius:16px; padding:12px 13px 10px; transition:border-color var(--fast) ease, box-shadow var(--fast) ease; } .bdet-r:focus-within { border-color:color-mix(in srgb, var(--accento) 55%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accento) 14%, transparent); } .bdet textarea { display:block; width:100%; min-height:44px; border:0; background:none; outline:none; resize:none; font-family:inherit; font-size:15px; line-height:1.5; color:var(--ink); padding:0 2px; max-height:150px; overflow-y:auto; } .bdet textarea::placeholder { color:var(--gray); } .bdet-b { display:flex; align-items:center; gap:8px; margin-top:8px; } .bdet-b .sp { flex:1; } .bdet-b > button { flex:0 0 auto; width:40px; height:40px; border-radius:13px; border:1px solid var(--line); background:var(--soft); color:var(--gray); display:grid; place-items:center; transition:background var(--fast) ease, color var(--fast) ease; } .bdet-b > button svg { width:18px; height:18px; } .bdet-b > button.on { background:var(--warn); border-color:var(--warn); color:#fff; } /* «wait»: la voce e' registrata e il server la sta trascrivendo. Un tasto che pulsa piano dice «sto lavorando» senza far credere che ascolti ancora. */ .bdet-b > button.wait, #pMic.wait { color:var(--accento-testo); border-color:var(--accento); animation:micAttesa 1s ease-in-out infinite; } @keyframes micAttesa { 0%,100%{ opacity:1 } 50%{ opacity:.45 } } .bdet-go { background:var(--accento) !important; border-color:transparent !important; color:var(--su-accento) !important; } .bdet-go[disabled] { opacity:.45; } #bAllegati:not(:empty){ display:flex; gap:5px; align-items:center; } #bAllegati .ball{ display:inline-flex; align-items:center; gap:5px; background:var(--campo); border:1px solid var(--filo); border-radius:99px; padding:4px 9px; font-size:11.5px; color:var(--inchiostro); max-width:150px; } #bAllegati .ball b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } #bAllegati .ball button{ border:0; background:none; color:var(--grigio); cursor:pointer; font-size:13px; line-height:1; padding:0; font-family:inherit; } /* Sul telefono scorrono col dito, e la sfumatura a destra dice che ce n'e' ancora. Da COMPUTER no: Jacopo, 27 agosto: «non riesco a farli scorrere verso destra per vedere gli altri». Vero — con la rotella si scorre in giu', non di lato, e la barra era nascosta apposta. Quindi da computer non scorrono affatto: vanno a capo, si vedono tutti, e la sfumatura sparisce perche' non c'e' piu' niente di nascosto. */ .bdet-s { display:flex; gap:6px; overflow-x:auto; margin-top:10px; padding-bottom:2px; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent); mask-image:linear-gradient(90deg,#000 78%,transparent); } .bdet-s:empty{ display:none; margin-top:0; } .bdet-s::-webkit-scrollbar { display:none; } .bdet-s button { flex:0 0 auto; border:1px solid var(--line); background:var(--soft); color:var(--gray); border-radius:99px; padding:8px 14px; font-size:12.5px; font-weight:600; font-family:inherit; white-space:nowrap; } @media(hover:hover){ .bdet-s{ flex-wrap:wrap; overflow-x:visible; -webkit-mask-image:none; mask-image:none; } } /* l'istruzione: chiusa di suo, una riga sola finche' non serve */ .bdet-come { margin-top:12px; border-top:1px solid var(--line); } .bdet-come > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 2px 2px; } .bdet-come > summary::-webkit-details-marker { display:none; } .bdet-come > summary span { font-size:12.5px; font-weight:650; color:var(--accento-testo); } .bdet-come > summary i { font-style:normal; color:var(--gray); font-size:15px; transition:transform var(--fast) ease; } .bdet-come[open] > summary i { transform:rotate(90deg); } .bdet-come-c { padding:6px 2px 2px; font-size:13px; line-height:1.55; color:var(--gray); } .bdet-come-c p { margin:0 0 8px; } .bdet-come-c b { color:var(--ink); font-weight:650; } .bdet-come-c ul { margin:0 0 10px; padding:0; list-style:none; } .bdet-come-c li { padding:4px 0 4px 15px; position:relative; } .bdet-come-c li::before { content:"·"; position:absolute; left:4px; color:var(--accento); font-weight:800; } /* il confronto prima di applicare */ .prop { background:var(--scheda); border-radius:22px; margin-bottom:12px; box-shadow:var(--e3); overflow:hidden; animation:saliDentro .38s cubic-bezier(.16,1,.3,1) both; } .prop-h { padding:14px 18px 10px; } .prop-h b { display:block; font-size:15px; font-weight:800; margin-bottom:3px; } .prop-h span { display:block; font-size:13px; color:var(--gray); line-height:1.5; } .prop-b { max-height:340px; overflow-y:auto; padding:2px 12px 6px; } .dl { display:flex; gap:9px; align-items:flex-start; padding:8px 10px; border-radius:12px; margin-bottom:4px; font-size:13px; line-height:1.45; } .dl .dseg { flex:0 0 auto; width:17px; height:17px; border-radius:6px; display:grid; place-items:center; font-size:12px; font-weight:800; margin-top:1px; } .dl .dtxt { min-width:0; } .dl .ddove { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--gray); font-weight:700; } .dl .dda { display:block; text-decoration:line-through; opacity:.62; } .dl.piu { background:color-mix(in srgb, var(--ok) 11%, transparent); } .dl.piu .dseg { background:var(--ok); color:#fff; } .dl.meno { background:color-mix(in srgb, var(--warn) 11%, transparent); } .dl.meno .dseg { background:var(--warn); color:#fff; } .dl.meno .dtxt > i { font-style:normal; text-decoration:line-through; opacity:.72; } .dl.cam { background:color-mix(in srgb, var(--amber) 13%, transparent); } .dl.cam .dseg { background:var(--amber); color:#fff; } .prop-u { padding:2px 22px 10px; font-size:12px; color:var(--gray); } .prop-a { display:flex; gap:8px; padding:10px 14px 14px; } .prop-a .btn { flex:1; justify-content:center; } /* CORREGGERLA PRIMA DI ACCETTARLA. Il coach guarda la proposta e quasi mai gli va bene al primo colpo: una cosa da cambiare c'e' sempre. Prima doveva applicarla e poi correggerla a mano nei campi. Adesso parla di nuovo qui dentro e la proposta si rifa': niente viene scritto finche' non preme il tasto verde. */ .prop-c { margin:0 14px 12px; padding:11px 13px; border-radius:16px; background:var(--soft); border:1px solid var(--line); } .prop-c > label { display:block; font-size:12px; color:var(--gray); font-weight:600; margin-bottom:6px; } .prop-c textarea { display:block; width:100%; min-height:24px; max-height:110px; border:0; background:none; outline:none; resize:none; font-family:inherit; font-size:14.5px; line-height:1.5; color:var(--ink); padding:0 2px; overflow-y:auto; } .prop-c textarea::placeholder { color:color-mix(in srgb, var(--gray) 75%, transparent); } .prop-cb { display:flex; align-items:center; gap:8px; margin-top:8px; } .prop-cb .sp { flex:1; font-size:11.5px; color:var(--gray); line-height:1.3; } .prop-cb > button { flex:0 0 auto; width:36px; height:36px; border-radius:12px; border:1px solid var(--line); background:var(--scheda); color:var(--gray); display:grid; place-items:center; transition:background var(--fast) ease, color var(--fast) ease; } .prop-cb > button svg { width:17px; height:17px; } .prop-cb > button.on { background:var(--warn); border-color:var(--warn); color:#fff; } .prop-cb > button[disabled] { opacity:.45; } .prop-giri { font-size:11.5px; color:var(--gray); font-weight:600; } /* la scheda scritta da zero: si legge, non si confronta */ .nz { border-top:1px solid var(--soft); padding:10px 6px 8px; } .nz:first-child { border-top:0; } .nz-h { display:flex; align-items:center; gap:9px; margin-bottom:4px; } .nz-n { flex:0 0 auto; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; background:var(--accento); color:var(--su-accento); font-size:11.5px; font-weight:800; } .nz-t { min-width:0; } .nz-t b { display:block; font-size:14.5px; font-weight:800; letter-spacing:-.01em; } .nz-t i { display:block; font-style:normal; font-size:11.5px; color:var(--gray); margin-top:1px; } .nz-e { display:flex; align-items:flex-start; gap:9px; padding:5px 0 5px 4px; } .nz-en { flex:0 0 auto; width:18px; height:18px; margin-top:2px; border-radius:6px; background:var(--soft); color:var(--gray); display:grid; place-items:center; font-size:10.5px; font-weight:800; font-variant-numeric:tabular-nums; } .nz-eb { flex:1; min-width:0; } .nz-eb b { display:block; font-size:14px; font-weight:700; } .nz-eb span { display:block; font-size:12px; color:var(--gray); margin-top:1px; } /* linee guida */ .bguida { background:var(--scheda); border-radius:22px; margin-bottom:14px; box-shadow:var(--e3); overflow:hidden; } /* --- la chiave dei fogli, da copiare --- */ .chiave-box { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; margin-top:12px; } .chiave-box .st { flex:1; min-width:0; } .chiave-box .st b { display:block; font-size:13.5px; } .chiave-box .st i { display:block; font-style:normal; font-size:12.5px; color:var(--muted); margin-top:2px; font-family:ui-monospace, Menlo, monospace; word-break:break-all; } /* --- il link del sito, in cima --- */ /* 6 settembre 2026: era un riquadro verde con sotto una SECONDA fascia verde («quello che salvi qui e' subito online»): due fondi d'accento impilati prima di arrivare al contenuto, la schermata piu' accesa del gestionale (6,3% di pixel verdi). Il fondo torna neutro, l'accento resta sull'indirizzo — che e' la cosa da leggere — e la frase sull'«online» entra qui come riga, non come secondo blocco. */ .tuosito { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 16px; border-radius:16px; margin-bottom:12px; background:var(--scheda); border:1px solid var(--filo); } .ts-testo .ts-nota { display:block; font-size:12px; color:var(--grigio); margin-top:5px; } .ts-testo { flex:1; min-width:200px; } .ts-testo b { display:block; font-size:14px; } .ts-testo a { display:block; font-size:15px; font-weight:800; color:var(--accento-testo); text-decoration:none; margin-top:2px; word-break:break-all; } .ts-tasti { display:flex; gap:6px; flex-wrap:wrap; } #qrSito { display:grid; place-items:center; padding:10px; background:#fff; border-radius:14px; } #qrSito canvas, #qrSito img { width:220px; height:220px; image-rendering:pixelated; } /* --- i tre modelli del sito --- */ .modelli { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; } @media (max-width:560px) { .modelli { grid-template-columns:1fr; } } .modello { border:1.5px solid var(--line); border-radius:16px; padding:10px; cursor:pointer; background:var(--card); text-align:left; font:inherit; color:inherit; } .modello.on { border-color:var(--accento); box-shadow:0 0 0 3px color-mix(in srgb, var(--accento) 22%, transparent); } /* L'ANTEPRIMA E' IL DISEGNO DELLA PRIMA SCHERMATA (6 settembre 2026). Erano due barrette grigie identiche per tutti i modelli: non dicevano niente di com'e' fatto il sito. Adesso ogni riquadro e' una miniatura vera — barra in alto, le due frasi, il bottone, la foto dove c'e', e le tre schede della pagina sotto — coi colori di quel modello. */ .modello .ant { height:118px; border-radius:10px; margin-bottom:9px; position:relative; overflow:hidden; display:grid; align-content:start; gap:5px; padding:9px 10px; } .modello .ant .a-nav { height:5px; border-radius:3px; background:currentColor; opacity:.3; } .modello .ant .a-t1 { height:9px; width:76%; border-radius:3px; background:currentColor; opacity:.92; } .modello .ant .a-t2 { height:9px; width:54%; border-radius:3px; background:var(--accento); } .modello .ant .a-cta { height:9px; width:38%; border-radius:99px; background:var(--accento); margin-top:2px; } .modello .ant .a-foto { display:none; } .modello .ant .a-cards { display:flex; gap:5px; margin-top:auto; } .modello .ant .a-cards i { flex:1; height:17px; border-radius:4px; background:currentColor; opacity:.16; } /* palestra: la foto riempie tutto e le scritte ci stanno sopra */ .modello[data-m="palestra"] .ant { background:linear-gradient(175deg,#2C2C31,#151517); color:#fff; align-content:center; } .modello[data-m="palestra"] .ant .a-foto { display:block; position:absolute; inset:0; background: radial-gradient(90% 70% at 70% 0%, color-mix(in srgb, var(--accento) 40%, transparent), transparent 65%), linear-gradient(160deg,#3A3A41,#141416); } .modello[data-m="palestra"] .ant > :not(.a-foto) { position:relative; z-index:1; } .modello[data-m="palestra"] .ant .a-cards { display:none; } /* notte: come palestra ma senza foto, solo il colore */ .modello[data-m="notte"] .ant { color:#fff; align-content:center; background: radial-gradient(80% 60% at 50% -10%, color-mix(in srgb, var(--accento) 45%, transparent), transparent 62%), linear-gradient(180deg,#0A0B0D,#101317); } .modello[data-m="notte"] .ant .a-cards { display:none; } .modello[data-m="notte"] .ant .a-t1 { width:82%; } /* studio: chiaro, le frasi in cima e la foto larga sotto */ .modello[data-m="studio"] .ant { background:#F3F3F6; color:#111; } /* la foto va SOTTO le frasi, come nel modello vero: nel disegnino sta prima nel codice, quindi la si manda in fondo con order */ .modello[data-m="studio"] .ant .a-foto { display:block; order:9; height:40px; border-radius:6px; margin-top:3px; background:linear-gradient(160deg,#C9CBD2,#9EA2AC); } .modello[data-m="studio"] .ant .a-cards { display:none; } /* rivista: due colonne, testo a sinistra e foto alta a destra */ .modello[data-m="rivista"] .ant { background:#F3F3F6; color:#111; grid-template-columns:1fr 44px; align-content:center; column-gap:9px; } .modello[data-m="rivista"] .ant > :not(.a-foto) { grid-column:1; } .modello[data-m="rivista"] .ant .a-foto { display:block; grid-column:2; grid-row:1 / span 5; align-self:stretch; border-radius:6px; background:linear-gradient(160deg,#C9CBD2,#9EA2AC); } .modello[data-m="rivista"] .ant .a-cards { display:none; } .modello[data-m="rivista"] .ant .a-t1 { width:92%; } /* essenziale: fascia corta in cima, e si vedono subito le schede */ .modello[data-m="essenziale"] .ant { background:#FFFFFF; color:#111; } .modello[data-m="essenziale"] .ant .a-t1 { width:66%; } .modello[data-m="essenziale"] .ant .a-t2 { width:44%; } /* NEI TRE DISEGNINI CHIARI L'ACCENTO VA SCURITO (6 settembre 2026). Il gestionale gira quasi sempre su un tema scuro, e il suo accento è un verde da fondo nero — su RitMo Coach addirittura un neon. Sul cartoncino bianco di Studio, Rivista ed Essenziale quelle due barrette sparivano, e il disegnino prometteva una cosa che il sito vero non fa: la vetrina, sui modelli chiari, usa il verde da carta. Il disegnino deve dire la verità. Jacopo, 6 settembre: «le schermate bianche, il verde si vede veramente poco… soprattutto le versioni chiare». */ .modello[data-m="studio"] .ant .a-t2, .modello[data-m="studio"] .ant .a-cta, .modello[data-m="rivista"] .ant .a-t2, .modello[data-m="rivista"] .ant .a-cta, .modello[data-m="essenziale"] .ant .a-t2, .modello[data-m="essenziale"] .ant .a-cta { background:color-mix(in srgb, var(--accento) 55%, #000000); } .modello b { display:block; font-size:14px; } .modello span { display:block; font-size:12px; color:var(--muted); margin-top:2px; line-height:1.35; } /* --- lo sfondo della prima schermata del sito --- */ .sfondo-box { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:16px; margin-bottom:14px; flex-wrap:wrap; } .sfondo-ant { flex:0 0 72px; height:48px; border-radius:10px; overflow:hidden; background: radial-gradient(60px 40px at 80% 0%, color-mix(in srgb, var(--accento) 55%, transparent), transparent 60%), linear-gradient(175deg, #2C2C31, #151517); } .sfondo-ant img, .sfondo-ant video { width:100%; height:100%; object-fit:cover; display:block; } .sfondo-testo { flex:1; min-width:140px; } .sfondo-testo b { display:block; font-size:14px; } .sfondo-testo span { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; } .sfondo-tasti { display:flex; gap:6px; } /* --- la libreria video e le foto dei risultati: stessa riga, stesso peso --- Un elenco di cose caricate: miniatura a sinistra, il nome che si corregge scrivendoci dentro, la croce a destra. Niente cornice per ogni riga — un filo sottile fra una e l'altra, come nelle impostazioni: sei riquadri staccati per sei video sono sei scatole vuote. */ .lista-media { border:1px solid var(--line); border-radius:16px; overflow:hidden; } .lista-media:empty { display:none; } .lm-riga { display:flex; align-items:center; gap:11px; padding:10px 12px; border-top:1px solid var(--line); } .lista-media > *:first-child { border-top:0; } .lm-ant { flex:0 0 64px; height:44px; border-radius:9px; overflow:hidden; background:var(--campo); display:grid; place-content:center; color:var(--grigio-tenue); font-size:15px; } .lm-ant img, .lm-ant video { width:100%; height:100%; object-fit:cover; display:block; } .lm-corpo { flex:1; min-width:0; } .lm-corpo input { width:100%; background:none; border:0; border-bottom:1px solid transparent; color:var(--ink); font:inherit; font-size:14.5px; font-weight:600; padding:2px 0; } .lm-corpo input:focus { outline:0; border-bottom-color:var(--accento); } .lm-corpo span { display:block; font-size:12px; color:var(--muted); margin-top:2px; } .lm-x { flex:0 0 auto; background:none; border:0; color:var(--grigio-tenue); font-size:17px; line-height:1; cursor:pointer; padding:6px; } .lm-x:hover { color:var(--pericolo, #E0616C); } .lm-vuoto { color:var(--muted); font-size:13.5px; margin:0 0 12px; } /* --- le sezioni del sito, piegate: la pagina era lunga 10.500 pixel --- */ .piega { background:var(--scheda); border-radius:20px; margin-bottom:12px; box-shadow:var(--e3); } .piega > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:15px 18px; } .piega > summary::-webkit-details-marker { display:none; } .piega > summary b { font-size:14.5px; font-weight:800; } .piega > summary::after { content:"›"; margin-left:auto; font-size:19px; color:var(--gray); transition:transform var(--fast) ease; } .piega[open] > summary::after { transform:rotate(90deg); } .piega[open] > summary { border-bottom:1px solid var(--soft); } .piega > *:not(summary) { padding-left:18px; padding-right:18px; } .piega > *:last-child { padding-bottom:16px; } .piega .pg-tasti { display:flex; gap:6px; margin-left:auto; } .piega .pg-tasti + ::after { margin-left:8px; } .pg-manca { background:color-mix(in srgb, var(--attenzione) 12%, transparent); border:1px solid color-mix(in srgb, var(--attenzione) 26%, transparent); border-radius:16px; padding:13px 16px; margin-bottom:12px; } .pg-manca b { display:block; font-size:13.5px; font-weight:800; color:var(--attenzione); margin-bottom:4px; } .pg-manca span { font-size:13px; color:var(--inchiostro); opacity:.85; line-height:1.55; } /* LA BARRA «SALVA» NON DEVE LASCIAR VEDERE COSA C'E' DIETRO. Era al 90%% col vetro sfocato: le voci dell'elenco che le passavano sotto si leggevano a meta' e sembravano tagliate («Il metodo», «Percorsi», visti a schermo il 12 settembre). Fondo pieno, e la pagina tiene sotto lo spazio della barra cosi' in fondo alla scorsa non ci resta niente dietro. Via anche il backdrop-filter, che e' la voce piu' cara del conto. */ /* Sul computer la barra sta in fondo alla pagina e basta: appiccicata al bordo dello schermo galleggiava sopra l'elenco e teneva sempre due voci mezze nascoste dietro («Il metodo», «Percorsi», viste a schermo il 12 settembre). Appiccicata resta sul telefono, dove il pollice non arriva in fondo alla pagina. */ .sito-foot { position:static; margin-top:16px; background:var(--scheda); border:1px solid var(--line); border-radius:20px; padding:9px; box-shadow:var(--e3); display:flex; gap:10px; } .sito-foot .btn { flex:1; justify-content:center; } #pg-sito { padding-bottom:24px; } @media (max-width:720px){ .sito-foot { position:sticky; margin-top:0; bottom:calc(78px + var(--sab)); } #pg-sito { padding-bottom:96px; } } .bguida > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:15px 18px; } .bguida > summary::-webkit-details-marker { display:none; } .bguida > summary .bg-t { min-width:0; } .bguida > summary b { display:block; font-size:14.5px; font-weight:800; line-height:1.25; } .bguida > summary i { display:block; font-style:normal; font-size:11.5px; color:var(--gray); line-height:1.4; margin-top:2px; } .bguida > summary > span#bGuideN { margin-left:auto; flex:0 0 auto; font-size:12px; color:var(--gray); white-space:nowrap; } .bguida > summary::after { content:"›"; flex:0 0 auto; font-size:19px; color:var(--gray); transition:transform var(--fast) ease; } .bguida[open] > summary { border-bottom:1px solid var(--soft); } .bguida[open] > summary::after { transform:rotate(90deg); } /* una linea guida sono due cose scritte: che cosa, e quanto. Su una riga sola l'una rubava spazio all'altra: adesso stanno incolonnate. */ .gu { display:flex; align-items:flex-start; gap:10px; padding:11px 18px; border-top:1px solid var(--soft); } .gu:first-child { border-top:0; } .gu-c { flex:1; min-width:0; } .gu input { display:block; width:100%; border:0; background:none; outline:none; font-family:inherit; color:var(--ink); padding:3px 0; } .gu .gu-t { font-size:14.5px; font-weight:800; letter-spacing:-.01em; } .gu .gu-v { font-size:13px; color:var(--gray); } .gu .gu-t::placeholder { font-weight:600; } .gu button { flex:0 0 auto; width:32px; height:32px; margin-top:2px; border-radius:11px; border:1px solid var(--line); background:var(--soft); color:var(--warn); font-weight:800; font-size:12px; } /* ---- IL MIO ALLENAMENTO: la scheda del coach, letta dentro casa ---- */ .mio-a { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; } .mio-spiega { margin-top:8px; font-size:12.5px; line-height:1.55; } .mio-vuoto { background:var(--scheda); border-radius:22px; padding:26px 22px; box-shadow:var(--e3); text-align:center; } .mio-vuoto b { display:block; font-size:15.5px; font-weight:800; margin-bottom:6px; } .mio-vuoto span { display:block; font-size:13.5px; color:var(--gray); line-height:1.6; } #meCorpo { display:flex; flex-direction:column; gap:22px; } .mio-g { border-radius:22px; box-shadow:var(--e3); overflow:hidden; border-top:2px solid color-mix(in srgb, var(--accento) 42%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accento) 9%, transparent) 0%, color-mix(in srgb, var(--accento) 3.5%, transparent) 44%, color-mix(in srgb, var(--accento) 1%, transparent) 76%, transparent 100%) no-repeat top / 100% 150px, var(--scheda); } .mio-gh { padding:15px 18px 13px; display:flex; align-items:center; gap:10px; } .mio-gn { flex:0 0 auto; width:27px; height:27px; border-radius:9px; display:grid; place-items:center; background:var(--accento); color:var(--su-accento); font-size:13px; font-weight:800; } .mio-gt { min-width:0; } .mio-gt b { display:block; font-size:16px; font-weight:800; letter-spacing:-.01em; } .mio-gt i { display:block; font-style:normal; font-size:12px; color:var(--gray); margin-top:2px; } .mio-e { display:flex; align-items:flex-start; gap:11px; padding:11px 18px; border-top:1px solid var(--soft); } .mio-en { flex:0 0 auto; width:21px; height:21px; margin-top:2px; border-radius:7px; background:var(--soft); color:var(--gray); display:grid; place-items:center; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; } .mio-eb { flex:1; min-width:0; } .mio-eb b { display:block; font-size:15.5px; font-weight:700; letter-spacing:-.005em; } .mio-eb span { display:block; font-size:12.5px; color:var(--gray); margin-top:2px; } .mio-lg { background:var(--scheda); border-radius:22px; box-shadow:var(--e3); padding:16px 18px; } .mio-lg > b { display:block; font-size:14.5px; font-weight:800; margin-bottom:4px; } .mio-lr { display:flex; gap:12px; padding:9px 0; border-top:1px solid var(--soft); font-size:13.5px; } .mio-lr > b { flex:0 0 34%; font-weight:800; } .mio-lr > span { flex:1; min-width:0; color:var(--gray); } /* I GIORNI. Erano tre carte quasi attaccate e con lo stesso identico colore: da lontano sembravano un blocco unico. Adesso fra l'uno e l'altro c'è aria vera, e ogni giorno comincia con una sfumatura che parte dal bordo alto e si spegne scendendo — l'occhio capisce dove finisce uno e comincia l'altro. */ #bDays { display:flex; flex-direction:column; gap:26px; margin-bottom:16px; } /* la sfumatura non sta più solo sulla testata: parte dal bordo alto della carta e scende dentro i primi esercizi, così lo stacco fra un giorno e l'altro si vede anche con la coda dell'occhio */ .gio { border-radius:22px; box-shadow:var(--e3); overflow:hidden; border-top:2px solid color-mix(in srgb, var(--accento) 42%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accento) 9%, transparent) 0%, color-mix(in srgb, var(--accento) 3.5%, transparent) 44%, color-mix(in srgb, var(--accento) 1%, transparent) 76%, transparent 100%) no-repeat top / 100% 150px, var(--scheda); } .gio-h { padding:15px 18px 13px; } .gio-h1 { display:flex; align-items:center; gap:10px; } .gio-n { flex:0 0 auto; width:27px; height:27px; border-radius:9px; display:grid; place-items:center; background:var(--accento); color:var(--su-accento); font-size:13px; font-weight:800; letter-spacing:-.01em; } .gio-t { flex:1; min-width:0; border:0; background:none; outline:none; font-family:inherit; font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--ink); padding:0; } .gio-h button { flex:0 0 auto; width:30px; height:30px; border-radius:10px; border:1px solid var(--line); background:var(--soft); color:var(--gray); font-weight:800; font-size:12px; } .gio-h2 { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px; padding-left:37px; } /* «che cosa si allena», «recupero» e «in piu'» sembravano scritte, non caselle da riempire: nessuno le toccava. Adesso hanno un riquadro, come tutti gli altri campi del gestionale. */ .gio-h2 input { border:1px solid var(--filo); background:var(--campo); border-radius:10px; outline:none; font-family:inherit; font-size:12.5px; color:var(--ink); padding:6px 9px; transition:border-color .16s ease, background .16s ease; } .gio-h2 input::placeholder { color:color-mix(in srgb, var(--gray) 80%, transparent); } .gio-h2 input:focus { border-color:color-mix(in srgb, var(--accento) 55%, transparent); background:var(--scheda); } .gio-sub { flex:1; min-width:110px; } .gio-rec { width:96px; } .gio-nota { flex:1; min-width:100px; } .gio-h2 .sep { display:none; } .ese { display:flex; align-items:flex-start; gap:10px; padding:11px 16px 11px 14px; border-top:1px solid var(--soft); } .ese-n { flex:0 0 auto; width:21px; height:21px; margin-top:3px; border-radius:7px; background:var(--soft); color:var(--gray); display:grid; place-items:center; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; } .ese-b { flex:1; min-width:0; } .ese-nome { width:100%; border:0; background:none; outline:none; font-family:inherit; font-size:15.5px; font-weight:700; color:var(--ink); padding:1px 0 3px; letter-spacing:-.005em; display:block; resize:none; overflow:hidden; line-height:1.25; } .ese-nome::placeholder { font-weight:600; color:color-mix(in srgb, var(--gray) 65%, transparent); } .ese-d { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .ese-d .dato { display:inline-flex; align-items:center; gap:1px; background:var(--soft); border-radius:9px; padding:3px 8px; font-size:12.5px; font-weight:700; color:var(--ink); } .ese-d .dato em { font-style:normal; color:var(--gray); padding:0 1px; } .ese-d .dato small { font-size:10.5px; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:.04em; margin-right:3px; } .ese-d .dato input { border:0; background:none; outline:none; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--ink); padding:0; text-align:center; font-variant-numeric:tabular-nums; } .ese-d .d-ser { width:22px; } .ese-d .d-rip { width:38px; } .ese-d .d-rir { width:20px; } /* la nota sotto l'esercizio: stesso trattamento, un riquadro che si vede */ .ese-d .d-nota { flex:1; min-width:110px; border:1px solid var(--filo); background:var(--campo); border-radius:9px; outline:none; font-family:inherit; font-size:12.5px; color:var(--ink); padding:4px 9px; transition:border-color .16s ease, background .16s ease; display:block; resize:none; overflow:hidden; line-height:1.25; } .ese-d .d-nota::placeholder { color:color-mix(in srgb, var(--gray) 80%, transparent); } .ese-d .d-nota:focus { border-color:color-mix(in srgb, var(--accento) 55%, transparent); background:var(--scheda); } .ese-d .d-vid { max-width:200px; text-overflow:ellipsis; border:0; background:none; outline:none; font-family:inherit; font-size:12px; color:var(--accento-testo); font-weight:600; padding:3px 0; } .ese-d .d-vid.vuoto { color:color-mix(in srgb, var(--gray) 70%, transparent); font-weight:500; } .ese-a { flex:0 0 auto; display:flex; gap:2px; margin-top:1px; transition:opacity var(--fast) ease; } .ese-a button { width:27px; height:27px; border-radius:9px; border:0; background:none; color:var(--grigio); font-size:12px; font-weight:800; cursor:pointer; } .ese-a button:hover { background:var(--soft); } .ese-a .del:hover, .ese-a .del:focus-visible { color:var(--pericolo); } /* Sul telefono i tre comandi erano da 27 px con 2 px di spazio: la ✕ che cancella l'esercizio stava a un dito da «sposta giu'». Piu' grandi, piu' staccati, e quello che cancella un po' lontano dagli altri due. */ @media (max-width:720px){ .ese-a { gap:4px; } .ese-a button { width:36px; height:36px; font-size:14px; } .ese-a .del { margin-left:8px; } } @media (hover:hover) and (pointer:fine) { .ese-a { opacity:0; } .ese:hover .ese-a, .ese:focus-within .ese-a { opacity:1; } } .addrow.addday { margin:0 0 14px; width:100%; } #pg-builder { padding-bottom:82px; } .bfoot.sticky { position:sticky; bottom:10px; z-index:20; background:color-mix(in srgb, var(--scheda) 88%, transparent); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border:1px solid var(--line); border-radius:20px; padding:9px; box-shadow:var(--e3); } .bfoot.sticky .btn { flex:1; justify-content:center; } #pg-builder.con-proposta .bfoot.sticky { display:none; } /* quando c'è una proposta, sotto la faccia ci va la scheda: la casella per chiedere, le pastiglie dei modelli e l'istruzione si tolgono di mezzo. Non spariscono per sempre — tornano appena la proposta viene applicata o scartata, che è quando servono di nuovo. */ #pg-builder.con-proposta .bdet-r, #pg-builder.con-proposta .bdet-s, #pg-builder.con-proposta .bdet-come { display:none; } #pg-builder.con-proposta .bdet-h { margin-bottom:2px; } #bProposta:not(:empty) { margin-top:12px; } /* dentro il riquadro la proposta non ha bisogno della sua scatola: la scatola è già quella con la faccia in cima */ #pg-builder.con-proposta .bdet .prop { box-shadow:none; background:none; border-radius:0; margin-bottom:0; } /* kpi (statistiche) */ .grid4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; } .kpi { background:var(--scheda); border-radius:20px; padding:16px 18px; box-shadow:var(--e3); } .kpi .n { font-size:28px; font-weight:900; letter-spacing:-.02em; } .kpi .n.orange { color:var(--accento-testo); } .kpi .l { font-size:11px; color:var(--gray); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; } .kpi .d { font-size:11px; font-weight:700; margin-top:4px; } .kpi .l { text-transform:none; letter-spacing:0; font-size:12px; } .kdelta { font-size:12px; font-weight:800; vertical-align:3px; margin-left:3px; } .kdelta.su { color:var(--ok); } .kdelta.giu { color:var(--warn); } /* ---- i disegni delle statistiche ---- Nessuna libreria: SVG e CSS, così pesano niente e prendono i colori del tema che il trainer ha scelto. */ .statdue { display:flex; align-items:center; gap:20px; flex-wrap:wrap; } /* la colonna delle rate quando si aprono tutte: si scorre dentro, non allunga la pagina all'infinito */ /* la ✕ in alto a destra delle finestre */ .chiudi-x { position:absolute; top:10px; right:10px; z-index:3; width:34px; height:34px; border:0; border-radius:50%; background:var(--soft); color:var(--gray); display:grid; place-items:center; cursor:pointer; } .chiudi-x svg { width:16px; height:16px; } .chiudi-x:hover { background:var(--line); color:var(--ink); } .overlay > .modal { position:relative; } .overlay > .modal > h3:first-of-type { padding-right:38px; } /* con una finestra aperta, dietro non si scorre */ body.finestra-aperta { overflow:hidden; } /* .rate-scorri non esiste piu': niente riquadro che scorre dentro il riquadro. Vedi il commento su apriColonna. */ .mostra-tutte { width:100%; justify-content:center; margin-top:8px; } /* FILTRI DELLE RATE. Con una colonna sola scelta, la lista si allunga per intero: niente tetto di otto righe e niente riquadro che scorre dentro il riquadro, che era la cosa che dava fastidio. */ .filtri-rate { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; } /* 5 settembre 2026: rettangoli, e il filtro scelto si alza invece di riempirsi di accento. Stessa regola dei filtri dei clienti. */ /* 12 settembre 2026: i quattro filtri erano larghi 510 px su uno schermo da 390, quindi «Pagate 23» finiva da sola a capo, sbilanciata a sinistra. Adesso si dividono la riga come i filtri dei clienti: sul telefono due e due, sul computer tutti e quattro in fila. */ /* min-width 124: a 104 ce ne stavano TRE su una riga da 366 e il quarto restava da solo, larghissimo. Sopra i 124 la riga del telefono ne tiene due, quindi vengono due e due; sul computer, dove c'e' spazio, quattro. */ .filtri-rate button { flex:1 1 0; min-width:124px; display:flex; align-items:center; justify-content:center; border:1px solid var(--filo); background:var(--scheda); color:var(--gray); border-radius:var(--r-s); padding:8px 10px; font-family:inherit; font-size:13px; font-weight:600; } .filtri-rate button.on { background:var(--rialzo); border-color:var(--filo-forte); color:var(--inchiostro); font-weight:700; } .colrate.sola { flex:1 1 100% !important; min-width:100% !important; } /* il registro a mano: prima era una riga grigia che nessuno apriva */ .reg-testa { list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:12px; background:var(--scheda); border-radius:18px; padding:14px 16px; margin:4px 0 12px; box-shadow:var(--e3); } .reg-testa::-webkit-details-marker { display:none; } .reg-ico { flex:0 0 34px; height:34px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb, var(--accento) 14%, transparent); color:var(--accento-testo); } .reg-ico svg { width:18px; height:18px; } .reg-txt { flex:1; min-width:0; } .reg-txt b { display:block; font-size:14.5px; font-weight:800; } .reg-txt i { display:block; font-style:normal; font-size:12.5px; color:var(--gray); line-height:1.5; margin-top:3px; } .reg-freccia { flex:0 0 auto; font-size:19px; color:var(--gray); transition:transform var(--fast) ease; margin-top:4px; } #registroManuale[open] .reg-freccia { transform:rotate(90deg); } .graf-anello { flex:0 0 132px; width:132px; height:132px; } .graf-anello .an-n { font-size:34px; font-weight:900; fill:var(--ink); letter-spacing:-.03em; } .statdue-t { flex:1; min-width:190px; } .statdue-t p { margin:0 0 10px; font-size:14px; line-height:1.55; } .statdue-t .rig { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gray); padding:5px 0; border-top:1px solid var(--soft); } .statdue-t .rig:first-of-type { border-top:0; } .statdue-t .rig i { flex:0 0 9px; width:9px; height:9px; border-radius:3px; } .statdue-t .rig b { margin-left:auto; color:var(--ink); font-variant-numeric:tabular-nums; } .statdue-t .rig.forte b { color:var(--warn); } .graf-col { position:relative; display:flex; align-items:flex-end; gap:6px; height:186px; padding-top:4px; } /* Tre fasce fisse: il numero sopra, la colonna che cresce nello spazio che avanza, l'etichetta sotto. Prima erano tre pezzi in fila con la colonna alta una percentuale di TUTTA la casella: le colonne alte spingevano l'etichetta oltre il bordo, ed e' per questo che l'anno restava tagliato. */ .graf-col .gc { flex:1; min-width:0; display:grid; grid-template-rows:auto 1fr auto; justify-items:center; align-items:end; height:100%; gap:5px; } .graf-col .gc b { font-size:11px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; } .graf-col .gc i { font-style:normal; font-size:11px; color:var(--gray); font-weight:600; } /* LE COLONNE DEL GRAFICO (5 settembre 2026). Otto colonne di neon pieno erano un muro verde: il mese buono e il mese scarso avevano lo stesso peso visivo, e la forma del grafico — che è l'informazione — si perdeva dentro il colore. Adesso le colonne sono tenui e SOLO L'ULTIMA — il mese in corso, quello che si guarda — è nell'accento pieno. La differenza fra i mesi si legge dall'altezza, che è il mestiere di un grafico a colonne. */ .graf-col .gc-b { display:block; width:100%; max-width:46px; height:var(--h); align-self:end; border-radius:6px 6px 3px 3px; background:color-mix(in srgb, var(--accento) 30%, transparent); transform-origin:bottom; } .graf-col .gc:last-child .gc-b{ background:var(--accento); } @media (prefers-reduced-motion: no-preference){ .page.on .graf-col .gc-b { animation:cresci .5s cubic-bezier(.16,1,.3,1) both; } } @keyframes cresci { from{ transform:scaleY(0) } to{ transform:scaleY(1) } } .gc i { white-space:nowrap; } @media (max-width:560px){ /* 6 settembre 2026. Le etichette erano GIRATE di 45 gradi dentro una casella larga zero: sul telefono si accavallavano una sull'altra e non si capiva a quale colonna appartenessero. Adesso stanno dritte sotto la loro colonna, e per farcele stare l'anno va a capo invece che di fianco. I numeri sopra le colonne, in 40 pixel, non ci stavano: sul telefono si scrivono corti (1,2k) — il valore per intero e' nella riga sotto. */ /* due righe di etichetta (mese e anno) vogliono un po' d'aria in piu': con l'altezza di prima l'anno restava tagliato dal bordo */ .graf-col { gap:3px; padding-bottom:2px; height:212px; } .graf-col .gc { gap:4px; } .graf-col .gc i { font-size:10px; transform:none; display:block; width:100%; margin:0; text-align:center; overflow:hidden; text-overflow:ellipsis; line-height:1.25; } .graf-col .gc i .an { display:block; font-size:9px; opacity:.75; } .graf-col .gc b { font-size:0; } .graf-col .gc b::after { content:attr(data-corto); font-size:9.5px; font-weight:700; letter-spacing:-.01em; } } .gc-media { position:absolute; left:0; right:0; bottom:calc(24px + var(--media)); border-top:1px dashed color-mix(in srgb, var(--gray) 55%, transparent); pointer-events:none; } /* 6 settembre 2026: l'etichetta «media € 500» stava appesa dentro il grafico e finiva sopra il numero di una colonna. Adesso resta solo la riga tratteggiata, e quanto vale la media si legge nella riga sotto. */ .graf-nastro { display:flex; height:16px; border-radius:99px; overflow:hidden; background:var(--soft); gap:2px; } .graf-nastro span { display:block; min-width:4px; } .graf-leg { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; } .graf-leg span { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--gray); } .graf-leg i { width:9px; height:9px; border-radius:3px; } .graf-leg b { color:var(--ink); font-variant-numeric:tabular-nums; } .graf-nota { margin-top:12px; display:flex; flex-wrap:wrap; gap:7px; } /* 5 settembre 2026: rettangoli di contorno come tutti gli altri bolli */ .pill-att, .pill-mal, .pill-ok { display:inline-block; border-radius:3px; padding:3px 8px; font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; background:none; border:1px solid; } .pill-att { color:var(--attenzione); border-color:color-mix(in srgb, var(--attenzione) 45%, transparent); } .pill-ok { color:var(--accento-testo); border-color:color-mix(in srgb, var(--accento) 42%, transparent); } .pill-mal { color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, transparent); } /* I NUMERI DEI CLIENTI, SENZA BARRA (6 settembre 2026). C'era un nastro pieno diviso fra attivi e conclusi. Jacopo: «quando la barra e' piena cosa succede, non puo' piu' avere clienti?». Ha ragione: una barra senza scala promette un tetto che non esiste. I clienti sono un conteggio, e un conteggio si scrive. */ .graf-cifre { display:flex; gap:26px; flex-wrap:wrap; margin:2px 0 4px; } .graf-cifre > div { display:flex; flex-direction:column; min-width:0; } .graf-cifre .c-n { font-family:var(--f-display); font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; } .graf-cifre .c-l { font-family:var(--f-mono); font-size:var(--lab-size); letter-spacing:var(--lab-track); text-transform:uppercase; color:var(--grigio); margin-top:2px; } .graf-due { display:flex; gap:18px; margin-top:10px; } .graf-due > div { display:flex; flex-direction:column; } .graf-due .c-n { font-size:21px; font-weight:900; letter-spacing:-.02em; } .graf-due .c-l { font-size:11.5px; color:var(--gray); } .d.up { color:var(--ok); } .d.warn { color:var(--warn); } /* video */ .vgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .vcard { background:var(--scheda); border-radius:20px; overflow:hidden; box-shadow:var(--e3); } .vthumb { aspect-ratio:16/9; display:grid; place-content:center; font-size:28px; background:linear-gradient(150deg,#232326,#141416); color:#fff; cursor:pointer; } .vcard .vb { padding:12px 14px; } .vcard b { display:block; font-size:13px; } .vcard span { font-size:11px; color:var(--gray); } .vcard .as { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; } /* automazioni (card bianche) */ .auto { display:flex; gap:14px; align-items:flex-start; background:var(--scheda); border-radius:20px; padding:16px 18px; margin-bottom:10px; box-shadow:var(--e3); } .auto .ic { flex:0 0 40px; height:40px; border-radius:14px; display:grid; place-content:center; font-size:17px; background:color-mix(in srgb, var(--accento) 15%, var(--scheda)); } .auto b { display:block; font-size:13px; } .auto p { font-size:13px; color:var(--gray); margin-top:2px; } .auto .sw { background:#D8D8DE; } .auto .sw.on { background:var(--ok); } table.pay { width:100%; border-collapse:collapse; background:var(--scheda); border-radius:20px; overflow:hidden; } .pay th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--gray); padding:13px 16px; background:var(--soft); } .pay td { padding:13px 16px; border-top:1px solid var(--soft); font-size:13px; } .pay-wrap { border-radius:20px; overflow:hidden; box-shadow:var(--e3); } .note-open { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.75); border-radius:14px; padding:12px 16px; font-size:13px; margin-top:14px; } /* builder su telefono: card, non tabella */ @media (max-width: 720px) { .bx thead { display: none; } .bx, .bx tbody { display: block; } .bx tbody tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); } .bx tbody tr:first-child { border-top: 0; } .bx td { display: block; width: auto !important; padding: 0 !important; } .bx td:nth-child(1) { grid-column: 1 / -1; } .bx td:nth-child(5) { grid-column: 1 / 3; } .bx td:nth-child(6) { grid-column: 3 / 4; justify-self: end; } .bx input, .bx select { width: 100%; } .brow { flex-wrap: wrap; } .brow > * { min-width: calc(50% - 6px) !important; flex: 1 !important; } /* il compilatore dal telefono: stessa forma del computer, solo più stretta. Le caselle a 16px perché sotto quella misura iPhone ingrandisce la pagina appena tocchi un campo, e poi resta storta. */ .bhead, .bdet, .gio, .bguida, .prop { border-radius:18px; } .bh-tit { font-size:18px; } /* Durata e Modelli, uno sopra l'altro: affiancati su 390 pixel la parola "settimane" finiva tagliata a metà. */ .bh-meta { grid-template-columns:1fr; gap:12px; } .bh-fin input, .bh-f select { font-size:16px; } .bh-fin i { font-size:14px; } /* nel riquadro delle linee guida il conteggio scendeva a rubare la riga al titolo: sul telefono si toglie, tanto lo si legge aprendolo */ .bguida > summary > span#bGuideN { display:none; } .gu input { font-size:16px; } .gu .gu-v { font-size:14px; } .bh-cli select { font-size:16px; } .bdet textarea { font-size:16px; } /* LA RIGA DELL'ESERCIZIO SUL TELEFONO, 12 settembre 2026. I tre comandi (su, giu, elimina) si prendono 112px sulla destra: alla riga dei numeri ne restavano 190, quindi il menu del video finiva a capo da solo e la riga cresceva di un piano. Adesso la riga e' una griglia: i comandi stanno accanto al NOME (prima riga), e la riga dei numeri si prende tutta la larghezza (seconda riga), dove pastiglie e video stanno in fila e la nota si mette sotto. display:contents su .ese-b serve a far diventare nome e numeri figli della griglia: se no resterebbero chiusi nel loro riquadro. */ .ese { padding:11px 12px 11px 11px; display:grid; grid-template-columns:21px minmax(0,1fr) auto; column-gap:10px; row-gap:6px; align-items:start; } .ese-b { display:contents; } .ese-n { grid-column:1; grid-row:1; } .ese-nome { grid-column:2; grid-row:1; } .ese-d { grid-column:2 / span 2; grid-row:2; } .ese-nome { font-size:16px; } .ese-d .dato input { font-size:13px; } /* La nota si prende una riga sua: a 42%% della larghezza il testo non ci stava. Per non far crescere la riga di un piano, il menu del video sale accanto alle pastiglie — «4×8 · rir 2 ........ nessun video» — e la nota va sotto (order:2), dove ha tutta la larghezza per andare a capo. */ .ese-d .d-nota { font-size:13px; flex:1 1 100%; min-width:0; order:2; } /* Una nota ancora da scrivere non deve occupare due righe per far vedere l'invito: finche' c'e' solo il segnaposto sta su una riga e quello che non ci sta resta fuori. Appena si scrive, va a capo e cresce. */ .ese-d .d-nota:placeholder-shown { white-space:nowrap; overflow:hidden; } /* il menu del video sta in fila con le pastiglie: se prende troppa larghezza va a capo da solo e la riga cresce di un piano. Quello che non ci sta si taglia coi puntini — il titolo intero si legge aprendolo. */ .ese-d .d-vid { font-size:12px; flex:0 1 auto; min-width:0; max-width:46%; margin-left:auto; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ese-a { opacity:1; grid-column:3; grid-row:1; margin-top:0; } .ese-a button { width:32px; height:32px; } .gio-t { font-size:16px; } /* sul telefono la riga "che cosa si allena · recupero · in più" andava a capo lasciando il rientro sotto la lettera: qui parte da sinistra */ .gio-h2 { padding-left:0; gap:4px 8px; } .gio-sub { min-width:88px; } .gu .gu-t { flex:0 0 38%; } .gu input { font-size:16px; } .bfoot.sticky { bottom:calc(78px + var(--sab)); flex-wrap:nowrap; } /* dal telefono i due tasti di lato restano solo icona: "Salva modello" su due righe faceva una barra alta il doppio */ .bfoot.sticky .btn { padding-left:12px; padding-right:12px; font-size:13.5px; white-space:nowrap; } .bfoot.sticky .btn.ghost { flex:0 0 46px; padding:0; } .bfoot.sticky .btn.ghost .ib { margin:0; width:18px; height:18px; } .bfoot.sticky .btn.ghost .et { display:none; } #pg-builder { padding-bottom:96px; } } /* 10. desktop: larghezza contenuta */ @media (min-width: 1200px) { .page { max-width: 1060px; margin: 0 auto; } } .ib { width:16px; height:16px; vertical-align:-3px; margin-right:5px; } .todo .ic .ib, .adem .ib, .auto .ic .ib { width:18px; height:18px; margin:0; vertical-align:0; } /* Il riquadro di avviso. Aveva ancora il bordo crema e il testo arancione scuro della versione di Mattia: su questo fondo faceva 2,5:1 — cioe' non si leggeva. Adesso prende i colori del tema, come tutto il resto, e il bordo e' l'accento smorzato invece di un terzo colore. */ .soon { background:color-mix(in srgb, var(--accento) 12%, var(--scheda)); border:1px solid color-mix(in srgb, var(--accento) 32%, transparent); color:var(--accento-testo); padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:14px; } .soon b { color:var(--inchiostro); } .cchat { max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:2px 0 8px; } /* SUL TELEFONO LA CONVERSAZIONE RIEMPIE LO SCHERMO. Prima messaggi e casella stavano appiccicati in cima e sotto restavano due terzi di schermo neri: sembrava una pagina rotta, e la casella per scrivere finiva a meta' altezza invece che dove la cerca il pollice. */ @media (max-width:899px){ /* Il riquadro lo accende il codice con style="display:block", che vince su qualunque regola di qui: quindi non si prova a farlo diventare flex — si fa crescere la conversazione, che e' quello che serve. */ #chatConv .cchat { max-height:none !important; min-height:calc(100dvh - var(--sat) - var(--sab) - 420px); justify-content:flex-end; } /* i due tasti in cima si stringono, se no il nome della persona finisce tagliato a meta' — ed e' il nome di una persona */ .convhead .btn.sm { font-size:11.5px; padding:6px 10px; } } .cmsg { max-width:78%; padding:9px 13px; border-radius:14px; } .cmsg p { margin:0; font-size:13px; line-height:1.45; } .cmsg .cmt { display:block; font-family:var(--f-mono); font-size:10px; color:var(--grigio-tenue); margin-top:4px; } .cmsg .ces { display:block; font-family:var(--f-mono); font-size:var(--lab-size); font-weight:500; text-transform:uppercase; letter-spacing:var(--lab-track); color:var(--grigio); margin-bottom:3px; } /* LE BOLLE, 6 settembre 2026. Il messaggio del coach era un rettangolo di accento pieno. In una conversazione vera sono venti rettangoli: mezza schermata di verde acceso, esattamente quello che il sistema visivo nuovo vieta («mai come fondo di aree grandi»). E il verde pieno non stava dicendo niente che non dicesse gia' il lato: la tua sta a destra, la sua a sinistra. Adesso la tua e' una superficie rialzata con un filo d'accento; la sua e' piatta. Si distinguono al primo colpo d'occhio e il verde resta un filo. */ .cmsg.mine { align-self:flex-end; background:var(--rialzo); color:var(--ink); border:1px solid color-mix(in srgb, var(--accento) 38%, transparent); border-bottom-right-radius:4px; } .cmsg.his { align-self:flex-start; background:var(--campo); color:var(--ink); border:1px solid var(--filo); border-bottom-left-radius:4px; } .csend { display:flex; gap:8px; } .csend input { flex:1; padding:11px 14px; border:1px solid var(--line); border-radius:999px; font:inherit; font-size:13px; outline:none; } /* Il tasto per mandare resta verde: e' l'azione principale della schermata, ed e' l'unica. Via il bagliore attorno, che era la vecchia intensita'. */ .csend button { flex:0 0 42px; height:42px; border-radius:50%; border:0; cursor:pointer; color:var(--su-accento); background:var(--accento); box-shadow:none; } /* IL CONTATORE DEI MESSAGGI DA LEGGERE. Era una pastiglia tonda rosso cremisi, un colore che nel sistema non esiste e che vuol dire «in ritardo»: un messaggio non letto non e' un ritardo, e' una cosa da fare. Adesso e' il rettangolo dell'accento, come tutti gli altri bolli, e la cifra e' in mono. */ /* 13 SETTEMBRE — «hidden» DA SOLO PERDE CONTRO «display». Il bollo del conteggio veniva spento con l'attributo hidden, che il browser applica con una regola sua (display:none): una regola d'autore con display:inline-grid, scritta qui, vince. Risultato: il tasto in Clienti diceva «Dalla posta 0» anche senza niente da guardare. Il tasto resta — e' l'unico posto dove il trainer trova il suo indirizzo bia-@ e le istruzioni per l'inoltro, e serve proprio quando non e' ancora arrivato niente — ma lo zero se ne va. La stessa trappola vale per ogni classe che imposta display: si spegne esplicitamente, non si spera. */ .nmsg[hidden], .tbadge[hidden]{ display:none; } .nmsg { display:inline-grid; place-content:center; min-width:17px; height:17px; padding:0 5px; margin-left:6px; border-radius:4px; background:var(--accento); color:var(--su-accento); font-family:var(--f-mono); font-size:10.5px; font-weight:600; } .cl .av img, .chead .av img { width:100%; height:100%; object-fit:cover; display:block; } .cl .av { overflow:hidden; } .swi { width:46px; height:27px; border-radius:999px; border:0; cursor:pointer; background:rgba(255,255,255,.22); position:relative; transition:background .18s ease; flex:0 0 46px; } .swi::after { content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transform:translate3d(0,0,0); transition:transform .18s ease; box-shadow:var(--e1); } .swi.on { background:var(--orange); } .swi.on::after { transform:translate3d(19px,0,0); } .spbar { height:10px; border-radius:999px; background:var(--soft); overflow:hidden; } .spbar i { display:block; width:100%; height:100%; border-radius:999px; background:var(--orange); transform:scaleX(var(--p, 0)); transform-origin:left center; transition:transform .5s ease; } /* L'ELENCO DELLE CONVERSAZIONI, RIFATTO IL 6 SETTEMBRE 2026. Era venti schede staccate, ognuna col suo tondo colorato a caso — rosa, turchese, viola — e sotto ogni nome la scritta «non ha mai scritto» ripetuta venti volte. Su un telefono ci stavano sei righe. Le righe qui sono tutte uguali: nome, ultima frase, quando. Il sistema visivo dice che righe omogenee dentro un riquadro si separano con una righina di un pixel — le schede staccate servono dove ogni riga porta un segnale suo, come il filo di stato nell'elenco Clienti. Qui non c'e', e infatti erano venti riquadri per niente. */ .convlist { display:flex; flex-direction:column; gap:0; background:var(--scheda); border:1px solid var(--filo); border-radius:16px; overflow:hidden; } /* --- messaggi: due colonne sul computer --- */ .chat-conta { font-size:12.5px; color:var(--gray); padding:2px 4px 10px; } .chat-conta b { color:var(--ink); } .conv-sep { font-family:var(--f-mono); font-size:var(--lab-size); font-weight:500; text-transform:uppercase; letter-spacing:var(--lab-track); color:var(--grigio-tenue); padding:14px 14px 8px; background:var(--scheda); border-top:1px solid var(--filo); } /* la riga di chi non ha mai scritto e' vuota: lo dice gia' il titolo della sezione, e ripeterlo venti volte e' rumore, non informazione */ .conv .ct span.mai { display:none; } #chatVuoto { display:none; } @media (min-width:900px){ /* .page.on{display:block} è più forte di .chat-due: serve dirlo con la stessa forza, altrimenti la conversazione finisce sotto l'elenco */ .page.chat-due.on { display:grid; grid-template-columns:340px 1fr; gap:18px; align-items:start; } .chat-due > #chatList { display:block !important; max-height:calc(100dvh - 120px); overflow-y:auto; padding-right:4px; } .chat-due > #chatConv { display:block; background:var(--scheda); border-radius:20px; padding:16px 18px; box-shadow:var(--e3); } .chat-due > #chatConv .back { display:none; } .chat-due > #chatVuoto { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:var(--scheda); border-radius:20px; box-shadow:var(--e3); min-height:340px; padding:30px; text-align:center; } .chat-due > #chatVuoto svg { width:44px; height:44px; color:color-mix(in srgb, var(--accento) 55%, transparent); } .chat-due > #chatVuoto b { font-size:15px; font-weight:800; } .chat-due > #chatVuoto span { font-size:13px; color:var(--gray); max-width:280px; line-height:1.5; } .chat-due #cvBox { max-height:calc(100dvh - 420px) !important; } } .conv { position:relative; display:flex; align-items:center; gap:11px; padding:10px 14px; border:0; border-top:1px solid var(--filo); border-radius:0; background:transparent; color:var(--ink); cursor:pointer; text-align:left; font-family:inherit; transition: var(--fast); width:100%; } .conv:first-child, .conv-sep + .conv { border-top:0; } .conv:hover { background:var(--rialzo); } /* CHI ASPETTA UNA RISPOSTA. Prima era tutta la riga tinta di verde: venti righe e la meta' dello schermo diventava accento. Adesso e' un filetto verde a sinistra e il nome in chiaro — si trova con la coda dell'occhio, e il verde resta sotto il 5% dei pixel. */ .conv.nuovo { background:var(--rialzo); } .conv.nuovo::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; border-radius:0 2px 2px 0; background:var(--accento); } .conv.aperta { background:var(--rialzo); } .conv.aperta::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accento) 40%, transparent); } /* il verde pieno con le lettere bianche sopra sparava troppo: fondo smorzato e lettere scure, che si leggono e non gridano */ /* stessi tondi dell'elenco Clienti: tinte diverse per distinguere le persone, mai due uguali attaccate. Qui erano tutti verdi pieni — venti conversazioni, venti cerchi identici: la stessa pagina di verde che Jacopo aveva bocciato in Clienti. */ /* IL TONDO COLORATO A CASO E' LA COSA PIU' «FATTA CON L'IA» DI TUTTA LA PAGINA. Sei tinte pastello assegnate dall'iniziale del nome non dicono niente di quella persona: e' decorazione che sembra informazione. Resta un riquadro neutro con le iniziali in mono — e se il cliente ha messo la foto, la foto, che quella s'e' scelta lui. */ .conv .av { flex:0 0 38px; width:38px; height:38px; border-radius:9px; overflow:hidden; display:grid; place-content:center; background:var(--campo); border:1px solid var(--filo); color:var(--grigio); font-family:var(--f-mono); font-size:11.5px; font-weight:500; letter-spacing:.04em; } .conv .av img { width:100%; height:100%; object-fit:cover; } .conv .ct { flex:1; min-width:0; } .conv .ct b { display:block; font-family:var(--f-display); font-size:14.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .conv .ct span { display:block; font-size:12.5px; color:var(--grigio); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .conv.nuovo .ct span { color:var(--ink); } .conv .cr { display:flex; flex-direction:column; align-items:flex-end; gap:5px; } .conv .cr i { font-family:var(--f-mono); font-size:10.5px; color:var(--grigio-tenue); font-style:normal; } /* IL NOME ANDAVA A CAPO. «Alessio / Costantini» su due righe, perche' i due tasti a destra si prendevano lo spazio e il blocco del nome non poteva stringersi (senza min-width:0 un figlio flex non scende mai sotto il suo contenuto: la stessa regola che il 5 settembre ha fatto sbordare le griglie e costato una pubblicazione). */ .convhead { display:flex; align-items:center; gap:12px; padding:10px 0 14px; } .convhead > div:not(.av) { flex:1 1 auto; min-width:0; } .convhead > div:not(.av) b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .convhead .btn { flex:0 0 auto; } /* stesso riquadro neutro dell'elenco: il tondo verde pieno con le iniziali dentro era l'unica cosa accesa in cima alla conversazione, e non diceva niente che il nome accanto non dicesse gia' */ .convhead .av { width:40px; height:40px; border-radius:10px; overflow:hidden; display:grid; place-content:center; background:var(--campo); border:1px solid var(--filo); color:var(--grigio); font-family:var(--f-mono); font-size:12px; font-weight:500; letter-spacing:.04em; } .convhead .av img { width:100%; height:100%; object-fit:cover; } .convhead b { display:block; font-size:15px; font-weight:800; } .convhead span { font-size:11px; color:var(--muted); } .tbadge { position:absolute; top:4px; right:calc(50% - 15px); min-width:16px; height:16px; padding:0 4px; border-radius:10px; background:#E11D48; color:#fff; font-size:11px; font-weight:800; display:grid; place-content:center; } .biarow { display:flex; align-items:center; gap:14px; padding:10px 0; border-top:1px solid var(--line); } .biarow:first-child { border-top:0; } .biarow .bl { flex:0 0 150px; display:flex; flex-direction:column; gap:1px; } .biarow .bl b { font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; } .biarow .bl span { font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.02em; } .biarow .bl i { font-size:11px; font-weight:700; font-style:normal; } .biarow .bsvg { flex:1; height:74px; min-width:0; } .biafoot { margin-top:8px; font-size:11px; color:var(--muted); text-align:right; } textarea.notes { width:100%; border:1px solid var(--line); border-radius:10px; padding:12px; font-size:13px; min-height:90px; outline:none; } /* ===== LE CONFERME ===== Fino al 12 settembre 2026 le diciassette domande prima di una cosa che non si torna indietro le faceva il browser, con confirm(): finestra di sistema, carattere di sistema, due tasti chiamati «OK» e «Annulla». Tre cose non andavano, e la terza e' quella che conta: · «OK» non dice cosa succede quando lo premi; · su iPhone, con l'app installata sulla Home, la finestra di sistema compare in cima allo schermo, lontana dal pollice; · la piu' pericolosa e la piu' innocua sono identiche — cancellare per sempre un cliente e pubblicare una scheda hanno lo stesso vestito. Questa finestra ha il nome dell'azione sul tasto, sta dove arriva il pollice, e quando la cosa e' irreversibile il tasto e' rosso. Ha le sue classi, fuori da «.overlay»: le conferme si aprono SOPRA una finestra gia' aperta (eliminare un modello dall'elenco dei modelli), e closeModals() le chiuderebbe tutte e due. */ .chiedi-velo { position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:16px; background:color-mix(in srgb, var(--nero-pece) 72%, transparent); } .chiedi-velo.on { display:flex; } .chiedi-box { width:min(420px,100%); background:var(--scheda); border:1px solid var(--filo); border-radius:20px; padding:22px 22px 18px; transform:translateY(8px); opacity:0; transition:transform .24s ease, opacity .14s ease; } .chiedi-velo.on .chiedi-box { transform:none; opacity:1; } .chiedi-box h4 { font-family:var(--f-display); font-size:19px; line-height:1.25; margin:0 0 8px; color:var(--inchiostro); } .chiedi-box p { margin:0; font-size:13.5px; line-height:1.55; color:var(--grigio); white-space:pre-line; } .chiedi-acts { display:flex; gap:8px; margin-top:20px; flex-wrap:wrap; } .chiedi-acts button { flex:1 1 120px; min-height:46px; border-radius:14px; border:1px solid transparent; font-family:inherit; font-size:13px; font-weight:800; cursor:pointer; padding:12px 14px; } .chiedi-no { background:transparent; border-color:var(--filo); color:var(--inchiostro); } .chiedi-alt { background:var(--campo); color:var(--inchiostro); } .chiedi-si { background:var(--accento); color:var(--su-accento); } /* ROSSO = FAI ATTENZIONE, ma leggibile. Il rosso pieno col testo bianco sopra dava 3:1 sui temi scuri — sotto il minimo che ci siamo dati. Qui il rosso sta nel testo e nel filo, con un velo dietro: si legge in tutti e settantaquattro i temi, e resta l'unica cosa rossa dello schermo. */ .chiedi-si.pericolo { background:color-mix(in srgb, var(--ritardo) 16%, transparent); border-color:color-mix(in srgb, var(--ritardo) 55%, transparent); color:var(--ritardo); } /* sul telefono sale dal basso, come il foglio di «Altro»: i tasti che contano stanno dove arriva il pollice, non in cima allo schermo */ @media (max-width:560px) { .chiedi-velo { align-items:flex-end; padding:0; } .chiedi-box { width:100%; border-radius:22px 22px 0 0; border-bottom:0; padding-bottom:calc(18px + var(--sab, 0px)); transform:translateY(100%); } } @media (prefers-reduced-motion: reduce) { .chiedi-box { transition:none; transform:none; opacity:1; } } /* ===== MODALI + TOAST ===== */ .overlay { position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(10,10,12,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .overlay.on { display:flex; } .modal { width:min(520px,100%); max-height:88vh; overflow-y:auto; background:var(--scheda); border-radius:20px; padding:24px; } /* i pezzi del sito hanno moduli veri: servono piu' larghi */ .modal.modal-largo { width:min(640px,100%); } /* la nota su dove finisce il logo, dentro «Nome e logo» */ .dove-va{ margin-top:18px; padding-top:15px; border-top:1px solid var(--line); font-size:13px; line-height:1.55; color:var(--gray); } .dove-va > b{ display:block; color:var(--ink); font-size:13px; font-weight:700; margin-bottom:7px; } .dove-va ul{ margin:0 0 11px; padding:0; list-style:none; } .dove-va li{ position:relative; padding:3px 0 3px 15px; } .dove-va li::before{ content:"·"; position:absolute; left:4px; color:var(--accento); font-weight:800; } .dove-va p{ margin:0 0 9px; } .dove-va b{ color:var(--ink); font-weight:650; } /* «Ho dimenticato la password»: un tasto che non sembri un tasto, sotto il modulo. Deve esserci ma non deve competere con «Entra». */ /* la schermata d'accesso ha una sua tavolozza scura, indipendente dal tema: qui il colore va scritto per esteso, se no vince la regola dei bottoni del gestionale e il testo esce quasi nero sul fondo nero. */ .login .scordata{ display:block; margin:14px auto 0; padding:6px 10px; border:0; background:none; color:rgba(255,255,255,.58); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.28); transition:color .18s ease, text-decoration-color .18s ease; } .login .scordata:hover{ color:var(--accento); text-decoration-color:color-mix(in srgb, var(--accento) 60%, transparent); } .dove-va .solo-tuo{ margin:0; padding:10px 12px; border-radius:12px; background:color-mix(in srgb, var(--accento) 9%, transparent); border:1px solid color-mix(in srgb, var(--accento) 22%, transparent); } .modal-largo .mact { display:flex; justify-content:flex-end; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); } .sito-pezzo[hidden]{ display:none; } #sitoPezzoCorpo .sito-pezzo{ display:block; } /* la barra dei tasti («＋ Percorso», «✨ Pronte»…): dentro la finestra e sopra la roba su cui lavorano, non nell'intestazione della tendina */ .sito-tasti{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; } #sitoPezzoCorpo > .sito-pezzo > *{ padding-left:0; padding-right:0; } .modal h3 { font-size:17px; font-weight:900; margin-bottom:4px; } .modal .msub { color:var(--gray); font-size:13px; margin-bottom:16px; } .mrowi { display:flex; gap:12px; align-items:baseline; padding:9px 0; border-top:1px solid var(--soft); font-size:13.5px; } .mrowi:first-of-type { border-top:0; } .mrowi b { flex:0 0 58px; color:var(--muted); font-size:12.5px; font-weight:700; } .mrowi span { flex:1; } .mrowi i { display:block; color:var(--muted); font-size:12.5px; margin-top:2px; } /* I FILTRI DEI CLIENTI. Ognuno porta il colore dello stato che filtra — lo stesso che si vede sul tondo delle iniziali e sulla targhetta della riga — e il numero di quanti sono. Un filtro che non ha nessuno resta grigio e non si preme: cliccarlo mostrava un elenco vuoto senza spiegare perché. */ .clfil { display:flex; gap:7px; margin:0 0 12px; flex-wrap:wrap; } /* 5 settembre 2026: rettangoli invece di pastiglie, e il filtro scelto non si riempie più di colore pieno — si alza su una superficie più chiara e tiene il suo colore nel testo. Prima «Tutti 20» era il blocco di neon più grande dello schermo, per dire una cosa che il grassetto dice già. */ .clfil button { flex:1 1 0; min-width:96px; padding:8px 9px; border-radius:var(--r-s); cursor:pointer; font:inherit; font-size:13px; font-weight:600; border:1px solid var(--line); background:var(--campo); color:var(--gray); display:flex; align-items:center; justify-content:center; gap:7px; transition:background var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease; } .clfil button .pall { width:7px; height:7px; border-radius:999px; background:currentColor; flex:0 0 7px; } .clfil button .qti { font-weight:600; opacity:.72; font-variant-numeric:tabular-nums; } .clfil button.vuoto { opacity:.42; cursor:default; } /* i filtri sono il semaforo: verde, giallo, rosso, sempre quelli */ .clfil button.on { background:var(--rialzo); border-color:var(--filo-forte); color:var(--inchiostro); font-weight:700; } .clfil button.on .qti { opacity:.66; } .clfil button.col-attivi { color:var(--st-attivo); } .clfil button.col-attesa { color:var(--st-attesa); } .clfil button.col-scaduti { color:var(--st-scaduto); } .clfil button.col-chiusi { color:var(--grigio-tenue); } /* il filtro di stato acceso tiene il SUO colore — è quello che sta filtrando — ma nel testo e nel bordo, non come vernice di fondo */ .clfil button.col-attivi.on { background:var(--rialzo); color:var(--st-attivo); border-color:color-mix(in srgb, var(--st-attivo) 45%, transparent); } .clfil button.col-attesa.on { background:var(--rialzo); color:var(--st-attesa); border-color:color-mix(in srgb, var(--st-attesa) 45%, transparent); } .clfil button.col-scaduti.on { background:var(--rialzo); color:var(--st-scaduto); border-color:color-mix(in srgb, var(--st-scaduto) 45%, transparent); } .clfil button.col-chiusi.on { background:var(--rialzo); color:var(--inchiostro); border-color:var(--filo-forte); } html.tema-chiaro .clfil button.col-attivi.on { background:var(--st-attivo-piena); color:#FFFFFF; border-color:transparent; } html.tema-chiaro .clfil button.col-attesa.on { background:var(--st-attesa-piena); color:#FFFFFF; border-color:transparent; } html.tema-chiaro .clfil button.col-scaduti.on { background:var(--st-scaduto-piena); color:#FFFFFF; border-color:transparent; } .clfil button:focus-visible { outline:2px solid var(--accento); outline-offset:2px; } @media(max-width:560px){ .clfil button{ min-width:calc(50% - 4px); } } /* quando un filtro non trova nessuno, si dice perché — e come uscirne */ .cl-niente { text-align:center; color:var(--gray); font-size:14px; line-height:1.5; padding:26px 16px; background:var(--scheda); border:1px solid var(--line); border-radius:18px; } .cl-niente button { border:0; background:none; font:inherit; font-weight:700; color:var(--accento-testo); cursor:pointer; padding:0; } /* ---------- LA BACHECA ---------- */ .bach-riga{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:var(--scheda); border:1px solid var(--line); border-radius:18px; padding:14px 16px; margin-bottom:12px; font-family:inherit; color:inherit; cursor:pointer; transition:border-color var(--fast) ease; } .bach-riga:hover{ border-color:var(--filo-forte); } .bach-riga .bi{ flex:0 0 38px; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--soft); color:var(--gray); } .bach-riga .bi svg{ width:19px; height:19px; } .bach-riga.viva .bi{ background:color-mix(in srgb, var(--accento) 16%, var(--scheda)); color:var(--accento); } .bach-riga .bt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .bach-riga .bt b{ font-size:14.5px; font-weight:700; } .bach-riga .bt span{ font-size:12.5px; color:var(--gray); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bach-riga.viva .bt span{ color:var(--inchiostro); } .bach-riga .ba{ flex:0 0 auto; color:var(--grigio-tenue); } .bach-quando{ font-size:12.5px; color:var(--gray); margin-top:10px; } .cvfili { display:flex; gap:8px; margin:0 0 12px; } .cvfili .cvfilo { flex:1; padding:10px 8px; border-radius:12px; cursor:pointer; font:inherit; font-size:13px; font-weight:700; border:1px solid var(--line); background:var(--campo); color:var(--gray); } /* IL FILO APERTO. Era una pastiglia di accento pieno larga mezza schermata, accanto a un'altra grigia: due blocchi, di cui uno verde. Adesso e' la stessa cosa che fa la barra in basso — superficie rialzata, filetto d'accento sotto, scritta in accento — e il verde e' un filo. */ .cvfili .cvfilo.on { background:var(--rialzo); color:var(--accento-testo); border-color:var(--filo); box-shadow:inset 0 -2px 0 0 var(--accento); } .cvfili .cvfilo i { font-style:normal; margin-left:6px; padding:1px 6px; border-radius:9px; background:#C0392B; color:#fff; font-size:11px; } .lbl { display:flex; align-items:center; font-size:12px; color:var(--muted); font-weight:700; margin:12px 0 4px; } .cnt { font-size:11px; color:var(--muted); text-align:right; margin-top:3px; } .cnt.pieno { color:var(--pericolo); font-weight:700; } .pal { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:10px; } .pal button { height:44px; border-radius:12px; border:2px solid transparent; cursor:pointer; } .pal button.on { border-color:#111113; box-shadow:0 0 0 3px rgba(0,0,0,.10); } .prow { border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:10px; background:var(--campo); } .prow .hd { display:flex; align-items:center; gap:8px; margin-bottom:8px; } .prow .hd b { flex:1; font-size:13px; } .modal label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gray); margin:12px 0 5px; } .modal input, .modal select, .modal textarea { width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line); outline:none; font-size:13px; background:var(--campo); } .modal .mrow2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; } /* 8 settembre 2026: la stessa griglia vale per i due numeri in cima a Pagamenti («incassato» e «da incassare»). Erano una sopra l'altra a tutta larghezza anche sul computer, perché «mrow2» era definita solo dentro le finestre. Sul telefono restano in colonna. */ #pg-fatt .mrow2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; } @media(max-width:600px){ #pg-fatt .mrow2 { grid-template-columns:minmax(0,1fr); } } .modal .macts { display:flex; gap:8px; margin-top:20px; } .modal .macts .btn { flex:1; } .modal .chk { display:flex; align-items:center; gap:10px; padding:10px 4px; border-top:1px solid var(--soft); font-size:13px; } .modal .chk input { width:18px; height:18px; } .modal .player { aspect-ratio:16/9; border-radius:14px; display:grid; place-content:center; text-align:center; background:linear-gradient(150deg,#232326,#141416); color:#fff; margin-bottom:12px; } .modal .player .pico { font-size:44px; } .modal .player p { font-size:11px; color:rgba(255,255,255,.6); margin-top:6px; } .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px); z-index:100; background:rgba(30,27,23,.92); color:#fff; font-size:13px; font-weight:700; padding:13px 22px; border-radius:999px; box-shadow:var(--e3); /* niente vetro smerigliato: lo sfondo è opaco al 92%, il blur non si vedrebbe e si paga */ opacity:0; transition:opacity .3s ease, transform .3s ease; pointer-events:none; max-width:90vw; text-align:center; } .toast.on { opacity:1; transform:translateX(-50%) translateY(0); } .toast.ok { background:rgba(46,158,91,.95); } /* tabbar */ /* 6 settembre 2026, Jacopo: «la barra e' troppo tonda». Da capsula (26) a rettangolo smussato (18), voci a 12: stessa barra nell'app dei clienti. */ .tabbar { display:none; position:fixed; bottom:calc(12px + var(--sab)); left:50%; transform:translateX(-50%); z-index:50; width:min(440px, calc(100% - 20px)); padding:6px; border-radius:18px; border:1px solid rgba(255,255,255,.16); background:linear-gradient(145deg, rgba(36,39,43,.70), rgba(12,14,16,.55)); backdrop-filter:blur(32px) saturate(180%) contrast(106%); -webkit-backdrop-filter:blur(32px) saturate(180%) contrast(106%); box-shadow:0 18px 50px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(255,255,255,.04); transition:transform .4s cubic-bezier(.3,.8,.3,1); } .tabbar::after { content:""; position:absolute; inset:1px; z-index:0; pointer-events:none; border-radius:17px; background:linear-gradient(112deg, rgba(255,255,255,.13), transparent 28%, transparent 70%, rgba(255,255,255,.04)); mask:linear-gradient(#000, transparent 46%); -webkit-mask:linear-gradient(#000, transparent 46%); } .app.on .tabbar { } .tabbar button { flex:1; min-width:0; min-height:50px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:7px 2px; border:0; border-radius:12px; background:none; color:rgba(255,255,255,.7); transition:color var(--fast) ease; position:relative; z-index:1; font-family:inherit; } .tabbar button .tl { font-size:9.5px; font-weight:600; line-height:1; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* il contatore dei messaggi: era rosso «ritardo», e un messaggio non letto non e' un ritardo. Stesso rettangolo d'accento di .nmsg. */ .tabbar button .tbadge { position:absolute; top:3px; left:calc(50% + 5px); background:var(--accento); color:var(--su-accento); font-family:var(--f-mono); font-size:9.5px; font-weight:600; border-radius:4px; padding:1px 5px; line-height:1.45; } .tabbar button svg { width:20px; height:20px; transform:scale(1); transition:transform .4s ease; } .tabbar button.on { color:var(--accento-testo); } /* 6 settembre: il led verde che scorreva sotto la voce toccata e' stato tolto — Jacopo: «non so quanto possa servire». Dove sei si vede gia' dal colore dell'icona e della scritta. */ .tabbar .glide { display:none; position:absolute; z-index:0; top:0; left:0; border-radius:20px; background:linear-gradient(180deg, color-mix(in srgb, var(--accento) 24%, transparent), color-mix(in srgb, var(--accento) 12%, transparent)); transform:translate3d(var(--gx,0px), var(--gy,0px), 0); transition:transform .55s cubic-bezier(.25,1.2,.35,1); } /* lo stiramento ripete la traslazione: senza, la pastiglia salterebbe all'origine */ .tabbar .glide.stretch { transform:translate3d(var(--gx,0px), var(--gy,0px), 0) scaleX(1.3) scaleY(.94); } /* LA BARRA NON SI RIMPICCIOLISCE PIU' ALLO SCORRIMENTO. Cambiava misura mentre si scorreva, e ogni cambio di misura obbligava a rimisurare la pastiglia verde: scorrendo veloce si vedeva schiacciarsi in alto e in basso senza motivo. Adesso resta ferma e uguale, e la pastiglia si deforma solo quando scivola davvero da una sezione all'altra. */ @keyframes goccia { 0%{transform:scale(1,1);} 25%{transform:scale(1.32,.7);} 50%{transform:scale(.8,1.2);} 70%{transform:scale(1.12,.92);} 85%{transform:scale(.96,1.05);} 100%{transform:scale(1,1);} } .tabbar button.tap svg { animation:goccia .55s cubic-bezier(.3,.7,.4,1); } /* IL LED AL PASSAGGIO DEL MOUSE. Al tocco il segno fa la goccia; col mouse non succedeva niente. Lo stesso alone dell'area clienti, per non avere due barre che rispondono in due modi. */ @media(hover:hover){ .tabbar button:hover{ color:#fff } .tabbar button:hover svg{ filter:drop-shadow(0 0 7px color-mix(in srgb, var(--accento) 65%, transparent)) } .tabbar button.on:hover svg{ filter:drop-shadow(0 0 9px color-mix(in srgb, var(--accento) 80%, transparent)) } } /* ===== usabilità telefono ===== */ @media (max-width: 520px) { /* i campi affiancati vanno a capo: niente più etichette sfalsate */ .modal .mrow2 { grid-template-columns: 1fr; gap: 0; } /* 16px = Safari non ingrandisce più la pagina al tocco */ .modal input, .modal select, .modal textarea { font-size:15px; } } /* la finestra segue la tastiera invece di finirci sotto */ .modal { max-height: 86dvh; } @supports not (height: 1dvh) { .modal { max-height: 86vh; } } @media (max-width: 720px) { /* aree toccabili almeno 40-44px */ .bx .mv button, .bx .del { width: 40px; height: 40px; font-size: 15px; } .bday-h button { width: 40px; height: 40px; } .csend input, .brow input, .brow select, .bx input, .bx select, .bday-h input, textarea.notes { font-size:15px; } .csend button { width: 46px; height: 46px; } } @media (max-width:900px) { .side { display:none; } .app.on { display:block; } /* Nell'app installata non c'e' la barra del browser a fare da cuscinetto: senza questo, il marchio e il tasto dell'assistente finiscono sotto l'orologio e la batteria dell'iPhone. In Safari var(--sat) vale 0, quindi la riga vale per tutti e due i casi. */ .main { padding:calc(12px + var(--sat)) 12px 110px; } .grid4 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .cols2, .grid3, .vgrid { grid-template-columns:1fr; } .tabbar { display:flex; } /* Stesso segnale della navigazione desktop, ruotato per la barra in basso: rialzo grigio e filetto d'accento sopra la voce attiva. */ .tabbar button.on { background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.075)); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.17), 0 7px 18px rgba(0,0,0,.18); } .tabbar button.on::before { content:""; position:absolute; left:10px; right:10px; top:0; height:3px; border-radius:0 0 3px 3px; background:var(--accento); box-shadow:0 1px 8px color-mix(in srgb, var(--accento) 58%, transparent); } .pay-wrap { overflow-x:auto; } } /* avviso di aggiornamento */ .aggBar { position:fixed; left:12px; right:12px; z-index:200; bottom:calc(86px + var(--sab)); display:flex; align-items:center; gap:12px; padding:13px 14px 13px 18px; border-radius:16px; background:rgba(28,28,31,.96); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); color:#fff; font-size:14px; font-weight:600; box-shadow:0 14px 38px rgba(0,0,0,.45); transform:translateY(140%); transition:transform 320ms cubic-bezier(.2,.8,.3,1); } .aggBar.on { transform:none; } .aggBar span { flex:1; } .aggBar button { border:0; border-radius:999px; padding:10px 18px; cursor:pointer; background:var(--orange); color:var(--su-accento); font:inherit; font-size:13px; font-weight:700; } /* comodità: bersagli da pollice sui punti caldi, e respiro in fondo alle pagine perché il tasto dell'assistente non copra l'ultima riga */ @media (pointer:coarse){ .btn.soft.sm, .todo button, .dact button{ min-height:40px; } .btn.soft.sm{ padding:10px 14px; } } .page{ padding-bottom:110px; }