/* Pianificazione scorte e produzione.
   Il riferimento visivo è la strumentazione tecnica: un pannello di lettura,
   non un sito. Densità alta, gerarchia netta, numeri in tabulare monospaziato
   perché le colonne si leggano incolonnate. Nessuna decorazione che non
   trasporti informazione. */

@import url("font.077c7330d405.css");

:root {
  /* Superfici: carta calda invece di bianco puro, si legge meglio tutto il giorno */
  --carta: #f1efe9;
  --superficie: #fdfcfa;
  --superficie-alt: #f7f5f1;
  --filo: #ddd8ce;
  --filo-forte: #c6c0b3;

  /* Inchiostro */
  --inchiostro: #191a1c;
  --inchiostro-medio: #4d525a;
  --inchiostro-lieve: #7c828c;

  /* Accento: blu strumento. Volutamente lontano da rosso, ambra e verde,
     che qui sono riservati allo stato degli articoli. */
  --accento: #1c4a8a;
  --accento-scuro: #143764;
  --accento-tenue: #e7eef8;

  /* Stati */
  /* "Ordinare subito" è più grave del critico e deve leggersi come tale:
     stesso rosso portato più scuro, non un colore nuovo da imparare. */
  --ordinare: #7a1e1e;
  --ordinare-tenue: #f6dedb;
  --ordinare-filo: #7a1e1e;
  --critico: #9c2119;
  --critico-tenue: #fbe9e6;
  --critico-filo: #c6392c;
  --attenzione: #855100;
  --attenzione-tenue: #fdf1da;
  --attenzione-filo: #c58a1c;
  --ok: #1c6544;
  --ok-tenue: #e6f2ea;
  --ok-filo: #2f8a60;
  --neutro: #545b66;
  --neutro-tenue: #eaecef;
  --neutro-filo: #98a0aa;
  --anomalia: #6a327f;
  --anomalia-tenue: #f2eaf7;
  --anomalia-filo: #8f57a6;

  --testo: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --titolo: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --numero: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --h-testata: 3.5rem;
  --raggio: 3px;
  --ombra: 0 1px 2px rgb(25 26 28 / 0.05), 0 1px 1px rgb(25 26 28 / 0.03);
}

*,

*::before,

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

html {
  scroll-padding-top: calc(var(--h-testata) + 1rem);
}

/* Impianto a pannello: testata e barra di lettura restano ferme, e l'unica
   area che scorre è quella delle righe. Serve a far funzionare l'intestazione
   di tabella agganciata: un contenitore con overflow diventa il riferimento
   dello sticky, quindi deve essercene uno solo e deve avere un'altezza.
   Il 100% qui sotto è il ripiego dei browser senza dvh: senza un'altezza il
   body cresce con il contenuto e, con l'overflow nascosto, non scorre più. */

html,

body {
  height: 100%;
}

body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--testo);
  font-size: 14px;
  line-height: 1.55;
  color: var(--inchiostro);
  background: var(--carta);
  -webkit-font-smoothing: antialiased;
}

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

/* ---------------------------------------------------------------- testata */

.testata {
  flex: none;
  z-index: 30;
  display: flex;
  align-items: stretch;
  height: var(--h-testata);
  padding: 0 1.5rem;
  gap: 2rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--filo-forte);
}

.marchio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
  text-decoration: none;
  color: var(--inchiostro);
}

.marchio strong {
  font-family: var(--titolo);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.marchio span {
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--inchiostro-lieve);
}

.navigazione {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  margin-left: auto;
}

.navigazione a {
  display: flex;
  align-items: center;
  padding: 0 0.9rem;
  font-family: var(--titolo);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: var(--inchiostro-medio);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.navigazione a:hover {
  color: var(--inchiostro);
  background: var(--superficie-alt);
}

.navigazione a[aria-current="page"] {
  color: var(--accento);
  border-bottom-color: var(--accento);
}

.navigazione .esterno {
  color: var(--inchiostro-lieve);
  border-left: 1px solid var(--filo);
  margin-left: 0.5rem;
}

.uscita {
  display: flex;
  align-items: center;
  margin: 0 0 0 0.75rem;
}

.uscita button {
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
}

/* ------------------------------------------------------ striscia di lettura */

/* Da quale caricamento vengono i numeri e su quale periodo sono calcolati.
   È la domanda che si pone chiunque guardi una previsione: sta in alto,
   sempre, su ogni pagina. */

.lettura {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1.25rem;
  /* Il margine predefinito di un dl la staccava dalla testata di quattordici
     pixel sopra e sotto: è una riga della testata, non un blocco a parte. */
  margin: 0;
  padding: 0.3rem 1.5rem;
  background: var(--superficie-alt);
  border-bottom: 1px solid var(--filo);
}

.lettura > div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.lettura dt {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inchiostro-lieve);
}

.lettura dd {
  margin: 0;
  font-family: var(--numero);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--inchiostro);
}

.lettura .nota {
  font-size: 0.75rem;
  color: var(--inchiostro-lieve);
  margin-left: auto;
}

/* La fotografia è composta da tre file che possono arrivare in giorni
   diversi: quando distano troppo, la nota lo dice. */
.lettura .nota--attenzione {
  color: var(--attenzione);
  font-weight: 600;
}

/* Fascia dei dati dimostrativi: deve essere impossibile confonderla con
   l'interfaccia, perché il suo scopo è sopravvivere a un ritaglio. */
.avviso-dimostrativo {
  flex: none;
  margin: 0;
  padding: 0.4rem 1.25rem;
  font-family: var(--titolo);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--anomalia);
}

/* ------------------------------------------------------------------ pagina */

main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 3rem;
}

/* Acquisti e produzione: la parte alta resta ferma, scorrono solo le righe. */

main.vista-tabellare {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 0.75rem;
  padding-bottom: 1.25rem;
}

.testa-vista {
  flex: none;
}

/* Unica area di scorrimento: verticale per le righe, orizzontale per le
   colonne. È il riferimento a cui si aggancia l'intestazione di tabella. */

.area-righe {
  flex: 1 1 auto;
  min-height: 9rem;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Il conteggio sta dentro l'area che scorre per aggiornarsi con la tabella,
   ma non deve rubare altezza alle righe. */

.area-righe > p {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
}

/* Su finestre molto basse la divisione toglie spazio invece di darne:
   si torna al comportamento normale, con la pagina che scorre tutta. */

@media (max-height: 600px) {
  body {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  main.vista-tabellare {
    overflow: visible;
  }
  .area-righe {
    overflow: visible;
  }
}

/* Solo per i lettori di schermo: il titolo della pagina ripete la voce di menu
   già evidenziata, e il testo di un comando ha senso solo a voce. Restano nel
   documento ma non spendono pixel. */
.intestazione-pagina,
.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

h2 {
  font-family: var(--titolo);
  font-size: 1.1875rem;
  font-weight: 700;
  margin: 2.25rem 0 0.75rem;
}

h2 .conteggio {
  font-family: var(--numero);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--inchiostro-lieve);
}

/* ---------------------------------------------------------------- messaggi */

.messaggi {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.messaggi li {
  padding: 0.6rem 0.9rem;
  border-radius: var(--raggio);
  border-left: 3px solid var(--ok-filo);
  background: var(--ok-tenue);
  color: var(--ok);
}

.messaggi li.error {
  border-left-color: var(--critico-filo);
  background: var(--critico-tenue);
  color: var(--critico);
}

.messaggi li.warning {
  border-left-color: var(--attenzione-filo);
  background: var(--attenzione-tenue);
  color: var(--attenzione);
}

/* -------------------------------------------------------- tessere riepilogo */

/* Le tessere sono filtri, non decorazioni: un clic isola quella categoria.
   Il numero grande risponde alla domanda che si fa Elena aprendo la pagina. */

.riepilogo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.tessera {
  position: relative;
  display: block;
  padding: 0.35rem 0.6rem 0.4rem;
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-left: 3px solid var(--neutro-filo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}

.tessera:hover {
  border-color: var(--filo-forte);
  box-shadow: 0 2px 6px rgb(25 26 28 / 0.08);
  transform: translateY(-1px);
}

.tessera .numero {
  display: block;
  font-family: var(--numero);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.tessera .titolo {
  display: block;
  font-family: var(--titolo);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* La stessa icona della pastiglia, davanti al titolo della tessera, del
   colore del tono come il numero. */
.tessera .titolo .icona {
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.3em;
  vertical-align: -0.2em;
}

.tessera--ordinare { border-left-color: var(--ordinare-filo); }

.tessera--ordinare .numero,
.tessera--ordinare .icona { color: var(--ordinare); }

.tessera--critico { border-left-color: var(--critico-filo); }

.tessera--critico .numero,
.tessera--critico .icona { color: var(--critico); }

.tessera--attenzione { border-left-color: var(--attenzione-filo); }

.tessera--attenzione .numero,
.tessera--attenzione .icona { color: var(--attenzione); }

.tessera--ok { border-left-color: var(--ok-filo); }

.tessera--ok .numero,
.tessera--ok .icona { color: var(--ok); }

.tessera--neutro { border-left-color: var(--neutro-filo); }

.tessera--neutro .numero,
.tessera--neutro .icona { color: var(--neutro); }

.tessera--anomalia { border-left-color: var(--anomalia-filo); }

.tessera--anomalia .numero,
.tessera--anomalia .icona { color: var(--anomalia); }

/* Il tono "allarme" della produzione (ordine M scaduto o in scadenza) è la
   classe più severa della pagina e ha la faccia di "Ordinare subito" negli
   acquisti: stessa palette, riusata. */
.tessera--allarme { border-left-color: var(--ordinare-filo); }

.tessera--allarme .numero,
.tessera--allarme .icona { color: var(--ordinare); }

.tessera--attiva {
  border-color: var(--accento);
  box-shadow: 0 0 0 1px var(--accento);
}

.tessera--attiva::after {
  content: "filtro attivo";
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accento);
}

/* ------------------------------------------------------------------ filtri */

.barra-strumenti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: flex-end;
  margin-bottom: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.campo > span {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--inchiostro-lieve);
}

input[type="search"],

input[type="text"],

input[type="password"],

select {
  font-family: var(--testo);
  font-size: 0.8125rem;
  padding: 0.3rem 0.45rem;
  min-width: 7.5rem;
  color: var(--inchiostro);
  background: var(--superficie);
  border: 1px solid var(--filo-forte);
  border-radius: var(--raggio);
}

input:focus-visible,

select:focus-visible,

button:focus-visible,

a:focus-visible,

summary:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 1px;
}

button,

.bottone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--testo);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  color: var(--inchiostro);
  background: var(--superficie);
  border: 1px solid var(--filo-forte);
  border-radius: var(--raggio);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

button:hover,

.bottone:hover {
  background: var(--superficie-alt);
  border-color: var(--inchiostro-lieve);
}

.bottone--primario,

button.primario {
  color: #fff;
  background: var(--accento);
  border-color: var(--accento);
}

.bottone--primario:hover,

button.primario:hover {
  background: var(--accento-scuro);
  border-color: var(--accento-scuro);
}

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 1rem 0;
}

/* Dentro la barra filtri le azioni non sono una riga a sé: stanno in coda. */

.barra-strumenti .azioni {
  margin: 0 0 0 auto;
}

/* Dichiarazione della modalità di stima, sotto i filtri: la tendina dice cosa
   è stato chiesto, questa riga cosa sta girando davvero. Divergono quando la
   stagionalità è accesa ma l'archivio non arriva a tredici mesi. */

.striscia-periodo {
  margin: -0.25rem 0 0.5rem;
  font-size: 0.75rem;
  color: var(--inchiostro-lieve);
}

.striscia-periodo--stagionale {
  color: var(--accento);
  font-weight: 500;
}

/* ------------------------------------------------------------------ tabelle */

/* Lo scorrimento è gestito da .area-righe: il pannello non deve avere
   overflow, altrimenti diventerebbe lui il riferimento dello sticky e
   l'intestazione smetterebbe di agganciarsi. */

.pannello {
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0.5rem 0.6rem;
  font-family: var(--titolo);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--inchiostro-medio);
  background: var(--superficie-alt);
  border-bottom: 1px solid var(--filo-forte);
  box-shadow: 0 1px 0 var(--filo-forte);
}

/* La tabella è bianca come il pannello che la contiene: prima le celle erano
   trasparenti sulla carta della pagina e le colonne fisse, che hanno uno
   sfondo proprio, sembravano di un altro colore. */
.area-righe table {
  background: var(--superficie);
}

/* Una riga sotto il titolo nascosto: dice cosa fa la pagina in una frase. */
.sottotitolo {
  margin: 0 0 0.8rem;
  color: var(--inchiostro-medio);
}

/* Sotto i filtri: a sinistra come si stima, a destra legenda ed export. Non
   sono filtri e non devono stare in mezzo alle tendine: riguardano la
   tabella intera, e stanno sopra di lei. */
.sotto-filtri {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -0.25rem 0 0.5rem;
}

.sotto-filtri .striscia-periodo {
  margin: 0;
}

.sotto-filtri .azioni-tabella {
  display: flex;
  gap: 0.45rem;
  margin-left: auto;
  flex: none;
}

/* Da 1200 pixel in su i filtri stanno su una riga: le tendine si stringono e
   il testo troppo lungo viene troncato, meglio di una seconda riga che ruba
   spazio alla tabella. */
@media (min-width: 1200px) {
  .barra-strumenti {
    flex-wrap: nowrap;
  }
  .barra-strumenti .campo {
    flex: 1 1 0;
    min-width: 0;
  }
  .barra-strumenti .campo:first-child {
    flex: 1.4 1 0;
  }
  .barra-strumenti .campo select,
  .barra-strumenti .campo input {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .barra-strumenti .azioni,
  .barra-strumenti .indicatore {
    flex: none;
  }
}

/* Icone in linea (Lucide, static/icone/): grandi come il testo, dello stesso
   colore, con un filo d'aria verso la parola che accompagnano. */
.icona {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.15em;
  margin-right: 0.35em;
}

.navigazione a .icona {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.4rem;
}

.uscita button .icona {
  margin-right: 0.3rem;
}

/* Le intestazioni non si selezionano: un trascinamento che parte da una di
   esse selezionava un blocco rettangolare di celle, che a finestra non attiva
   il browser dipinge di grigio e sembra un difetto della tabella. */
thead {
  user-select: none;
}

/* Le prime due colonne (stato e codice) restano ferme mentre la tabella
   scorre in orizzontale: senza, oltre la sesta colonna non si sa più di che
   articolo si sta leggendo. La prima ha larghezza fissa perché la seconda
   deve sapere dove fermarsi; lo sfondo copre le celle che passano sotto. */
.tabella-acquisti th:nth-child(1),
.tabella-acquisti td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 3;
  /* col bordo compreso: la seconda colonna parte esattamente dove finisce
     questa, altrimenti la copre per lo spessore del padding */
  box-sizing: border-box;
  width: 10rem;
  min-width: 10rem;
  background: var(--superficie);
}

.tabella-acquisti th:nth-child(2),
.tabella-acquisti td:nth-child(2) {
  position: sticky;
  left: 10rem;
  z-index: 3;
  background: var(--superficie);
  box-shadow: 1px 0 0 var(--filo);
}

.tabella-acquisti thead th:nth-child(1),
.tabella-acquisti thead th:nth-child(2) {
  z-index: 6;
  background: var(--superficie-alt);
}

.tabella-acquisti tbody tr:hover td:nth-child(1),
.tabella-acquisti tbody tr:hover td:nth-child(2) {
  background: var(--accento-tenue);
}

/* La produzione ha davanti anche il bottone che apre gli ordini: restano
   ferme le prime tre colonne (apri, priorità, codice). La riga di dettaglio
   non partecipa: la sua cella unica copre tutta la larghezza e deve scorrere
   con il resto. */
.tabella-produzione thead th:nth-child(-n+3),
.tabella-produzione .riga-articolo td:nth-child(-n+3) {
  position: sticky;
  z-index: 3;
  box-sizing: border-box;
  background: var(--superficie);
}

.tabella-produzione thead th:nth-child(1),
.tabella-produzione .riga-articolo td:nth-child(1) {
  left: 0;
  width: 2.25rem;
  min-width: 2.25rem;
}

.tabella-produzione thead th:nth-child(2),
.tabella-produzione .riga-articolo td:nth-child(2) {
  left: 2.25rem;
  width: 10.75rem;
  min-width: 10.75rem;
  white-space: nowrap;
}

.tabella-produzione thead th:nth-child(3),
.tabella-produzione .riga-articolo td:nth-child(3) {
  left: 13rem;
  box-shadow: 1px 0 0 var(--filo);
}

.tabella-produzione thead th:nth-child(-n+3) {
  z-index: 6;
  background: var(--superficie-alt);
}

.tabella-produzione .riga-articolo:hover td:nth-child(-n+3) {
  background: var(--accento-tenue);
}

/* Le intestazioni con spiegazione portano un segno discreto: sono quelle che
   la gente interpreta male. */

thead th[title] {
  cursor: help;
}

thead th[title]::after,

thead th.con-aiuto::after {
  content: "?";
  display: inline-block;
  margin-left: 0.3rem;
  width: 0.9rem;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
  font-size: 0.625rem;
  border-radius: 50%;
  color: var(--inchiostro-lieve);
  background: var(--carta);
  border: 1px solid var(--filo-forte);
  vertical-align: 1px;
}

tbody td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--filo);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: var(--accento-tenue);
}

th.numero,

td.numero {
  text-align: right;
  font-family: var(--numero);
  font-variant-numeric: tabular-nums;
}

th.numero {
  font-family: var(--titolo);
}

td.codice {
  font-family: var(--numero);
  font-weight: 500;
  /* I codici lunghi (SCA-MISCELA-ERIDANIA) vanno a capo invece di allargare
     la colonna per tutti: è una colonna fissa, ogni pixel si paga due volte. */
  width: 7rem;
  min-width: 7rem;
  max-width: 7rem;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

td.descrizione {
  min-width: 16rem;
}

td.attenuato,

.attenuato {
  color: var(--inchiostro-lieve);
}

/* Bordo di stato a sinistra della riga */

tbody tr td:first-child {
  border-left: 3px solid transparent;
}

tr.riga--ordinare td:first-child { border-left-color: var(--ordinare-filo); border-left-width: 6px; }

tr.riga--critico td:first-child { border-left-color: var(--critico-filo); }

tr.riga--attenzione td:first-child { border-left-color: var(--attenzione-filo); }

tr.riga--ok td:first-child { border-left-color: var(--ok-filo); }

tr.riga--neutro td:first-child { border-left-color: var(--neutro-filo); }

tr.riga--anomalia td:first-child { border-left-color: var(--anomalia-filo); }

tr.riga--allarme td:first-child { border-left-color: var(--ordinare-filo); border-left-width: 6px; }

/* --------------------------------------------------- righe espandibili */

/* La produzione ragiona per articolo: una riga per articolo, e dentro gli
   ordini di lavorazione che lo riguardano. I dettagli sono resi aperti dal
   server e richiusi dallo script, così senza JavaScript resta tutto leggibile. */

.tabella-gruppi tbody.gruppo {
  border-bottom: 1px solid var(--filo);
}

.tabella-gruppi tbody.gruppo:last-child {
  border-bottom: none;
}

.gruppo[data-aperto="false"] .dettaglio {
  display: none;
}

.colonna-apri {
  width: 2rem;
  padding-right: 0 !important;
}

.apri {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 3px;
}

.apri:hover {
  background: var(--superficie-alt);
  border-color: var(--filo);
}

.apri .freccia {
  width: 0;
  height: 0;
  border-left: 5px solid var(--inchiostro-lieve);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s;
}

.gruppo[data-aperto="true"] .apri .freccia {
  transform: rotate(90deg);
}

.riga-articolo td {
  border-bottom: none;
}

/* Tutta la riga apre il dettaglio: il cursore lo segnala anche fuori dalla freccia. */
.tabella-gruppi .riga-articolo {
  cursor: pointer;
}

.dettaglio > td {
  padding: 0 0.6rem 0.75rem;
  background: var(--superficie-alt);
}

.dettaglio > td:first-child {
  background: var(--superficie-alt);
}

.ordini .titolo-dettaglio {
  display: block;
  padding: 0.4rem 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--inchiostro-lieve);
}

.tabella-annidata {
  width: auto;
  min-width: 32rem;
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
}

.tabella-annidata thead th {
  position: static;
  box-shadow: none;
  background: var(--superficie);
  font-size: 0.6875rem;
}

.tabella-annidata td,

.tabella-annidata th {
  padding: 0.3rem 0.6rem;
}

.tabella-annidata tbody tr:hover td {
  background: var(--accento-tenue);
}

/* Le ragioni della priorità: brevi, in chiaro, accanto alla riga. */

.motivi {
  white-space: normal;
  min-width: 12rem;
}

.motivo {
  display: inline-block;
  margin: 0 0.25rem 0.15rem 0;
  padding: 0.05rem 0.4rem;
  border-radius: 2px;
  font-size: 0.6875rem;
  color: var(--inchiostro-medio);
  background: var(--neutro-tenue);
  white-space: nowrap;
}

/* Quantità che la giacenza non riesce a coprire */

.scoperto {
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
  color: var(--critico);
  background: var(--critico-tenue);
  box-shadow: inset 0 0 0 1px var(--critico-filo);
  cursor: help;
}

/* ---------------------------------------------------------------- pastiglie */

.pastiglia {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
  font-family: var(--titolo);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pastiglia--ordinare { color: var(--ordinare); background: var(--ordinare-tenue); font-weight: 700; outline: 1px solid var(--ordinare-filo); }

.pastiglia--critico { color: var(--critico); background: var(--critico-tenue); }

.pastiglia--attenzione { color: var(--attenzione); background: var(--attenzione-tenue); }

.pastiglia--ok { color: var(--ok); background: var(--ok-tenue); }

.pastiglia--neutro { color: var(--neutro); background: var(--neutro-tenue); }

.pastiglia--anomalia { color: var(--anomalia); background: var(--anomalia-tenue); }

.pastiglia--allarme { color: var(--ordinare); background: var(--ordinare-tenue); font-weight: 700; outline: 1px solid var(--ordinare-filo); }

/* L'icona dello stato: un filo più grande del testo della pastiglia, senza il
   margine delle icone dei bottoni, lo spazio lo fa il gap. */
.pastiglia .icona {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0;
}

.rango {
  display: inline-block;
  min-width: 1.6rem;
  padding: 0.1rem 0.35rem;
  text-align: center;
  font-family: var(--numero);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 2px;
}

.rango--critico { color: var(--critico); background: var(--critico-tenue); }

.rango--attenzione { color: var(--attenzione); background: var(--attenzione-tenue); }

.rango--ok { color: var(--ok); background: var(--ok-tenue); }

.rango--neutro { color: var(--neutro); background: var(--neutro-tenue); }

.rango--allarme { color: var(--ordinare); background: var(--ordinare-tenue); }

/* La data richiesta che fa scattare l'allarme: nella riga dell'articolo e in
   quella dell'ordine nel dettaglio. */
.richiesta--allarme {
  color: var(--ordinare);
  font-weight: 600;
}

/* Andamento: un segno e una percentuale, in una cella stretta.
   I simboli sono disegnati con i bordi invece che scritti come caratteri: le
   frecce stanno nel blocco Unicode Arrows, che non è nei sottoinsiemi latin
   dei font vendorizzati, e sarebbero comparse come rettangoli vuoti o prese
   da un font di sistema diverso dal resto della tabella.
   Il grigio di "non confrontabile" è informazione, non assenza: dice che lo
   storico non arriva ancora indietro abbastanza. */
.andamento {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--numero);
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: help;
}

.andamento .segno {
  display: inline-block;
  flex: none;
  width: 0;
  height: 0;
}

.andamento--cresce {
  color: var(--critico);
}

.andamento--cresce .segno {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--critico);
}

.andamento--cala {
  color: var(--ok);
}

.andamento--cala .segno {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--ok);
}

.andamento--stabile {
  color: var(--inchiostro-lieve);
}

.andamento--stabile .segno {
  width: 8px;
  height: 2px;
  background: var(--inchiostro-lieve);
}

.andamento--assente {
  color: var(--inchiostro-lieve);
}

/* Non confrontabile: un segno solo, non due. Il pallino grigio seguito dal
   trattino sembrava sporcizia sullo schermo. Resta la larghezza, così le
   percentuali delle righe confrontabili restano incolonnate con questa. */

.andamento--assente .segno {
  width: 4px;
  height: 0;
}

/* ------------------------------------------------------- barra di autonomia */

/* La barra è la cosa che si legge senza leggere. La scala si ferma alla
   soglia di attenzione: barra piena vuol dire fuori pericolo. */

.autonomia {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 6.75rem;
}

/* Marcatore di stima debole. Sta sul numero di movimenti perché è quello il
   dato che rende incerta la media, e perché una pastiglia dentro la colonna
   dell'autonomia spostava le cifre e mandava all'aria l'incolonnamento. */

.pochi-movimenti {
  display: inline-block;
  min-width: 1.4rem;
  padding: 0.05rem 0.3rem;
  border-radius: 2px;
  font-weight: 500;
  color: var(--attenzione);
  background: var(--attenzione-tenue);
  box-shadow: inset 0 0 0 1px var(--attenzione-filo);
  cursor: help;
}

.autonomia .giorni {
  min-width: 3.6rem;
  text-align: right;
  font-family: var(--numero);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* "oltre un anno" va a capo dentro la larghezza del numero: è un testo, non
   una cifra, e non deve allargare la colonna per tutte le righe. */
.autonomia .giorni.oltre {
  white-space: normal;
  line-height: 1.1;
  max-width: 3.6rem;
}

/* Sotto l'esaurimento da venduto: da quando l'imballo serve davvero, cioè
   quando il finito a scaffale finisce e si torna a produrre. */
.serve-dal {
  display: block;
  font-size: 0.7rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--inchiostro-lieve);
}

.autonomia .traccia {
  position: relative;
  flex: 0 0 2.5rem;
  height: 5px;
  border-radius: 3px;
  background: var(--neutro-tenue);
  overflow: hidden;
}

/* Niente raggio proprio: la traccia ha overflow nascosto e ritaglia già gli
   angoli. Il raggio qui, su un riempimento largo mezzo pixel e alto cinque,
   lo rendeva un pallino staccato dalla barra: proprio sugli articoli sotto il
   giorno di autonomia, dove il dato conta di più, si vedeva una macchia
   invece di una barra appena cominciata.

   Il minimo tiene visibile anche l'uno per cento. Sotto quella soglia la
   differenza fra 0,2 e 0,6 giorni non è leggibile in 52 pixel comunque: il
   numero accanto resta la lettura esatta, la barra dice solo "quasi niente". */

.autonomia .riempimento {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 3px;
}

.autonomia--ordinare .riempimento { background: var(--ordinare-filo); }

.autonomia--critico .riempimento { background: var(--critico-filo); }

.autonomia--attenzione .riempimento { background: var(--attenzione-filo); }

.autonomia--ok .riempimento { background: var(--ok-filo); }

.autonomia--anomalia .riempimento { background: var(--anomalia-filo); }

.autonomia--allarme .riempimento { background: var(--ordinare-filo); }

/* Stessa informazione, seconda lettura: la barra di una stima incerta è
   cerchiata e rigata invece che piena. Funziona anche a riempimento zero. */

.autonomia--incerta .traccia {
  box-shadow: inset 0 0 0 1px var(--attenzione-filo);
}

.autonomia--incerta .riempimento {
  background-image: repeating-linear-gradient(
    -45deg,
    rgb(255 255 255 / 0.6) 0 2px,
    transparent 2px 5px
  );
}

.autonomia--assente .giorni {
  font-family: var(--testo);
  font-size: 0.75rem;
  color: var(--inchiostro-lieve);
}

/* Nella colonna secondaria, quella che non guida il semaforo, la traccia resta
   nel markup solo per tenere le cifre incolonnate con l'altra colonna: qui non
   deve vedersi. */
.autonomia--secondaria .traccia {
  visibility: hidden;
}

/* ------------------------------------------------------------ stati vuoti */

.vuoto {
  padding: 3rem 1.5rem;
  text-align: center;
  background: var(--superficie);
  border: 1px dashed var(--filo-forte);
  border-radius: var(--raggio);
}

.vuoto strong {
  display: block;
  font-family: var(--titolo);
  font-size: 1.125rem;
  margin-bottom: 0.35rem;
}

.vuoto p {
  margin: 0 auto 1rem;
  max-width: 46ch;
  color: var(--inchiostro-medio);
}

/* ------------------------------------------------------------------ moduli */

.modulo {
  max-width: 26rem;
  padding: 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.modulo p {
  margin: 0 0 0.9rem;
}

.modulo label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--inchiostro-lieve);
  margin-bottom: 0.2rem;
}

.modulo input {
  width: 100%;
}

.modulo ul.errorlist {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--critico-filo);
  background: var(--critico-tenue);
  color: var(--critico);
  font-size: 0.8125rem;
}

/* -------------------------------------------------------------- accesso */

.accesso {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
}

.accesso .modulo {
  width: 100%;
}

.accesso .marchio-grande {
  margin-bottom: 1.25rem;
}

.accesso .marchio-grande strong {
  display: block;
  font-family: var(--titolo);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
}

.accesso .marchio-grande span {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inchiostro-lieve);
}

/* ------------------------------------------------------------- indicatore */

/* htmx segnala il caricamento: senza, il filtro sembra non aver fatto nulla.
   Mostrarlo e nasconderlo lo fa htmx con la classe htmx-indicator; qui resta
   l'aspetto, e l'opacità zero del primo disegno: lo stile di htmx arriva con il
   suo script, che è differito, e fino ad allora la scritta si vedrebbe. */

.htmx-indicator {
  opacity: 0;
}

.indicatore {
  font-size: 0.75rem;
  color: var(--inchiostro-lieve);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------------ stampa */

@media print {
  /* La finestra della legenda vive nel livello superiore del browser e in
     stampa esce sformata: per il foglio c'è la pagina stampabile, che dice le
     stesse cose e mostra tutte e due le varianti di testo. */
  .testata,
  .lettura,
  .avviso-dimostrativo,
  .barra-strumenti,
  .azioni,
  .azioni-legenda,
  .bottone,
  .riepilogo,
  dialog.legenda {
    display: none;
  }
  main {
    overflow: visible;
    height: auto;
  }
  .voce {
    break-inside: avoid;
  }
  body {
    background: #fff;
    font-size: 10px;
  }
  thead th {
    position: static;
    box-shadow: none;
  }
  body {
    height: auto;
    overflow: visible;
    display: block;
  }
  main.vista-tabellare,
  .area-righe {
    overflow: visible;
    display: block;
  }
}

/* ------------------------------------------------------------- caricamento */

/* Una casella per export: chi carica vede dove va ogni file e quanto è vecchio
   l'ultimo ricevuto. La casella dello storico è marcata perché si comporta
   diversamente: si somma, non sostituisce. */
.caselle-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.casella {
  min-width: 0;
  /* Colonna: titolo e stato in alto, campo file e bottone in basso. Nelle
     caselle affiancate i comandi stanno così alla stessa altezza, qualunque
     sia la lunghezza del testo sopra. */
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1rem 1rem;
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.casella--storico {
  border-left: 3px solid var(--accento);
}

.casella label {
  display: block;
  font-family: var(--titolo);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--inchiostro);
  margin-bottom: 0.2rem;
}

.casella-descrizione {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--inchiostro-lieve);
}

.casella-stato {
  margin: 0 0 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--inchiostro-medio);
  /* i nomi dei file del gestionale sono lunghi e senza spazi */
  overflow-wrap: anywhere;
}

.casella-stato--vuoto {
  color: var(--attenzione);
  font-weight: 600;
}

.casella input[type="file"] {
  width: 100%;
  font-size: 0.8125rem;
  /* spinge sé stesso e quel che segue in fondo alla casella */
  margin-top: auto;
}

/* ------------------------------------------- vista filtrata e intestazione */

/* Il frammento che htmx sostituisce non deve contare per il layout: con
   display:contents i suoi figli restano figli di main, cioè la testa della
   vista e l'area delle righe, e l'impianto a pannello non se ne accorge. */
#vista {
  display: contents;
}

/* Da dove viene una data. Il controllo scorte e i saldi non portano nessuna
   colonna data, quindi quella delle giacenze è dichiarata o, in mancanza, il
   giorno del caricamento: una previsione di esaurimento vale quanto la data
   da cui parte, e confondere le due non è un dettaglio. */
.provenienza {
  font-family: var(--testo);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 0.05rem 0.3rem;
  color: var(--inchiostro-lieve);
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  white-space: nowrap;
}

/* Principali clienti: ragioni sociali lunghe in una cella stretta, una per
   riga, con la quota staccata dal nome. */
.clienti {
  max-width: 22ch;
  line-height: 1.3;
}
.clienti .cliente {
  display: block;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clienti .quota {
  font-family: var(--numero);
  font-variant-numeric: tabular-nums;
  color: var(--inchiostro-lieve);
}

/* Su un portatile l'intestazione fissa si mangiava quattrocento pixel e alle
   righe ne restavano duecento: tre righe visibili su duecentosessantasei. Qui
   la testa si stringe e le righe si prendono lo spazio. Le spiegazioni delle
   tessere restano nel tooltip, dove sono sempre state anche. */

/* ---------------------------------------------------------- distinta base */
/* La casella della distinta lavora nel browser: il riepilogo dice cosa parte e
   cosa resta sul computer, l'anteprima mostra le righe in partenza. Riusa la
   tabella e i toni già definiti; qui solo ciò che le manca. */
.distinta-riepilogo {
  margin-top: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--inchiostro-medio);
}
.distinta-conteggi,
.distinta-avvisi {
  margin: 0;
  padding: 0;
  list-style: none;
}
.distinta-conteggi strong {
  font-family: var(--numero);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--inchiostro);
}
.distinta-avvisi {
  margin-top: 0.45rem;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--attenzione-filo);
  border-radius: var(--raggio);
  background: var(--attenzione-tenue);
  color: var(--attenzione);
}
.distinta-errore {
  margin: 0.45rem 0 0;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--critico-filo);
  border-radius: var(--raggio);
  background: var(--critico-tenue);
  color: var(--critico);
  font-weight: 600;
}
/* L'anteprima scorre dentro la casella: mille righe non devono allungare la
   pagina di caricamento. */
.distinta-anteprima {
  margin-top: 0.6rem;
  max-height: 16rem;
  overflow: auto;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  background: var(--superficie);
}
.distinta-anteprima table {
  font-size: 0.75rem;
}
.distinta-anteprima caption {
  padding: 0.35rem 0.6rem;
  text-align: left;
  font-size: 0.75rem;
  color: var(--inchiostro-lieve);
}
.distinta-anteprima thead th {
  padding: 0.35rem 0.6rem;
}
.distinta-anteprima tbody td {
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}
.distinta-dettaglio {
  color: var(--inchiostro-lieve);
}

/* --------------------------------------------------- aiuti e legenda */

/* Le colonne calcolate spiegano sé stesse con un pannello: prosa e formula
   insieme. Un attributo title non poteva più bastare, perché una formula è
   markup e perché al tocco il suggerimento non compare mai. */

/* Nessuna position qui: la th è già sticky, e una th sticky fa da riferimento
   al posizionamento assoluto del pannello. Dichiararla relative la
   staccherebbe dall'alto dell'area che scorre, e l'intestazione smetterebbe di
   restare in vista mentre si leggono le righe. */
th.con-aiuto {
  cursor: help;
}

/* Il pannello scende sotto l'intestazione, dentro l'area che scorre: così il
   contenitore non lo taglia e non serve calcolarne la posizione da script. */
.aiuto {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  width: 20rem;
  padding: 0.6rem 0.75rem;
  font-family: var(--testo);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  color: var(--inchiostro);
  background: var(--superficie);
  border: 1px solid var(--filo-forte);
  border-radius: var(--raggio);
  box-shadow: 0 6px 18px rgb(25 26 28 / 0.18);
  /* Su uno schermo basso il pannello scorre da solo invece di finire sotto il bordo. */
  max-height: calc(100vh - 14rem);
  overflow: auto;
}

th.con-aiuto:hover .aiuto,
th.con-aiuto:focus .aiuto,
th.con-aiuto:focus-within .aiuto,
th.con-aiuto.aperto .aiuto {
  display: block;
}

/* Sulle ultime colonne un pannello allineato a sinistra uscirebbe dal bordo
   destro dell'area che scorre: si aggancia a destra. */
/* Reso ma invisibile, il tempo di misurarne la larghezza per decidere dove
   metterlo: lo script lo toglie subito. */
.aiuto.misura {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

th.con-aiuto:nth-last-child(-n + 2) .aiuto {
  left: auto;
  right: 0;
}

.aiuto .aiuto-titolo {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.aiuto .aiuto-testo {
  display: block;
  color: var(--inchiostro-medio);
}

/* Le formule sono MathML nativo: nessuna libreria, e il browser le stampa. */

/* Sotto ogni formula, che cosa vuol dire ogni lettera: senza questa griglia
   una sommatoria è un rebus. Il simbolo a sinistra è lo stesso MathML della
   formula, la definizione a destra. */
.simboli {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.7rem;
  margin: 0.45rem 0 0;
  font-size: 0.85em;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  text-align: left;
}

.simboli dt,
.simboli dd {
  margin: 0;
}

.simboli dt {
  white-space: nowrap;
}

.simboli dd {
  color: var(--inchiostro-lieve);
}

math {
  font-size: 1.05em;
}

math[display="block"] {
  margin: 0.4rem 0;
}

/* Il bottone prende il posto della fisarmonica e ne eredita lo stacco dalla
   barra dei filtri, che non ha margine sopra. */

/* La legenda è una finestra con lo scorrimento suo. La fisarmonica di prima
   stava nella parte fissa della pagina: si allungava, spingeva la tabella
   fuori schermo e il suo contenuto non scorreva. */
dialog.legenda {
  width: calc(100vw - 4rem);
  max-width: 60rem;
  max-height: 85vh;
  overflow: auto;
  padding: 0;
  color: var(--inchiostro);
  background: var(--superficie);
  border: 1px solid var(--filo-forte);
  border-radius: var(--raggio);
  box-shadow: 0 12px 40px rgb(25 26 28 / 0.28);
}

dialog.legenda::backdrop {
  background: rgb(25 26 28 / 0.45);
}

/* La testata resta in vista mentre il corpo scorre: il bottone per chiudere
   non deve costringere a risalire tutta la legenda. */
.legenda-testata {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.7rem 1.1rem;
  background: var(--superficie-alt);
  border-bottom: 1px solid var(--filo);
}

.legenda-testata h2 {
  margin: 0;
  font-family: var(--titolo);
  font-size: 1.125rem;
}

.azioni-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}

/* Il bottone che chiude la finestra sta in una form method="dialog", che la
   chiude senza script: la form non deve contare per l'impianto, il bottone
   resta un elemento della fila come il collegamento Stampa. */
.azioni-legenda form {
  display: contents;
}

.legenda-corpo {
  padding: 0.9rem 1.1rem 1.4rem;
}

.legenda-corpo .premessa {
  margin: 0 0 0.9rem;
  max-width: 78ch;
  color: var(--inchiostro-medio);
}

/* Un paragrafo di prosa che non deve correre da un capo all'altro dello
   schermo: stessa larghezza massima della premessa qui sopra. */
.prosa-breve {
  max-width: 78ch;
}

/* Una voce per colonna, più quelle che colonna non sono. Vale sia in finestra
   sia sulla pagina stampabile. */
.voce {
  max-width: 82ch;
  padding: 0.7rem 0;
}

.voce + .voce {
  border-top: 1px solid var(--filo);
}

.voce h3 {
  margin: 0 0 0.15rem;
  font-family: var(--titolo);
  font-size: 0.9375rem;
}

.voce p {
  margin: 0;
  color: var(--inchiostro-medio);
}

/* La variante stagionale, sulla pagina stampabile, sta sotto la prosa
   classica: senza stacco le due si leggerebbero come un discorso solo. */
.voce .variante {
  margin-top: 0.35rem;
}

/* Pagina stampabile: la stessa legenda su carta, con entrambe le varianti. */
main.pagina-legenda {
  max-width: 64rem;
}

.testata-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--filo);
}

.testata-legenda h1 {
  margin: 0;
  font-family: var(--titolo);
  font-size: 1.5rem;
}

.testata-legenda p {
  margin: 0;
  max-width: 62ch;
  font-size: 0.8125rem;
}

/* ---------------------------------------- bottoni di invio del caricamento */

/* Ogni casella invia il modulo con il bottone che le sta dentro: largo quanto
   la casella, sotto il campo file, così si legge come parte di quel riquadro e
   non come un comando della pagina. */
.invio-casella {
  width: 100%;
  margin-top: 0.7rem;
  justify-content: center;
}

/* Nascosto finché la casella non ha un file. La classe la mette lo script:
   senza JavaScript i bottoni restano visibili e il modulo si invia comunque. */
.invio-casella--nascosto {
  display: none;
}