/* Il modulo «Regalo» della demo: tutto sotto .demo-regalo, solo colori dei token.
   La striscia delle entrate ha accanto la parola e l'importo: il colore non è mai da solo. */

.demo-regalo p {
  margin: 0;
}
.demo-regalo ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.demo-regalo .regalo-spiega {
  display: grid;
  gap: 0.5rem;
  font-size: 0.9375rem;
}
.demo-regalo .regalo-sotto {
  font-size: 0.8125rem;
  color: var(--tenue);
}
.demo-regalo .regalo-blocco {
  display: block;
}
.demo-regalo .regalo-nota {
  font-size: 0.8125rem;
  color: var(--tenue);
  margin: 0.5rem 0.25rem 0.25rem;
}

.demo-regalo .regalo-frecce {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}
.demo-regalo .regalo-frecce p {
  flex: 1;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
}
.demo-regalo .regalo-frecce .bottone {
  min-width: 2.75rem;
  padding: 0 0.875rem;
}
.demo-regalo .bottone:disabled {
  background: var(--superficie-alta);
  color: var(--tenue);
  cursor: default;
}

.demo-regalo .regalo-riquadri {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.demo-regalo .regalo-riquadro {
  margin: 0;
  padding: 0.875rem;
}
.demo-regalo .regalo-riquadro:first-child {
  grid-column: 1 / -1;
}
.demo-regalo .regalo-riquadro-titolo {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tenue);
}
.demo-regalo .regalo-riquadro-cifra {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.demo-regalo .regalo-riquadro:first-child .regalo-riquadro-cifra {
  font-size: 1.75rem;
}

/* Le entrate: una striscia divisa, poi le righe con la parola e la cifra. */
.demo-regalo .regalo-striscia {
  display: flex;
  gap: 3px;
  height: 1.25rem;
  border-radius: var(--raggio-sm);
  overflow: hidden;
  margin: 0 0 0.75rem;
}
.demo-regalo .regalo-striscia span {
  display: block;
  min-width: 3px;
}
.demo-regalo .regalo-metodo-contanti {
  background: var(--positivo);
}
.demo-regalo .regalo-metodo-carta {
  background: var(--accento);
}
.demo-regalo .regalo-metodo-satispay {
  background: var(--attenzione);
}
.demo-regalo .regalo-metodo-bonifico,
.demo-regalo .regalo-metodo-altro {
  background: var(--tenue);
}
.demo-regalo .regalo-metodo-regalo {
  background: var(--notte);
}
.demo-regalo .regalo-entrate {
  display: grid;
  gap: 0.5rem;
  font-size: 0.9375rem;
}
.demo-regalo .regalo-entrate li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.demo-regalo .regalo-entrata-nome {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.demo-regalo .regalo-pallino {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
}
.demo-regalo .regalo-entrata-cifra {
  flex: none;
}
.demo-regalo .regalo-mance {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bordo);
  font-size: 0.8125rem;
  color: var(--tenue);
}

/* Chi li ha segnati, e l'elenco: righe da leggere, non bottoni. */
.demo-regalo .regalo-elenco .demo-riga {
  cursor: default;
  justify-content: space-between;
}
.demo-regalo .regalo-elenco .demo-riga + .demo-riga::before {
  left: 1rem;
}
.demo-regalo .regalo-riga-testo {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.demo-regalo .regalo-nome {
  font-weight: 600;
}
.demo-regalo .regalo-cifra {
  flex: none;
  font-weight: 700;
}

.demo-regalo .regalo-vuoto {
  display: grid;
  gap: 0.375rem;
  justify-items: start;
  margin-top: 0.75rem;
}
.demo-regalo .regalo-vuoto-titolo {
  font-weight: 700;
}