/* La Cassa della demo. Sullo schermo tutto sotto .demo-cassa; nel foglio che sale
   (fuori dal contenitore) tutto sotto .cassa-conto. Solo token di stile.css. */

/* ---------- comuni allo schermo e al foglio ---------- */
.demo-cassa p,
.cassa-conto p {
  margin: 0;
}
.demo-cassa .cassa-sotto,
.cassa-conto .cassa-sotto {
  font-size: 0.8125rem;
  color: var(--tenue);
  overflow-wrap: anywhere;
}
.demo-cassa .cassa-tenue,
.cassa-conto .cassa-tenue {
  color: var(--tenue);
  font-weight: 400;
}
.demo-cassa .cassa-etichetta,
.cassa-conto .cassa-etichetta {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tenue);
}
.demo-cassa .cassa-etichetta-campo,
.cassa-conto .cassa-etichetta-campo {
  display: block;
  margin: 0.75rem 0 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.demo-cassa .cassa-campo-cifra,
.cassa-conto .cassa-campo-cifra {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.demo-cassa .cassa-errore,
.cassa-conto .cassa-errore {
  color: var(--negativo);
  font-size: 0.875rem;
  font-weight: 600;
}
.demo-cassa .cassa-errore:empty,
.cassa-conto .cassa-errore:empty,
.cassa-conto .cassa-aiuto:empty {
  display: none;
}
.demo-cassa .cassa-due,
.cassa-conto .cassa-due {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.demo-cassa .cassa-largo,
.cassa-conto .cassa-largo {
  width: 100%;
}
.demo-cassa .cassa-link,
.cassa-conto .cassa-link {
  min-height: 2.75rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accento);
  cursor: pointer;
}
.demo-cassa .cassa-link:hover,
.cassa-conto .cassa-link:hover {
  text-decoration: underline;
}
.demo-cassa .cassa-riga-testo,
.cassa-conto .cassa-riga-testo {
  flex: 1;
  min-width: 0;
}

/* ---------- lo schermo ---------- */
.demo-cassa .cassa-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
}
.demo-cassa .cassa-avviso {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--raggio-md);
  font-size: 0.875rem;
  font-weight: 500;
}
.demo-cassa .cassa-avviso.informazione {
  background: var(--accento-chiaro);
  color: var(--accento-scuro);
}
.demo-cassa .cassa-avviso.positivo {
  background: var(--positivo-chiaro);
  color: var(--positivo);
}
.demo-cassa .cassa-riquadro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  position: relative;
}
.demo-cassa .cassa-riquadro + .cassa-riquadro::before,
.demo-cassa .cassa-riga + .cassa-riga::before,
.demo-cassa .cassa-incassata + .cassa-incassata::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1rem;
  right: 0;
  border-top: 1px solid var(--bordo);
}
.demo-cassa .cassa-valore {
  flex: none;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.demo-cassa .cassa-conta {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.demo-cassa .cassa-vuoto-titolo {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.demo-cassa .cassa-riga {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem 0.625rem 1rem;
  position: relative;
}
.demo-cassa .cassa-nome {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.demo-cassa .cassa-ora {
  font-variant-numeric: tabular-nums;
}
.demo-cassa .cassa-punto {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  margin-right: 0.375rem;
  vertical-align: 0.05em;
}
.demo-cassa .cassa-importo {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.demo-cassa .cassa-incassata {
  padding: 0.75rem 1rem 0.25rem;
  position: relative;
}
.demo-cassa .cassa-riga-alto {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.demo-cassa .cassa-destra {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}
.demo-cassa .cassa-barrato {
  color: var(--tenue);
  text-decoration: line-through;
}
.demo-cassa .cassa-motivo {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--negativo);
}
.demo-cassa .cassa-azioni-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}
.demo-cassa .cassa-dettagli {
  margin: 0 0 0.5rem;
  padding: 0.75rem;
  border-radius: var(--raggio-sm);
  background: var(--sfondo);
  font-size: 0.8125rem;
  display: grid;
  gap: 0.25rem;
}
.demo-cassa .cassa-tot-riga,
.cassa-conto .cassa-tot-riga {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.demo-cassa .cassa-tot-riga > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.demo-cassa .cassa-cifra {
  flex: none;
  font-variant-numeric: tabular-nums;
}
.demo-cassa .cassa-forte {
  font-weight: 600;
}
.demo-cassa .cassa-tot-riga.cassa-tenue {
  color: var(--tenue);
}
.demo-cassa .cassa-filo {
  border-top: 1px solid var(--bordo);
  padding-top: 0.375rem;
  margin-top: 0.125rem;
}
.demo-cassa .cassa-annulla {
  margin: 0.25rem 0 0.75rem;
  padding: 0.75rem;
  border-radius: var(--raggio-sm);
  background: var(--negativo-chiaro);
}
.demo-cassa .cassa-annulla .cassa-etichetta-campo {
  margin-top: 0;
}
.demo-cassa .cassa-annulla .cassa-sotto {
  margin-top: 0.375rem;
}
.demo-cassa .cassa-pericolo {
  background: var(--negativo);
}
.demo-cassa .cassa-pericolo:hover {
  background: var(--negativo);
  filter: brightness(0.9);
}
.demo-cassa .cassa-totali {
  padding: 0;
  font-size: 0.9375rem;
}
.demo-cassa .cassa-gruppo {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
}
.demo-cassa .cassa-totali .cassa-gruppo + .cassa-gruppo {
  border-top: 1px solid var(--bordo);
}
.demo-cassa .cassa-chiusura {
  display: grid;
  gap: 0.5rem;
  font-size: 0.9375rem;
}
.demo-cassa .cassa-chiusura .cassa-gruppo {
  padding: 0.25rem 0;
}
.demo-cassa .cassa-chiusura .cassa-etichetta-campo {
  margin: 0.25rem 0 0;
}
.demo-cassa .cassa-chiusura .cassa-avviso {
  margin: 0;
}
.demo-cassa .cassa-bene {
  color: var(--positivo);
  font-weight: 600;
}
.demo-cassa .cassa-attenzione {
  color: var(--attenzione);
  font-weight: 600;
}
.demo-cassa .cassa-differenza {
  font-size: 0.875rem;
}
.demo-cassa .cassa-differenza:empty {
  display: none;
}
.demo-cassa .cassa-conferma {
  padding: 0.75rem;
  border-radius: var(--raggio-sm);
  background: var(--attenzione-chiaro);
  font-size: 0.875rem;
}
.demo-cassa .cassa-piede-chiusura {
  margin-top: 0.25rem;
}
.demo-cassa .cassa-registratore {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--bordo);
  font-size: 0.75rem;
  color: var(--tenue);
}

/* ---------- il foglio «Incassa» ---------- */
.cassa-conto {
  display: grid;
  gap: 0.25rem;
}
.cassa-conto .cassa-cliente {
  background: var(--superficie);
  border-radius: var(--raggio-lg);
  padding: 0.875rem 1rem;
}
.cassa-conto .cassa-cliente .cassa-etichetta-campo:first-of-type {
  margin-top: 0.625rem;
}
.cassa-conto .cassa-cliente-nome {
  font-size: 1.0625rem;
  font-weight: 600;
}
.cassa-conto .cassa-titoletto {
  margin: 0.875rem 0 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tenue);
}
.cassa-conto .cassa-aiuto {
  font-size: 0.8125rem;
  color: var(--tenue);
  margin: 0.25rem 0.25rem 0;
}
.cassa-conto .cassa-centro {
  text-align: center;
}
.cassa-conto .cassa-voce {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.5rem;
  padding: 0.375rem 0.25rem 0.375rem 1rem;
  position: relative;
}
.cassa-conto .cassa-voce + .cassa-voce::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1rem;
  right: 0;
  border-top: 1px solid var(--bordo);
}
.cassa-conto .cassa-voce-nome {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.cassa-conto .cassa-prezzo {
  flex: none;
  width: 5.75rem;
  padding: 0.5rem 0.625rem;
}
.cassa-conto .cassa-togli {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--tenue);
  cursor: pointer;
}
.cassa-conto .cassa-aggiungi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cassa-conto .cassa-pillola {
  min-height: 2.75rem;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  background: var(--superficie);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--inchiostro);
  cursor: pointer;
}
.cassa-conto .cassa-pillola[aria-expanded='true'] {
  border-color: var(--accento);
  background: var(--accento-chiaro);
}
.cassa-conto .cassa-piu {
  color: var(--accento);
  font-weight: 700;
}
.cassa-conto .cassa-scelte {
  margin-top: 0.5rem;
}
.cassa-conto .cassa-scelte .demo-riga {
  min-height: 2.75rem;
  font-size: 0.9375rem;
}
.cassa-conto .cassa-scelte .demo-riga + .demo-riga::before {
  left: 1rem;
}
.cassa-conto .cassa-due-campi .cassa-etichetta-campo {
  margin-top: 0.5rem;
}
.cassa-conto .cassa-pagamento {
  margin-top: 0.25rem;
}
.cassa-conto .cassa-segmentato {
  margin: 0;
}
.cassa-conto .cassa-segmentato button {
  min-height: 2.75rem;
  font-size: 0.8125rem;
  padding: 0 0.25rem;
}
.cassa-conto .cassa-parti {
  display: grid;
  gap: 0.5rem;
}
.cassa-conto .cassa-parte {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cassa-conto .cassa-parte select {
  flex: 1;
  min-width: 0;
}
.cassa-conto .cassa-parte input {
  flex: none;
  width: 6.5rem;
}
.cassa-conto .cassa-resto {
  flex: none;
  min-width: 6.5rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.75rem;
  border: 1px dashed var(--bordo-campo);
  border-radius: var(--raggio-md);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.cassa-conto .cassa-resto-no {
  border-color: var(--negativo);
  color: var(--negativo);
}
/* Il totale e il bottone restano in vista in fondo al foglio, come nella tavola. */
.cassa-conto .cassa-piede {
  position: sticky;
  bottom: -1rem;
  margin: 0.75rem -1rem -1rem;
  padding: 0.75rem 1rem 1rem;
  display: grid;
  gap: 0.5rem;
  background: var(--sfondo);
  border-top: 1px solid var(--bordo);
  z-index: 1;
}
.cassa-conto .cassa-piede-totale {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.25rem;
}
.cassa-conto .cassa-totale {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cassa-conto .cassa-errore {
  padding: 0 0.25rem;
}

/* La conferma. */
.cassa-conto .cassa-fatto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 0.5rem 0.5rem;
  text-align: center;
}
.cassa-conto .cassa-spunta {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--positivo);
  color: #ffffff;
}
.cassa-conto .cassa-fatto-titolo {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cassa-conto .cassa-fatto .bottone {
  margin-top: 0.75rem;
}

/* Movimenti brevi, una volta sola, solo per chi li accetta. */
@media (prefers-reduced-motion: no-preference) {
  .cassa-conto .cassa-spunta {
    animation: cassa-rimbalzo 0.5s cubic-bezier(0.2, 1.2, 0.3, 1) both;
  }
  .cassa-conto .cassa-fatto-titolo,
  .cassa-conto .cassa-fatto .cassa-sotto {
    animation: cassa-appare 0.3s ease-out 0.15s both;
  }
  .cassa-conto .cassa-pillola,
  .cassa-conto .cassa-togli {
    transition: transform 0.15s ease;
  }
  .cassa-conto .cassa-pillola:active,
  .cassa-conto .cassa-togli:active {
    transform: scale(0.96);
  }
}
@keyframes cassa-rimbalzo {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes cassa-appare {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}