/* Componenti approvati in Scadenze, condivisi dalle aree operative. */
.app > main :is(.btn-pieno,.btn-linea,button:not(.detail-close)):not(.chat-invia) { border-radius:8px; min-height:38px; font-size:14px; }
.app > main :is(.btn-pieno,.btn-linea) { padding:9px 13px; }
.app > main :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea) { border-radius:8px; font-size:15px; padding:10px 12px; }
.app > main :is(input[type=checkbox],input[type=radio]) { width:18px; height:18px; flex:0 0 18px; accent-color:var(--ui-blu,#2454c6); }
.app > main :is(input,select,textarea,button,a):focus-visible { outline:2px solid var(--ui-blu,#2454c6); outline-offset:3px; }
.app > main .cosa { border-radius:10px; padding:16px; }
.app > main .cosa .titolo { font-size:16px; }
.app .etichetta-prossimo { display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; line-height:1.2; border:1px solid #e7bd55; border-radius:6px; padding:4px 6px; color:#7a5510; background:#fff7df; white-space:nowrap; }
.app button:disabled { cursor:not-allowed; }
/* «Invii email bloccati» (28/09/2026): lo stesso bollino ovunque compare un cliente con gli invii bloccati
(scheda, elenco clienti, F24, circolari, anteprima). Bordo rosso con la X e testo: mai solo il colore. */
.etichetta-invii-bloccati { display:inline-flex; align-items:center; gap:5px; vertical-align:middle; padding:3px 8px; border:1px solid var(--rosso,#bc3028); border-radius:6px; background:var(--rosso-chiaro,#fff1ef); color:var(--rosso-scuro,#94241e); font-size:12px; font-weight:650; line-height:1.3; white-space:nowrap; }
.etichetta-invii-bloccati::before { content:"×" / ""; font-size:14px; font-weight:700; line-height:1; }
.detail-actions > .etichetta-invii-bloccati { flex:0 0 auto; align-self:center; }
.detail.pannello-globale { position:fixed; inset:0 0 0 auto; width:min(860px,100%); max-width:100%; height:100%; max-height:100%; margin:0 0 0 auto; padding:0; border:0; border-left:1px solid var(--linea); background:white; color:var(--inchiostro); }
.pannello-globale::backdrop { background:rgb(23 38 60 / 28%); }
.pannello-globale[open] { display:flex; flex-direction:column; }
.pannello-globale .detail-top { display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--linea); flex:none; }
.pannello-globale .detail-top h2 { flex:1; margin:0; font-size:20px; overflow-wrap:anywhere; }
.pannello-globale .detail-close { width:42px; height:42px; border:1px solid var(--linea); border-radius:8px; background:white; font-size:26px; color:var(--inchiostro); cursor:pointer; }
.pannello-globale iframe { width:100%; flex:1; min-height:0; border:0; background:white; }
.pannello-globale iframe[hidden] { display:none; }
.pagina-incorporata .app { display:block; }
.pagina-incorporata :is(.barra,.testata-app-mobile,.navigazione-contesto,.bolla-aiuto,.pannello-aiuto) { display:none!important; }
/* Riserva: i «← Torna…» e la campanella non si scrivono proprio nella pagina del pannello (base.html,
_torna.html); se un reindirizzamento perde «incorporato», il pannello li nasconde comunque (29/09/2026). */
.pagina-incorporata :is(.torna,.inc-torna,.barra-alta,[data-campana]) { display:none!important; }
.pagina-incorporata .app > main { width:100%; max-width:none; margin:0; padding:20px; }
.pagina-incorporata .app > main > :is(h1,.torna) { margin-top:0; }
.pagina-incorporata .form.griglia { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:600px) { .pagina-incorporata .form.griglia { grid-template-columns:1fr; } .pannello-globale .detail-top { padding:14px; } }
@media(max-width:600px) { .app > main :is(.btn-pieno,.btn-linea,button:not(.detail-close),select,input:not([type=checkbox]):not([type=radio]):not([type=hidden])) { min-height:44px; } }
/* Moduli (Davide, 27/09/2026): etichette leggibili come in «Il tuo studio», asterisco sui campi
obbligatori, spunte allineate alla prima riga del testo, «Seleziona tutto» separato dalle clausole. */
:is(form.form, form.pannello) > label:not(.consenso):not(.interruttore):not(.scelta),
:is(form.form, form.pannello) .campi-affiancati > label { color:var(--inchiostro); font-weight:600; }
:is(form.form, form.pannello) > label:not(.consenso) :is(input,select,textarea) { font-weight:400; }
form.pannello > label:not(.consenso) + label:not(.consenso) { margin-top:14px; }
.etichetta-campo { display:inline; }
/* Il testo dell'etichetta con l'asterisco resta come l'etichetta stessa: stesso colore e corpo, niente grigio piccolo
ereditato dalla vecchia classe omonima delle pagine pubbliche (Davide, 27/09: «ruolo di chi accetta non si legge»). */
label > .etichetta-campo { margin:0; color:inherit; font-size:inherit; font-weight:inherit; }
.asterisco { color:var(--inchiostro); font-weight:700; margin-left:3px; }
label.consenso:not(.interruttore):has(> input[type=checkbox]),
label.scelta:not(.interruttore):has(> input[type=radio]) { align-items:flex-start; }
label.consenso > input[type=checkbox], label.scelta > input[type=radio] { margin-top:3px; }
label.seleziona-tutto { padding-bottom:12px; border-bottom:1px solid var(--linea); }
label.consenso-marketing { margin-top:18px; }
/* L'asterisco sostituisce la pastiglia «Obbligatorio» accanto alle etichette (27/09/2026). */
label > .campo-obbligatorio { display:none; }
.esito-cartella { color:var(--verde); font-size:14px; font-weight:600; margin:6px 0 0; }
.esito-cartella[hidden] { display:none; }
/* Campi di ricerca con la lente disegnata: il testo parte dopo la lente, in tutte le pagine (27/09/2026). */
.app > main input.cerca[type=search]:not([type=checkbox]):not([type=radio]):not([type=file]),
.app > main input[type=search]:is(#cerca-archivio, #cerca-f24, #cerca-posta):not([type=checkbox]) { padding-left:44px; }
/* Pulsante (i) delle spiegazioni (Davide, 27/09/2026: «effetto WOW»): cerchio pulito, carattere
dell'app, allineato al testo in titoli e frasi; l'area da toccare resta ampia ma invisibile. */
.info { vertical-align:middle; }
p .info, .piccolo .info, label .info { vertical-align:-4px; margin:0 2px; }
.info > button.info-i, .app > main .info > button.info-i {
position:relative; width:20px !important; height:20px !important; min-width:20px; min-height:20px !important;
padding:0 !important; border-radius:50% !important; border:1px solid #cfd7e2; background:#f4f6fa;
color:#51607a; font-family:inherit; font-style:normal; font-weight:700; font-size:11.5px; line-height:1;
box-shadow:none; transition:background .15s, color .15s, border-color .15s;
}
.info > button.info-i::after { content:""; position:absolute; inset:-12px; }
.info > button.info-i:hover, .info:focus-within > button.info-i {
background:var(--ui-blu, #2454c6); border-color:var(--ui-blu, #2454c6); color:#fff;
}
@media (prefers-reduced-motion:reduce) { .info > button.info-i { transition:none; } }
/* Azioni: si vede subito che il clic è partito e dopo si torna sulla stessa riga (27/09/2026). */
.riga-in-corso { opacity:.55; pointer-events:none; transition:opacity .15s; position:relative; }
.riga-in-corso::after { content:"Salvo…"; position:absolute; top:10px; right:12px; font-size:12px; font-weight:600;
color:var(--inchiostro); background:#fff; border:1px solid var(--linea); border-radius:999px; padding:2px 10px; }
.riga-fatta { box-shadow:0 0 0 2px var(--verde) !important; border-radius:12px; transition:box-shadow .3s; }
button.attesa-invio { opacity:.7; cursor:progress; }
@media (prefers-reduced-motion:reduce) { .riga-in-corso, .riga-fatta { transition:none; } }
.inc-stato-ok { color:var(--verde); }
.inc-azioni-riga { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.inc-azioni-riga > form { margin:0; }
/* Fattura elettronica leggibile in Archivio: i dati del file XML in ordine, come una fattura (27/09/2026). */
.fattura-xml { background:#fff; border:1px solid var(--linea); border-radius:14px; padding:22px 24px; margin:14px 0; }
.fattura-xml p { margin:2px 0; }
.fattura-xml-testa { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;
padding-bottom:14px; border-bottom:1px solid var(--linea); }
.fattura-xml-testa h2 { margin:2px 0 0; font-size:20px; }
.fattura-xml-tipo { font-weight:700; color:var(--inchiostro); }
.fattura-xml-totale { text-align:right; }
.fattura-xml-totale b { display:block; font-size:22px; }
.fattura-xml-parti { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin:16px 0; }
.fattura-xml-parte { background:#f7f9fc; border:1px solid var(--linea); border-radius:10px; padding:12px 14px; }
.fattura-xml-scorri { overflow-x:auto; margin:12px 0; }
.fattura-xml-tabella { width:100%; border-collapse:collapse; font-size:14px; }
.fattura-xml-tabella th { text-align:left; font-size:12.5px; color:#51607a; font-weight:600; padding:8px 10px;
border-bottom:1px solid var(--linea); white-space:nowrap; }
.fattura-xml-tabella td { padding:8px 10px; border-bottom:1px solid #eef1f6; vertical-align:top; }
.fattura-xml-tabella .num { text-align:right; white-space:nowrap; }
.fattura-xml-riepilogo { max-width:420px; margin:12px 0 12px auto; }
.fattura-xml-riga-totale td { font-weight:700; border-bottom:0; border-top:1px solid var(--linea); }
.fattura-xml-pagamenti { background:#f7f9fc; border:1px solid var(--linea); border-radius:10px; padding:12px 14px; margin-top:12px; }
@media (max-width:700px) {
.fattura-xml { padding:16px; }
.fattura-xml-parti { grid-template-columns:1fr; }
.fattura-xml-totale { text-align:left; }
.fattura-xml-riepilogo { max-width:none; }
}
/* Attesa del pannello laterale in tutte le pagine, non solo in Scadenze: prima in Archivio
compariva senza stile in alto a sinistra (Davide, 27/09/2026). */
.pannello-caricamento[hidden] { display:none !important; }
.pannello-caricamento { padding:56px 24px; text-align:center; max-width:560px; margin:24px auto; }
.pannello-caricamento .logo { display:inline-block; margin-bottom:20px; }
.pannello-caricamento h3 { margin:0 0 12px; }
.pannello-caricamento p { color:#51607a; margin:0 0 24px; }
.pannello-caricamento[data-pannello-attesa] p::before {
content:""; display:block; width:28px; height:28px; margin:0 auto 16px; border-radius:50%;
border:3px solid #dfe5ee; border-top-color:var(--ui-blu, #2454c6); animation:giro-attesa .9s linear infinite;
}
@keyframes giro-attesa { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .pannello-caricamento[data-pannello-attesa] p::before { animation:none; } }
/* Pagine pubbliche (iscrizione, dati dello studio, condizioni): il nome del campo si legge bene,
scuro e in grassetto; il testo scritto nel campo e gli aiuti restano normali (27/09/2026). */
.pagina-pubblica form.form label:not(.consenso):not(.scelta-tipo):not(.seleziona-tutto) { color:var(--inchiostro); font-weight:600; font-size:14px; }
.pagina-pubblica form.form label :is(input, select, textarea, .piccolo, .sotto-campo, .facoltativo, .requisiti, em) { font-weight:400; }
.pagina-pubblica form.form label .sotto-campo, .pagina-pubblica form.form label .requisiti { color:var(--grigio); }
/* Menu a tendina dell'app (static/scelta-cercabile.js, Davide 27/09/2026): al posto del menu grigio del sistema,
lo stesso aspetto della ricerca clienti in «Movimenti da escludere». Riquadro bianco, bordo sottile,
voce scelta in azzurro con la spunta; con molte voci si scrive nel campo per cercare. */
.scelta-cercabile { position:relative; display:block; width:100%; max-width:100%; min-width:0; box-sizing:border-box; text-align:left; }
.scelta-cercabile.scelta-cercabile-in-linea { display:inline-block; width:auto; vertical-align:middle; }
.scelta-cercabile .scelta-cercabile-campo { display:flex; align-items:center; width:100%; max-width:100%; min-width:0; min-height:44px; box-sizing:border-box; margin:0; padding:10px 40px 10px 12px; border:1px solid var(--bordo-campo); border-radius:8px; background:var(--bianco); color:var(--inchiostro); font:inherit; font-size:15px; font-weight:400; line-height:1.35; text-align:left; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.scelta-cercabile input.scelta-cercabile-campo { cursor:text; text-overflow:ellipsis; }
/* Più forte della regola comune dei campi (.app > main :is(input…)): lo spazio a destra è della freccia. */
.scelta-cercabile input.scelta-cercabile-campo[role=combobox] { padding:10px 40px 10px 12px !important; border-radius:8px !important; font-size:15px !important; }
.scelta-cercabile .scelta-cercabile-campo:hover { border-color:#5f6f86; }
.scelta-cercabile .scelta-cercabile-campo:focus { outline:none; border-color:var(--ui-blu); box-shadow:0 0 0 3px rgb(34 84 197 / 16%); }
.scelta-cercabile .scelta-cercabile-campo:focus-visible { outline:2px solid var(--ui-blu); outline-offset:2px; }
.scelta-cercabile .scelta-cercabile-campo::placeholder, .scelta-cercabile .scelta-cercabile-campo.senza-scelta { color:var(--grigio); }
.scelta-cercabile-valore { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scelta-cercabile input.scelta-cercabile-campo::selection { background:var(--ui-blu-tenue); color:var(--inchiostro); }
.scelta-cercabile .scelta-cercabile-campo[aria-invalid="true"] { border-color:var(--rosso); }
.scelta-cercabile.disattivo .scelta-cercabile-campo { background:var(--carta); color:var(--grigio); cursor:not-allowed; }
.scelta-cercabile-freccia { position:absolute; top:0; right:12px; width:16px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--grigio); pointer-events:none; transition:transform .15s; }
.scelta-cercabile-freccia::before { content:''; width:7px; height:7px; margin-top:-4px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); }
.scelta-cercabile.aperta .scelta-cercabile-freccia { transform:rotate(180deg); }
.scelta-cercabile-menu { position:absolute; z-index:60; top:calc(100% + 6px); left:0; right:0; padding:6px; box-sizing:border-box; border:1px solid var(--linea); border-radius:12px; background:var(--bianco); box-shadow:0 14px 34px rgb(23 38 60 / 16%); }
.scelta-cercabile-in-linea .scelta-cercabile-menu { right:auto; min-width:100%; width:max-content; max-width:min(480px, calc(100vw - 32px)); }
.scelta-cercabile-menu[hidden], .scelta-cercabile-vuoto[hidden], .scelta-cercabile-altre[hidden], .scelta-cercabile-errore[hidden] { display:none !important; }
.scelta-cercabile-elenco { position:relative; list-style:none; margin:0; padding:0; max-height:280px; overflow:auto; overscroll-behavior:contain; }
.scelta-cercabile-voce { display:flex; align-items:center; gap:10px; min-height:44px; margin:0; padding:9px 10px; box-sizing:border-box; border-radius:8px; color:var(--inchiostro); font-size:14px; font-weight:400; line-height:1.35; cursor:pointer; overflow-wrap:anywhere; }
.scelta-cercabile-voce + .scelta-cercabile-voce { margin-top:2px; }
.scelta-cercabile-voce:hover, .scelta-cercabile-voce.attiva { background:var(--carta); }
.scelta-cercabile-voce.attiva { box-shadow:inset 3px 0 0 var(--ui-blu); }
.scelta-cercabile-voce[aria-selected="true"] { background:var(--ui-blu-tenue); font-weight:600; }
.scelta-cercabile-voce[aria-disabled="true"] { color:var(--grigio); cursor:not-allowed; }
.scelta-cercabile-testo { flex:1; min-width:0; }
.scelta-cercabile-spunta { flex:none; color:var(--ui-blu); font-size:16px; font-weight:700; opacity:0; }
.scelta-cercabile-voce[aria-selected="true"] .scelta-cercabile-spunta { opacity:1; }
.scelta-cercabile-vuoto, .scelta-cercabile-altre { margin:8px 6px; color:var(--grigio); font-size:13px; font-weight:400; }
.scelta-cercabile-errore { margin:6px 0 0; color:var(--rosso); font-size:13px; font-weight:400; }
/* Il menu originale resta nel modulo per il valore, fuori dalla vista. */
select.scelta-cercabile-originale { position:absolute !important; left:0; bottom:0; width:1px !important; height:1px !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; opacity:0 !important; pointer-events:none !important; }
@media (prefers-reduced-motion:reduce) { .scelta-cercabile-freccia, .scelta-cercabile .scelta-cercabile-campo { transition:none; } }
@media print { .scelta-cercabile-menu, .scelta-cercabile-freccia { display:none !important; } .scelta-cercabile .scelta-cercabile-campo { border:0; padding:0; min-height:0; } }
/* ===== Coerenza grafica in tutte le pagine (Davide, 28/09/2026) =====
«La grafica non va mai fatta diversa per gli stessi moduli»; «quando uno cambia pagina i pulsanti
li deve trovare allo stesso identico posto»; parola d'ordine: semplificare la vita al commercialista.
Regole valide ovunque ricompaia lo stesso elemento; le pagine non le ridefiniscono. */
/* 1. Testata di pagina: titolo, una riga grigia, poi la riga delle azioni. Stesse distanze ovunque. */
.app > main :is(h1) { font-size:32px; line-height:1.2; font-weight:600; letter-spacing:-.02em; }
.app > main .con-info:has(> h1) { margin:0 0 10px; }
.app > main .con-info > h1, .app > main :is(.attivita-titolo, .sala-testa) > h1 { margin:0; }
.app > main h1 + .sottotitolo, .app > main .con-info:has(> h1) + .sottotitolo { margin-top:0; }
/* Il sottotitolo usa tutta la larghezza della colonna: resta su una riga quasi ovunque e il pulsante
principale cade alla stessa altezza in ogni pagina. */
.app > main .sottotitolo { color:var(--grigio); font-size:16px; line-height:1.6; margin-bottom:24px; max-width:none; }
@media (max-width:760px) { .app > main :is(h1) { font-size:27px; } }
/* 2. Riga delle azioni della pagina: il pulsante principale a sinistra sotto il sottotitolo, blu,
alto 48px, angoli 12px; la ricerca, se c'è, subito a destra. Stesse misure di «Aggiungi un cliente». */
.azioni-pagina { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 24px; }
.azioni-pagina > form { margin:0; }
.app > main .azioni-pagina :is(.btn-pieno,.btn-linea,button:not(.detail-close)) {
height:48px; min-height:48px; padding:0 20px; margin:0; border-radius:12px; font-size:15px; white-space:nowrap; width:auto; }
.app > main .azioni-pagina .cerca { flex:1 1 320px; max-width:none; height:48px; min-height:48px; border-radius:12px; margin:0; }
@media (max-width:760px) {
.azioni-pagina { flex-direction:column; align-items:stretch; }
.azioni-pagina > form, .app > main .azioni-pagina :is(.btn-pieno,.btn-linea,button:not(.detail-close)) { width:100%; justify-content:center; white-space:normal; }
.app > main .azioni-pagina .btn-linea { height:44px; min-height:44px; }
/* In colonna la base di 320px diventava l'altezza: la ricerca era alta 320px sul telefono (29/09/2026). */
.app > main .azioni-pagina .cerca { flex:0 0 auto; width:100%; }
}
/* 3. Azioni secondarie: mai più link sciolti separati da «·». Una riga di pulsanti con bordo,
stessa altezza, stesso spazio, allineati a sinistra sotto il contenuto a cui si riferiscono. */
.azioni-secondarie { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 0; }
.azioni-secondarie > form { margin:0; }
.azioni-secondarie > .piccolo { margin:0; flex:1 1 100%; }
.app > main .azioni-secondarie :is(.btn-pieno,.btn-linea,button:not(.detail-close)) {
min-height:38px; padding:8px 14px; margin:0; font-size:13.5px; border-radius:8px; width:auto; white-space:nowrap; }
.app > main .azioni-secondarie .btn-linea { background:var(--bianco); }
/* Dentro le righe di un elenco restano compatte, come «Vedi dettagli» nelle Scadenze. */
.app > main :is(.cosa, .conto-riga, li) .azioni-secondarie { margin-top:8px; gap:6px; }
.app > main :is(.cosa, .conto-riga, .riga-azione, li) .azioni-secondarie :is(.btn-pieno,.btn-linea,button:not(.detail-close)) { min-height:36px; padding:6px 12px; font-size:12.5px; }
/* Riga con un dato a sinistra e le sue azioni a destra (es. gli F24 di un documento). */
.riga-azione { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; padding:12px 0; border-top:1px solid var(--linea); }
.riga-azione:first-of-type { border-top:0; }
.riga-azione > p { margin:0; min-width:0; flex:1 1 260px; }
.riga-azione > .azioni-secondarie { margin:0; }
.azioni-secondarie.in-riga { margin:0; gap:12px; }
li > .azioni-secondarie { margin:8px 0 12px; }
/* Una scelta con il suo pulsante «Vedi l'anteprima» in fondo alla riga. */
label.scelta-con-azione { align-items:center; flex-wrap:wrap; gap:8px 12px; }
label.scelta-con-azione > span { flex:1 1 220px; min-width:0; }
label.scelta-con-azione > span small { color:var(--grigio); font-size:13px; margin-left:6px; }
.app > main label.scelta-con-azione > .btn-linea { min-height:38px; padding:8px 14px; font-size:13.5px; margin-left:auto; }
@media (max-width:600px) {
.app > main .azioni-secondarie :is(.btn-pieno,.btn-linea,button:not(.detail-close)),
.app > main :is(.cosa, .conto-riga, .riga-azione, li) .azioni-secondarie :is(.btn-pieno,.btn-linea,button:not(.detail-close)) { min-height:44px; white-space:normal; }
.app > main label.scelta-con-azione > .btn-linea { min-height:44px; margin-left:0; }
}
/* 4. Il pulsante (i) resta attaccato alla fine della frase: mai da solo sulla riga sotto.
«text-wrap: pretty» fa andare a capo con l'icona anche l'ultima parola (misurato: 0 icone sole su
3.952 larghezze e corpi diversi, contro 274 prima); l'icona non si spezza e non alza la riga. */
:is(p, li, label, legend, .piccolo, .sottotitolo):has(> .info) { text-wrap:pretty; }
.info { white-space:nowrap; }
.info-testo { white-space:normal; }
p .info, .piccolo .info, label .info, li .info { margin:0 0 0 4px; vertical-align:-4px; }
/* 5. Percorsi e schede sopra il titolo. Email: le tre voci sono già nel menu a sinistra, quindi sul
computer niente doppione sopra il titolo (come in Scadenze); sul telefono restano. Impostazioni:
un percorso compatto «Impostazioni › Posta e invii», non una fila di schede. */
@media (min-width:761px) {
.app > main > nav.navigazione-contesto[aria-label="Sezioni email"] { display:none; }
}
.app > main > nav.navigazione-contesto[aria-label="Percorso nelle impostazioni"] {
gap:0; border:0; padding:0; margin:0 0 12px; }
.app > main > nav.navigazione-contesto[aria-label="Percorso nelle impostazioni"] a {
min-height:0; padding:4px 0; font-size:13px; font-weight:500; color:var(--grigio); background:none; box-shadow:none; }
.app > main > nav.navigazione-contesto[aria-label="Percorso nelle impostazioni"] a:hover { color:var(--ui-blu); background:none; text-decoration:underline; text-underline-offset:3px; }
.app > main > nav.navigazione-contesto[aria-label="Percorso nelle impostazioni"] a + a::before {
content:"›"; display:inline-block; margin:0 8px; color:#9aa8ba; text-decoration:none; }
.app > main > nav.navigazione-contesto[aria-label="Percorso nelle impostazioni"] a:last-child { color:var(--inchiostro); }
@media (max-width:760px) {
.app > main > nav.navigazione-contesto[aria-label="Percorso nelle impostazioni"] a { min-height:44px; padding:10px 0; }
}
/* 6. Scelte multiple dello stesso tipo (clienti, destinatari, parole): pillole compatte come
«Movimenti da escludere» in Confronta. «+» da scegliere, spunta verde scelta, testo normale. */
.app > main .scelta-elenco { display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px; grid-template-columns:none; }
.app > main .scelta-elenco label.scelta-uno {
position:relative; display:inline-flex; flex-direction:row; align-items:center; gap:7px; width:auto; min-height:38px;
margin:0; padding:6px 12px; border:1px solid var(--linea); border-radius:999px; background:var(--bianco);
color:var(--inchiostro); font-size:14px; font-weight:400; line-height:1.3; cursor:pointer; }
.app > main .scelta-elenco label.scelta-uno[hidden] { display:none; }
.app > main .scelta-elenco label.scelta-uno > input { position:absolute; opacity:0; width:1px; height:1px; min-width:0; margin:0; pointer-events:none; }
.app > main .scelta-elenco label.scelta-uno::before { content:"+"; color:var(--grigio); font-weight:700; width:12px; text-align:center; flex:0 0 12px; }
.app > main .scelta-elenco label.scelta-uno:has(input:checked) { border-color:#a9c4ff; background:var(--ui-blu-tenue); color:var(--inchiostro); }
.app > main .scelta-elenco label.scelta-uno:has(input:checked)::before { content:"✓"; color:var(--verde); }
.app > main .scelta-elenco label.scelta-uno:has(input:focus-visible) { outline:2px solid var(--ui-blu); outline-offset:2px; }
.app > main .scelta-elenco label.scelta-uno:has(input:disabled) { opacity:.55; cursor:not-allowed; }
.app > main .scelta-elenco label.scelta-uno small { color:var(--grigio); font-size:12.5px; }
.app > main .scelta-elenco label.scelta-uno:hover { border-color:#b6c3d3; }
@media (max-width:600px) { .app > main .scelta-elenco label.scelta-uno { min-height:44px; } }
.app > main .scelte-destinatari { max-height:420px; padding:10px 2px 4px; }
/* Pillola di un cliente senza email (29/09/2026): si apre la sua scheda a destra per aggiungerla. */
.app > main .scelta-elenco a.scelta-email-mancante {
display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:6px 12px; border:1px dashed #b6c3d3;
border-radius:999px; background:var(--bianco); color:var(--inchiostro); font-size:14px; line-height:1.3; text-decoration:none; }
.app > main .scelta-elenco a.scelta-email-mancante::before { content:"+"; color:var(--ui-blu); font-weight:700; width:12px; text-align:center; flex:0 0 12px; }
.app > main .scelta-elenco a.scelta-email-mancante small { color:var(--grigio); font-size:12.5px; }
.app > main .scelta-elenco a.scelta-email-mancante small b { color:var(--ui-blu); font-weight:600; }
.app > main .scelta-elenco a.scelta-email-mancante:hover { border-color:var(--ui-blu); }
@media (max-width:600px) { .app > main .scelta-elenco a.scelta-email-mancante { min-height:44px; } }
/* 7. Campi: 48px come la ricerca e il pulsante principale; le liste a discesa restano al selettore
comune, che le sostituisce. Pulsanti affiancati a un campo alti uguali al campo. */
.app > main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]) { min-height:48px; }
.app > main :is(.barra-ricerca, .riscrivi-ai-riga, .f24-assegna) > :is(button, .btn-pieno, .btn-linea) { min-height:48px; }
.app > main .lista-strumenti > :is(.btn-linea, .btn-pieno), .app > main .lista-strumenti .cerca { height:48px; min-height:48px; }
.app > main label { line-height:1.45; }
/* 8. Stati vuoti: una riga calma di testo grigio, come «Nessuna email in attesa di risposta» in Email.
Niente riquadro tratteggiato, niente sfondo (29/09/2026, controllo grafica G2: valeva in circa 25 punti). */
.app > main .vuoto, .app > main .stato-vuoto {
background:none; border:0; border-radius:0; padding:0; margin:12px 0 20px; box-shadow:none;
color:var(--grigio); font-size:15px; line-height:1.55; }
.app > main .stato-vuoto > :is(h2,h3) { color:var(--grigio); font-size:15px; font-weight:600; margin:0 0 2px; }
.app > main .stato-vuoto > p { margin:0; }
/* 9. Nessun bollino colorato per dire «facoltativo»: resta un'indicazione neutra. */
.app > main .impostazioni-facoltativo { background:none; color:var(--grigio); padding:0; font-weight:500; }
/* 10. Ritorno alla pagina di partenza («← …»): stesso posto e stesso aspetto in ogni sottopagina. */
.app > main .torna { margin:0 0 12px; font-size:14px; line-height:1.4; }
.app > main .torna > a { font-weight:500; text-decoration:none; }
.app > main .torna > a:hover { text-decoration:underline; text-underline-offset:3px; }
/* Etichetta del canale (Davide, 28/09/2026): i messaggi arrivati su WhatsApp e gli avvisi su WhatsApp o SMS
si riconoscono in Email, nella scheda del cliente e nelle impostazioni. Sempre con il testo accanto. */
.etichetta-canale { display: inline-flex; align-items: center; flex: none; padding: 2px 8px; border-radius: 6px;
font-size: 12px; font-weight: 650; line-height: 1.5; border: 1px solid var(--linea); background: var(--carta); color: var(--inchiostro); }
.etichetta-canale-whatsapp { border-color: #b9d8bf; background: var(--verde-chiaro); color: var(--verde); }
.etichetta-canale-sms { border-color: #c9d6f3; background: var(--ui-blu-tenue); color: var(--ui-blu-scuro); }
/* ===== Componenti approvati (29/09/2026): uno solo per tipo, elenco in documenti/regole-interfaccia.md ===== */
/* 11. Barra «1 di N» di una sequenza di lavoro (templates/_sequenza.html). Stessa barra approvata per
«Prima di tutto»: sottile, neutra, resta in vista scorrendo; il blu solo sui collegamenti. */
.sequenza { position:sticky; top:8px; z-index:20; display:flex; align-items:center; justify-content:space-between;
flex-wrap:wrap; gap:4px 16px; margin:0 0 16px; padding:8px 14px; border:1px solid var(--linea); border-radius:10px;
background:var(--bianco); box-shadow:var(--ombra-appoggio); font-size:13px; line-height:1.4; color:var(--grigio); }
.sequenza[hidden] { display:none; }
html:has(.sequenza:not([hidden])) { scroll-padding-top:72px; }
.sequenza-testo { min-width:0; }
.sequenza-azioni { display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px 16px; }
.sequenza a { display:inline-flex; align-items:center; min-height:32px; font-weight:600; color:var(--ui-blu);
text-decoration:none; white-space:nowrap; }
.sequenza a:hover { text-decoration:underline; text-underline-offset:3px; }
.detail-body > .sequenza, .pagina-incorporata .sequenza { position:static; box-shadow:none; }
@media (max-width:700px) { .sequenza a { min-height:44px; } }
/* 12. «Elimina» (e «Togli» quando si stacca soltanto): stessa forma degli altri pulsanti, testo rosso con la ×,
bordo neutro. Mai un rosso pieno. Va con la finestra di conferma dell'app (_conferma.html). */
.btn-elimina, .app > main .btn-elimina { display:inline-flex; align-items:center; justify-content:center; gap:6px;
background:var(--bianco); border:1px solid var(--linea); color:var(--rosso); font-weight:600; }
.btn-elimina::before { content:"×" / ""; font-size:1.25em; font-weight:700; line-height:1; }
.btn-elimina:hover, .app > main .btn-elimina:hover { color:var(--rosso-scuro); background:var(--carta); border-color:#8997aa; }
/* 13. Finestra di conferma dell'app al posto di confirm() del browser (templates/_conferma.html,
static/conferma.js): titolo, una frase, «Annulla» e «Elimina» in rosso con la ×. */
.conferma-dialogo { width:min(420px, calc(100vw - 32px)); max-width:none; padding:24px; margin:auto;
border:1px solid var(--linea); border-radius:12px; background:var(--bianco); color:var(--inchiostro);
box-shadow:0 18px 48px rgb(23 38 60 / 18%); }
.conferma-dialogo::backdrop { background:rgb(23 38 60 / 28%); }
.conferma-dialogo h2 { margin:0 0 8px; font-size:17px; font-weight:650; line-height:1.35; overflow-wrap:anywhere; }
.conferma-dialogo p { margin:0 0 20px; font-size:14px; line-height:1.5; color:var(--grigio); }
.conferma-azioni { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.conferma-dialogo .conferma-azioni :is(.btn-linea, .btn-elimina) { width:auto; min-width:104px; min-height:40px; margin:0; }
@media (max-width:480px) { .conferma-dialogo .conferma-azioni :is(.btn-linea, .btn-elimina) { flex:1 1 0; min-height:44px; } }
/* 14. Gruppo apribile di un elenco: chevron, titolo in grassetto e «· N» grigio, come «Abbinati (proposte) ·
2 movimenti» in Estratti e fatture. Markup: Titolo
· N
…