:root{ /* ==== TEMA CLIENTE ==== Per personalizzare il contratto (colori brand, font) si cambiano SOLO le variabili qui sotto. Il layout piu' in basso non si tocca mai. */ --purple:#102B3F; --blue:#6247AA; --cyan:#A06CD5; --ink:#1A1A2E; --body:#4A4A6A; --label:#8787AA; --hairline:#E0D8F8; --boxbg:#F8F5FF; --value:#000000; --font-sans:Arial,Helvetica,'Segoe UI',sans-serif; --font-serif:Georgia,'Times New Roman',serif; /* interlinea unica del documento (piu' aria) */ --lh-body:1.42; } *{box-sizing:border-box} @page{size:A4;margin:0} html,body{margin:0;padding:0} body{font-family:var(--font-serif)} .sheet{ width:210mm; height:297mm; padding:12.7mm 25.4mm 25.4mm; overflow:hidden; page-break-after:always; display:flex; flex-direction:column; position:relative; background:#fff; margin:0 auto; color:var(--body); } .sheet:last-of-type{page-break-after:auto} .sheet > *{ flex:0 0 auto; } /* ===== Mini-header di pagina (tutte le pagine) ===== */ .mini-head{ display:flex; align-items:baseline; justify-content:flex-end; gap:0; font-family:var(--font-sans); font-size:8.7pt; border-bottom:1px solid var(--hairline); padding-bottom:4mm; margin-bottom:4.6mm; } .mini-head .brand{color:var(--purple); font-weight:700} .mini-head .rest{color:var(--label); margin-left:3px} /* ===== Footer di pagina ===== */ .foot{ position:absolute; left:25.4mm; right:25.4mm; bottom:10.5mm; display:flex; justify-content:center; align-items:center; font-family:var(--font-sans); font-size:8.7pt; color:var(--label); border-top:1px solid var(--hairline); padding-top:3.2mm; } .foot .pgnum{color:var(--purple); font-weight:700} /* ===== Testata con logo (foglio 1 e Allegato A) ===== */ .testata{ text-align:center; margin:4.4mm 0 5mm; } .testata img.logo{ display:block; margin:0 auto 5mm; height:19.8mm; width:auto; } .testata img.logo.sm{ height:14.9mm; margin-bottom:4mm; } h1.doc-title{ font-family:var(--font-sans); font-weight:700; margin:0; text-wrap:balance; } h1.doc-title .l1{ display:block; font-size:14pt; color:var(--purple); } h1.doc-title .l2{ display:block; font-size:14pt; color:var(--ink); margin-top:1mm; } h1.allegato-title{ font-family:var(--font-sans); font-weight:700; font-size:13.3pt; color:var(--purple); margin:0; text-wrap:balance; } .testata .rules{ margin:5mm 0 0; } .testata .rules .r1{ border-top:2pt solid var(--purple); } .testata .rules .r2{ border-top:1pt solid var(--blue); margin-top:1.6mm; } .testata .rules .r3{ border-top:1pt solid var(--cyan); margin-top:1.6mm; } /* Allegato A: le 2 linee (viola+ciano) respirano di piu' (giro 3, punto 22) */ .testata .rules.allegato .r3{ margin-top:3.2mm; } .testata .subtitle{ font-family:var(--font-serif); font-style:italic; font-size:9.3pt; color:var(--label); margin:4mm 0 0; } .testata .rule-bottom{ border-top:1pt solid var(--cyan); margin-top:4mm; } /* ===== Bande sezione (PARTI CONTRAENTI / PREMESSE / SOTTOSCRIZIONE / ecc.) ===== */ h2.band{ font-family:var(--font-sans); font-weight:700; font-size:10pt; color:#fff; background:var(--purple); padding:2.6mm 3.5mm; margin:0 0 4.5mm; display:inline-block; text-wrap:balance; } h2.band.lg{ font-size:10.6pt; padding:3mm 4mm; } /* ===== Parti contraenti (prosa, non box) ===== */ /* interlinea maggiorata rispetto al corpo: qui le righe portano i campi sottolineati e senza aria extra la sottolineatura tocca la riga sotto */ .parti p{ margin:0 0 4mm; font-size:10.67pt; line-height:1.62; } /* valori compilati in grassetto, anche P.IVA e sede (giro 5, punto 40) */ .parti .fill{ padding-bottom:4.5px; font-weight:700; } .parti .lbl{ font-family:var(--font-sans); font-size:9.3pt; font-weight:700; color:var(--label); letter-spacing:.01em; } /* ===== Articoli ===== */ h2.art{ font-family:var(--font-sans); font-weight:700; font-size:11.3pt; margin:5mm 0 3mm; padding-bottom:2.4mm; border-bottom:1px solid var(--hairline); text-wrap:balance; } h2.art:first-of-type{ margin-top:0; } h2.art .n{ color:var(--purple); } h2.art .dash{ font-weight:400; color:var(--ink); } h2.art .t{ color:var(--ink); } p{ margin:0 0 3mm; font-size:10.67pt; line-height:var(--lh-body); color:var(--body); } p.tight{ margin-bottom:0.5mm; } p strong.lead{ font-weight:700; color:var(--purple); } /* segnaposto da compilare prima dell'uso: evidenziati di proposito */ .ph{ background:#FFF1A8; color:#6B4E00; font-weight:700; border-radius:2px; padding:0 .6mm; } strong{ font-weight:700; } em{ font-style:italic; } ul.legal{ margin:0 0 3mm; padding:0; list-style:none; } ul.legal li{ position:relative; padding-left:11px; margin-bottom:1.5mm; font-size:10.67pt; line-height:var(--lh-body); color:var(--body); } ul.legal li::before{ content:"\25B8"; position:absolute; left:0; top:0; color:var(--purple); font-size:9pt; } /* ===== Campi compilabili a riga (contratto) ===== */ .fill{ display:inline-block; border-bottom:1px solid var(--hairline); min-width:60px; padding:1px 5px 3.5px; margin:0 1px; font-family:var(--font-serif); color:var(--body); } .fill.w-s{min-width:36px} .fill.w-m{min-width:100px} .fill.w-l{min-width:180px} .fill.w-xl{min-width:300px} .fill.ln{display:block; width:100%; min-height:12px; margin:1.6mm 0 1.6mm; border-bottom:1px solid var(--ink); max-width:130mm;} /* ===== Sottoscrizione / Approvazione / Allegato finale: box firme ===== */ .firme-pair{ display:flex; gap:8mm; margin-top:auto; padding-top:3mm; } .firma-box{ flex:1; background:var(--boxbg); border-top:3pt solid var(--purple); padding:3mm 5mm 3.5mm; display:flex; flex-direction:column; } .firma-box.cliente{ border-top-color:var(--blue); } .firma-box .chi{ display:block; font-family:var(--font-sans); font-weight:700; font-size:8pt; color:var(--purple); letter-spacing:.02em; margin-bottom:2.6mm; } .firma-box.cliente .chi{ color:var(--blue); } .firma-box .nome-fisso{ font-family:var(--font-serif); font-weight:700; font-size:12pt; color:var(--ink); margin:0 0 3.4mm; line-height:1.2; /* riserva 2 righe: se il nome del cliente va a capo, le righe Data/Firma delle due card restano comunque allineate tra loro */ min-height:10.2mm; } .firma-row{ display:flex; flex-direction:column; gap:2mm; margin-top:auto; } .firma-row .riga{ display:flex; align-items:flex-end; gap:3mm; position:relative; } .firma-row .riga .label{ font-family:var(--font-sans); font-size:8pt; color:var(--label); flex:0 0 auto; padding-bottom:1px; } /* Data: trattini stile Word SEMPRE visibili, il valore compilato si appoggia sopra i trattini */ .data-line{ flex:1; max-width:46mm; min-height:4.6mm; font-family:var(--font-sans); font-size:9.5pt; color:var(--value); padding:0 1mm 1.2mm; white-space:nowrap; overflow:hidden; position:relative; } .data-line::after{ /* tratteggio pulito (linea dashed), via gli underscore "_ _ _" che rendevano male */ content:""; position:absolute; left:1mm; right:1mm; bottom:0; height:0; border-bottom:1.1px dashed #B9B9CE; } /* linea firma color-coded: viola Consulente, azzurro Cliente */ .firma-line{ flex:1; max-width:46mm; border-bottom:1.2px solid var(--purple); height:13mm; position:relative; } .firma-box.cliente .firma-line{ border-bottom-color:var(--blue); } .firma-line img{ max-height:12.4mm; max-width:44mm; width:auto; height:auto; position:absolute; bottom:0.6mm; left:0; } /* Firma consulente (PNG reale quasi quadrato 1.58:1): col tetto unico 12.4mm usciva larga ~20mm, minuscola. Slot consulente piu' alto (nel Doc master era 19-38mm), restando dentro il respiro dalla riga Data (mai toccarla). */ .firma-box:not(.cliente) .firma-line img{ max-height:16mm; bottom:-0.5mm; } /* la firma non deve mai invadere la riga Data sopra */ .firma-row{ gap:3mm; } .firma-solo{ background:var(--boxbg); border-top:3pt solid var(--blue); padding:5mm 6mm 6mm; margin-top:auto; } .firma-solo .firma-line{ border-bottom-color:var(--blue); } .firma-solo .chi{ display:block; font-family:var(--font-sans); font-weight:700; font-size:8pt; color:var(--blue); letter-spacing:.02em; margin-bottom:3mm; max-width:120mm; } .firma-solo .nome-fisso{ font-family:var(--font-serif); font-weight:700; font-size:12pt; color:var(--ink); margin:0 0 6mm; } .firma-solo .firma-row{ max-width:100mm; } /* ===== Checkbox pagamento ===== */ .chk{ font-family:var(--font-serif); color:var(--body); font-size:10.67pt; margin:0 0 1.6mm; line-height:var(--lh-body); position:relative; padding-left:11px; } .chk::before{ content:"\25B8"; position:absolute; left:0; top:0; color:var(--purple); font-size:9pt; } .chk .box{ color:var(--body); } /* ===== Tabella rate (elemento funzionale aggiunto, non presente nel Doc originale) ===== */ table.rate{ width:100%; max-width:130mm; border-collapse:collapse; margin:1.2mm 0 2mm; } table.rate th{ font-family:var(--font-sans); font-size:7.5pt; text-transform:uppercase; letter-spacing:.03em; color:var(--label); text-align:left; border-bottom:1px solid var(--hairline); padding:0.6mm 2mm 0.5mm 0; } table.rate td{ font-family:var(--font-sans); font-size:9.5pt; padding:0.6mm 2mm 0.6mm 0; border-bottom:1px solid var(--hairline); color:var(--value); } table.rate td.voce-rata{ color:var(--label); font-weight:700; } /* ===== Allegato A: campi ===== */ h2.sec-num{ font-family:var(--font-sans); font-weight:700; font-size:10pt; color:var(--ink); margin:2.3mm 0 1.3mm; } h2.sec-num:first-of-type{ margin-top:0; } .field{ margin-bottom:2mm; } .field .label{ font-family:var(--font-sans); font-size:8.7pt; font-weight:700; color:var(--label); display:inline-block; margin-right:2mm; } .campo-inline{ font-size:10pt; margin:0 0 0.5mm; font-family:var(--font-sans); } .campo-inline .label{ font-family:var(--font-sans); font-size:8.7pt; font-weight:700; color:var(--label); } /* valori business leggibili quanto i campi del cliente (giro 3, punto 23): 8.7pt era "3.000€ in piccolino" accanto ai campi cliente a 10.67pt */ .campo-inline .val{ font-family:var(--font-sans); font-weight:700; font-size:10.2pt; color:var(--value); } .riga-libera{ font-family:var(--font-serif); font-size:10.67pt; color:var(--body); line-height:var(--lh-body); margin:0 0 1mm; position:relative; padding-left:11px; } .riga-libera::before{ content:"\25B8"; position:absolute; left:0; top:0; color:var(--purple); font-size:9pt; } .riga-libera .fill{ color:var(--body); font-weight:700; border-bottom:none; } .colophon{ font-family:var(--font-serif); font-size:9.3pt; color:var(--body); margin-top:auto; margin-bottom:12mm; } /* ================================================================ */ /* GUSCIO DEL SITO DI FIRMA, sopra il CSS del documento (verbatim) */ /* ================================================================ */ @font-face{ font-family:'Allura'; src:url('fonts/Allura.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; } :root{ --ll-viola:#6247AA; --ll-ciano:#E2CFEA; --ll-bg:#050508; --ll-bg2:#0a0a14; --ll-rosso:#E5484D; --ll-verde:#22C55E; /* CTA "Inizia": verde come Google, non e' il colore del brand */ --ll-verde-hover:#16A34A; --ll-testo:#EDEBF2; --ll-testo-soft:#B9B4C4; --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; --altezza-barra-1:56px; --altezza-barra-2:44px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; min-height:100vh; background:var(--ll-bg); color:var(--ll-testo); font-family:var(--font-ui); padding-top:calc(var(--altezza-barra-1) + var(--altezza-barra-2)); overflow-x:hidden; } body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.02) 1px,transparent 1px); background-size:22px 22px; } .ambiente{position:fixed; z-index:0; pointer-events:none; border-radius:50%; filter:blur(120px); opacity:.16} .ambiente.a1{width:640px; height:640px; top:-180px; left:-160px; background:var(--ll-viola)} .ambiente.a2{width:680px; height:680px; bottom:-220px; right:-180px; background:var(--ll-ciano)} .ambiente.a3{width:420px; height:420px; top:38%; left:46%; background:var(--ll-viola); opacity:.08} /* ===== Barra 1 (chiara): pennino + stato · azioni ===== */ html.modo-cliente .ambiente{display:none} html.modo-cliente body{background:#52565A} #barra-1{ /* clone stile Google eSignature: barra bianca, testi 14-15px, bottoni Material */ position:fixed; top:0; left:0; right:0; z-index:200; height:var(--altezza-barra-1); background:#fff; border-bottom:1px solid #DADCE0; display:flex; align-items:center; gap:12px; padding:0 16px; font-family:var(--font-ui); color:#202124; } #barra-1 .stato-doc{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} #barra-1 .stato-doc .icona-penna{font-size:18px; flex:0 0 auto} #barra-1 .spacer{flex:1} #barra-1 button{ font-family:inherit; font-size:14px; font-weight:600; border-radius:4px; padding:9px 16px; cursor:pointer; white-space:nowrap; border:1px solid transparent; } #barra-1 .btn-dettagli{background:transparent; color:#1A73E8; border-color:transparent} #barra-1 .btn-dettagli:hover{background:rgba(26,115,232,.08)} #barra-1 .btn-completa{background:#1A73E8; color:#fff} #barra-1 .btn-completa:hover:not(:disabled){background:#1765CC} #barra-1 .btn-completa:disabled{background:#F1F3F4; color:#9AA0A6; cursor:not-allowed} /* popover Material bianco come Google, via il dark LL (giro 3, punto 29) */ #pannello-dettagli{ position:fixed; top:calc(var(--altezza-barra-1) + 4px); right:12px; z-index:250; background:#fff; border:1px solid #DADCE0; border-radius:8px; padding:14px 16px; width:280px; box-shadow:0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15); font-size:13px; color:#202124; display:none; } #pannello-dettagli.visibile{display:block} #pannello-dettagli h4{margin:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#5F6368} #pannello-dettagli .riga{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid #E8EAED} #pannello-dettagli .riga:first-of-type{border-top:none} #pannello-dettagli .k{color:#5F6368} #pannello-dettagli .v{font-weight:600; text-align:right; color:#202124; overflow-wrap:anywhere} /* ===== Barra 2 (scura): nome documento + lucchetto ===== */ #barra-2{ /* toolbar documento stile viewer Google: grigio scuro neutro, testo 14px */ position:fixed; top:var(--altezza-barra-1); left:0; right:0; z-index:199; height:var(--altezza-barra-2); background:#323639; border-bottom:none; display:flex; align-items:center; gap:10px; padding:0 16px; font-family:var(--font-ui); font-size:14px; color:#E8EAED; } #barra-2 .lucchetto{color:#E8EAED; font-size:13px} #barra-2 .nome-doc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap} /* ===== Contenitore che scala i fogli A4 (794px) — DOPO le barre ===== */ #scala-wrap{ position:relative; z-index:1; width:100%; overflow:hidden; background:#52565A; /* grigio viewer Google (prima: dark ambient LL) */ min-height:100vh; padding:22px 0 140px; display:flex; justify-content:center; align-items:flex-start; } /* NB: display:flex + justify-content:center (non margin:0 auto) e' voluto: quando il figlio (794px) e' piu' largo del contenitore, margin:auto risolve a 0 e il box trabocca SOLO a destra — poi transform-origin:center scala attorno al centro del box originale (non del box mai centrato) e il risultato appare tagliato/spostato sulla destra invece che centrato. Flexbox con justify-content:center distribuisce lo spazio negativo in modo simmetrico anche in overflow, quindi lo scale risulta centrato. */ #scala-inner{width:794px; flex:0 0 auto; transform-origin:top center; transition:transform .12s ease} #scala-inner .sheet{opacity:0; transition:opacity .25s ease} #scala-inner.pronto .sheet{opacity:1} /* Evidenzia il campo del cliente attivo/da compilare */ /* Rettangoli selettori stile caselle Google: si deve CAPIRE che sono box cliccabili, niente hint microscopici */ /* Box piatti stile Google (giro 3, punto 27): riempimento azzurro + bordo INTERNO via box-shadow inset (zero outline-offset = zero effetto doppio bordo, zero spostamenti di layout), angoli quasi vivi, contenuti in riga */ .campo-cliente{ cursor:pointer; border-radius:2px; transition:background .15s, box-shadow .15s; background:#E8F0FE; box-shadow:inset 0 0 0 1px #A8C7FA; padding:0 4px; color:var(--ink); } /* segnaposto PARLANTE (giro 5, punto 45): il campo vuoto dice cosa va scritto (data-hint iniettato dal builder), mai un "Compila" generico */ .campo-cliente:empty::after{content:attr(data-hint); color:#1967D2; font-style:normal; font-weight:600; font-family:var(--font-ui); font-size:9.5pt} /* finche' il box Google e' visibile, la sottolineatura del documento sotto di lui sparisce (niente doppia linea, punto 27); torna col valore compilato */ .fill.campo-cliente:not(.compilato){border-bottom-color:transparent} /* box a riga intera ALTI come le caselle Google vere (giro 4 punto 38 + giro 5: "ancora super sottili" anche a 27px, portati a ~34px) */ .fill.ln.campo-cliente{min-height:30px; padding:6px 8px 7px} /* anche i box INLINE dentro il testo (Parti contraenti) respirano (giro 5, punto 43: "ancora super sottili") */ .fill.campo-cliente:not(.ln){padding:4px 8px 5px} /* compilato: tinta azzurra leggera, testo INCHIOSTRO pieno (giro 3, punto 28) */ .campo-cliente.compilato{background:rgba(232,240,254,.55); box-shadow:none; color:var(--ink)} .firma-cliente{background:#E8F0FE; box-shadow:inset 0 0 0 1px #A8C7FA; border-radius:2px} .firma-cliente:empty::after{ content:'Firma'; position:absolute; left:6px; bottom:4px; color:#1967D2; font-weight:600; font-family:var(--font-ui); font-size:10.5pt; } /* firma ADOTTATA ma documento NON ancora completato: il rettangolo RESTA (giro 5, punto 46: "cosi' capisco che posso ricliccarla"), solo lo sfondo si alleggerisce per leggere bene il tratto. A documento COMPLETATO il box sparisce del tutto (regole body.documento-firmato qui sotto, punto 34). */ .firma-cliente:not(:empty){background:rgba(232,240,254,.45)} /* DATA del cliente: quadratino-campo azzurro come la firma (stile Google eSignature), si riempie con la data del giorno a "Inizia". */ #doc-llc .data-cliente{ background:#E8F0FE; box-shadow:inset 0 0 0 1px #A8C7FA; border-radius:2px; min-height:6.4mm; padding:1.1mm 1.8mm 1mm; color:var(--ink); } #doc-llc .data-cliente::after{display:none} #doc-llc .data-cliente:empty::before{ content:'Data'; color:#1967D2; font-weight:600; font-family:var(--font-ui); font-size:10.5pt; } #doc-llc .data-cliente:not(:empty){background:rgba(232,240,254,.45)} body.documento-firmato #doc-llc .data-cliente{ background:transparent; box-shadow:none; cursor:default; border-radius:0; padding:0 1mm 1.2mm; min-height:4.6mm; } body.documento-firmato #doc-llc .data-cliente::after{display:block} /* Opzione A / Opzione B e avvio anticipato (postilla persona fisica, 5/11/2026): righe tappabili nello stesso stile dei campi del cliente */ .scelta-cliente, .avvio-cliente{ cursor:pointer; border-radius:2px; transition:background .15s, box-shadow .15s, opacity .15s; background:#E8F0FE; box-shadow:inset 0 0 0 1px #A8C7FA; } .scelta-cliente.scelta-attiva{background:rgba(232,240,254,.55); box-shadow:inset 0 0 0 2px #1A73E8} .scelta-cliente.scelta-spenta{opacity:.5} .avvio-cliente.avvio-spento{opacity:.5; cursor:not-allowed} .scelta-cliente.campo-attivo{box-shadow:inset 0 0 0 2px #1A73E8; background:#fff} .scelta-cliente.campo-mancante{box-shadow:inset 0 0 0 2px #D93025 !important; background:#FCE8E6 !important} body.documento-firmato .scelta-cliente, body.documento-firmato .avvio-cliente{cursor:default; background:transparent; box-shadow:none} body.documento-firmato .scelta-cliente.scelta-spenta{opacity:.45} /* modale scelta opzione */ #modal-scelta .opzione-scelta{ display:block; width:100%; text-align:left; margin:0 0 12px; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:var(--ll-testo); transition:background .15s, border-color .15s; } #modal-scelta .opzione-scelta:hover{background:rgba(98,71,170,.14); border-color:rgba(98,71,170,.6)} #modal-scelta .opzione-scelta.attiva{background:rgba(98,71,170,.2); border-color:var(--ll-viola)} #modal-scelta .opzione-scelta strong{display:block; font-size:16px; font-weight:800; margin-bottom:4px} #modal-scelta .opzione-scelta span{display:block; font-size:12.8px; line-height:1.4; color:var(--ll-testo-soft)} /* campo saltato: rosso finche' non viene compilato */ .campo-cliente.campo-mancante{box-shadow:inset 0 0 0 2px #D93025 !important; background:#FCE8E6 !important} /* contratto firmato = sola lettura: niente inviti alla compilazione */ body.documento-firmato .campo-cliente:empty::after{content:''} body.documento-firmato .campo-cliente{cursor:default; background:transparent; box-shadow:none} body.documento-firmato .campo-cliente.compilato{background:transparent} body.documento-firmato .firma-cliente{background:transparent; box-shadow:none} body.documento-firmato .firma-cliente:empty::after{content:''} /* campo attivo: bordo blu pieno interno, niente anelli/pulsazioni (punto 27) */ .campo-cliente.campo-attivo{ box-shadow:inset 0 0 0 2px #1A73E8; background:#fff; } .chip-campo{ position:absolute; z-index:60; background:#A06CD5; color:#fff; font-family:var(--font-ui); font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap; box-shadow:0 6px 16px rgba(0,0,0,.35); pointer-events:none; } .firma-cliente.campo-attivo, .data-cliente.campo-attivo{ box-shadow:inset 0 0 0 2px #1A73E8; } .firma-cliente{cursor:pointer} /* ===== Overlay input tap-to-edit (mobile friendly) ===== */ #overlay-editor{ position:fixed; z-index:900; display:none; background:#fff; border:2px solid #1A73E8; border-radius:2px; box-shadow:0 2px 8px rgba(60,64,67,.25); } #overlay-editor input{ width:100%; height:100%; border:none; outline:none; padding:0 4px; /* testo digitato SCURO e leggibile (giro 3, punto 28): mai ink-soft */ font-family:var(--font-serif); color:var(--ink); background:transparent; } /* ===== Bottone flottante "Inizia" ===== */ #btn-inizia{ /* in alto a destra dentro la barra, vicino a Vedi dettagli: il flottante in basso a sinistra era controintuitivo */ background:var(--ll-verde); color:#fff; border:none; display:inline-flex; align-items:center; gap:6px; cursor:pointer; transition:background .15s; } #btn-inizia:hover{background:var(--ll-verde-hover)} #btn-inizia.nascosto{display:none} #btn-completa.nascosto{display:none} /* ===== Linguetta guida (freccia + contatore) ===== */ #linguetta-guida{ position:fixed; z-index:280; background:#374151; color:#fff; font-family:var(--font-ui); font-size:12px; font-weight:600; padding:8px 12px; border-radius:8px; display:none; align-items:center; gap:8px; box-shadow:0 8px 20px rgba(0,0,0,.35); cursor:pointer; max-width:220px; } #linguetta-guida.visibile{display:flex} #linguetta-guida .contatore{opacity:.75; font-weight:400; font-size:11px} #linguetta-guida::after{ content:''; position:absolute; left:-6px; top:50%; transform:translateY(-50%); border-width:6px 7px 6px 0; border-style:solid; border-color:transparent #374151 transparent transparent; } /* ===== Barra consenso (checkbox) — appare a compilazione ultimata ===== */ #barra-consenso{ position:fixed; left:0; right:0; bottom:0; z-index:290; background:rgba(10,10,20,.97); backdrop-filter:blur(10px); border-top:1px solid rgba(98,71,170,.35); padding:12px 16px; display:none; align-items:center; gap:10px; box-shadow:0 -8px 24px rgba(0,0,0,.4); } #barra-consenso.visibile{display:flex} #barra-consenso.shake{animation:shake-consenso .4s} @keyframes shake-consenso{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}} #barra-consenso label{display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--ll-testo); cursor:pointer; line-height:1.4} #barra-consenso input[type=checkbox]{width:18px; height:18px; margin-top:1px; accent-color:var(--ll-viola); flex:0 0 auto} /* ===== Toast ===== */ .ll-toast{ position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(8px); z-index:1200; background:#151018; color:#fff; border:1px solid rgba(98,71,170,.4); border-radius:9px; padding:10px 16px; font-family:var(--font-ui); font-size:12.5px; box-shadow:0 8px 26px rgba(0,0,0,.5); opacity:0; transition:opacity .2s, transform .2s; max-width:86vw; text-align:center; } .ll-toast.errore{border-color:var(--ll-rosso)} .ll-toast.visibile{opacity:1; transform:translateX(-50%) translateY(0)} /* ===== Banner errore (mai alert nativo) ===== */ #banner-errore{ position:fixed; top:calc(var(--altezza-barra-1) + var(--altezza-barra-2)); left:0; right:0; z-index:210; background:#3a0d10; color:#ffd7d8; border-bottom:1px solid var(--ll-rosso); font-family:var(--font-ui); font-size:12.5px; padding:10px 16px; display:none; align-items:center; justify-content:space-between; gap:10px; } #banner-errore.visibile{display:flex} #banner-errore button{background:rgba(255,255,255,.12); color:#fff; border:none; border-radius:6px; padding:6px 11px; font-size:11.5px; cursor:pointer; white-space:nowrap} /* ===== Banner campi mancanti (giro 3, punto 33) ===== */ #banner-mancanti{ position:fixed; top:calc(var(--altezza-barra-1) + var(--altezza-barra-2) + 10px); left:50%; transform:translateX(-50%); z-index:260; background:#FCE8E6; color:#C5221F; border:1px solid #F6AEA9; border-radius:8px; font-family:var(--font-ui); font-size:13px; font-weight:600; padding:8px 12px; display:none; align-items:center; gap:10px; cursor:pointer; box-shadow:0 2px 6px 2px rgba(60,64,67,.15); max-width:92vw; white-space:nowrap; } #banner-mancanti.visibile{display:flex} #banner-mancanti .icona{font-size:15px} #banner-mancanti .testo-mancanti{overflow:hidden; text-overflow:ellipsis} #banner-mancanti button{ background:#C5221F; color:#fff; border:none; border-radius:6px; font-family:inherit; font-size:12px; font-weight:700; padding:6px 11px; cursor:pointer; white-space:nowrap; } /* ===== Skeleton di caricamento ===== */ #caricamento{ position:fixed; inset:0; z-index:400; background:var(--ll-bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; } #caricamento.nascosto{display:none} #caricamento .spinner{ width:34px; height:34px; border-radius:50%; border:3px solid rgba(98,71,170,.25); border-top-color:var(--ll-viola); animation:ruota 0.8s linear infinite; } @keyframes ruota{to{transform:rotate(360deg)}} #caricamento p{font-family:var(--font-ui); color:var(--ll-testo-soft); font-size:13px} /* ===== Overlay modali (comuni) ===== */ .ll-modal-overlay{ position:fixed; inset:0; z-index:1500; background:rgba(5,5,8,.75); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:16px; } .ll-modal-overlay.visibile{display:flex} .ll-modal{ background:rgba(20,20,28,.98); border:1px solid rgba(98,71,170,.4); border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.6); padding:26px 26px 22px; width:100%; max-width:420px; font-family:var(--font-ui); color:var(--ll-testo); max-height:88vh; overflow-y:auto; } .ll-modal h3{margin:0 0 6px; font-size:18px; font-weight:800} .ll-modal .sottotitolo{margin:0 0 20px; font-size:12.8px; color:var(--ll-testo-soft)} .ll-modal .azioni{display:flex; justify-content:flex-end; gap:10px; margin-top:18px} .ll-modal button{font-family:inherit; font-size:13px; border:none; border-radius:8px; padding:9px 16px; cursor:pointer} .ll-modal button.annulla{background:rgba(255,255,255,.08); color:var(--ll-testo)} .ll-modal button.annulla:hover{background:rgba(255,255,255,.14)} .ll-modal button.primario{background:var(--ll-viola); color:#fff; font-weight:700} .ll-modal button.primario:hover:not(:disabled){background:#A06CD5} .ll-modal button.primario:disabled{background:rgba(98,71,170,.3); cursor:not-allowed} /* ===== Modale verifica identita' (OTP) ===== */ #modal-otp .icona-mail{font-size:26px; margin-bottom:8px} #modal-otp .caselle-otp{display:flex; gap:8px; justify-content:center; margin:18px 0} #modal-otp .caselle-otp input{ width:42px; height:52px; text-align:center; font-size:20px; font-weight:700; border-radius:9px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:#fff; font-family:var(--font-ui); } #modal-otp .caselle-otp input:focus{outline:none; border-color:var(--ll-viola); background:rgba(98,71,170,.1)} #modal-otp .link-reinvia{ background:none; border:none; color:var(--ll-ciano); font-size:12.5px; cursor:pointer; text-decoration:underline; padding:0; text-align:center; display:block; margin:0 auto; } #modal-otp .link-reinvia:disabled{color:var(--ll-testo-soft); cursor:not-allowed; text-decoration:none} /* ===== Modale "Adotta la tua firma" ===== */ #modal-firma .ll-modal{max-width:460px} /* col documento sfocato dietro la modale sta CENTRATA nello schermo (giro 3, punto 32: supera la versione "a destra" del punto 18) */ #modal-firma-box label.etichetta{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ll-testo-soft); margin-bottom:6px} #modal-firma-box input[type=text]{ width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:9px; padding:11px 12px; color:#fff; font-family:var(--font-ui); font-size:14px; margin-bottom:18px; } #modal-firma-box input[type=text]:focus{outline:none; border-color:var(--ll-viola)} .tab-firma{display:flex; gap:4px; background:rgba(255,255,255,.05); border-radius:9px; padding:3px; margin-bottom:14px} .tab-firma button{ flex:1; background:transparent; color:var(--ll-testo-soft); font-weight:600; font-size:12.3px; padding:8px 6px; border-radius:7px; } .tab-firma button.attivo{background:var(--ll-viola); color:#fff} .pannello-firma{display:none} .pannello-firma.attivo{display:block} #anteprima-auto{ height:110px; background:#fff; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 14px; overflow:hidden; margin-bottom:6px; } #anteprima-auto span{font-family:'Allura',cursive; font-size:44px; color:#14171A; white-space:nowrap} .wrap-canvas-firma{position:relative; background:#161320; border-radius:9px; border:1px solid rgba(255,255,255,.14); margin-bottom:6px} #canvas-firma{display:block; width:100%; height:150px; touch-action:none; cursor:crosshair} .link-cancella{background:none; border:none; color:var(--ll-ciano); font-size:12px; cursor:pointer; text-decoration:underline; padding:0 0 14px} #modal-firma-box .consenso{font-size:11px; line-height:1.5; color:var(--ll-testo-soft); margin:6px 0 4px} /* ===== Schermata di conferma ===== */ #schermata-successo{ position:fixed; inset:0; z-index:1600; background:var(--ll-bg); display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; } #schermata-successo.visibile{display:flex} #schermata-successo .cerchio-ok{ width:76px; height:76px; border-radius:50%; background:rgba(103,237,209,.12); border:2px solid var(--ll-ciano); display:flex; align-items:center; justify-content:center; font-size:34px; color:var(--ll-ciano); margin-bottom:22px; } #schermata-successo h2{margin:0 0 10px; font-size:22px} #schermata-successo p{margin:0; color:var(--ll-testo-soft); font-size:14px; max-width:320px; text-wrap:balance} #schermata-successo img{height:26px; margin-top:34px; opacity:.7} /* ===== Timbro audit trail in coda al documento firmato (giro 3, punto 24): stesso render della pagina PDF (Dettagli + Attivita'), cosi' il sigillo si vede anche nel visore/vista cliente come su Google ===== */ .sheet.audit-trail{ padding:19.9mm 0 0 19.6mm !important; display:block !important; font-family:Roboto,Arial,Helvetica,sans-serif; color:#202024; } .audit-trail h1{ font-family:Roboto,Arial,Helvetica,sans-serif; font-weight:400; font-size:22.2px; color:#000; margin:0 0 5.8mm 0; text-wrap:balance; } .audit-card{ width:177.4mm; border:1px solid #e3e5e8; border-radius:8px; padding:0; margin:0 0 5.25mm 0; background:#fff; } .audit-card .card-titolo{ font-size:17.8px; font-weight:400; color:#000; margin:0; padding:5.6mm 5.5mm 4.7mm 5.5mm; border-bottom:1px solid #e3e5e8; } /* centrato verticale come il reference Google (giro 4, punto 35) */ .audit-riga{ display:flex; align-items:center; padding:4.4mm 5.5mm; border-top:1px solid #e3e5e8; } .audit-riga:first-of-type{ border-top:none; } .audit-riga .eyebrow{ flex:0 0 35.36mm; font-size:9.9px; text-transform:uppercase; letter-spacing:.04em; color:#5e6267; font-weight:500; padding-top:0.3mm; } .audit-riga .val{ flex:1; font-size:11.6px; color:#202024; line-height:1.46; } .audit-riga .val .riga2{ display:block; } .stato-pallino{ display:inline-block; width:2.45mm; height:2.45mm; border-radius:50%; background:#1ea446; margin-right:2mm; vertical-align:middle; } .attivita-riga{ display:flex; align-items:center; gap:6mm; padding:4.4mm 5.5mm; border-top:1px solid #e3e5e8; } .attivita-riga:first-of-type{ border-top:none; } .att-sx{ flex:0 0 20mm; color:#5e6267; text-align:center; } .att-icona{ margin:0 0 1.15mm 0; line-height:0; display:flex; justify-content:center; } .att-icona svg{ width:21px; height:21px; } .att-label{ font-size:9.9px; text-transform:uppercase; letter-spacing:.04em; color:#5e6267; font-weight:500; line-height:1.25; } .attivita-testo{ flex:1 1 auto; min-width:0; font-size:11.6px; color:#202024; line-height:1.46; } .attivita-testo b{ font-weight:700; } .attivita-testo .bullet{ display:block; margin-left:8.7mm; } .att-quando{ flex:0 0 31mm; text-align:left; font-size:11.6px; color:#202024; line-height:1.46; } .att-quando .riga2{ display:block; } .audit-nota{ font-size:11.6px; color:#202024; line-height:1.65; margin:6mm 0 0 0; max-width:177.4mm; } /* ===== Errore di caricamento (link non valido / rete) ===== */ #errore-caricamento{ position:fixed; inset:0; z-index:400; background:var(--ll-bg); display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; } #errore-caricamento.visibile{display:flex} #errore-caricamento .emoji{font-size:36px; margin-bottom:14px} #errore-caricamento h2{margin:0 0 8px; font-size:18px} #errore-caricamento p{margin:0 0 20px; color:var(--ll-testo-soft); font-size:13.5px; max-width:300px} #errore-caricamento button{background:var(--ll-viola); color:#fff; border:none; border-radius:8px; padding:10px 18px; font-family:var(--font-ui); font-weight:600; cursor:pointer} @media (max-width:480px){ #barra-1{padding:0 10px} #barra-1 .btn-dettagli{display:none} #barra-2{padding:0 10px} #scala-wrap{padding-bottom:170px} .ll-modal{padding:20px} } /* ================================================================ */ /* ROUTER radice: la stessa pagina serve sia il cliente (?t=) sia il */ /* pannello admin (root). Di default entrambe le viste sono presenti */ /* nel DOM, una sola visibile in base alla classe su . */ /* ================================================================ */ html.modo-pannello #vista-cliente{display:none} html.modo-cliente #vista-pannello{display:none} /* il padding-top del body serve alle 2 barre fisse della vista CLIENTE: nel pannello creava la fascia nera vuota sopra la topbar (giro 3, punto 25) */ html.modo-pannello body{padding-top:0} html:not(.modo-pannello):not(.modo-cliente) #vista-pannello{display:none} /* prima che giri lo script router */ #vista-pannello{ min-height:100vh; background:var(--ll-bg); color:var(--ll-testo); font-family:var(--font-ui); position:relative; z-index:1; } #vista-pannello .ambiente{position:fixed; z-index:0} #vista-pannello .pan-nascosto{display:none !important} /* ===== Schermata login ===== */ #pan-login{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; z-index:1; } .pan-login-wrapper{ position:relative; z-index:1; width:100%; max-width:440px; display:flex; flex-direction:column; align-items:center; gap:32px; } .pan-brand{display:flex; flex-direction:column; align-items:center; gap:16px} .pan-brand img{width:72px; height:72px; border-radius:16px; object-fit:cover; box-shadow:0 8px 32px rgba(98,71,170,.15)} .pan-brand-text{text-align:center} .pan-brand-title{font-size:28px; font-weight:700; letter-spacing:-.02em; margin-bottom:4px} .pan-brand-sub{font-size:15px; color:#8b8b96; font-weight:400} #pan-login-card{ width:100%; background:rgba(20,20,28,.7); border:1px solid rgba(255,255,255,.06); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-radius:20px; padding:32px; box-shadow:0 16px 64px rgba(0,0,0,.4); } #pan-login label{display:block; font-size:14px; font-weight:600; color:#fff; margin:0 0 10px} #pan-login .campo{margin-bottom:20px} #pan-login .campo:last-of-type{margin-bottom:24px} .pan-input-wrap{position:relative} .pan-input-icon{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#5e5e6a; pointer-events:none; } .pan-input-toggle{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:#5e5e6a; cursor:pointer; border-radius:8px; transition:color .15s, background .15s; } .pan-input-toggle:hover{color:#8b8b96; background:rgba(255,255,255,.04)} #pan-login input{ width:100%; height:48px; padding:0 16px 0 48px; font-family:inherit; font-size:15px; color:#fff; background:rgba(15,15,22,.6); border:1px solid rgba(255,255,255,.08); border-radius:12px; outline:none; transition:border-color .15s, background .15s; } #pan-login input[type=password]{padding-right:52px} #pan-login input::placeholder{color:#5e5e6a} #pan-login input:focus{border-color:rgba(98,71,170,.4); background:rgba(15,15,22,.85)} #pan-login-btn{ width:100%; height:52px; display:flex; align-items:center; justify-content:center; gap:10px; font-family:inherit; font-size:15px; font-weight:600; color:#fff; background:linear-gradient(90deg,#6247AA 0%,#8159BF 50%,#A06CD5 100%); border:none; border-radius:12px; cursor:pointer; transition:transform .1s, box-shadow .2s, opacity .2s; box-shadow:0 4px 16px rgba(129,89,191,.3); } #pan-login-btn:hover{box-shadow:0 6px 24px rgba(129,89,191,.45)} #pan-login-btn:active{transform:translateY(1px)} #pan-login-btn:disabled{opacity:.5; cursor:not-allowed; transform:none} #pan-login-btn .arrow{width:18px; height:18px; transition:transform .15s} #pan-login-btn:hover:not(:disabled) .arrow{transform:translateX(3px)} #pan-login-btn .spinner{ width:18px; height:18px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:pan-spin .6s linear infinite; display:none; } #pan-login-btn.loading .arrow{display:none} #pan-login-btn.loading .spinner{display:block} #pan-login-btn.loading .label{opacity:.7} @keyframes pan-spin{to{transform:rotate(360deg)}} #pan-login-msg{ font-size:13px; padding:10px 13px; border-radius:9px; margin-bottom:16px; display:none; } #pan-login-msg.visibile{display:block; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#fca5a5} /* ===== App (dopo login) ===== */ #pan-app{min-height:100vh; position:relative; z-index:1} #pan-topbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px; height:64px; padding:0 24px; background:rgba(12,12,20,.92); backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.1); } #pan-topbar img{width:36px; height:36px; border-radius:9px; box-shadow:0 4px 14px rgba(98,71,170,.18)} /* logo+titolo cliccabili = home (giro 3, punto 26) */ .pan-home-link{display:flex; align-items:center; gap:14px; cursor:pointer; text-decoration:none; color:inherit; border-radius:10px; padding:4px 8px 4px 4px; margin-left:-4px; transition:background .15s} .pan-home-link:hover{background:rgba(255,255,255,.05)} .pan-titolo{font-size:16px; font-weight:800} .pan-titolo span{font-weight:500; color:var(--ll-testo-soft); font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin-left:6px; white-space:nowrap} .pan-spacer{flex:1} #pan-topbar button{ font-family:inherit; font-size:13px; font-weight:600; border-radius:9px; padding:9px 15px; cursor:pointer; border:none; white-space:nowrap; } #pan-btn-nuovo{background:var(--ll-viola); color:#fff} #pan-btn-nuovo:hover{background:#A06CD5} #pan-btn-logout{background:rgba(255,255,255,.06); color:var(--ll-testo-soft); padding:9px 15px; font-size:13px; font-weight:600} #pan-btn-logout:hover{background:rgba(255,255,255,.12); color:#fff} /* ingranaggio Template: stessa pelle di "Esci", quadrato 36px, resta un'icona anche sul telefono (10/9/2026) */ #pan-topbar button#pan-btn-template{ width:36px; height:36px; flex:0 0 36px; padding:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); color:var(--ll-testo-soft); border-radius:9px; } #pan-topbar button#pan-btn-template:hover{background:rgba(255,255,255,.12); color:#fff} #pan-topbar button#pan-btn-template svg{width:18px; height:18px; flex:0 0 18px; display:block} /* occhio privacy = nascondi i nominativi (10/9/2026, copiato dall'App Spese). Stessa pelle dell'ingranaggio accanto: riquadro 36x36. L'icona e' 19px, la misura dell'App Spese (icons.jsx IconEye/IconEyeOff, viewBox 0 0 24 24). */ #pan-topbar button#pan-btn-privacy{ width:36px; height:36px; flex:0 0 36px; padding:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); color:var(--ll-testo-soft); border-radius:9px; transition:background .15s, color .15s; } #pan-topbar button#pan-btn-privacy:hover{background:rgba(255,255,255,.12); color:#fff} #pan-topbar button#pan-btn-privacy.attivo{background:rgba(98,71,170,.18); color:#c4a0ff} #pan-topbar button#pan-btn-privacy svg{width:19px; height:19px; flex:0 0 19px; display:block} /* La sfumatura sui nominativi e' copiata identica dall'App Spese (app/src/styles/theme.css, righe 314-345 di quel file). Due dettagli che sembrano inutili e non lo sono, la' erano costati un giro di correzioni: 1) lo e' SEMPRE inline-block, anche a occhio spento, perche' una sfumatura su un elemento inline viene tagliata alla riga di testo e la scritta esce mozzata di netto ai lati; 2) la sfumatura ha bisogno di aria per arrivare a trasparente sui 4 lati, quindi c'e' un padding che gliela da' e un margine negativo identico che lo compensa: il testo resta esattamente dove sta, la pagina non si sposta di un pixel, e la sfumatura non si taglia netta sul bordo. */ .pan-sensibile{display:inline-block; transition:filter .15s} /* Dentro una frase (la modale "il documento verra' inviato a NOME") lo span deve restare inline: da inline-block diventa un blocco unico e un nome lungo, non entrandoci piu' nella riga gia' iniziata, scende tutto a capo e allunga la frase di due righe anche a occhio SPENTO (misurato 10/9: 36,31px -> 72,63px). Inline il flusso resta identico al pixel, perche' il padding orizzontale che serve alla sfumatura se lo riprende il margine negativo e quello verticale su un elemento inline non alza la riga. */ .pan-sensibile.pan-sensibile-in-frase{display:inline} .pan-privacy-on .pan-sensibile{ -webkit-filter:blur(5px); filter:blur(5px); padding:2px 8px; margin:-2px -8px; user-select:none; } #pan-main{max-width:920px; margin:0 auto; padding:32px 24px 80px} .pan-vista.pan-nascosto{display:none} /* ===== Visore documento a PORTALE stile Workspace (giro 3, punto 24): documento in una finestra centrata, sfondo dietro in trasparenza scura, click fuori (o Esc) = si chiude e torni dov'eri ===== */ #pan-visore{ position:fixed; inset:0; z-index:2000; background:rgba(5,5,8,.72); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:26px; animation:pan-visore-in .2s ease; cursor:zoom-out; } #pan-visore.pan-nascosto{display:none} @keyframes pan-visore-in{from{opacity:0}to{opacity:1}} #pan-visore-shell{ width:min(940px,100%); height:100%; max-height:calc(100vh - 52px); display:flex; flex-direction:column; border-radius:12px; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.65); cursor:default; animation:pan-shell-in .22s ease; } @keyframes pan-shell-in{from{opacity:0; transform:scale(.97) translateY(8px)}to{opacity:1; transform:scale(1) translateY(0)}} #pan-visore-barra{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; height:52px; padding:0 18px; background:#323639; color:#E8EAED; font-size:14px; font-weight:600; } #pan-visore-barra button{ font-family:inherit; font-size:13px; font-weight:600; color:#E8EAED; background:rgba(255,255,255,.1); border:none; border-radius:8px; padding:8px 14px; cursor:pointer; } #pan-visore-barra button:hover{background:rgba(255,255,255,.2)} #pan-visore-corpo{flex:1; position:relative; overflow:auto; -webkit-overflow-scrolling:touch; background:#52565A} #pan-visore-frame{position:absolute; inset:0; width:100%; height:100%; border:none; background:#52565A} @media (max-width:640px){ #pan-visore{padding:10px} #pan-visore-shell{max-height:calc(100vh - 20px)} } /* badge che cambia stato in tempo reale */ @keyframes pan-badge-pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}} .pan-badge.pan-cambiato{animation:pan-badge-pop .5s ease} /* ===== Vista lista ===== */ .pan-lista-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap} .pan-lista-head h1{font-size:22px; font-weight:800} /* multiselezione + paginazione (giro 5, punto 44) */ /* Selezione a comando (10/9/2026): a riposo nessuna casella in giro, il bottone "Seleziona" accende la modalita' e le fa comparire nello stile del tool (mai la casella bianca di sistema). */ .pan-th-check, .pan-td-check{width:38px; padding-right:0 !important; display:none} #pan-tabella.pan-modo-selezione .pan-th-check, #pan-tabella.pan-modo-selezione .pan-td-check{display:table-cell} #pan-btn-seleziona{height:36px; padding:0 16px; font-size:13px; border-radius:10px} #pan-btn-seleziona.pan-attivo{background:var(--ll-viola); color:#fff} #pan-btn-seleziona.pan-attivo:hover{background:#A06CD5} .pan-sel-tutti{display:flex; align-items:center; gap:8px; margin-right:6px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ll-testo-soft)} .pan-sel-tutti:hover{color:#fff} .pan-td-check input[type=checkbox], .pan-sel-tutti input[type=checkbox]{ appearance:none; -webkit-appearance:none; margin:0; display:block; flex:0 0 18px; width:18px; height:18px; border-radius:5px; cursor:pointer; border:1.5px solid rgba(255,255,255,.28); background-color:rgba(255,255,255,.04); background-repeat:no-repeat; background-position:center; background-size:12px 12px; transition:background-color .12s, border-color .12s, box-shadow .12s; } .pan-td-check input[type=checkbox]:hover, .pan-sel-tutti input[type=checkbox]:hover{border-color:rgba(255,255,255,.5)} .pan-td-check input[type=checkbox]:checked, .pan-sel-tutti input[type=checkbox]:checked{ background-color:var(--ll-viola); border-color:var(--ll-viola); background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%273.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m5%2013%204%204%2010-10%27%2F%3E%3C%2Fsvg%3E"); } .pan-td-check input[type=checkbox]:focus-visible, .pan-sel-tutti input[type=checkbox]:focus-visible{outline:none; box-shadow:0 0 0 2px rgba(98,71,170,.45)} .pan-sel-azioni button:disabled{opacity:.45; cursor:not-allowed} #pan-tabella tbody tr.pan-riga-sel{background:rgba(98,71,170,.14)} #pan-barra-selezione{ display:flex; align-items:center; justify-content:space-between; gap:14px; background:rgba(98,71,170,.1); border:1px solid rgba(98,71,170,.35); border-radius:12px; padding:10px 16px; margin-bottom:14px; font-size:13px; font-weight:600; } #pan-barra-selezione.pan-nascosto{display:none} .pan-sel-azioni{display:flex; gap:8px} .pan-sel-azioni button{font-family:inherit; font-size:12.5px; font-weight:700; border:none; border-radius:8px; padding:8px 13px; cursor:pointer} #pan-sel-archivia{background:var(--ll-viola); color:#fff} #pan-sel-archivia:hover{background:#A06CD5} #pan-sel-elimina{background:rgba(229,72,77,.15); color:#fca5a5; border:1px solid rgba(229,72,77,.4)} #pan-sel-elimina:hover{background:rgba(229,72,77,.35); color:#fff} #pan-sel-annulla{background:rgba(255,255,255,.06); color:var(--ll-testo-soft)} #pan-sel-annulla:hover{background:rgba(255,255,255,.12); color:#fff} #pan-lista-footer{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; color:var(--ll-testo-soft); font-size:12.5px} #pan-lista-footer.pan-nascosto{display:none} .pan-pager{display:flex; align-items:center; gap:10px} .pan-pager button{width:30px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:var(--ll-testo); font-size:15px; cursor:pointer} .pan-pager button:hover:not(:disabled){background:rgba(255,255,255,.12)} .pan-pager button:disabled{opacity:.35; cursor:default} #pan-modal-elimina .pericolo, #pan-modal-elimina-template .pericolo{background:var(--ll-rosso); color:#fff; font-weight:700; border:none; border-radius:8px; padding:9px 16px; cursor:pointer; font-size:13px; font-family:inherit} #pan-modal-elimina .pericolo:hover:not(:disabled), #pan-modal-elimina-template .pericolo:hover:not(:disabled){background:#c93a3f} #pan-modal-elimina .pericolo:disabled, #pan-modal-elimina-template .pericolo:disabled{opacity:.5; cursor:not-allowed} /* tab Attivi/Archivio (giro 4, punto 39): stesso pattern del toggle pagamento */ .pan-tabs-lista{display:flex; gap:4px; background:rgba(255,255,255,.05); border-radius:10px; padding:3px} .pan-tabs-lista button{ background:transparent; color:var(--ll-testo-soft); font-family:inherit; font-weight:600; font-size:12.8px; padding:8px 16px; border-radius:8px; border:none; cursor:pointer; white-space:nowrap; } .pan-tabs-lista button.attivo{background:var(--ll-viola); color:#fff} #pan-ricerca{ width:260px; max-width:100%; height:42px; padding:0 14px; font-family:inherit; font-size:13.5px; color:#fff; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:10px; outline:none; } #pan-ricerca:focus{border-color:rgba(98,71,170,.45)} .pan-vuoto{ text-align:center; padding:60px 20px; color:var(--ll-testo-soft); font-size:14px; background:rgba(255,255,255,.02); border:1px dashed rgba(255,255,255,.1); border-radius:14px; } #pan-tabella{width:100%; border-collapse:collapse; font-size:13.5px} #pan-tabella.pan-nascosto{display:none} #pan-tabella thead th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ll-testo-soft); font-weight:700; padding:0 14px 10px; } #pan-tabella tbody tr{ background:rgba(255,255,255,.05); cursor:pointer; transition:background .12s; } #pan-tabella tbody tr:hover{background:rgba(98,71,170,.1)} #pan-tabella tbody td{padding:14px; border-top:1px solid rgba(255,255,255,.09)} #pan-tabella tbody tr td:first-child{border-radius:10px 0 0 10px} #pan-tabella tbody tr td:last-child{border-radius:0 10px 10px 0} #pan-tabella .pan-nome{font-weight:700} #pan-tabella .pan-email{color:var(--ll-testo-soft); font-size:12.5px} .pan-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; white-space:nowrap; } .pan-badge::before{content:''; width:6px; height:6px; border-radius:50%} .pan-badge.st-inviato{background:rgba(160,108,213,.12); color:#93c5fd} .pan-badge.st-inviato::before{background:#A06CD5} .pan-badge.st-aperto{background:rgba(245,158,11,.12); color:#fcd34d} .pan-badge.st-aperto::before{background:#F59E0B} .pan-badge.st-firmato{background:rgba(34,197,94,.12); color:#86efac} .pan-badge.st-firmato::before{background:var(--ll-verde)} /* ===== Vista Template (ingranaggio, 10/9/2026) ===== */ .pan-tpl-testata{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; flex-wrap:wrap} .pan-tpl-testata h1{font-size:22px; font-weight:800; margin-bottom:6px} .pan-tpl-intro{font-size:12.8px; color:var(--ll-testo-soft); max-width:560px; line-height:1.55} .pan-card-template{padding:18px 20px} .pan-tpl-riga{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap} .pan-tpl-info{flex:1 1 280px; min-width:220px} .pan-tpl-titolo{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px} .pan-tpl-etichetta{font-size:15px; font-weight:700} .pan-tpl-desc{font-size:12.5px; color:var(--ll-testo-soft); line-height:1.5; margin-bottom:6px} .pan-tpl-meta{font-size:11.5px; color:var(--ll-testo-soft); opacity:.75} .pan-tpl-azioni{display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex:0 0 auto} .pan-tpl-bottoni{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end} .pan-btn.pan-btn-piccolo{font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:9px} .pan-badge.st-nascosto{background:rgba(255,255,255,.08); color:var(--ll-testo-soft)} .pan-badge.st-nascosto::before{background:#8b8b96} /* interruttore custom: 40x22, pallino bianco, viola quando acceso */ .pan-switch-riga{display:flex; align-items:center; gap:10px} .pan-switch-testo{font-size:12.3px; color:var(--ll-testo-soft)} .pan-switch{ width:40px; height:22px; flex:0 0 40px; border:none; border-radius:999px; padding:0; position:relative; background:rgba(255,255,255,.16); cursor:pointer; transition:background .16s; } .pan-switch.acceso{background:var(--ll-viola)} .pan-switch-pallino{ position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.45); transition:transform .16s; } .pan-switch.acceso .pan-switch-pallino{transform:translateX(18px)} .pan-switch:focus-visible{outline:2px solid rgba(98,71,170,.45); outline-offset:2px} /* la card del template si apre come una riga della lista: tutta cliccabile */ .pan-card-template{cursor:pointer; transition:background .12s, border-color .12s} .pan-card-template:hover{background:rgba(98,71,170,.1); border-color:rgba(98,71,170,.28)} .pan-card-template:focus-visible{outline:2px solid rgba(98,71,170,.5); outline-offset:2px} .pan-card-template.pan-card-cestino{opacity:.72; cursor:default} .pan-card-template.pan-card-cestino:hover{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)} /* cestino dei template in fondo alla pagina Template */ #pan-tpl-cestino-zona{margin-top:24px} #pan-tpl-cestino-zona.pan-nascosto{display:none} #pan-tpl-cestino-link{ background:none; border:none; color:var(--ll-testo-soft); font-family:inherit; font-size:12.5px; text-decoration:underline; cursor:pointer; padding:4px 0; } #pan-tpl-cestino-link:hover{color:#fff} #pan-tpl-cestino{margin-top:14px} #pan-tpl-cestino.pan-nascosto{display:none} /* scheda del singolo template */ .pan-switch-riga.pan-switch-larga{justify-content:space-between; border-top:1px solid rgba(255,255,255,.08); padding-top:16px; margin-top:2px} .pan-tpld-info{font-size:12px; color:var(--ll-testo-soft); opacity:.85; margin:-6px 0 18px 2px; line-height:1.5} .pan-azioni-riga.pan-azioni-scheda{align-items:center; gap:10px} /* padding di 1px in meno per il bordo: cosi' e' alto uguale a Salva e Anteprima */ .pan-btn.pan-elimina{background:rgba(229,72,77,.15); color:#fca5a5; border:1px solid rgba(229,72,77,.4); padding:10px 19px} .pan-btn.pan-elimina:hover{background:rgba(229,72,77,.35); color:#fff} /* campi dentro le modali custom (rinomina) */ .pan-modal-label{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ll-testo-soft); margin-bottom:6px} .pan-modal-input{ width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:9px; padding:11px 12px; color:#fff; font-family:var(--font-ui); font-size:13.5px; margin-bottom:16px; outline:none; } .pan-modal-input:focus{border-color:var(--ll-viola)} /* ===== Form (richiedi + dettaglio condividono lo stile campo) ===== */ .pan-card{ /* piu' stacco card/sfondo (giro 3, punto 25): superficie piu' chiara e bordo piu' visibile, come nei tool LL gia' corretti */ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:24px; margin-bottom:20px; } .pan-card h2{font-size:15px; font-weight:800; margin-bottom:4px} .pan-card .pan-sotto{font-size:12.5px; color:var(--ll-testo-soft); margin-bottom:18px} .pan-griglia{display:grid; grid-template-columns:1fr 1fr; gap:16px} .pan-griglia.pan-1col{grid-template-columns:1fr} .pan-campo{margin-bottom:16px} .pan-campo.pan-full{grid-column:1/-1} .pan-campo label{display:block; font-size:12.5px; font-weight:600; color:var(--ll-testo-soft); margin-bottom:7px} .pan-campo input[type=text], .pan-campo input[type=email], .pan-campo input[type=date], .pan-campo input[type=number], .pan-campo select, .pan-campo textarea{ width:100%; padding:10px 13px; font-family:inherit; font-size:13.5px; color:#fff; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:9px; outline:none; } .pan-campo textarea{resize:vertical; min-height:64px} .pan-campo input:focus, .pan-campo select:focus, .pan-campo textarea:focus{border-color:rgba(98,71,170,.45); background:rgba(255,255,255,.06)} .pan-campo select option{background:#151018} /* menu a tendina con la freccia del tool (10/9/2026): niente freccia nativa, chevron SVG 16px centrato in verticale e a 14px dal bordo destro. La regola :focus e' ripetuta perche' la scorciatoia "background" del blocco sopra cancellerebbe l'immagine quando il menu prende il fuoco. */ .pan-campo select, .pan-campo select:focus{ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:40px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2716%27%20height%3D%2716%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23b4b4c0%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px 16px; } .pan-campo select::-ms-expand{display:none} /* ===== Menu a tendina custom (10/9/2026, secondo giro) ===== La lista nativa del browser non c'entrava niente col resto del tool (font di sistema, bianco, disallineata). Ogni