/* Hallmark · route: custom (bespoke) · structure: VAIdesk a misura di telefono, tre posti in basso + foglio che sale; dal computer la guida del giro a sinistra
 * idea: "il tempo che passa: +7 giorni e la richiesta torna fra quelle da richiamare"
 * tone: soft (calmo e morbido) · paper: oklch(96.3% 0.009 40) · accent: oklch(54% 0.15 40) del cliente
 * display: Fraunces (SOFT 100) · body: Geist · axes: light / roman-serif / warm (chromatic-terracotta ~40)
 * nav: barra dei tre posti (bespoke) · footer: nessuno nell'app, riga piana nella guida · studied: no
 */

/* ---------- Caratteri ---------- */
@font-face {
  font-family: "Geist VAIdesk";
  src: url("fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces VAIdesk";
  src: url("fonts/fraunces-soft.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper-2);
  color: var(--color-ink);
  font: 400 var(--text-base) / 1.5 var(--font-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
html.foglio-aperto { overflow: hidden; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
[hidden] { display: none !important; }

.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.icona {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.serif {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.senza-js { padding: var(--space-lg); }
.solo-lettori {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-block-size: var(--tocco);
  padding: 0 var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn .icona { inline-size: 1.125rem; block-size: 1.125rem; }
.btn:active { transform: translateY(1px); }
.btn--primario { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--soft { background: var(--color-accent-soft); color: var(--color-ink); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn--coach { background: var(--color-coach-ink); color: var(--color-coach); }
.btn--piccolo { min-block-size: 2.5rem; padding: 0 var(--space-md); }
@media (hover: hover) {
  .btn--primario:hover { background: var(--color-accent-hover); }
  .btn--soft:hover { background: var(--color-accent-soft-2); }
  .btn--ghost:hover { background: var(--color-paper-3); }
}

.btn-icona {
  display: inline-grid;
  place-items: center;
  inline-size: var(--tocco);
  block-size: var(--tocco);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  transition: background-color var(--dur-short) var(--ease-out);
}
@media (hover: hover) { .btn-icona:hover { background: var(--color-paper-3); } }

/* ---------- Impaginazione: telefono ---------- */
.guida { display: contents; }
.guida__intro, .guida__piede { display: none; }

.app {
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
}

.esempio-barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-paper-3);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}
.esempio-barra a { font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }

.testata {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-xs) var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
}
.testata__nome { min-inline-size: 0; }
.testata__cliente {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100;
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.15;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
}
.testata__prodotto { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.3; }

.vista {
  flex: 1;
  padding: var(--space-xs) var(--space-md) calc(var(--schede-h) + env(safe-area-inset-bottom) + var(--coach-h, 0px) + var(--space-xl));
}
.vista:focus { outline: none; }

.schede {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block-end: env(safe-area-inset-bottom);
  background: var(--color-paper);
  border-block-start: 1px solid var(--color-rule-2);
}
.scheda-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-block-size: var(--schede-h);
  border: 0;
  background: none;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}
.scheda-btn .icona {
  box-sizing: content-box;
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-short) var(--ease-out);
}
.scheda-btn[aria-current="page"] { color: var(--color-ink); }
.scheda-btn[aria-current="page"] .icona { background: var(--color-accent-soft-2); }
.scheda-btn:focus-visible { outline-offset: -3px; border-radius: var(--radius-md); }

/* ---------- Titoli e cifra principale ---------- */
.titolo {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100;
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-block-start: var(--space-sm);
  overflow-wrap: anywhere;
}
.titolo-riga { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md); }
.sottotitolo { color: var(--color-muted); margin-block: var(--space-2xs) var(--space-lg); }

.eroe { margin-block: var(--space-xs) var(--space-xl); }
.eroe__cifra {
  font-size: var(--text-hero);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.025em;
}
.eroe__etichetta { color: var(--color-ink-2); margin-block-start: var(--space-xs); }
.tranquillo {
  margin-block: var(--space-xs) var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  color: var(--color-ink-2);
}

/* ---------- Invito al giro (dal telefono) ---------- */
.invito {
  display: grid;
  gap: var(--space-xs);
  margin-block: var(--space-sm) var(--space-xl);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
}
.invito h2 { font-size: var(--text-md); font-weight: 650; line-height: 1.25; }
.invito p { color: var(--color-ink-2); }
.invito__azioni { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-start: var(--space-xs); }

/* ---------- Sezioni e carte di «Oggi» ---------- */
.sezione + .sezione { margin-block-start: var(--space-xl); }
.sezione__titolo {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--text-md);
  font-weight: 650;
  margin-block-end: var(--space-sm);
}
.sezione__conta { font-size: var(--text-base); font-weight: 500; color: var(--color-muted); }

.carte { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.carta {
  display: block;
  inline-size: 100%;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
  text-align: start;
}
.carta__apri {
  display: grid;
  gap: var(--space-2xs);
  inline-size: 100%;
  padding: var(--space-md) var(--space-lg) var(--space-sm);
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: none;
  text-align: start;
}
.carta--nuova { padding: var(--space-md) var(--space-lg); display: grid; gap: var(--space-2xs); }
.carta__testa { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.carta__nome { font-size: var(--text-md); font-weight: 600; line-height: 1.25; min-inline-size: 0; overflow-wrap: anywhere; }
.carta__importo { font-weight: 650; white-space: nowrap; }
.carta__meta { color: var(--color-ink-2); font-size: var(--text-sm); }
.carta__motivo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-start: var(--space-2xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}
.carta__motivo .icona { inline-size: 1rem; block-size: 1rem; color: var(--color-accent); }
.carta__quando { color: var(--color-muted); font-size: var(--text-sm); }
.carta__azioni {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm) var(--space-sm);
}
@media (hover: hover) {
  .carta--nuova, .carta__apri { transition: background-color var(--dur-short) var(--ease-out); }
  .carta--nuova:hover, .carta__apri:hover { background: var(--color-paper-2); }
}

/* ---------- Chip di stato ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.chip .icona { inline-size: 0.9rem; block-size: 0.9rem; }
.chip--accento { background: var(--color-accent-soft); color: var(--color-ink); }
.chip--accento .icona { color: var(--color-accent); }
.chip--ok { background: var(--color-ok-soft); color: var(--color-ink); }
.chip--ok .icona { color: var(--color-ok); }
.chip--persa { background: transparent; box-shadow: inset 0 0 0 1px var(--color-rule); color: var(--color-muted); }

/* ---------- Richieste ---------- */
.filtri {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  margin: 0 calc(-1 * var(--space-md)) var(--space-md);
  padding: var(--space-3xs) var(--space-md) var(--space-xs);
  scrollbar-width: none;
}
.filtri::-webkit-scrollbar { display: none; }
.filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-block-size: var(--tocco);
  padding: 0 var(--space-md);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out);
}
.filtro__n { color: var(--color-muted); font-weight: 500; }
.filtro[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.filtro[aria-pressed="true"] .filtro__n { color: var(--color-paper-3); }
@media (hover: hover) { .filtro[aria-pressed="false"]:hover { background: var(--color-paper-3); } }

.elenco {
  list-style: none;
  padding: var(--space-2xs) 0;
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
}
.riga {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  inline-size: 100%;
  min-block-size: 4rem;
  padding: var(--space-sm) var(--space-md);
  border: 0;
  border-block-start: 1px solid var(--color-rule-2);
  background: none;
  text-align: start;
}
.elenco li:first-child .riga { border-block-start: 0; }
.riga__testo { display: grid; gap: var(--space-3xs); min-inline-size: 0; }
.riga__nome { font-weight: 600; overflow-wrap: anywhere; }
.riga__meta { font-size: var(--text-sm); color: var(--color-ink-2); }
.riga__lato { display: grid; justify-items: end; gap: var(--space-2xs); flex: none; }
.riga__cifra { font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.riga:focus-visible { outline-offset: -3px; border-radius: var(--radius-md); }
@media (hover: hover) {
  .riga { transition: background-color var(--dur-short) var(--ease-out); }
  .riga:hover { background: var(--color-paper-2); }
}
.vuoto {
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  color: var(--color-ink-2);
}

/* ---------- Cruscotto ---------- */
.numeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.numero {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
  min-inline-size: 0;
}
.numero--largo { grid-column: 1 / -1; }
.numero__etichetta { font-size: var(--text-sm); color: var(--color-ink-2); }
.numero__valore { font-size: var(--text-xl); font-weight: 650; line-height: 1.1; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.numero__nota { font-size: var(--text-sm); color: var(--color-muted); }

.riquadro {
  margin-block-start: var(--space-md);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
}
.riquadro__titolo { font-size: var(--text-md); font-weight: 650; line-height: 1.25; }
.riquadro__sotto { font-size: var(--text-sm); color: var(--color-ink-2); margin-block: var(--space-2xs) var(--space-md); }

.legenda { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin-block-end: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.legenda__voce { display: inline-flex; align-items: center; gap: var(--space-xs); }
.legenda__segno { inline-size: 0.75rem; block-size: 0.75rem; border-radius: 3px; }
.legenda__segno--vinte { background: var(--color-accent); }
.legenda__segno--resto { background: var(--color-accent-track); }

.barre { list-style: none; padding: 0; display: grid; gap: var(--space-md); }
.barra { position: relative; display: grid; gap: var(--space-xs); border-radius: var(--radius-sm); }
.barra__testa { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.barra__nome { min-inline-size: 0; }
.barra__valori { font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra__traccia { display: flex; gap: 2px; block-size: 0.75rem; inline-size: calc(var(--quota) * 100%); min-inline-size: 0.5rem; }
.barra__vinte { flex: 0 0 calc(var(--vinte) * (100% - 2px)); background: var(--color-accent); }
.barra__resto { flex: 1 1 auto; background: var(--color-accent-track); }
.barra__traccia > :last-child { border-start-end-radius: 4px; border-end-end-radius: 4px; }
.barra__traccia--grigia > span { background: var(--color-muted); }
.barra__dettaglio {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: calc(100% + var(--space-2xs));
  z-index: var(--z-tooltip);
  max-inline-size: 100%;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-sm);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.barra[data-dettaglio] { cursor: default; }
.barra.mostra .barra__dettaglio,
.barra:focus-visible .barra__dettaglio { opacity: 1; transform: none; }
@media (hover: hover) { .barra:hover .barra__dettaglio { opacity: 1; transform: none; } }
.nota-esempio { margin-block-start: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- Il foglio che sale (scheda del cliente, nuova richiesta) ---------- */
.foglio {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  align-items: end;
}
.foglio__velo { position: absolute; inset: 0; background: var(--color-velo); opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.foglio__pannello {
  position: relative;
  display: flex;
  flex-direction: column;
  max-block-size: 92dvh;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-paper);
  box-shadow: var(--shadow-sheet);
  transform: translateY(100%);
  transition: transform var(--dur-long) var(--ease-out);
}
.foglio.aperto .foglio__velo { opacity: 1; }
.foglio.aperto .foglio__pannello { transform: none; }
.foglio.chiude { pointer-events: none; } /* mentre scende lascia passare i tocchi */
.foglio.chiude .foglio__velo { opacity: 0; transition: opacity calc(var(--dur-long) * 0.7) var(--ease-in); }
.foglio.chiude .foglio__pannello { transform: translateY(100%); transition: transform calc(var(--dur-long) * 0.7) var(--ease-in); }
.foglio__barra { display: flex; justify-content: flex-end; padding: var(--space-xs) var(--space-xs) 0; }
.foglio__corpo {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-lg) calc(var(--space-xl) + env(safe-area-inset-bottom) + var(--coach-h, 0px));
}

.scheda__nome {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100;
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.scheda__nome:focus { outline: none; }
.scheda__meta { color: var(--color-ink-2); margin-block: var(--space-2xs) var(--space-sm); }
.scheda__chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.scheda__contatti { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-block: var(--space-lg); }
.scheda__tel { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }

.stato {
  display: grid;
  gap: var(--space-sm);
  margin-block-end: var(--space-xl);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
}
.percorso { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs); }
.percorso li { block-size: 0.375rem; border-radius: var(--radius-pill); background: var(--color-rule); }
.percorso .fatto { background: var(--color-accent-track); }
.percorso .qui { background: var(--color-accent); }
.percorso .vinta { background: var(--color-ok); }
.percorso .persa { background: var(--color-muted); }
.stato__situazione { font-weight: 600; }
.stato__dettaglio { color: var(--color-ink-2); font-size: var(--text-sm); }
.stato__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.stato__modulo { display: grid; gap: var(--space-xs); }
.stato__modulo .campo { margin-block-end: 0; }
.stato__esiti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.stato__esiti .btn { padding-inline: var(--space-sm); }
.stato__domanda { font-weight: 600; }
.annulla-modo {
  justify-self: start;
  min-block-size: var(--tocco);
  padding: 0 var(--space-xs);
  border: 0;
  background: none;
  color: var(--color-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blocco { margin-block-end: var(--space-xl); }
.blocco__titolo { font-size: var(--text-base); font-weight: 650; margin-block-end: var(--space-sm); }
.dati { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); }
.dati dt { font-size: var(--text-sm); color: var(--color-muted); padding-block-start: 0.1rem; }
.storia { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.storia li { display: flex; justify-content: space-between; gap: var(--space-md); }
.storia__data { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.storico { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
.storico li { color: var(--color-ink-2); }

/* ---------- Campi ---------- */
.campo { display: grid; gap: var(--space-2xs); margin: 0 0 var(--space-md); border: 0; padding: 0; min-inline-size: 0; }
.campo > span, .campo > legend, .campo__etichetta { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); padding: 0; margin-block-end: var(--space-2xs); }
.campo input, .campo textarea, .note {
  inline-size: 100%;
  min-block-size: var(--tocco);
  padding: var(--space-sm) var(--space-sm);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  outline: 2px solid transparent;
  outline-offset: 1px;
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-base);
  transition: background-color var(--dur-short) var(--ease-out);
}
.campo textarea, .note { min-block-size: 6rem; resize: vertical; line-height: 1.45; }
@media (hover: hover) { .campo input:hover, .campo textarea:hover, .note:hover { background: var(--color-paper-2); } }
.campo input:focus-visible, .campo textarea:focus-visible, .note:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
.importo { display: flex; align-items: center; gap: var(--space-xs); }
.importo input { max-inline-size: 10rem; font-variant-numeric: tabular-nums; }
.importo__euro { font-weight: 600; color: var(--color-ink-2); }

.scelte { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.scelte label { position: relative; }
.scelte input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.scelte span {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tocco);
  padding: 0 var(--space-md);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}
.scelte input:checked + span { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.scelte input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.modulo__errore { color: var(--color-error); font-weight: 600; margin-block-end: var(--space-md); }
.modulo__azioni { display: flex; justify-content: center; margin-block-start: var(--space-lg); }

/* ---------- Avviso in basso ---------- */
.avviso {
  position: fixed;
  inset-inline: var(--space-md);
  inset-block-end: calc(var(--schede-h) + env(safe-area-inset-bottom) + var(--coach-h, 0px) + var(--space-sm));
  z-index: var(--z-tooltip);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  max-inline-size: 26rem;
  margin-inline: auto;
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  min-block-size: 3.25rem;
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-paper);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-in), transform var(--dur-short) var(--ease-in);
}
.avviso.visibile { opacity: 1; transform: none; pointer-events: auto; transition-timing-function: var(--ease-out); }
.avviso__annulla {
  min-block-size: var(--tocco);
  padding: 0 var(--space-md);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-paper);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Il giro ---------- */
.coach {
  position: fixed;
  inset-inline: var(--space-sm);
  inset-block-end: calc(var(--schede-h) + env(safe-area-inset-bottom) + var(--space-xs));
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-xs);
  max-inline-size: 30rem;
  margin-inline: auto;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border-radius: var(--radius-lg);
  background: var(--color-coach);
  color: var(--color-coach-ink);
  box-shadow: var(--shadow-soft);
}
/* Con la scheda aperta i tre posti sono coperti: la guida scende in fondo e lascia più scheda in vista.
   Scende di colpo, mai scivolando: il giro misura dove sta per far vedere il punto da toccare. */
.foglio-aperto .coach { inset-block-end: calc(env(safe-area-inset-bottom) + var(--space-xs)); }
.coach { transition: none; }
.coach__testa { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.coach__conta { font-size: var(--text-sm); color: var(--color-coach-2); }
.coach__testo { line-height: 1.4; }
.coach__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.coach__esci {
  /* 44 px da toccare, ma alta quanto la riga del contatore */
  min-block-size: var(--tocco);
  margin-block: calc((var(--text-sm) * 1.5 - var(--tocco)) / 2);
  margin-inline-end: calc(-1 * var(--space-xs));
  padding: 0 var(--space-xs);
  border: 0;
  background: none;
  color: var(--color-coach-2);
  font-size: var(--text-sm);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.coach :focus-visible { outline-color: var(--color-coach-ink); }

/* Il punto da toccare (07/10/2026): blu pieno, un colore che l'app non usa, con un anello che pulsa
   finché non lo tocchi. Prima aveva l'anello del colore del cliente e si confondeva coi pulsanti. */
.bersaglio { position: relative; outline: 3px solid var(--color-giro); outline-offset: 3px; }
.btn.bersaglio { background: var(--color-giro); border-color: var(--color-giro); color: var(--color-giro-ink); }
.btn--coach.bersaglio { outline-color: var(--color-giro-luce); }
.carta.bersaglio, .carta__apri.bersaglio, .riga.bersaglio { background: var(--color-giro-tinta); }
/* la carta che contiene il punto da toccare si tinge anche lei: si vede di quale richiesta si parla */
.carta:has(.bersaglio) { background: var(--color-giro-tinta); }
.bersaglio::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 3px solid var(--color-giro);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  animation: richiamo 1.5s var(--ease-out) infinite;
}
.btn--coach.bersaglio::after { border-color: var(--color-giro-luce); }
@keyframes richiamo {
  from { opacity: 0.85; transform: scale(1); }
  to { opacity: 0; transform: scale(1.06, 1.3); }
}
/* Nella barra dei tre posti si accende la pillola dell'icona */
.scheda-btn.bersaglio { outline: none; color: var(--color-giro); }
.scheda-btn.bersaglio::after { display: none; }
.scheda-btn.bersaglio .icona { background: var(--color-giro); color: var(--color-giro-ink); animation: faro 1.5s var(--ease-out) infinite; }
@keyframes faro {
  from { box-shadow: 0 0 0 0 var(--color-giro-alone), 0 0 0 0 var(--color-giro-alone); }
  to { box-shadow: 0 0 0 10px transparent, 0 0 0 18px transparent; }
}

/* L'area che il tocco cambia: incorniciata di blu, e il resto dell'app si abbassa (un'ombra larghissima
   che il contenitore che scorre ritaglia). Il margine color fondo stacca la cornice dal contenuto senza
   spostare niente. A giro finito («leggera») resta solo la cornice. */
.zona {
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 10px var(--color-paper-2),
    0 0 0 13px var(--color-giro),
    0 0 26px 16px var(--color-giro-alone),
    0 0 0 200vmax var(--color-giro-velo);
}
.zona:not(.schede) { position: relative; z-index: var(--z-raised); }
.schede.zona { z-index: calc(var(--z-sticky) + 1); border-radius: 0; box-shadow: 0 0 0 3px var(--color-giro), 0 0 26px 10px var(--color-giro-alone), 0 0 0 200vmax var(--color-giro-velo); }
.stato.zona { box-shadow: 0 0 0 3px var(--color-giro), 0 0 26px 12px var(--color-giro-alone), 0 0 0 200vmax var(--color-giro-velo); }
.zona--leggera { box-shadow: 0 0 0 10px var(--color-paper-2), 0 0 0 13px var(--color-giro), 0 0 26px 16px var(--color-giro-alone); }

/* Il tempo che passa */
.tempo {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  display: grid;
  place-items: center;
  padding: var(--space-lg);
  background: var(--color-velo);
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
.tempo.visibile { opacity: 1; }
.tempo__carta {
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  min-inline-size: min(16rem, 100%);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-xl);
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.tempo__titolo { color: var(--color-ink-2); }
.tempo__giorni { font-size: var(--text-md); color: var(--color-ink-2); }
.tempo__numero { font-size: var(--text-hero); font-weight: 650; color: var(--color-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.025em; }
.tempo__puntini { list-style: none; padding: 0; display: flex; gap: var(--space-xs); margin-block-start: var(--space-sm); }
.tempo__puntini li { position: relative; inline-size: 0.75rem; block-size: 0.75rem; border-radius: var(--radius-pill); background: var(--color-paper-3); }
.tempo__puntini li::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-accent);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.tempo__puntini li.on::after { opacity: 1; transform: none; }

/* ---------- Menu ---------- */
.menu {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: var(--space-2xs);
  min-inline-size: 15rem;
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-soft);
}
.menu__voce {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  inline-size: 100%;
  min-block-size: var(--tocco);
  padding: 0 var(--space-sm);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
}
.menu__voce .icona { color: var(--color-ink-2); inline-size: 1.125rem; block-size: 1.125rem; }
@media (hover: hover) { .menu__voce:hover { background: var(--color-paper-3); } }

/* ---------- Computer: guida a sinistra, VAIdesk a destra ---------- */
@media (min-width: 60rem) {
  body { background: var(--color-paper-3); }
  html.foglio-aperto { overflow: visible; }

  .pagina {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
    column-gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
    max-inline-size: 74rem;
    min-block-size: 100dvh;
    margin-inline: auto;
    padding: var(--space-xl) clamp(2rem, 4vw, 4rem);
  }

  .guida {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-inline-size: 31rem;
  }
  .guida__intro { display: block; }
  .guida__piede { display: block; font-size: var(--text-sm); color: var(--color-muted); }
  .marchio { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-md); font-weight: 700; letter-spacing: -0.01em; }
  .marchio__v { color: var(--color-vai-viola); }
  .marchio__ai { color: var(--color-vai-blu); }
  .marchio__esempio {
    margin-inline-start: var(--space-xs);
    padding: var(--space-3xs) var(--space-sm);
    border-radius: var(--radius-pill);
    background: var(--color-paper);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0;
  }
  .guida__titolo {
    margin-block: var(--space-lg) var(--space-md);
    font-family: var(--font-display);
    font-variation-settings: "SOFT" 100;
    font-weight: 600;
    font-size: var(--text-hero);
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .guida__testo { color: var(--color-ink-2); max-inline-size: 34ch; }
  .guida__azioni { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-lg); }
  [data-giro-attivo] .guida__azioni [data-giro="inizia"] { display: none; }

  .coach {
    position: static;
    max-inline-size: none;
    margin: 0;
    padding: var(--space-lg);
    gap: var(--space-sm);
  }
  .coach__testo { font-size: var(--text-md); line-height: 1.35; }

  .app {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    block-size: min(52rem, calc(100dvh - 5rem));
    min-block-size: 0;
    border-radius: var(--radius-xl);
    background: var(--color-paper-2);
    box-shadow: var(--shadow-app);
    overflow: hidden;
    isolation: isolate;
  }
  .esempio-barra { display: none; }
  .testata { position: relative; padding-block-start: var(--space-md); }
  .vista { overflow-y: auto; overscroll-behavior: contain; padding-block-end: var(--space-xl); }
  .schede { position: relative; }
  .foglio, .tempo { position: absolute; }
  .avviso { position: absolute; inset-block-end: calc(var(--schede-h) + var(--space-sm)); }
  .invito { display: none; }
  .foglio__corpo { padding-block-end: var(--space-xl); }
}

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }
  .foglio__pannello, .foglio.chiude .foglio__pannello { transform: none; opacity: 0; transition-property: opacity; }
  .foglio.aperto .foglio__pannello { opacity: 1; }
  .bersaglio::after { display: none; }
  .avviso, .barra__dettaglio { transform: none; }
}