/* Interfaccia condivisa: stessi spazi, gerarchie e controlli in tutta l'app.
   Il foglio precedente conserva le regole funzionali dei singoli moduli. */
:root {
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-blu: #2254c5;
  --ui-blu-scuro: #183e96;
  --ui-blu-tenue: #edf3ff;
  --ui-spazio-1: 4px;
  --ui-spazio-2: 8px;
  --ui-spazio-3: 12px;
  --ui-spazio-4: 16px;
  --ui-spazio-5: 24px;
  --ui-spazio-6: 32px;
  --ui-raggio: 12px;
  --carta: #f7f9fc;
  --bianco: #fff;
  --inchiostro: #17263c;
  --grigio: #526176;
  --linea: #dce3ec;
  --bordo-campo: #8391a5;
  --rosso: #bc3028;
  --rosso-chiaro: #fff1ef;
  --rosso-scuro: #94241e;
  --verde: #226343;
  --verde-chiaro: #eef8f2;
  --giallo: #78530b;
  --giallo-chiaro: #fff8e9;
  --ombra-appoggio: 0 1px 2px rgb(23 38 60 / 3%);
  --ombra-rilievo: 0 3px 12px rgb(23 38 60 / 6%);
}
/* Caricamento e scelte: una sola famiglia di componenti, anche da tastiera. */
.form-caricamento button:disabled { opacity:.48; cursor:not-allowed; }
.zona-caricamento { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 16px; text-align:center; border:1.5px dashed var(--bordo-campo); border-radius:var(--ui-raggio); background:var(--carta); transition:border-color .15s,background .15s; }
.zona-caricamento h3,.zona-caricamento p { margin:0; }
.zona-caricamento.trascinamento,.zona-caricamento:focus-within { border-color:var(--ui-blu); background:var(--ui-blu-tenue); }
.icona-caricamento { display:grid; place-items:center; color:var(--ui-blu); background:var(--ui-blu-tenue); border-radius:12px; width:52px; height:52px; }
.icona-caricamento svg { width:26px; height:26px; }
.form label.scegli-documenti { position:relative; display:inline-flex; cursor:pointer; margin:4px 0; }
.input-file-discreto { position:absolute!important; inset:0; opacity:0; cursor:pointer; width:100%!important; height:100%; margin:0!important; }
.scegli-documenti:focus-within { outline:3px solid var(--ui-blu); outline-offset:3px; }
.coda-caricamento { border:1px solid var(--linea); border-radius:var(--ui-raggio); padding:20px; }
.coda-testa,.selezione-testa { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.coda-testa h3,.selezione-testa [data-conteggio] { margin:0 auto 0 0; }
.coda-caricamento progress { width:100%; height:6px; margin:16px 0; accent-color:var(--ui-blu); }
.file-in-coda { list-style:none; padding:0; margin:0; max-height:330px; overflow:auto; }
.file-in-coda li { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--linea); }
.file-in-coda li:last-child { border:0; }
.file-in-coda li>div { min-width:0; flex:1; }
.file-in-coda strong,.file-in-coda span { display:block; overflow-wrap:anywhere; }
.file-in-coda strong { font-size:14px; font-weight:600; }
.file-in-coda [data-stato=errore] .piccolo { color:var(--rosso); }
.file-in-coda [data-stato=salvato] .piccolo,.file-in-coda [data-stato=duplicato] .piccolo { color:var(--verde); }
.file-in-coda .caricamento-originale { display:block; margin-top:8px; overflow-wrap:anywhere; }
.file-in-coda [data-stato] .caricamento-non-salvato { color:var(--rosso); margin:8px 0 0; overflow-wrap:anywhere; }
.form .scelta-clienti { min-width:0; border:1px solid var(--linea); border-radius:var(--ui-raggio); padding:20px; margin:8px 0; }
.form .scelta-clienti legend { padding:0 8px; font-weight:650; }
.form .scelta-clienti .ricerca-clienti { margin:12px 0; text-align:left; }
.scelta-clienti .scelta-elenco { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:350px; overflow:auto; margin-top:12px; padding:4px; }
.form .scelta-clienti label.scelta-uno { display:flex; flex-direction:row; align-items:center; text-align:left; gap:12px; border:1px solid var(--linea); background:var(--bianco); padding:12px; margin:0; min-height:52px; border-radius:8px; cursor:pointer; font-size:14px; }
.scelta-clienti .scelta-uno span { overflow-wrap:anywhere; }
.scelta-clienti label.scelta-uno:has(input:checked) { border-color:var(--ui-blu); background:var(--ui-blu-tenue); color:var(--ui-blu-scuro); }
.form .scelta-uno input[type=checkbox] { width:20px; height:20px; min-width:20px; flex:0 0 20px; margin:0; accent-color:var(--ui-blu); }
label.interruttore { display:flex; align-items:center; gap:14px; text-align:left; padding:14px 16px; border:1px solid var(--linea); background:var(--carta); border-radius:10px; }
.form .interruttore input[type=checkbox] { appearance:none; flex:0 0 42px; width:42px; height:24px; padding:0; border:0; border-radius:24px; background:var(--bordo-campo); position:relative; cursor:pointer; margin:0; }
.interruttore input[type=checkbox]::before { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--bianco); transition:transform .15s; }
.form .interruttore input[type=checkbox]:checked { background:var(--ui-blu); }
.interruttore input[type=checkbox]:checked::before { transform:translateX(18px); }
.interruttore input[type=checkbox]:focus-visible { outline:3px solid var(--ui-blu); outline-offset:3px; }
.filtri-personalizzati { margin-top:24px; }
.avvio-clienti,.stato-abbonamento { display:flex; align-items:center; gap:24px; padding:20px 24px; border:1px solid var(--linea); border-radius:var(--ui-raggio); background:var(--bianco); margin:0 0 24px; }
.avvio-clienti>div,.stato-abbonamento>div { flex:1; min-width:0; }
.avvio-clienti h2,.stato-abbonamento h2 { font-size:17px; margin:0 0 4px; }
.avvio-clienti p,.stato-abbonamento p { margin:0; }
.stato-abbonamento { background:var(--ui-blu-tenue); border-color:var(--linea); }
@media(max-width:600px) {
 .scelta-clienti .scelta-elenco { grid-template-columns:1fr; }
 .avvio-clienti,.stato-abbonamento { flex-direction:column; align-items:stretch; gap:14px; padding:18px; }
 .zona-caricamento { padding:24px 16px; }
 .coda-caricamento { padding:14px; }
 .file-in-coda li { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { .zona-caricamento,.interruttore input[type=checkbox]::before { transition:none; } }

body { font-family: var(--ui-font); font-size: 16px; line-height: 1.55; }
h1, h2, h3, .logo { font-family: var(--ui-font); }
h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; margin-bottom: 10px; }
h2 { font-size: 21px; line-height: 1.35; letter-spacing: -.015em; margin-bottom: 12px; }
h3 { line-height: 1.4; }
.app :is(h1, h2, h3) { min-width: 0; overflow-wrap: anywhere; }
.logo { font-weight: 700; letter-spacing: -.4px; }
.sottotitolo { font-size: 16px; line-height: 1.6; margin-bottom: 28px; max-width: 76ch; }
.piccolo, .nota-sezione { font-size: 14px; line-height: 1.55; }
.nota-sezione { color: var(--grigio); margin: 16px 0 24px; max-width: 84ch; }

/* Sette aree, con la gestione separata dal lavoro quotidiano. */
.app { max-width: none; padding: 0; }
.app > main { max-width: 1224px; padding: 32px 40px 100px; }
.app .barra-studio {
  width: 216px; flex: 0 0 216px; padding: 28px 16px 20px;
  background: var(--bianco); border-right: 1px solid var(--linea);
}
.barra-studio .logo { font-size: 18px; margin: 0 0 28px; padding: 0 4px; text-align: left; min-height: 24px; }
.barra-studio .menu { gap: 4px; width: 100%; flex: 0 0 auto; }
.barra-studio .menu-gruppo { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.barra-studio .menu-figli { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 2px 0 6px 12px; margin: 0 0 4px; border-left: 2px solid var(--linea); margin-left: 18px; }
.barra-studio .voce {
  display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
  gap: 12px; width: 100%; padding: 12px; min-height: 46px;
  font-size: 14px; line-height: 1.3; text-align: left; border-radius: 8px;
  color: var(--grigio); text-decoration: none; position: relative; font-weight: 500;
}
.barra-studio .voce-figlio { min-height: 40px; padding: 8px 10px; font-size: 13px; gap: 10px; }
.barra-studio .voce-figlio svg { width: 18px; height: 18px; flex-basis: 18px; }
.barra-studio .voce svg { width: 20px; height: 20px; flex: 0 0 20px; }
.barra-studio .voce span { flex: 1 1 auto; min-width: 0; }
.barra-studio .voce:hover { background: var(--carta); color: var(--inchiostro); }
.barra-studio .voce.on { color: var(--ui-blu); background: var(--ui-blu-tenue); font-weight: 650; }
.barra-studio .voce-figlio.on { font-weight: 650; }
/* Con una sottovoce aperta resta evidenziata solo la sottovoce, non anche la voce madre. */
.barra-studio .menu-gruppo:has(.voce-figlio.on) > .voce.on { background: transparent; }
.barra-studio .pallino { position: static; margin-left: auto; width: 7px; height: 7px; flex: 0 0 7px; }
.menu-servizio { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 24px; width: 100%; }
.barra-studio .esci { margin: 0; }
.barra-studio .menu-servizio .voce span { flex: 1 1 auto; }
.testata-app-mobile { display: none; }
.navigazione-contesto {
  display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--linea);
  padding-bottom: 12px; margin-bottom: 28px; align-items: center;
}
.navigazione-contesto a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 10px 14px; font-size: 14px; font-weight: 550; text-decoration: none;
  color: var(--grigio); border-radius: 7px; line-height: 1.3;
}
.navigazione-contesto .numerello { margin-left: 7px; flex-shrink: 0; }
.navigazione-contesto a:hover { background: #eaf0f8; color: var(--inchiostro); }
.navigazione-contesto a[aria-current] { background: var(--bianco); color: var(--ui-blu); box-shadow: inset 0 0 0 1px var(--linea); }
.navigazione-contesto a.contesto-azione {
  font-weight: 650; color: var(--inchiostro); background: var(--bianco);
  box-shadow: inset 0 0 0 1px var(--linea);
}
.navigazione-contesto a.contesto-azione:hover { background: #eaf0f8; color: var(--inchiostro); }
.navigazione-contesto a.contesto-azione[aria-current] {
  background: var(--ui-blu); color: #fff; box-shadow: none;
}
.navigazione-contesto a.contesto-azione[aria-current] .numerello {
  background: #fff; color: var(--ui-blu);
}
.contesto-altro { position: relative; }
.contesto-altro > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 14px; font-size: 14px; font-weight: 550; color: var(--grigio);
  border-radius: 7px; line-height: 1.3; user-select: none;
}
.contesto-altro > summary::-webkit-details-marker { display: none; }
.contesto-altro > summary::after { content: " ▾"; font-size: 11px; opacity: .7; }
.contesto-altro > summary:hover { background: #eaf0f8; color: var(--inchiostro); }
.contesto-altro[open] > summary { background: var(--bianco); color: var(--ui-blu); box-shadow: inset 0 0 0 1px var(--linea); }
.contesto-altro > .contesto-menu {
  display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 220px; padding: 6px; background: var(--bianco); border: 1px solid var(--linea);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(20,30,50,.12);
  flex-direction: column; gap: 2px;
}
.contesto-altro[open] > .contesto-menu { display: flex; }
.contesto-altro > .contesto-menu a {
  display: flex; justify-content: flex-start; width: 100%; min-height: 40px;
  padding: 8px 12px; border-radius: 6px; box-shadow: none; background: transparent;
}

/* Controlli e allineamenti condivisi, senza cambiare il comportamento dei form. */
.btn-pieno, .btn-linea {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 650; line-height: 1.4; min-height: 44px;
  padding: 11px 18px; border-radius: 8px; white-space: normal; text-align: center;
  max-width: 100%; box-shadow: none; transition: background-color .15s, border-color .15s;
}
.btn-pieno { background: var(--ui-blu); border-color: var(--ui-blu); color: white; }
.btn-pieno:hover { background: var(--ui-blu-scuro); border-color: var(--ui-blu-scuro); }
.btn-linea { border-color: #b6c3d3; background: var(--bianco); color: var(--inchiostro); }
.btn-linea:hover { background: var(--carta); border-color: #8997aa; }
.btn-piccolo { font-size: 13px; padding: 9px 13px; min-height: 44px; }
.btn-pieno:active, .btn-linea:active { transform: none; }
.btn-testo, .link { color: var(--ui-blu); }
.btn-testo { min-height: 44px; padding: 10px 6px; line-height: 1.4; }
.link:hover { color: var(--ui-blu-scuro); text-decoration: underline; text-underline-offset: 3px; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ui-blu); outline-offset: 3px;
}
input:focus, select:focus, textarea:focus { border-color: var(--ui-blu); }
label { font-size: 14px; line-height: 1.45; color: var(--inchiostro); gap: 8px; min-width: 0; }
input, select, textarea { font-family: var(--ui-font); font-size: 16px; padding: 11px 12px; border-color: var(--bordo-campo); }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select { min-height: 44px; }
input[type=checkbox], input[type=radio] { accent-color: var(--ui-blu); flex-shrink: 0; }
/* Spunte e radio: niente padding da campo di testo. Sul telefono quel padding
   allarga il tocco e, dopo la prima scelta, copre l'altra voce. */
label:not(.interruttore) > input[type=checkbox],
label:not(.interruttore) > input[type=radio] {
  width: 22px; height: 22px; min-width: 22px; max-width: 22px;
  padding: 0; margin: 2px 0 0; flex: 0 0 22px; touch-action: manipulation;
  border: 0; background: transparent; box-shadow: none; appearance: auto;
}
label:not(.interruttore) > input[type=radio] { border-radius: 50%; }
label:not(.interruttore) > input[type=checkbox] { border-radius: 4px; }
label:not(.interruttore) > input[type=radio]:focus,
label:not(.interruttore) > input[type=checkbox]:focus {
  outline: none;
}
label:not(.interruttore) > input[type=radio]:focus-visible,
label:not(.interruttore) > input[type=checkbox]:focus-visible {
  outline: 2px solid var(--ui-blu); outline-offset: 3px;
}
label.scelta, label.scelta-tipo, label.scelta-pillola, label.spunta-scelta,
label.consenso, label.riga-check, label.riga-spunta {
  flex-direction: row;
  touch-action: manipulation;
}
input[type=file] { width: 100%; padding: 8px; background: var(--carta); border-color: var(--bordo-campo); line-height: 1.5; }
input[type=file]::file-selector-button {
  font: inherit; font-size: 14px; font-weight: 600; min-height: 36px;
  padding: 7px 12px; margin: 0 12px 0 0; border: 1px solid #b6c3d3;
  border-radius: 6px; background: white; color: var(--inchiostro); cursor: pointer;
}
.form, .form.griglia { gap: 20px; }
.form { max-width: 640px; }
.form > button, .form > .btn-pieno, .form > .btn-linea { align-self: flex-start; }
.form > p { margin: 0; }
.riga-check { flex-direction: row; align-items: flex-start; gap: 10px; }
.riga-check input { margin-top: 3px; width: 18px; height: 18px; }
.azioni { gap: 16px; align-items: flex-end; margin-top: 20px; flex-wrap: wrap; }
.azioni > form { max-width: 100%; }
/* Una azione primaria; «segna ricevuto» è testo sotto, non un secondo bottone. */
.documento-richiesto { flex-wrap: wrap; align-items: flex-start; }
.documento-richiesto > .testo { flex: 1 1 260px; }
.documento-richiesto > .azioni-documento {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  flex: 1 1 320px; max-width: 520px; min-width: 0; margin: 0;
}
.azioni-documento > form { display: flex; margin: 0; min-width: 0; align-items: center; }
.azioni-documento :is(.btn-pieno,.btn-linea) { width: auto; }
.documento-richiesto > .nota-ricezione {
  flex: 1 0 100%; margin: 4px 0 0; font-size: 13px; line-height: 1.5; max-width: 56ch;
}
@media(max-width:640px) {
  .documento-richiesto { align-items: stretch; }
  .documento-richiesto > .testo { flex: none; }
  .documento-richiesto > .azioni-documento {
    flex-direction: column; align-items: stretch; flex: none; width: 100%; max-width: none;
  }
  .azioni-documento :is(.btn-pieno,.btn-linea,.btn-testo) { width: 100%; justify-content: center; }
}
.posta .azioni,.azioni-anteprima { align-items:center; }
.posta .azioni { align-items: flex-start; gap: 12px 16px; }
.posta .azioni > .piccolo { margin: 0; align-self: center; flex: 1 1 160px; min-width: 0; }
.posta .azioni > .altre-azioni {
  flex: 0 0 auto; width: fit-content; max-width: 100%; margin-left: auto;
}
.posta .altre-azioni .btn-linea { width: auto; }
.posta .altre-azioni[open] { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.posta .altre-azioni[open] > :is(form, a) { margin: 0; }
.posta .azioni>form { display:flex; align-items:center; margin:0; }
.lista-strumenti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
}
.lista-strumenti > .btn-linea,
.lista-strumenti .cerca {
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}
.lista-strumenti .cerca {
  flex: 1 1 260px;
  width: auto;
  min-width: min(100%, 240px);
  max-width: 420px;
  font-size: 16px;
}
.lista-strumenti > a { margin: 0; }
@media (max-width: 760px) {
  .lista-strumenti {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .lista-strumenti .cerca {
    flex: none;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .lista-strumenti > .btn-linea {
    align-self: stretch;
    width: 100%;
    justify-content: center;
  }
}
.posta-testa b a,.riga-cliente b a { color:inherit; text-decoration:none; }
.posta-testa b a:hover,.riga-cliente b a:hover { color:var(--ui-blu); text-decoration:underline; }
/* Nelle schermate Cliente le azioni stanno a destra: sul desktop questo spazio evita
   che la bolla fissa di SofIA si sovrapponga all'ultimo pulsante visibile. */
@media(min-width:761px) {
  .app-clienti :is(.cliente-riga,.riga-cliente) { padding-right:156px; }
}
.pratica-estera { align-items:center; }
.azioni-pratica { flex:0 0 240px; display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.azioni-pratica form { display:flex; flex-direction:column; gap:8px; }
.azioni-pratica :is(.btn-pieno,.btn-linea) { width:100%; }
.azioni-pratica .piccolo { font-size:12px; text-align:left; line-height:1.5; }
.azione-spiegata { display:flex; flex-direction:column; align-items:stretch; gap:8px; max-width:240px; }
.azione-spiegata .nota-bottone { font-size:12px; text-align:left; line-height:1.5; margin:0; }
.etichetta-sezione,.campo-obbligatorio { color:var(--ui-blu); font-size:12px; font-weight:650; }
.campo-obbligatorio { margin-left:8px; }
.avvio-passaggi { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:20px; }
.avvio-passaggi>a { display:flex; align-items:center; gap:14px; padding:18px; border:1px solid var(--linea); border-radius:10px; text-decoration:none; background:var(--carta); }
.avvio-passaggi>a>span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--ui-blu-tenue); color:var(--ui-blu); }
.avvio-passaggi>a>div { flex:1; }
.avvio-passaggi small { display:block; color:var(--grigio); }
.preferenze-facoltative .collegamenti-impostazioni { margin-top:24px; }
.campi-facoltativi { border:1px solid var(--linea); border-radius:10px; padding:16px; }
.campi-facoltativi[open]>.form { margin-top:20px; }
.testo-email-legibile { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; font-size:15px; padding:20px; background:var(--carta); border-radius:10px; margin:16px 0; }
.aiuto-form { flex-wrap:wrap; }
.aiuto-form textarea { flex:1 1 100%; resize:vertical; min-height:88px; max-height:180px; font:inherit; font-size:14px; padding:12px; }
.aiuto-form button { margin-left:auto; }
.aiuto-allegati { margin:0 0 16px; }
.zona-allegati-chat { display:flex; flex-wrap:wrap; align-items:center; gap:12px; border:1px dashed var(--bordo-campo); border-radius:10px; padding:12px; }
.zona-allegati-chat.trascinamento { background:var(--ui-blu-tenue); border-color:var(--ui-blu); }
.f24-carica .form { margin-top: 16px; }
.f24-carica .btn-pieno.scegli-documenti { display: inline-flex; align-items: center; justify-content: center; }
.f24-attesa { margin: 16px 0 0; font-size: 18px; font-weight: 650; }
.f24-coppia { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 20px; align-items: start; }
.app-f24-largo > main { max-width: 1760px; }
.app-f24-largo form.form { max-width: none; }
.app-f24-largo .f24-coppia { grid-template-columns: minmax(0, 1.9fr) minmax(340px, 0.62fr); gap: 28px; }
.app-f24-largo h1 { font-size: 40px; }
.app-f24-largo .sottotitolo, .app-f24-largo .f24-scheda h2 { font-size: 22px; }
.f24-foglio img, .anteprima-originale img { width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 8px; background: #fff; }
.anteprima-originale { display: flex; flex-direction: column; gap: 16px; margin: 0 0 22px; }
.f24-campi .form.griglia { margin-top: 0; }
.f24-scheda { overflow: visible; }
@media (max-width: 1100px) {
  .app-f24-largo .f24-coppia { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .f24-coppia { grid-template-columns: minmax(0, 1fr); }
}
.cosa .form { margin-top: 12px; }
.con-info { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; min-width: 0; }
.con-info > :is(h1, h2, h3) { margin: 0; min-width: 0; }
.voce-contesto { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.contesto-altro > .contesto-menu .voce-contesto { display: flex; width: 100%; }
.contesto-altro > .contesto-menu .voce-contesto > a { width: auto; flex: 1 1 auto; }
.info { position: relative; display: inline-flex; flex: 0 0 auto; }
button.info-i {
  width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0;
  border-radius: 50%; border: 1px solid #9aa8ba; background: #fff; color: #5c6b80;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700;
  font-size: 12px; line-height: 16px; display: inline-flex; align-items: center; justify-content: center;
  cursor: help; box-shadow: none;
}
button.info-i:hover, .info:focus-within button.info-i { border-color: var(--ui-blu); color: var(--ui-blu); }
.info-testo {
  display: none; position: absolute; z-index: 60; top: calc(100% + 8px); left: 0;
  width: max-content; max-width: min(320px, 70vw); padding: 10px 12px;
  background: #1c2430; color: #fff; font-size: 13px; font-weight: 450; font-style: normal;
  line-height: 1.45; border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 30, 50, .2);
  text-align: left; white-space: normal; pointer-events: none;
}
.info:hover .info-testo, .info:focus-within .info-testo { display: block; }
.navigazione-contesto > .voce-contesto:last-child .info-testo { left: auto; right: 0; }
.f24-barra {
  display: flex; align-items: center; justify-content: flex-start; gap: 16px;
  margin: 0 0 12px; padding: 0 16px;
}
.f24-barra > label {
  flex-direction: row; align-items: center; gap: 10px; margin: 0;
  font-weight: 650; color: var(--inchiostro);
}
.f24-barra > label > input { margin: 0; }
.f24-destinatario {
  background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--ui-raggio);
  padding: 14px 16px 6px; margin: 0 0 12px;
}
.f24-destinatario .form { margin-top: 12px; }
.f24-destinatario .piccolo { margin: 0 0 8px; }
.f24-elenco { list-style: none; margin: 4px 0 8px; padding: 0; border-top: 1px solid var(--linea); }
.f24-riga {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--linea);
}
.f24-riga:last-child { border-bottom: 0; }
.f24-riga > label, .f24-nome {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  min-width: 0; flex: 1 1 auto; margin: 0; color: var(--inchiostro); font-weight: 600;
}
.f24-riga > label > input { margin: 0; }
.f24-riga > label > span, .f24-nome { min-width: 0; overflow-wrap: anywhere; }
.f24-riga-azioni { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.f24-riga-azioni .btn-linea { white-space: nowrap; width: auto; }
.f24-elimina { display: inline; margin: 0; }
.f24-elimina button.link {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--ui-blu);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.f24-apri { margin: 4px 0 10px; }
.f24-assegna {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  margin: 8px 0 12px;
}
.f24-assegna label { flex: 1 1 240px; margin: 0; }
.f24-assegna select { width: 100%; }
.f24-assegna button { width: auto; flex: 0 0 auto; }
@media (max-width: 640px) {
  .f24-riga { flex-wrap: wrap; align-items: flex-start; }
  .f24-riga-azioni { width: 100%; justify-content: flex-end; }
}
.file-drop-semplice { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:20px; margin-top:8px; border:1px dashed var(--bordo-campo); border-radius:10px; background:var(--carta); min-width:0; }
.file-drop-semplice .piccolo { overflow-wrap:anywhere; max-width:100%; }
.file-drop-semplice .scegli-documenti { position:relative; cursor:pointer; }
.file-drop-titolo { font-size:15px; font-weight:600; }
.file-drop-semplice.trascinamento { background:var(--ui-blu-tenue); border-color:var(--ui-blu); }
.file-drop-semplice:focus-within { outline:2px solid var(--ui-blu); outline-offset:2px; }

/* Zona unica file + cartella (Invia F24 e Confronta): stesso look.
   position:relative ancora gli input discreti: senza, un input fuori da
   .zona-carica-azione (cartella webkitdirectory) copre tutta la viewport. */
.zona-carica {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
  padding: 22px 20px;
  border: 1px dashed var(--bordo-campo);
  border-radius: 12px;
  background: var(--carta);
  min-width: 0;
}
.zona-carica.trascinamento {
  background: var(--ui-blu-tenue);
  border-color: var(--ui-blu);
}
.zona-carica:focus-within {
  outline: 2px solid var(--ui-blu);
  outline-offset: 2px;
}
.zona-carica-titolo {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  color: var(--inchiostro);
}
.zona-carica-aiuto {
  margin: 0;
  font-size: 14px;
  color: var(--grigio);
}
.campo-cartella { margin-top: 10px; }
.campo-cartella:first-of-type { margin-top: 0; }
.campo-cartella > label { margin-bottom: 6px; }
.cartella-riga { display: flex; align-items: center; gap: 10px; }
.cartella-riga > input { flex: 1 1 auto; min-width: 0; margin: 0; }
.cartella-riga > .btn-linea { flex: 0 0 auto; width: auto; white-space: nowrap; margin: 0; }
.cartella-riga > .input-file-discreto {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0; pointer-events: none;
}
.zona-carica-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.zona-carica-azione {
  flex: 1 1 160px;
  max-width: 280px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
  cursor: pointer;
  position: relative;
}
/* Tutti gli input della zona (file e cartella): mai overlay cliccabile.
   width !important batte la regola base di .input-file-discreto. */
.zona-carica .input-file-discreto {
  position: absolute !important;
  inset: auto !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0 !important;
}
.zona-carica-stato {
  margin: 0;
  min-height: 1.2em;
  overflow-wrap: anywhere;
}
.zona-carica + .elenco-cartelle-locali { margin-top: 14px; }
.zona-carica ~ .azioni-cartelle-locali { margin-top: 12px; }
.zona-allegati-chat .scegli-documenti { position:relative; cursor:pointer; }
.aiuto-allegati .piccolo { font-size:12px; margin-top:8px; }
#aiuto-file-lista { list-style:none; padding:0; margin:8px 0; }
#aiuto-file-lista li { display:flex; justify-content:space-between; gap:12px; font-size:13px; margin:8px 0; }
#aiuto-file-lista span { min-width:0; overflow-wrap:anywhere; }
.allegato-pronto { min-width:0; max-width:100%; }
.allegato-pronto b { min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
.pannello-aiuto { max-height:calc(100dvh - 110px); overflow-y:auto; z-index:80; }
.pannello-aiuto > * { flex-shrink:0; }
.pannello-aiuto .aiuto-conversazione { flex-shrink:0; max-height:220px; }
@media(max-width:700px) { .avvio-passaggi { grid-template-columns:1fr; } .azioni-pratica { flex-basis:auto; width:100%; } .pratica-estera { flex-wrap:wrap; } }
.azioni > label { flex: 1 1 200px; }
.app main form:not(.form):not(.azioni):not(.barra-ricerca) > label + label,
.app main form:not(.form):not(.azioni):not(.barra-ricerca) > label + button { margin-top: 16px; }
.pannello > p + form, details.pannello[open] > form { margin-top: 20px; }
.pannello > form + p, .app main > .btn-pieno + p { margin-top: 16px; }
.app main > p + :is(.pannello,.cosa,form,.norma,.stato-vuoto),
.pannello > p + label { margin-top: 20px; }
.app main > :is(a.btn-pieno,a.btn-linea) { margin-bottom: 20px; }
.campi-pratica { display: flex; flex-direction: column; gap: 20px; padding: 0; border: 0; min-width: 0; }
.campi-pratica[hidden] { display: none; }
.campi-pratica legend { font-size: 17px; font-weight: 650; margin-bottom: 16px; }
.barra-ricerca { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 18px 0 0; }
.barra-ricerca > label { flex: 1 1 280px; max-width: 520px; }
.barra-ricerca > :is(button, a) { flex: 0 0 auto; margin: 0; }

/* Superfici calmissime: lo stato si legge nel testo, non solo nel colore. */
.pannello, .cosa, .posta, .norma, .scheda {
  border-radius: var(--ui-raggio); border-color: var(--linea); box-shadow: var(--ombra-appoggio);
}
.pannello, .posta, .norma { padding: 24px; margin-bottom: 24px; }
.cosa { padding: 20px 24px; gap: 20px; }
.cosa:hover, .pannello:hover { box-shadow: var(--ombra-appoggio); transform: none; }
.cosa.da-qui { border-color: #a5bce7; box-shadow: none; }
.cosa .titolo { font-size: 17px; }
/* una riga che si apre: stesso aspetto della scheda, ma e' un collegamento */
a.cosa-link { text-decoration: none; color: inherit; cursor: pointer; }
a.cosa-link:hover { border-color: #9db5df; box-shadow: var(--ombra-rilievo); }
a.cosa-link .titolo { color: var(--inchiostro); }
.feedback-testo { font-size: 17px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.feedback-testo p + p { margin-top: 16px; }
.feedback-dettaglio { margin-top: 24px; }
.feedback-dettaglio .feedback-card-body { padding: 24px; }
.numerello[hidden], [hidden] { display: none !important; }
[data-nuovo="1"] > summary .feedback-note-title::before,
[data-nuovo="1"] > summary .feedback-card-title::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-blu); margin-right: 9px; }
.lettura-errore { margin: 16px; }
.modulo-persona { display: flex; flex-direction: column; gap: 20px; max-width: 640px; margin: 24px 0; }
.modulo-persona > button { align-self: flex-start; }
.scelte-accesso { border: 1px solid var(--linea); padding: 20px; border-radius: var(--ui-raggio); min-width: 0; }
.scelte-accesso legend { padding: 0 8px; }
.spunta-scelta, .riga-spunta { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; text-align: left; min-height: 44px; }
.spunta-scelta + .spunta-scelta { margin-top: 16px; }
.spunta-scelta input, .riga-spunta input { width: 18px; height: 18px; margin: 3px 0 0; }
.impostazioni-extra { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; }
.impostazioni-extra a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--linea); text-decoration: none; font-size: 14px; color: var(--inchiostro); min-height: 48px; }
#impostazioni-indietro { margin: 0 0 16px; }
#impostazioni-indietro + #studio { scroll-margin-top: 24px; }
.calendario-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin: 16px 0; padding-bottom: 6px; }
.calendario .calendario-griglia { min-width: 700px; }
.cal-settimana { display: contents; }
.calendario .cal-voce { min-height: 44px; font-size: 12px; white-space: normal; line-height: 1.4; }
.cal-voce b, .cal-voce > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-voce .cal-stato { font-size: 11px; color: var(--grigio); }
.calendario .calendario-legenda .cal-voce { min-height: 0; }
.calendario > .vuoto { margin-bottom: 16px; }
.calendario-testa { flex-wrap: wrap; }
.calendario-aiuto { display: none; }
.nota-limiti { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 12px; }
.scadenza-proposta { margin: 16px 0; }
.scadenza-proposta:target, .conto-riga:target { outline: 2px solid var(--ui-blu); outline-offset: 4px; scroll-margin-top: 28px; }
.fonte-proposta { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.scadenza-scarta { margin-top: 10px; }
.fonte-scadenza { overflow-wrap: anywhere; }
@media(max-width:1100px) { .collegamenti-impostazioni { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .calendario-aiuto { display: block; } }
@media(max-width:600px) { .collegamenti-impostazioni { grid-template-columns: 1fr !important; } .impostazioni-extra { grid-template-columns: 1fr; } .modulo-persona > button { width: 100%; } .feedback-dettaglio .feedback-card-body { padding: 18px; } }
.cosa .dettaglio { font-size: 14px; }
.gruppo { margin-bottom: 32px; }
.gruppo-testa { align-items: center; padding-bottom: 12px; margin-bottom: 16px; }
.gruppo-testa h2 { font-size: 19px; }
.stato-vuoto {
  padding: 32px 24px; border: 1px dashed #b6c3d3; background: var(--bianco);
  border-radius: var(--ui-raggio); margin: 20px 0 24px;
}
.stato-vuoto h2, .stato-vuoto h3 { font-size: 17px; margin: 0 0 8px; }
.stato-vuoto p { color: var(--grigio); max-width: 72ch; font-size: 15px; }
.archivio-carica .form-caricamento { max-width:none; width:100%; }
.archivio-note { border-top: 1px solid var(--linea); margin-top: 24px; padding-top: 16px; }
.archivio-note > p + p { margin-top: 6px; }
.archivio-note > a { font-size: 14px; margin-top: 4px; }
.documento-archivio h3 { margin-top: 0; overflow-wrap: anywhere; }
.documento-archivio .btn-linea { margin-top: 16px; }
.documento-archivio p + p { margin-top: 6px; }
.strumenti-controllo { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.strumenti-controllo.confronti-doppi { grid-template-columns: repeat(2,minmax(0,1fr)); }
.estratto-stato { margin: 8px 0; }
.estratto-conto .estratto-azioni { display: grid; grid-template-columns: 1fr; gap: 10px; flex: 0 1 320px; min-width: 0; }
.estratto-azioni form,.estratto-azioni p { margin: 0; }
.estratto-azioni button { width: 100%; }
.account-studio { position: relative; flex-shrink: 0; font-size: 13px; }
.account-studio > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 8px; border: 1px solid var(--linea); border-radius: 8px; }
.account-studio[open] > summary { background: var(--ui-blu-tenue); }
.account-studio > nav { position: absolute; right: 0; top: calc(100% + 8px); z-index: 100; display: grid; min-width: 220px; max-width: calc(100vw - 32px); background: white; padding: 8px; border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--ombra-rilievo); }
.account-studio nav a { min-height: 44px; display: flex; align-items: center; padding: 10px; text-decoration: none; color: var(--inchiostro); }
.account-studio nav a:hover { background: var(--ui-blu-tenue); }
[id^="estratto-"],[id^="pratica-"],[id^="f24-"],[id^="differenza-"] { scroll-margin-top: 24px; }
:is([id^="estratto-"],[id^="pratica-"],[id^="f24-"],[id^="differenza-"]):target { outline: 2px solid var(--ui-blu); outline-offset: 3px; }
.strumento-controllo {
  display: flex; flex-direction: column; gap: 20px; padding: 24px; text-decoration: none;
  border: 1px solid var(--linea); border-radius: var(--ui-raggio); background: var(--bianco);
  transition: border-color .15s, box-shadow .15s;
}
.strumento-controllo:hover { border-color: #9db5df; box-shadow: var(--ombra-rilievo); }
.strumento-icona { display: flex; justify-content: center; align-items: center; background: var(--ui-blu-tenue); color: var(--ui-blu); width: 40px; height: 40px; border-radius: 10px; font-size: 16px; font-weight: 700; }
.strumento-controllo > span:last-child { display: flex; flex-direction: column; flex: 1; }
.strumento-controllo h2 { font-size: 18px; margin-bottom: 10px; }
.strumento-controllo p { font-size: 14px; color: var(--grigio); margin-bottom: 24px; line-height: 1.6; }
.strumento-azione { font-size: 14px; font-weight: 650; color: var(--ui-blu); margin-top: auto; display: flex; justify-content: space-between; gap: 8px; }
details.pannello > summary { cursor: pointer; min-height: 44px; font-size: 16px; font-weight: 650; padding: 10px 0; }
details.pannello[open] > summary { margin-bottom: 16px; }
.aggiungi-dalla-posta { padding: 10px 24px; }
.aggiungi-dalla-posta[open] { padding-bottom: 24px; }
.aggiungi-dalla-posta .form { max-width: none; }
.aggiungi-dalla-posta .piccolo { margin-top: 16px; max-width: 90ch; }
.periodo-ricerca-clienti { width: 100%; }
.cerca { max-width: 520px; margin-bottom: 20px; }
.impostazione summary h2 { font-size: 17px; }
.collegamenti-impostazioni { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.collegamenti-impostazioni .pannello { padding: 20px; }
.collegamenti-impostazioni h2 { font-size: 16px; margin-bottom: 12px; }
.collegamenti-impostazioni nav { display: flex; flex-direction: column; }
.collegamenti-impostazioni a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 0; border-top: 1px solid var(--linea); text-decoration: none; color: var(--grigio); font-size: 14px; }
.collegamenti-impostazioni a:hover { color: var(--ui-blu); }
.impostazione .stato { font-size: 14px; }
/* le quattro schede in cima: stessa altezza in riga, e distanza uguale da quello che segue
   (l'ultima scheda "toccava" il pannello sotto: Davide, 11/09/2026) */
.collegamenti-impostazioni { grid-template-columns: repeat(4, minmax(0,1fr)); align-items: stretch; margin-bottom: 24px; }
.collegamenti-impostazioni .pannello { margin-bottom: 0; height: 100%; }
.collegamenti-impostazioni a { color: var(--inchiostro); }
.collegamenti-impostazioni a:hover { color: var(--ui-blu); }
.gruppo-opzionali > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 44px; }
.gruppo-opzionali > summary::-webkit-details-marker { display: none; }
.gruppo-opzionali > summary h2 { margin: 0; font-size: 18px; }
.gruppo-opzionali > summary .stato { display: block; color: var(--grigio); font-size: 14px; margin-top: 3px; }
.gruppo-opzionali > summary::after { content: "+"; flex: none; width: 32px; height: 32px; border: 1px solid var(--linea); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--grigio); background: var(--carta); }
.gruppo-opzionali[open] > summary::after { content: "·"; }
.gruppo-opzionali[open] > summary { margin-bottom: 16px; }
.gruppo-opzionali > .impostazione { margin: 12px 0 0; box-shadow: none; }
.impostazione summary::after { color: var(--grigio); background: var(--carta); border-radius: 8px; }

/* Il numerello sulle icone: quante cose aspettano in quell'area (Davide, 11/09/2026). */
.numerello {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px;
  background: #f3e8e8; color: var(--rosso); font-size: 11px; font-weight: 700; line-height: 1;
  letter-spacing: 0; flex: 0 0 auto;
}
.barra-studio .voce .numerello { margin-left: auto; }
.barra-admin .voce .numerello { position: absolute; top: 4px; right: 8px; }
.barra-admin .voce.on .numerello { background: #fff; color: var(--rosso); }

/* Stato e badge: angoli sobri, non pastiglie. */
.tag { border-radius: 5px; padding: 3px 9px; font-size: 13px; font-weight: 550; }
.conto-origine, .posta-gruppo .conteggio { border-radius: 5px; }

/* Scadenze: la scelta fra elenco e calendario, e il calendario a mese (Davide, 11/09/2026). */
.scadenze-intro { display: grid; gap: var(--ui-spazio-4); margin-bottom: var(--ui-spazio-5); }
.scadenze-intro h1,.scadenze-intro p { margin: 0; }
.scadenze-avviso { padding: 14px 16px; border-left: 3px solid var(--bordo-campo); background: var(--bianco); border-radius: 0 8px 8px 0; color: var(--grigio); }
.scadenze-comandi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-spazio-4); margin-bottom: var(--ui-spazio-5); }
.scadenze-comandi > p { flex: 1 0 100%; margin: 0; color: var(--grigio); }
.scadenze-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.scadenze-azioni form { margin: 0; }
.scadenze-azioni .altre-azioni form { margin-top: 12px; }
.scadenze-inserimento { scroll-margin-top: 24px; }
.scadenza-prossimo-passo { margin: 12px 0 0; max-width: 72ch; color: var(--grigio); }
.vista-scelta { display: inline-flex; gap: 4px; padding: 4px; margin: 0; background: var(--carta); border: 1px solid var(--linea); border-radius: 10px; }
.vista-scelta a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--grigio); text-decoration: none; }
.vista-scelta a[aria-current] { background: var(--bianco); color: var(--ui-blu); box-shadow: 0 1px 2px rgb(23 38 60 / 10%); }
@media(max-width:600px) {
  .scadenze-comandi .vista-scelta,.scadenze-azioni { width: 100%; }
  .scadenze-comandi .vista-scelta a { flex: 1; }
  .scadenze-azioni > * { flex: 1 1 180px; }
  .scadenze-azioni form .btn-linea { width: 100%; }
  .scadenze-inserimento { scroll-margin-top: 80px; }
}
.calendario { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--ui-raggio); padding: 20px 24px; margin-bottom: 24px; }
.calendario-testa { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.calendario-testa h2 { margin: 0 auto 0 4px; font-size: 20px; }
.calendario-testa .btn-piccolo { min-width: 44px; padding: 0; font-size: 22px; line-height: 1; }
.calendario-griglia { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.cal-intestazione { font-size: 12px; font-weight: 700; color: var(--grigio); text-transform: uppercase; letter-spacing: .06em; padding: 4px 8px; }
.cal-giorno { min-height: 108px; border: 1px solid var(--linea); border-radius: 8px; padding: 6px; background: var(--bianco); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-giorno.fuori { background: var(--carta); color: var(--grigio); }
.cal-giorno.fuori .cal-numero { opacity: .5; }
.cal-giorno.oggi { border-color: var(--ui-blu); box-shadow: inset 0 0 0 1px var(--ui-blu); }
.cal-numero { font-size: 13px; font-weight: 650; padding: 2px 4px; }
.cal-giorno.oggi .cal-numero { color: var(--ui-blu); }
.cal-voce { display: block; font-size: 12px; line-height: 1.3; padding: 4px 6px; border-radius: 6px; text-decoration: none; color: var(--inchiostro); background: var(--ui-blu-tenue); border-left: 3px solid var(--ui-blu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cal-voce b { font-weight: 650; }
.cal-voce:hover { filter: brightness(.96); }
.cal-ritardo, .cal-oggi { background: var(--rosso-chiaro); border-left-color: var(--rosso); }
.cal-vicina { background: var(--giallo-chiaro); border-left-color: var(--giallo); }
.cal-lontana { background: var(--ui-blu-tenue); border-left-color: var(--ui-blu); }
.cal-verifica { background: var(--carta); border-left: 3px dashed var(--grigio); color: var(--grigio); }
.cal-studio { border-left-style: double; border-left-width: 5px; }
.avviso-archiviato { background: var(--carta); border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; }
.avviso-posta-cliente { color: #78530b; font-weight: 600; }
.avviso-posta-cliente-scheda {
  background: var(--giallo-chiaro, #fdf3e0); border: 1px solid #e8d5a8; border-radius: 10px;
  padding: 12px 14px; margin: 0 0 14px; color: #674508;
}
.avviso-posta-cliente-scheda b { display: block; font-size: 15px; }
.avviso-posta-cliente-scheda p { margin: 4px 0 0; font-size: 14px; }
.cal-studio b::before { content: "Studio · "; font-weight: 500; color: var(--grigio); }
.scelta-clienti { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; }
.scelta-clienti legend { font-weight: 600; padding: 0 4px; }
.scelta-clienti .elenco-spunte { max-height: 220px; overflow-y: auto; display: grid; gap: 4px; padding-top: 6px; }
.scelta-clienti .spunta-scelta { flex-direction: row; align-items: center; gap: 8px; margin: 0; min-height: 36px; }
.scelta-clienti .spunta-tutti { border-bottom: 1px solid var(--linea); padding-bottom: 6px; }
.calendario-legenda { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; color: var(--grigio); }
.calendario-legenda .cal-voce { display: inline-block; white-space: normal; }

/* Avvisi importanti restano evidenti senza occupare il posto del titolo. */
.avviso-casella {
  background: var(--giallo-chiaro); border: 1px solid #dfc486; border-left: 4px solid #ad7916;
  padding: 18px 20px; border-radius: 10px; margin-bottom: 28px; gap: 20px;
}
.avviso-casella b { font-size: 15px; color: #674508; }
.avviso-casella p { font-size: 14px; margin-top: 4px; color: #674508; }
.avviso-casella .btn-pieno { background: #78530b; border-color: #78530b; flex-shrink: 0; }
.avviso-casella .btn-pieno:hover { background: #593d08; }
.avviso-demo { background: var(--ui-blu-tenue); border: 1px solid #c7d7f5; padding: 14px 18px; border-radius: 10px; font-size: 14px; margin-bottom: 28px; gap: 16px; }
.avviso-demo .scorciatoie a.btn-demo-attiva { padding: 10px 14px; font-size: 13px; min-height: 44px; }
.azioni-studio .btn-piccolo { min-height: 44px; }
.messaggio { font-size: 15px; padding: 16px 20px; }
.barra-stato { font-size: 14px; border-radius: 10px; }
.bolla-aiuto { background: var(--inchiostro); font-size: 13px; padding: 12px 18px; min-height: 44px; border-radius: 10px; box-shadow: 0 2px 8px rgb(23 38 60 / 10%); }
.pannello-aiuto { border-radius: 14px; }

/* Stessa identità nelle pagine pubbliche e negli accessi. */
.testata-pubblica { background: #fff; backdrop-filter: none; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.testata-pubblica .logo { font-size: 21px; }
.menu-pubblico { gap: 20px; }
.menu-pubblico a { font-size: 14px; }
.menu-pubblico a:hover { border-bottom-color: var(--ui-blu); }
.testata-pubblica .btn-testata { min-height: 44px; }
.menu-pubblico .prova-nel-menu { display:none; }
.pagina-pubblica :is(section,details)[id] { scroll-margin-top:110px; }
.pagina-pubblica .persona h3,.pagina-pubblica .scaglione-cifra,.prezzo-grande { font-family:var(--ui-font); }
/* Prezzi: nome, dimensione e importo hanno una posizione stabile, senza badge sul testo. */
.prezzo-sezione .cartellino { display:block; width:100%; max-width:1040px; padding:32px; }
.prezzo-sezione .scaglioni { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:28px 0 20px; }
.prezzo-sezione .scaglione { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; flex-wrap:nowrap; gap:0; padding:24px; margin:0; min-width:0; border-color:var(--linea); }
.scaglione-chi { display:flex; flex-direction:column; gap:6px; }
.prezzo-sezione .scaglione-chi b { font-size:18px; line-height:1.35; }
.prezzo-sezione .scaglione-cifra { font-size:32px; line-height:1.2; letter-spacing:-.03em; margin:24px 0 8px; white-space:normal; }
.scaglione-cifra>span { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; }
.scaglione-cifra .prezzo-periodo { font-size:14px; font-weight:500; letter-spacing:0; color:var(--grigio); white-space:nowrap; }
.prezzo-sezione .scaglione-nota { flex-basis:auto; font-size:13px; line-height:1.5; }
.prezzo-sezione .prezzo-piccolo { max-width:64ch; margin:0 auto 10px; }
.prezzo-invito { font-size:14px; line-height:1.6; color:var(--grigio); max-width:70ch; text-align:center; margin:0 auto; }
.prezzo-sezione .prezzo-nota { text-align:left; font-size:14px; line-height:1.65; max-width:76ch; margin:0 auto 24px; }
.prezzo-sezione .prezzo-elenco { max-width:76ch; margin:0 auto 28px; }
.prezzo-sezione .btn-cartellino { display:flex; justify-content:center; width:100%; max-width:460px; margin:0 auto; }
.prezzo-sezione .prezzo-garanzia { max-width:76ch; margin:16px auto 0; }
.prezzo-sezione .piano-scelta { min-height:44px; }
.prezzo-sezione .selettore-piano { max-width:100%; }
.avvio-documenti { max-width:1000px; padding:18px 22px; background:var(--ui-blu-tenue); border-radius:var(--ui-raggio); margin:18px auto 0; }
.tre-passi .avvio-documenti b { display:inline; font-size:inherit; margin:0; }
.avvio-compatibilita { max-width:1000px; color:var(--grigio); font-size:14px; margin:14px auto 0; }
.aiuto-cambia { min-height:44px; }
@media(max-width:820px) {
  .prezzo-sezione .scaglioni { grid-template-columns:1fr; }
  .prezzo-sezione .scaglione { padding:22px; }
}
@media(max-width:600px) {
  .pagina-pubblica>.testata-pubblica { gap:12px; padding:12px 16px; }
  .testata-pubblica .logo { font-size:18px; white-space:nowrap; }
  .testata-pubblica .btn-testata { display:none; }
  .testata-pubblica .apri-menu { flex:0 0 44px; padding:8px; }
  .menu-pubblico .prova-nel-menu { display:block; color:var(--ui-blu); }
  .pagina-pubblica :is(section,details)[id] { scroll-margin-top:90px; }
  .prezzo-sezione .cartellino { padding:22px 16px; }
  .prezzo-sezione .piano-scelta { padding:10px 12px; }
  .prezzo-sezione .piano-badge { font-size:11px; padding:3px 5px; }
  .prezzo-sezione .scaglione-cifra { font-size:30px; margin-top:18px; }
}
.pagina-pubblica h1 { font-family: var(--ui-font); }
.pagina-pubblica h2, .home h2, .faq h2 { font-family: var(--ui-font); letter-spacing: -.025em; }
.riquadro { border-radius: 16px; padding: 32px; box-shadow: 0 8px 40px rgb(23 38 60 / 5%); }
.riquadro h1 { font-size: 28px; }
.riquadro .claim { font-size: 16px; }
.piede { background: var(--bianco); }
.pagina-pubblica main > section { margin-bottom: 64px; }
.pagina-pubblica .apertura-larga .btn-pieno.grande, .btn-cartellino.btn-pieno { background: var(--ui-blu); }
.pagina-pubblica .apertura-larga .btn-pieno.grande:hover, .btn-cartellino.btn-pieno:hover { background: var(--ui-blu-scuro); box-shadow: none; }
.approfondimento-pubblico { padding: 20px 24px; margin: 0 0 64px; border: 1px solid var(--linea); border-radius: 12px; background: var(--bianco); }
.approfondimento-pubblico > summary { cursor: pointer; font-size: 16px; font-weight: 600; min-height: 44px; padding: 10px 0; }
.approfondimento-pubblico[open] > summary { margin-bottom: 24px; }
.approfondimento-pubblico .calcolo-scatola { box-shadow: none; }

@media (max-width: 1100px) and (min-width: 761px) {
  .app .barra-studio { width: 190px; flex-basis: 190px; padding-right: 12px; padding-left: 12px; }
  .barra-studio .logo { font-size: 16px; }
  .app > main { padding: 28px 24px 100px; }
  .strumenti-controllo { grid-template-columns: 1fr; gap: 14px; }
  .collegamenti-impostazioni { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .strumento-controllo { flex-direction: row; }
  .strumento-icona { flex-shrink: 0; }
}
@media (max-width: 760px) {
  :root { --barra-bassa: 72px; }
  h1 { font-size: 27px; }
  h2 { font-size: 20px; }
  .app > main { width: 100%; padding: 22px 16px 28px; }
  .testata-app-mobile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: white; border-bottom: 1px solid var(--linea); }
  .testata-app-mobile .logo { font-size: 16px; }
  .accesso-impostazioni { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0 8px 8px; color: var(--grigio); font-size: 13px; text-decoration: none; }
  .app .barra-studio { width: 100%; height: calc(var(--barra-bassa) + env(safe-area-inset-bottom,0px)); padding: 6px 8px env(safe-area-inset-bottom,0px); border-right: 0; border-top: 1px solid var(--linea); z-index: 50; }
  .barra-studio > .logo, .barra-studio .menu-servizio { display: none; }
  .barra-studio .menu { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; overflow: visible; width: 100%; flex: 1; }
  .barra-studio .menu-gruppo { display: contents; }
  .barra-studio .menu-figli { display: none !important; }
  .barra-studio .menu > .voce,
  .barra-studio .menu-gruppo > .voce {
    flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 56px; width: 100%;
    padding: 6px 2px; font-size: 12px; border-radius: 8px; line-height: 1.25; text-align: center;
  }
  .barra-studio .menu .voce span { text-align: center; overflow-wrap: anywhere; flex: 0 1 auto; }
  .barra-studio .voce svg { width: 22px; height: 22px; flex-basis: 22px; }
  .barra-studio .pallino { position: absolute; top: 5px; right: 10px; }
  .barra-studio .voce .numerello { position: absolute; top: 2px; right: calc(50% - 22px); margin: 0; height: 17px; min-width: 17px; font-size: 10px; }
  .posta .azioni, .conto-riga .azioni { flex-direction: column; align-items: stretch; gap: 16px; }
  .posta .azioni > a, .posta .azioni .altre-azioni, .posta .azioni > form { width: 100%; }
  .posta .azioni .btn-pieno, .posta .azioni .btn-linea { width: 100%; justify-content: center; min-height: 44px; }
  .posta .altre-azioni .btn-linea { width: 100%; margin-top: 12px; min-height: 44px; }
  .azioni { flex-direction: column; align-items: stretch; gap: 16px; }
  .azioni > :is(a, form, .altre-azioni) { width: 100%; }
  .azioni :is(.btn-pieno, .btn-linea) { width: 100%; justify-content: center; min-height: 44px; }
  .altre-azioni > summary { width: 100%; justify-content: flex-start; }
  .scadenze-azioni { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .scadenze-azioni .altre-azioni .btn-linea, .scadenze-azioni .altre-azioni > a { width: 100%; }
  .navigazione-contesto { gap: 2px; margin-bottom: 24px; padding-bottom: 10px; }
  .navigazione-contesto a { padding: 10px 11px; font-size: 13px; }
  .sottotitolo { margin-bottom: 24px; }
  .pannello, .posta, .norma { padding: 20px; margin-bottom: 20px; }
  .cosa { padding: 18px; }
  .stato-vuoto { padding: 24px 20px; }
  .strumenti-controllo { grid-template-columns: 1fr; gap: 14px; }
  .strumenti-controllo.confronti-doppi { grid-template-columns: 1fr; }
  .estratto-conto { flex-direction: column; align-items: stretch; }
  .estratto-conto .estratto-azioni { flex-basis: auto; width: 100%; }
  .collegamenti-impostazioni { grid-template-columns: 1fr; gap: 12px; }
  .strumento-controllo { flex-direction: row; padding: 20px; gap: 16px; }
  .strumento-icona { flex: 0 0 36px; width: 36px; height: 36px; }
  .strumento-controllo p { margin-bottom: 16px; }
  .calendario { padding: 12px; }
  .calendario-griglia { gap: 2px; }
  .cal-giorno { min-height: 64px; padding: 3px; border-radius: 6px; }
  .cal-intestazione { padding: 2px; font-size: 10px; text-align: center; }
  .cal-numero { font-size: 12px; text-align: center; }
  .cal-voce { font-size: 10px; padding: 2px 3px; }
  .cal-voce b { display: block; }
  .vista-scelta a { padding: 8px 14px; }
  .avviso-casella { padding: 16px; gap: 14px; margin-bottom: 24px; }
  .avviso-demo { padding: 10px 12px; margin-bottom: 20px; gap: 8px; font-size: 13px; }
  .avviso-demo .scorciatoie { gap: 8px; justify-content: space-between; }
  .avviso-demo .scorciatoie a.btn-demo-attiva { font-size: 12px; padding: 8px 10px; }
  .avviso-demo .scorciatoie button { min-height: 44px; font-size: 12px; }
  .scadenze-intro { gap: 12px; margin-bottom: 16px; }
  .scadenze-comandi { gap: 12px; margin-bottom: 16px; }
  .scadenze-azioni { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .scadenze-azioni > a, .scadenze-azioni .altre-azioni { width: 100%; }
  .scadenze-azioni > a { min-width: 0; padding: 12px; font-size: 14px; min-height: 44px; }
  .scadenze-azioni .altre-azioni .btn-linea,
  .scadenze-azioni .altre-azioni > a { width: 100%; min-height: 44px; }
  .conto-riepilogo { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 16px 0; }
  .conto-cifra { padding: 12px 8px; flex-direction: column; align-items: flex-start; gap: 6px; border-radius: 10px; }
  .conto-cifra-numero { font-size: 26px; }
  .conto-cifra-testo { font-size: 12px; }
  .conto-cifra-nota { font-size: 11px; }
  .form > button, .form > .btn-pieno, .form > .btn-linea { align-self: stretch; }
  .barra-ricerca { gap: 12px; }
  .barra-ricerca > label { flex-basis: 100%; max-width: none; }
  .barra-ricerca > button { flex-grow: 1; }
  .app:not(.app-admin) > main { padding-bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom,0px) + 24px); }
  .app ~ .bolla-aiuto { bottom: calc(var(--barra-bassa) + 12px + env(safe-area-inset-bottom,0px)); right: 16px; }
  .app ~ .pannello-aiuto { bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom,0px) + 12px); max-height: calc(100dvh - var(--barra-bassa) - 40px); overflow: auto; right: 16px; width: calc(100vw - 32px); }
  .riquadro { padding: 24px; }
}
@media (max-width: 380px) {
  :root { --barra-bassa: 72px; }
  .app .barra-studio { height: calc(var(--barra-bassa) + env(safe-area-inset-bottom,0px)); padding: 6px 6px calc(4px + env(safe-area-inset-bottom,0px)); }
  .barra-studio .menu { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 2px; }
  .barra-studio .menu .voce { min-height: 52px; padding: 4px 1px; font-size: 11px; gap: 2px; }
  .app:not(.app-admin) > main { padding-bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom,0px) + 24px); }
  .app ~ .pannello-aiuto { bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom,0px) + 12px); max-height: calc(100dvh - var(--barra-bassa) - 40px); }
  .navigazione-contesto a { padding-right: 9px; padding-left: 9px; }
  .testata-app-mobile .logo { font-size: 15px; }
  .accesso-impostazioni { font-size: 12px; }
}
/* Telefono: le 8 voci del menu in basso stanno su una sola riga che scorre di lato.
   Ogni voce è larga poco meno di un quinto: la sesta si vede a metà e fa capire che
   la barra continua (25/09/2026: Clienti, Archivio e Colleghi finivano fuori schermo). */
@media (max-width: 760px) {
  .barra-studio .menu { display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .barra-studio .menu::-webkit-scrollbar { display: none; }
  .barra-studio .menu > .voce,
  .barra-studio .menu-gruppo > .voce { flex: 0 0 auto; width: auto; min-width: calc((100% - 10px) / 5.5); padding-left: 4px; padding-right: 4px;
    scroll-snap-align: start; position: relative; }
  .barra-studio .menu .voce span:not(.numerello):not(.solo-lettori) { white-space: nowrap; overflow-wrap: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .strumento-controllo, .btn-pieno, .btn-linea { transition: none; }
}
/* Feedback: prima la sintesi, poi i dettagli. Nessun cambiamento ai dati originali. */
.feedback-page { max-width: 960px; }
.feedback-heading { margin-bottom: var(--ui-spazio-5); }
.feedback-heading > p { color: var(--grigio); margin: 0; }
.feedback-heading .feedback-eyebrow { color: var(--ui-blu); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.feedback-search { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-spazio-3); margin: 0 0 var(--ui-spazio-6); max-width: 640px; }
.feedback-search input { width: auto; min-width: 160px; flex: 1 1 220px; background: var(--bianco); }
.feedback-section-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--grigio); margin: 0 0 14px; }
.feedback-section-title > span, .feedback-collection > summary > span { font-size: 12px; font-weight: 600; background: var(--bianco); border: 1px solid var(--linea); border-radius: 20px; padding: 2px 8px; }
.feedback-list { display: grid; gap: var(--ui-spazio-4); }
.feedback-card { border: 1px solid var(--linea); border-radius: var(--ui-raggio); background: var(--bianco); box-shadow: var(--ombra-appoggio); min-width: 0; }
.feedback-card > summary { display: block; padding: 22px 24px 18px; cursor: pointer; list-style: none; border-radius: var(--ui-raggio); }
.feedback-card > summary::-webkit-details-marker, .feedback-note > summary::-webkit-details-marker { display: none; }
.feedback-card > summary:hover { background: var(--carta); }
.feedback-card-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; color: var(--grigio); font-size: 12px; line-height: 1.5; font-weight: 400; overflow-wrap: anywhere; }
.feedback-author { color: var(--inchiostro); font-size: 13px; font-weight: 600; }
.feedback-card-title { display: block; margin-top: 9px; font-size: 19px; font-weight: 650; line-height: 1.35; letter-spacing: -.015em; overflow-wrap: anywhere; }
.feedback-card-excerpt { display: block; font-size: 14px; line-height: 1.55; font-weight: 400; color: var(--grigio); margin-top: 7px; max-width: 80ch; }
.feedback-card-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 17px; }
.feedback-badge { display: inline-flex; align-items: center; font-size: 12px; line-height: 1.4; font-weight: 550; padding: 5px 9px; border-radius: 6px; color: var(--grigio); background: var(--carta); max-width: 100%; }
.feedback-badge-parziale { color: var(--giallo); background: var(--giallo-chiaro); }
.feedback-badge-mancante { color: var(--ui-blu-scuro); background: var(--ui-blu-tenue); }
.feedback-badge-presente { color: var(--verde); background: var(--verde-chiaro); }
.feedback-disclosure { display: inline-flex; gap: 8px; align-items: center; color: var(--ui-blu); font-size: 13px; font-weight: 550; }
.feedback-disclosure svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.feedback-close-label { display: none; }
.feedback-card[open] > summary .feedback-open-label { display: none; }
.feedback-card[open] > summary .feedback-close-label { display: inline; }
.feedback-card[open] > summary svg { transform: rotate(180deg); }
.feedback-card-body { padding: 24px; border-top: 1px solid var(--linea); font-size: 14px; font-weight: 400; line-height: 1.65; }
.feedback-card-body h3 { font-size: 14px; font-weight: 650; margin: 0 0 8px; letter-spacing: 0; }
.feedback-card-body p { margin: 0; max-width: 80ch; }
.feedback-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.feedback-comparison > section { min-width: 0; border-left: 2px solid var(--linea); padding-left: 16px; }
.feedback-comparison > section:first-child { border-color: var(--verde); }
.feedback-comparison ul { padding-left: 17px; margin: 0; }
.feedback-comparison li { margin-bottom: 8px; padding-left: 3px; }
.feedback-page .feedback-caveat { margin-top: 20px; color: var(--grigio); font-size: 12px; }
.feedback-source { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); }
.feedback-source > summary { min-height: 36px; cursor: pointer; color: var(--grigio); font-size: 13px; font-weight: 500; }
.feedback-source > div { margin-top: 12px; }
.feedback-source p, .feedback-note-body p { font-size: 14px; font-weight: 400; overflow-wrap: anywhere; white-space: pre-wrap; margin: 0 0 16px; }
.feedback-collection { border-top: 1px solid var(--linea); padding-top: 20px; margin-top: 28px; }
.feedback-collection > summary { font-size: 15px; font-weight: 600; cursor: pointer; min-height: 44px; color: var(--inchiostro); }
.feedback-collection > summary > span { margin-left: 8px; }
.feedback-collection-note { color: var(--grigio); font-size: 13px; margin: 4px 0 18px; }
.feedback-note { background: var(--bianco); border: 1px solid var(--linea); border-radius: 9px; margin-bottom: 10px; }
.feedback-note > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; cursor: pointer; list-style: none; min-height: 44px; }
.feedback-note > summary > span:first-child { min-width: 0; }
.feedback-note-title { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.feedback-note-body { border-top: 1px solid var(--linea); padding: 18px; }
.feedback-replica { margin-top: 20px; display: grid; gap: 10px; max-width: 52ch; }
.feedback-replica textarea { min-height: 84px; }
.feedback-empty { padding: 32px 0; }
.feedback-empty p { color: var(--grigio); }
.feedback-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
  .feedback-heading h1 { font-size: 27px; }
  .feedback-card > summary { padding: 18px; }
  .feedback-card-title { font-size: 17px; }
  .feedback-card-body { padding: 18px; }
  .feedback-comparison { grid-template-columns: 1fr; gap: 18px; }
  .feedback-card-meta { gap: 4px 10px; }
  .feedback-card-meta > span:last-child { flex-basis: 100%; }
  .feedback-note > summary { flex-direction: column; gap: 10px; }
}

/* Conversazione precedente accanto a un'email: le risposte dello studio si distinguono a colpo d'occhio. */
.conversazione .voce-conversazione { border-left: 3px solid var(--linea); padding: 8px 14px; margin: 10px 0; }
.conversazione .voce-conversazione.inviata { border-left-color: var(--ui-blu); background: var(--ui-blu-tenue); border-radius: 0 8px 8px 0; }
.conversazione .voce-conversazione pre { font: inherit; font-size: 14px; line-height: 1.5; }

/* Amministratore dentro l'account di uno studio: si deve vedere sempre. */
.avviso-amministratore { background: #fff1ef; border-color: #f0c8c4; }

/* Riscrivi con l'AI: in alto, prima del testo, dove si vede (Davide, 18/09/2026). */
.riscrivi-ai { margin: 6px 0 14px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 10px; background: var(--carta); }
.riscrivi-ai-riga { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.riscrivi-ai-riga input { flex: 1 1 320px; min-width: 200px; }
.riscrivi-ai .piccolo { margin: 8px 0 0; }
.riscrivi-esito.ok { color: var(--verde, #0b6b3a); }
.riscrivi-esito.errore { color: var(--rosso, #9b1c1c); }
.tag.risposto { color: var(--verde); }
.posta-gruppo > summary .conteggio { display: inline-block; min-width: 22px; padding: 1px 8px; margin-left: 6px; border-radius: 5px; background: var(--ui-blu-tenue); color: var(--ui-blu-scuro); font-size: 13px; font-weight: 600; text-align: center; }
.posta-gruppo > summary { cursor: pointer; }
.posta.gia-risposta .tag { color: var(--verde); background: var(--verde-chiaro); }
.quando-ricevuta { font-weight: 600; color: var(--ui-blu-scuro); }
.quando-ricevuta.vecchia { color: var(--giallo); }
.posta .risposta-studio { flex-basis: 100%; margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--verde); background: var(--verde-chiaro); border-radius: 0 8px 8px 0; font-size: 14px; }
.elenco-cartelle-locali { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.elenco-cartelle-locali li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 44px; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 10px; background: var(--bianco); }
.elenco-cartelle-locali .nome-cartella { min-width: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; }
.elenco-cartelle-locali .link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--ui-blu); text-decoration: underline; }
.elenco-cartelle-locali .azioni-cartella { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.elenco-cartelle-locali .azioni-cartella .link { margin-left: 6px; }
.azioni-cartelle-locali { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.stato-cartelle-locali { display: flex; align-items: center; gap: 10px; min-height: 24px; margin: 12px 0 0; font-size: 14px; color: var(--grigio); }
.stato-cartelle-locali.in-corso { color: var(--inchiostro); }
.rotella { width: 18px; height: 18px; border: 2px solid var(--linea); border-top-color: var(--ui-blu); border-radius: 50%; flex: none; animation: rotella-gira .7s linear infinite; }
@keyframes rotella-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rotella { animation: none; border-top-color: var(--linea); opacity: .7; } }

/* Attesa del controllo posta: barra che scorre e passi in parole (18/09/2026) */
.attesa-posta{margin-top:12px;max-width:520px}
.barra-attesa{position:relative;height:6px;border-radius:4px;background:#e6ebf2;overflow:hidden}
.barra-attesa span{position:absolute;left:-35%;top:0;bottom:0;width:35%;border-radius:4px;background:var(--ui-blu);animation:barra-attesa-scorre 1.6s ease-in-out infinite}
@keyframes barra-attesa-scorre{0%{left:-35%}100%{left:100%}}
@media (prefers-reduced-motion: reduce) {
  .barra-attesa span { animation: none; left: 0; width: 55%; }
}

/* Clienti: una riga, un'azione chiara; niente ombre che «saltano». */
.app-clienti .riga-cliente { flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; }
.app .cosa:hover, .app .pannello:hover { box-shadow: none; }
@media (max-width: 760px) {
  .app-clienti .riga-cliente { flex-direction: column; align-items: stretch; }
  .app-clienti .riga-cliente .btn-pieno,
  .app-clienti .riga-cliente .btn-linea { width: 100%; text-align: center; }
}
.attesa-posta p{margin:6px 0 0}

/* Scheda cliente: lo storico è la coda della stessa scheda, non un secondo riquadro. */
.app-clienti .storico { margin-top: 2px; }
.app-clienti .riga-cliente + .storico {
  margin-top: 2px; padding-top: 16px; border-top: 1px solid var(--linea);
}
.app-clienti .pannello > .riga-cliente:has(+ .storico) { border-bottom: 0; padding-bottom: 2px; }
.app-clienti .storico-testa {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  margin: 0 0 4px; color: var(--grigio);
}
.app-clienti .storico-titolo {
  font-size: 12px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase;
}
.app-clienti .storico-bilancio { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-clienti .storico-bilancio::before { content: "·"; margin-right: 10px; }
.app-clienti .storico-elenco { list-style: none; margin: 0; padding: 0; }
.app-clienti .storico-riga {
  display: grid; grid-template-columns: 10.6rem 8.4rem minmax(0, 1fr);
  column-gap: 16px; align-items: baseline; min-height: 44px; padding: 11px 0 10px;
  border-bottom: 1px solid var(--linea); font-size: 15px; line-height: 1.35;
}
.app-clienti .storico-riga:last-child { border-bottom: 0; padding-bottom: 0; }
.app-clienti .storico-mese { font-weight: 650; color: var(--inchiostro); white-space: nowrap; }
.app-clienti .storico-esito {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 650; white-space: nowrap;
}
.app-clienti .storico-esito::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px;
}
.app-clienti .storico-esito.fatto { color: var(--verde); }
.app-clienti .storico-esito.aperto { color: var(--giallo); }
.app-clienti .storico-cosa {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--grigio); font-variant-numeric: tabular-nums;
}
.app-clienti .storico-elenco.con-riapri .storico-riga {
  grid-template-columns: 10.6rem 8.4rem minmax(0, 1fr) 4.6rem;
}
.app-clienti .storico-riapri { justify-self: end; align-self: center; }
form.riapri { margin: 0; display: inline-flex; align-items: center; align-self: center; width: auto; flex: 0 0 auto; }
@media (max-width: 640px) {
  .cosa > form.riapri { align-self: flex-start; margin-top: -6px; }
}
form.riapri .btn-testo { min-height: 0; padding: 4px 0; font-size: 14.5px; font-weight: 650; width: auto; }
.azioni-pratica form.riapri { align-items: flex-start; }
.riga-cliente form.riapri, .cosa form.riapri { width: auto; }
.azioni-ricevuto { margin-top: 0; align-items: center; gap: 12px 16px; }
@media (max-width: 760px) {
  .app-clienti .storico-riga { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; column-gap: 12px; }
  .app-clienti .storico-elenco.con-riapri .storico-riga { grid-template-columns: minmax(0, 1fr) auto auto; }
  .app-clienti .storico-mese { white-space: normal; }
  .app-clienti .storico-cosa { grid-column: 1 / -1; white-space: normal; }
}

/* iPhone: la legend di un fieldset sta sopra i controlli e ruba il secondo tocco. */
fieldset { min-inline-size: 0; }
fieldset > legend { float: left; width: 100%; }
fieldset > legend + * { clear: both; }

/* Dati e contatti principali nella scheda cliente.
   Il titolo sta in uno span: con display:flex sul summary Chrome
   spezza le parole e «Email aggiuntive» diventa «Emailaggiuntive». */
.titolo-box-cliente { display: flex; align-items: center; gap: 9px; }
.titolo-box-cliente > span { min-width: 0; }
.icona-box-cliente { width: 22px; height: 22px; flex: none; color: var(--ui-blu); }
.titolo-box-cliente .icona-box-cliente { margin: 0; }
.pallino-email-mancante { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--rosso); vertical-align: middle; margin: 0 6px 2px 0; }
.segnale-email-mancante { display: inline-block; color: var(--rosso); font-size: 14px; font-weight: 600; margin-left: 12px; }
.etichetta-beta {
  display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: 8px;
  padding: 2px 8px; border-radius: 5px; border: 1px solid #ead7a4;
  background: var(--giallo-chiaro); color: var(--giallo);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1.4; vertical-align: middle;
}
/* La label globale è in colonna: una spunta finiva centrata sopra il testo. */
label:not(.interruttore):has(> input[type=checkbox]),
label:not(.interruttore):has(> input[type=radio]) {
  flex-direction: row; align-items: center; gap: 10px;
}
.azione-con-beta { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; width: auto; }
.scadenze-azioni > .azione-con-beta { flex: 0 0 auto; width: auto; }
@media (max-width: 700px) {
  .scadenze-azioni > .azione-con-beta { flex: 1 1 auto; width: 100%; }
  .azione-con-beta > a.btn-pieno { flex: 1 1 auto; }
}
#form-estratto-ufficiale [data-periodo] { display: none; }
#form-estratto-ufficiale[data-scelta="mese"] [data-periodo~="mese"],
#form-estratto-ufficiale[data-scelta="trimestre"] [data-periodo~="trimestre"],
#form-estratto-ufficiale[data-scelta="anno"] [data-periodo~="anno"] { display: flex; }

/* Campi di ricerca: stessa forma in tutte le pagine, con la lente a sinistra (25/09/2026). */
input.cerca[type=search] { min-height: 48px; border-radius: 12px; padding-left: 44px;
  background: var(--bianco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526176' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center/20px no-repeat; }