/* ═══════════════ FLUSSO — finanze personali (solo owner) ═══════════════ Modulo integrato dallo standalone "gestione-pagamenti": tutto prefissato fl- per non collidere. Colori SEMPRE dalle variabili del design system (entrate=--green, spese=--red, debiti=--orange, resto oro/superfici), così Giorno e Notte funzionano da sole. */ #flusso .fl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px} #flusso .fl-actions{display:flex;gap:8px;align-items:center} /* Menu del modulo: le stesse card del Control Center, ma sono due sole e possono respirare — più grandi e centrate nella pagina (ago 2026). */ #flusso .fl-menu{max-width:760px;margin:28px auto 0} #flusso .fl-menu .cc-card{padding:34px 28px} #flusso .fl-menu .cc-icon svg{width:38px;height:38px} /* Il quadro dell'anno, nello spazio sotto le due card: un mese per colonna. Si scorre in orizzontale e l'etichetta della riga resta ferma a sinistra, altrimenti scorrendo non si sa più che numero si sta guardando. Larga quanto serve e non di più: con sette mesi avanzava spazio bianco (Logan, ago 2026); oltre i 1500 scatta lo scorrimento. */ #flusso .fl-anno{width:fit-content;max-width:1500px;min-width:min(760px,100%);margin:26px auto 0} .fl-anno-scroll{overflow-x:auto} .fl-anno-scroll::-webkit-scrollbar{height:11px} .fl-anno-scroll::-webkit-scrollbar-track{background:color-mix(in srgb, var(--gold-line) 18%, transparent);border-radius:6px} .fl-anno-scroll::-webkit-scrollbar-thumb{background:var(--accent2);border-radius:6px} .fl-anno-scroll::-webkit-scrollbar-thumb:hover{background:var(--accent)} .fl-anno-tab{white-space:nowrap;width:100%} .fl-anno-tab td,.fl-anno-tab th{text-align:right;font-variant-numeric:tabular-nums; padding-left:10px;padding-right:10px} /* la colonna delle etichette resta ferma a sinistra e prende solo lo spazio che le serve: il resto va ai mesi, che sono quelli da leggere */ .fl-anno-tab th:first-child,.fl-anno-tab .fl-anno-eti{text-align:left;position:sticky; left:0;z-index:2;background:var(--bg);width:1px;padding-right:18px} .fl-anno-tab .fl-anno-usc{color:var(--muted)} .fl-anno-diff td{font-weight:600} .fl-anno-tab .fl-anno-pos{color:var(--green)} .fl-anno-tab .fl-anno-neg{color:var(--red)} /* celle che portano al dettaglio del mese */ .fl-anno-tab .fl-anno-vai{cursor:pointer} .fl-anno-tab .fl-anno-vai:hover{background:var(--gold-faint);text-decoration:underline; text-underline-offset:3px} .fl-anno-tab .fl-anno-vai:focus-visible{outline:1px solid var(--accent);outline-offset:-1px} /* Il riquadro dei totali sotto la tabella: UNO solo, diviso in due (Logan, ago 2026). A sinistra i movimenti dell'anno, a destra il bilancio. */ .fl-anno-tot{display:flex;margin-top:12px;border:1px solid var(--gold-line); border-radius:10px;background:var(--gold-faint);overflow:hidden} .fl-anno-tot-mov{flex:1;display:flex} .fl-anno-tot-mov > div,.fl-anno-tot-bil{display:flex;flex-direction:column} .fl-anno-tot-mov > div{flex:1} .fl-anno-tot-mov > div + div{border-left:1px solid var(--gold-line)} .fl-anno-tot-bil{flex:0 0 auto;min-width:210px;border-left:1px solid var(--accent)} /* Due fasce di colore come le intestazioni delle tabelle (Logan, ago 2026): il nome sul fondo scuro col testo oro, il numero sotto sul fondo del riquadro. */ .fl-anno-tot span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--accent);font-weight:600;padding:9px 18px; background:linear-gradient(180deg,#16161b,#101014); border-bottom:1px solid var(--gold-line)} .fl-anno-tot b{font-size:20px;font-variant-numeric:tabular-nums;font-weight:600; padding:12px 18px;background:var(--gold-faint)} html.light .fl-anno-tot span{background:linear-gradient(180deg,#f1ecdf,#e8e2d0)} .fl-anno-tot .fl-anno-tot-inc{color:var(--green)} .fl-anno-tot .fl-anno-pos{color:var(--green)} .fl-anno-tot .fl-anno-neg{color:var(--red)} .fl-anno-tot-bil b{font-size:22px} @media(max-width:720px){.fl-anno-tot,.fl-anno-tot-mov{flex-direction:column} .fl-anno-tot-mov > div + div{border-left:0;border-top:1px solid var(--gold-line)} .fl-anno-tot-bil{border-left:0;border-top:1px solid var(--accent)}} /* Admin in sola lettura (2026-08-16): vede tutto, i controlli di modifica non esistono proprio. Il gate vero resta sugli endpoint. */ #flusso.fl-ro .fl-arrivo-ok,#flusso.fl-ro .fl-funnel-del, #flusso.fl-ro td .fl-ripart,#flusso.fl-ro #fl-funnel-apri, #flusso.fl-ro #fl-db-nuova,#flusso.fl-ro .fl-db-form, #flusso.fl-ro .fl-db-mod,#flusso.fl-ro .fl-db-del{display:none} #flusso.fl-ro .fl-fatt{pointer-events:none} /* "· Entrate" / "· Uscite" accanto al titolo: dice in che stanza sei */ .fl-titolo-vista{color:var(--muted);font-weight:400} .fl-stage{position:relative;min-height:460px;height:calc(100vh - 320px)} .fl-flows{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible} /* condotti di ENERGIA: bagliore sul tubo e impulsi luminosi */ .fl-pipe{fill:none;stroke-linecap:round;opacity:.9;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--gold-hi) 30%,transparent))} .fl-pipe-bg{fill:none;stroke:var(--surface2);stroke-linecap:round;opacity:.8} .fl-pipe-dash{fill:none;stroke:var(--gold-hi);stroke-linecap:round;stroke-dasharray:2 20;animation:flMarch .9s linear infinite;opacity:.85;filter:drop-shadow(0 0 3px var(--gold-hi))} #fl-dotsqonto,#fl-dotsdeutsche{filter:drop-shadow(0 0 5px currentColor)} @keyframes flMarch{to{stroke-dashoffset:-22}} .fl-pipe.cut,.fl-pipe-dash.cut{opacity:.07} .fl-pipe-dash.cut{animation:none} .fl-zone{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;z-index:2;transition:height .35s cubic-bezier(.3,.9,.3,1),border-color .2s,opacity .25s,filter .25s} /* angoli HUD dorati: i pannelli sono moduli di un pannello di controllo */ .fl-zone::before,.fl-zone::after{content:'';position:absolute;width:16px;height:16px;pointer-events:none;z-index:4} .fl-zone::before{top:-1px;left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);border-top-left-radius:14px} .fl-zone::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);border-bottom-right-radius:14px} /* linea energetica animata sotto l'intestazione */ .fl-zhead{position:relative} .fl-zhead::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold-grad);background-size:200% 100%;animation:flShimmer 5s linear infinite;opacity:.75} @keyframes flShimmer{to{background-position:200% 0}} /* LED di stato del conto */ .fl-led{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 7px color-mix(in srgb,var(--green) 70%,transparent);flex:0 0 auto} .fl-zone.offacct .fl-led{background:var(--muted);box-shadow:none} .fl-zone.offacct{opacity:.5;filter:saturate(.3)} /* pill bonifici nell'intestazione del conto */ .fl-pillbox{display:flex;gap:6px;align-items:center} .fl-pillbox .apin{font-size:10.5px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums} .fl-pillbox .apend{font-size:10.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums} /* sync bancario: stato del collegamento nell'intestazione del conto */ .fl-pillbox .absync{font-size:10px;font-weight:600;color:var(--green);border:1px solid var(--green);border-radius:99px;padding:1px 7px;opacity:.85} .fl-pillbox .abwarn{font-size:10px;font-weight:600;color:var(--accent);border:1px solid var(--accent);border-radius:99px;padding:1px 7px} .fl-pillbox .aboff{font-size:10px;font-weight:600;color:var(--red);border:1px solid var(--red);border-radius:99px;padding:1px 7px} .fl-bankrow{display:flex;gap:7px;align-items:center;flex:0 0 auto} /* vista Venduto: registro incassi con scorporo IVA (solo owner) */ .fl-vendview{display:flex;flex-direction:column;gap:14px} /* Queste due viste si accendono e si spengono con l'attributo `hidden`, ma hanno un display esplicito che lo batte: senza queste righe il registro degli incassi restava visibile anche nel menu Entrate/Uscite (Logan, 2026-08-12). Vale per ogni vista con un display dichiarato. */ .fl-vendview[hidden],.fl-calview[hidden]{display:none} .fl-vend-mese{padding:6px 10px;border-radius:8px;border:1px solid var(--gold-line);background:transparent;color:var(--text);font-family:inherit;font-size:13px} /* stato fattura (tendina in prima colonna): azzurro da fatturare, verde emessa, rosso rimborsato */ .fl-fatt{padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s;background:transparent} .fl-fatt.st-da_fatturare{border:1px solid var(--blue);color:var(--blue)} .fl-fatt.st-emessa{border:1px solid var(--green);color:var(--green)} .fl-fatt.st-dati_mancanti{border:1px solid var(--orange);color:var(--orange)} .fl-fatt.st-rimborsato{border:1px solid var(--red);color:var(--red)} /* "Dati mancanti" (ago 2026): la riga si accende d'arancione per intero, con una barra a sinistra, così scorrendo il mese si trova senza cercarla. */ #fl-vend-table tr.fl-vend-manca td{background:color-mix(in srgb, var(--orange) 13%, transparent)} #fl-vend-table tr.fl-vend-manca.fl-vend-capo td:first-child{box-shadow:inset 3px 0 0 var(--orange)} /* l'avviso in testa, sopra la tabella, che dice quante righe aspettano */ .fl-vend-avviso{margin-top:10px;padding:9px 13px;border:1px solid var(--orange); border-left:3px solid var(--orange);border-radius:8px;font-size:12px; color:var(--orange);background:color-mix(in srgb, var(--orange) 10%, transparent)} .fl-vend-avviso b{font-weight:700} /* ── Fatture in Cloud: il tasto in riga e il pannello di anteprima ─────── Il tasto compare SOLO nella vista Fatture, accanto allo stato: altrove sarebbe un invito a emettere fuori dal momento giusto. */ .fl-fic-btn{margin-left:6px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600; font-family:inherit;cursor:pointer;transition:.15s;background:var(--gold-faint); border:1px solid var(--gold-line);color:var(--accent)} .fl-fic-btn:hover{background:var(--gold-grad);color:#1c1608;border-color:transparent} .fl-fic-btn[disabled]{opacity:.5;cursor:default} /* IL PANNELLO. Niente fondo unico: fasce separate da hairline, ognuna con il suo respiro, e i due estremi (intestazione e tasti) su una superficie più profonda del corpo. Il padding sta nelle fasce, non nel contenitore. */ .fl-modal.fl-fic-modal{max-width:540px;padding:0;background:var(--surface); max-height:88vh;overflow:hidden auto} .fl-fic-modal::-webkit-scrollbar{width:10px} .fl-fic-modal::-webkit-scrollbar-track{background:transparent} .fl-fic-modal::-webkit-scrollbar-thumb{background:var(--accent2);border-radius:6px} .fl-fic-head{padding:20px 24px 17px;background:linear-gradient(180deg,#16161b,#101014); border-bottom:1px solid var(--gold-line)} html.light .fl-fic-head{background:linear-gradient(180deg,#f1ecdf,#e8e2d0)} .fl-fic-head h3{margin:0 0 11px;font-family:var(--font-display);font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--accent)} .fl-fic-lead{font-size:18px;font-weight:600;color:var(--text);line-height:1.25} .fl-fic-meta{font-size:12px;color:var(--muted);margin-top:3px} /* una fascia per ogni cosa da guardare */ .fl-fic-sez{padding:16px 24px;border-bottom:1px solid var(--border)} .fl-fic-sez:last-of-type{border-bottom:none} .fl-fic-eti{font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);font-weight:600} /* cliente e data: etichetta sopra, valore sotto, su due colonne */ .fl-fic-cliente{display:flex;gap:24px;flex-wrap:wrap} .fl-fic-campo{display:flex;flex-direction:column;gap:4px;min-width:0} .fl-fic-campo:first-child{flex:1} .fl-fic-val{font-size:14px;color:var(--text);font-weight:600} .fl-fic-val em{font-style:normal;font-weight:400;color:var(--muted);font-size:12px} /* le righe della fattura: elenco con separatori sottili, importi incolonnati */ .fl-fic-righe{margin-top:10px} .fl-fic-riga{display:flex;align-items:baseline;gap:14px;padding:9px 0; border-top:1px solid var(--border)} .fl-fic-riga:first-child{border-top:none;padding-top:2px} .fl-fic-desc{flex:1;min-width:0;font-size:13px;color:var(--text);line-height:1.4} .fl-fic-desc em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px} .fl-fic-al{flex:0 0 auto;font-size:10.5px;color:var(--muted);border:1px solid var(--border); border-radius:99px;padding:2px 8px} .fl-fic-eur{flex:0 0 auto;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums; color:var(--text);min-width:88px;text-align:right} /* i totali su superficie propria, il totale vero staccato da una hairline oro */ .fl-fic-totali{background:var(--surface2)} .fl-fic-tot{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted); padding:3px 0} .fl-fic-tot span:last-child{font-variant-numeric:tabular-nums} .fl-fic-tot.grande{color:var(--text);font-weight:700;font-size:15px; border-top:1px solid var(--gold-line);margin-top:8px;padding-top:10px} .fl-fic-nota{padding:9px 12px;border:1px solid var(--orange);border-left:3px solid var(--orange); border-radius:8px;font-size:11.5px;color:var(--orange); background:color-mix(in srgb, var(--orange) 10%, transparent);line-height:1.5} .fl-fic-nota + .fl-fic-nota{margin-top:8px} .fl-fic-scelta{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:10px; padding:10px 12px;color:var(--text);font-size:13px;font-family:inherit;margin-bottom:12px} /* i tasti in fondo, su fascia propria: l'azione sta sempre nello stesso posto */ .fl-fic-piede{display:flex;align-items:center;gap:9px;padding:14px 24px; border-top:1px solid var(--gold-line);background:var(--surface2)} .fl-fic-piede .fl-btn{flex:0 0 auto;padding:9px 16px} .fl-fic-piede .fl-btn.save{padding:9px 20px} .fl-fic-piede-nota{flex:1;font-size:10.5px;color:var(--muted);line-height:1.35} .fl-fic-scelta:focus{outline:none;border-color:var(--accent)} /* vendite a importi liberi (Persuamind): l'owner indica qui la quota al 22% */ .fl-ripart{padding:3px 10px;border-radius:99px;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer; background:transparent;border:1px dashed var(--accent2);color:var(--accent);transition:.15s} .fl-ripart:hover{border-style:solid} .fl-ripart-inp{width:110px;padding:3px 8px;border-radius:8px;border:1px solid var(--accent2); background:transparent;color:var(--text);font-family:inherit;font-size:11.5px} /* Celle che si confermano con un clic: "Arrivo sul conto" e "Commissione". Verde = valore messo dall'owner, tratteggiato grigio = calcolato dal sistema (previsione dalla data o tariffa del metodo di pagamento). */ .fl-arrivo,.fl-comm{padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer; background:transparent;border:1px dashed var(--muted);color:var(--muted);transition:.15s} .fl-arrivo:hover,.fl-comm:hover{border-color:var(--accent2);color:var(--accent)} .fl-arrivo.confermato,.fl-comm.confermato{border:1px solid var(--green);color:var(--green)} /* Nel registro incassi la data di arrivo sta ACCANTO a quella di pagamento e deve leggersi IDENTICA (Logan, 2026-08-11: "altrimenti stonano"): niente pillola, niente bordo, solo testo come l'altra colonna. Resta cliccabile e lo dice al passaggio del mouse, con un tratteggio sotto. L'unica differenza che tiene è il colore: la data CONFERMATA è testo pieno come la data di pagamento, quella ancora PREVISTA dal metodo è più sbiadita. */ #fl-vend-table .fl-arrivo{font-size:13px;font-weight:400;font-variant-numeric:tabular-nums; padding:0;border:none;background:transparent;color:var(--muted); border-bottom:1px dashed transparent;border-radius:0} #fl-vend-table .fl-arrivo.confermato{border:none;border-bottom:1px dashed transparent;color:var(--text)} #fl-vend-table .fl-arrivo:hover{border-bottom-color:var(--accent2);color:var(--accent)} /* Spunta di conferma accanto alla data prevista: discreta finché non la si guarda, verde al passaggio del mouse. Sparisce da sola quando la data è confermata, perché la cella non la disegna più. */ .fl-arrivo-ok{margin-left:7px;padding:0 4px;background:transparent;border:none; color:var(--muted);font-size:13px;line-height:1;cursor:pointer;transition:.15s} .fl-arrivo-ok:hover{color:var(--green);transform:scale(1.25)} .fl-arrivo-ok:disabled{opacity:.4;cursor:default} .fl-arrivo-inp{width:140px;padding:3px 8px;border-radius:8px;border:1px solid var(--accent2); background:transparent;color:var(--text);font-family:inherit;font-size:11.5px} .fl-comm-inp{width:90px;padding:3px 8px;border-radius:8px;border:1px solid var(--accent2); background:transparent;color:var(--text);font-family:inherit;font-size:11.5px} /* le tre sezioni del mese, come i blocchi del foglio */ .fl-vend-sez{display:flex;justify-content:space-between;align-items:baseline;gap:12px; margin:18px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--gold-line); font-family:var(--font-display);font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--accent)} .fl-vend-sez:first-child{margin-top:2px} /* nota sotto i tre totali, quando qualche riga non ha ancora la ripartizione IVA */ .fl-vend-nota{margin-top:10px;font-size:11.5px;color:var(--muted);font-style:italic} /* Riga di chiusura della tabella: i totali sotto le colonne che sommano. Il verde è più carico delle celle sopra, così si legge come la loro somma. */ #fl-vend-table .fl-vend-tot td{font-weight:700;border-top:1px solid var(--gold-line);border-bottom:none} #fl-vend-table .fl-vend-tot td:first-child{text-align:right;color:var(--muted); font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.1em} #fl-vend-table .fl-vend-tot .fl-v-inc{background-image:linear-gradient(color-mix(in srgb, var(--green) 34%, transparent),color-mix(in srgb, var(--green) 34%, transparent))} #fl-vend-table .fl-vend-tot .fl-v-al{background-image:linear-gradient(color-mix(in srgb, var(--green) 24%, transparent),color-mix(in srgb, var(--green) 24%, transparent))} #fl-vend-table .fl-vend-tot .fl-v-imp{background-image:linear-gradient(color-mix(in srgb, var(--green) 16%, transparent),color-mix(in srgb, var(--green) 16%, transparent))} #fl-vend-table .fl-vend-tot .fl-v-iva{background-image:linear-gradient(color-mix(in srgb, var(--green) 9%, transparent),color-mix(in srgb, var(--green) 9%, transparent))} /* Una vendita = due righe (editoriale al 4%, coaching al 22%) con le celle in comune unite. Fra le due il separatore è appena accennato, sotto la vendita torna pieno: così il blocco si legge come una cosa sola (ago 2026). */ #fl-vend-table .fl-vend-capo td{border-bottom-color:color-mix(in srgb, var(--border) 35%, transparent)} #fl-vend-table .fl-vend-voce td{border-bottom:1px solid var(--border)} #fl-vend-table .fl-vend-capo td[rowspan]{border-bottom:1px solid var(--border)} /* l'hover accende tutte e due le righe della stessa vendita */ #fl-vend-table tr:hover td{background:rgba(216,180,94,.07)} /* Le quattro colonne dei numeri fiscali in SFUMATURA DI VERDE come nel foglio Excel (Logan, 2026-08-11): dall'incassato, il più pieno, all'IVA, la più tenue. Sta su background-image apposta, così l'hover (che è background-color) si somma invece di cancellarla. Verde dalla variabile del tema, mai un hex: funziona anche di giorno, dove --green cambia tinta. */ #fl-vend-table .fl-v-inc{background-image:linear-gradient(color-mix(in srgb, var(--green) 22%, transparent),color-mix(in srgb, var(--green) 22%, transparent))} #fl-vend-table .fl-v-al{background-image:linear-gradient(color-mix(in srgb, var(--green) 15%, transparent),color-mix(in srgb, var(--green) 15%, transparent))} #fl-vend-table .fl-v-imp{background-image:linear-gradient(color-mix(in srgb, var(--green) 9%, transparent),color-mix(in srgb, var(--green) 9%, transparent))} #fl-vend-table .fl-v-iva{background-image:linear-gradient(color-mix(in srgb, var(--green) 4%, transparent),color-mix(in srgb, var(--green) 4%, transparent))} /* Barra di scorrimento orizzontale APPICCICATA IN BASSO. Sta FUORI da #fl-vend-table (dentro un contenitore con overflow non si aggancerebbe) e ne replica la larghezza con un figlio vuoto. Compare solo quando serve. È `fixed` e NON `sticky`: il
del nucleo ha overflow:auto, quindi lo sticky si aggancerebbe a lui invece che alla finestra e la barra finirebbe fuori schermo (era il caso del registro incassi, ago 2026). Posizione e larghezza le allinea flSyncBarra sul rettangolo della tabella. */ .fl-hbar{position:fixed;bottom:0;z-index:5;overflow-x:auto;overflow-y:hidden; background:linear-gradient(180deg,transparent,color-mix(in srgb, var(--bg) 92%, transparent) 45%); padding-top:6px} .fl-hbar[hidden]{display:none} /* spazio sotto la tabella perché la barra non copra l'ultima riga */ .fl-vendview.fl-hbar-on{padding-bottom:20px} .fl-hbar>div{height:1px} .fl-hbar::-webkit-scrollbar{height:11px} .fl-hbar::-webkit-scrollbar-track{background:color-mix(in srgb, var(--gold-line) 18%, transparent);border-radius:6px} .fl-hbar::-webkit-scrollbar-thumb{background:var(--accent2);border-radius:6px} .fl-hbar::-webkit-scrollbar-thumb:hover{background:var(--accent)} /* i numeri incolonnati: cifre a larghezza fissa e allineate a destra */ #fl-vend-table .fl-v-inc,#fl-vend-table .fl-v-imp,#fl-vend-table .fl-v-iva{text-align:right;font-variant-numeric:tabular-nums} #fl-vend-table th.fl-v-inc,#fl-vend-table th.fl-v-imp,#fl-vend-table th.fl-v-iva{text-align:right} .fl-vend-sez-tot{font-family:inherit;font-size:12px;color:var(--text);letter-spacing:0} /* form dei prodottini registrati a mano, dentro la sezione Prodottini */ .fl-funnel-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end; margin:10px 0 14px;padding:12px;border:1px solid var(--gold-line);border-radius:10px} .fl-funnel-form label{display:block;font-size:10.5px;color:var(--muted);margin-bottom:3px} .fl-funnel-form input,.fl-funnel-form select{padding:5px 8px;border-radius:8px; border:1px solid var(--gold-line);background:transparent;color:var(--text); font-family:inherit;font-size:12px} .fl-funnel-del{background:transparent;border:none;color:var(--muted);cursor:pointer; font-size:11px;font-family:inherit;padding:0 4px;transition:.15s} .fl-funnel-del:hover{color:var(--red)} .fl-bankrow input{flex:1;min-width:0;padding:7px 9px;border-radius:8px;border:1px solid var(--gold-line);background:transparent;color:var(--muted);font-size:11px;font-family:inherit} /* Layout a due CONTI: ogni conto a sinistra con le SUE spese a destra. I debiti stanno fuori dallo stage (fascia sotto): non drenano nulla. */ /* corridoio ENERGETICO largo (15%) tra conti e spese: i condotti respirano */ .fl-zone.acct-q{left:0;top:0;width:30%;height:calc(50% - 8px)} .fl-zone.acct-d{left:0;bottom:0;width:30%;height:calc(50% - 8px)} .fl-zone.sp-q{right:0;top:0;width:55%;height:calc(50% - 8px)} .fl-zone.sp-d{right:0;bottom:0;width:55%;height:calc(50% - 8px)} /* COLLASSO: chiudendo un blocco la sua sorella si prende lo spazio. Le due colonne (conti a sx, spese a dx) sono indipendenti. */ .fl-stage[data-col-acct="acct-qonto"] .fl-zone.acct-q{height:50px} .fl-stage[data-col-acct="acct-qonto"] .fl-zone.acct-d{height:calc(100% - 66px)} .fl-stage[data-col-acct="acct-deutsche"] .fl-zone.acct-d{height:50px} .fl-stage[data-col-acct="acct-deutsche"] .fl-zone.acct-q{height:calc(100% - 66px)} .fl-stage[data-col-sp="sp-qonto"] .fl-zone.sp-q{height:50px} .fl-stage[data-col-sp="sp-qonto"] .fl-zone.sp-d{height:calc(100% - 66px)} .fl-stage[data-col-sp="sp-deutsche"] .fl-zone.sp-d{height:50px} .fl-stage[data-col-sp="sp-deutsche"] .fl-zone.sp-q{height:calc(100% - 66px)} /* barra DEBITI = ALLARME ROSSO: bande diagonali, bagliore pulsante, LED lampeggiante */ .fl-debtbar{width:100%;display:flex;align-items:center;gap:14px;padding:15px 20px;margin-bottom:14px;border-radius:14px;cursor:pointer;font-family:inherit;text-align:left;position:relative; background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--red);transition:border-color .2s,transform .18s} .fl-debtbar:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--red) 45%,var(--border))} .fl-debtbar .led{width:8px;height:8px;border-radius:50%;background:var(--red);flex:0 0 auto;animation:flBreath 3.2s ease-in-out infinite} @keyframes flBreath{0%,100%{box-shadow:0 0 3px color-mix(in srgb,var(--red) 50%,transparent)}50%{box-shadow:0 0 11px var(--red)}} .fl-debtbar .lbl{font-family:var(--font-display);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--red)} .fl-debtbar .val{font-family:var(--font-display);font-size:30px;color:var(--red);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-left:8px} .fl-debtbar .hint{margin-left:auto;font-size:11.5px;color:var(--muted);letter-spacing:.04em;flex:0 0 auto} .fl-debtbar:hover .hint{color:var(--red)} /* finestra dei debiti (si apre dalla barra) */ .fl-debts-overlay{position:fixed;inset:0;z-index:1150;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:26px} .fl-debts-overlay[hidden]{display:none} .fl-debts{position:relative;width:100%;max-width:760px;max-height:78vh;height:auto;border-color:var(--gold-line)} .fl-debts .fl-tokens{max-height:64vh} /* riga "RESTA" in fondo a ogni conto: è il numero che conta davvero */ .fl-resta{flex:0 0 auto;padding:9px 15px;border-top:1px solid var(--gold-line);display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);position:relative;z-index:2} .fl-resta b{font-family:var(--font-display);font-size:19px;letter-spacing:-.01em;color:var(--green);text-transform:none} .fl-resta b.neg{color:var(--red)} .fl-zone.collapsed .fl-tokens,.fl-zone.collapsed .fl-sfilter,.fl-zone.collapsed .fl-resta{opacity:0;pointer-events:none} .fl-zone.collapsed .fl-zhead{border-bottom-color:transparent} .fl-zhead{padding:13px 15px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--gold-line)} .fl-ztitle{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--text)} .fl-ztitle svg{width:15px;height:15px;flex:0 0 auto} .fl-ztitle svg{color:var(--accent)} .sp-q .fl-ztitle svg,.sp-d .fl-ztitle svg{color:var(--orange)} .fl-debts .fl-ztitle svg{color:var(--red)} .fl-zright{display:flex;align-items:center;gap:9px} .fl-ztot{font-family:var(--font-display);font-size:17px;font-variant-numeric:tabular-nums} /* la € viene resa in Inter: in Michroma il suo glifo sembra uno zero */ .fl-cur{font-family:'Inter',system-ui,sans-serif;font-weight:700;margin-left:.3em;letter-spacing:0} .acct-q .fl-ztot,.acct-d .fl-ztot{color:var(--green)} .sp-q .fl-ztot,.sp-d .fl-ztot{color:var(--orange)} .fl-debts .fl-ztot{color:var(--red)} /* i debiti sono ROSSI ovunque, coerenti con l'allarme */ .fl-ztot.neg{color:var(--red)} .fl-zbtn{width:27px;height:27px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:.2s;flex:0 0 auto;display:grid;place-items:center;font-size:15px;line-height:1} .fl-zbtn svg{width:13px;height:13px} .fl-zbtn:hover{color:var(--accent);border-color:var(--gold-line)} .fl-zbtn.on{color:var(--accent);border-color:var(--accent);background:var(--gold-faint)} .fl-colbtn svg{transition:transform .3s} .fl-zone.collapsed .fl-colbtn svg{transform:rotate(180deg)} .fl-zone.collapsed .fl-sortbtn{display:none} .fl-liquid{display:none} .fl-reslbl{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:12px;color:var(--text);z-index:2;pointer-events:none} .fl-tokens{flex:1;padding:11px;display:flex;flex-direction:column;gap:7px;overflow-y:auto;min-height:80px;position:relative;z-index:2} /* barra filtri: a DESTRA, sopra la colonna delle spese (che è right:0, width:55%) */ .fl-sfilter{display:flex;flex-wrap:wrap;gap:10px;padding:10px 13px 8px;justify-content:flex-end} .fl-fsel{ padding:7px 12px;border-radius:16px;border:1px solid var(--border);background:var(--surface2); color:var(--text);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:.16s; } .fl-fsel:hover{border-color:var(--gold-line)} .fl-fsel.on{border-color:var(--accent);color:var(--accent);background:var(--gold-faint)} /* filtro attivo */ /* totale di intestazione quando mostra un PARZIALE (filtri attivi): puntinato sotto, per non far credere che sia il totale pieno delle spese */ .fl-ztot.filtered{border-bottom:1px dashed var(--accent2);cursor:help} .fl-zempty{width:100%;color:var(--muted);font-size:12px;text-align:center;padding:18px 8px;opacity:.65;pointer-events:none} .fl-token{position:relative;width:100%;display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:10px;cursor:default;background:var(--surface2);border:1px solid var(--border);user-select:none;touch-action:none;transition:box-shadow .2s,border-color .2s,opacity .2s;animation:flTokenIn .32s cubic-bezier(.2,1.3,.4,1) backwards} .fl-token:hover{border-color:var(--gold-line)} @keyframes flTokenIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}} .fl-token.z-e .amt{color:var(--green)} /* entrate: verde */ .fl-token.z-s .amt{color:var(--orange)} /* spese: arancione */ .fl-token.z-d .amt{color:var(--red)} /* debiti: rosso */ .fl-token .amt{font-family:var(--font-display);font-size:15px;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap;flex:0 0 auto} .fl-token .lab{font-size:13.5px;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fl-token .tdate{margin-left:auto;font-size:10.5px;color:var(--muted);flex:0 0 auto;font-variant-numeric:tabular-nums;letter-spacing:.03em} .fl-token .tdate.late{color:var(--red)} .fl-token .tdate.paidpill{color:var(--green)} .fl-token .payb{margin-left:auto;width:23px;height:23px;border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;opacity:.6;transition:.15s;display:grid;place-items:center;flex:0 0 auto} .fl-token .payb:hover{background:var(--accent);border-color:var(--accent);color:var(--bg);opacity:1} .fl-token .tdate + .payb{margin-left:8px} .fl-token .payb + .edit{margin-left:6px} /* quadratino di selezione delle spese (ago 2026): marca quelle da guardare insieme, la tendina "Selezionate" mostra solo loro */ .fl-token .selb{margin-left:auto;width:23px;height:23px;border:1px solid var(--border); background:transparent;color:var(--muted);border-radius:7px;font-size:11px;cursor:pointer; opacity:.55;transition:.15s;display:grid;place-items:center;flex:0 0 auto} .fl-token .selb + .payb,.fl-token .selb + .edit{margin-left:6px} .fl-token .selb:hover{opacity:1;color:var(--accent);border-color:var(--gold-line)} .fl-token .selb.on{opacity:1;color:var(--accent);border-color:var(--accent)} .fl-token.sel{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)} .fl-token .edit{margin-left:auto;width:23px;height:23px;border:1px solid transparent;background:var(--gold-faint);color:var(--muted);border-radius:7px;font-size:11px;cursor:pointer;opacity:.5;transition:.15s;display:grid;place-items:center;flex:0 0 auto} .fl-token .tdate + .edit{margin-left:8px} .fl-token:hover .edit{opacity:1} .fl-token .edit:hover{color:var(--accent);border-color:var(--gold-line)} .fl-token.off{opacity:.45;filter:saturate(.25)} /* niente bagliore su OGNI riga (affollava tutto): il colore lo dà il bordo sinistro */ .sp-q .fl-token,.sp-d .fl-token,.fl-debts .fl-token{cursor:pointer} .fl-zone.sorting .fl-token{cursor:grab} .fl-zone.sorting .fl-token:not(.dragging):hover{border-color:var(--accent)} .fl-token.dragging{cursor:grabbing;box-shadow:0 20px 40px -12px rgba(0,0,0,.6);z-index:1000;transform:scale(1.04) rotate(-1deg)} .fl-token.vanish{animation:flVanish .28s forwards} @keyframes flVanish{to{opacity:0;transform:scale(.5) rotate(6deg)}} .fl-drag-ph{border:1.5px dashed var(--gold-line);border-radius:10px;opacity:.6;flex:0 0 auto} /* conto in rosso */ /* conto disattivato: non incide sul totale */ /* SOLA LETTURA (admin non-owner): spese e debiti si guardano soltanto. Via i comandi di modifica di quelle zone e niente click/trascinamento sulle loro voci. La zona conti (saldi, entrate, bonifici) resta pienamente operativa. */ .fl-ro [data-fladdsp], .fl-ro [data-fladd], .fl-ro [data-flsort] { display:none; } .fl-ro [data-fldrop] { pointer-events:none; } .fl-ro #fl-lblqonto, .fl-ro #fl-lbldeutsche { pointer-events:none; cursor:default; } .fl-ro-badge{ display:inline-block; margin-left:12px; padding:3px 10px; border-radius:20px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); border:1px solid var(--border); background:var(--surface2); vertical-align:middle; } /* ── CATEGORIE delle spese (pill colorate, stile fonti delle call) ── Quattro tinte NUOVE, non usate altrove nell'app (niente oro/verde/rosso/ambra/ azzurro/porpora/arancione): turchese, indaco, fucsia, lime. */ .fl-cat-row{ flex-wrap:wrap; } .fl-catb.c-stipendi{ --cat:#2dd4bf; } .fl-catb.c-collab { --cat:#818cf8; } .fl-catb.c-tasse { --cat:#e879f9; } .fl-catb.c-eventi { --cat:#a3e635; } .fl-catb.on{ border-color:var(--cat,var(--accent)); color:var(--cat,var(--accent)); box-shadow:0 0 10px color-mix(in srgb, var(--cat, #d8b45e) 35%, transparent); } .fl-cat{ display:inline-block; padding:1px 7px; border-radius:20px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; line-height:1.6; color:var(--cat); border:1px solid var(--cat); background:color-mix(in srgb, var(--cat) 14%, transparent); } .fl-cat.c-stipendi{ --cat:#2dd4bf; } .fl-cat.c-collab { --cat:#818cf8; } .fl-cat.c-tasse { --cat:#e879f9; } .fl-cat.c-eventi { --cat:#a3e635; } /* tema Giorno (marmo): stesse tinte ma scurite, altrimenti su fondo chiaro sbiadiscono */ html.light .fl-cat.c-stipendi, html.light .fl-catb.c-stipendi{ --cat:#0d7f74; } html.light .fl-cat.c-collab, html.light .fl-catb.c-collab { --cat:#4f46e5; } html.light .fl-cat.c-tasse, html.light .fl-catb.c-tasse { --cat:#a832b8; } html.light .fl-cat.c-eventi, html.light .fl-catb.c-eventi { --cat:#5d7f10; } /* bersaglio di FUSIONE durante il trascinamento di una voce su un'altra */ .fl-token.merge-target{box-shadow:0 0 0 2px var(--accent),0 0 18px -4px var(--accent);border-color:var(--accent)} .fl-token.merge-target::after{content:'unisci';position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:var(--surface);padding:2px 7px;border-radius:12px;border:1px solid var(--gold-line);pointer-events:none} .fl-bonadd-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;flex:0 0 auto} .fl-bonadd{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 6px;border-radius:10px;border:1px dashed var(--gold-line);background:var(--gold-faint);color:var(--accent);font-size:11.5px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit;flex:0 0 auto} .fl-bonadd:hover{border-style:solid} .fl-bonadd svg{width:13px;height:13px} /* bonifici IN ARRIVO: verdi, aggiungono al conto */ .fl-bon.in .bamt{color:var(--green)} .fl-bon{cursor:pointer} .fl-bon.off{opacity:.45;filter:saturate(.25)} /* spento: resta in elenco ma non tocca il saldo */ .fl-bon .bdate{font-size:10px;color:var(--text);background:var(--gold-faint);padding:2px 8px;border-radius:14px;flex:0 0 auto;font-variant-numeric:tabular-nums} .fl-bon .bdate.late{color:var(--red);background:color-mix(in srgb,var(--red) 15%,transparent)} .fl-bon{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);flex:0 0 auto;animation:flTokenIn .32s backwards} .fl-bon.vanish{animation:flVanish .28s forwards} .fl-bon .fromtag{font-size:9px;font-weight:800;color:var(--accent);background:var(--gold-faint);padding:2px 7px;border-radius:12px;flex:0 0 auto;text-transform:uppercase;letter-spacing:.05em} .fl-bon .lab{font-size:13px;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fl-bon .bamt{font-family:var(--font-display);font-size:14px;color:var(--text);font-variant-numeric:tabular-nums;flex:0 0 auto} .fl-bon .payb{width:23px;height:23px;border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;opacity:.6;display:grid;place-items:center;flex:0 0 auto} .fl-bon .payb:hover{background:var(--accent);border-color:var(--accent);color:var(--bg);opacity:1} .fl-bon .edit{width:23px;height:23px;border:none;background:var(--gold-faint);color:var(--muted);border-radius:7px;font-size:11px;cursor:pointer;opacity:.5;display:grid;place-items:center;flex:0 0 auto} .fl-bon:hover .edit{opacity:1} /* VALVOLA sul condotto: piccolo nodo cliccabile al posto della vecchia cifra a pillola (il totale sta già nell'intestazione della colonna spese). Verde = scorre, grigio = staccato. */ .fl-flow-labels{position:absolute;inset:0;z-index:4;pointer-events:none} .fl-flow-label{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:var(--surface);border:1px solid var(--gold-line);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s,transform .15s;pointer-events:auto;cursor:pointer;user-select:none;box-shadow:0 0 10px -2px color-mix(in srgb,var(--gold-hi) 40%,transparent)} .fl-flow-label.on{opacity:1} .fl-flow-label:hover{transform:translate(-50%,-50%) scale(1.18)} .fl-flow-label .val,.fl-flow-label .plug{display:none} .fl-flow-label .d{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 7px color-mix(in srgb,var(--green) 70%,transparent)} .fl-flow-label.off{border-style:dashed;box-shadow:none} .fl-flow-label.off .d{background:var(--muted);box-shadow:none} /* calendario */ .fl-calview{min-height:560px;height:calc(100vh - 230px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden} .fl-calview[hidden]{display:none} .fl-cal-top{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border-bottom:1px solid var(--gold-line)} .fl-cal-title{font-family:var(--font-display);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase} /* RICERCA per nome, al centro della barra del registro: prende lo spazio che avanza fra il titolo e i filtri e resta centrata (Logan, ago 2026). Quando c'e' del testo il bordo si accende, come le altre tendine attive. */ .fl-vend-cerca{flex:1;display:flex;justify-content:center;padding:0 18px;min-width:0} .fl-vend-cerca input{width:100%;max-width:400px;padding:7px 13px;border-radius:99px; border:1px solid var(--border);background:var(--surface2);color:var(--text); font-family:inherit;font-size:13px;transition:.18s} .fl-vend-cerca input::placeholder{color:var(--muted)} .fl-vend-cerca input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--gold-faint)} .fl-vend-cerca input.on{border-color:var(--accent);color:var(--accent)} @media(max-width:900px){.fl-vend-cerca{flex-basis:100%;order:3;padding:10px 0 0}} /* vista + mese appaiati a destra della barra del registro incassi */ .fl-vend-filtri{display:flex;gap:8px;align-items:center} .fl-cal-nav{display:flex;gap:7px} .fl-cal-week{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border)} .fl-cal-week div{padding:6px 4px;font-size:9.5px;color:var(--muted);text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:.1em} .fl-cal-grid{flex:1;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(82px,1fr);gap:1px;background:var(--border);overflow-y:auto} .fl-cal-cell{background:var(--surface);padding:5px 6px;display:flex;flex-direction:column;gap:3px;overflow:hidden;min-width:0} .fl-cal-cell.out{opacity:.3} .fl-cal-cell.today{box-shadow:inset 0 0 0 1.5px var(--accent)} .fl-cal-d{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--text);flex:0 0 auto} .fl-cal-d b{color:var(--orange);font-size:9.5px;font-variant-numeric:tabular-nums} .fl-cal-cell.today .fl-cal-d span{color:var(--accent);font-weight:800} .fl-cal-sp{font-size:11px;background:var(--gold-faint);color:var(--text);border-radius:5px;padding:3px 7px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto;font-weight:600;font-variant-numeric:tabular-nums;transition:.15s} .fl-cal-sp:hover{background:color-mix(in srgb,var(--red) 20%,transparent)} .fl-cal-sp.off{opacity:.45;filter:saturate(.25)} .fl-cal-sp.paid{color:var(--muted);text-decoration:line-through;opacity:.7} /* modale */ .fl-overlay{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .22s} .fl-overlay.show{display:flex;opacity:1} .fl-modal{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--gold-line);border-radius:16px;padding:22px;transform:translateY(16px) scale(.97);transition:.25s cubic-bezier(.2,.9,.3,1)} .fl-overlay.show .fl-modal{transform:translateY(0) scale(1)} .fl-modal h3{font-family:var(--font-display);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px;color:var(--text)} .fl-field{margin-bottom:13px} .fl-field label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:600;letter-spacing:.04em} .fl-field input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:11px 13px;color:var(--text);font-size:14.5px;transition:.2s;font-family:inherit;box-sizing:border-box} .fl-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--gold-faint)} .fl-plan-row{display:grid;grid-template-columns:1fr 1fr;gap:9px} .fl-plan-info{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11.5px;color:var(--muted);background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:9px 11px} .fl-plan-info button{border:none;background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);border-radius:7px;padding:5px 9px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;flex:0 0 auto} .fl-fromb{padding:11px 6px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;transition:.18s;font-family:inherit} .fl-fromb.on{border-color:var(--accent);color:var(--accent);background:var(--gold-faint)} .fl-modal-actions{display:flex;gap:9px;margin-top:18px} .fl-btn{flex:1;padding:11px;border-radius:10px;border:1px solid var(--border);font-size:13px;font-weight:700;cursor:pointer;transition:.2s;font-family:inherit;background:var(--surface2);color:var(--muted)} .fl-btn:hover{color:var(--text);border-color:var(--gold-line)} .fl-btn.save{background:var(--gold-grad);color:#1c1608;border:none} .fl-btn.save:hover{filter:brightness(1.08)} .fl-btn.del{flex:0 0 auto;width:46px;color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent)} .fl-btn.del:hover{background:var(--red);color:#fff;border-color:var(--red)} @media(max-width:860px){ .fl-stage{min-height:0;height:auto;display:flex;flex-direction:column;gap:14px} .fl-zone{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:auto;min-height:180px} .fl-zone.collapsed{min-height:0} .fl-flows,.fl-flow-labels,.fl-liquid{display:none} } /* ── DATABASE SPESE (ago 2026): storico, replica del Business Plan ── */ /* i tab delle due sezioni di Uscite: stesso stile kb-tabs, solo meno aria sotto */ .fl-usc-tabs{margin-bottom:16px} /* importi incolonnati a destra, come nel registro incassi */ #fl-db-body .fl-db-imp{text-align:right;font-variant-numeric:tabular-nums} #fl-db-body th.fl-db-imp{text-align:right} /* colonnina delle azioni: stretta, i tasti si accendono al passaggio */ #fl-db-body .fl-db-azioni{width:1%;white-space:nowrap;text-align:right} .fl-db-mod,.fl-db-del{background:transparent;border:none;cursor:pointer;color:var(--muted); font-size:12px;font-family:inherit;padding:2px 6px;border-radius:6px;transition:.15s} .fl-db-mod:hover{color:var(--accent);background:var(--chip-bg-gold)} .fl-db-del:hover{color:var(--red);background:color-mix(in srgb, var(--red) 14%, transparent)} .fl-db-del.armato{color:var(--red);font-weight:700;background:color-mix(in srgb, var(--red) 18%, transparent)} /* il form di inserimento/modifica: una riga di campi che va a capo da sola */ .fl-db-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 14px; padding:12px;border:1px dashed var(--gold-line);border-radius:10px} .fl-db-form[hidden]{display:none} .fl-db-form input,.fl-db-form select{padding:6px 9px;border-radius:8px;border:1px solid var(--border); background:transparent;color:var(--text);font-family:inherit;font-size:12.5px} /* Palette del Database spese: i COLORI VERI del Conto economico del suo Excel (estratti dal file, ago 2026). Come FBA_PALETTE è un'eccezione voluta alla regola "colori solo da variabili": qui si replica il foglio. Sui temi scuri il pastello pieno sarebbe accecante: si usa come tinta (color-mix) per sfondo e bordo, e pieno solo dove il testo è scuro. */ .c-ads{--cs:#c9daf8} .c-software{--cs:#d9ead3} .c-staff{--cs:#fbe4d5} .c-consulenti{--cs:#d0e0e3} .c-eventi{--cs:#d5a6bd} .c-tasse{--cs:#e6b8af} .c-maurizio{--cs:#b4a7d6} .c-imprevisti{--cs:#d9d9d9} /* titolo di sezione: barretta piena + tinta leggera dietro */ .fl-db-sez{border-left:4px solid var(--cs);padding-left:10px;border-radius:4px; background:linear-gradient(90deg, color-mix(in srgb, var(--cs) 16%, transparent), transparent 70%)} /* la testata della tabella prende la tinta della sua categoria */ .fl-db-tab th{background:color-mix(in srgb, var(--cs) 14%, transparent);color:color-mix(in srgb, var(--cs) 72%, var(--text))} html.light .fl-db-tab th{background:color-mix(in srgb, var(--cs) 45%, transparent);color:color-mix(in srgb, var(--cs) 30%, #14161a)} /* Conto economico: l'etichetta di riga colorata come nel foglio */ .fl-db-riga .fl-db-eti{background:color-mix(in srgb, var(--cs) 22%, transparent); box-shadow:inset 3px 0 0 var(--cs)} html.light .fl-db-riga .fl-db-eti{background:color-mix(in srgb, var(--cs) 55%, transparent);color:#14161a} /* nota di una spesa: si apre sotto la sua riga col tasto occhio */ .fl-db-notarow td{background:var(--chip-bg-gold);color:var(--text);font-size:12.5px; font-style:italic;padding:8px 12px;box-shadow:inset 3px 0 0 var(--accent)} .fl-db-notarow[hidden]{display:none} /* riga TASSE calcolata: si distingue dalle spese vere, non si modifica */ .fl-db-calcolata td{background:color-mix(in srgb, var(--accent) 7%, transparent)} .fl-db-badge{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent); border:1px solid var(--accent2);border-radius:99px;padding:1px 7px;margin-left:6px;vertical-align:middle} .fl-db-giu{color:var(--green)} /* importi che abbassano il conto */ /* il conto delle tasse che si apre con l'occhio */ .fl-db-fisco{width:100%;border-collapse:collapse;font-size:12.5px} .fl-db-fisco th{text-align:left;padding:6px 10px;font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--gold-line)} .fl-db-fisco td{padding:6px 10px;border-bottom:1px solid var(--border)} .fl-db-fisco tr:hover td{background:color-mix(in srgb, var(--accent) 8%, transparent)} .fl-db-fisco .fl-db-imp{text-align:right;font-variant-numeric:tabular-nums} .fl-db-fisco-tot td{font-weight:700;border-bottom:none;border-top:1px solid var(--gold-line)} .fl-db-fisco-nota{color:var(--muted);font-style:italic;font-size:11.5px;border-bottom:none} /* dettaglio di una spesa (le note del Business Plan): elenco puntato, con l'importo staccato dalla descrizione quando la riga comincia con un numero */ .fl-db-dettaglio-tit{font-size:12px;color:var(--muted);margin:0 0 2px} .fl-db-dettaglio-testo{font-size:12.5px;color:var(--muted)} .fl-db-dettaglio{margin:0;padding:2px 0 2px 18px;list-style:none} .fl-db-dettaglio li{position:relative;padding:3px 0;font-size:12.5px;font-style:normal} .fl-db-dettaglio li::before{content:'·';position:absolute;left:-12px;color:var(--accent);font-weight:700} .fl-db-dettaglio .imp{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent); display:inline-block;min-width:64px} /* PANORAMICA del mese: una riga per categoria, il totale in fondo */ .fl-db-panoramica{margin-bottom:22px} .fl-db-panoramica .fl-db-quota{color:var(--muted);font-size:11.5px;width:1%;white-space:nowrap} .fl-db-panoramica .fl-vend-tot td{font-size:14px} /* ── EXTRA COMMERCIALI (ago 2026): quello che muove le fee dei venditori ── Il totale PER PERSONA è il numero che conta: Logan riporta quello nel database uscite, non le singole voci, quindi sta grande accanto al nome. Verde e rosso qui non sono entrate e uscite ma il SEGNO dell'extra: positivo aggiunge alla fee, negativo toglie. */ #fl-ex-body .fl-db-imp{text-align:right;font-variant-numeric:tabular-nums} #fl-ex-body th.fl-db-imp{text-align:right} #fl-ex-body .fl-db-azioni{width:1%;white-space:nowrap;text-align:right} .fl-ex-su{color:var(--green)} .fl-ex-giu{color:var(--red)} .fl-ex-form select{min-width:130px} .fl-ex-blocco{margin-bottom:20px} .fl-ex-testa{display:flex;justify-content:space-between;align-items:baseline;gap:12px; padding:8px 12px;border-radius:9px 9px 0 0;border:1px solid var(--gold-line);border-bottom:none; background:linear-gradient(90deg, var(--gold-faint), transparent 75%)} .fl-ex-nome{font-family:var(--font-display);font-size:12px;letter-spacing:.1em; text-transform:uppercase;color:var(--text)} .fl-ex-tot{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums} .fl-ex-tab{border:1px solid var(--gold-line);border-top:none;border-radius:0 0 9px 9px} .fl-ex-tab td{padding:7px 12px} /* le richieste dei venditori ancora da approvare: spente, e fuori dal totale */ #fl-ex-body tr.fl-ex-attesa td{opacity:.55} .fl-ex-badge-attesa{color:var(--orange)!important;border-color:var(--orange)!important} .fl-ex-ritocca{background:transparent;border:1px dashed var(--gold-line);color:var(--muted); font-size:11px;font-family:inherit;padding:2px 8px;border-radius:99px;cursor:pointer;transition:.15s} .fl-ex-ritocca:hover{color:var(--accent);border-color:var(--accent);border-style:solid} .fl-ex-chiudi{background:transparent;border:none;cursor:pointer;color:var(--muted); font-size:12px;font-family:inherit;padding:2px 6px;border-radius:6px;transition:.15s} .fl-ex-chiudi:hover{color:var(--red);background:color-mix(in srgb, var(--red) 14%, transparent)} .fl-ex-chiudi.armato{color:var(--red);font-weight:700;background:color-mix(in srgb, var(--red) 18%, transparent)} #fl-ex-body tr.fl-ex-chiusa td{opacity:.5} .fl-ex-nota{font-size:11.5px;color:var(--muted);margin:8px 2px 0;line-height:1.5} /* il totale di tutti: chiude la pagina come la riga Totale del mese altrove */ .fl-ex-complessivo{display:flex;justify-content:space-between;align-items:baseline; margin-top:20px;padding:12px 14px;border-top:1px solid var(--gold-line); font-size:14px;color:var(--muted)} .fl-ex-complessivo span:last-child{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums} /* la composizione del totale, in piccolo sotto l'etichetta: dice da dove esce il numero senza costringere a rifare la somma a occhio */ .fl-ex-complessivo em{display:block;font-style:normal;font-size:11.5px; color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums} .fl-ex-tab-fisse{margin-bottom:18px} /* il QUADRO del mese in cima alla panoramica: quanto spetta a ciascuno in tutto, diviso in fee di vendita, coaching ed extra. Le righe si aprono. */ .fl-ex-quadro{margin-bottom:8px} .fl-ex-quadro .fl-ex-vaia{cursor:pointer} .fl-ex-quadro .fl-ex-vaia:hover td{background:var(--gold-faint)} .fl-ex-quadro .fl-ex-vaia:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)} /* TENDINE APERTE in modalità notte: l'elenco delle