/* Testate delle pagine interne. La classe è applicata solo all'h1 principale. */
:where(.app #contenuto) {
  --testata-navy: #173b75;
  --testata-blu: #2254c5;
  --testata-chiaro: #edf3ff;
}

/* Nei contenitori già approvati, titolo e sottotitolo restano una sola testata. */
.app #contenuto .elenco-semplice .clienti-testata,
.app #contenuto .scheda-rivista .scheda-testa,
.app #contenuto .pagina-attivita .attivita-intro,
.app #contenuto .scadenze-testa,
.app #contenuto .gestionale-contabilita .gc-testa,
.app #contenuto .pagina-esito .esito-testa {
  box-sizing: border-box;
  margin-bottom: 18px;
  padding: 21px 26px;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(90deg, var(--testata-navy), var(--testata-blu));
  color: #fff;
  box-shadow: 0 8px 22px rgb(23 59 117 / 12%);
}
.app #contenuto :is(.clienti-testata, .scheda-testa, .attivita-intro, .scadenze-testa, .gc-testa, .esito-testa) h1.testata-app {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-size: clamp(27px, 2.7vw, 34px);
  line-height: 1.16;
  letter-spacing: -.02em;
}
.app #contenuto .elenco-semplice .clienti-numero,
.app #contenuto .scheda-rivista .scheda-testa > :is(.sottotitolo, .piccolo),
.app #contenuto .pagina-attivita .attivita-intro :is(.sottotitolo, .piccolo, .attivita-totale),
.app #contenuto .scadenze-testa .scadenze-conto { color: var(--testata-chiaro); }
.app #contenuto .gestionale-contabilita .gc-testa .sottotitolo,
.app #contenuto .pagina-esito .esito-testa :is(.sottotitolo, .esito-caricato) { color: var(--testata-chiaro); }
.app #contenuto .gestionale-contabilita .gc-testa .sottotitolo { margin: 7px 0 0; }
.app #contenuto .pagina-esito .esito-testa .torna { margin: 0 0 8px; }
.app #contenuto .pagina-esito .esito-testa .torna a.link { color: #fff; }
.app #contenuto .scheda-rivista .scheda-testa > .sottotitolo { margin-top: 7px; }
.app #contenuto .scheda-rivista .scheda-testa .avviso-invii-testa {
  width: fit-content;
  max-width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fff;
  color: var(--rosso-scuro, #a12a1f);
}
.app #contenuto .pagina-attivita .attivita-intro .sottotitolo a.link,
.app #contenuto .scadenze-testa .scadenze-contratti { color: #fff; }

/* Azioni leggibili nel blu, di dimensione proporzionata anche su mobile. */
.app #contenuto .elenco-semplice .clienti-testata > .btn-pieno,
.app #contenuto .scadenze-testa .btn-pieno,
.app #contenuto .scadenze-testa .btn-linea,
.app #contenuto .scheda-rivista .scheda-testa .btn-linea {
  width: auto;
  min-height: 44px;
  padding: 9px 16px;
  background: #fff;
  border: 1px solid rgb(255 255 255 / 80%);
  color: var(--testata-navy);
  box-shadow: none;
  font-weight: 650;
}
.app #contenuto .elenco-semplice .clienti-testata > .btn-pieno:hover,
.app #contenuto .scadenze-testa :is(.btn-pieno, .btn-linea):hover,
.app #contenuto .scheda-rivista .scheda-testa .btn-linea:hover { background: var(--testata-chiaro); }
.app #contenuto .scadenze-testa .btn-linea {
  background: transparent;
  color: #fff;
  border-color: rgb(255 255 255 / 65%);
}
.app #contenuto .scadenze-testa .btn-linea:hover { background: rgb(255 255 255 / 12%); }
.app #contenuto .scheda-rivista .scheda-testa .avviso-invii-testa .btn-linea {
  color: var(--rosso-scuro, #a12a1f);
  border-color: var(--rosso, #c8281c);
}
.app #contenuto .scadenze-testa .vista-scelta { background: rgb(255 255 255 / 12%); border-color: rgb(255 255 255 / 40%); }
.app #contenuto .scadenze-testa .vista-scelta a { color: #fff; }
.app #contenuto .scadenze-testa .vista-scelta a[aria-current="page"] { background: #fff; color: var(--testata-navy); }

/* Le altre pagine hanno una barra sul solo titolo. Le testate WOW già approvate
   continuano a usare le proprie regole e non ricevono una seconda superficie. */
.app #contenuto h1.testata-app:not(:where(
  .clienti-testata h1, .scheda-testa h1, .attivita-intro h1, .scadenze-testa h1,
  .gc-testa h1, .esito-testa h1,
  :root:has(link[data-grafica-wow="lavoro"]) .confronta-testa h1,
  :root:has(link[data-grafica-wow="lavoro"]) .archivio-rivista > h1,
  :root:has(link[data-grafica-wow="lavoro"]) .estere-xml > h1,
  :root:has(link[data-grafica-wow="lavoro"]) .risultato-controllo > h1,
  :root:has(link[data-grafica-wow="lavoro"]) .spunta-pagina > .con-info h1,
  :root:has(link[data-grafica-wow="lavoro"]) #contenuto:has(#modulo-genera-f24) > .con-info h1,
  :root:has(link[data-grafica-wow="organizzazione"]) .normativa-rivista > h1,
  :root:has(link[data-grafica-wow="organizzazione"]) #contenuto:has(> h1#impostazioni-titolo):has(details[open]) > h1,
  :root:has(link[data-grafica-wow="organizzazione"]) #contenuto:has(> form[enctype="multipart/form-data"] .stile-cortesia) > h1,
  :root:has(link[data-grafica-wow="organizzazione"]) #contenuto:has(> form.form > section.regola) > h1,
  :root:has(link[data-grafica-wow="admin"]) .admin-panoramica > h1,
  :root:has(link[data-grafica-wow="clienti"]) .clienti-rivista .detail-top h1
)) {
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--inchiostro);
  box-shadow: none;
  font-size: clamp(24px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
/* Titolo semplice, senza fascia blu (Davide, 15/10/2026: «continua tutto» sul menu senza pulsantoni): il titolo dice
   dove sei, il lavoro sale in alto. Le testate a fascia di Scadenze, scheda del cliente, Attività, Gestionale ed esiti
   restano le loro. */
.app #contenuto h1.testata-app :is(.etichetta-beta, .etichetta-prossimo) { vertical-align: middle; }

/* Il risultato di Confronto usa il componente esistente, senza modificare i modelli protetti. */
.app #contenuto .spunta-esito > .con-info {
  box-sizing: border-box;
  margin: 0 0 17px;
  padding: 20px 25px;
  border-radius: 17px;
  background: linear-gradient(90deg, var(--testata-navy), var(--testata-blu));
  color: #fff;
  box-shadow: 0 8px 22px rgb(23 59 117 / 12%);
}
.app #contenuto .spunta-esito > .con-info h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(27px, 2.7vw, 34px);
  line-height: 1.16;
  overflow-wrap: anywhere;
}
.app #contenuto .spunta-esito > .con-info .info-i { color: #fff; border-color: rgb(255 255 255 / 55%); }

@media (max-width: 700px) {
  .app #contenuto .elenco-semplice .clienti-testata,
  .app #contenuto .scheda-rivista .scheda-testa,
  .app #contenuto .pagina-attivita .attivita-intro,
  .app #contenuto .scadenze-testa,
  .app #contenuto .gestionale-contabilita .gc-testa,
  .app #contenuto .pagina-esito .esito-testa {
    padding: 18px 19px;
    border-radius: 14px;
  }
  .app #contenuto .elenco-semplice .clienti-testata { flex-wrap: wrap; }
  .app #contenuto .elenco-semplice .clienti-testata > .btn-pieno { flex: 0 0 auto; }
  .app #contenuto .scadenze-testa { align-items: stretch; }
  .app #contenuto .scadenze-testa .scadenze-barra { flex-wrap: wrap; }
}

/* Controllo grafico del 12/10/2026 (Davide: «check grafico di tutto il tool»). */
/* Confronto: titolo e descrizione formano una sola testata blu, senza la riga bianca fra i due blocchi
   (la regola comune dei titoli con la (i) aggiungeva 10px sotto il titolo). */
.app > main .spunta-pagina > .con-info:has(> h1) { margin: 0; }
/* La (i) sulle testate blu: cerchio chiaro con la «i» bianca, uguale ovunque. Dal 15/10/2026 i titoli sono semplici,
   senza fascia blu: la (i) chiara resta solo sulle testate blu di Confronto. */
.app #contenuto :is(.spunta-pagina > .con-info, .spunta-esito > .con-info) { --info-sfondo: rgb(255 255 255 / 14%); }
.app #contenuto :is(.spunta-pagina > .con-info, .spunta-esito > .con-info) .info > button.info-i {
  background: var(--info-sfondo); border-color: rgb(255 255 255 / 65%); color: #fff;
}
.app #contenuto :is(.spunta-pagina > .con-info, .spunta-esito > .con-info) .info > button.info-i:hover,
.app #contenuto :is(.spunta-pagina > .con-info, .spunta-esito > .con-info) .info:focus-within > button.info-i {
  background: #fff; border-color: #fff; color: var(--testata-navy);
}
/* Firma e stile: «Facoltativo» staccato dal testo del riquadro che si apre. */
.app #contenuto details > summary > .stato { margin-left: 8px; color: var(--grigio); font-size: 13px; font-weight: 500; }
/* Cartelle fatture dei clienti: campi con il loro spazio, la conferma non si incolla al campo dopo. */
.app #contenuto #cartelle-clienti-auto > .pannello { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.app #contenuto #cartelle-clienti-auto > .pannello > label { width: 100%; margin: 0; }
.app #contenuto #cartelle-clienti-auto > .pannello > label:has(> input[type=checkbox]) { display: flex; align-items: center; gap: 10px; }
.app #contenuto #cartelle-clienti-auto > .pannello > .piccolo { margin: -6px 0 0; }
/* Collega la posta: il link «Collega un'altra casella» non si attacca al riquadro della casella. */
.app #contenuto .stato-collegato + p.piccolo { margin-top: 10px; }
/* Invio della circolare: la lettera usa la larghezza della pagina, non mezza colonna. */
.app #contenuto form#circolare.pannello { max-width: none; }

@media (max-width: 760px) {
  /* Titoli lunghi (circolari, pagine con nomi lunghi) senza cinque righe di testata. */
  .app #contenuto h1.testata-app { font-size: clamp(22px, 6.4vw, 26px); }
}

/* Menu a sinistra: le voci interne con il numerino restano su una riga («Circolari ai clienti 3» andava a capo). */
@media (min-width: 761px) {
  .barra-studio .menu-figli { margin-left: 14px; padding-left: 8px; }
  .barra-studio .voce-figlio { gap: 7px; padding: 8px 6px 8px 9px; }
  .barra-studio .voce-figlio > svg { flex: 0 0 18px; width: 18px; }
  .barra-studio .voce-figlio > span:not(.numerello) { white-space: nowrap; }
}