/* ==== Design tokens ==== Nomi e valori del design system (artifact 8BohHWZ1pcofSCeCfdhmfH, project/tokens.css), in un solo :root (22/10, 0.146.0). I nomi vecchi (--bg-card, --color-success, --teal…) restano come alias dei nuovi, così le regole esistenti non cambiano; le regole nuove usano solo i nomi del DS. */ :root{ /* Superfici */ --bg:#17191B; --backdrop:#17191B; --surface:#1D1F22; --surface-alt:#222427; --surface-tile:#272A2F; --surface-input:#141618; /* Testo e linee */ --ink:#F4F2EC; --muted:rgba(244,242,236,0.68); --text-tertiary:rgba(244,242,236,0.52); /* 0.45 → 0.52 (12/10): 4,1:1 → 5,0:1 sulle card */ --line:rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.14); /* Giallo Cuentaduro */ --accent:#F9B900; --accent-hover:#FFC21A; --accent-soft:rgba(249,185,0,0.12); --accent-border:rgba(249,185,0,0.45); --on-accent:#241503; --accent-ink:#F9B900; /* Destinazioni (identità, non stato) */ --dest-vivir:#6FA8FF; --dest-proteger:#F5B7A6; --dest-crecer:#F6C247; --dest-disfrutar:#4ADCB6; --dest-deudas:#E8887A; /* Tonalità di Vivir (DS, 26/10: le righe di un destino usano le sue sfumature, dalla più forte) */ --dest-vivir-1:#418CFF; --dest-vivir-2:#6FA8FF; --dest-vivir-3:#93BEFF; --dest-vivir-4:#B6D3FF; --dest-vivir-5:#D2E3FF; --dest-neutral:#D9D6CF; /* Stato */ --success:#4FC3A1; --warning:#E9A83B; --danger:#E76F61; --info:#6FA8DC; --fire:#FF6248; /* solo quando hai sforato il piano (era #FF3B1F, audit 0.107) */ --success-soft:rgba(79,195,161,0.12); --warning-soft:rgba(233,168,59,0.12); --danger-soft:rgba(231,111,97,0.12); --info-soft:rgba(111,168,220,0.12); /* Alias dei nomi vecchi: non usarli nelle regole nuove */ --bg-card:var(--surface); --bg-card-alt:var(--surface-alt); --bg-input:var(--surface-input); --color-border-strong:var(--border-strong); --color-text-tertiary:var(--text-tertiary); --color-success:var(--success); --color-success-soft:var(--success-soft); --color-warning:var(--warning); --color-warning-soft:var(--warning-soft); --color-danger:var(--danger); --color-danger-soft:var(--danger-soft); --color-info:var(--info); --color-info-soft:var(--info-soft); --teal:var(--success); --teal-soft:var(--success-soft); --coral:var(--danger); --coral-soft:var(--danger-soft); --gold:var(--dest-crecer); --gold-soft:rgba(246,194,71,0.12); --blue:var(--info); --blue-soft:var(--info-soft); /* Raggi, spazi, ombre, movimento */ --radius:10px; /* alias di --radius-md */ --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px; --radius-pill:999px; --font-size-xs:12px; --font-size-sm:14px; --font-size-md:16px; --font-size-lg:18px; --font-size-xl:24px; --font-size-2xl:32px; --font-size-3xl:44px; --font-size-display:56px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --shadow-sm:0 2px 8px rgba(0,0,0,0.18); --shadow-md:0 8px 24px rgba(0,0,0,0.22); --ease-out-strong:cubic-bezier(0.23, 1, 0.32, 1); --landing-max:1100px; /* standard section content width on the marketing landing page (docs/Cuentaduro_Landing_Design_System.md #21) */ --landing-card-pad:36px 32px;/* standard .landing-card padding */ --landing-box-gap:24px; /* horizontal gap between .overview-csp-box items in any landing box row */ --landing-stack-gap:24px; /* vertical gap between stacked blocks inside a .landing-card */ --landing-column-gap:40px; /* gap between the two columns of a split .landing-card (e.g. the quiz) */ } *{box-sizing:border-box;} html, body{overflow-x:hidden; max-width:100%;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Nunito Sans', sans-serif; -webkit-font-smoothing:antialiased; } .app{max-width:1180px;margin:0 auto;padding:28px 20px 80px; width:100%;} header.top{ display:flex;align-items:center;justify-content:space-between; border-bottom:2px solid var(--line); padding-bottom:16px; margin-bottom:20px; flex-wrap:wrap; gap:10px; } header.top h1{margin:0;} header.top h1.logo-link{transition:opacity .15s ease;} header.top h1.logo-link:hover{opacity:0.8;} header.top .sub{font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:1px;} .header-right{display:flex; align-items:center; gap:14px; margin-left:auto;} .icon-only-btn{ background:none; border:none; color:var(--muted); font-size:34px; cursor:pointer; padding:4px; line-height:1; transition:color .15s ease; display:inline-flex; align-items:center; justify-content:center; } .icon-only-btn:hover, .icon-only-btn.active{color:var(--accent);} .icon-only-btn.small{font-size:20px; padding:2px;} .view-switch{ display:inline-flex; border:1.5px solid var(--line); border-radius:8px; } .view-switch-btn{ background:var(--bg-card); color:var(--muted); border:none; cursor:pointer; padding:7px 12px; display:inline-flex; align-items:center; justify-content:center; transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); } .view-switch-btn:first-child{border-radius:6.5px 0 0 6.5px;} .view-switch-btn:last-child{border-radius:0 6.5px 6.5px 0;} .view-switch-btn:not(:last-child){border-right:1.5px solid var(--line);} .view-switch-btn.active{background:var(--accent); color:var(--on-accent);} .view-switch-btn:hover:not(.active){color:var(--ink);} .eur-blur{transition:filter .15s ease;} .app.blur-active .eur-blur{filter:blur(6px); user-select:none;} .user-menu-popover{ display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:120; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:0 6px 16px rgba(0,0,0,0.45); padding:16px; width:260px; } .user-menu-popover.show{display:block;} .user-menu-popover .note{margin-bottom:12px;} .card-header-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; cursor:pointer;} .card-header-row.no-margin{margin-bottom:0;} .card .card-header-row h2, .confirm-box .card-header-row h2{margin:0;} nav.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px;} nav.tabs button{ font-family:'Nunito Sans'; font-size:14px; font-weight:600; padding:9px 16px; border-radius:999px; border:1.5px solid var(--line); background:var(--bg-card); color:var(--muted); cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); display:inline-flex; align-items:center; gap:7px; } nav.tabs button.active{background:var(--accent); color:var(--on-accent); border-color:var(--accent);} nav.tabs .nav-icon{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; } nav.tabs .nav-icon svg{width:100%; height:100%; display:block;} /* Desktop only (sotto i 640px vale il blocco mobile più sotto, invariato): gap/padding leggermente ridotti per far stare tutte le pill su una sola riga anche con più sezioni opzionali attive (Famiglia/Autónomo/Debiti/ Investimenti/Carta di credito) — stesso font-size/colori/border-radius, solo spaziatura più compatta. */ @media (min-width:641px){ nav.tabs{gap:4px;} nav.tabs button{padding:8px 12px; gap:5px;} } nav.tabs button:hover:not(.active){border-color:var(--accent); color:var(--ink);} section.panel{display:none;} section.panel.active{display:block; animation:fade .25s ease;} @keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}} .settings-layout{display:flex; gap:24px; align-items:flex-start;} .settings-sidebar{display:flex; flex-direction:column; gap:6px; flex:0 0 200px; position:sticky; top:20px;} .settings-sidebar button{ font-family:'Nunito Sans'; font-size:14px; font-weight:600; text-align:left; padding:10px 14px; border-radius:var(--radius-md); border:1.5px solid var(--line); background:var(--bg-card); color:var(--muted); cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); } .settings-sidebar button.active{background:var(--accent); color:var(--on-accent); border-color:var(--accent);} .settings-sidebar button:hover:not(.active){border-color:var(--accent); color:var(--ink);} .settings-content{flex:1; min-width:0;} .settings-group{display:none;} .settings-group.active{display:block;} @media (max-width:640px){ .settings-layout{flex-direction:column; align-items:stretch;} .settings-sidebar{flex-direction:row; flex-wrap:wrap; flex:0 0 auto; position:static; width:100%;} .settings-sidebar button{flex:0 0 auto;} } /* nav.tabs wraps onto several rows on narrow screens by default (the base rule earlier in this file), pushing all page content down before you can even see it. On mobile it scrolls horizontally in one row instead, closer to a native app's tab strip. */ @media (max-width:640px){ nav.tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; -webkit-mask-image:linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%); mask-image:linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%); scrollbar-width:none; -ms-overflow-style:none; } nav.tabs::-webkit-scrollbar{display:none;} nav.tabs button{flex:0 0 auto;} .scroll-x{scrollbar-width:none; -ms-overflow-style:none;} .scroll-x::-webkit-scrollbar{display:none;} } /* v3 Fase 2 — riga di sotto-navigazione per i gruppi Dinero/Patrimonio: display:none di default, JS (activateTab()) la mostra impostando 'flex' solo per il gruppo del tab attivo. Stessa forma a pillola di nav.tabs button ma più piccola/meno prominente (è un secondo livello, non deve competere visivamente col primo) e con un filo separatore sopra per leggerla come dipendente dalla riga principale, non un'altra nav a sé. */ .tabs-subnav{ display:none; gap:4px; flex-wrap:wrap; margin:-14px 0 22px; padding-top:12px; border-top:1px solid var(--line); } .tabs-subnav button{ font-family:'Nunito Sans'; font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:999px; border:1.5px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); display:inline-flex; align-items:center; gap:5px; } .tabs-subnav button.active{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);} .tabs-subnav button:hover:not(.active){border-color:var(--accent); color:var(--ink);} .tabs-subnav .nav-icon{width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;} .tabs-subnav .nav-icon svg{width:100%; height:100%; display:block;} @media (max-width:640px){ .tabs-subnav{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; -webkit-mask-image:linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%); mask-image:linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%); scrollbar-width:none; -ms-overflow-style:none; } .tabs-subnav::-webkit-scrollbar{display:none;} .tabs-subnav button{flex:0 0 auto;} } .card{ background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:18px 20px; margin-bottom:16px; } .card h2, .confirm-box h2{font-family:'Spectral',serif; font-weight:600; font-size:19px; margin:0 0 14px; color:var(--ink);} .confirm-box h2{margin:0;} .grid{display:grid; gap:14px;} /* minmax(0,1fr), non il semplice 1fr: una traccia "1fr" ha comunque un minimo implicito pari al contenuto più largo al suo interno (auto), che può superare lo spazio disponibile e far scorrere l'intera pagina in orizzontale invece di andare a capo — bug classico di CSS Grid, osservato qui con 3 fund-card affiancate su schermi stretti dove il box conto investimenti non collassava correttamente. minmax(0,1fr) forza il minimo a 0, lasciando che il contenuto vada a capo/tronchi dentro la sua colonna invece di spingerla oltre. */ .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));} .grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start;} @media (max-width:760px){ .grid.cols-3, .grid.cols-2{grid-template-columns:1fr;} } /* Cuentas: Distribución por cuenta 60%, Grafici 40% (23/10, Mattia); una colonna sotto i 1000px. */ .grid.cols-2.cuentas-split{grid-template-columns:minmax(0,3fr) minmax(0,2fr);} @media (max-width:1000px){ .grid.cols-2.cuentas-split{grid-template-columns:1fr;} } /* Griglia dei fondi (Investimenti → box conto): a differenza delle altre .grid.cols-3 dell'app (es. box Fondo di emergenza), ogni colonna qui contiene una fund-card con due importi affiancati (Investito/Valore attuale), che ha bisogno di più spazio minimo per non forzare i numeri ad andare a capo carattere per carattere. Un singolo scalino fisso a 1 colonna (come .grid.cols-3 generico) lasciava le card a piena larghezza — leggibili ma sproporzionate — non appena lo spazio scendeva sotto quella soglia, invece di affiancarne comunque due appena lo spazio lo consente. `repeat(auto-fit, minmax(340px,1fr))` risolve entrambi: quante colonne da 340px+ entrano nella larghezza disponibile (1, 2 o 3 a seconda dei fondi presenti), senza un breakpoint fisso da mantenere. 340px verificato come il minimo che non fa ancora sovrapporre gli importi nella riga Investito/Valore attuale. */ .grid.cols-3.inv-funds-grid{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));} /* Griglia debiti (Debiti): stessa esigenza della griglia fondi qui sopra — ogni debt-card ha una riga a 3 colonne (saldo iniziale/residuo/rata), ancora più densa dei 2 importi affiancati della fund-card, quindi un minimo leggermente più alto. */ .grid.cols-2.debts-grid{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));} .filters-panel{ background:var(--bg-card-alt); border:1px solid var(--line); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:14px; } .filters-panel-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; cursor:pointer; gap:10px; } .filters-panel-header.no-margin{margin-bottom:0;} .filters-panel-title{ font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:600; } .filters-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; } .filters-section-label{ font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin:14px 0 8px; font-weight:600; } .filters-section-label:first-of-type{margin-top:2px;} .filters-active-badge{ display:inline-block; background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:700; border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:middle; } .multiselect-trigger{ font-family:'Nunito Sans'; font-size:14px; padding:7px 9px; border:1px solid var(--line); border-radius:6px; background:var(--bg-input); color:var(--ink); width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; text-align:left; } .multiselect-trigger:hover{border-color:var(--muted);} .multiselect-arrow{color:var(--muted); font-size:11px;} .multiselect-dropdown{ position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50; background:var(--bg-card); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.35); max-height:220px; overflow-y:auto; padding:6px; } .multiselect-option{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; cursor:pointer; font-size:14px; } .multiselect-option:hover{background:var(--bg-input);} .multiselect-option input{width:auto; margin:0;} .multiselect-search{ width:100%; font-family:'Nunito Sans'; font-size:13px; padding:6px 8px; margin-bottom:6px; border:1px solid var(--line); border-radius:6px; background:var(--bg-input); color:var(--ink); position:sticky; top:0; z-index:1; } .multiselect-search:focus{outline:none; border-color:var(--blue);} .multiselect-footer{ display:flex; justify-content:space-between; gap:8px; padding:6px 8px 2px; border-top:1px solid var(--line); margin-top:4px; } .multiselect-footer button{ background:none; border:none; color:var(--blue); font-size:12px; cursor:pointer; padding:2px 4px; } .multiselect-footer button:hover{text-decoration:underline;} .floating-action-bar{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:1000; max-width:calc(100% - 32px); width:auto; background:var(--bg-card); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:12px 16px; box-shadow:0 8px 28px rgba(0,0,0,0.35); } .fab-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; } .fab-count{font-size:13px; font-weight:600; color:var(--ink);} .fab-close{ background:none; border:none; color:var(--muted); font-size:15px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:6px; transition:background .15s ease, color .15s ease; } .fab-close:hover{background:var(--bg-input); color:var(--ink);} .fab-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px;} .fab-group{display:flex; flex-wrap:wrap; align-items:center; gap:6px;} .fab-group select{width:auto; min-width:150px;} .fab-group-label{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-right:2px; } .fab-divider{width:1px; align-self:stretch; background:var(--line); margin:2px 2px;} .tx-summary-bar{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; background:var(--bg-card-alt); border:1px solid var(--line); border-radius:8px; padding:10px 14px; margin-bottom:12px; font-size:13px; } .tx-summary-bar .tx-summary-item{display:flex; gap:6px; align-items:baseline;} .tx-summary-bar .tx-summary-label{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.4px;} .tx-summary-bar .tx-summary-value{font-family:'IBM Plex Mono',monospace; font-weight:500;} /* Vista a card di Movimenti per mobile (vedi renderTransactions()/txCardHtml() in app.js) — nascosta di default, sostituisce la tabella sotto i 640px: più leggibile da scorrere di una tabella stretta, con le azioni (crea trasferimento/annulla/salda/modifica) nascoste finché non si tocca la card invece di affollare ogni riga di icone. */ .tx-cards{display:none;} @media (max-width:640px){ #transactions-table-wrap, #recurring-table-wrap, #subscriptions-table-wrap, #cc-table-wrap, #investment-history-table-wrap{display:none;} .tx-cards{display:block;} } /* Giorno su mobile: titolino section, il totale in mono (guida Table). */ .tx-card-date-group{ display:flex; justify-content:space-between; align-items:baseline; font-family:'Nunito Sans',sans-serif; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:18px 0 8px; } .tx-card-date-group > span:last-child{font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:14px; text-transform:none; letter-spacing:0; color:var(--ink);} .tx-card-date-group:first-child{margin-top:0;} .tx-card{ background:var(--bg-card-alt); border:1px solid var(--line); border-radius:var(--radius-md); margin-bottom:8px; overflow:hidden; } .tx-card.future{opacity:.75;} .tx-card.editing{opacity:1;} /* Bordo dorato quando le azioni sono aperte — lo stesso trattamento già usato altrove nell'app (nodi del Sankey, box in evidenza) per segnalare "questo elemento è attivo/espanso". */ .tx-card.expanded{border-color:var(--accent);} .tx-card-main{padding:12px 14px; cursor:pointer; display:flex; flex-direction:column; gap:6px;} /* Card senza azioni da rivelare (es. storico aggiornamenti investimenti): stessa struttura/spaziatura di .tx-card-main ma senza il cursore a mano, che altrimenti lascerebbe intendere un tap possibile dove non c'è nessuna azione dietro. */ .tx-card-main.static{cursor:default;} /* Riga 1: descrizione + importo. */ .tx-card-row1{display:flex; justify-content:space-between; align-items:baseline; gap:10px;} .tx-card-label{font-weight:600; font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;} .tx-card-amount{font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:16px; white-space:nowrap; flex:0 0 auto;} /* Riga 2: solo conto/giorno/prossimo addebito, allineato a destra — il tipo/stato si è spostato sulla riga 3 insieme alla categoria (a sinistra). */ .tx-card-row2{display:flex; justify-content:flex-end; align-items:center; gap:10px; font-size:12px;} .tx-card-account{color:var(--muted); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; display:flex; align-items:center; gap:4px; justify-content:flex-end;} /* Riga 3: tipo/stato + categoria, entrambi a sinistra — con un'iconcina a forma di etichetta per segnalare che quel testo è una categoria e non un altro dettaglio qualsiasi. flex-wrap perché pill+icona+testo possono non stare su una riga sola in una card stretta. */ .tx-card-row3{display:flex; flex-wrap:wrap; align-items:center; gap:5px 8px; font-size:12px; color:var(--muted);} .tx-card-cat-icon{display:inline-flex; color:var(--muted); flex:0 0 auto;} /* Le azioni occupano tutta la larghezza della card, divise in parti uguali tra i 3 o 4 bottoni presenti (crea trasferimento/annulla/[salda]/ modifica) — target di tap grandi e inequivocabili invece di quadratini piccoli ammassati a sinistra. */ .tx-card-actions{display:flex; gap:8px; padding:0 14px 12px;} .tx-card-actions .icon-action-btn{flex:1; width:auto; height:44px;} @media (max-width:640px){ .tx-card-actions .icon-action-btn{height:48px; font-size:18px;} } .tx-card-actions .icon-action-btn.reveal-on-hover{opacity:1;} .tx-card .inline-edit-panel{margin:0 14px 14px;} @media (max-width:640px){ .fab-divider{display:none;} .fab-actions{flex-direction:column; align-items:stretch;} .fab-group{justify-content:space-between;} .row-inline .field{flex:1 1 100%; min-width:0;} .row-inline > button.btn{flex:1 1 100%;} /* Fields in "Registra un movimento" stack full-width on mobile (the rule above), so the row's own gap becomes the vertical space between them — the default 8px reads as cramped once everything's stacked instead of side by side. */ #add-movement-overlay .row-inline{gap:18px;} /* Da/A restano affiancati anche su mobile invece di impilarsi come gli altri campi (richiesta esplicita): l'ID vince sulla regola generica ".row-inline .field" sopra a prescindere dall'ordine nel foglio di stile. calc(50% - 9px) tiene conto dei 18px di gap impostati qui sopra per questo overlay, così le due select sommano esattamente al 100%. */ #mv-from-field, #mv-to-field{flex:1 1 calc(50% - 9px);} /* Intestazione di Movimenti/Movimenti ricorrenti/Abbonamenti: titolo e azione primaria impilati invece di accostati in uno spazio troppo stretto, bottone a piena larghezza e più alto (48px, oltre il minimo di 44pt) per essere un target di tap inequivocabile — coerente con le indicazioni Apple sulla gerarchia visiva delle azioni primarie su mobile. Nome generico (non solo "movements"): stesso trattamento riusato identico sulle tre schede a lista di Movimenti. */ .list-panel-header{flex-direction:column; align-items:stretch; gap:12px;} .list-panel-header > div{width:100%;} .list-panel-primary-btn{width:100%; min-height:48px; font-size:15px;} /* La barra di icone secondarie (duplicati/vista/import CSV) si dispone centrata e con più margine tra i gruppi, ora che ogni pulsante è cresciuto a 44px — con il gap di 8px di prima sarebbero rimasti comunque appiccicati anche se singolarmente più grandi. */ .list-panel-toolbar{justify-content:center; gap:14px;} } .list-stack{display:flex; flex-direction:column; gap:14px;} .overview-csp-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;} .overview-csp-grid.has-debts{grid-template-columns:repeat(5,1fr);} @media (max-width:900px){ .overview-csp-grid, .overview-csp-grid.has-debts{grid-template-columns:repeat(2,1fr);} .overview-csp-grid.has-debts .overview-csp-box-highlight{grid-column:span 2;} } @media (max-width:560px){ .overview-csp-grid{grid-template-columns:repeat(2,1fr);} } /* Non si tocca: niente bordo, solo l'ombra (23/10, DS Card "Borde = se toca"). */ .overview-csp-box{ background:var(--bg-card-alt); box-shadow:var(--shadow-sm); border-radius:8px; padding:16px 10px; display:flex; flex-direction:column; gap:4px; text-align:center; } .overview-csp-box .value{font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:500; color:var(--ink);} .overview-csp-box .label{font-family:'Nunito Sans'; font-size:11.5px; color:var(--muted);} /* Plan mobile (docs/Cuentaduro_Design_System_Delta_Spec.v4.md #4): "il blocco Plan deve dare maggiore importanza ai valori numerici" — non cambia la griglia 2x2, solo la gerarchia tipografica al suo interno: con 2 colonne invece di 5 ogni box ha più larghezza reale, quindi il valore può essere più grande senza mai andare a capo. */ @media (max-width:560px){ .overview-csp-box{padding:18px 12px;} .overview-csp-box .value{font-size:24px;} } .overview-csp-box-highlight{box-shadow:inset 0 0 0 1px var(--accent), var(--shadow-sm); background:var(--accent-soft);} .csp-bar{position:relative; height:8px; border-radius:4px; background:var(--bg); border:1px solid var(--line); margin-top:8px;} .csp-bar-ideal{position:absolute; top:0; bottom:0; background:var(--accent-soft); border-radius:4px;} .csp-bar-actual{position:absolute; top:-3px; bottom:-3px; width:3px; margin-left:-1.5px; border-radius:1.5px; background:var(--ink);} .csp-bar-actual.in-range{background:var(--teal);} .csp-bar-actual.out-range{background:var(--coral);} .csp-bar-actual.debt{background:var(--dest-deudas);} .csp-bar-caption{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink); margin-top:6px;} .muted-inline{font-family:'Nunito Sans'; color:var(--muted);} /* v3 Fase 3 — tab Piano: griglia dei 4 box (Vivir/Proteger/Crecer/ Disfrutar), riusa .overview-csp-box per il singolo box ma con un proprio conteggio colonne — stesso numero di .overview-csp-grid di Panoramica (anch'essa a 4 box dal 2026-09-11, dopo la rimozione del box "Patrimonio totale"), breakpoint separati perché le due griglie vivono in card di larghezza diversa. */ .plan-buckets-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px;} @media (max-width:760px){ .plan-buckets-grid{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:420px){ .plan-buckets-grid{grid-template-columns:1fr;} } /* Barra di avanzamento del Fondo di emergenza verso il target fisso di 12 mesi di spesa Vivir (sez. 3.3) — un riempimento singolo verso un traguardo, non una fascia ideale come .csp-bar: semantica diversa, stile dedicato invece di forzare il componente esistente. */ .plan-proteger-bar{position:relative; height:8px; border-radius:4px; background:var(--bg); border:1px solid var(--line); margin-top:8px; overflow:hidden;} .plan-proteger-bar-fill{position:absolute; top:0; bottom:0; left:0; background:var(--teal); border-radius:4px;} .plan-cat-row{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px;} .plan-cat-row:last-child{border-bottom:none;} /* Larghezza minima assoluta: i nodi sono posizionati in percentuale sul contenitore (NODE_W_PCT in renderRecurringFlowChart(), fino al 20%), quindi su schermi stretti si stringono fino a diventare illeggibili invece di restare leggibili scorrendo. #recurring-flow-content (vedi .scroll-x in index.html) fa scorrere solo questo grafico entro il proprio box, senza spingere in larghezza il resto della card. Un primo tentativo a 700px dava solo ~140px per nodo (20% di 700) — ancora troppo poco per icona+nome+importo sulla stessa riga senza troncare (segnalato dall'utente con screenshot). 1200px dà ~240px per nodo, verificato leggibile anche coi nomi conto più lunghi presenti nei dati reali. */ .recurring-flow-sankey{position:relative; height:420px; min-width:1200px;} .recurring-flow-sankey-svg{position:absolute; top:0; left:0; width:100%; height:100%; display:block;} .recurring-flow-sankey-node{ position:absolute; display:flex; align-items:center; gap:6px; box-sizing:border-box; background:var(--bg-card-alt); border:1px solid var(--accent); border-radius:6px; padding:4px 12px; gap:8px; overflow:hidden; } .recurring-flow-sankey-node-name{font-size:11.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;} .recurring-flow-sankey-node-amt{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted); white-space:nowrap; flex:0 0 auto; margin-left:auto; padding-left:6px;} @media (max-width:640px){ .recurring-flow-sankey-node-name{font-size:11px;} .recurring-flow-sankey-node-amt{font-size:11px;} } .overview-csp-box-highlight .value{color:var(--accent);} .stat{ border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; background:var(--bg-card-alt); display:flex; justify-content:space-between; align-items:center; gap:10px; } /* Il totale grande non si tocca: niente bordo, solo l'ombra (DS Card "Borde = se toca"). Le righe .stat dei conti tengono il bordo: alcune sorelle si aprono, e tra sorelle vale la stessa regola. */ .stat.total{border:none; box-shadow:var(--shadow-sm);} .stat .label{font-size:11.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:600;} .bank-badge{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:9.5px; font-weight:700; color:#fff; margin-right:7px; vertical-align:middle; font-family:'Nunito Sans', sans-serif; letter-spacing:0.3px; } .bank-badge-img{ width:22px; height:22px; border-radius:6px; margin-right:7px; vertical-align:middle; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,0.08); } .stat .value{font-family:'IBM Plex Mono',monospace; font-size:28px; font-weight:500; color:var(--ink); white-space:nowrap;} /* Rimossa la regola .stat.total .value{color:var(--teal);} (documento delta v4, sez. 6 Financial Metric: "non colorare automaticamente tutti i numeri" — un valore normale deve restare colore primario, non un teal incondizionato solo perché sta dentro un box .stat.total). Coloriva indiscriminatamente saldo dovuto carta di credito, mesi per saldare un debito, mesi coperti dal fondo di emergenza ed entrate nette Autonomo, nessuno dei quali è genuinamente un "guadagno" — es. un debito da pagare appariva in verde. .stat .value{color:var(--ink);} sopra resta il colore di base; dove un valore ha davvero uno stato positivo/ negativo (es. Saldo IVA, guadagno/perdita fondi) la colorazione è ora esplicita nella funzione che lo genera, non ereditata da questa classe. */ /* debt-forecast-months can show a text message ("Nunca al ritmo actual") instead of a short amount — nowrap (needed for monetary values elsewhere) would force the whole card to scroll horizontally on mobile for that longer text. */ #debt-forecast-months{white-space:normal; word-break:break-word;} .stat.has-sub{flex-direction:column; align-items:stretch; gap:6px;} .stat-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 12px;} .credit-note{font-size:14px; color:var(--muted); font-family:'IBM Plex Mono',monospace;} details.bank-detail{cursor:pointer; display:block;} details.bank-detail summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; } details.bank-detail summary::-webkit-details-marker{display:none;} details.bank-detail summary::marker{content:'';} details.bank-detail summary::after{ content:'◂'; font-size:20px; color:var(--muted); margin-left:8px; font-family:'IBM Plex Mono',monospace; display:inline-block; transition:transform .15s ease; } details.bank-detail[open] summary::after{transform:rotate(-90deg);} .collapse-arrow{ display:inline-block; font-size:20px; color:var(--muted); font-family:'IBM Plex Mono',monospace; transition:transform .15s ease; } .collapse-arrow.open{transform:rotate(-90deg);} details.bank-detail summary .label{flex:1;} .detail-list{margin-top:12px; border-top:1px solid var(--line); padding-top:8px;} .detail-row{display:flex; justify-content:space-between; align-items:baseline; padding:8px 8px; gap:10px; border-radius:6px;} .detail-row:nth-child(even){background:rgba(255,255,255,0.03);} /* Memo rows (interest accrued, monthly reserve, guilty-free spending) are wrapped by app.js in a .detail-memo-group container — a distinct boxed section with its own background, so they read as a summary/footnote under the account list rather than more rows of the same table. */ .detail-memo-group{ margin-top:12px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,0.025); } .detail-memo-group-title{ font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:600; padding:6px 8px 2px; } .detail-row.detail-memo{font-style:italic;} .detail-row.detail-memo:nth-child(even){background:none;} .detail-row.detail-memo .detail-name{color:var(--muted);} .detail-row.detail-memo .detail-bal{color:var(--gold);} .detail-row.detail-nested{padding-left:18px; border-left:1px dashed var(--line); margin-left:4px;} .detail-row.detail-nested-2{padding-left:34px; border-left:1px dashed var(--line); margin-left:20px;} .detail-name{font-size:13px; color:var(--ink); display:flex; flex-direction:column;} .pocket-name-row{display:inline-flex; align-items:center; gap:6px;} .detail-type{font-size:12px; color:var(--muted); font-weight:400;} .detail-bal{font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--ink); white-space:nowrap;} /* Donut charts */ .donut-wrap{display:flex; align-items:center; gap:20px; flex-wrap:wrap;} .donut-chart{ width:140px; height:140px; min-width:140px; border-radius:50%; position:relative; } .donut-hole{ position:absolute; inset:20px; background:var(--bg-card); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:4px; } .donut-center-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;} .donut-center-value{font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:500; color:var(--ink); margin-top:2px;} .donut-legend{display:flex; flex-direction:column; gap:7px; flex:1; min-width:150px;} .donut-legend-item{display:flex; align-items:center; gap:8px; font-size:12.5px;} .donut-swatch{width:10px; height:10px; border-radius:3px; flex:0 0 auto;} .donut-legend-label{flex:1; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .donut-legend-value{font-family:'IBM Plex Mono',monospace; color:var(--muted); white-space:nowrap; font-size:12px;} .growth-chart-value{font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:500; color:var(--gold); margin-bottom:8px;} .growth-chart-svg{width:100%; height:180px; display:block;} .growth-chart-labels{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:6px;} table{width:100%; border-collapse:collapse; font-size:14px;} th{ text-align:left; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border-bottom:1.5px solid var(--line); padding:8px 8px; } td{padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:middle; color:var(--ink);} @media (hover:hover) and (pointer:fine){ tr:hover td{background:var(--surface-alt);} } tr.row-selected td{background:var(--surface-alt);} .amt-out{color:var(--danger);} .amt-in{color:var(--success);} td.num, th.num{font-family:'IBM Plex Mono',monospace; text-align:right;} .cc-table{table-layout:fixed; min-width:600px;} tr.date-group-row:hover td{background:none;} tr.date-group-row td{padding:0; border-bottom:none;} .date-group-header{ display:flex; justify-content:space-between; align-items:center; font-family:'Nunito Sans', sans-serif; font-weight:700; font-size:14px; color:var(--ink); background:var(--surface-alt); border-radius:var(--radius-md); padding:10px 14px; margin:18px 0 8px; } tr.date-group-row:first-child .date-group-header{margin-top:0;} .date-group-total{font-family:'IBM Plex Mono',monospace; font-style:normal; font-weight:500; font-size:14px;} .cc-table td, .cc-table th{overflow-wrap:break-word; word-break:break-word;} th.sortable{cursor:pointer; user-select:none; transition:color .15s ease;} th.sortable:hover{color:var(--ink);} .sort-indicator{display:inline-block; margin-left:4px; font-size:10px; color:var(--muted); width:8px;} input, select, textarea{ font-family:'Nunito Sans'; font-size:14px; padding:7px 9px; border:1px solid var(--line); border-radius:6px; background:var(--bg-input); color:var(--ink); width:100%; } /* Indicatore di focus accent (documento delta v4, sez. 11 Borders: focus → strong/accent) — prima l'unico focus ring esistente era scoped a .landing, il resto del prodotto non aveva alcun indicatore visivo per la navigazione da tastiera. Stesso trattamento già usato lì. */ /* Select: freccia disegnata da noi (chevron stile Feather, colore --muted) invece di quella nativa, che resta a pochi pixel dal bordo destro. padding-right lascia spazio a testo + freccia. Escluse le select multiple. */ select:not([multiple]):not(.landing-lang-select){ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9A8A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:14px 14px; } input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } /* Campo con errore (fieldError()): bordo danger e la frase sotto, come nota in rosso. */ .field-invalid, input.field-invalid:focus, select.field-invalid:focus, textarea.field-invalid:focus{border-color:var(--danger) !important; box-shadow:0 0 0 3px var(--danger-soft) !important;} p.field-error{margin:4px 0 0; font-size:12.5px; line-height:1.4; color:var(--danger) !important;} textarea{resize:vertical; min-height:90px;} input::placeholder, textarea::placeholder{color:#808894;} /* era #4E5866, 2,5:1: ora 5,1:1 (12/10) */ input[type=number]{font-family:'IBM Plex Mono',monospace;} input[type=date]{cursor:pointer;} /* Campo file (MoneyInput/Field del DS): riquadro tratteggiato, l'input nativo nascosto ma raggiungibile da tastiera. */ .file-pick{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1.5px dashed var(--border-strong); border-radius:var(--radius-md); background:var(--surface-input); cursor:pointer; transition:border-color .15s ease, background-color .15s ease;} .file-pick-input{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none;} .file-pick-icon{flex:0 0 36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface-alt); color:var(--muted);} .file-pick-text{display:flex; flex-direction:column; gap:1px; min-width:0;} .file-pick-name{font-size:14px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .file-pick-hint{font-size:12.5px; color:var(--muted);} .file-pick:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);} .file-pick.drag{border-color:var(--accent); background:var(--accent-soft);} .file-pick.has-file{border-style:solid; border-color:var(--line);} .file-pick.has-file .file-pick-icon{background:var(--accent-soft); color:var(--accent-ink);} @media (hover:hover) and (pointer:fine){ .file-pick:hover{border-color:var(--accent);} .file-pick:hover .file-pick-icon{color:var(--accent-ink);} } @media (hover:none){ .file-pick:not(.has-file) .file-pick-hint{display:none;} } input[type=color]{width:52px; height:38px; padding:3px; cursor:pointer;} input[type=checkbox]{ appearance:none; -webkit-appearance:none; width:16px; height:16px; min-width:16px; padding:0; border:1.5px solid var(--line); border-radius:4px; background:var(--bg-input); cursor:pointer; position:relative; flex-shrink:0; vertical-align:middle; transition:background .15s ease, border-color .15s ease; } input[type=checkbox]:hover{border-color:var(--accent);} input[type=checkbox]:checked{background:var(--accent); border-color:var(--accent);} input[type=checkbox]:checked::after{ content:''; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid var(--on-accent); border-width:0 2px 2px 0; transform:rotate(45deg); } /* Toggle-switch look for a checkbox (class="switch" on the input) — same checked/unchecked semantics, just a bigger and clearer target on mobile than the small square box. */ input[type=checkbox].switch{ width:40px; height:24px; min-width:40px; border-radius:999px; } input[type=checkbox].switch::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; border:none; background:var(--muted); transition:transform .15s ease, background .15s ease; } input[type=checkbox].switch:checked::after{transform:translateX(16px); background:var(--on-accent);} .row-inline{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end;} .field{display:flex; flex-direction:column; gap:4px; min-width:0;} .field label{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:600;} /* Importo accepts simple arithmetic (e.g. "12.50+8.30") for summing several receipts at once, resolved to a plain number on blur — see resolveAmountField()/evaluateAmountExpression() in app.js. The + button appends an operator without needing the keyboard's symbol layer, since inputmode="decimal" hides it on most mobile keyboards. */ .amount-input-wrap{display:flex; gap:6px; align-items:center;} .amount-input-wrap input{flex:1; min-width:0;} .amount-add-btn{ flex:0 0 auto; width:36px; height:36px; border-radius:8px; border:1px solid var(--line); background:var(--bg-input); color:var(--muted); font-size:20px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; line-height:1; } .amount-add-btn:hover{color:var(--accent); border-color:var(--accent);} button.btn{ font-family:'Nunito Sans'; font-weight:600; font-size:13px; cursor:pointer; border:none; border-radius:var(--radius-sm); padding:8px 14px; background:var(--accent); color:var(--on-accent); transition:filter .15s ease, border-color .15s ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); } @media (hover: hover) and (pointer: fine){ button.btn:hover{filter:brightness(1.1);} } button.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);} @media (hover: hover) and (pointer: fine){ button.btn.ghost:hover{border-color:var(--ink);} } button.btn.small{padding:5px 10px; font-size:12px;} button.btn.danger{background:var(--danger); color:#2A0006;} button.btn.ghost.active{background:var(--accent); color:var(--on-accent); border-color:var(--accent);} button.btn:disabled{opacity:.35; cursor:not-allowed;} button.btn.btn-icon-label{display:inline-flex; align-items:center; justify-content:center; gap:8px;} /* Type-first entry: pick income/expense/transfer before anything else shows, so registering a movement is one tap instead of scanning a whole form. */ .mv-type-picker{display:flex; gap:10px; margin-bottom:4px;} .mv-type-choice{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 10px; border-radius:var(--radius-md); border:1.5px solid var(--line); background:var(--bg-card-alt); color:var(--muted); cursor:pointer; font-family:'Nunito Sans'; font-weight:600; font-size:13px; transition:border-color .15s ease, color .15s ease, background .15s ease; } .mv-type-choice:hover{border-color:var(--ink); color:var(--ink);} .mv-type-choice.expense.active{background:var(--coral-soft); border-color:var(--coral); color:var(--coral);} .mv-type-choice.income.active{background:var(--teal-soft); border-color:var(--teal); color:var(--teal);} .mv-type-choice.transfer.active{background:var(--blue-soft); border-color:var(--blue); color:var(--blue);} /* Status Badge (docs/Cuentaduro_Design_System_Delta_Spec.v4.md #10): un unico componente (.pill) con varianti semantiche — success/danger/ info/warning/neutral — invece di legare il colore direttamente al significato di business di ogni schermata. Le vere "status" pill (entrata/uscita/trasferimento/in attesa/saldato/futuro) sono rimappate sui token semantici qui sotto; i pill che sono in realtà TAG categoriali (couple/contribution/value-update — non uno stato) restano sui colori diretti già esistenti (gold/blue), coerenti con l'uso di quei colori altrove nell'app (es. gold = investimenti). */ /* Una pill non va mai a capo (23/10, Mattia): testo e icona sulla stessa riga, anche in una colonna stretta. */ .pill{display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; flex-shrink:0;} .dd-pill, .tc-pill, .fam-tag, .eq-tag, .category-pill, .trial-tag{white-space:nowrap;} .pill.success, .pill.income, .pill.settled{background:var(--color-success-soft); color:var(--color-success);} .pill.danger, .pill.expense{background:var(--color-danger-soft); color:var(--color-danger);} .pill.info, .pill.transfer, .pill.future{background:var(--color-info-soft); color:var(--color-info);} .pill.warning, .pill.pending{background:var(--color-warning-soft); color:var(--color-warning);} .pill.neutral, .pill.off{background:rgba(179,179,179,0.14); color:var(--muted);} .pill.couple{background:var(--gold-soft); color:var(--gold);} .pill.contribution{background:var(--gold-soft); color:var(--gold);} .pill.value-update{background:var(--blue-soft); color:var(--blue);} .categories-wrap{display:flex; flex-wrap:wrap; gap:8px;} .reserve-list{display:flex; flex-direction:column; gap:2px;} .reserve-row{ display:flex; flex-wrap:wrap; align-items:center; padding:8px 4px; border-bottom:1px dashed var(--line); gap:10px; } .reserve-row:last-child{border-bottom:none;} /* Etichetta+valore, sempre visibili — separati dalle azioni sotto, che su mobile restano nascoste finché non si tocca questo blocco. */ .reserve-row-main{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; flex:1; min-width:0;} .reserve-label{font-size:14px; color:var(--ink); flex:1; min-width:0;} .reserve-value{font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--ink); white-space:nowrap; flex:0 0 auto;} .reserve-row-actions{display:flex; align-items:center; gap:6px; flex:0 0 auto;} /* Righe della Riserva mensile come card vere e proprie su mobile (stesso linguaggio visivo — sfondo, bordo, radius — di .tx-card usato da Movimenti/Carta di credito/Investimenti), con le azioni nascoste finché non si tocca la riga — stesso pattern tap-to-reveal di .tx-card-actions, invece di lasciarle sempre visibili come sul desktop (mouse). Segnalato dall'utente: i bottoni dovevano comportarsi come le altre card. Stessa soglia 640px della vista a card di Movimenti, per coerenza. */ @media (max-width:640px){ /* Stessa divisione di responsabilità di .tx-card/.tx-card-main/ .tx-card-actions: il guscio .reserve-row non ha padding proprio, lo gestiscono i due figli — altrimenti il padding della riga si sommava al margin-top delle azioni, lasciando un vuoto doppio tra etichetta/valore e i bottoni (segnalato dall'utente). */ .reserve-row{ background:var(--bg-card-alt); border:1px solid var(--line); border-radius:var(--radius-md); margin-bottom:8px; padding:0; gap:0; flex-direction:column; align-items:stretch; } .reserve-row:last-child{margin-bottom:0;} .reserve-row-main{padding:12px 14px;} .reserve-row-main.tappable{cursor:pointer;} /* Bottoni a piena larghezza divisi in parti uguali, stessa identica misura di .tx-card-actions .icon-action-btn — non icone quadrate allineate a destra (segnalato dall'utente: "i bottoni non occupano tutto lo spazio"). */ .reserve-row-actions{display:none; gap:8px; padding:0 14px 12px;} .reserve-row-actions .icon-action-btn{flex:1; width:auto; height:48px; font-size:18px;} .reserve-row.expanded{border-color:var(--accent);} .reserve-row.expanded .reserve-row-actions{display:flex;} } .reserve-row-editing{align-items:stretch;} /* Family / personal-tax / auto-card rows are rendered as separate .reserve-group blocks so the three categories never blend visually — see renderReserveGroup() in app.js. */ .reserve-group{margin-bottom:10px;} .reserve-group:last-child{margin-bottom:0;} .reserve-group-title{ display:flex; justify-content:space-between; align-items:center; font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:600; padding:4px 4px; } .reserve-group-subtotal{font-family:'IBM Plex Mono',monospace; font-weight:500;} .reserve-group .reserve-row:first-child{border-top:1px solid var(--line);} @media (max-width:640px){ .reserve-group .reserve-row:first-child{border-top:none;} } #interest-quick-list{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px;} .interest-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:8px; } .interest-row .interest-name{flex:1 1 100%; font-size:14px; color:var(--ink);} .interest-row .interest-total{font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--muted); white-space:nowrap;} .interest-row input{width:110px; text-align:right; flex:0 0 auto;} #shortcut-review-list{display:flex; flex-direction:column; gap:10px;} .shortcut-review-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px; border:1px solid var(--gold); border-radius:8px; background:rgba(246,194,71,0.06); } .shortcut-review-row .shortcut-review-info{flex:1 1 260px; font-size:14px; color:var(--ink); display:flex; flex-direction:column; gap:2px;} .shortcut-review-row select{width:auto; min-width:160px; flex:0 0 auto;} .reserve-row input{width:130px; text-align:right; flex:0 0 auto;} .reserve-total{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding-top:12px; border-top:1.5px solid var(--line); font-size:14px; color:var(--muted); } .salary-percentage{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);} .salary-percentage .label{font-size:11.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:600; display:block;} /* Shown only when the card is collapsed (icon lacks .open) — a quick glance at the weight percentage without having to reopen the card. */ .salary-pct-header{display:none; font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:14px;} .card-header-row:has(.collapse-arrow:not(.open)) .salary-pct-header{display:inline;} tr.total-row td{font-weight:700; border-top:2px solid var(--line); color:var(--ink);} tr.rounded-row td{font-style:italic; color:var(--muted); font-size:12.5px;} .category-pill{ display:flex; align-items:center; gap:8px; background:var(--bg-input); border:1px solid var(--line); border-radius:999px; padding:6px 8px 6px 14px; font-size:12.5px; color:var(--ink); } .category-pill.custom{border-color:var(--gold); background:var(--gold-soft); color:var(--gold);} .category-pill-icon{flex-shrink:0; margin-right:-2px;} .category-pill-remove, .share-pill-remove{ background:none; border:none; color:var(--muted); font-size:15px; line-height:1; cursor:pointer; width:18px; height:18px; border-radius:50%; padding:0; } .share-row{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-input); padding:10px 12px; margin-bottom:8px; } .share-row-header{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; color:var(--ink); margin-bottom:8px;} .share-row-options{display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--muted);} .share-row-options label{display:flex; align-items:center; gap:5px; cursor:pointer;} .category-pill-remove:hover, .share-pill-remove:hover{color:var(--coral); background:var(--coral-soft);} .future-date{color:var(--blue); font-weight:600;} tr.future-row td{background:color-mix(in srgb, var(--info) 5%, transparent);} .bankgroup{margin-bottom:18px;} .bankgroup h3{font-family:'Spectral',serif; font-size:16px; margin:0 0 10px; color:var(--muted); font-style:italic; display:flex; align-items:center;} .account-card{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-card-alt); padding:12px 14px; margin-bottom:10px; } .account-top{display:flex; align-items:center; gap:10px; flex-wrap:nowrap;} .account-top .account-name-display{ flex:1; min-width:0; font-weight:600; color:var(--ink); font-size:14px; padding:5px 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bullet-sep{color:var(--muted); margin:0 6px;} .note-inline{font-size:11.5px; color:var(--muted); font-weight:400;} .account-top .balance-display{ font-family:'IBM Plex Mono',monospace; color:var(--ink); font-size:14px; font-weight:500; padding:0 8px; white-space:nowrap; flex:0 0 auto; } .balance-display.computed-gold, .account-details-grid .computed-note{color:var(--gold);} .account-details-grid .computed-note{ font-family:'IBM Plex Mono',monospace; font-size:14px; padding:7px 0; display:inline-block; } /* Custom HTML tooltips (replace native title= tooltips) */ .has-tooltip{position:relative;} /* display:none (not opacity:0) so the pseudo-element has zero geometry until actually shown — an absolutely-positioned element still counts toward a scrollable ancestor's scrollWidth even at opacity:0, which was silently widening tables (e.g. Movimenti's actions column) on every device, hover-capable or not. Trade-off: no fade/slide transition on appear. */ .has-tooltip::after{ content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--bg-input); color:var(--ink); font-family:'Nunito Sans', sans-serif; font-size:11.5px; font-weight:500; line-height:1.4; padding:7px 10px; border-radius:7px; width:max-content; max-width:220px; text-align:center; white-space:normal; border:1px solid var(--line); box-shadow:0 6px 16px rgba(0,0,0,0.45); display:none; pointer-events:none; z-index:80; } .has-tooltip::before{ content:''; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--bg-input); display:none; pointer-events:none; z-index:80; } .has-tooltip:hover::after, .has-tooltip:hover::before{display:block;} /* Box alignment set at hover-time by a delegated mouseover listener in app.js, based on which half of the screen the trigger is in, so a tooltip near a screen edge doesn't run off it. The arrow (::before) always stays centered on the trigger regardless — only the text box shifts. */ .has-tooltip.tooltip-align-left::after{left:0; transform:none;} .has-tooltip.tooltip-align-right::after{left:auto; right:0; transform:none;} /* Custom date picker: guida Datepicker del DS (0.147.0). Su mobile diventa una hoja dal basso. */ /* Campo chiuso: icona calendario (Lucide) a destra in muted, come il chevron delle select. */ input.datepicker-input{ cursor:pointer; background-color:var(--surface-input); padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9A8A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; background-size:16px 16px; } .datepicker-popover{ display:none; position:fixed; z-index:1250; background:var(--surface-tile); color:var(--ink); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:12px; width:260px; font-family:'Nunito Sans', sans-serif; } .datepicker-popover.show{display:block;} .datepicker-backdrop{display:none;} .dp-header{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;} .dp-title{font-size:14px; font-weight:700; color:var(--ink);} .dp-navs{display:flex; gap:2px;} .dp-nav{ background:none; border:none; color:var(--muted); width:28px; height:28px; padding:0; border-radius:var(--radius-sm); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .dp-nav:hover{color:var(--accent);} .dp-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px;} .dp-weekdays span{text-align:center; font-size:12.5px; color:var(--muted);} .dp-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;} .dp-day{ background:none; border:none; color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:13px; aspect-ratio:1; padding:0; border-radius:var(--radius-sm); cursor:pointer; text-align:center; } .dp-day:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;} .dp-day.dp-empty{cursor:default; pointer-events:none;} .dp-day.dp-today{box-shadow:inset 0 0 0 1px var(--border-strong); font-weight:700;} .dp-day.dp-selected{background:var(--accent); color:var(--on-accent); font-weight:600; box-shadow:none;} .dp-day:disabled{color:var(--text-tertiary); cursor:default;} @media (hover:hover) and (pointer:fine){ .dp-day:not(.dp-selected):not(:disabled):hover{background:var(--accent-soft);} } .dp-footer{ display:flex; justify-content:center; gap:20px; margin-top:8px; padding-top:10px; border-top:1px solid var(--line); } @media (max-width:640px){ .datepicker-backdrop.show{display:block; position:fixed; inset:0; z-index:1240; background:rgba(4,6,9,0.45);} .datepicker-popover{ left:0; right:0; bottom:0; top:auto; width:auto; border-radius:var(--radius-xl) var(--radius-xl) 0 0; border-bottom:none; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); } .datepicker-popover.show{animation:dp-sheet-in .2s var(--ease-out-strong);} .dp-title{font-size:15px;} .dp-nav{width:44px; height:44px;} .dp-day{aspect-ratio:auto; min-height:44px; font-size:15px;} .dp-footer .onb3-link{font-size:14px; padding:8px 4px;} } @keyframes dp-sheet-in{from{transform:translateY(100%);} to{transform:translateY(0);}} @media (max-width:640px) and (prefers-reduced-motion:reduce){ .datepicker-popover.show{animation:dp-fade-in .2s ease-out;} } @keyframes dp-fade-in{from{opacity:0;} to{opacity:1;}} .icon-edit-btn{ background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer; padding:4px 6px; border-radius:5px; flex:0 0 auto; } .icon-edit-btn:hover{color:var(--teal); background:rgba(79,195,161,0.1);} .icon-action-btn{ background:none; border:1px solid var(--line); color:var(--muted); width:28px; height:28px; border-radius:6px; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; } .icon-action-btn:hover{color:var(--teal); border-color:var(--teal);} /* Target di tap minimo 44×44pt su mobile (Apple Human Interface Guidelines) — questi pulsanti sono dimensionati per il mouse (20-28px) e diventano difficili da toccare con precisione col dito. Ingranditi solo sotto i 640px, per non alterare la densità dell'interfaccia desktop. Riguarda ogni .icon-only-btn.small/.view-switch-btn/.icon-action-btn dell'app, non solo Movimenti — la stessa mano che tocca un'icona in Impostazioni tocca quella di una card movimento. */ @media (max-width:640px){ .icon-only-btn.small{min-width:44px; min-height:44px;} .view-switch-btn{min-height:44px; padding:12px 16px;} .icon-action-btn{width:40px; height:40px; font-size:16px;} } /* Stato "attivo" (es. spostamento mese carta di credito, l'unico uso di questa classe) sui token semantici del documento delta v4 invece del riempimento pieno --blue/testo scuro hardcoded — stessa coppia soft-bg/ colore-testo già usata da .pill.info. */ .icon-action-btn.active{background:var(--color-info-soft); color:var(--color-info); border-color:var(--color-info);} .icon-action-btn.danger:hover{color:var(--color-danger); border-color:var(--color-danger);} /* Varianti semantiche aggiuntive (es. Riserva mensile: "+" riporta al valore previsto, "−" azzera) — stesso pattern hover-only di .danger, sui token success/warning invece di introdurre nuovi colori. */ .icon-action-btn.success:hover{color:var(--color-success); border-color:var(--color-success);} .icon-action-btn.warning:hover{color:var(--color-warning); border-color:var(--color-warning);} .icon-action-btn.reveal-on-hover{opacity:0; transition:opacity .15s ease;} tr:hover .icon-action-btn.reveal-on-hover, tr:focus-within .icon-action-btn.reveal-on-hover{opacity:1;} /* Read-only shared-data view (see switchViewingContext() in app.js). This is best-effort UX, not the security boundary — the RLS policies on finance_data and the guard in persist()/flushPersist() are what actually stop writes. */ .read-only-banner{display:none;} body.read-only-mode .read-only-banner{ display:block; background:var(--gold-soft); color:var(--gold); border:1px solid var(--gold); border-radius:var(--radius); padding:10px 14px; margin:0 0 16px; font-size:13px; text-align:center; font-weight:600; } /* "Add to home screen" banner (mobile only, shown once per browser — see maybeShowA2HSBanner()/installA2HS()/dismissA2HSBanner() in app.js). Hidden by default via inline style, toggled by JS. Deliberately a floating card (margin from every edge, rounded corners, accent-color border, shadow) rather than an edge-to-edge bar — meant to read as a distinct brand moment, not another strip of app chrome. The two .a2hs-text spans are both in the DOM (for applyTranslations()) but only one is shown at a time via .show-android/.show-ios on the banner itself, since Android (native install prompt) and iOS Safari (no such API, instructions only) need different copy and only Android gets the "Instalar" button. */ .a2hs-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:1000; background:var(--bg-card); border:2px solid var(--accent); border-radius:var(--radius-lg); box-shadow:0 8px 28px rgba(0,0,0,.45); padding:14px 16px; align-items:center; gap:12px; font-size:12.5px; max-width:420px; margin:0 auto; } .a2hs-icon{width:44px; height:44px; border-radius:11px; flex-shrink:0;} .a2hs-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;} .a2hs-title{font-family:'Spectral', serif; font-size:15px; color:var(--accent);} .a2hs-banner .a2hs-text{display:none; color:var(--muted); line-height:1.35;} .a2hs-text-ios strong{color:var(--ink); font-weight:700;} .a2hs-banner.show-android .a2hs-text-android{display:block;} .a2hs-banner.show-ios .a2hs-text-ios{display:block;} .a2hs-banner .a2hs-install-btn{display:none;} .a2hs-banner.show-android .a2hs-install-btn{display:inline-block;} .a2hs-banner .a2hs-actions{display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0;} /* Free-trial tag next to the logo (see trialDaysRemaining()/updateTrialBanner() in app.js). Hidden by default (inline style, toggled by JS); shown only while days remaining > 0 — never for an admin or a lifetime-free grant. */ .trial-tag{ display:none; align-items:center; gap:5px; font-family:'Nunito Sans', sans-serif; font-size:11px; font-weight:700; letter-spacing:.3px; white-space:nowrap; color:var(--success); background:var(--success-soft); border:1px solid var(--success); border-radius:var(--radius-sm); padding:2px 8px; margin-left:8px; } body.read-only-mode .icon-action-btn, body.read-only-mode .icon-edit-btn, body.read-only-mode .category-pill-remove, body.read-only-mode .mutation-btn{display:none;} /* Elements that double as a value display AND an edit trigger (e.g. tap the fund's invested/current-value figure to edit it) must stay visible in read-only mode — only their click-to-edit affordance goes away. */ body.read-only-mode .mutation-value{pointer-events:none; cursor:default;} .account-details-panel{margin-top:10px;} .funds-list-panel{margin-top:10px; padding:12px; background:var(--bg-input); border-radius:8px;} .funds-list-rows{display:flex; flex-direction:column; gap:8px;} .fund-list-row{display:flex; align-items:center; gap:10px; font-size:13px;} .fund-list-name{flex:1; color:var(--ink); font-weight:600;} .fund-list-isin{font-family:'IBM Plex Mono',monospace; color:var(--muted); font-size:14px;} .fund-list-invested-value{ width:90px; flex:0 0 auto; font-family:'IBM Plex Mono',monospace; font-size:14px; padding:6px 8px; text-align:right; color:var(--ink); cursor:pointer; border-bottom:1px dashed var(--muted); transition:color .15s ease, border-color .15s ease; } .fund-list-invested-value:hover{color:var(--accent); border-color:var(--accent);} .fund-edit-panel{ margin-top:10px; padding:12px; background:var(--bg-input); border-radius:8px; display:flex; flex-direction:column; gap:10px; } .account-details-section{margin-bottom:10px;} .account-details-standalone-field{margin-bottom:10px;} .account-details-section-title{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:600; margin:0 0 6px 2px; } .account-details-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px; padding:12px; background:var(--bg-input); border-radius:8px; } .account-details-actions{display:flex; justify-content:space-between; align-items:center; margin-top:10px;} .inline-edit-panel{ background:var(--bg-input); border:1px solid var(--line); border-radius:8px; padding:14px; } tr.edit-row td{padding:10px 8px; background:var(--surface-alt);} .note{font-size:12px; color:var(--muted); font-style:normal;} .cat-hint{display:block; margin-top:4px;} .cat-hint:empty{display:none;} .empty{padding:20px; text-align:center; color:var(--muted); font-size:14px; line-height:1.5;} .empty .empty-action{margin-top:8px; font-size:14px;} /* Non sono stati vuoti (guida EmptyState): errore = bloque warning con l'azione; sessione = bloque con il botón. */ .state-loading{margin:12px 0; color:var(--muted);} .state-warn{margin:8px 0; padding:12px 14px; border-radius:var(--radius-lg); background:var(--warning-soft); color:var(--ink); font-size:14px; line-height:1.5;} .state-warn .onb3-link{font-size:14px; color:var(--ink); font-weight:600;} .state-login{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:8px 0; padding:12px 14px; border-radius:var(--radius-lg); background:var(--surface-alt); color:var(--ink); font-size:14px; line-height:1.5;} .overview-empty-state{padding:56px 20px; text-align:center;} .overview-empty-state p{color:var(--muted); margin:0 0 18px; font-size:14px;} /* Toast (0.105, design system "Toast"): superficie scura con bordo e ombra, testo ink 14px 600, a sinistra un disco del colore dello stato (success = fatto, info = rimandato o neutro, warning = attenzione, error = da correggere). Entra dal basso (200 ms ease-out); 2,2 s, 6 s con "Deshacer". */ .toast{ position:fixed; bottom:20px; right:20px; z-index:1300; display:flex; align-items:center; gap:10px; max-width:420px; padding:10px 16px 10px 12px; border-radius:var(--radius-md); background:#2b2e33; color:var(--ink); border:1px solid var(--color-border-strong); box-shadow:0 8px 24px rgba(0,0,0,.35); font-size:14px; font-weight:600; line-height:1.35; opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .2s cubic-bezier(.23,1,.32,1), transform .2s cubic-bezier(.23,1,.32,1); } .toast::before{content:''; flex:none; width:20px; height:20px; border-radius:999px; background:var(--muted) no-repeat center/12px;} .toast.show{opacity:1; transform:none;} .toast.success::before{background-color:var(--color-success); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304120D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");} .toast.error::before{background-color:var(--color-danger); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A0006' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 6v7'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");} .toast.warning::before{background-color:var(--color-warning); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241503' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 6v7'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");} .toast.info::before{background-color:var(--color-info); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304122A' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 11v7'/%3E%3Cpath d='M12 6h.01'/%3E%3C/svg%3E");} .toast.with-action{pointer-events:auto;} .toast-undo-btn{ margin-left:6px; background:none; border:0; color:var(--accent); padding:4px 2px; font:inherit; font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; white-space:nowrap; } @media (prefers-reduced-motion: reduce){ .toast{transform:none; transition:opacity .2s ease;} } .actions-cell{display:flex; gap:6px; flex-wrap:nowrap; justify-content:flex-end;} .fund-card{border:1px solid var(--line); border-radius:var(--radius); padding:16px; background:var(--bg-card-alt);} .fund-card.expanded{border-color:var(--accent);} .fund-card .label{font-size:11.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:600;} .fund-card .value{font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:500; margin-top:4px; color:var(--gold);} /* Card debito (debtCardHtml): riusa .tx-card-actions per le icone azione tap-to-reveal, ma .fund-card ha già il proprio padding su tutti i lati — tolto il padding orizzontale/inferiore duplicato di .tx-card-actions, aggiunto solo lo spazio sopra per separarla dal contenuto principale. */ .fund-card .tx-card-actions{padding:12px 0 0;} /* Riga a 3 colonne (saldo iniziale/residuo/rata) della card debito: affiancate su desktop/tablet, ma sotto ~480px (card ridotta al minimo di .debts-grid, 380px) anche 3 colonne strette fanno andare a capo le etichette maiuscole ("SALDO INICIAL"/"SALDO PENDIENTE") su due righe — sotto quella soglia si impilano una per riga, piena larghezza, stessa soglia già usata per .reserve-row-actions qui sopra. */ .debt-stat-row{flex-wrap:nowrap; gap:16px 24px;} .debt-stat-col{min-width:0;} .debt-stat-col .value{font-size:16px; white-space:normal; overflow-wrap:anywhere;} .debt-stat-col-end{text-align:right;} @media (max-width:480px){ .debt-stat-row{flex-direction:column; align-items:stretch; gap:10px;} .debt-stat-col-end{text-align:left;} } .csv-hint{font-size:12px; color:var(--muted); margin-top:6px;} .scroll-x{overflow-x:auto;} .confirm-overlay{ display:none; position:fixed; inset:0; background:rgba(4,6,9,0.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); align-items:center; justify-content:center; z-index:1000; padding:20px; } .confirm-overlay.show{display:flex;} .confirm-box{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; max-width:380px; width:100%; max-height:85vh; overflow-y:auto; } .confirm-box.wide{max-width:640px;} .auth-gate{ min-height:100vh; display:flex; flex-direction:column; background:var(--bg); overflow-x:hidden; } /* app.cuentaduro.com's login gate - deliberately minimal (logo, one login box, one secondary link back to the marketing site) now that the actual marketing content lives on cuentaduro.com/main instead. Not the .landing-* component set below, which stays only because a lot of it (cspBoxHtml, the Plan Cuentaduro tokens, etc.) is still shared with the real in-app pages - just no longer rendered on this specific screen. */ .login-gate{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; } .login-gate-logo{height:36px; width:auto; margin:0 auto 28px;} .login-gate-box{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; width:100%; max-width:340px; display:flex; flex-direction:column; gap:16px; } /* Il design system era scoped qui (.landing) finché riguardava solo la marketing page — ora che i token sono promossi a :root (vedi sopra) e usati da tutto il prodotto, questa regola non ha più bisogno di ridefinire nulla. */ .landing{width:100%;} .landing-header{ display:flex; align-items:center; justify-content:space-between; max-width:var(--landing-max); margin:0 auto; padding:20px 24px; } .landing-header-logo{height:32px; width:auto; display:block;} .landing-header-right{display:flex; align-items:center; gap:10px;} .landing-lang-switch{display:flex; gap:4px;} /* Mobile swaps the 3-pill switch for a native 's value is kept in sync by setLandingLanguage()/the initial landing-language-list setup. */ .landing-lang-select{display:none;} @media (max-width:480px){ .landing-lang-switch{display:none;} .landing-lang-select{ display:block; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:6px 26px 6px 8px; font-family:'Nunito Sans'; font-size:12px; /* iOS Safari can drop its own native picker chevron once a custom background/border is applied to a resta nascosto e tiene il valore; il pulsante ha lo stesso aspetto dei campi (chevron compreso), al massimo 360px come ogni menu di conto. */ select.acct-native{display:none !important;} .acct-sel-btn{display:flex; align-items:center; width:100%; max-width:360px; min-height:36px; padding:6px 34px 6px 9px; border:1px solid var(--line); border-radius:6px; background:var(--bg-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9A8A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center / 14px 14px; color:var(--ink); font-family:'Nunito Sans', sans-serif; font-size:14px; text-align:left; cursor:pointer; min-width:0;} .acct-sel-btn:focus-visible, .acct-sel-btn[aria-expanded="true"]{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);} .acct-sel-btn:disabled{opacity:.55; cursor:not-allowed;} .acct-sel-btn .bank-badge, .acct-sel-btn .bank-badge-img, .acct-opt .bank-badge, .acct-opt .bank-badge-img{flex:0 0 auto; width:20px; height:20px; margin-right:8px;} .acct-sel-name{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .acct-sel-name.ph{color:var(--muted);} .acct-sel-btn .acc-role, .acct-opt .acc-role{flex:0 0 auto;} .acct-list{position:fixed; z-index:1300; max-width:360px; overflow-y:auto; padding:6px; background:var(--bg-input); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:0 6px 16px rgba(0,0,0,0.45); font-family:'Nunito Sans', sans-serif; animation:acct-list-in .16s cubic-bezier(.23,1,.32,1);} @keyframes acct-list-in{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}} @media (prefers-reduced-motion: reduce){ .acct-list{animation:none;} } .acct-list-group{padding:8px 10px 4px; font-size:12px; font-weight:600; color:var(--muted);} .acct-opt{display:flex; align-items:center; width:100%; padding:8px 10px; border:0; border-radius:8px; background:none; color:var(--ink); font:inherit; font-size:14px; text-align:left; cursor:pointer;} .acct-opt .acct-sel-name{display:flex; flex-direction:column; white-space:normal;} .acct-opt .acct-sel-name small{font-size:12px; color:var(--muted);} .acct-opt:focus-visible{outline:none; background:var(--bg-card-alt);} @media (hover:hover) and (pointer:fine){ .acct-opt:hover{background:var(--bg-card-alt);} } .acct-opt.on{background:var(--accent-soft);} .acct-opt-check{flex:0 0 auto; display:inline-flex; width:15px; margin-left:auto; padding-left:12px; box-sizing:content-box; color:var(--accent); font-style:normal;} /* Import su mobile (21/10): niente scorrimento laterale, ogni riga è una scheda: data · stato · importo, poi la descrizione, poi il destino a tutta larghezza (i bottoni vanno a capo se non ci stanno). */ @media (max-width:640px){ .scroll-x:has(> table > #csv-preview-body){overflow:visible;} table:has(> #csv-preview-body) thead{display:none;} table:has(> #csv-preview-body), table:has(> #csv-preview-body) > tbody{display:block; width:100%;} #csv-preview-body > tr{display:grid; grid-template-columns:auto 1fr auto; gap:6px 10px; align-items:center; padding:12px 4px; border-bottom:1px solid var(--line);} #csv-preview-body > tr > td{display:block; padding:0; border:0; min-width:0;} #csv-preview-body > tr > td:nth-child(1){grid-row:1; grid-column:1; font-size:12.5px; color:var(--muted);} #csv-preview-body > tr > td:nth-child(5){grid-row:1; grid-column:2; justify-self:start;} #csv-preview-body > tr > td:nth-child(3){grid-row:1; grid-column:3; text-align:right;} #csv-preview-body > tr > td:nth-child(2){grid-row:2; grid-column:1 / -1;} #csv-preview-body > tr > td:nth-child(4){grid-row:3; grid-column:1 / -1;} #csv-preview-body > tr > td[colspan]{grid-column:1 / -1;} #csv-preview-body .dest-pick{flex-wrap:wrap;} } .acct-sel-line{display:flex; align-items:center; min-width:0;} .acct-sel-text{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .acct-sel-btn .acct-sel-name{display:flex;} .csv-known-note{margin:4px 0 0;} .csv-known-new{display:block; margin-top:6px; font-size:12.5px;} /* MultiChoice (DS 21/10): scegliere più cose insieme. La casella vera resta, nascosta (.mc-native), e tiene tastiera e change; lo stato "scelto" lo legge :has(input:checked). Tre forme: tessere (conti), menù (filtro), chips (etichette). */ .mc-native{position:absolute !important; opacity:0; width:1px !important; height:1px; margin:0 !important; padding:0 !important; pointer-events:none;} .mc-box{flex:none; width:20px; height:20px; box-sizing:border-box; border-radius:6px; border:1.5px solid var(--muted); display:grid; place-items:center; color:var(--on-accent); transition:background-color .15s ease, border-color .15s ease;} .mc-box svg{opacity:0; transform:scale(.5); transition:opacity .16s ease, transform .16s var(--ease-out-strong);} :has(> .mc-native:checked) > .mc-box{background:var(--accent); border-color:var(--accent);} :has(> .mc-native:checked) > .mc-box svg{opacity:1; transform:none;} .mc-wrap{display:flex; flex-direction:column; gap:14px; margin-top:12px;} .mc-group{display:flex; flex-direction:column; gap:8px;} .mc-group-h{display:flex; align-items:center; font-size:13px; font-weight:600; color:var(--muted);} .mc-group-h > span:last-child{font-weight:400; margin-left:4px;} .mc-group-h .bank-badge, .mc-group-h .bank-badge-img{width:20px; height:20px;} .mc-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px;} .mc-tile{position:relative; display:flex; align-items:center; gap:10px; min-height:56px; box-sizing:border-box; padding:10px 12px; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--bg-card-alt); color:var(--ink); text-transform:none; letter-spacing:0; font-size:14px; cursor:pointer; transition:transform .16s var(--ease-out-strong), border-color .15s ease, background-color .15s ease;} .mc-tile:active{transform:scale(.97);} .mc-tile:has(> .mc-native:focus-visible){outline:2px solid var(--accent); outline-offset:2px;} .mc-tile:has(> .mc-native:checked){border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--bg-card-alt));} @media (hover:hover) and (pointer:fine){ .mc-tile:not(:has(> .mc-native:checked)):hover{border-color:var(--muted);} } .mc-tile > .bank-badge, .mc-tile > .bank-badge-img{flex:none; width:28px; height:28px; margin:0; font-size:11px;} .mc-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;} .mc-line{display:flex; align-items:center; min-width:0;} .mc-line strong{font-size:14px; font-weight:600; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .mc-line .acc-role{flex:none;} .mc-txt small{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .mc-mono{font-family:'IBM Plex Mono', monospace; font-weight:500; font-variant-numeric:tabular-nums;} @media (max-width:520px){ .mc-grid{grid-template-columns:1fr;} } .mc-sum{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; padding:10px 14px; border-radius:var(--radius-md); background:var(--bg-card-alt); font-size:14px; color:var(--ink);} .mc-sum .mc-mono{font-size:16px;} .mc-wrap .mc-sum-note{margin:-8px 0 0;} /* Menù: il filtro conti di Movimientos */ .mc-trigger-in{display:flex; align-items:center; gap:8px; min-width:0;} .mc-stack{display:inline-flex;} .mc-stack:empty{display:none;} .mc-stack .bank-badge, .mc-stack .bank-badge-img{width:20px; height:20px; margin:0; box-shadow:0 0 0 2px var(--bg-input);} .mc-stack > * + *{margin-left:-6px !important;} #tx-account-filter-dropdown{max-height:320px; min-width:280px;} #tx-account-filter-dropdown .multiselect-option{position:relative; gap:8px; padding:8px 10px;} #tx-account-filter-dropdown .multiselect-option > .bank-badge, #tx-account-filter-dropdown .multiselect-option > .bank-badge-img{flex:none; width:20px; height:20px; margin:0;} #tx-account-filter-dropdown .multiselect-footer{justify-content:flex-start; gap:16px;} #tx-account-filter-dropdown .multiselect-footer button{color:var(--muted); text-decoration:underline; text-underline-offset:3px; font-size:13px;} /* Chips: cosa può vedere la persona con cui condividi */ .share-row-options{gap:8px;} .share-row-options label.mc-chip{position:relative; display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--bg-card-alt); color:var(--ink); font-size:13px; font-weight:600; cursor:pointer; transition:transform .16s var(--ease-out-strong), border-color .15s ease, background-color .15s ease, padding .16s ease;} .mc-chip:active{transform:scale(.97);} .mc-chip svg{width:0; opacity:0; color:var(--accent); transition:width .16s var(--ease-out-strong), opacity .16s ease;} .mc-chip:has(> .mc-native:checked){border-color:var(--accent); background:var(--accent-soft); padding-left:11px;} .mc-chip:has(> .mc-native:checked) svg{width:14px; opacity:1;} .mc-chip:has(> .mc-native:focus-visible){outline:2px solid var(--accent); outline-offset:2px;} @media (prefers-reduced-motion: reduce){ .mc-tile, .mc-chip, .mc-box svg, .mc-chip svg{transition:opacity .15s ease, background-color .15s ease, border-color .15s ease;} .mc-tile:active, .mc-chip:active{transform:none;} .mc-box svg{transform:none;} } /* Movimientos → "A dónde ha ido" (0.169): una tesela del DS per destino dentro la card (surface-tile, radius-lg, 14×16, cifra mono 22). Non si tocca: niente bordo, hover né pressione, solo l'ombra (23/10, Mattia). */ /* Box unico con il riepilogo sopra (come Filtros: surface-alt, bordo line, radius-md, 14×16) e una linea tra le due parti. */ .tx-summary-box{background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:14px;} .tx-summary-box .tx-summary-bar{background:none; border:none; border-radius:0; padding:0; margin:0;} #tx-plan-breakdown:not(:empty){margin-top:14px; padding-top:14px; border-top:1px solid var(--line);} .tx-dest-intro{margin:0 0 12px; font-size:14px; color:var(--ink);} .tx-dest-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px;} .tx-dest-item{background:var(--surface-tile); box-shadow:var(--shadow-sm); border-radius:var(--radius-lg); padding:14px 16px; display:flex; flex-direction:column; gap:6px;} .tx-dest-item strong{font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:500; color:var(--ink);} .tx-dest-item small{color:var(--muted); font-size:12.5px;} .tx-dest-none-label{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); line-height:1.2;} /* Autónomo → Cálculo de impuestos: quanto mettere da parte al mese (Modelo 130, Renta) in due riquadri Idea (0.175). */ .autonomo-aside{margin-bottom:16px;} .autonomo-aside-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:10px;} /* Tessera del conto solo da leggere (Patrimonio → Proteger): niente bordo né pressione, solo l'ombra (DS "Borde = se toca"). */ .acc-tile.static{border:none; box-shadow:var(--shadow-sm); cursor:default;} .acc-tile.static:active{transform:none;} #cuscinetto-page .acc-tiles + .note{margin-top:12px;} /* Patrimonio → Reserva (0.179): dove sta la reserva, in sola lettura come Proteger; il conto si sceglie in Ajustes. */ .res-where-read{margin-top:16px;} .res-where-read .acc-tiles + .note{margin-top:12px;} .reserva-account-field{margin-top:14px; max-width:320px;} .res-hero .dd-advice p.warn{color:var(--warning); font-size:13px; font-weight:600;} .res-hero .dd-verdict .res-num{color:var(--warning);} /* Patrimonio → Reserva (0.181): teselle "Dónde está" e barra a tacche dei pagamenti annuali. */ .res-places{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px;} .res-place{display:flex; flex-direction:column; gap:6px; padding:14px 16px; background:var(--surface-tile); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); min-width:0;} .res-place-name{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .res-place-have{font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:500; color:var(--ink);} .res-place-bar{display:block; height:6px; border-radius:3px; background:var(--line); overflow:hidden;} .res-place-bar span{display:block; height:100%; background:var(--success);} .res-place-bar.short span{background:var(--warning);} .res-place .note{margin:0;} .res-place .note.res-place-short{color:var(--warning); font-weight:600;} .res-ticks{display:inline-flex; gap:2px; align-items:center; cursor:default;} .res-ticks span{width:6px; height:10px; border-radius:2px; background:var(--line);} .res-ticks span.on{background:var(--accent);} .res-auto-row{display:flex; align-items:center; gap:12px;} .res-auto-row .res-auto-main{flex:1 1 auto;} .res-auto-row .res-auto-main{min-width:0;} @media (max-width:560px){ .res-auto-row{gap:8px;} } /* Patrimonio → Reserva (0.182): schede ordinate per giorno, divise in Familia / Para ti. */ .res-sub-head{display:flex; justify-content:space-between; align-items:baseline; margin:10px 0 8px;} .res-sub-head .sub-block-title{margin:0;} .res-sub-head > span:last-child{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--muted);} .res-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; margin-bottom:6px;} .res-tile{display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:12px; row-gap:10px; align-items:start; padding:12px 14px; background:var(--surface-tile); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); min-width:0;} .res-tile .res-auto-main{min-width:0;} .res-tile .icon-action-btn{align-self:start;} .res-when{display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:44px; padding:6px 4px; border-radius:var(--radius-md); background:var(--surface-alt); line-height:1.1;} .res-when b{font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:500; color:var(--ink);} .res-when small{font-size:11px; color:var(--muted);} .res-when.none b{color:var(--muted);} .res-tile-foot{grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:8px;} .res-tile .res-auto-amount{font-size:16px;} .res-tile.skipped .res-label, .res-tile.skipped .res-auto-amount{color:var(--muted); text-decoration:line-through;} .res-skipped .res-tiles{margin-top:10px;} .res-tile-actions{display:flex; gap:6px; align-items:center;} .res-tile-foot{justify-content:flex-end;} .res-tile .icon-action-btn{width:34px; height:34px; flex:none;} .planned-card .planned-add{margin-top:12px; align-self:flex-start;} .planned-card .dd-tx-actions{display:inline-flex; gap:6px;} .planned-card .dd-tx-actions .icon-action-btn{width:32px; height:32px;} /* Autónomo → Reserva, Tu próximo mes (0.186): barra della testa, Qué cubre, Dónde está y cuándo sale, finestra. */ .res-hero-bar span{background:var(--success);} .res-hero-bar.short span{background:var(--warning);} .res-card-head{display:flex; align-items:center; justify-content:space-between; gap:12px;} .res-card-head h2{margin:0;} .res-seg{display:flex; height:14px; border-radius:7px; overflow:hidden; gap:2px; margin-top:14px; background:var(--line);} .res-seg span{display:block; height:100%;} .res-legend{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; font-size:14px; color:var(--ink);} .res-legend-item{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;} .res-legend .sw{display:inline-block; width:12px; height:8px; border-radius:3px;} .res-legend strong{font-family:'IBM Plex Mono',monospace; font-weight:500;} .res-covers .note{margin-top:10px;} .res-cal-title{margin-top:20px;} .res-cal{display:flex; align-items:flex-end; gap:2px; height:56px; padding:0 2px; border-bottom:1px solid var(--line);} .res-cal span{flex:1; height:100%; display:flex; align-items:flex-end;} .res-cal i{display:block; width:100%; border-radius:2px 2px 0 0; background:var(--accent);} .res-days{display:flex; flex-direction:column; margin-top:8px;} .res-day{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line);} .res-day:last-child{border-bottom:none;} .res-day-names{font-size:14px; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .res-day-amount{font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:500; color:var(--ink); white-space:nowrap;} .res-items-head{display:flex; justify-content:space-between; align-items:baseline; margin:0 0 8px;} .res-items-head > span:last-child{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--muted);} .res-items{display:flex; flex-direction:column;} .res-item{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); cursor:pointer; text-transform:none; letter-spacing:0;} .res-item:first-child{border-top:none;} .res-item-main{flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0;} .res-item-main .note{margin:0;} .res-item .icon-action-btn{width:32px; height:32px; flex:none;} .res-item input.switch{flex:none;} .res-item.off .res-label, .res-item.off .res-auto-amount{color:var(--muted);} .res-item-main .res-label{align-self:flex-start;} /* Autónomo → Reserva, Impuestos e Gastos de tu actividad (0.188). */ .res-parts .dd-rc{align-items:baseline;} .res-parts .dd-rc > span:first-child{display:flex; flex-direction:column; align-items:flex-start; text-align:left;} .res-parts .dd-rc small{font-size:12.5px; color:var(--muted);} .res-biz-card .res-where-read{margin-top:12px;} /* ---------- Onboarding v4 (in costruzione, ?onb4): prima la realtà, poi il piano. DS: Modal → "Onboarding v4". Desktop: passi a sinistra (250px), contenuto al centro, "Tu situación hoy" / "Tu plan" a destra (340px, fissa). Mobile (≤640px): niente colonne; cabecera con la barra in due parti, barra di riepilogo che apre un foglio, pie fisso. Sta sotto le finestre di sempre (conto, apartado: z-index 1100), che si aprono sopra. */ .onb4-overlay{display:none; position:fixed; inset:0; z-index:1050; background:var(--bg); color:var(--ink); overscroll-behavior:contain;} .onb4-overlay.show{display:block;} .onb4-lang-top.onb3-lang{position:absolute; top:16px; right:24px; margin:0; padding:0; z-index:1;} .onb4-steps .onb3-lang{padding:0;} html:has(.onb4-overlay.show){overflow:hidden;} .onb4-grid{display:grid; grid-template-columns:250px minmax(0,1fr) 340px; height:100%;} .onb4-title{margin:0 0 12px; font-family:Spectral, Georgia, serif; font-weight:600; font-size:26px; line-height:32px;} .onb4-desc{margin:0 0 22px; font-size:14px; line-height:21px; color:var(--ink);} .onb4-desc.tight{margin-bottom:12px;} .onb4-label{display:block; margin:0 0 8px; font-size:13px; line-height:18px; font-weight:600; color:var(--muted);} .onb4-section{margin:0 0 6px; font-size:12px; line-height:16px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);} .onb4-preview{margin:0 0 16px; padding:8px 12px; border-radius:var(--radius-md); background:var(--surface-alt); font-size:12.5px; color:var(--muted);} .onb4-overlay .note{font-size:12.5px; line-height:18px;} .onb4-overlay button.btn{min-height:44px; padding:0 18px; font-size:15px;} .onb4-overlay button.btn.onb4-primary{padding:0 22px; font-weight:700;} /* Schermate iniziali, centrate e senza colonne */ .onb4-intro{display:flex; flex-direction:column; height:100%; max-width:600px; margin:0 auto; padding:0 24px; box-sizing:border-box;} .onb4-intro-body{flex:1; overflow-y:auto; padding:56px 0 24px;} .onb4-intro.center .onb4-intro-body{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;} .onb4-intro-foot{display:flex; justify-content:space-between; gap:12px; padding:16px 0 28px; border-top:1px solid var(--line);} .onb4-intro.center .onb4-intro-foot{justify-content:center; border-top:0;} .onb4-duro{display:block; width:104px; height:104px; margin-bottom:24px;} .onb4-piggy{display:block; width:36px; height:36px; margin-bottom:16px;} .onb4-field{display:flex; flex-direction:column; gap:6px; width:100%; max-width:360px; text-align:left;} .onb4-field .onb4-label{margin:0;} .onb4-input{box-sizing:border-box; width:100%; height:48px; padding:0 14px; border-radius:var(--radius-md); border:1px solid var(--color-border-strong); background:var(--surface-input); color:var(--ink); font:inherit; font-size:17px; outline:none;} .onb4-input:focus{border-color:var(--accent);} .onb4-parts, .onb4-haves{display:flex; flex-direction:column; gap:10px; margin-bottom:24px;} .onb4-haves{margin-bottom:12px;} .onb4-part, .onb4-have{display:flex; gap:12px; align-items:flex-start; background:var(--surface-alt); border-radius:var(--radius-lg); padding:12px 14px;} .onb4-have{align-items:center;} .onb4-part strong, .onb4-have strong{display:block; font-size:14px; line-height:20px;} .onb4-part .note, .onb4-have .note{display:block;} .onb4-part-num{flex:0 0 24px; height:24px; border-radius:50%; box-sizing:border-box; border:1.5px solid var(--dest-neutral); color:var(--dest-neutral); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;} .onb4-part-num.on{background:var(--dest-neutral); color:var(--bg);} .onb4-have-icon{flex:0 0 36px; height:36px; border-radius:50%; background:var(--dest-neutral); color:var(--bg); display:flex; align-items:center; justify-content:center;} .onb4-block{background:var(--surface-alt); border-radius:var(--radius-lg); padding:14px 16px; display:flex; flex-direction:column; gap:10px; margin-bottom:16px;} .onb4-block strong{font-size:14px;} .onb4-ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; font-size:14px; line-height:21px;} /* Colonna dei passi */ .onb4-steps{border-right:1px solid var(--line); padding:28px 22px; display:flex; flex-direction:column; gap:22px; overflow-y:auto;} .onb4-hello{display:flex; align-items:center; gap:10px;} .onb4-hello img{width:30px; height:30px;} .onb4-hello strong{display:block; font-size:14px;} .onb4-group{display:flex; flex-direction:column; gap:6px;} .onb4-group-name{margin:0 0 4px; font-size:13px; line-height:18px; font-weight:600; color:var(--muted);} .onb4-step{display:flex; align-items:center; gap:10px; width:calc(100% + 12px); margin:-4px -6px; padding:4px 6px; border:0; border-radius:var(--radius-md); background:none; transition:background-color .15s ease; color:var(--ink); font:inherit; font-size:14px; font-weight:600; line-height:20px; text-align:left; cursor:default;} .onb4-step.done{cursor:pointer;} @media (hover: hover) and (pointer: fine){ .onb4-step.done:hover{background:var(--bg-card-alt);} } .onb4-step.todo{opacity:.45;} .onb4-step-icon{flex:0 0 30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--c);} .onb4-step.now .onb4-step-icon{background:var(--c); color:var(--bg);} .onb4-step-done{margin-left:auto; color:var(--success); flex:0 0 auto;} /* Contenuto */ .onb4-main{display:flex; flex-direction:column; min-width:0; min-height:0;} .onb4-body{flex:1; overflow-y:auto; padding:48px 56px 24px;} /* "Hay más abajo" nell'onboarding v4 (27/10): stessa pillola delle finestre (md-more-btn), subito sotto il contenuto */ .onb4-more{position:relative; height:0;} .onb4-more-fade{position:absolute; left:0; right:0; top:-36px; height:36px; background:linear-gradient(to bottom, transparent, var(--bg)); pointer-events:none; opacity:0; transition:opacity .15s ease;} .onb4-more .md-more-btn{top:-46px;} .onb4-main.onb4-more-below .onb4-more-fade{opacity:1;} .onb4-main.onb4-more-below .onb4-more .md-more-btn{display:inline-flex;} .onb4-content{max-width:560px;} .onb4-foot{border-top:1px solid var(--line); padding:16px 56px; display:flex; flex-direction:column; gap:8px;} .onb4-foot-btns{display:flex; justify-content:space-between; gap:10px;} .onb4-foot-note{text-align:right;} .onb4-add{display:flex; width:100%; align-items:center; gap:10px; min-height:52px; padding:0 16px; box-sizing:border-box; border-radius:var(--radius-lg); border:1px dashed var(--color-border-strong); background:transparent; color:var(--ink); font:inherit; font-size:14px; font-weight:700; cursor:pointer;} @media (hover: hover) and (pointer: fine){ .onb4-add:hover{border-color:var(--accent);} } .onb4-choices{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;} .onb4-choice{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; min-height:56px; padding:10px 12px; text-align:left; border-radius:var(--radius-lg); border:1px solid var(--color-border-strong); background:var(--surface-tile); color:var(--ink); font:inherit; cursor:pointer; transition:border-color .15s ease, transform .16s cubic-bezier(.23,1,.32,1);} .onb4-choice:active{transform:scale(.985);} .onb4-choice strong{display:block; font-size:14px; line-height:20px;} .onb4-choice .note{display:block;} .onb4-choice .mono{font-size:15px;} .onb4-choice.on{border-color:var(--accent); background:var(--accent-soft);} .onb4-choice .bank-badge, .onb4-choice .bank-badge-img{width:28px; height:28px;} .onb4-none-icon{width:28px; height:28px; border-radius:50%; background:var(--surface-input); color:var(--muted); display:flex; align-items:center; justify-content:center;} /* Colonna destra: Tu situación hoy */ .onb4-side{border-left:1px solid var(--line); background:var(--surface); padding:32px 24px; display:flex; flex-direction:column; gap:6px; overflow-y:auto;} .onb4-side-title{margin:0; font-family:Spectral, Georgia, serif; font-weight:600; font-size:19px; line-height:26px;} .onb4-side-desc{margin:0 0 8px;} .onb4-rows{display:flex; flex-direction:column; gap:10px;} .onb4-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:14px;} .onb4-row.done{padding:4px 0;} .onb4-row.done .mono{font-size:16px;} .onb4-row.now{flex-direction:column; align-items:flex-start; gap:4px; background:var(--surface-alt); border-radius:var(--radius-lg); padding:12px 14px;} .onb4-row-label{font-size:13px; font-weight:600; color:var(--muted);} .onb4-row-big{font-size:28px; line-height:34px;} .onb4-row.todo{border:1px dashed var(--color-border-strong); border-radius:var(--radius-lg); padding:12px 14px; font-size:13px; color:var(--muted);} /* Onboarding v4, Tu plan (27/10): passo 8 Tus ingresos e colonna destra della seconda parte */ .onb4-work{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-bottom:22px;} .onb4-work-tile{grid-template-columns:minmax(0,1fr); align-items:start;} .onb4-in-fields{display:grid; grid-template-columns:minmax(0,1fr) 140px; align-items:end; gap:12px; margin-bottom:22px; max-width:560px;} .onb4-in-fields .field{margin:0;} .onb4-in-fields #onb4-payday{min-height:58px; box-sizing:border-box; font-size:16px;} .onb4-in-others{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:baseline; max-width:560px; padding:12px 14px; border-radius:var(--radius-lg); background:var(--surface-alt);} .onb4-in-others strong{font-size:14px;} .onb4-in-others .mono{font-size:16px;} .onb4-in-others .note{grid-column:1 / -1;} .onb4-plan-rows{display:flex; flex-direction:column; margin:4px 0 8px;} .onb4-plan-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px;} .onb4-plan-row.now{margin:0 -10px; padding:8px 10px; border-bottom:0; border-radius:var(--radius-md, 10px); background:var(--surface-alt);} .onb4-plan-row.now + .onb4-plan-row.now{margin-top:4px;} .onb4-plan-row.todo{color:var(--muted);} .onb4-plan-row.total{border-bottom:0; padding-top:12px;} .onb4-plan-row.total .mono{font-size:16px;} .onb4-plan-dest{color:var(--c); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;} /* Passi 9 Vivir e 10 Deudas (27/10) */ .onb4-kicker{margin-bottom:10px;} .onb4-vv-list{display:flex; flex-direction:column; gap:10px; max-width:560px;} .onb4-vv-row{display:grid; grid-template-columns:40px minmax(0,1fr) 150px; gap:12px; align-items:center; padding:10px 12px; border-radius:var(--radius-lg); background:var(--surface-alt);} .onb4-vv-row .bank-badge, .onb4-vv-row .bank-badge-img{width:28px; height:28px; justify-self:center;} .onb4-vv-row .cd-money{margin:0;} .onb4-vv-row .cd-money input{text-align:right;} .onb4-vv-icon{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--surface);} .onb4-vv-total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; max-width:560px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:14px;} .onb4-vv-total .mono{font-size:16px;} .onb4-vv-total .note{font-family:'Nunito Sans', sans-serif;} .onb4-vv-q{margin-top:24px;} .onb4-vv-unc{margin-top:14px; max-width:560px;} /* Passo Proteger (27/10): il colchón con la scala 3/6/12 e quanto apartas */ .onb4-pt-card{display:flex; flex-direction:column; gap:12px; max-width:560px; margin-bottom:22px; padding:14px 16px; border-radius:var(--radius-lg); background:var(--surface-alt); box-sizing:border-box;} .onb4-pt-head{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:12px; align-items:center;} .onb4-pt-head .bank-badge, .onb4-pt-head .bank-badge-img{width:28px; height:28px;} .onb4-pt-head .mono{font-size:16px;} .onb4-pt-bar{position:relative; height:8px; border-radius:999px; background:var(--line);} .onb4-pt-bar > span{display:block; height:8px; border-radius:999px; background:var(--dest-proteger);} .onb4-pt-bar > i{position:absolute; top:-3px; width:2px; height:14px; margin-left:-1px; background:var(--muted);} .onb4-pt-levels{display:grid; grid-template-columns:1fr 1fr 2fr;} .onb4-pt-levels > span{display:flex; flex-direction:column; text-align:right; padding-right:6px; font-size:12.5px; line-height:18px; color:var(--muted);} .onb4-pt-levels > span:last-child{padding-right:0;} .onb4-pt-levels b{color:var(--ink); font-weight:700;} .onb4-pt-levels .reached b{color:var(--dest-proteger);} .onb4-pt-in{display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; align-items:end; max-width:560px;} .onb4-pt-in .field{margin:0;} .onb4-pt-in .note{margin:0 0 4px;} @media (max-width:640px){ .onb4-pt-in{grid-template-columns:minmax(0,1fr); gap:8px;} } /* Passo Crecer (27/10) */ .onb4-cr-state{display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:12px; align-items:center; max-width:560px; margin-bottom:22px; padding:14px 16px; border-radius:var(--radius-lg); background:var(--surface-alt); box-sizing:border-box;} .onb4-cr-state .mono{font-size:15px;} .onb4-cr-icon{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--dest-crecer); background:color-mix(in srgb, var(--dest-crecer) 14%, transparent);} .onb4-cr-icon.ok{color:var(--success); background:color-mix(in srgb, var(--success) 14%, transparent);} .onb4-cr-icon.prot{color:var(--dest-proteger); background:color-mix(in srgb, var(--dest-proteger) 14%, transparent);} .onb4-cr-fund{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px; border-radius:var(--radius-lg); background:var(--surface-alt);} .onb4-cr-fund .bank-badge, .onb4-cr-fund .bank-badge-img{width:28px; height:28px;} .onb4-cr-fund .mono{font-size:15px;} .onb4-cr-choice{grid-template-columns:repeat(2, minmax(0,1fr)); max-width:560px;} .onb4-cr-rec{display:inline-block; margin-bottom:4px; padding:1px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink); font-size:11.5px; font-weight:700;} .onb4-cr-in{margin-top:22px;} .onb4-plan-paused{display:inline-flex; align-items:center; gap:6px; color:var(--muted);} .onb4-plan-sub{display:block; text-align:right; font-size:11.5px;} @media (max-width:640px){ .onb4-cr-choice{grid-template-columns:minmax(0,1fr);} } /* Passo Tu plan está listo (27/10): verdetto + riepilogo, Crecer che aspetta, piano accanto al mese scorso */ .onb4-ls-top{display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:24px; align-items:start; max-width:600px; margin-bottom:18px;} .onb4-ls-x{color:var(--dest-disfrutar); white-space:nowrap;} .onb4-ls-neg{margin-top:8px;} .onb4-ls-sum{padding:10px 14px; border-radius:var(--radius-lg); background:var(--surface-alt);} .onb4-ls-row{display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:5px 0; font-size:14px; color:var(--muted);} .onb4-ls-row .mono{font-size:14px; color:var(--ink);} .onb4-ls-row.total{margin-top:4px; padding-top:8px; border-top:1px solid var(--line); color:var(--ink);} .onb4-ls-row.total .mono{font-size:16px;} .onb4-ls-dot{display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%;} .onb4-ls-wait{display:flex; gap:10px; align-items:flex-start; max-width:600px; margin:0 0 22px; font-size:12.5px; line-height:18px; color:var(--muted);} .onb4-ls-wait svg{flex:none; margin-top:1px; color:var(--dest-crecer);} .onb4-ls-wait strong{color:var(--ink);} .onb4-ls-cmp{display:grid; grid-template-columns:minmax(0,1fr) 110px 110px; gap:12px; align-items:baseline; max-width:600px; padding:7px 0; font-size:14px; border-top:1px solid var(--line);} .onb4-ls-cmp .mono{text-align:right;} .onb4-ls-cmp.head{border-top:0; padding-bottom:4px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);} .onb4-ls-cmp.head > span:not(:first-child){text-align:right;} .onb4-ls-real{max-width:600px; margin:14px 0 0; font-size:14px; line-height:21px;} .onb4-ls-list{display:flex; flex-direction:column; gap:4px; margin:4px 0 0;} .onb4-ls-list > div{display:flex; align-items:center; gap:10px; padding:6px 0; font-size:14px;} .onb4-ls-list svg{flex:none; color:var(--success);} .onb4-ls-next{display:flex; flex-direction:column; gap:6px; margin-top:14px; padding:12px 14px; border-radius:var(--radius-lg); background:var(--surface-alt); font-size:14px; line-height:21px;} @media (max-width:640px){ .onb4-ls-top{grid-template-columns:minmax(0,1fr); gap:14px;} .onb4-ls-cmp{grid-template-columns:minmax(0,1fr) 96px 96px; gap:8px;} } .onb4-vv-from{font-size:inherit; font-weight:600;} .onb4-vv-uncat{display:flex; flex-direction:column; gap:8px; max-width:560px; margin-top:10px;} .onb4-vv-urow{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:10px 12px; border-radius:var(--radius-lg); border:1px solid var(--color-border-strong); background:var(--surface-tile);} /* Passo Cómo se reparte (27/10): una riga per destino, nel suo colore */ .onb4-mt-list{display:flex; flex-direction:column; gap:8px; max-width:560px;} .onb4-mt-row{display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; align-items:center; padding:10px 12px; border-radius:var(--radius-lg); background:var(--surface-alt); max-width:560px; box-sizing:border-box;} .onb4-mt-row .note{display:block; margin-top:2px;} .onb4-mt-icon{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent);} .onb4-mt-fuera{margin-top:8px; background:none; border:1px dashed var(--color-border-strong);} @media (max-width:640px){ .onb4-vv-row{grid-template-columns:40px minmax(0,1fr); } .onb4-vv-row .cd-money{grid-column:2;} .onb4-vv-urow{grid-template-columns:minmax(0,1fr) auto;} .onb4-vv-urow .dest-pick{grid-column:1 / -1;} } @media (max-width:640px){ .onb4-work{grid-template-columns:minmax(0,1fr); gap:8px; margin-bottom:16px;} .onb4-in-fields{grid-template-columns:minmax(0,1fr) 96px; gap:10px; margin-bottom:16px;} } /* Mobile: cabecera, barra di riepilogo, foglio */ .onb4-mhead, .onb4-sumbar{display:none;} @media (max-width:640px){ .onb4-grid{grid-template-columns:minmax(0,1fr);} .onb4-steps, .onb4-side{display:none;} .onb4-content .onb4-idea-m{display:block;} .onb4-mhead{display:flex; flex-direction:column; gap:10px; padding:14px 16px 12px; border-bottom:1px solid var(--line);} .onb4-mhead-row{display:flex; align-items:center; gap:10px; font-size:13px;} .onb4-mhead-row img{width:24px; height:24px;} .onb4-mhead-row .note{margin-left:auto;} .onb4-mbar{display:grid; gap:4px;} .onb4-mbar-part{display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:600; color:var(--text-tertiary);} .onb4-mbar-part.on{color:var(--muted);} .onb4-track{display:block; height:4px; border-radius:var(--radius-pill); background:var(--line); overflow:hidden;} .onb4-track > span{display:block; height:4px; border-radius:var(--radius-pill); background:var(--dest-neutral);} .onb4-body{padding:20px 16px 12px;} .onb4-sumbar{display:flex; align-items:center; gap:10px; margin:0 16px 10px; padding:10px 14px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); color:var(--ink); font:inherit; text-align:left; cursor:pointer;} .onb4-sumbar-text{display:flex; flex-direction:column;} .onb4-sumbar-text strong{font-size:13px; font-weight:600;} .onb4-sumbar .mono{margin-left:auto; font-size:16px;} .onb4-sumbar svg{color:var(--muted);} .onb4-foot{padding:12px 16px calc(28px + env(safe-area-inset-bottom));} .onb4-foot-btns .onb4-primary{flex:1;} .onb4-intro{padding:0 16px;} .onb4-lang-top.onb3-lang{top:10px; right:12px;} .onb4-lang-top.onb3-lang button{min-height:36px; min-width:40px;} .onb4-intro-body{padding-top:32px;} .onb4-intro-foot{flex-direction:column-reverse; padding-bottom:calc(28px + env(safe-area-inset-bottom));} .onb4-intro.center .onb4-intro-foot .btn{width:100%;} .onb4-sheet-veil{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1;} .onb4-sheet{position:fixed; left:0; right:0; bottom:0; z-index:2; max-height:85vh; overflow-y:auto; background:var(--surface); border-radius:var(--radius-xl) var(--radius-xl) 0 0; box-shadow:0 8px 24px rgba(0,0,0,.22); padding:10px 16px calc(28px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:12px; animation:onb4-sheet-in .24s cubic-bezier(.23,1,.32,1);} .onb4-sheet-grip{align-self:center; width:36px; height:4px; border-radius:var(--radius-pill); background:var(--color-border-strong);} .onb4-sheet-head{display:flex; align-items:center; justify-content:space-between;} .onb4-sheet .onb4-side-desc{margin:-6px 0 0;} } @keyframes onb4-sheet-in{from{transform:translateY(24px); opacity:0;} to{transform:none; opacity:1;}} @media (prefers-reduced-motion: reduce){ .onb4-sheet{animation:none;} } /* Onboarding v4: eliminar un conto dalla lista; finestra del conto senza Preferencias (27/10) */ .onb4-acc{display:flex; align-items:center; gap:6px;} .onb4-acc ~ .onb4-add{margin-right:76px; width:auto;} .onb4-acc .acc-tile{flex:1; min-width:0;} .onb4-acc-sub{margin-left:28px;} .onb4-sub{flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; border-radius:var(--radius-md); border:1px solid var(--color-border-strong); background:var(--surface-tile); color:var(--ink); font:inherit; font-size:13.5px; text-align:left; cursor:pointer; transition:border-color .15s ease, transform .16s cubic-bezier(.23,1,.32,1);} div.onb4-sub{border-color:transparent; box-shadow:var(--shadow-sm); cursor:default;} .onb4-sub:active{transform:scale(.985);} @media (hover: hover) and (pointer: fine){ button.onb4-sub:hover{border-color:var(--accent);} } .onb4-sub-name{display:flex; flex-direction:column; gap:1px; min-width:0; font-weight:600;} .onb4-sub-name .note{font-weight:400; font-size:12.5px;} .onb4-sub .mono{font-size:13.5px; font-weight:600; white-space:nowrap;} .onb4-acc-act{flex:0 0 32px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:var(--muted);} @media (hover: hover) and (pointer: fine){ .onb4-acc-act:hover{color:var(--ink);} .onb4-acc-del:hover{color:var(--danger);} } .acc-modal-lite #new-cc-use-sec .field:has(#new-cc-use), .acc-modal-lite #new-cc-payfrom-note, .acc-modal-lite #new-acc-prefs, .acc-modal-lite #new-acc-prefs-sec > h3, .acc-modal-lite #new-pocket-prefs, .acc-modal-lite #new-pocket-prefs-sec > h3, .acc-modal-lite .acc-modal-delete{display:none;} #confirm-overlay{z-index:1200;} /* Onboarding v4: riquadro di un elemento (un investimento, una carta), interruttori in riga (27/10) */ .onb4-box{position:relative; display:flex; flex-direction:column; gap:14px; padding:14px 16px; margin-bottom:10px; background:var(--surface-alt); border-radius:var(--radius-lg);} .onb4-swr{display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer;} .onb4-swr > span{display:flex; flex-direction:column; gap:2px; font-size:14px;} .onb4-box .onb4-swr{padding-top:12px; border-top:1px solid var(--line);} .onb4-swr-top{padding:12px 0; margin-bottom:6px; border-top:1px solid var(--line);} /* Onboarding v4: carte e debiti (27/10) */ .onb4-card-head{flex:1; min-width:0; display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 12px; border-radius:var(--radius-md); border:1px solid var(--color-border-strong); background:var(--surface-tile); color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:border-color .15s ease, transform .16s cubic-bezier(.23,1,.32,1);} .onb4-card-head:active{transform:scale(.985);} @media (hover: hover) and (pointer: fine){ .onb4-card-head:hover{border-color:var(--accent);} } .onb4-card-head .bank-badge, .onb4-card-head .bank-badge-img{width:28px; height:28px;} .onb4-card-owed{display:flex; flex-direction:column; align-items:flex-end; gap:1px;} .onb4-card-owed .mono{font-size:16px;} .onb4-link-add{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:6px 0; border:0; background:none; color:var(--accent-ink); font:inherit; font-size:14px; font-weight:700; cursor:pointer;} .onb4-dgroup{display:flex; flex-direction:column; gap:12px; padding:14px 0; border-top:1px solid var(--line);} .onb4-after{margin-top:12px;} .onb4-side-idea{margin-top:6px;} .onb4-idea-m{display:none; margin-top:16px;} /* Onboarding v4: Tus inversiones con conferma (27/10) */ .onb4-flabel{font-size:13px; font-weight:600; color:var(--muted);} .onb4-tts{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-bottom:4px;} .onb4-tt{display:flex; flex-direction:column; gap:2px; padding:10px 12px; text-align:left; border-radius:var(--radius-md); border:1px solid var(--color-border-strong); background:var(--surface-tile); color:var(--ink); font:inherit; font-size:14px; cursor:pointer; transition:border-color .15s ease, transform .16s cubic-bezier(.23,1,.32,1);} .onb4-tt:active{transform:scale(.985);} .onb4-tt.on{border-color:var(--accent); background:var(--accent-soft);} @media (hover: hover) and (pointer: fine){ .onb4-tt:not(.on):hover{border-color:var(--muted);} } @media (max-width:640px){ .onb4-tts{grid-template-columns:1fr;} } /* Onboarding v4: finestra degli elementi e tessere figlie (27/10) */ #onb4-modal{z-index:1100;} .onb4-subs{display:flex; flex-direction:column; gap:8px;} .onb4-box .onb4-acc-sub{margin-left:0;} /* Onboarding v4: Tus extractos e Tu último mes (27/10) */ .onb4-ex-list{display:flex; flex-direction:column; gap:8px;} .onb4-ex-row{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; min-height:56px; padding:10px 12px; border-radius:var(--radius-lg); border:1px solid var(--color-border-strong); background:var(--surface-tile);} .onb4-ex-row.done, .onb4-ex-row.none{border-color:transparent; box-shadow:var(--shadow-sm);} .onb4-ex-row .bank-badge, .onb4-ex-row .bank-badge-img{width:28px; height:28px;} .onb4-ex-ok{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--success);} .onb4-ex-actions{display:flex; align-items:center; gap:12px;} .onb4-ex-skip{font-size:13px;} .onb4-read{margin-top:4px;} .onb4-read .onb4-track{display:block; width:100%; height:4px; margin-top:6px; border-radius:999px; background:var(--line); overflow:hidden;} .onb4-read .onb4-track > span{display:block; height:4px; border-radius:999px; background:#D9D6CF;} .onb4-um-sum{display:flex; flex-direction:column; gap:2px; padding:12px 16px; margin-bottom:22px; border-radius:var(--radius-lg); background:var(--surface-alt);} .onb4-um-sum > div{display:flex; justify-content:space-between; align-items:baseline; padding:4px 0; font-size:14px; color:var(--muted);} .onb4-um-sum .mono{font-size:15px; color:var(--ink);} .onb4-um-sum .total{margin-top:4px; padding-top:8px; border-top:1px solid var(--line); color:var(--ink); font-weight:700;} .onb4-um-sum .total .mono{font-size:18px;} .onb4-um-cats{display:flex; flex-direction:column; gap:12px;} .onb4-um-cat{display:flex; flex-direction:column; gap:5px;} .onb4-um-cat > div{display:flex; justify-content:space-between; font-size:13.5px;} .onb4-um-bar{display:block; height:6px; border-radius:999px; background:var(--line);} .onb4-um-bar > span{display:block; height:6px; border-radius:999px; background:#D9D6CF;} .onb4-um-more{display:flex; justify-content:space-between; padding:4px 0; border:0; background:none; color:var(--accent-ink); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;} .onb4-um-more .mono{color:var(--ink); font-weight:500;} /* Sin clasificar si tocca (27/10): stessa riga con barra, in un pulsante; hover = surface-alt come i passi */ .onb4-um-uncat{width:100%; margin:0 -8px; padding:6px 8px; box-sizing:content-box; border:0; border-radius:var(--radius-md, 8px); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer;} .onb4-um-uncat:hover, .onb4-um-uncat:focus-visible{background:var(--surface-alt);} .onb4-um-uncat > .note{color:var(--accent-ink); font-size:12.5px; font-weight:700;} .onb4-uncat{display:flex; flex-direction:column; gap:10px;} .onb4-uncat-row{display:grid; grid-template-columns:28px minmax(0,1fr) auto minmax(150px, 200px); gap:12px; align-items:center; padding:10px 12px; border-radius:var(--radius-lg); border:1px solid var(--color-border-strong); background:var(--surface-tile);} .onb4-uncat-row .field{margin:0;} .onb4-vt-once{grid-column:2; grid-row:2; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); cursor:pointer;} .onb4-vt-once .switch{transform:scale(.85); transform-origin:left center; margin:0;} .onb4-uncat-group{display:flex; flex-direction:column; gap:6px;} .onb4-uncat-toggle{align-self:flex-start; margin-top:2px; font-size:12.5px;} /* Movimenti del gruppo: riquadri più piccoli e rientrati sotto il gruppo, come gli apartados sotto il conto */ .onb4-uncat-items{display:flex; flex-direction:column; gap:6px; margin-left:40px;} .onb4-uncat-items[hidden], #onb4-f-freq-f[hidden]{display:none;} .onb4-uncat-item{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(150px, 200px); gap:12px; align-items:center; padding:8px 12px; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface-alt); font-size:13.5px;} .onb4-uncat-item .field{margin:0;} @media (max-width:640px){ .onb4-uncat-row{grid-template-columns:28px minmax(0,1fr) auto;} .onb4-uncat-row .field{grid-column:2 / -1;} .onb4-vt-once{grid-column:2 / -1; grid-row:auto;} .onb4-uncat-items{margin-left:16px;} .onb4-uncat-item{grid-template-columns:minmax(0,1fr) auto;} .onb4-uncat-item .field{grid-column:1 / -1;} } @media (max-width:640px){ .onb4-ex-row{grid-template-columns:28px minmax(0,1fr);} .onb4-ex-row > :last-child{grid-column:2;} } /* Import nell'onboarding v4: senza la guida dei destini la tabella prende tutta la larghezza (27/10) */ .ap-layout.has-side:has(> #csv-dest-guide[style*="none"]){display:block;} .confirm-box.wide.md-box:has(#csv-dest-guide[style*="none"]){max-width:760px;} /* Codice di recupero (0.224.0, finestre di openVault in js/04-cloud.js). */ /* Sopra ogni onboarding (v3 1200, v4 1050): finché i dati non sono aperti non si fa altro. */ #recovery-overlay{z-index:1800;} .rc-box .md-sec{display:flex; flex-direction:column; gap:12px;} .rc-code{font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:600; letter-spacing:1px; text-align:center; color:var(--ink); background:var(--surface-input); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px 12px; word-break:break-all; user-select:all;} .rc-actions{display:flex; gap:8px; justify-content:center;} .rc-input{font-family:'IBM Plex Mono',monospace; letter-spacing:.5px; text-transform:uppercase;} @media (max-width:640px){ .rc-code{font-size:16px;} } /* Gastos sin clasificar (onboarding v4, 30/10): la categoria proposta è già scelta nel menu e lo dice sotto. */ .onb4-uncat-sug{display:block; margin-top:4px;} .onb4-uncat select:not([data-sug]) + .onb4-uncat-sug{display:none;} /* Tu último mes (30/10): "Entró" si tocca per rivedere le entrate; la nota sui passaggi uniti. */ .onb4-um-sum button.onb4-um-in{display:flex; justify-content:space-between; align-items:flex-start; width:100%; background:none; border:0; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer;} .onb4-um-in > span:first-child{display:flex; flex-direction:column; gap:2px;} .onb4-um-in .note{color:var(--accent-ink); font-weight:600;} .onb4-um-joined{margin:0 0 10px;} .onb4-inc-refund{margin-top:8px;} .onb4-inc-refund label{display:block; font-size:13px; color:var(--muted); margin-bottom:4px;} /* Revisione di spese ed entrate per conto (onboarding v4, 30/10, proposta A). */ .onb4-rv{display:flex; flex-direction:column; gap:16px;} .onb4-rv-head{display:flex; align-items:center; gap:10px; margin:0 0 8px;} .onb4-rv-head .bank-badge-img, .onb4-rv-head .bank-badge{width:24px; height:24px;} .onb4-rv-head strong{font-size:14px; color:var(--ink);} .onb4-rv-head .note{margin:0 0 0 auto; white-space:nowrap;} .onb4-rv-rows{display:flex; flex-direction:column; gap:6px;} .onb4-rv-group{display:flex; flex-direction:column; gap:6px;} .onb4-rv-row{display:grid; grid-template-columns:minmax(0,1fr) auto 220px; gap:14px; align-items:center; padding:10px 14px; border-radius:var(--radius-lg); border:1px solid var(--border-strong); background:var(--surface-tile);} .onb4-rv-row .field{margin:0;} .onb4-rv-text{display:flex; flex-direction:column; gap:2px; min-width:0;} .onb4-rv-title{font-size:14px; font-weight:600; color:var(--ink); line-height:1.35; overflow-wrap:anywhere;} .onb4-rv-text .note{margin:0;} .onb4-rv-text .onb4-uncat-toggle{font-size:inherit; margin:0;} .onb4-rv-row .mono{font-size:15px; white-space:nowrap;} .onb4-rv .onb4-uncat-items{margin-left:24px;} @media (max-width:640px){ .onb4-rv-row{grid-template-columns:minmax(0,1fr) auto;} .onb4-rv-row .field{grid-column:1 / -1;} .onb4-rv .onb4-uncat-items{margin-left:12px;} }