/* Gestionale Teatro — foglio di stile unico.
   Palette sobria da teatro: rosso sipario, carta calda, testo caldo scuro. */

:root {
  --rosso: #8b1e2d;
  --rosso-scuro: #6d1723;
  --rosso-chiaro: #f6ecec;
  --carta: #faf7f2;
  --bianco: #ffffff;
  --testo: #241f1f;
  --testo-tenue: #6b625f;
  --bordo: #e3dad0;
  --ok: #1f7a4d;
  --ok-sfondo: #eaf5ef;
  --errore: #b3261e;
  --errore-sfondo: #fdecea;
  --avviso-sfondo: #fff8e1;
  --avviso-bordo: #e0c27a;
  --ombra: 0 1px 3px rgba(36, 31, 31, 0.08), 0 6px 20px rgba(36, 31, 31, 0.05);
  --raggio: 10px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--testo);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin: 0 0 12px;
}

h1 {
  font-size: 28px;
}
h2 {
  font-size: 20px;
}

a {
  color: var(--rosso);
}

/* ---------- Barra in alto ---------- */

#navbar {
  background: var(--rosso);
  color: var(--bianco);
  box-shadow: var(--ombra);
}

.navbar-interna {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Schermo largo: il contenitore non esiste, le voci e l'utente stanno in
   fila come prima. Sotto la soglia diventa la tendina. */
.pannello-menu {
  display: contents;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bianco);
  text-decoration: none;
  font-family: Georgia, serif;
  font-size: 18px;
}

.marchio-icona {
  font-size: 22px;
}

.voci {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}

.voci a,
.voci .voce-presto {
  padding: 6px 12px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 14px;
}

.voci a:hover {
  background: rgba(255, 255, 255, 0.14);
}

.voci a.attiva {
  background: rgba(255, 255, 255, 0.2);
  font-weight: 600;
}

.voci .voce-presto {
  color: rgba(255, 255, 255, 0.45);
  cursor: default;
}

.utente {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.utente-nome {
  opacity: 0.9;
}

.bottone-piatto {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--bianco);
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.bottone-piatto:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* ---------- Contenuto ---------- */

.contenuto {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.sottotitolo {
  color: var(--testo-tenue);
  margin: -6px 0 26px;
}

.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.scheda {
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 18px;
  box-shadow: var(--ombra);
}

.scheda h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.scheda p {
  margin: 0;
  color: var(--testo-tenue);
  font-size: 14px;
}

.scheda-presto {
  opacity: 0.62;
}

.etichetta-presto {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  background: var(--avviso-sfondo);
  border: 1px solid var(--avviso-bordo);
  color: #7a5c11;
  border-radius: 999px;
  padding: 2px 10px;
}

/* ---------- Pagine di accesso ---------- */

.pagina-accesso {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--rosso-scuro), #3a0d15);
}

.riquadro-accesso {
  width: 100%;
  max-width: 420px;
  background: var(--bianco);
  border-radius: 14px;
  padding: 32px 30px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

.riquadro-accesso .sipario {
  font-size: 34px;
  text-align: center;
  margin-bottom: 6px;
}

.riquadro-accesso h1 {
  text-align: center;
  font-size: 23px;
  margin-bottom: 4px;
}

.riquadro-accesso .sottotitolo {
  text-align: center;
  margin: 0 0 22px;
  font-size: 14px;
}

/* ---------- Moduli ---------- */

.campo {
  margin-bottom: 16px;
}

.campo label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--testo-tenue);
}

.campo input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: var(--carta);
}

.campo input:focus {
  outline: none;
  border-color: var(--rosso);
  background: var(--bianco);
  box-shadow: 0 0 0 3px rgba(139, 30, 45, 0.12);
}

.aiuto-campo {
  font-size: 12px;
  color: var(--testo-tenue);
  margin-top: 5px;
}

.bottone {
  width: 100%;
  padding: 11px 16px;
  background: var(--rosso);
  color: var(--bianco);
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.bottone:hover:not(:disabled) {
  background: var(--rosso-scuro);
}

.bottone:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---------- Messaggi (mai alert() nativi) ---------- */

.messaggio {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 16px;
}

.messaggio[hidden] {
  display: none;
}

.messaggio.errore {
  background: var(--errore-sfondo);
  border: 1px solid #f2c2be;
  color: var(--errore);
}

.messaggio.ok {
  background: var(--ok-sfondo);
  border: 1px solid #b8ddc8;
  color: var(--ok);
}

.messaggio.avviso {
  background: var(--avviso-sfondo);
  border: 1px solid var(--avviso-bordo);
  color: #7a5c11;
}

.banner-sola-lettura {
  background: var(--avviso-sfondo);
  border-bottom: 1px solid var(--avviso-bordo);
  color: #7a5c11;
  padding: 8px 20px;
  font-size: 14px;
  text-align: center;
}

/* ---------- Stato del sistema ---------- */

.stato-sistema {
  margin-top: 28px;
  font-size: 13px;
  color: var(--testo-tenue);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pallino {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--testo-tenue);
  display: inline-block;
}

.pallino.ok {
  background: var(--ok);
}
.pallino.ko {
  background: var(--errore);
}

@media (max-width: 640px) {
  .navbar-interna {
    gap: 10px;
  }
  .voci {
    order: 3;
    width: 100%;
  }
}

/* ---------- Barra titolo di pagina ---------- */

.barra-titolo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.barra-titolo h1 {
  margin: 0;
}

.azioni-titolo {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ---------- Bottoni ---------- */

.bottone-secondario,
.bottone-piccolo {
  background: var(--bianco);
  color: var(--rosso);
  border: 1px solid var(--rosso);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.bottone-piccolo {
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 500;
  border-color: var(--bordo);
  color: var(--testo);
}

.bottone-secondario:hover:not(:disabled),
.bottone-piccolo:hover:not(:disabled) {
  background: var(--rosso-chiaro);
}

.bottone-piccolo.pericolo {
  color: var(--errore);
  border-color: #f2c2be;
}

.bottone-piccolo.pericolo:hover:not(:disabled) {
  background: var(--errore-sfondo);
}

.bottone-inline {
  width: auto;
  padding: 9px 20px;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Elenco spettacoli ---------- */

.elenco-spettacoli {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.scheda-spettacolo {
  display: flex;
  gap: 14px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 14px;
  box-shadow: var(--ombra);
  text-decoration: none;
  color: inherit;
}

.scheda-spettacolo:hover {
  border-color: var(--rosso);
}

.copertina {
  width: 64px;
  height: 88px;
  flex: 0 0 64px;
  border-radius: 6px;
  background: var(--rosso-chiaro) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--rosso);
}

.copertina-grande {
  width: 150px;
  height: 210px;
  flex: 0 0 150px;
  font-size: 44px;
}

.scheda-spettacolo .titolo {
  font-family: Georgia, serif;
  font-size: 17px;
  margin: 0 0 2px;
}

.meta {
  color: var(--testo-tenue);
  font-size: 13px;
}

.scheda-spettacolo .meta {
  font-size: 13px;
  color: var(--testo-tenue);
  margin: 0;
}

/* ---------- Etichette di stato ---------- */

.badge {
  display: inline-block;
  font-size: 12px;
  border-radius: 999px;
  padding: 2px 10px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge.bozza {
  background: #f1efec;
  border-color: var(--bordo);
  color: var(--testo-tenue);
}
.badge.aperta {
  background: var(--ok-sfondo);
  border-color: #b8ddc8;
  color: var(--ok);
}
.badge.chiusa {
  background: #eef1f7;
  border-color: #c7d0e2;
  color: #3f5486;
}
.badge.annullata {
  background: var(--errore-sfondo);
  border-color: #f2c2be;
  color: var(--errore);
}

/* ---------- Tabelle ---------- */

.tabella {
  width: 100%;
  border-collapse: collapse;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
}

.tabella th,
.tabella td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--bordo);
  font-size: 14px;
  vertical-align: middle;
}

.tabella th {
  background: #f6f1ea;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--testo-tenue);
}

.tabella tr:last-child td {
  border-bottom: none;
}

.tabella tr.annullata td {
  opacity: 0.55;
  text-decoration: line-through;
}

.tabella input,
.tabella select {
  padding: 6px 8px;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  background: var(--carta);
  width: 100%;
}

.contenitore-scorrevole {
  overflow-x: auto;
}

/* ---------- Righe dinamiche (tariffe, date) ---------- */

.riga-dinamica {
  display: grid;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}

/* Le colonne dichiarate nell'HTML valgono finche' c'e' spazio: sotto,
   si riempie da sola invece di stritolare quattro campi in 375 px. */
@media (max-width: 720px) {
  .riga-dinamica {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }
}

.riga-tariffa {
  grid-template-columns: 2fr 1.3fr 1fr auto;
}

.riga-data {
  grid-template-columns: 1.6fr 1.6fr 1fr auto;
}

.riga-dinamica .campo {
  margin-bottom: 0;
}

.riga-dinamica select,
.riga-dinamica input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  background: var(--carta);
}

.togli-riga {
  background: none;
  border: none;
  color: var(--testo-tenue);
  font-size: 18px;
  cursor: pointer;
  padding: 6px 8px;
  line-height: 1;
}

.togli-riga:hover {
  color: var(--errore);
}

@media (max-width: 720px) {
  .riga-tariffa,
  .riga-data {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Pannelli e sezioni ---------- */

.pannello {
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 20px;
  box-shadow: var(--ombra);
  margin-bottom: 22px;
}

.pannello h2 {
  margin-top: 0;
}

.pannello[hidden] {
  display: none;
}

.due-colonne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

@media (max-width: 720px) {
  .due-colonne {
    grid-template-columns: 1fr;
  }
}

.vuoto {
  grid-column: 1 / -1; /* nelle griglie occupa tutta la riga */
  text-align: center;
  padding: 40px 20px;
  color: var(--testo-tenue);
  background: var(--bianco);
  border: 1px dashed var(--bordo);
  border-radius: var(--raggio);
}

/* ---------- Modale (mai confirm() nativi) ---------- */

.sfondo-modale {
  position: fixed;
  inset: 0;
  background: rgba(36, 31, 31, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.sfondo-modale[hidden] {
  display: none;
}

.modale {
  background: var(--bianco);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

.modale h2 {
  margin-top: 0;
}

.azioni-modale {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.azioni-modale .bottone {
  width: auto;
  padding: 9px 18px;
}

.bottone.pericolo {
  background: var(--errore);
}

.bottone.pericolo:hover:not(:disabled) {
  background: #8f1e17;
}

/* ---------------------------------------------------------------------
   Selettore di persona con ricerca (app/scelta-persona.js)
   --------------------------------------------------------------------- */

.scelta-persona {
  position: relative;
}

.scelta-persona input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: var(--carta);
}

.scelta-persona input:focus {
  outline: none;
  border-color: var(--rosso);
  background: var(--bianco);
  box-shadow: 0 0 0 3px rgba(139, 30, 45, 0.12);
}

.scelta-persona-lista {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 8px;
  box-shadow: var(--ombra);
}

.scelta-persona-lista li {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.35;
}

.scelta-persona-lista li[aria-selected='true'],
.scelta-persona-lista li:hover {
  background: var(--rosso-chiaro);
}

.scelta-persona-lista .meta {
  font-size: 12px;
}

.scelta-persona-vuoto {
  color: var(--testo-tenue);
  cursor: default;
}

.scelta-persona-vuoto:hover {
  background: transparent;
}

/* ---------------------------------------------------------------------
   Contatori della serata (replica.html): capienza, prenotati, liberi.
   Sono il dato che si guarda di continuo, quindi grandi e leggibili.
   --------------------------------------------------------------------- */

.numerone {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--rosso);
}

/* Un link che deve sembrare un bottone (es. "Prenotazioni" sulla riga
   della data): stessa forma dei bottoni piccoli, senza sottolineatura. */
a.bottone-piccolo {
  display: inline-block;
  text-decoration: none;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------
   Lista dei biglietti (replica.html): una riga per persona, con nome,
   tariffa e prezzo. Non si ragiona a quantita': quattro posti sono
   quattro righe, cosi' la sera si possono spuntare e incassare da sole.
   --------------------------------------------------------------------- */

.riga-biglietto {
  display: grid;
  grid-template-columns: 26px minmax(120px, 1fr) minmax(120px, 1fr) minmax(140px, 190px) 90px auto auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.riga-biglietto input,
.riga-biglietto select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--carta);
}

.riga-biglietto input:focus,
.riga-biglietto select:focus {
  outline: none;
  border-color: var(--rosso);
  background: var(--bianco);
  box-shadow: 0 0 0 3px rgba(139, 30, 45, 0.12);
}

.riga-biglietto input:disabled {
  color: var(--testo-tenue);
  background: var(--rosso-chiaro);
}

.numero-biglietto {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  color: var(--testo-tenue);
  text-align: right;
}

/* La casella del nome e' un selettore con ricerca: dentro la griglia si
   comporta come gli altri campi. */
.riga-biglietto .scelta-persona input {
  padding: 8px 10px;
  font-size: 14px;
}

/* Sullo schermo stretto la riga si impila invece di comprimersi */
@media (max-width: 720px) {
  .riga-biglietto {
    grid-template-columns: 26px 1fr 1fr auto;
    row-gap: 4px;
  }
  .riga-biglietto .b-nome-box,
  .riga-biglietto .b-cognome {
    grid-column: span 2;
  }
}

/* ---------------------------------------------------------------------
   Elenco di scelta dentro una modale (app/scelta-serata.js): spettacoli
   e poi date. Le voci sono grandi e cliccabili: si usa anche di corsa.
   --------------------------------------------------------------------- */

.elenco-scelta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}

.voce-scelta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--bianco);
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.voce-scelta:hover {
  border-color: var(--rosso);
  background: var(--rosso-chiaro);
}

/* La scheda spettacolo con la sua barra di azioni sotto: il link copre
   tutta la scheda, i bottoni stanno fuori (un bottone dentro un <a> non
   e' cliccabile in modo affidabile). */
.scheda-spettacolo-blocco {
  display: flex;
  flex-direction: column;
}

.scheda-spettacolo-blocco .scheda-spettacolo {
  flex: 1;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.azioni-scheda {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-top: 1px solid var(--bordo);
  border-radius: 0 0 var(--raggio) var(--raggio);
}


/* Chi è già entrato resta in elenco ma si vede a colpo d'occhio che è
   fatto: con la fila davanti conta più il contrasto della bellezza. */
.tabella tr.entrato td {
  background: var(--ok-sfondo);
}

.tabella tr.entrato td:first-child {
  box-shadow: inset 3px 0 0 var(--ok);
}

.campo-prezzo,
.campo-pagamento {
  padding: 6px 8px;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bianco);
  max-width: 120px;
}

/* ---------------------------------------------------------------------
   Botteghino: la barra di comando.
   Con la fila davanti serve una riga sola — ricerca, filtro, contatore —
   e i totali si aprono solo quando li si vuole guardare.
   --------------------------------------------------------------------- */

.barra-botteghino {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

/* Casella di ricerca e freccetta viaggiano appaiate: il blocco si allarga
   e si stringe insieme, e la freccetta non finisce mai su una riga sua. */
.riga-cerca {
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.barra-botteghino input[type='search'] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  background: var(--carta);
}

.barra-botteghino input[type='search']:focus {
  outline: none;
  border-color: var(--rosso);
  background: var(--bianco);
  box-shadow: 0 0 0 3px rgba(139, 30, 45, 0.12);
}

.barra-botteghino select {
  padding: 9px 10px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--carta);
}

.contatore-serata {
  font-size: 14px;
  color: var(--testo-tenue);
  white-space: nowrap;
}

/* Compare solo quando c'e' qualcosa di selezionato: e' un'azione in corso,
   quindi si vede. */
.barra-selezione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--rosso-chiaro);
  border: 1px solid var(--rosso);
  border-radius: var(--raggio);
}

/* Titolo che apre e chiude una sezione (gli "Accomodati") */
.titolo-pieghevole {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  margin-bottom: 10px;
}

.titolo-pieghevole:hover {
  border-color: var(--rosso);
}

/* Piccolo link dentro una riga di tabella ("seleziona il gruppo") */
.collegamento-piccolo {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--rosso);
  text-decoration: underline;
  cursor: pointer;
}

/* Il totale in fondo alla scheda cassa */
.riga-totale-cassa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 14px;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

/* Tariffa, costo e pagamento non vanno mai spezzati su due righe: sono
   colonne strette e «10,00 €» a capo si legge male in fretta. */
.tabella td.no-a-capo {
  white-space: nowrap;
}

/* Serve davvero: senza, `display: flex` batte l'attributo hidden e il blocco
   di gruppo resta a video anche con un nome solo in cassa. */
.riga-totale-cassa[hidden] {
  display: none;
}

/* Gia' pagato ma non ancora entrato: un segno discreto, non un allarme */
.tabella tr.pagato td:first-child {
  box-shadow: inset 3px 0 0 var(--avviso-bordo);
}

/* Messo nel carrello: si deve vedere da lontano chi si sta per incassare,
   perche' il carrello si riempie una ricerca alla volta. */
.tabella tr.nel-carrello td {
  background: var(--rosso-chiaro);
}

.tabella tr.nel-carrello td:first-child {
  box-shadow: inset 3px 0 0 var(--rosso);
}

/* ---------------------------------------------------------------------
   Botteghino: le icone di chi porta gente.
   «Mi manda Tizio» e' la frase piu' detta all'ingresso: un tocco
   sull'attore e restano i suoi. Striscia che scorre di lato, cosi' anche
   con dieci attori non ruba due righe di schermo al telefono.
   --------------------------------------------------------------------- */

.chip-referenti {
  display: flex;
  flex-wrap: nowrap; /* una riga sola: con dodici attori si scorre di lato */
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  margin-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}

.chip-referenti[hidden] {
  display: none;
}

.chip-referente {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 6px 12px 6px 6px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  color: var(--testo);
  cursor: pointer;
  white-space: nowrap;
}

/* Il chip «Tutti» non ha il tondo: si tiene il fiato di un bottone normale */
.chip-referente[data-referente=''] {
  padding: 6px 14px;
}

.chip-referente:hover {
  border-color: var(--rosso);
}

.chip-referente.attivo {
  background: var(--rosso);
  border-color: var(--rosso);
  color: var(--bianco);
}

.chip-tondo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rosso-chiaro);
  color: var(--rosso);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.chip-referente.attivo .chip-tondo {
  background: rgba(255, 255, 255, 0.22);
  color: var(--bianco);
}

.chip-conto {
  font-size: 12px;
  color: var(--testo-tenue);
}

.chip-referente.attivo .chip-conto {
  color: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------------------
   Botteghino: le schede della cassa.
   Un rettangolo per biglietto invece di una riga di tabella. Il nome e'
   la cosa che si cerca con lo sguardo mentre si parla con la persona,
   quindi e' grande; il resto scende sotto in ordine di gesto: quanto
   costa, come paga, cosa si preme.
   --------------------------------------------------------------------- */

.schede-cassa {
  display: grid;
  gap: 12px;
}

.scheda-biglietto {
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 14px;
  background: var(--bianco);
}

.scheda-biglietto.pagato {
  border-left-color: var(--avviso-bordo);
  background: var(--avviso-sfondo);
}

.scheda-biglietto.entrato {
  border-left-color: var(--ok);
  background: var(--ok-sfondo);
}

.scheda-testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Il nome e' la cosa che si cerca con lo sguardo mentre si parla con la
   persona: qui e' il pezzo piu' grande della pagina, e non va a capo stretto. */
.scheda-nome {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.2px;
}

.scheda-tariffa {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Che biglietto e': si legge senza rileggere, e l'omaggio si distingue dal
   pagante gia' dal colore — la sera e' la differenza fra incassare e no. */
.etichetta-tariffa {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--rosso);
  background: var(--rosso-chiaro);
  color: var(--rosso);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.etichetta-tariffa.tipo-ridotto {
  border-color: var(--avviso-bordo);
  background: var(--avviso-sfondo);
  color: #7a5c11;
}

.etichetta-tariffa.tipo-omaggio {
  border-color: #b8ddc8;
  background: var(--ok-sfondo);
  color: var(--ok);
}

.scheda-prezzo {
  font-size: 20px;
  font-weight: 700;
}

.scheda-strumenti {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.scheda-incasso {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--bordo);
}

.scheda-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scheda-campo .campo-prezzo,
.scheda-campo .campo-pagamento {
  padding: 9px 10px;
  font-size: 16px; /* sotto i 16px iOS ingrandisce la pagina da solo */
  max-width: none;
}

.scheda-campo .campo-prezzo {
  width: 110px;
}

.scheda-totale {
  margin-left: auto;
  text-align: right;
}

.scheda-totale-valore {
  font-size: 20px;
}

.scheda-azioni {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.scheda-insegna {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-right: auto;
}

/* Bottoni da dito: la sera si preme in fretta, spesso col telefono in mano */
.bottone-grosso {
  padding: 12px 22px;
  font-size: 16px;
  min-height: 46px;
}

/* Con molte schede la finestra deve scorrere dentro, non uscire dallo schermo */
.modale {
  max-height: 90vh;
  overflow-y: auto;
}

@media (max-width: 640px) {
  /* Sul telefono la ricerca si prende tutta la prima riga e il resto le sta
     sotto: la barra e' appiccicata in alto, se cresce mangia l'elenco. */
  .barra-botteghino {
    gap: 8px;
    padding: 8px 10px;
  }

  .barra-botteghino input[type='search'] {
    flex: 1 1 100%;
  }

  .contatore-serata {
    font-size: 13px;
  }

  .modale {
    padding: 16px;
    max-height: 94vh;
  }

  .sfondo-modale {
    padding: 10px;
    align-items: flex-start;
  }

  .scheda-nome {
    font-size: 24px;
  }

  .scheda-azioni .bottone-grosso {
    flex: 1 1 140px;
  }

  .scheda-totale {
    margin-left: 0;
    text-align: left;
  }
}

/* ---------------------------------------------------------------------
   Telefono e tablet: il botteghino si usa in piedi, con una mano.
   La regola e' una sola — a video resta quello che serve al gesto in
   corso. Il resto si apre quando lo si chiede.
   --------------------------------------------------------------------- */

/* Il bottone a panino esiste solo sullo schermo piccolo */
.bottone-menu {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--bianco);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  margin-left: auto;
}

.solo-telefono {
  display: none;
}

/* Che biglietto e', in formato riga d'elenco */
.riga-compatta {
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 14px;
  color: var(--testo-tenue);
}

.etichetta-tariffa.piccola {
  font-size: 11px;
  padding: 2px 8px;
}

.segno-cassa {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--rosso);
}

/* Il secondo piano della barra: filtri, contatore e totali. In prima fila
   restano solo la ricerca e il bottone della cassa. */
.barra-altro {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--bordo);
}

.barra-altro[hidden] {
  display: none;
}

/* La freccetta da sola sarebbe un bersaglio da due centimetri quadrati */
.bottone-freccia {
  min-width: 44px;
  min-height: 38px;
}

/* Filtro acceso a pannello chiuso: si deve vedere, o l'elenco filtrato
   sembra un elenco vuoto. */
.bottone-piccolo.attivo {
  background: var(--rosso);
  border-color: var(--rosso);
  color: var(--bianco);
}

.allarme-cassa {
  color: var(--errore);
  font-weight: 700;
}

/* Il titolo della serata e' anche il bottone che apre i comandi di serata */
.titolo-cliccabile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.freccia-titolo {
  font-size: 16px;
  color: var(--testo-tenue);
}

.menu-serata {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.menu-serata[hidden] {
  display: none;
}

.azioni-riga {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ---------------------------------------------------------------------
   Fino al tablet in orizzontale il menu e' una tendina.
   La soglia non e' il telefono ma il punto in cui le voci in fila non
   ci stanno piu' su una riga: due righe di navbar rubano spazio
   all'elenco, ed e' l'elenco che serve la sera.
   --------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .bottone-menu {
    display: inline-flex;
  }

  .pannello-menu {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    right: 12px;
    z-index: 60;
    min-width: 240px;
    padding: 8px;
    background: var(--rosso-scuro);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
  }

  .navbar-interna.menu-aperto .pannello-menu {
    display: block;
  }

  .pannello-menu .voci {
    flex-direction: column;
    gap: 2px;
  }

  .pannello-menu .voci a,
  .pannello-menu .voci .voce-presto {
    padding: 11px 12px;
    font-size: 15px;
  }

  .pannello-menu .utente {
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }
}

@media (max-width: 720px) {
  .marchio-nome {
    font-size: 16px;
  }

  .contenuto {
    padding: 16px 12px 60px;
  }

  h1 {
    font-size: 22px;
  }

  .barra-titolo {
    margin-bottom: 14px;
  }

  .solo-telefono {
    display: inline-flex;
  }

  .riga-compatta {
    display: flex;
  }

  /* Le colonne di dettaglio si travasano nella riga sotto il nome, e la
     casella di spunta sparisce: al suo posto c'e' la pressione prolungata. */
  .tabella-compatta .col-dettaglio,
  .tabella-compatta .col-spunta,
  .tabella-compatta thead {
    display: none;
  }

  .tabella-compatta td {
    padding: 10px 12px;
  }

  /* La riga si tocca tutta: niente selezione del testo, niente menu lungo */
  .tabella-ingressi tbody tr {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  /* I bottoni compaiono solo dentro la riga aperta: chiusa, la cella
     sparisce del tutto, cosi' non lascia neanche il suo spazio bianco. */
  .tabella-ingressi tbody tr:not(.riga-aperta) td:last-child {
    display: none;
  }

  .tabella-ingressi tr.riga-aperta .azioni-riga {
    display: flex;
    justify-content: stretch;
    gap: 8px;
    padding-bottom: 4px;
  }

  .tabella-ingressi tr.riga-aperta .azioni-riga > * {
    flex: 1 1 auto;
    min-height: 44px;
  }

  /* Ogni riga occupa tutta la larghezza: le celle vanno in colonna */
  .tabella-compatta tbody tr,
  .tabella-compatta tbody td {
    display: block;
    width: 100%;
  }

  .tabella-compatta tbody td:not(:first-child) {
    padding-top: 0;
  }

  .tabella-compatta tbody tr {
    border-bottom: 1px solid var(--bordo);
  }

  /* Le celle vuote non devono lasciare la loro aria */
  .tabella-compatta tbody td:empty {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   Nuova prenotazione e ricerca sulle altre date.
   --------------------------------------------------------------------- */

.riga-biglietti {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.riga-biglietti .campo-pagamento {
  max-width: none;
  flex: 1 1 200px;
  padding: 9px 10px;
  font-size: 16px;
}

.riga-biglietti .campo-prezzo {
  width: 78px;
  padding: 9px 10px;
  font-size: 16px;
}

/* Il riquadro «l'ho trovata su un'altra sera»: si nota, ma non urla —
   nove volte su dieci non c'e' niente da spostare. */
.altre-date {
  border-color: var(--avviso-bordo);
  background: var(--avviso-sfondo);
}

.altre-date[hidden] {
  display: none;
}

.voce-altra-data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--avviso-bordo);
}

.voce-altra-data:first-child {
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 720px) {
  .voce-altra-data > button {
    width: 100%;
  }
}

/* La scheda di una prenotazione: i dati in coppie etichetta/valore, cosi'
   si scorrono con l'occhio invece di leggerli in fila. */
.dati-scheda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 18px;
  padding: 14px;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

.azioni-altra-data {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.azioni-modale {
  align-items: center;
}

@media (max-width: 720px) {
  .azioni-altra-data {
    width: 100%;
  }

  .azioni-altra-data > button {
    flex: 1 1 auto;
    min-height: 44px;
  }

  .azioni-modale {
    flex-wrap: wrap;
  }
}

/* La serata di oggi in mezzo alle altre: e' quella che si apre nove volte
   su dieci, quindi si vede prima di leggere la data. Verde come tutto il
   resto che nel botteghino vuol dire "questo e' fatto / questo e' adesso". */
.voce-scelta.oggi {
  border-color: var(--ok);
  border-left-width: 4px;
  background: var(--ok-sfondo);
}

.voce-scelta.oggi:hover {
  border-color: var(--ok);
  background: #dff0e6;
}

.voce-scelta .badge {
  margin-left: 8px;
  vertical-align: 2px;
}

/* ---------------------------------------------------------------------
   Icone disegnate, non emoji: l'emoji cambia faccia da un sistema
   all'altro e in una barra sobria stona. Tutte a tratto, ereditano il
   colore del bottone che le ospita.
   --------------------------------------------------------------------- */

.icona-bottone,
.icona-lente,
.bottone-nuova svg,
.bottone-svuota svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icona-bottone {
  vertical-align: -3px;
}

/* La lente sta dentro la casella, non nel testo del segnaposto: cosi'
   resta ferma anche mentre si scrive. */
.campo-cerca {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.campo-cerca .icona-lente {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--testo-tenue);
  pointer-events: none;
}

/* Vale ovunque ci sia la lente dentro il campo, non solo al botteghino:
   senza, l'icona finisce sopra il testo del segnaposto. */
.campo-cerca input[type='search'] {
  padding-left: 38px;
}

.bottone-nuova,
.bottone-svuota {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Il titolo della serata e il bottone per aggiungere restano appaiati:
   se il bottone va a capo sembra appartenere all'elenco sotto. */
#serata > .barra-titolo {
  flex-wrap: nowrap;
  align-items: center;
}

#serata > .barra-titolo .bottone-nuova {
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  /* Stretti: restano i segni, il nome dell'azione e' nel title */
  .bottone-nuova .testo-bottone,
  .bottone-svuota .testo-bottone {
    display: none;
  }

  .bottone-nuova,
  .bottone-svuota {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.icona-bottone.piccola {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

/* Una spunta con la sua frase accanto, allineate: tornava scritta a mano
   in tre pagine con lo stesso blocco di stili inline. */
.riga-spunta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  cursor: pointer;
}

.riga-spunta input {
  flex: 0 0 auto;
}

/* Nelle pagine di gestione le azioni di riga restano sempre visibili: non
   c'e' la fila che aspetta, e nascondere costerebbe un tocco in piu'. */
@media (max-width: 720px) {
  .tabella-compatta:not(.tabella-ingressi) .azioni-riga {
    justify-content: flex-start;
    padding-bottom: 4px;
  }

  .tabella-compatta:not(.tabella-ingressi) .azioni-riga > * {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------
   Il biglietto nel modulo, sul telefono.
   In orizzontale sono sette colonne che non stanno in 375 px: si
   impilano dentro un riquadro, con il numero che tiene insieme il
   gruppo e la ✕ in alto a destra dove non si preme per sbaglio.
   --------------------------------------------------------------------- */

@media (max-width: 720px) {
  .riga-biglietto {
    grid-template-columns: 30px 1fr auto;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px;
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
  }

  .riga-biglietto .numero-biglietto {
    grid-column: 1;
    grid-row: 1;
  }

  .riga-biglietto .b-nome-box {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .riga-biglietto .b-togli {
    grid-column: 3;
    grid-row: 1;
    min-height: 38px;
  }

  .riga-biglietto .b-cognome {
    grid-column: 2 / span 2;
    grid-row: 2;
  }

  .riga-biglietto .b-tariffa {
    grid-column: 2 / span 2;
    grid-row: 3;
  }

  .riga-biglietto .b-prezzo {
    grid-column: 2;
    grid-row: 4;
  }

  .riga-biglietto > .meta {
    grid-column: 3;
    grid-row: 4;
    align-self: center;
  }

  /* Sotto i 16px iOS ingrandisce la pagina da solo a ogni tocco */
  .riga-biglietto input,
  .riga-biglietto select {
    font-size: 16px;
    padding: 10px;
  }

  /* La scheda di una prenotazione: i dati in colonna, non in due colonne
     strette che spezzano i numeri di telefono. */
  .dati-scheda {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
}

/* Celle di servizio che tornavano scritte a mano con gli stili inline */
.cella-vuota {
  text-align: center;
  color: var(--testo-tenue);
}

.cella-spunta {
  text-align: center;
}

@media (max-width: 720px) {
  /* Le tabelle che sono anche moduli — compagnia, date — non possono
     nascondere le colonne: quei campi si modificano. Impilate perdono
     pero' l'intestazione, quindi ogni cella si porta dietro la sua. */
  .tabella-compatta tbody td[data-etichetta]::before {
    content: attr(data-etichetta);
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    color: var(--testo-tenue);
  }

  .tabella-compatta tbody td[data-etichetta] {
    padding-top: 8px;
  }

  .cella-spunta {
    text-align: left;
  }

  .tabella-compatta .cella-spunta input {
    width: 20px;
    height: 20px;
  }

  /* Il modulo «aggiungi alla compagnia» e quello della data nuova: i
     campi si allargano invece di restare in colonne da 90 px. */
  .riga-dinamica select,
  .riga-dinamica input {
    font-size: 16px;
    padding: 10px;
  }

  .riga-dinamica > button {
    grid-column: 1 / -1;
    min-height: 44px;
  }

  /* La locandina non deve prendersi mezzo schermo prima del modulo */
  .copertina-grande {
    width: 108px;
    height: 152px;
    flex: 0 0 108px;
    font-size: 32px;
  }
}

/* ---------------------------------------------------------------------
   Locandina e dati della scheda, affiancati.
   Sul telefono la locandina non va sopra a tutta pagina: sta di lato al
   suo bottone, cosi' si vede che si tratta di lei e si risparmia mezzo
   schermo prima di arrivare ai campi.
   --------------------------------------------------------------------- */

.zona-scheda {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.blocco-locandina {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.blocco-locandina .aiuto-campo {
  margin-top: 6px;
  max-width: 220px;
}

@media (min-width: 721px) {
  /* Su schermo largo torna in colonna sotto la locandina */
  .zona-scheda > .blocco-locandina {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 0;
  }

  .zona-scheda > .blocco-locandina .aiuto-campo {
    max-width: 160px;
  }
}

@media (max-width: 720px) {
  /* La tariffa e' un gruppo di campi, non quattro campi sparsi: si chiude
     in un riquadro con la ✕ dove non si preme per sbaglio. */
  .riga-tariffa {
    grid-template-columns: 1fr auto !important;
    gap: 8px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
  }

  .riga-tariffa .campo:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .riga-tariffa .togli-riga {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    padding: 10px;
  }

  .riga-tariffa .campo:nth-child(2),
  .riga-tariffa .campo:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  /* Il bottone deve stare ACCANTO alla locandina, non sotto: altrimenti il
     blocco si mangia lo stesso mezzo schermo che volevamo risparmiare. */
  .blocco-locandina {
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .blocco-locandina > div:last-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .blocco-locandina .aiuto-campo {
    max-width: none;
  }

  .copertina-grande {
    width: 96px;
    height: 134px;
    flex: 0 0 96px;
    font-size: 28px;
  }
}

/* Riga del cast nel modulo di creazione: persona, ruolo e la ✕ */
.riga-cast {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  align-items: end;
  gap: 8px;
  margin-bottom: 8px;
}

.riga-cast .campo {
  margin-bottom: 0;
}

.riga-cast select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  background: var(--carta);
}

/* ---------------------------------------------------------------------
   Respiro dei moduli sul telefono.
   Gli stessi campi che su un monitor stanno comodi, su 375 px diventano
   una colonna lunghissima: un modulo che si scorre per mezzo minuto non
   si compila, si abbandona. Si stringe tutto tranne l'altezza utile al
   dito e il corpo del testo, che restano dove sono.
   --------------------------------------------------------------------- */

@media (max-width: 720px) {
  .pannello {
    padding: 14px;
    margin-bottom: 14px;
  }

  .campo {
    margin-bottom: 10px;
  }

  .campo label {
    font-size: 12px;
    margin-bottom: 3px;
  }

  .campo input,
  .campo select,
  .campo textarea {
    padding: 9px 11px;
    font-size: 16px; /* sotto i 16 iOS ingrandisce la pagina da solo */
  }

  .due-colonne {
    gap: 0 12px;
  }

  h2 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  h3 {
    font-size: 15px;
  }

  .aiuto-campo {
    margin-top: 3px;
  }

  .azioni-modale {
    margin-top: 14px;
  }

  /* Persona e ruolo in colonna, la ✕ accanto alla persona */
  .riga-cast {
    grid-template-columns: 1fr auto;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
  }

  .riga-cast .cast-persona {
    grid-column: 1;
    grid-row: 1;
  }

  .riga-cast .togli-riga {
    grid-column: 2;
    grid-row: 1;
    padding: 10px;
  }

  .riga-cast .campo:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .riga-cast select {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------------
   Report (report.html).

   La parte che conta e' «chi ha portato gente»: una riga per referente,
   con una barra che fa vedere a colpo d'occhio chi ne ha portati di piu'
   e, aprendola, i nomi. Il numero da solo non basta — in compagnia la
   domanda successiva e' sempre «chi sono?».
   --------------------------------------------------------------------- */

.scheda-referente {
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  margin-bottom: 8px;
  overflow: hidden;
}

.testata-referente {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) auto;
  align-items: center;
  gap: 6px 14px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.testata-referente:hover {
  background: var(--rosso-chiaro);
}

.referente-nome {
  font-weight: 600;
}

.referente-numeri {
  justify-self: end;
  white-space: nowrap;
}

.referente-numeri strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  color: var(--rosso);
}

/* La barra sta sotto i due testi e occupa tutta la riga: e' un confronto,
   non un dato da leggere. */
.barra-quota {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--rosso-chiaro);
  overflow: hidden;
}

.barra-quota > span {
  display: block;
  height: 100%;
  background: var(--rosso);
  border-radius: 999px;
}

.ospiti {
  display: block;
  margin: 0;
  padding: 0 14px 12px;
  list-style: none;
  border-top: 1px solid var(--bordo);
}

/* `hidden` da solo non basta quando la classe ha un display (CLAUDE.md
   "Gotcha ereditati"): senza questa riga l'elenco resta a video. */
.ospiti[hidden] {
  display: none;
}

.ospite {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--bordo);
}

.ospite:last-child {
  border-bottom: 0;
}

.ospite-nome {
  min-width: 150px;
}

.ospite-presente .ospite-nome {
  font-weight: 600;
}

.ospite-stato {
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .testata-referente {
    grid-template-columns: 1fr;
  }

  .referente-numeri {
    justify-self: start;
  }

  .ospite-stato {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------
   Utenti e permessi (utenti.html).

   Due cose in pagina hanno peso diverso: le richieste da approvare — che
   aspettano una decisione — e l'elenco di chi c'e' gia'. Le prime sono
   schede, il secondo una tabella.
   --------------------------------------------------------------------- */

.riga-interruttore {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.riga-interruttore input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.riga-interruttore .meta {
  display: block;
}

.scheda-richiesta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--bianco);
  border: 1px solid var(--avviso-bordo);
  border-left: 4px solid var(--avviso-bordo);
  border-radius: var(--raggio);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.scheda-richiesta[hidden] {
  display: none;
}

/* Come si presenta chi chiede l'accesso: e' la frase su cui si decide,
   quindi si legge come una citazione e non come una riga di dati. */
.motivo-richiesta {
  margin: 6px 0;
  font-style: italic;
  color: var(--testo);
}

.azioni-richiesta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.profili-rapidi {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.gruppo-permessi {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 10px 14px 14px;
  margin: 0 0 12px;
}

.gruppo-permessi legend {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  padding: 0 6px;
  color: var(--rosso);
}

.voce-permesso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  cursor: pointer;
}

.voce-permesso input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Il codice del permesso sta sotto la descrizione: serve a chi legge i
   messaggi d'errore del backend, non a chi spunta le caselle. */
.voce-permesso .meta {
  display: block;
  font-size: 12px;
}

/* La modale dei permessi e' lunga: scorre da sola invece di uscire dallo
   schermo e portarsi via i bottoni Salva e Annulla. */
#modale-permessi .modale {
  max-height: 88vh;
  overflow-y: auto;
}

@media (max-width: 720px) {
  .scheda-richiesta {
    flex-direction: column;
  }

  .azioni-richiesta {
    width: 100%;
  }

  .azioni-richiesta button {
    flex: 1;
  }
}

/* ---------------------------------------------------------------------
   L'omonimo in rubrica (replica.html).

   Compare dentro un .messaggio mentre si scrive chi prenota: «c'e' gia'
   un Mario Rossi, e' lui?». Non blocca niente — gli omonimi esistono — ma
   la risposta cambia cosa fa il database, quindi va data una volta.
   --------------------------------------------------------------------- */

.elenco-omonimi {
  margin: 8px 0;
}

.voce-omonimo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 5px 0;
  border-top: 1px solid rgba(36, 31, 31, 0.08);
}

/* I bottoni dentro l'avviso restano piccoli e non prendono tutta la riga:
   la frase e' la cosa da leggere, loro sono la risposta. */
.messaggio .bottone-piccolo {
  background: var(--bianco);
  margin-top: 4px;
}


/* ---------- Stampa ----------
   Il rendiconto finisce spesso su carta, in mano a chi tiene i conti
   dell'associazione: si tolgono barra, filtri e bottoni, e le tabelle
   non si spezzano a meta' riga. */

@media print {
  body {
    background: var(--bianco);
    font-size: 12px;
  }

  #navbar,
  .nascondi-in-stampa,
  .azioni-titolo,
  .aiuto-campo {
    display: none !important;
  }

  .contenuto {
    max-width: none;
    padding: 0;
  }

  .pannello,
  .scheda-referente {
    box-shadow: none;
    break-inside: avoid;
  }

  .tabella tr,
  .ospite {
    break-inside: avoid;
  }

  /* Su carta le colonne di dettaglio servono tutte, anche se la pagina
     era stata aperta su uno schermo stretto. */
  .tabella-compatta .col-dettaglio {
    display: table-cell;
  }

  .tabella-compatta thead {
    display: table-header-group;
  }

  .solo-telefono {
    display: none !important;
  }
}