/* SHARPER 2026 — la pagina della logistica.
   Sta in un foglio suo perché è l'unica pagina fatta di testo fermo: non ha elenchi
   che arrivano dal database, ha una scaletta di orari e quattro istruzioni da
   leggere in piedi, col telefono in mano, mentre si scarica un furgone. Le forme
   qui sotto servono a quello: numeri grossi, un'informazione per riquadro, e le
   avvertenze staccate dal resto invece che annegate in un periodo. */

/* ───────────────────────────────────────────────────────── la durata, in testa ─ */
/* È il dato che serve a tutti e che tutti richiedono per primo: sta da solo, sopra
   ogni altra cosa, e si legge da un metro di distanza. */
.durata {
  margin: 0;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--ancona);
  border-radius: var(--r);
  padding: 1.3rem 1.4rem 1.5rem;
}
.durata figcaption {
  font-family: var(--dato);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inchiostro-2);
}
.durata .fra-parentesi { margin: .15rem 0 0; color: var(--inchiostro-3); font-size: .9rem; }
.durata .ore {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: .6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem;
}
.durata .ore b { color: var(--ancona); font-weight: 600; font-variant-numeric: tabular-nums; }
.durata .ore span { font-family: var(--testo); font-size: clamp(1rem, 2vw, 1.3rem); color: var(--inchiostro-2); }

/* ──────────────────────────────────────────────────────────── i quattro capitoli ─ */
.scheda-logi { display: grid; gap: .9rem; }
/* Il riquadro che sta sotto la griglia e vale per tutte le sue colonne. */
.scheda-logi.larga { margin-top: 1rem; }
.scheda-logi p { margin: 0; }
.scheda-logi p + p { margin-top: 0; }

/* Il titolo di sezione arriva maiuscolo dalla comunicazione e resta maiuscolo: è il
   modo in cui la gente lo ritrova nella mail che ha già ricevuto. Per non urlare,
   il corpo scende e le lettere si distanziano. */
.blocco-logi .blocco-testa h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  letter-spacing: .02em;
}

/* L'etichetta che porta una data o un'autorizzazione: piccola, accanto al titolo. */
.pastiglia {
  display: inline-block;
  font-family: var(--dato);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--inchiostro-2);
  background: var(--superficie-2);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: .2rem .65rem;
  vertical-align: middle;
}

/* Il quadratino di colore accanto alla parola CIANO: la maglia si riconosce dal
   colore e non dall'anno, e un nome di colore scritto non è un colore visto. */
.campione {
  display: inline-block;
  width: .95em;
  height: .95em;
  border-radius: 3px;
  background: #00a4dc;
  border: 1px solid rgba(255, 255, 255, .35);
  vertical-align: -.1em;
  margin-right: .15rem;
}

/* L'avvertenza: quello che si sbaglia se non lo si legge. */
.avvertenza {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin: 0;
  background: var(--superficie-2);
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--area-medicina);
  border-radius: var(--r);
  padding: .8rem 1rem;
  font-size: .95rem;
}
.avvertenza .glifo-avv { flex: 0 0 18px; width: 18px; height: 18px; margin-top: .15rem; fill: var(--area-medicina); }

/* ─────────────────────────────────────────────────────── il ritiro: giorni e ore ─ */
/* Tre righe: giorno a sinistra, orario a destra in cifre tabellari, così le tre ore
   si confrontano incolonnate invece che dentro tre frasi. */
.ritiro { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ritiro li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .8rem;
  background: var(--superficie-2);
  border: 1px solid var(--bordo);
  border-radius: 8px;
  padding: .6rem .85rem;
}
.ritiro .giorno { overflow-wrap: anywhere; }
.ritiro .quando {
  font-family: var(--dato);
  font-variant-numeric: tabular-nums;
  color: var(--ancona);
  white-space: nowrap;
}

/* L'indirizzo dove si ritira: una riga sola, con il glifo del posto. */
.dove-ritiro {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  color: var(--inchiostro-2);
  font-size: .95rem;
}
.dove-ritiro .glifo-posto { flex: 0 0 16px; width: 16px; height: 16px; margin-top: .2rem; fill: var(--inchiostro-3); }

/* ───────────────────────────────────────────────────────────── i cronoprogrammi ─ */
/* Due scalette affiancate, una che monta e una che smonta. Sono la stessa forma
   perché sono la stessa cosa letta al contrario, e la linea verticale serve a farle
   leggere come un'ora dopo l'altra e non come due elenchi puntati. */
.crono { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.crono li {
  display: grid;
  grid-template-columns: 5.4rem 1fr;
  gap: .9rem;
  padding: .75rem 0;
  border-top: 1px solid var(--bordo);
  position: relative;
}
.crono li:first-child { border-top: 0; }
.crono .ora {
  font-family: var(--dato);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  color: var(--c, var(--ancona));
  line-height: 1.25;
}
.crono .ora small { display: block; font-size: .72rem; color: var(--inchiostro-3); letter-spacing: .04em; }
.crono .cosa { margin: 0; letter-spacing: .015em; line-height: 1.3; }
.crono .cosa small { display: block; font-family: var(--testo); font-size: .85rem; letter-spacing: 0; color: var(--inchiostro-2); margin-top: .2rem; text-transform: none; }

/* Il pallino sulla linea del tempo: sta sul bordo sinistro della colonna del testo. */
.crono li::before {
  content: "";
  position: absolute;
  left: 4.55rem;
  top: 1.15rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c, var(--ancona));
}
.crono li::after {
  content: "";
  position: absolute;
  left: calc(4.55rem + 3px);
  top: 1.6rem;
  bottom: -.1rem;
  width: 1px;
  background: var(--bordo);
}
.crono li:last-child::after { display: none; }

@media (max-width: 420px) {
  .crono li { grid-template-columns: 4.3rem 1fr; }
  .crono li::before { left: 3.45rem; }
  .crono li::after { left: calc(3.45rem + 3px); }
}