/* Pianificazione scorte e produzione.

   Il riferimento visivo e la strumentazione tecnica: un pannello di lettura,

   non un sito. Densita alta, gerarchia netta, numeri in tabulare monospaziato

   perche le colonne si leggano incolonnate. Nessuna decorazione che non

   trasporti informazione. */



@import url("font.a077b8ac8884.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 */

  --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 e 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. */

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.

   E 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 2rem;

  padding: 0.5rem 1.5rem;

  background: var(--superficie-alt);

  border-bottom: 1px solid var(--filo);

}



.lettura > div {

  display: flex;

  align-items: baseline;

  gap: 0.5rem;

}



.lettura dt,

.lettura .etichetta {

  font-size: 0.625rem;

  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--inchiostro-lieve);

}



.lettura dd,

.lettura .valore {

  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;

}



/* Fascia dei dati dimostrativi: deve essere impossibile confonderla con
   l'interfaccia, perche il suo scopo e 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-bottom: 1.25rem;

}



.testa-vista {

  flex: none;

}



/* Unica area di scorrimento: verticale per le righe, orizzontale per le

   colonne. E 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;

  }

  .testa-vista,

  .area-righe {

    max-height: none;

    overflow: visible;

  }

}



.intestazione-pagina {

  margin-bottom: 0.9rem;

}



.intestazione-pagina h1 {

  margin: 0;

  font-family: var(--titolo);

  font-size: 1.5rem;

  font-weight: 700;

  letter-spacing: -0.005em;

}



.intestazione-pagina p {

  margin: 0.25rem 0 0;

  max-width: 68ch;

  color: var(--inchiostro-medio);

}



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);

}



/* -------------------------------------------------------- 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(180px, 1fr));

  gap: 0.6rem;

  margin-bottom: 0.9rem;

}



.tessera {

  position: relative;

  display: block;

  padding: 0.6rem 0.75rem 0.65rem;

  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;

  animation: comparsa 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;

}



.tessera:nth-child(1) { animation-delay: 0.02s; }

.tessera:nth-child(2) { animation-delay: 0.06s; }

.tessera:nth-child(3) { animation-delay: 0.1s; }

.tessera:nth-child(4) { animation-delay: 0.14s; }

.tessera:nth-child(5) { animation-delay: 0.18s; }



@keyframes comparsa {

  from { opacity: 0; transform: translateY(5px); }

  to { opacity: 1; transform: none; }

}



.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.6rem;

  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.9375rem;

  font-weight: 600;

  margin-top: 0.15rem;

}



.tessera .spiegazione {

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  line-clamp: 2;

  overflow: hidden;

  margin-top: 0.2rem;

  font-size: 0.6875rem;

  line-height: 1.35;

  color: var(--inchiostro-lieve);

}



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

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

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

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

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

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

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

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

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

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



.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.6rem;

  align-items: flex-end;

  margin-bottom: 0.75rem;

  padding: 0.7rem 0.8rem;

  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 se: stanno in coda. */

.barra-strumenti .azioni {

  margin: 0 0 0 auto;

}



.azioni .spazio {

  margin-left: auto;

}



/* --------------------------------------------------------------- glossario */



/* Il glossario e chiuso di default ma sempre a portata: la prima volta che

   Elena vede "autonomia" deve poter capire da dove esce il numero senza

   chiedere a nessuno. */

.glossario {

  margin: 0 0 0.9rem;

  background: var(--superficie);

  border: 1px solid var(--filo);

  border-radius: var(--raggio);

}



.glossario > summary {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.65rem 0.9rem;

  font-family: var(--titolo);

  font-size: 0.9375rem;

  font-weight: 600;

  cursor: pointer;

  list-style: none;

}



.glossario > summary::-webkit-details-marker {

  display: none;

}



.glossario > summary::before {

  content: "";

  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;

}



.glossario[open] > summary::before {

  transform: rotate(90deg);

}



.glossario > summary .suggerimento {

  margin-left: auto;

  font-family: var(--testo);

  font-size: 0.75rem;

  font-weight: 400;

  color: var(--inchiostro-lieve);

}



.glossario .premessa {

  margin: 0;

  padding: 0.75rem 0.9rem 0;

  max-width: 78ch;

  color: var(--inchiostro-medio);

  border-top: 1px solid var(--filo);

}



.glossario dl {

  display: grid;

  grid-template-columns: minmax(9rem, 12rem) 1fr;

  gap: 0.1rem 1.25rem;

  margin: 0;

  padding: 0.25rem 0.9rem 1rem;

}



.glossario .premessa + dl {

  padding-top: 0.75rem;

}



.glossario dl:first-of-type {

  border-top: 1px solid var(--filo);

}



.glossario .premessa + dl {

  border-top: none;

}



.glossario dt {

  font-family: var(--titolo);

  font-weight: 600;

  padding-top: 0.45rem;

}



.glossario dd {

  margin: 0;

  padding-top: 0.45rem;

  color: var(--inchiostro-medio);

  max-width: 82ch;

}



@media (max-width: 700px) {

  .glossario dl {

    grid-template-columns: 1fr;

  }

  .glossario dd {

    padding-top: 0;

    padding-bottom: 0.5rem;

  }

}



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



.pannello {

  background: var(--superficie);

  border: 1px solid var(--filo);

  border-radius: var(--raggio);

}



/* Lo scorrimento e gestito da .area-righe: qui non deve esserci overflow,

   altrimenti diventerebbe lui il riferimento dello sticky e l intestazione

   smetterebbe di agganciarsi. */

.tabella-scorrevole {

  overflow: visible;

}



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);

}



/* Le intestazioni con spiegazione portano un segno discreto: sono quelle che

   la gente interpreta male. */

thead th[title] {

  cursor: help;

}



thead th[title]::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;

  white-space: nowrap;

}



td.descrizione {

  min-width: 16rem;

}



td.attenuato,

.attenuato {

  color: var(--inchiostro-lieve);

}



/* Colonna esclusa dai calcoli: si vede che e informativa e basta.



   Una tinta piatta, non un tratteggio. Un motivo diagonale riparte

   dall origine di ogni elemento che lo disegna: qui lo disegnava ogni cella

   per conto suo, e con righe alte 36 o 54 pixel le diagonali non si

   allineavano mai. A schermo la colonna sembrava una banda spezzata.



   La tinta e la stessa dell intestazione, che la porta gia: cosi la colonna

   e una banda sola dall alto in basso invece di cominciare a meta tabella. */

th.escluso,

td.escluso {

  background: var(--superficie-alt);

}



td.escluso {

  color: var(--inchiostro-lieve);

}



/* Bordo di stato a sinistra della riga */

tbody tr td:first-child {

  border-left: 3px solid transparent;

}



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); }



/* --------------------------------------------------- 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, cosi 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;

}



.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 priorita: 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;

}



/* Quantita 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;

}



.solo-lettori {

  position: absolute;

  width: 1px;

  height: 1px;

  overflow: hidden;

  clip-path: inset(50%);

  white-space: nowrap;

}



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



.pastiglia {

  display: inline-block;

  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--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); }



.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); }



/* 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 e 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" e 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, cosi le

   percentuali delle righe confrontabili restano incolonnate con questa. */

.andamento--assente .segno {

  width: 4px;

  height: 0;

}

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



/* La barra e 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.5rem;

  min-width: 8.5rem;

}



/* Marcatore di stima debole. Sta sul numero di movimenti perche e quello il

   dato che rende incerta la media, e perche 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: 4.75rem;

  text-align: right;

  font-family: var(--numero);

  font-variant-numeric: tabular-nums;

  white-space: nowrap;

}



.autonomia .traccia {

  position: relative;

  flex: 0 0 3.25rem;

  height: 5px;

  border-radius: 3px;

  background: var(--neutro-tenue);

  overflow: hidden;

}



/* Niente raggio proprio: la traccia ha overflow nascosto e ritaglia gia 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 piu, 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 e 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--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); }



/* Stessa informazione, seconda lettura: la barra di una stima incerta e

   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);

}



/* ------------------------------------------------------------ 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 .helptext {

  display: block;

  font-size: 0.75rem;

  color: var(--inchiostro-lieve);

  margin-top: 0.3rem;

}



.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);

}



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



.passi {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 0.75rem;

  margin-bottom: 1.5rem;

  padding: 0;

  list-style: none;

  counter-reset: passo;

}



.passi li {

  position: relative;

  padding: 0.75rem 0.9rem 0.85rem 2.6rem;

  background: var(--superficie);

  border: 1px solid var(--filo);

  border-radius: var(--raggio);

  font-size: 0.8125rem;

  color: var(--inchiostro-medio);

}



.passi li::before {

  counter-increment: passo;

  content: counter(passo);

  position: absolute;

  left: 0.85rem;

  top: 0.8rem;

  width: 1.35rem;

  height: 1.35rem;

  line-height: 1.3rem;

  text-align: center;

  font-family: var(--numero);

  font-size: 0.75rem;

  font-weight: 500;

  color: var(--accento);

  background: var(--accento-tenue);

  border-radius: 50%;

}



.passi strong {

  display: block;

  font-family: var(--titolo);

  font-size: 0.9375rem;

  color: var(--inchiostro);

}



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



/* htmx segnala il caricamento: senza, il filtro sembra non aver fatto nulla */

.indicatore {

  opacity: 0;

  transition: opacity 0.15s;

  font-size: 0.75rem;

  color: var(--inchiostro-lieve);

}



.htmx-request .indicatore,

.htmx-request.indicatore {

  opacity: 1;

}



.htmx-swapping .pannello {

  opacity: 0.55;

  transition: opacity 0.12s;

}



@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    animation-duration: 0.001ms !important;

    transition-duration: 0.001ms !important;

  }

}



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



@media print {

  .testata,

  .barra-strumenti,

  .azioni,

  .riepilogo,

  .glossario {

    display: none;

  }

  body {

    background: #fff;

    font-size: 10px;

  }

  thead th {

    position: static;

    box-shadow: none;

  }

  body {

    height: auto;

    overflow: visible;

    display: block;

  }

  main.vista-tabellare,

  .testa-vista,

  .area-righe {

    overflow: visible;

    max-height: none;

    display: block;

  }

}