/* Arrangiatore per orchestra scolastica.
   Palette BiscottoDigitale, la stessa di EduTime Pro. Il lime e' solo un
   accento: mai testo lime su bianco. L'arancio e' per gli avvisi. */

:root {
  --blu-scuro: #13233c;
  --blu: #195275;
  --blu-tenue: #e3eef5;
  --lime: #cbd817;
  --salvia: #b1c5a4;
  --salvia-tenue: #eef3ea;
  --fucsia: #f24a7f;
  --arancio: #d8613c;
  --arancio-testo: #9a3d20;
  --arancio-tenue: #fbeee8;
  --rosso-testo: #a3183f;
  --rosso-tenue: #fde8ee;
  --fondo: #f3f6f8;
  --carta: #ffffff;
  --linea: #d3dce4;
  --bordo-campo: #8a9aa8;
  --testo: #13233c;
  --testo-2: #46586a;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --raggio: 8px;
  --raggio-grande: 12px;
  --ombra: 0 1px 2px rgba(19, 35, 60, .06), 0 4px 16px rgba(19, 35, 60, .06);
  --carattere: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--carattere);
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
h1, h2, h3 { line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
p { margin: 0; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .875em; background: var(--blu-tenue); padding: 0 var(--s1); border-radius: 4px; }
a { color: var(--blu); }
.piccolo { font-size: .875rem; color: var(--testo-2); }
.guida { color: var(--testo-2); max-width: 70ch; }
.nascosto-visivo { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: -9999px; }
.salta:focus { left: var(--s4); top: var(--s4); background: var(--carta); padding: var(--s2) var(--s3); z-index: 10; }

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

/* ---------- testata e passi ---------- */
.testata {
  background: var(--blu-scuro);
  color: #fff;
  padding: var(--s3) var(--s5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
}
.testata :focus-visible { outline-color: var(--lime); }
.marchio { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.marchio-nome { font-weight: 700; font-size: 1.25rem; }
.marchio-sotto { color: #c9d6e1; font-size: .9375rem; }
.passi { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.passi button {
  font: inherit; font-size: .9375rem; color: #dfe7ee;
  background: transparent; border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px; padding: var(--s1) var(--s3) var(--s1) var(--s1);
  display: flex; align-items: center; gap: var(--s2); cursor: pointer;
}
.passi button .numero {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); font-weight: 700;
}
.passi button[aria-current="step"] { border-color: var(--lime); color: #fff; font-weight: 700; }
.passi button[aria-current="step"] .numero { background: var(--lime); color: var(--blu-scuro); }
.passi button.fatto .numero { background: var(--salvia); color: var(--blu-scuro); }
.passi button:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- contenuto ---------- */
.contenuto { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: var(--s4); padding-block: var(--s6) var(--s7); }
.passo { display: grid; gap: var(--s5); }
.passo > h1:focus { outline: none; }

.btn {
  font: inherit; font-weight: 700; font-size: 1rem;
  border-radius: var(--raggio); padding: 10px 20px;
  border: 1px solid var(--blu); background: var(--carta); color: var(--blu);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px;
}
.btn:hover { background: var(--blu-tenue); }
.btn.primario { background: var(--blu); color: #fff; }
.btn.primario:hover { background: #14425f; }
.btn.discreto { border-color: transparent; background: transparent; text-decoration: underline; padding-inline: var(--s2); }
.btn.discreto:hover { background: var(--blu-tenue); }
.btn:disabled, .btn[aria-disabled="true"] { border-color: var(--linea); color: #6b7b89; background: var(--fondo); cursor: not-allowed; text-decoration: none; }
.collegamento { font: inherit; background: none; border: 0; color: var(--blu); text-decoration: underline; cursor: pointer; padding: var(--s1); }
.azioni { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.azioni.centrate { justify-content: center; }
.navigazione { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; border-top: 1px solid var(--linea); padding-top: var(--s5); }
.motivo { font-size: .875rem; color: var(--testo-2); }
.motivo:empty { display: none; }

.errore { background: var(--rosso-tenue); color: var(--rosso-testo); border-left: 4px solid var(--fucsia); border-radius: 0 var(--raggio) var(--raggio) 0; padding: var(--s3) var(--s4); max-width: 75ch; }
.avviso { background: var(--arancio-tenue); color: var(--arancio-testo); border-left: 4px solid var(--arancio); border-radius: 0 var(--raggio) var(--raggio) 0; padding: var(--s3) var(--s4); }
.avviso strong { color: var(--testo); }
.stato-lavoro:empty { display: none; }
.stato-lavoro { color: var(--testo-2); font-weight: 700; }

label { font-weight: 700; }
input[type=text], input[type=email], input[type=number], select, textarea {
  font: inherit; font-size: 1rem; color: var(--testo); background: var(--carta);
  border: 1px solid var(--bordo-campo); border-radius: 6px; padding: var(--s2) var(--s3); width: 100%;
  min-height: 44px;
}
textarea { resize: vertical; }
#testo-abc { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9375rem; }
.campo { display: grid; gap: var(--s1); align-content: start; }
.campo label { font-size: .875rem; }
.spiega { font-size: .875rem; color: var(--testo-2); }
.spunta { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s2); align-items: start; }
.spunta input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blu); }
.spunta .spiega, .spunta .motivo { grid-column: 2; }
.spunta input:disabled + label { color: var(--testo-2); }
/* 10 ott 2026 sera: una spunta dentro un campo (Accompagna il passaggio) */
.spunta-dentro { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s1); }
.spunta-dentro input { width: 20px; height: 20px; margin: 0; accent-color: var(--blu); }
.spunta-dentro input:disabled + label { color: var(--testo-2); }

/* ---------- passo 1 ---------- */
.deposito {
  border: 2px dashed var(--salvia); border-radius: var(--raggio-grande); background: var(--salvia-tenue);
  padding: var(--s6) var(--s5); display: grid; gap: var(--s3); justify-items: center; text-align: center;
}
.deposito.sopra { border-color: var(--blu); background: var(--blu-tenue); }
.deposito-titolo { font-size: 1.125rem; font-weight: 700; }
.pannello { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio-grande); padding: var(--s4); display: grid; gap: var(--s2); }
.esempi { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.chip {
  font: inherit; font-size: .9375rem; color: var(--testo); background: var(--carta);
  border: 1px solid var(--linea); border-radius: 999px; padding: 6px 14px; cursor: pointer; min-height: 40px;
}
.chip:hover { border-color: var(--blu); }
.chip .piu { color: var(--blu); font-weight: 700; margin-right: var(--s1); }
.chip.usato { border-color: var(--blu); background: var(--blu-tenue); }
.chip .conta { font-weight: 700; color: var(--blu); margin-left: var(--s1); }
.scheda-brano { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio-grande); padding: var(--s4) var(--s5); display: grid; gap: var(--s3); box-shadow: var(--ombra); }
.fatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); margin: 0; }
.fatti div { display: grid; gap: 2px; }
.fatti dt { font-size: .8125rem; color: var(--testo-2); }
.fatti dd { margin: 0; font-weight: 700; font-size: 1.0625rem; }
.nota-diritti { font-size: .875rem; color: var(--testo-2); border-left: 3px solid var(--salvia); padding-left: var(--s3); max-width: 75ch; }

/* ---------- passo 2 ---------- */
.salvati { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.salvati:empty { display: none; }
.salvato { display: inline-flex; align-items: center; border: 1px solid var(--linea); border-radius: 999px; background: var(--carta); }
.salvato .chip { border: 0; }
.salvato .togli { font: inherit; border: 0; background: none; color: var(--testo-2); cursor: pointer; padding: 0 var(--s3) 0 var(--s1); font-size: 1.125rem; min-height: 40px; }
.due-colonne { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s5); align-items: start; }
.gruppi { display: grid; gap: var(--s4); }
.gruppo { display: grid; gap: var(--s2); }
.gruppo h2 { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.parti { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio-grande); padding: var(--s4); display: grid; gap: var(--s3); position: sticky; top: var(--s4); }
.parti ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.parti ol:empty { display: none; }
.parti li { border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--s2) var(--s2) var(--s2) var(--s3); display: flex; align-items: center; gap: var(--s2); background: var(--fondo); }
.parti li .n { font-variant-numeric: tabular-nums; color: var(--testo-2); min-width: 1.5rem; }
.parti li .nome { flex: 1; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.mini { font: inherit; font-size: .8125rem; border: 1px solid var(--linea); background: var(--carta); color: var(--blu); border-radius: 6px; padding: 4px 8px; cursor: pointer; min-height: 32px; }
.mini:disabled { color: #9aa7b2; cursor: not-allowed; }
.salva-organico { display: grid; gap: var(--s1); border-top: 1px solid var(--linea); padding-top: var(--s3); }
.salva-organico label { font-size: .875rem; }
.riga-campo { display: flex; gap: var(--s2); }
.riga-campo input { flex: 1; min-width: 0; }

/* ---------- passo 3 ---------- */
.riepilogo { background: var(--blu-scuro); color: #fff; border-radius: var(--raggio); padding: var(--s3) var(--s4); font-weight: 700; }
.livelli-generali { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.livelli-generali legend { font-weight: 700; margin-bottom: var(--s2); padding: 0; }
.livelli { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s2); }
.livello { position: relative; border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--s3); display: grid; gap: 2px; background: var(--carta); cursor: pointer; font-weight: 400; }
.livello input { position: absolute; opacity: 0; }
.livello strong { font-size: 1rem; }
.livello span { font-size: .875rem; color: var(--testo-2); }
.livello:has(input:checked) { border: 2px solid var(--blu); background: var(--blu-tenue); padding: 11px; }
.livello:has(input:focus-visible) { outline: 3px solid var(--blu); outline-offset: 2px; }
.righe { display: grid; gap: var(--s2); }
.riga { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(150px, .9fr) minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--s3); align-items: start; border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--s3); background: var(--carta); }
.riga .strumento { font-weight: 700; padding-top: 28px; overflow-wrap: anywhere; }
.riga .strumento .n { color: var(--testo-2); font-weight: 400; margin-right: var(--s1); }
.avanzate { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--s3) var(--s4); }
.avanzate summary { cursor: pointer; font-weight: 700; color: var(--blu); }
.avanzate-corpo { display: grid; gap: var(--s4); padding-top: var(--s4); max-width: 60ch; }

/* ---------- passo 4 ---------- */
.avanzamento { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.avanzamento li { display: flex; gap: var(--s2); align-items: baseline; }
.avanzamento .segno { width: 1.25rem; font-weight: 700; color: var(--blu); }
.avanzamento .in-corso .segno::before { content: "…"; }
.avanzamento .fatto .segno::before { content: "✓"; }
.avanzamento .saltato .segno::before { content: "–"; color: var(--arancio); }
.scelta-livello { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.scelta-livello button[aria-pressed="true"] { background: var(--blu); color: #fff; }
.risultato { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: var(--s5); align-items: start; }
.anteprima { background: #e8edf1; border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; }
.anteprima .pagine { display: grid; gap: var(--s4); padding: var(--s4); max-height: 80vh; overflow-y: auto; }
.anteprima .pagine img { display: block; width: 100%; height: auto; background: #fff; box-shadow: var(--ombra); }
.anteprima .senza-pdf { padding: var(--s5); display: grid; gap: var(--s3); justify-items: start; }
.colonna-destra { display: grid; gap: var(--s5); }
.scarica { display: grid; gap: var(--s2); }
.scarica .motivo { margin-top: calc(-1 * var(--s1)); }
.cosa-ho-fatto { display: grid; gap: var(--s3); }
.cosa-ho-fatto ul { margin: 0; padding-left: 20px; display: grid; gap: var(--s2); }
.cosa-ho-fatto ul ul { gap: 2px; font-size: .9375rem; color: var(--testo-2); }
.cosa-ho-fatto details summary { cursor: pointer; font-weight: 700; color: var(--blu); }
.cosa-ho-fatto .ok-lista { margin-top: var(--s2); font-size: .9375rem; }

/* ---------- piede ---------- */
.piede { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); align-items: center; padding: var(--s3) var(--s5); border-top: 1px solid var(--linea); background: var(--carta); font-size: .875rem; color: var(--testo-2); }
.piede-azioni { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---------- finestre (novita' e segnalazione) ---------- */
.velo { position: fixed; inset: 0; background: rgba(19, 35, 60, .6); display: grid; place-items: center; padding: var(--s4); z-index: 60; /* sopra la porta della licenza */ }
.finestra { background: var(--carta); border-radius: var(--raggio-grande); box-shadow: var(--ombra); width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.finestra-testa { padding: var(--s5); border-bottom: 1px solid var(--linea); display: flex; justify-content: space-between; gap: var(--s3); align-items: start; }
.finestra-testa .etichetta { display: inline-block; background: var(--blu-tenue); color: var(--blu); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 10px; border-radius: 999px; margin-bottom: var(--s2); }
.finestra-testa p { color: var(--testo-2); font-size: .9375rem; margin-top: var(--s1); }
.chiudi { font: inherit; font-size: 1.5rem; line-height: 1; background: none; border: 0; color: var(--testo-2); cursor: pointer; padding: var(--s1) var(--s2); }
.finestra-corpo { padding: var(--s5); overflow-y: auto; display: grid; gap: var(--s4); }
.finestra-corpo ul { margin: var(--s2) 0 0; padding-left: 20px; display: grid; gap: var(--s2); }
.finestra-piede { padding: var(--s4) var(--s5); border-top: 1px solid var(--linea); background: var(--fondo); }
.finestra-piede .btn { width: 100%; }
.esca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.miniatura { display: flex; gap: var(--s3); align-items: start; }
.miniatura img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--raggio); border: 1px solid var(--linea); }

/* ---------- telefono ---------- */
@media (max-width: 760px) {
  h1 { font-size: 1.5rem; }
  .testata { padding: var(--s3) var(--s4); }
  .passi button { padding-right: var(--s2); }
  .passi .etichetta-passo { display: none; }
  .passi button[aria-current="step"] .etichetta-passo { display: inline; }
  .contenuto { padding-block: var(--s5) var(--s6); }
  .due-colonne, .risultato { grid-template-columns: 1fr; }
  .parti { position: static; }
  .riga { grid-template-columns: 1fr; }
  .riga .strumento { padding-top: 0; }
  .anteprima .pagine { max-height: none; padding: var(--s2); }
  .piede { padding: var(--s3) var(--s4); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---------- l'aiuto dell'IA ---------- */
/* Riquadro di salvia, diverso dal resto della pagina: quello che c'e' dentro
   e' una proposta, non una cosa gia' decisa. Se l'IA non e' collegata il
   riquadro non compare proprio. */
.aiuto-ia { background: var(--salvia-tenue); border: 1px solid var(--salvia); border-radius: var(--raggio); padding: var(--s4); display: grid; gap: var(--s3); max-width: 75ch; }
.aiuto-ia h2 { margin: 0; font-size: 1.0625rem; }
.aiuto-ia p { margin: 0; }
.aiuto-ia textarea { width: 100%; box-sizing: border-box; font: inherit; padding: var(--s2) var(--s3); border: 1px solid var(--bordo-campo); border-radius: var(--raggio); background: var(--carta); resize: vertical; }
.aiuto-ia .riga-campo { align-items: center; flex-wrap: wrap; }
.esito-ia { background: var(--carta); border-radius: var(--raggio); padding: var(--s3) var(--s4); display: grid; gap: var(--s3); }
.esito-ia p { margin: 0; }
.blocco-ia { display: grid; gap: var(--s1); }
.blocco-ia ul { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s1); }
.aiuto-ia code { background: var(--blu-tenue); border-radius: var(--raggio); padding: var(--s1) var(--s2); font-size: .9375rem; word-break: break-all; }
.aiuto-ia textarea:disabled, .aiuto-ia button:disabled { opacity: .55; }

/* ---------- 22 set 2026: intestazione, guida, parti da trascinare ---------- */
.campi-intestazione { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.link-guida { color: #fff; font-weight: 700; text-decoration: none; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: var(--s1) var(--s3); margin-left: auto; }
.link-guida:hover { border-color: var(--lime); }
.parti li .maniglia { cursor: grab; touch-action: none; user-select: none; color: var(--testo-2); font-size: 1.25rem; line-height: 1; padding: var(--s1) var(--s1); border-radius: 4px; }
.parti li .maniglia:hover { background: var(--blu-tenue); color: var(--blu); }
.parti li.trascinata { border-color: var(--blu); background: var(--blu-tenue); box-shadow: var(--ombra); opacity: .92; cursor: grabbing; }
.parti li.trascinata .maniglia { cursor: grabbing; }
body.trascinando { user-select: none; cursor: grabbing; }
.da-pdf { display: grid; gap: var(--s2); }

/* ---------- 25 set 2026: la melodia da una registrazione ---------- */
.titolo-pannello { font-size: 1.0625rem; margin: 0; }
.campi-audio { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); gap: var(--s3); }
#registra[aria-pressed="true"] { background: var(--arancio); border-color: var(--arancio); color: #fff; }

/* La forma del brano (10 ott 2026): una mappa sezioni x parti */
.forma-brano { margin-top: var(--s5); background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio-grande); padding: var(--s4); display: grid; gap: var(--s3); }
.forma-scelte { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s4); }
#forma-mappa-box { display: grid; gap: var(--s2); }
.mappa { display: grid; gap: 3px; overflow-x: auto; }
.mappa-riga { display: grid; gap: 3px; align-items: stretch; min-width: 32rem; }
.mappa-nome { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--s2); align-self: center; }
.mappa-sezione { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--blu-tenue); border-radius: 4px; padding: var(--s1) 2px; font-size: .8125rem; line-height: 1.2; text-align: center; }
.mappa-sezione span { color: var(--testo-2); font-size: .75rem; }
.mappa-sezione.rallenta { background: var(--salvia-tenue); }
.mappa-sezione.rallenta strong::after { content: " rit."; font-weight: 400; font-style: italic; }
.mappa-cella { min-height: 1.25rem; border-radius: 3px; background: var(--fondo); border: 1px solid var(--linea); }
.mappa-cella.suona { background: var(--blu); border-color: var(--blu); }
.mappa-casella { display: flex; }
button.mappa-cella { flex: 1; padding: 0; margin: 0; cursor: pointer; position: relative; font: inherit; }
button.mappa-cella:hover { border-color: var(--blu); }
button.mappa-cella:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; }
.mappa-cella.scelta::after { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--blu); }
.mappa-cella.suona.scelta::after { background: var(--fondo); }
.mappa-cella.muta { border-style: dashed; border-color: var(--blu); }

/* la porta della licenza, SinfonIA Edu online (16 ott 2026) */
.porta { position: fixed; inset: 0; z-index: 50; background: var(--blu-scuro); display: grid; place-items: center; padding: var(--s4); overflow-y: auto; }
.porta-scheda { background: var(--carta); border-radius: var(--raggio-grande); box-shadow: var(--ombra); width: 100%; max-width: 520px; padding: var(--s6, 32px) var(--s5); display: grid; gap: var(--s4); }
.porta-marchio { font-weight: 700; color: var(--blu); letter-spacing: .02em; }
.porta-scheda h1 { font-size: 1.5rem; line-height: 1.25; }
.porta-motivo { color: var(--testo-2); }
.porta-modulo { display: grid; gap: var(--s2); }
.porta-modulo input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; }
.porta-modulo .btn { justify-self: start; margin-top: var(--s2); }
.porta-acquisto { font-size: .9375rem; }
.porta-acquisto a { color: var(--blu); font-weight: 700; }
.porta-azioni { display: flex; gap: var(--s3); justify-content: space-between; }
.porta-azioni .btn { width: auto; }