/* Spectre — foglio di stile condiviso.
 *
 * Fino al 18/09/2026 ogni pagina portava il proprio <style>: 130 righe in
 * index, 208 in settings, 407 nella scheda cliente. Da qui il difetto che
 * Lorenzo ha chiamato "caotica": non c'era un grigio, ce n'erano sette.
 *
 * I COLORI NON SONO INVENTATI: sono misurati dalle icone che Lorenzo ha
 * scelto per le sezioni (public/assets/home/*.png), contando i pixel. Il blu
 * dominante e' #006ACD, il navy delle figure e' #1F3D5F. Le icone stanno su
 * fondo bianco, quindi l'interfaccia e' chiara: su una barra scura
 * sembrerebbero adesivi appiccicati.
 *
 * Una prima versione era nera e senza icone. Sbagliata: il nero non piace, e
 * le icone servivano a riconoscere le sezioni a colpo d'occhio.
 */

:root {
  color-scheme: light;

  /* Il fondo e il foglio. */
  --pagina: #f4f6f9;
  --carta: #ffffff;

  /* Il testo, sui toni del navy delle icone invece che su un grigio neutro. */
  --forte: #1f3d5f;
  --testo: #3d4a5c;
  --tenue: #7a8899;

  /* L'accento, dal blu delle icone. */
  --blu: #006acd;
  --blu-scuro: #014884;
  --blu-velo: #eaf3fd;

  --riga: #dfe5ec;
  --riga-forte: #c3ccd8;

  /* Stati. Sobri: qui una notifica non deve mai sembrare festosa. */
  --allarme: #9d2235;
  --allarme-velo: #fdf0f2;
  --conferma: #12705a;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  /* Due famiglie, e ognuna dice una cosa diversa:
       macchina -> orari, etichette, comandi, numeri
       persona  -> i nomi dei defunti, composti come sui documenti
     E' la stessa distinzione che esiste gia' nei documenti stampati. */
  --macchina: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --persona: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;

  --raggio: 8px;
  --raggio-grande: 12px;
  --ombra: 0 1px 2px rgba(31, 61, 95, 0.06), 0 4px 16px rgba(31, 61, 95, 0.05);

  --barra-larga: 15rem;
  --barra-stretta: 4.5rem;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--pagina);
  color: var(--testo);
  font-family: var(--macchina);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  color: var(--forte);
  font-weight: 600;
  letter-spacing: -0.011em;
  margin: 0;
}
h1 {
  font-size: 1.4rem;
}
h2 {
  font-size: 1.0625rem;
}
h3 {
  font-size: 0.9375rem;
}

p {
  margin: 0;
  max-width: 68ch;
}

a {
  color: var(--blu);
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--blu);
  outline-offset: 2px;
  border-radius: 4px;
}

.tenue {
  color: var(--tenue);
}

/* ── L'impianto: barra laterale + contenuto ────────────────────────────── */

.impianto {
  display: grid;
  grid-template-columns: var(--barra-larga) 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.18s ease;
}
.impianto.stretta {
  grid-template-columns: var(--barra-stretta) 1fr;
}

/* ── Barra laterale ────────────────────────────────────────────────────── */

.laterale {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--carta);
  border-right: 1px solid var(--riga);
  overflow: hidden;
}

.laterale .testa {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s4) var(--s3);
  min-height: 60px;
}

/* Il marchio dell'impresa, non un'iniziale scritta a mano. Due versioni:
   il logo esteso quando c'e' spazio, il solo simbolo quando la barra e'
   stretta. Sono lo stesso file dei documenti, ridotto per lo schermo. */
.marchio {
  display: flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}
.marchio img {
  display: block;
  height: auto;
}
.marchio .esteso {
  width: 150px;
  max-width: 100%;
}
.marchio .simbolo {
  width: 30px;
  display: none;
}

.apri-chiudi {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid transparent;
  border-radius: var(--raggio);
  background: transparent;
  color: var(--tenue);
  cursor: pointer;
}
.apri-chiudi:hover {
  background: var(--blu-velo);
  color: var(--blu);
}
.apri-chiudi svg {
  width: 18px;
  height: 18px;
}

.laterale nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s2);
  overflow-y: auto;
  flex: 1;
}

.voce {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--raggio);
  color: var(--testo);
  text-decoration: none;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.voce:hover {
  background: var(--blu-velo);
  color: var(--forte);
}
.voce[aria-current='page'] {
  background: var(--blu-velo);
  color: var(--blu-scuro);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--blu);
}

/* Le icone delle sezioni: quelle che Lorenzo aveva scelto. Si usano le
   copie ridotte in assets/home/piccole/ - le originali pesano 4,3 MB in
   tutto, e la barra sta su ogni pagina. Si rigenerano con
   `npm run riduci:icone`. */
.voce .icona {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  /* "contain" e non "cover": le icone non hanno tutte la stessa forma
     (alcune sono 1536x1024) e ritagliarle taglierebbe via la figura.
     Contenute e centrate si vedono intere, ognuna con le sue proporzioni. */
  object-fit: contain;
  object-position: center;
}

.laterale .piede {
  border-top: 1px solid var(--riga);
  padding: var(--s3);
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 56px;
}
.laterale .piede .avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  object-fit: cover;
}
.chi-sei {
  font-size: 0.8125rem;
  color: var(--tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Barra stretta: restano le icone, spariscono le parole. */
.impianto.stretta .laterale .etichetta,
.impianto.stretta .marchio .esteso,
.impianto.stretta .chi-sei {
  display: none;
}
.impianto.stretta .marchio .simbolo {
  display: block;
}
.impianto.stretta .voce {
  justify-content: center;
  padding-left: var(--s2);
  padding-right: var(--s2);
}
.impianto.stretta .laterale .testa,
.impianto.stretta .laterale .piede {
  justify-content: center;
}

/* ── Contenuto ─────────────────────────────────────────────────────────── */

.contenuto {
  min-width: 0;
  padding: var(--s6) var(--s6) var(--s7);
}
.foglio {
  width: min(100%, 62rem);
  margin: 0 auto;
}

.sezione + .sezione {
  margin-top: var(--s7);
}

.titolo-sezione {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.titolo-sezione .conteggio {
  color: var(--tenue);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.titolo-sezione .a-destra {
  margin-left: auto;
}

/* Il pulsante "Menu" esiste solo dove la barra non si vede. Va legato anche
   a .comando: da solo pesa (0,1,0) come .comando, che sta piu' sotto nel
   foglio e quindi vinceva - e il pulsante restava li' anche sul computer,
   accanto a una barra gia' aperta. */
.comando.apri-laterale {
  display: none;
}

/* ── Il registro: le pratiche, una per riga ────────────────────────────
 * Non riquadri: righe. Un elenco di persone si legge come un elenco, e
 * l'occhio scorre la colonna degli orari senza fermarsi su ogni bordo. */

.registro {
  background: var(--carta);
  border: 1px solid var(--riga);
  border-radius: var(--raggio-grande);
  box-shadow: var(--ombra);
  overflow: hidden;
}

.riga-pratica {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  gap: 0 var(--s4);
  align-items: baseline;
  padding: var(--s4) var(--s5);
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--riga);
}
.riga-pratica:first-child {
  border-top: 0;
}
.riga-pratica:hover {
  background: var(--blu-velo);
}

.riga-pratica .ora {
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  color: var(--forte);
  font-weight: 600;
  white-space: nowrap;
}
.riga-pratica .ora.assente {
  color: var(--tenue);
  font-weight: 400;
}

/* Il nome della persona, composto come sui documenti che il programma
   stampa. E' l'unico posto dove compare il serif, e non e' un vezzo: e'
   quello che distingue una persona da un dato. */
.riga-pratica .nome {
  font-family: var(--persona);
  font-size: 1.125rem;
  color: var(--forte);
  line-height: 1.25;
}

.riga-pratica .dove {
  grid-column: 2;
  color: var(--tenue);
  font-size: 0.875rem;
  margin-top: 2px;
}

.riga-pratica .quando {
  grid-row: 1;
  grid-column: 3;
  color: var(--tenue);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* ── Comandi ───────────────────────────────────────────────────────────
 * Uno solo pieno per schermata: quello che l'operatore fa davvero. */

.comando,
button.comando {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--riga-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  color: var(--forte);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
}
.comando:hover {
  border-color: var(--blu);
  color: var(--blu);
}

.comando.principale {
  background: var(--blu);
  border-color: var(--blu);
  color: #fff;
}
.comando.principale:hover {
  background: var(--blu-scuro);
  border-color: var(--blu-scuro);
  color: #fff;
}

.comando.quieto {
  border-color: transparent;
  background: transparent;
  color: var(--tenue);
}
.comando.quieto:hover {
  color: var(--blu);
}

.comando:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ── Vuoti e avvisi ────────────────────────────────────────────────────── */

.vuoto {
  padding: var(--s6) var(--s5);
  color: var(--tenue);
  background: var(--carta);
  border: 1px solid var(--riga);
  border-radius: var(--raggio-grande);
  box-shadow: var(--ombra);
}
.vuoto p {
  margin-bottom: var(--s4);
}

.avviso {
  padding: var(--s3) var(--s4);
  border-radius: var(--raggio);
  border: 1px solid var(--riga);
  background: var(--carta);
  font-size: 0.875rem;
}
.avviso.errore {
  border-color: #eccdd3;
  background: var(--allarme-velo);
  color: var(--allarme);
}

/* ── Campi ─────────────────────────────────────────────────────────────── */

label {
  display: block;
  font-size: 0.8125rem;
  color: var(--tenue);
  margin-bottom: var(--s1);
}

input[type='text'],
input[type='search'],
input[type='number'],
input[type='email'],
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--riga-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  color: var(--forte);
  font: inherit;
  font-size: 0.9375rem;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--blu);
  outline-offset: -1px;
  border-color: var(--blu);
}

/* ── Schermi stretti ───────────────────────────────────────────────────
 * Sotto i 60rem la barra non si stringe: esce di scena e torna quando
 * serve, perche' su un telefono lo spazio in orizzontale non c'e'. */

@media (max-width: 60rem) {
  .impianto,
  .impianto.stretta {
    grid-template-columns: 1fr;
  }

  .laterale {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    width: min(17rem, 82vw);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 0 40px rgba(31, 61, 95, 0.18);
  }
  .impianto.aperta .laterale {
    transform: translateX(0);
  }
  /* In modalita' telefono le parole tornano sempre: la barra e' larga. */
  /* Sul telefono la barra e' larga: torna il marchio esteso. */
  .impianto.stretta .laterale .etichetta,
  .impianto.stretta .chi-sei {
    display: initial;
  }
  .impianto.stretta .marchio .esteso {
    display: block;
  }
  .impianto.stretta .marchio .simbolo {
    display: none;
  }
  .impianto.stretta .voce {
    justify-content: flex-start;
  }

  .velo {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(31, 61, 95, 0.35);
    border: 0;
    padding: 0;
  }

  .comando.apri-laterale {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s4);
  }

  .contenuto {
    padding: var(--s4);
  }
  .riga-pratica {
    grid-template-columns: 4rem 1fr;
    padding: var(--s4);
  }
  .riga-pratica .quando {
    grid-row: 3;
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  .impianto,
  .laterale {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Riquadri ──────────────────────────────────────────────────────────
 * Un riquadro raccoglie UNA cosa: un'impostazione, un elenco, un blocco di
 * campi. Non e' un contenitore decorativo da mettere attorno a tutto. */

.card {
  background: var(--carta);
  border: 1px solid var(--riga);
  border-radius: var(--raggio-grande);
  box-shadow: var(--ombra);
  padding: var(--s5);
}
.card + .card {
  margin-top: var(--s4);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.panel > p {
  color: var(--tenue);
  font-size: 0.9375rem;
}

/* ── Righe di campi e riscontri ────────────────────────────────────────── */

.field-row {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s2);
}
.field-row input {
  flex: 1 1 14rem;
}

.status {
  font-size: 0.875rem;
  color: var(--tenue);
  min-height: 1.2em;
}
.status[data-tone='error'] {
  color: var(--allarme);
}
.status[data-tone='success'] {
  color: var(--conferma);
}

/* ── Elenchi di voci (chiese, frasi, luoghi, incaricati) ───────────────── */

ul.church-list,
ul.phrase-list {
  list-style: none;
  margin: var(--s2) 0 0;
  padding: 0;
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  overflow: hidden;
}
ul.church-list li,
ul.phrase-list li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-top: 1px solid var(--riga);
  font-size: 0.9375rem;
}
ul.church-list li:first-child,
ul.phrase-list li:first-child {
  border-top: 0;
}
ul.church-list li > span:first-child,
ul.phrase-list li > span:first-child {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Il pulsante che toglie una voce non deve gridare: e' un'azione di
   servizio, e diventa rosso solo quando ci si passa sopra. */
ul.church-list li button,
ul.phrase-list li button {
  flex: 0 0 auto;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  background: transparent;
  color: var(--tenue);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
ul.church-list li button:hover,
ul.phrase-list li button:hover {
  border-color: var(--allarme);
  color: var(--allarme);
  background: var(--allarme-velo);
}

/* ── Fisarmoniche ──────────────────────────────────────────────────────── */

.accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3);
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  background: var(--carta);
  color: var(--forte);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.accordion-toggle:hover {
  border-color: var(--blu);
  color: var(--blu);
}
.accordion-toggle svg {
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.accordion-toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
.accordion-panel {
  padding: var(--s4) 0 0;
}

/* ── Pulsanti delle pagine che non usano ancora .comando ──────────────
 * settings e la scheda cliente hanno bottoni senza classe: invece di
 * riscriverne l'HTML riga per riga, ricevono qui un aspetto coerente.
 *
 * Le esclusioni stanno dentro :where() e NON e' un vezzo. Scritte come
 * :not(.a):not(.b):not(.c):not(.d) questa regola pesa (0,4,1) - piu' di
 * qualunque regola di componente scritta su un <button> nudo - e se le
 * mangiava in silenzio: .section-tab.active restava bianca invece che
 * azzurra, e button.primary pure. :where() vale zero, quindi qui il conto
 * torna a (0,0,1): un ripiego, che e' quello che deve essere. Chiunque
 * scriva una classe su un bottone vince su questa regola. */

button:not(:where(.comando, .apri-chiudi, .velo, [class*='btn-'])) {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--riga-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  color: var(--forte);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
button.primary {
  background: var(--blu);
  border-color: var(--blu);
  color: #fff;
}
button.primary:hover {
  background: var(--blu-scuro);
  border-color: var(--blu-scuro);
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Ritorno alla home, per le pagine che non hanno la barra ───────────── */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--tenue);
  text-decoration: none;
  font-size: 0.875rem;
}
.back-link:hover {
  color: var(--blu);
}

/* ── Tabelle ──────────────────────────────────────────────────────────
 * Elenchi lunghi da scorrere con l'occhio: righe sottili, intestazione
 * discreta, nessuna zebratura. La riga si illumina al passaggio, che e'
 * l'unico aiuto che serve per non perdere il rigo. */

.table-wrap,
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--riga);
  border-radius: var(--raggio-grande);
  background: var(--carta);
  box-shadow: var(--ombra);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
th,
td {
  padding: var(--s3) var(--s4);
  text-align: left;
  border-top: 1px solid var(--riga);
  vertical-align: middle;
}
thead th {
  border-top: 0;
  border-bottom: 1px solid var(--riga-forte);
  color: var(--tenue);
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
}
tbody tr:hover {
  background: var(--blu-velo);
}
td .nome-persona {
  font-family: var(--persona);
  font-size: 1.0625rem;
  color: var(--forte);
}

/* ── Righe di comandi e griglie ───────────────────────────────────────── */

.row,
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
.row {
  margin-top: var(--s3);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--s4);
}

/* ── Varianti dei pulsanti ────────────────────────────────────────────
 * Il rosso e' per quello che non si torna indietro, e per niente altro. */

button.secondary,
a.button.secondary {
  background: var(--carta);
  border-color: var(--riga-forte);
  color: var(--forte);
}
button.danger,
a.button.danger {
  background: var(--carta);
  border-color: var(--riga-forte);
  color: var(--allarme);
}
button.danger:hover {
  background: var(--allarme-velo);
  border-color: var(--allarme);
}

/* Il cestino nelle righe: piccolo e grigio finche' non ci si passa sopra. */
.icon-delete {
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--raggio);
  background: transparent;
  color: var(--tenue);
  cursor: pointer;
  font: inherit;
}
.icon-delete:hover {
  border-color: var(--allarme);
  background: var(--allarme-velo);
  color: var(--allarme);
}

/* ── Etichette di stato ───────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--riga-forte);
  font-size: 0.75rem;
  color: var(--tenue);
  white-space: nowrap;
}
.badge.paid {
  border-color: #b5d9c9;
  background: #eef7f3;
  color: var(--conferma);
}
.badge.unpaid {
  border-color: #eccdd3;
  background: var(--allarme-velo);
  color: var(--allarme);
}

/* ── Campi file ───────────────────────────────────────────────────────── */

input[type='file'] {
  font: inherit;
  font-size: 0.875rem;
  color: var(--testo);
  max-width: 100%;
}

/* ── Nascondere ───────────────────────────────────────────────────────── */

.hidden,
[hidden] {
  display: none !important;
}

/* ── La barra delle azioni della pratica ──────────────────────────────
 * Le azioni che valgono per TUTTA la pratica - mandarla su Drive, tirarne
 * fuori l'Excel, ricominciare - stavano in fondo alla scheda, dopo un modulo
 * lungo: per arrivarci si scorreva tutto.
 *
 * Qui restano appiccicate in basso, sempre raggiungibili, e hanno una
 * gerarchia: una sola e' piena, ed e' quella che si fa davvero alla fine di
 * una pratica. Le altre sono a disposizione ma non chiedono attenzione. */

/* La barra fissa galleggia SOPRA il contenuto, quindi copre quello che in
   quel momento sta sul bordo basso della finestra - e un clic mirato li'
   finisce su di lei. Il primo pulsante della barra e' "Invia a Google Drive",
   cioe' un'azione che esce da qui: non e' un fastidio, e' un rischio.
   Lo spazio qui sotto fa si' che lo scorrimento comandato dal browser (il
   tasto Tab, un campo che prende il fuoco, uno scrollIntoView) si fermi
   sempre PRIMA della barra, invece che sotto. */
html,
.contenuto {
  scroll-padding-bottom: 6.5rem;
}

.barra-azioni {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s6) calc(var(--s6) * -1) 0;
  padding: var(--s3) var(--s6);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--riga);
}
.barra-azioni .etichetta-gruppo {
  color: var(--tenue);
  font-size: 0.8125rem;
  margin-right: var(--s1);
}
.barra-azioni .separatore {
  width: 1px;
  align-self: stretch;
  margin: 0 var(--s2);
  background: var(--riga);
}
.barra-azioni .a-destra {
  margin-left: auto;
}

/* Il pulsante di Drive tiene il suo logo a colori: e' un servizio di
   qualcun altro, e riconoscerlo dal marchio e' piu' veloce che leggerlo. */
.comando .logo-drive {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

/* Le azioni di riserva: ci sono, ma non stanno in prima fila. */
.altre-azioni {
  margin-top: var(--s4);
}
.altre-azioni > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  cursor: pointer;
  color: var(--tenue);
  font-size: 0.8125rem;
  list-style: none;
}
.altre-azioni > summary::-webkit-details-marker {
  display: none;
}
.altre-azioni > summary::before {
  content: '+';
  font-weight: 700;
}
.altre-azioni[open] > summary::before {
  content: '\2212';
}
.altre-azioni .dentro {
  margin-top: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  background: var(--carta);
}

/* La barra segue solo dove c'e' schermo per farla seguire.
   Su un telefono una striscia ferma in basso toglie spazio a una pagina che
   ne ha gia' poco, e mentre si scrive la tastiera si prende il resto. Vale
   anche a schermo BASSO e largo - il telefono girato di lato e' largo 844px
   ma alto 390: la larghezza da sola non basta a riconoscerlo.
   Ferma la barra, scorre con la pagina e si trova in fondo, dove si arriva
   quando si ha finito di compilare. */
@media (max-width: 40rem), (max-height: 32rem) {
  .barra-azioni {
    position: static;
    background: var(--carta);
    backdrop-filter: none;
  }
}

@media (max-width: 40rem) {
  .barra-azioni {
    margin-left: calc(var(--s4) * -1);
    margin-right: calc(var(--s4) * -1);
    padding: var(--s4);
    gap: var(--s3);
  }
  /* Stretto: i comandi si prendono la riga invece di spezzarsi in pezzi
     troppo piccoli per un dito. Drive per intero perche' e' il principale,
     Excel e Word una meta' per uno. */
  .barra-azioni .etichetta-gruppo {
    flex: 0 0 100%;
    margin-right: 0;
  }
  .barra-azioni .separatore {
    display: none;
  }
  .barra-azioni > .comando {
    flex: 1 1 8rem;
    justify-content: center;
  }
  .barra-azioni > .comando.principale {
    flex: 0 0 100%;
  }
  .barra-azioni .a-destra {
    flex: 0 0 100%;
    margin-left: 0;
  }
  .barra-azioni .a-destra .comando {
    width: 100%;
    justify-content: center;
  }
}

/* La versione, in fondo alla barra: si trova quando la si cerca e non si
   nota quando non la si cerca. */
.laterale .piede .versione {
  display: block;
  margin-top: var(--s2);
  font-size: 0.6875rem;
  color: var(--tenue);
  letter-spacing: 0.02em;
}
.impianto.stretta .laterale .piede .versione {
  display: none;
}

/* La riga di ricerca sopra un elenco. */
.riga-ricerca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.riga-ricerca input[type='search'] {
  flex: 1 1 18rem;
  max-width: 28rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--riga-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  font: inherit;
  font-size: 0.9375rem;
}
.riga-ricerca input[type='search']:focus-visible {
  outline: 2px solid var(--blu);
  outline-offset: 1px;
}
.riga-ricerca .conteggio {
  color: var(--tenue);
  font-size: 0.8125rem;
}