/* account.css — le dieci schermate dell'account: registrazione, accesso, area
* riservata, impostazioni, pannello amministrativo.
*
* ⚠️ SONO PAGINE DI SITO, NON PAGINE DELL'APP (`03 §4.0`). Sotto `public/app/` ogni
* foglio nuovo va passato per `tools/sw-stamp.mjs` o il browser BLOCCA il CSS; e
* soprattutto metterle nell'app farebbe entrare l'account dentro l'editor, che
* `03 §1.3` vieta. L'editor resta gratuito e senza account, e non deve nemmeno
* SEMBRARE che serva registrarsi.
*
* ⚠️ RISCRITTO IL 07/09/2026 perché il proprietario ha guardato le pagine e ha detto
* «manca tutta la grafica, è molto basilare». Aveva ragione, e il difetto era peggiore:
* il foglio DICHIARAVA in testa primario #cc262a, secondario #000222, Lato e Poppins,
* e poi non li usava. Misurati sul vivo: pulsanti `rgb(255,255,255)` e
* `rgb(239,239,239)`, cioè i grigi di sistema. Un'identità scritta in un commento e
* assente dallo schermo è peggio di nessuna identità: fa credere che sia stata fatta.
*
* ⚠️ E LA PRIMA RISCRITTURA HA PEGGIORATO LE COSE. L'avevo costruita attorno a nomi
* `acc-*` che usa **una pagina su dieci** — quella che avevo scritto io — lasciando le
* altre nove senza stile. Le classi vere sono queste, contate una per una:
* `conto`, `scheda`, `campo`, `btn`, `avviso`, `tabella`. Si scrive per la convenzione
* che c'è, non per quella che si preferisce.
*
* Identità: primario **#cc262a**, secondario **#000222** (il «Blu Profondo» del brand
* kit), **Lato** per i testi, **Poppins** per i titoli. pdfeditabile.it è un progetto
* gratuito della G Tech Group S.R.L.S.
*
* ⚠️ NIENTE TEMA SCURO. Il sito non ne ha uno, e inventarlo qui vorrebbe dire
* verificare i contrasti in due combinazioni invece che in una — con l'unica
* conseguenza pratica che una delle due non verrebbe verificata.
*/
:root {
/* ── il marchio ──────────────────────────────────────────────────────────
* ⚠️ Gli stessi valori di `public/app/css/adobe-theme.css`, non «simili»: due
* rossi diversi a due clic di distanza si notano, e si notano come sciatteria. */
--cnt-rosso: #cc262a;
--cnt-rosso-scuro: #b01f23; /* bianco sopra: 6,85:1 — è questo che va sui pulsanti */
--cnt-rosso-premuto:#95191d;
--cnt-rosso-tenue: #fdecec;
--cnt-rosso-bordo: #f6c9ca;
--cnt-anello: rgba(204, 38, 42, .34);
--cnt-blu: #000222; /* il secondario del brand kit */
/* ── i neutri ────────────────────────────────────────────────────────────
* ⚠️ Non grigi puri: hanno una punta impercettibile del rosso del marchio. Un
* grigio matematicamente neutro accanto a un rosso caldo si legge come «non
* scelto»; questi si leggono come parte della stessa tavolozza. */
--cnt-fondo: #f7f5f5;
--cnt-carta: #ffffff;
--cnt-bordo: #e6e1e1;
--cnt-bordo-forte: #cfc8c8;
--cnt-testo: #1a1618;
--cnt-tenue: #6b6266;
--cnt-ok-fondo: #edf7ef;
--cnt-ok-bordo: #bfe3c7;
--cnt-ok-testo: #1c5a2a;
--cnt-attesa-fondo: #fff8e8;
--cnt-attesa-bordo: #f2ddab;
--cnt-attesa-testo: #6b4a05;
--cnt-r: 10px;
--cnt-r-piccolo: 7px;
--cnt-ombra: 0 1px 2px rgba(0, 2, 34, .05), 0 8px 24px -12px rgba(0, 2, 34, .18);
}
/* ════════════════════════════ impianto ════════════════════════════ */
/* ⚠️ Le nove pagine dell'agente NON hanno una classe sul ``: si aggancia al
* contenitore `.conto`, che c'è in tutte. Aggiungere una classe a nove file per
* comodità del foglio di stile è una modifica in più che può sfuggire su una pagina. */
body:has(> .conto),
body:has(.conto) {
margin: 0;
background: var(--cnt-fondo);
color: var(--cnt-testo);
font-family: Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
line-height: 1.55;
}
/* Una fascia di marchio in testa: costa una riga e dà appartenenza. */
body:has(.conto)::before {
content: '';
position: fixed;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, var(--cnt-rosso) 0%, var(--cnt-rosso-premuto) 60%, var(--cnt-blu) 100%);
z-index: 10;
}
.conto {
max-width: 460px;
margin: 0 auto;
/* ⚠️ Non `place-items:center`: su un contenuto più alto della finestra il
* centraggio taglia la parte SOPRA, e in cima ci sono titolo ed errori. */
padding: clamp(20px, 5vh, 56px) 16px 64px;
box-sizing: border-box;
}
.conto--largo { max-width: 1080px; }
.conto__marchio {
display: block;
font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 700;
font-size: 17px;
color: var(--cnt-blu);
text-decoration: none;
margin-bottom: 22px;
letter-spacing: -.01em;
}
.conto__marchio:hover { color: var(--cnt-rosso-scuro); }
.scheda {
background: var(--cnt-carta);
border: 1px solid var(--cnt-bordo);
border-radius: var(--cnt-r);
box-shadow: var(--cnt-ombra);
padding: clamp(22px, 4vw, 36px);
margin-bottom: 22px;
}
/* ════════════════════════════ testo ════════════════════════════ */
.conto h1, .conto h2, .conto h3 {
font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 600;
color: var(--cnt-blu);
letter-spacing: -.011em;
text-wrap: balance;
margin: 0 0 10px;
}
.conto h1 { font-size: clamp(23px, 3.2vw, 29px); line-height: 1.2; }
.conto h2 { font-size: 19px; line-height: 1.3; margin-top: 30px; }
.conto h3 { font-size: 16px; margin-top: 22px; }
.scheda > h1:first-child, .scheda > h2:first-child { margin-top: 0; }
.conto p { margin: 0 0 14px; }
.sotto { color: var(--cnt-tenue); font-size: 14.5px; margin-bottom: 22px; }
.conto a { color: var(--cnt-rosso-scuro); text-underline-offset: 2px; }
.conto a:hover { color: var(--cnt-rosso-premuto); }
.mostra, .riga-chiave__meta, code, kbd {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 14.5px;
letter-spacing: .04em;
/* ⚠️ Le chiavi API sono lunghe 68 caratteri: senza questo, su telefono escono dal
* contenitore e la metà destra è irraggiungibile — cioè non copiabile. */
word-break: break-all;
}
.mostra {
display: block;
background: var(--cnt-fondo);
border: 1px solid var(--cnt-bordo);
border-radius: var(--cnt-r-piccolo);
padding: 12px 14px;
margin: 0 0 16px;
}
.riga-chiave__meta { color: var(--cnt-tenue); font-size: 13px; }
/* ════════════════════════════ campi ════════════════════════════ */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.campo > label, .conto label { font-weight: 700; font-size: 14px; color: var(--cnt-blu); }
/* ⚠️ `.corpo` OLTRE a `.conto`. Questi selettori erano agganciati solo a `.conto`,
* cioè al vecchio contenitore centrato: nel telaio nuovo del pannello i campi
* restavano completamente senza stile, con l'aspetto grezzo del browser. Si vedeva —
* una tendina grigia di sistema in mezzo a riquadri disegnati — e nessun controllo
* testuale poteva dirlo. */
.conto input[type=text], .corpo input[type=text],
.conto input[type=email], .corpo input[type=email],
.conto input[type=password], .corpo input[type=password],
.conto input[type=url], .corpo input[type=url],
.conto input[type=search], .corpo input[type=search],
.conto input[type=number], .corpo input[type=number],
.conto select, .corpo select,
.conto textarea, .corpo textarea {
font: inherit;
width: 100%;
box-sizing: border-box;
padding: 11px 13px;
color: var(--cnt-testo);
background: #fff;
border: 1px solid var(--cnt-bordo-forte);
border-radius: var(--cnt-r-piccolo);
transition: border-color .12s, box-shadow .12s;
}
.conto textarea, .corpo textarea { min-height: 110px; resize: vertical; }
.conto input[type=checkbox], .conto input[type=radio],
.corpo input[type=checkbox], .corpo input[type=radio] { accent-color: var(--cnt-rosso); width: auto; }
.conto input:focus-visible, .corpo input:focus-visible,
.conto select:focus-visible, .corpo select:focus-visible,
.conto textarea:focus-visible, .corpo textarea:focus-visible,
.btn:focus-visible,
.conto a:focus-visible {
/* ⚠️ `outline` e non solo `box-shadow`: in contrasto elevato di Windows le ombre
* spariscono e il contorno resta. Chi naviga da tastiera in quella modalità
* perderebbe del tutto il segno di dove si trova. */
outline: 2px solid var(--cnt-rosso);
outline-offset: 2px;
border-color: var(--cnt-rosso);
box-shadow: 0 0 0 4px var(--cnt-anello);
}
.campo__aiuto { color: var(--cnt-tenue); font-size: 13.5px; margin: 0; }
.campo__errore {
color: #7a1114;
font-size: 13.5px;
font-weight: 700;
margin: 0;
}
.campo__errore:empty { display: none; }
/* Le caselle di scelta con il testo accanto.
*
* ⚠️ NON `display:flex`, e l'ho scoperto guardando la pagina renderizzata. Il testo di
* queste righe non è un blocco unico: è una sequenza di nodi di testo e collegamenti
* («Ho letto l'» + informativa privacy + « e accetto i » + termini).
* Con `flex` ognuno di quei pezzi diventa un elemento a sé e finisce su una riga
* propria: la frase si sfalda in una colonna di frammenti. Serve il flusso in linea,
* con la casella tirata fuori dal testo in posizione assoluta. */
.scelta {
display: block;
position: relative;
padding-left: 28px;
font-size: 14.5px;
margin-bottom: 14px;
line-height: 1.5;
}
.scelta input { position: absolute; left: 0; top: 4px; }
.con-bottone { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.con-bottone > *:first-child { flex: 1 1 220px; }
/* ════════════════════════════ pulsanti ════════════════════════════ */
.btn {
font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 600;
font-size: 15px;
background: #fff;
color: var(--cnt-blu);
border: 1px solid var(--cnt-bordo-forte);
border-radius: var(--cnt-r-piccolo);
padding: 11px 18px;
/* 44px pieni: la misura minima di un bersaglio da dito. */
min-height: 44px;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--cnt-fondo); border-color: var(--cnt-tenue); }
.btn-primary {
/* ⚠️ `--cnt-rosso-scuro` e non `--cnt-rosso`: il bianco sul rosso pieno del marchio
* dà 5,3:1, sul rosso scuro 6,85:1. Il marchio resta quello — è il pulsante che va
* un gradino più scuro perché ci sta sopra del testo. */
background: var(--cnt-rosso-scuro);
color: #fff;
border-color: transparent;
}
.btn-primary:hover { background: var(--cnt-rosso-premuto); border-color: transparent; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled=true] {
background: var(--cnt-bordo);
color: var(--cnt-tenue);
border-color: var(--cnt-bordo);
cursor: not-allowed;
transform: none;
}
.btn-blocco { display: flex; width: 100%; margin-top: 8px; }
.pericolo { color: #7a1114; border-color: var(--cnt-rosso-bordo); }
.pericolo:hover { background: var(--cnt-rosso-tenue); border-color: var(--cnt-rosso); }
/* ════════════════════════════ avvisi ════════════════════════════ */
.avviso {
border-radius: var(--cnt-r-piccolo);
padding: 13px 15px;
margin: 0 0 20px;
font-size: 14.5px;
border: 1px solid var(--cnt-rosso-bordo);
background: var(--cnt-rosso-tenue);
/* ⚠️ Il colore NON è l'unico segnale: c'è anche una barra a sinistra. Chi non
* distingue il rosso dal verde vedrebbe due riquadri identici. */
border-left: 4px solid var(--cnt-rosso);
color: #7a1114;
}
.avviso__titolo { display: block; font-family: Poppins, sans-serif; font-weight: 600; margin-bottom: 3px; }
.avviso--attesa {
border-color: var(--cnt-attesa-bordo);
background: var(--cnt-attesa-fondo);
border-left-color: #c99a1a;
color: var(--cnt-attesa-testo);
}
.avviso--ok {
border-color: var(--cnt-ok-bordo);
background: var(--cnt-ok-fondo);
border-left-color: #2e8b45;
color: var(--cnt-ok-testo);
}
.avviso[hidden] { display: none; }
.promemoria {
background: var(--cnt-fondo);
border: 1px solid var(--cnt-bordo);
border-left: 4px solid var(--cnt-blu);
border-radius: var(--cnt-r-piccolo);
padding: 13px 15px;
font-size: 14.5px;
margin: 0 0 20px;
}
/* ⚠️ I pulsanti dentro una cella di tabella vanno in colonna e senza andare a capo
* nel testo: «Approva (Base)» spezzato su due righe dentro un pulsante alto 44px
* sfonda la cella e allarga la riga. Ogni azione resta un bersaglio pieno, ma il
* testo non si spezza. */
.tabella td .btn {
min-height: 36px;
padding: 7px 12px;
font-size: 13.5px;
white-space: nowrap;
margin: 0 6px 6px 0;
}
.tabella td:last-child { white-space: nowrap; }
/* ════════════════════════════ pannello laterale ════════════════════════════ */
/* ⚠️ A LATO e non sopra la pagina: un riquadro centrato costringe a chiuderlo per
* guardare la riga successiva, e chi smaltisce una coda passa da una richiesta
* all'altra. Di lato la tabella resta visibile e il confronto è possibile. */
.pannello-lato {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(480px, 100vw);
background: var(--cnt-carta);
border-left: 1px solid var(--cnt-bordo);
box-shadow: -8px 0 32px -16px rgba(0, 2, 34, .3);
z-index: 50;
display: flex;
flex-direction: column;
}
.pannello-lato[hidden] { display: none; }
.pannello-lato__testa {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--cnt-bordo);
}
.pannello-lato__testa h2 { margin: 0; font-size: 18px; }
/* ⚠️ Il corpo scorre da solo: il dettaglio di una richiesta con una motivazione lunga
* è più alto dello schermo, e senza questo il pulsante «Chiudi» finirebbe fuori. */
.pannello-lato__corpo { overflow-y: auto; padding: 20px; flex: 1; }
.dettaglio-campi { margin: 0; }
.dettaglio-campi dt {
font-family: Poppins, sans-serif;
font-weight: 600;
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--cnt-tenue);
margin-top: 16px;
}
.dettaglio-campi dd {
margin: 3px 0 0;
/* ⚠️ Il testo del richiedente va a capo dove serve: una motivazione senza spazi —
* un URL lungo, un incollato — sfonderebbe il pannello e diventerebbe illeggibile. */
overflow-wrap: anywhere;
white-space: pre-wrap;
}
@media (max-width: 560px) {
.pannello-lato { width: 100vw; border-left: 0; }
}
/* ════════════════════════════ barra amministratore ════════════════════════════ */
/* Chi sei, con che ruolo, e come esci. In alto e sempre visibile: chi amministra deve
* sapere con quale identità sta agendo — soprattutto qui, dove l'identità
* amministrativa è diversa da quella di cliente e si può avere entrambe. */
.barra-admin {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
background: var(--cnt-carta);
border: 1px solid var(--cnt-bordo);
border-radius: var(--cnt-r-piccolo);
padding: 10px 14px;
margin-bottom: 20px;
font-size: 14px;
}
.barra-admin > span { font-weight: 700; color: var(--cnt-blu); }
.barra-admin .btn { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.barra-admin[hidden] { display: none; }
/* L'elenco dentro un avviso: rientro contenuto, niente pallini giganti. */
.avviso ul { margin: 6px 0 0; padding-left: 20px; }
.avviso li { margin-bottom: 4px; }
/* ════════════════════════════ tabelle ════════════════════════════ */
.tabella { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 14px 0 8px; }
.tabella th {
font-family: Poppins, sans-serif;
font-weight: 600;
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--cnt-tenue);
text-align: left;
padding: 9px 10px;
border-bottom: 2px solid var(--cnt-bordo);
white-space: nowrap;
}
.tabella td { padding: 12px 10px; border-bottom: 1px solid var(--cnt-bordo); vertical-align: top; }
.tabella tbody tr:hover { background: var(--cnt-fondo); }
/* ⚠️ Le cifre incolonnate vogliono larghezza fissa: senza, le colonne ballano da una
* riga all'altra e confrontarle a occhio diventa impossibile. */
.tabella td { font-variant-numeric: tabular-nums; }
/* ⚠️ Una tabella non entra in un telefono, e la PAGINA non deve scorrere di lato:
* scorre la tabella, dentro il suo contenitore. */
.scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
/* ════════════════════════════ codice QR ════════════════════════════ */
/* ⚠️ LA MISURA È OBBLIGATORIA, e la sua assenza è stata un guasto vero segnalato dal
* proprietario mentre configurava il secondo fattore. L'SVG generato ha solo un
* `viewBox` e nessun `width`/`height`: in un contenitore senza misura si stira alla
* larghezza disponibile — misurato **900×900 px**. Non sembrava un QR, sembrava una
* pagina rotta, con il campo del codice spinto fuori dallo schermo.
*
* ⚠️ E il riquadro bianco attorno non è decorazione: la «zona di quiete» è parte della
* specifica del QR. Un codice a filo del bordo molti lettori non lo agganciano, e chi
* prova a inquadrarlo pensa che il codice sia sbagliato. */
.qr { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0 0 20px; }
.qr svg {
width: 232px;
height: 232px;
display: block;
background: #fff;
padding: 12px;
border: 1px solid var(--cnt-bordo);
border-radius: var(--cnt-r-piccolo);
box-sizing: content-box;
}
/* ════════════════════════════ piè di pagina ════════════════════════════ */
.conto > footer, .conto__pie {
color: var(--cnt-tenue);
font-size: 13.5px;
text-align: center;
margin-top: 28px;
}
/* ════════════════════════════ telefono ════════════════════════════ */
@media (max-width: 560px) {
.conto { padding: 16px 0 40px; }
.conto__marchio { padding: 0 16px; }
.scheda {
border-radius: 0;
border-left: 0;
border-right: 0;
box-shadow: none;
padding: 22px 16px 26px;
}
.qr svg { width: 200px; height: 200px; }
.con-bottone { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
.btn, .conto input, .conto select, .conto textarea { transition: none; }
.btn:active { transform: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
* IL MENU DELL'AMMINISTRAZIONE (pagine .php)
*
* ⚠️ Prima l'amministrazione era una pagina sola con tutto dentro, e per arrivare
* al registro si scorreva oltre le chiavi e i lavori. Diviso in sezioni, serve un
* modo per sapere sempre DOVE si è: la voce attiva non si distingue solo per il
* colore — ha anche il fondo pieno e una barra sotto — perché il colore da solo
* non è un'informazione per chi non lo distingue.
* ═══════════════════════════════════════════════════════════════════════════ */
.menu-admin {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 0 0 22px;
padding: 4px;
background: var(--cnt-carta);
border: 1px solid var(--cnt-bordo);
border-radius: 12px;
}
.menu-admin__voce {
padding: 9px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 15px;
color: var(--cnt-tenue);
text-decoration: none;
white-space: nowrap;
transition: background .12s, color .12s;
}
.menu-admin__voce:hover { background: var(--cnt-fondo); color: var(--cnt-testo); }
/* ⚠️ `:focus-visible` e non `:focus`: l'anello deve comparire a chi naviga da
* tastiera e non a ogni clic del mouse, altrimenti si impara a ignorarlo. */
.menu-admin__voce:focus-visible {
outline: 3px solid var(--cnt-anello);
outline-offset: 2px;
}
.menu-admin__voce.is-attiva {
background: var(--cnt-rosso-scuro); /* 6,85:1 col bianco, non il rosso pieno */
color: #fff;
}
.menu-admin__voce.is-attiva:hover { background: var(--cnt-rosso-premuto); color: #fff; }
/* ── i moduli dentro le tabelle ───────────────────────────────────────────── */
/* ⚠️ Senza JavaScript ogni azione è un `