/* ───────────────────────────────────────────────────────────────────────── Pryce — foglio di stile del pannello. Nessun framework: CSS scritto a mano. I font hanno un fallback di sistema, quindi il pannello resta leggibile anche senza rete. Regola di casa: niente attributi style="..." nel markup né stili scritti da JavaScript. Se un elemento cambia aspetto, cambia classe. ───────────────────────────────────────────────────────────────────────── */ :root{ --terracotta:#AF5441; --terracotta-scuro:#903D2B; --terracotta-tenue:#FFDAD3; --amber:#EBB13D; --amber-tenue:#FEC24D; --amber-scuro:#9A7000; /* --ink-3 e' il grigio dei testi minori. Era #88726E e sul panna dava 4,28:1, sotto la soglia AA di 4,5 proprio sulle etichette piccole, che sono quelle che ne hanno piu' bisogno. Scurito quel tanto che basta a passarla. */ --ink:#422B24; --ink-2:#55423E; --ink-3:#7A625E; --panna:#F7F2E8; --surface:#FEF9EF; --surface-1:#F8F3E9; --surface-2:#F2EDE3; --surface-3:#ECE8DE; --surface-4:#E7E2D8; --bianco:#FFFFFF; --linea:#DBC1BB; --notte:#1C1917; --ok:#006254; --ok-tenue:#C3FFF0; --err:#BA1A1A; --err-tenue:#FFDAD6; --r:.5rem; --r-lg:.75rem; --r-xl:1rem; --r-full:9999px; --sp-sm:10px; --sp-md:16px; --sp-lg:28px; --gutter:24px; --max:1100px; --ombra:0 1px 2px rgba(66,43,36,.06), 0 4px 16px rgba(66,43,36,.05); --ombra-alta:0 8px 32px rgba(66,43,36,.14); --nav-h:64px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--surface); color:var(--ink); font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:15px; line-height:24px; -webkit-font-smoothing:antialiased; padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px); -webkit-tap-highlight-color:transparent; } body::selection,::selection{background:var(--terracotta);color:#fff} /* Sprite delle icone: fuori dal flusso, non deve occupare spazio. */ .sprite{position:absolute;width:0;height:0} /* ── tipografia ─────────────────────────────────────────────────────── */ h1,h2,h3,h4{margin:0;font-weight:500} .t-hero{font-size:20px;line-height:30px;font-weight:500;color:var(--ink)} .t-sez{font-size:13px;line-height:16px;letter-spacing:.08em;font-weight:600; text-transform:uppercase;color:var(--ink-3)} h4.t-sez{margin-bottom:14px} .t-meta{font-size:12px;line-height:16px;font-weight:500} .t-prezzo{font-size:24px;line-height:24px;font-weight:700;font-variant-numeric:tabular-nums} .sub{color:var(--ink-2);font-size:13px;line-height:20px;margin:2px 0 0} .mono{font-variant-numeric:tabular-nums;letter-spacing:.01em} @media(min-width:768px){ .t-hero{font-size:22px;line-height:33px} } /* ── icone (sprite SVG inline: nessuna dipendenza di rete) ──────────── */ .ic{width:20px;height:20px;fill:currentColor;flex:none;vertical-align:-4px} .ic-sm{width:16px;height:16px} .ic-lg{width:24px;height:24px} .ic.ambra{color:var(--amber)} /* ── barra superiore ────────────────────────────────────────────────── */ .topbar{position:sticky;top:0;z-index:40;height:var(--nav-h); background:var(--surface);border-bottom:1px solid rgba(219,193,187,.35); display:flex;align-items:center;gap:12px;padding:0 16px} .logo{display:flex;align-items:center;gap:10px;color:var(--terracotta)} .logo .wordmark{font-family:'Yellowtail','Brush Script MT',cursive; font-size:32px;line-height:1;color:var(--terracotta);padding-bottom:6px} .sp{flex:1} /* 40px e non 36: e' un bersaglio da toccare col pollice, e sotto i 40 si sbaglia. Resta comunque piu' piccolo del logo, quindi non compete con lui. */ .avatar{width:40px;height:40px;border-radius:var(--r-full);border:none;cursor:pointer; background:var(--terracotta);color:#fff;font:600 13px/1 'Space Grotesk',sans-serif; display:flex;align-items:center;justify-content:center;letter-spacing:.02em} .avatar:hover{filter:brightness(1.08)} .menu{position:absolute;right:12px;top:58px;z-index:60;min-width:230px; background:var(--bianco);border:1px solid rgba(219,193,187,.5);border-radius:var(--r-lg); box-shadow:var(--ombra-alta);padding:6px;display:none} .menu.on{display:block} .menu .who{padding:10px 12px 12px;border-bottom:1px solid rgba(219,193,187,.35);margin-bottom:6px} .menu .who b{display:block;font-weight:600} .menu .who .sub{margin:0} .menu .who .ruolo{margin-top:8px} .menu button{width:100%;justify-content:flex-start;background:none;border:none; padding:9px 12px;border-radius:var(--r);color:var(--ink);font-size:14px; display:flex;align-items:center;gap:10px;cursor:pointer} .menu button:hover{background:var(--surface-2)} /* Scelta del cliente attivo: visibile solo a chi amministra più clienti. */ .menu .clienti{padding:4px 12px 6px;margin-bottom:6px; border-bottom:1px solid rgba(219,193,187,.35)} .menu .clienti > .t-meta{display:block;margin-bottom:4px} .menu .clienti button{padding-left:0} /* La spunta occupa lo spazio anche quando non si vede: senza, i nomi dei clienti non selezionati scivolerebbero a sinistra e la colonna ballerebbe. */ .menu .cliente .ic{opacity:0;color:var(--terracotta)} .menu .cliente.on .ic{opacity:1} .menu .cliente.on{font-weight:600} /* ── impaginato ─────────────────────────────────────────────────────── */ main{max-width:var(--max);margin:0 auto;padding:24px 16px 8px} .intro{margin-bottom:var(--sp-lg)} .intro .t-hero{margin-top:4px} /* intestazione di sezione con un pulsante a destra */ .intro.con-azione{display:flex;flex-wrap:wrap;gap:16px; align-items:flex-end;justify-content:space-between} .pane{display:none;animation:sali .28s ease-out} .pane.on{display:block} @keyframes sali{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.pane{animation:none}} .card{background:var(--surface-1);border:1px solid rgba(219,193,187,.3); border-radius:var(--r-lg);padding:20px;margin-bottom:var(--sp-md)} .card h3{font-size:16px;font-weight:700} /* titolo di card seguito dalla sua spiegazione, oppure da una tabella */ .card > h3 + .sub{margin-top:6px;margin-bottom:14px} .card > h3 + .tscroll{margin-top:14px} /* card che contiene solo una tabella a tutta larghezza */ .card.tabella{background:var(--bianco);padding:0;overflow:hidden} .card-hd{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px} .card-hd .txt{flex:1;min-width:0} /* pastiglia con l'icona accanto al titolo di una card */ .badge{background:rgba(255,218,211,.5);color:var(--terracotta); padding:7px;border-radius:var(--r);display:flex;flex:none} .badge .ic{width:20px;height:20px;vertical-align:0} .bento{display:grid;gap:var(--gutter);grid-template-columns:1fr} @media(min-width:700px){.bento{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.bento{grid-template-columns:repeat(3,1fr)}} .g2{display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:560px){.g2{grid-template-columns:repeat(2,1fr)}} .g3{display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:560px){.g3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}} .due-col{display:grid;gap:var(--gutter);grid-template-columns:1fr} @media(min-width:900px){.due-col{grid-template-columns:7fr 5fr;align-items:start}} /* ── controlli ──────────────────────────────────────────────────────── */ button{font-family:inherit} .btn{font:500 14px/1 'Space Grotesk',sans-serif;padding:12px 18px;border-radius:var(--r-lg); cursor:pointer;border:1px solid var(--linea);background:var(--bianco);color:var(--ink); display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.15s} .btn:hover:not(:disabled){background:var(--surface-2)} .btn:active:not(:disabled){transform:scale(.97)} .btn:disabled{opacity:.45;cursor:not-allowed} .btn.primario{background:var(--terracotta);border-color:var(--terracotta);color:#fff;font-weight:700} .btn.primario:hover:not(:disabled){background:var(--terracotta-scuro);border-color:var(--terracotta-scuro)} .btn.pericolo{background:var(--err);border-color:var(--err);color:#fff;font-weight:700} .btn.pericolo:hover:not(:disabled){filter:brightness(1.08);background:var(--err)} .btn.piccolo{padding:7px 12px;font-size:13px;border-radius:var(--r)} .btn.piena{width:100%} .btn.icona{padding:8px;border:none;background:none;color:var(--ink-3);border-radius:var(--r-full)} .btn.icona:hover:not(:disabled){background:var(--surface-3);color:var(--ink)} label{font-size:13px;color:var(--ink-2);display:block;margin-bottom:5px;font-weight:500} input,select{font-family:inherit;font-size:15px;padding:10px 12px;width:100%; border:1px solid var(--linea);border-radius:var(--r-lg);background:var(--bianco); color:var(--ink);transition:.15s} input:focus,select:focus{outline:none;border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(175,84,65,.14)} input:disabled,select:disabled{background:var(--surface-3);color:var(--ink-3);cursor:not-allowed} input[type=number]{font-variant-numeric:tabular-nums} /* campo data breve, formato giorno/mese */ input.data-breve{width:78px} /* gruppo di campi impilati dentro una modale */ .campi{display:grid;gap:12px} /* due campi affiancati: coppie che si leggono insieme (property_id e room_type_id, base e minimo). Su schermo stretto tornano incolonnati. */ .campi .due{display:grid;gap:12px;grid-template-columns:1fr} @media(min-width:520px){.campi .due{grid-template-columns:1fr 1fr}} /* slider come da mockup: traccia sottile, pomello terracotta */ input[type=range]{-webkit-appearance:none;appearance:none;background:transparent; padding:0;border:none;box-shadow:none;height:20px;cursor:pointer} input[type=range]:focus{outline:none;box-shadow:none} input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--linea)} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:20px;width:20px; border-radius:50%;background:var(--terracotta);margin-top:-8px; box-shadow:0 1px 3px rgba(66,43,36,.25);transition:transform .12s} input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)} input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(175,84,65,.22)} input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--linea)} input[type=range]::-moz-range-thumb{height:20px;width:20px;border:none;border-radius:50%; background:var(--terracotta);box-shadow:0 1px 3px rgba(66,43,36,.25)} input[type=range]:disabled::-webkit-slider-thumb{background:var(--ink-3)} .riga{display:flex;align-items:center;gap:14px;padding:9px 0} .riga .lbl{width:110px;flex:none;font-size:13px;color:var(--ink-2);font-weight:500} .riga input[type=range]{flex:1;min-width:80px} .riga .val{width:52px;flex:none;text-align:right;font-weight:700;font-size:15px; font-variant-numeric:tabular-nums;color:var(--terracotta)} .riga .hint{width:128px;flex:none;text-align:right;font-size:12px;color:var(--ink-3)} @media(max-width:640px){ .riga{flex-wrap:wrap;gap:8px 12px;padding:12px 0; border-bottom:1px solid rgba(219,193,187,.25)} .riga:last-child{border-bottom:none} .riga .lbl{width:auto;flex:1;font-size:14px;color:var(--ink)} .riga .val{order:2} .riga .hint{order:3;width:auto;flex:none} .riga input[type=range]{order:4;flex-basis:100%;min-width:0} } /* interruttore */ .sw{position:relative;width:44px;height:24px;flex:none;cursor:pointer;display:inline-block} /* L'area da toccare va oltre il disegno: l'interruttore resta alto 24px ma si prende 40px di bersaglio, che e' quello che serve al pollice. */ .sw input{position:absolute;opacity:0;margin:0;cursor:pointer;z-index:2; top:-8px;left:-4px;width:calc(100% + 8px);height:calc(100% + 16px)} .sw .track{position:absolute;inset:0;border-radius:var(--r-full); background:rgba(219,193,187,.65);transition:background .2s} .sw .dot{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(66,43,36,.22);transition:transform .2s} .sw input:checked ~ .track{background:var(--terracotta)} .sw input:checked ~ .dot{transform:translateX(20px)} .sw input:focus-visible ~ .track{box-shadow:0 0 0 3px rgba(175,84,65,.22)} .sw input:disabled{cursor:not-allowed} .sw-riga{display:flex;align-items:center;justify-content:space-between;gap:16px; padding-top:16px;border-top:1px solid rgba(219,193,187,.35);margin-top:4px} .sw-riga .txt{flex:1;min-width:0} .sw-riga .txt b{font-weight:600;font-size:14px} /* pillole */ .chip{display:inline-flex;align-items:center;gap:5px;padding:3px 11px; border-radius:var(--r-full);font-size:12px;font-weight:500;white-space:nowrap} .chip.ok{background:var(--ok-tenue);color:var(--ok)} .chip.attesa{background:rgba(235,177,61,.22);color:#5E4200} .chip.info{background:rgba(255,218,211,.55);color:var(--terracotta-scuro)} .chip.neutro{background:var(--surface-4);color:var(--ink-2)} .chip.err{background:var(--err-tenue);color:#93000A} .chip.grande{padding:5px 13px;font-size:12px;text-transform:uppercase;letter-spacing:.03em;font-weight:600} /* pillola del ruolo sulla scheda di un collaboratore */ .chip.r-admin{background:var(--terracotta);color:#fff} .chip.r-editor{background:var(--amber);color:#5E4200} /* Le pastiglie dei mesi erano alte 32px: si sbagliano col pollice, e sono dodici una accanto all'altra. Portate a 40, che e' la misura sotto la quale un bersaglio comincia a costare errori. Restano su due righe anche a 320px. */ .mesi{display:flex;flex-wrap:wrap;gap:7px} .mesi button{min-height:40px;padding:7px 13px;font-size:13px;font-weight:500;border-radius:var(--r-full); border:1px solid var(--linea);background:var(--bianco);color:var(--ink-2);cursor:pointer;transition:.15s} .mesi button:hover{border-color:var(--terracotta)} .mesi button.on{background:var(--terracotta);border-color:var(--terracotta);color:#fff} /* tabelle: su schermo stretto scorrono in orizzontale */ .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px} table{width:100%;border-collapse:collapse;font-size:14px;min-width:440px} th{text-align:left;font-size:12px;font-weight:600;color:var(--ink-2); padding:10px 10px;border-bottom:1px solid rgba(219,193,187,.5);white-space:nowrap} td{padding:11px 10px;border-bottom:1px solid rgba(219,193,187,.25);vertical-align:middle} tbody tr:last-child td{border-bottom:none} td input{padding:8px 10px;font-size:14px} td.azioni{text-align:right} .vuoto{color:var(--ink-3);font-style:italic} /* metriche */ .metrica{background:var(--bianco);border:1px solid rgba(219,193,187,.25); border-radius:var(--r-lg);padding:16px} .metrica .k{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .metrica .v{font-size:24px;line-height:30px;font-weight:700;color:var(--terracotta); font-variant-numeric:tabular-nums;margin-top:4px} .metrica .d{font-size:12px;color:var(--ink-2);margin-top:3px} /* avvisi */ .avviso{display:flex;gap:12px;align-items:flex-start;border-radius:var(--r-lg); padding:14px 16px;font-size:14px;line-height:21px;margin-bottom:var(--sp-md)} .avviso .ic{margin-top:2px} .avviso.attesa{background:rgba(235,177,61,.14);color:#5E4200;border:1px solid rgba(235,177,61,.4)} .avviso.info{background:var(--surface-1);color:var(--ink-2);border:1px solid rgba(219,193,187,.35)} .avviso.ok{background:var(--ok-tenue);color:var(--ok);border:1px solid rgba(94,133,90,.30)} .avviso.err{background:var(--err-tenue);color:#93000A;border:1px solid rgba(186,26,26,.3)} /* avviso che occupa tutta la griglia in cui si trova */ .avviso.piena-riga{grid-column:1/-1} /* schede struttura */ .prop{background:var(--surface-1);border:1px solid rgba(219,193,187,.3); border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column; transition:border-color .25s} .prop.attiva{border-color:rgba(175,84,65,.35)} .prop .testa{padding:20px;background: linear-gradient(135deg,rgba(175,84,65,.10),rgba(235,177,61,.10)); border-bottom:1px solid rgba(219,193,187,.3)} .prop .testa .alto{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .prop .testa h3{font-size:20px;line-height:28px;font-weight:500} .prop .testa .chip{margin-top:6px} .prop .testa .sub{margin-top:10px} .prop .corpo{padding:20px;display:flex;flex-direction:column;gap:16px;flex:1} .prop .prezzone{background:rgba(255,255,255,.6);border:1px solid rgba(219,193,187,.25); border-radius:var(--r);padding:14px 16px;display:flex;align-items:baseline; justify-content:space-between;gap:10px} .prop .prezzone .k{font-size:13px;color:var(--ink-2);font-weight:500} .prop .prezzone .t-prezzo{color:var(--terracotta)} .prop .prezzone .u{font-size:13px;font-weight:400;color:var(--ink-2)} .prop .piede{margin-top:auto;padding-top:16px;border-top:1px solid rgba(219,193,187,.3); display:flex;align-items:center;justify-content:space-between;gap:12px} /* «prezzo dinamico attivo» / «esclusa dai calcoli» */ .prop .piede .stato{display:flex;align-items:center;gap:8px; font-size:12px;font-weight:500;color:var(--terracotta)} .prop .piede .stato.spenta{color:var(--ink-3)} /* Interruttore di pubblicazione. Chiuso è lo stato normale, non un errore: colore neutro, non rosso. Aperto è la condizione da notare, perché da lì il motore scrive davvero sul calendario del PMS. */ .prop .pubblicazione{display:flex;align-items:center;gap:10px; padding:10px 12px;border-radius:var(--r);background:var(--surface-2); color:var(--ink-3);font-size:12px} .prop .pubblicazione span{flex:1} .prop .pubblicazione.aperta{background:var(--ok-tenue);color:var(--ok)} /* calendario */ .mese{margin-bottom:22px} .mese > .tit{font-weight:600;margin-bottom:8px;display:flex;align-items:baseline;gap:8px} .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .cal .dh{font-size:11px;font-weight:600;color:var(--ink-3);text-align:center;padding-bottom:4px} .cal .cell{border-radius:var(--r);padding:5px 2px;text-align:center;min-height:52px; background:var(--bianco);border:1px solid rgba(219,193,187,.25);position:relative} .cal .cell.orfana{border-color:var(--amber);background:rgba(235,177,61,.10)} .cal .cell .n{font-size:10px;color:var(--ink-3);font-weight:600} .cal .cell .p{font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .cal .cell .m{font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums} .cal .cell .su{color:var(--ok);font-weight:600} .cal .cell .giu{color:var(--terracotta);font-weight:600} /* Prezzo che c'è ora su Lodgify: si aggiunge sotto, in tono minore, perché il protagonista della cella resta il prezzo che pubblicheresti. Solo quando i due divergono il numero si accende, ed è quello che si va a cercare. */ .cal .cell .l{font-size:9px;color:var(--ink-3);margin-top:1px; font-variant-numeric:tabular-nums;letter-spacing:.01em} .cal .cell .l.scarto{color:var(--terracotta);font-weight:600} .cal .cell .l.assente{opacity:.45} .cal .cell.diverso{border-color:var(--terracotta); box-shadow:inset 0 0 0 1px rgba(175,84,65,.18)} /* Notte già venduta. Sta dopo .orfana e .diverso apposta: se una notte è insieme orfana e venduta, vince venduta, perché «non è più in vendita» è l'informazione che rende irrilevanti le altre. Il tratteggio spegne la cella invece di accenderla, ed è voluto: qui il prezzo su Lodgify è quello incassato, non il listino, quindi non c'è niente da andare a guardare. Un colore forte direbbe l'opposto. */ .cal .cell.venduta{border-color:rgba(136,114,110,.55); background:repeating-linear-gradient(-45deg, var(--surface-3) 0 5px, var(--surface-2) 5px 10px);box-shadow:none} .cal .cell.venduta .p{color:var(--ink-3)} .cal .cell.venduta .l.venduta{color:var(--ink-3);font-weight:600} .legenda{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:4px;font-size:12px;color:var(--ink-2)} .legenda i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px} .legenda i.orfana{background:var(--amber)} .legenda i.venduta{background:var(--ink-3)} .legenda i.su{background:var(--ok)} .legenda i.giu{background:var(--terracotta)} .legenda i.live{background:var(--terracotta)} .legenda i.forzata{background:var(--terracotta)} .legenda i.occupata{background:var(--surface-4);border:1px solid var(--linea)} .legenda i.alminimo{background:var(--amber)} /* ── griglia dei prezzi: unità in riga, giorni in colonna ────────────── La tabella scorre dentro il suo contenitore e non fa scorrere la pagina. La colonna dei nomi resta ferma: con trenta colonne, scorrendo verso destra si perde subito di vista su quale appartamento si sta guardando, e un prezzo attribuito all'unità sbagliata è l'errore che questa pagina deve impedire. */ /* Sul telefono i comandi vanno sotto il titolo. Affiancati com'e' il resto delle intestazioni, a 375px stringevano il titolo a una parola per riga e ci finivano sopra: la data del periodo e la tendina insieme sono larghe quanto mezza schermata. */ #cardGriglia .card-hd{flex-direction:column;gap:10px} .griglia-cmd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%} .griglia-cmd .t-meta{flex:1;min-width:120px;text-align:center} .griglia-cmd select{width:auto;min-width:110px} @media(min-width:720px){ #cardGriglia .card-hd{flex-direction:row;align-items:flex-start} .griglia-cmd{width:auto} .griglia-cmd .t-meta{flex:none;min-width:150px} } /* `.tscroll` sborda di 4px per non tagliare le ombre delle tabelle normali. Qui quei 4px diventano una fessura a sinistra della colonna ferma, da cui si vedono passare le celle che scorrono sotto: su questa tabella si annullano. */ .griglia{margin-top:var(--sp-sm);margin-left:0;margin-right:0; padding-left:0;padding-right:0} .griglia table{border-collapse:separate;border-spacing:3px} .griglia th{font-weight:600;font-size:11px;color:var(--ink-3);text-align:center; padding:0 2px} .griglia thead th b{display:block;font-size:15px;color:var(--ink);line-height:18px} .griglia thead th .sub{font-size:10px} .griglia thead th.fine b{color:var(--terracotta)} .griglia th.unita{position:sticky;left:0;z-index:2;background:var(--bianco); text-align:left;width:132px;min-width:132px;max-width:132px;font-size:13px; color:var(--ink);padding-right:10px;overflow:hidden; box-shadow:6px 0 8px -6px rgba(66,43,36,.16)} /* I nomi veri sono lunghi — «3 Rooms - Perla elegante loft centro» — e senza un limite scavalcano la colonna e finiscono sopra la prima notte. Due righe e poi i puntini: il nome intero resta nel `title`. */ /* La larghezza va detta qui e non solo sulla colonna: dentro una cella di tabella un box senza larghezza propria si allarga quanto il testo, e a tagliarlo resta l'`overflow` della colonna — cioe' una riga sola, mozzata. */ .griglia th.unita .nome{display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden;line-height:17px; overflow-wrap:anywhere;width:122px;white-space:normal} .griglia th.unita .sub{display:block;font-size:11px;font-weight:500; line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* La cella è un pulsante: deve essere raggiungibile da tastiera e grande abbastanza da colpirla col pollice. */ .griglia .cella{width:100%;min-width:52px;min-height:52px;cursor:pointer; border:1px solid var(--linea);border-radius:var(--r);background:var(--surface-1); padding:4px 2px;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:1px;font:inherit;color:var(--ink);transition:none} .griglia .cella .p{font-size:15px;font-weight:700;line-height:18px; font-variant-numeric:tabular-nums} .griglia .cella .ms,.griglia .cella .chi{font-size:10px;line-height:12px; color:var(--ink-3);max-width:100%;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .griglia .cella:hover:not(:disabled){border-color:var(--terracotta); background:var(--bianco)} .griglia .cella.alminimo{background:rgba(235,177,61,.14); border-color:rgba(235,177,61,.5)} .griglia .cella.forzata{background:var(--terracotta-tenue); border-color:var(--terracotta)} .griglia .cella.forzata .p{color:var(--terracotta-scuro)} .griglia .cella.occupata{background:var(--surface-3);color:var(--ink-3)} .griglia .cella.occupata .p{font-weight:600} .griglia .cella.bloccata{cursor:default} .griglia .cella.bloccata:hover{border-color:var(--linea)} .griglia .cella.scelta{border-color:var(--terracotta);border-width:2px; box-shadow:0 0 0 2px rgba(175,84,65,.20);padding:3px 1px} /* barra della selezione: sopra la barra del salvataggio, stesso linguaggio */ .selbar{position:fixed;left:0;right:0;z-index:46; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)); background:var(--bianco);border-top:1px solid rgba(219,193,187,.5); box-shadow:0 -4px 20px rgba(66,43,36,.10); padding:12px 16px;display:none;align-items:center;gap:8px;flex-wrap:wrap} .selbar.on{display:flex} .selbar .txt{flex:1;min-width:120px;font-size:13px;color:var(--ink-2)} .selbar .txt b{display:block;color:var(--ink);font-weight:600;font-size:14px} /* riquadri dell'anteprima, sopra al calendario */ #pvStats{margin-bottom:var(--sp-md)} /* esito dell'ultima simulazione, sotto al pulsante che la lancia */ #runOut{margin-top:18px} /* verifica prezzi — confronto a tre colonne */ .riga-campi{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap} .riga-campi > .campo{flex:1;min-width:130px} .riga-campi > .campo.largo{flex:2;min-width:220px} .vf-modo{display:flex;gap:8px;margin-bottom:16px} .vf-modo button{flex:1} .vf-modo button.on{background:var(--terracotta);border-color:var(--terracotta); color:#fff;font-weight:700} .vf-sintesi{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px} .delta{font-weight:600;font-variant-numeric:tabular-nums} .delta.su{color:var(--ok)} .delta.giu{color:var(--terracotta-scuro)} .delta.pari{color:var(--ink-3);font-weight:400} /* Oltre il 10% lo scostamento prende il fondino: sotto quella soglia sono differenze da leggere, sopra sono differenze da spiegare, e devono trovarsi scorrendo la colonna senza rileggere i numeri. */ .delta.forte{padding:2px 6px;border-radius:var(--r-full);font-weight:700} .delta.su.forte{background:var(--ok-tenue)} .delta.giu.forte{background:var(--terracotta-tenue)} /* Tabella della verifica: più righe nello stesso schermo. I prezzi sono numeri corti, e le colonne larghe li allontanavano dal loro confronto. */ table.vf{font-size:14px} table.vf th,table.vf td{padding:7px 10px} table.vf td.mono{white-space:nowrap} td.num{text-align:right;font-variant-numeric:tabular-nums} th.num{text-align:right} .vf-diag{margin-top:14px;font-size:12px} .vf-diag summary{cursor:pointer;color:var(--ink-3)} .vf-diag pre{margin-top:8px;padding:12px;border-radius:var(--r);overflow-x:auto; background:var(--surface-2);color:var(--ink-2);font-size:11px;line-height:1.5} /* canali */ .canale{border:1px solid rgba(219,193,187,.4);border-radius:var(--r-lg); padding:16px;margin-bottom:12px;background:var(--bianco)} .canale .testa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} .canale .testa input[name=nome]{width:170px;font-weight:600} .canale .g3{margin-bottom:14px} .canale th.quota{width:96px} .canale th.entro{width:136px} /* ── editor dei periodi speciali ────────────────────────────────────── */ /* Sono dodici, e prima erano dodici schede alte in colonna: la pagina scorreva senza fine e per confrontare Natale con Capodanno bisognava ricordarseli. Due (o tre) per riga li rende una tabella da leggere. */ #events{display:grid;gap:10px;grid-template-columns:1fr;align-content:start} @media(min-width:640px){#events{grid-template-columns:repeat(2,1fr)}} @media(min-width:1320px){#events{grid-template-columns:repeat(3,1fr)}} .periodo{border:1px solid rgba(219,193,187,.4);border-radius:var(--r-lg); padding:12px;background:var(--bianco)} /* Griglia e non flex-wrap: con flex il pulsante «elimina» finiva su una riga sua appena nome e tipo crescevano, e ogni scheda si portava dietro una riga vuota. Qui le quattro colonne sono fisse e la testata sta sempre su una riga. */ .periodo .testa{display:grid;gap:8px;align-items:center; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 74px 32px} .periodo .testa input,.periodo .testa select{padding:7px 9px;font-size:14px} .periodo .etichetta{font-weight:600;min-width:0} .periodo .tipo{min-width:0} .periodo .fattore{font-variant-numeric:tabular-nums; font-weight:700;color:var(--terracotta);text-align:center;padding-left:4px; padding-right:4px} .periodo .testa .btn.icona{padding:5px} /* L'aiuto è la stessa frase su ogni scheda dello stesso tipo: in dodici copie era metà dell'altezza della pagina. Resta, piccolo, su una riga sola. */ .periodo .aiuto{font-size:11.5px;line-height:1.35;color:var(--ink-3); margin:7px 0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .periodo:hover .aiuto,.periodo:focus-within .aiuto{white-space:normal} .periodo .campi-tipo{display:grid;gap:8px} .periodo .campi-tipo label{font-size:11.5px;margin-bottom:3px} .periodo .campi-tipo input,.periodo .campi-tipo select{padding:7px 9px;font-size:14px} .periodo .campi-tipo .g2{gap:8px;grid-template-columns:repeat(2,1fr)} /* quando cade davvero: lo calcola il server, non si scrive a mano */ .periodo .quando{margin-top:8px;padding-top:7px;font-size:11.5px;line-height:1.4; border-top:1px solid rgba(219,193,187,.3)} .periodo .quando .poi{color:var(--ink-3)} .periodo .quando.attesa{color:var(--ink-3);font-style:italic} .periodo .quando.incompleto{color:var(--err)} .edizione{display:flex;align-items:center;gap:6px;margin-bottom:6px} .edizione .tratto{color:var(--ink-3);flex:none} .edizione input{padding:6px 8px;font-size:13px} .barra-periodi{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px} /* ── anteprima del diff ─────────────────────────────────────────────── */ .modal .box.largo{max-width:760px} .diff-prop{border:1px solid rgba(219,193,187,.35);border-radius:var(--r-lg); padding:12px 14px;margin-bottom:10px;background:var(--bianco)} .diff-prop summary{cursor:pointer;font-size:14px;color:var(--ink-2)} .diff-prop summary b{color:var(--ink)} .diff-prop table{margin-top:10px;min-width:400px} /* effetto della protezione del minimo, riga per riga */ #nonrefEffect{margin-top:16px} #dblWarn .avviso{margin-top:14px} .protetto{color:var(--ok);font-weight:600} .scoperto{color:var(--terracotta);font-weight:600} /* utenti */ .utente{background:var(--surface-1);border:1px solid rgba(219,193,187,.3); border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column} .utente .alto{display:flex;align-items:flex-start;justify-content:space-between; gap:12px;margin-bottom:18px} .utente h3{font-size:20px;line-height:28px} .utente > .sub{margin-bottom:12px} .utente .mail{display:flex;align-items:center;gap:8px;color:var(--ink-3); font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tondo{width:56px;height:56px;border-radius:var(--r-full);display:flex;flex:none; align-items:center;justify-content:center;font-size:18px;font-weight:600;color:#fff; background:var(--terracotta);border:2px solid rgba(175,84,65,.2)} .tondo.editor{background:var(--amber);color:#5E4200;border-color:rgba(235,177,61,.28)} .tondo.viewer{background:var(--surface-4);color:var(--ink-2);border-color:rgba(136,114,110,.25)} .utente .piede{margin-top:auto;padding-top:16px;border-top:1px solid rgba(219,193,187,.25); display:flex;align-items:center;justify-content:space-between;gap:10px} .utente .piede .sub{font-style:italic} .azioni-riga{display:flex;gap:2px} .aggiungi{background:var(--surface-2);border:2px dashed rgba(219,193,187,.55); border-radius:var(--r-lg);padding:28px 20px;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;gap:6px;cursor:pointer; color:var(--ink-3);transition:.2s;min-height:200px} .aggiungi:hover{border-color:rgba(175,84,65,.5);background:var(--panna)} .aggiungi .bolla{width:48px;height:48px;border-radius:50%;background:var(--surface-4); display:flex;align-items:center;justify-content:center;margin-bottom:8px;transition:transform .2s} .aggiungi:hover .bolla{transform:scale(1.1)} .aggiungi .nota{font-size:12px;color:var(--linea)} /* tabella dei permessi per ruolo */ #roleTable thead tr{background:var(--surface-1)} #roleTable th.admin{color:var(--terracotta)} #roleTable th.editor{color:var(--amber-scuro)} #roleTable th.viewer{color:var(--ink-3)} .si.admin{color:var(--terracotta)} .si.editor{color:var(--amber)} .si.viewer{color:var(--ink-2)} .no{color:var(--linea)} /* barra di salvataggio */ .savebar{position:fixed;left:0;right:0;z-index:45; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)); background:var(--bianco);border-top:1px solid rgba(219,193,187,.5); box-shadow:0 -4px 20px rgba(66,43,36,.10); padding:12px 16px;display:none;align-items:center;gap:12px} .savebar.on{display:flex} .savebar .txt{flex:1;min-width:0;font-size:13px;color:var(--ink-2)} .savebar .txt b{display:block;color:var(--ink);font-weight:600;font-size:14px} /* navigazione inferiore */ /* La barra in basso e' l'unico elemento sempre presente: con sei voci su uno schermo da 360px ogni voce ha 58 pixel. Lo stato attivo era una pastiglia larga quanto tutta la voce, che a quella misura legge come una macchia e toglie spazio all'etichetta: «Calendario» entrava per un pelo e sotto i 375px andava a capo. Adesso la pastiglia sta **solo dietro l'icona**, e l'etichetta ha tutta la larghezza per se'. */ .bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:50; padding:7px 2px calc(env(safe-area-inset-bottom) + 7px); background:rgba(248,243,233,.94); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-top:1px solid rgba(219,193,187,.5);border-radius:var(--r-xl) var(--r-xl) 0 0; display:flex;align-items:stretch} .bottomnav a{flex:1 1 0;min-width:0;display:flex;flex-direction:column; align-items:center;justify-content:flex-start;gap:3px;padding:0; color:var(--ink-2);text-decoration:none;cursor:pointer;font-size:10px; line-height:13px;font-weight:500;letter-spacing:-.005em; transition:color .18s ease} .bottomnav .pastiglia{display:flex;align-items:center;justify-content:center; width:100%;max-width:56px;height:28px;border-radius:var(--r-full); transition:background-color .18s ease,transform .18s ease} .bottomnav .etichetta{max-width:100%;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;text-align:center} .bottomnav a:active .pastiglia{transform:scale(.9)} /* Attivo in terracotta, non in ambra: e' il colore primario del pannello, e quello che l'ambra segnalava (un'azione in attesa) e' un'altra cosa. */ .bottomnav a.on{color:var(--terracotta-scuro);font-weight:700} .bottomnav a.on .pastiglia{background:var(--terracotta-tenue)} .bottomnav a.on .ic{fill:var(--terracotta-scuro)} @media(min-width:520px){ .bottomnav a{font-size:11px} .bottomnav .pastiglia{height:30px} } /* modali: chiuse per definizione, si aprono aggiungendo .aperta */ .modal{position:fixed;inset:0;background:rgba(28,25,23,.45);z-index:80; display:none;align-items:center;justify-content:center;padding:20px; backdrop-filter:blur(3px)} .modal.aperta{display:flex} .modal .box{background:var(--surface);border-radius:var(--r-xl);padding:26px; max-width:460px;width:100%;box-shadow:var(--ombra-alta);max-height:90vh;overflow-y:auto} .modal .box h3{font-size:19px;font-weight:600;margin-bottom:4px} .modal .box > .sub{margin-bottom:18px} .modal .logo{margin-bottom:18px} .modal .azioni{margin-top:22px;display:flex;gap:10px;justify-content:flex-end} /* toast */ .toast{position:fixed;left:16px;right:16px;z-index:90; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); padding:14px 16px;border-radius:var(--r-lg);font-size:14px;line-height:20px; box-shadow:var(--ombra-alta);background:var(--ink);color:var(--panna); animation:sali .25s ease-out} .toast.err{background:var(--err);color:#fff} .toast.ok{background:var(--ok);color:#fff} @media(min-width:640px){.toast{left:auto;right:20px;max-width:420px}} /* dettaglio scuro, come la card «Dettaglio giorno» dei mockup */ .scuro{background:var(--ink);color:var(--panna);border-radius:var(--r-xl);padding:22px; position:relative;overflow:hidden} .scuro h3{color:var(--panna);font-size:19px;font-weight:600} .scuro .sub{color:rgba(247,242,232,.7)} /* il contenuto sta sopra l'alone sfocato */ .scuro .contenuto{position:relative;z-index:1} .scuro .griglia{display:grid;grid-template-columns:1fr 1fr;gap:16px; padding:16px 0;margin:16px 0;border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12)} .scuro .k{font-size:10px;text-transform:uppercase;letter-spacing:.06em; opacity:.6;font-weight:700} .scuro .v{font-size:20px;font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums} .scuro .d{font-size:14px;margin-top:4px} .scuro .alone{position:absolute;right:-40px;bottom:-40px;width:150px;height:150px; border-radius:50%;background:rgba(175,84,65,.30);filter:blur(44px);pointer-events:none} /* ── utilità ──────────────────────────────────────────────────────────── Poche e con un nome che dice cosa fanno. Le distanze qui sotto servono dove il margine dipende da come il blocco è accostato agli altri, non da cosa contiene: un pulsante «aggiungi» sotto una tabella, per esempio. ─────────────────────────────────────────────────────────────────────── */ .nascosto{display:none!important} .stacca-sm{margin-top:10px} .stacca{margin-top:14px} .stacca-lg{margin-top:16px} .stacca-xl{margin-top:var(--sp-lg)} .solo-desktop{display:none} @media(min-width:900px){.solo-desktop{display:inline-flex}} /* ── Oggi ─────────────────────────────────────────────────────────── La pagina d'ingresso: cosa fa la casa oggi, cosa e' arrivato, cosa ha mosso il motore, quanto e' pieno davanti. Le stesse card del resto del pannello, con tre schemi nuovi: la coppia partenza/arrivo, la lista dei movimenti di prezzo e la tabella dell'occupazione. */ .oggi-azioni{display:flex;align-items:center;justify-content:space-between; gap:12px;margin-bottom:var(--sp-md);flex-wrap:wrap} .oggi-azioni .t-meta{color:var(--ink-3)} .btn.caricando{opacity:.6} .avviso.piccolo{padding:9px 12px;font-size:13px;line-height:19px;margin:10px 0 0} .oggi-giornata{display:flex;flex-direction:column;gap:2px} .oggi-str{padding:14px 0;border-bottom:1px solid rgba(219,193,187,.28)} .oggi-str:last-child{border-bottom:none;padding-bottom:0} .oggi-nome{font-size:12px;letter-spacing:.08em;text-transform:uppercase; font-weight:700;color:var(--terracotta-scuro);margin-bottom:8px} .oggi-vuoto{font-size:13px;color:var(--ink-3)} .oggi-corso{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px} .oggi-corso .sub{margin:0} .mov-coppia{display:grid;gap:10px;grid-template-columns:1fr} @media(min-width:640px){ .mov-coppia{grid-template-columns:1fr 1fr} } .mov{background:var(--surface-2);border-radius:var(--r-lg);padding:11px 13px; display:flex;flex-direction:column;gap:2px} .mov.vuoto{background:transparent} .mov b{font-size:15px} .mov .sub{margin:0} .mov-t{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700; display:flex;align-items:center;gap:5px;margin-bottom:2px} .mov.partenza .mov-t{color:var(--terracotta-scuro)} .mov.arrivo .mov-t{color:var(--ok)} .pren-lista{list-style:none;margin:8px 0 0;padding:0;display:flex; flex-direction:column;gap:2px} .pren{padding:10px 0;border-bottom:1px solid rgba(219,193,187,.25); display:flex;flex-direction:column;gap:1px} .pren:last-child{border-bottom:none} .pren b{font-size:15px} .pren .sub{margin:0} .pren-str{font-size:11px;letter-spacing:.06em;text-transform:uppercase; font-weight:700;color:var(--ink-3)} .pren.cancellata b{text-decoration:line-through;color:var(--ink-3)} .pren.cancellata .pren-str{color:#93000A} .camb-griglia{display:grid;gap:var(--sp-md);grid-template-columns:1fr} @media(min-width:820px){ .camb-griglia{grid-template-columns:repeat(3,1fr)} } .camb{background:var(--surface-2);border-radius:var(--r-lg);padding:14px} .camb .sub{margin:6px 0 0} .camb-num{display:flex;flex-wrap:wrap;gap:6px} .movimenti{list-style:none;margin:10px 0 0;padding:0;font-size:13px} .movimenti li{display:flex;gap:8px;align-items:baseline;padding:3px 0; justify-content:space-between} .movimenti .sub{margin:0} /* `.delta` (su / giu / pari / forte) esiste gia' piu' sopra, definita per la tabella della verifica prezzi: stessa semantica, stessi colori. Qui si riusa e basta. Ridefinirla voleva dire due verita' sullo stesso nome, e quella che vince dipende dall'ordine del file. */ table.occ{min-width:380px} table.occ td.tot{white-space:nowrap;font-weight:700} .occ-barra{display:inline-block;width:54px;height:6px;border-radius:var(--r-full); background:var(--surface-4);margin-right:8px;vertical-align:middle;overflow:hidden} .occ-barra i{display:block;height:100%;border-radius:var(--r-full)} .occ-barra i.alta{background:var(--ok)} .occ-barra i.media{background:var(--amber)} .occ-barra i.bassa{background:var(--terracotta-scuro)} .occ-barra i.w0{width:0%} .occ-barra i.w5{width:5%} .occ-barra i.w10{width:10%} .occ-barra i.w15{width:15%} .occ-barra i.w20{width:20%} .occ-barra i.w25{width:25%} .occ-barra i.w30{width:30%} .occ-barra i.w35{width:35%} .occ-barra i.w40{width:40%} .occ-barra i.w45{width:45%} .occ-barra i.w50{width:50%} .occ-barra i.w55{width:55%} .occ-barra i.w60{width:60%} .occ-barra i.w65{width:65%} .occ-barra i.w70{width:70%} .occ-barra i.w75{width:75%} .occ-barra i.w80{width:80%} .occ-barra i.w85{width:85%} .occ-barra i.w90{width:90%} .occ-barra i.w95{width:95%} .occ-barra i.w100{width:100%} /* ── accessibilita' e movimento ────────────────────────────────────── Due cose che mancavano e che non si vedono finche' non servono. */ /* Il contorno di messa a fuoco da tastiera. `:focus-visible` e non `:focus`: cosi' non compare a ogni clic col mouse, ma c'e' per chi naviga in Tab. */ .btn:focus-visible,.bottomnav a:focus-visible,.avatar:focus-visible, .menu button:focus-visible,.prop-hd:focus-visible,a:focus-visible{ outline:2px solid var(--terracotta);outline-offset:2px;border-radius:var(--r)} .bottomnav a:focus-visible{outline-offset:-2px} /* Chi ha chiesto meno animazioni al sistema operativo lo ha fatto per un motivo: nausea da movimento, attenzione, batteria. Qui si spegne tutto, non si rallenta soltanto. */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} } /* ── aree di tocco ─────────────────────────────────────────────────── Alcuni comandi sono piccoli per ragioni di composizione: i bottoni-icona dell'editor dei periodi stanno in righe dense, e ingrandirli davvero spezzerebbe l'allineamento. Si allarga allora **l'area sensibile**, non il disegno: un rettangolo invisibile intorno al bottone. Il pollice trova 38-40 pixel, l'occhio continua a vedere l'icona di prima. */ .btn.icona{position:relative} .btn.icona::after{content:"";position:absolute;inset:-6px;border-radius:inherit} .btn.piccolo{position:relative;min-height:34px} .btn.piccolo::after{content:"";position:absolute;inset:-4px;border-radius:inherit} /* I menu a tendina invece si possono alzare senza danno. */ select,.tipo{min-height:40px} /* ── leggibilita' su schermo largo ─────────────────────────────────── A 1280px il testo esplicativo correva per 158 caratteri a riga: l'occhio, arrivato in fondo, non ritrova l'inizio di quella dopo. Sopra i 75-80 si legge peggio, e questo pannello e' fatto di spiegazioni brevi che vanno lette davvero. Il limite e' in `ch`, cioe' in caratteri: cambia con il corpo del testo invece di essere un numero di pixel scelto una volta. */ /* 62ch e non 72: l'unita' `ch` misura la larghezza dello zero, che in Space Grotesk e' generosa, e 72ch davano ancora 92 caratteri per riga. Misurato sul risultato, non sul numero che suonava giusto. */ .sub,.card > p,.intro .sub{max-width:62ch} /* La barra in basso a schermo largo non deve diventare un nastro: le voci si raccolgono al centro invece di allargarsi a 210px l'una. */ @media(min-width:560px){ .bottomnav{justify-content:center;gap:4px} .bottomnav a{flex:0 1 104px} } /* ── i soldi ───────────────────────────────────────────────────────── La discesa dal lordo al netto si legge come una ricevuta: una riga per sottrazione, i numeri incolonnati a destra con cifre a larghezza fissa. Il lordo e il netto sono gli unici due valori in grande, perche' sono gli unici due che si tengono a mente. */ .scala{list-style:none;margin:14px 0 4px;padding:0} .scala li{display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:9px 0;border-bottom:1px solid rgba(219,193,187,.28);font-size:14px} .scala li:last-child{border-bottom:none} .scala b{font-weight:600;white-space:nowrap} .scala li.lordo{font-weight:500} .scala li.lordo b,.scala li.netto b{font-size:19px;font-weight:700} .scala li.netto{border-top:2px solid rgba(219,193,187,.5);margin-top:4px; padding-top:12px;color:var(--ok)} .scala li.netto b{color:var(--ok)} table.soldi{min-width:420px} table.soldi td.mono,table.soldi th{text-align:right;white-space:nowrap} table.soldi td:first-child,table.soldi th:first-child{text-align:left} table.soldi td.meno{color:var(--ink-3)} table.soldi td.netto{font-weight:700;color:var(--ok)} table.soldi .sub{display:inline;margin:0;font-size:11px} /* ── rifiniture dall'audit di redesign ─────────────────────────────── Quattro cose trovate applicando la lista di controllo al pannello vero. Le altre voci della lista riguardano siti vetrina e qui non si applicano. */ /* «Salta al contenuto»: fuori dallo schermo finche' non lo si mette a fuoco con il Tab. Senza, chi naviga da tastiera deve passare ogni volta per la barra in alto e il menu dell'account prima di arrivare ai dati. */ .salta{position:absolute;left:-9999px;top:0;z-index:100; background:var(--terracotta);color:#fff;padding:10px 16px; border-radius:0 0 var(--r) 0;font-size:14px;font-weight:600;text-decoration:none} .salta:focus{left:0} main:focus{outline:none} /* Parole orfane: una parola sola sull'ultima riga di un titolo si nota, e su uno schermo stretto capita spesso. `balance` distribuisce le righe dei titoli, `pretty` evita l'orfana nei paragrafi. */ .t-hero,h3,.card h3{text-wrap:balance} .sub,.oggi-vuoto{text-wrap:pretty} /* Scheletro di caricamento: la pagina Oggi arriva da una chiamata di rete, e senza questo mostra un vuoto che sembra un errore. Ha la forma di cio' che sta per apparire, non un cerchietto che gira. */ .scheletro{display:flex;flex-direction:column;gap:var(--sp-md)} .scheletro .osso{background:var(--surface-2);border-radius:var(--r-lg); border:1px solid rgba(219,193,187,.3);position:relative;overflow:hidden} .scheletro .osso.alto{height:184px} .scheletro .osso.medio{height:132px} @media(prefers-reduced-motion:no-preference){ .scheletro .osso::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:luccica 1.4s ease-in-out infinite} @keyframes luccica{from{transform:translateX(-100%)}to{transform:translateX(100%)}} } /* ── import degli incassi ──────────────────────────────────────────── Il file input di serie e' inguardabile e non si puo' stilare: si nasconde e si usa la sua `