/* =====================================================================
   Presenta — foglio di stile
   =====================================================================
   Due pubblici, due telai:
   - la REGIA sta in mano a chi presenta, spesso in piedi e con l'altra
     mano occupata: anteprima grande, due pulsanti enormi in basso, a
     portata di pollice. Va bene anche da laptop (frecce della tastiera).
   - il PUBBLICO non deve fare niente: il deck occupa tutto lo schermo, e
     sopra resta solo un segnale discreto quando la rete fa i capricci.

   Colori di Omni (DESIGN.md § Colore), chiaro e scuro, come web_richieste.
   ===================================================================== */

:root {
  --sfondo:        #FBF9F6;
  --carta:         #FFFFFF;
  --contenitore:   #F2EEE8;
  --bordo:         #E3DDD3;
  --testo:         #1B1A18;
  --testo-tenue:   #57534E;
  --primario:      #0B5C96;
  --primario-su:   #FFFFFF;
  --primario-lieve:#E7F0F8;
  --accento:       #EA580C;
  --errore:        #B3261E;
  --errore-lieve:  #FCEDEC;
  --bene:          #1F6F43;

  --raggio:        14px;
  --raggio-piccolo: 10px;
  --ombra:         0 1px 2px rgba(27, 26, 24, .06), 0 4px 14px rgba(27, 26, 24, .05);
  --colonna:       560px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo:        #141310;
    --carta:         #1F1D19;
    --contenitore:   #2A2723;
    --bordo:         #3A3630;
    --testo:         #F3EFE8;
    --testo-tenue:   #B8B2A8;
    --primario:      #79BDEE;
    --primario-su:   #10202C;
    --primario-lieve:#1B2A36;
    --accento:       #FF9E5C;
    --errore:        #F5A79C;
    --errore-lieve:  #34211E;
    --bene:          #7FD0A2;
    --ombra:         0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--sfondo);
  color: var(--testo);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

code { font-size: .92em; background: var(--contenitore); padding: 1px 5px; border-radius: 6px; }

/* ---------------------------------------------------------------------
   Pagine semplici (ingresso, accesso, elenco)
   --------------------------------------------------------------------- */
.pagina {
  min-height: 100%;
  padding: calc(24px + var(--safe-t)) 16px calc(24px + var(--safe-b));
  display: flex;
  justify-content: center;
}

.colonna { width: 100%; max-width: var(--colonna); }
.colonna.centrata {
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  min-height: calc(100dvh - 48px - var(--safe-t) - var(--safe-b));
}

.marchio {
  margin: 0;
  font-weight: 800; font-size: 20px; letter-spacing: -.02em;
  color: var(--primario);
}
.marchio span { color: var(--testo-tenue); font-weight: 600; }

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

.titolo { margin: 0 0 6px; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
.sotto { margin: 0 0 18px; color: var(--testo-tenue); }

.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.campo input {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  background: var(--sfondo);
  color: var(--testo);
}
.campo input:focus { outline: 2px solid var(--primario); outline-offset: 1px; border-color: transparent; }

.input-codice {
  text-transform: uppercase;
  font-size: 28px !important;
  font-weight: 700;
  letter-spacing: .3em;
  text-align: center;
}

.errore-campo { margin: 6px 0 0; color: var(--errore); font-size: 14px; }

.avviso-blocco {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--raggio-piccolo);
  background: var(--errore-lieve);
  color: var(--errore);
  font-size: 14px;
}

.link-discreto {
  align-self: center;
  color: var(--testo-tenue);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------
   Pulsanti
   --------------------------------------------------------------------- */
.bottone {
  font: inherit; font-weight: 600;
  border: 0; border-radius: 999px;
  padding: 11px 20px;
  min-height: 44px;
  cursor: pointer;
}
.bottone:disabled { opacity: .5; cursor: default; }
.bottone-primario { background: var(--primario); color: var(--primario-su); }
.bottone-tonale { background: var(--primario-lieve); color: var(--primario); }
.bottone-testo { background: transparent; color: var(--primario); padding-inline: 10px; }
.bottone-largo { width: 100%; }

.bottone-icona {
  font: inherit; font-size: 30px; line-height: 1;
  width: 44px; height: 44px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--testo);
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   Elenco dei deck
   --------------------------------------------------------------------- */
.testata {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}

.titolo-sezione {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--testo-tenue);
  margin: 24px 0 10px;
}

.elenco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.scheda {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 16px;
  display: flex; align-items: center; gap: 14px;
}
.scheda-testo { flex: 1; min-width: 0; }
.scheda-titolo { margin: 0; font-weight: 700; }
.scheda-sotto { margin: 2px 0 0; color: var(--testo-tenue); font-size: 14px; }
.scheda-azioni { display: flex; gap: 6px; flex: none; }

.scheda.in-onda { border-color: var(--accento); }

.modulo-link { align-items: flex-end; }
.campo-link { flex: 1; min-width: 0; margin-bottom: 0; }

/* Caricamento: scheletri, non uno spinner. */
.scheletro {
  height: 76px;
  background: linear-gradient(90deg, var(--contenitore) 0%, var(--carta) 50%, var(--contenitore) 100%);
  background-size: 200% 100%;
  animation: luccica 1.4s ease-in-out infinite;
}
@keyframes luccica { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------------------------------------------------------------------
   Regia
   --------------------------------------------------------------------- */
.regia {
  height: 100dvh;
  display: flex; flex-direction: column;
  padding: calc(8px + var(--safe-t)) 12px calc(12px + var(--safe-b));
  gap: 10px;
  max-width: 720px; margin: 0 auto;
}

.regia-testata { display: flex; align-items: center; gap: 8px; }
.regia-info { flex: 1; min-width: 0; }
.regia-titolo {
  margin: 0; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.regia-sotto { margin: 2px 0 0; display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--testo-tenue); }

.chip-codice {
  font-weight: 800; letter-spacing: .15em;
  background: var(--primario-lieve); color: var(--primario);
  padding: 1px 8px; border-radius: 6px;
}

.regia-avviso { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }

.anteprima { flex: 1; min-height: 0; position: relative; }
.anteprima-schermo {
  position: absolute; top: 0; left: 50%;
  transform-origin: top left;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--bordo);
  background: #fff;
  box-shadow: var(--ombra);
}
.anteprima-schermo iframe {
  display: block; border: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.anteprima-lobby {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px;
  background: var(--sfondo); color: var(--testo-tenue);
  font-size: 22px;
}
.lobby-grande { margin: 0 0 12px; font-size: 44px; font-weight: 800; color: var(--testo); }

.regia-stato {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 14px; color: var(--testo-tenue);
  min-height: 21px;
}
.contatore { font-weight: 700; color: var(--testo); font-variant-numeric: tabular-nums; }
.prossima { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Deck 16:9: l'anteprima è una fascia larga in alto, e lo spazio che resta
   va alle note — che con un deck da proiettore sono il copione. */
.regia-orizzontale .anteprima { flex: none; aspect-ratio: 16 / 9; width: 100%; }
.regia-note {
  min-height: 0;
  overflow-y: auto;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  padding: 12px 14px;
}
.regia-orizzontale .regia-note { flex: 1; }
.regia:not(.regia-orizzontale) .regia-note { max-height: 22dvh; flex: none; }
.regia-note-testo { margin: 0; font-size: 17px; line-height: 1.5; }

.regia-comandi { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.bottone-regia {
  font: inherit; font-size: 20px; font-weight: 700;
  min-height: 76px;
  border: 1px solid var(--bordo);
  border-radius: 20px;
  background: var(--carta); color: var(--testo);
  cursor: pointer;
  touch-action: manipulation;
}
.bottone-regia:disabled { opacity: .4; cursor: default; }
.bottone-regia-avanti { background: var(--primario); color: var(--primario-su); border-color: transparent; }
.bottone-regia:active:not(:disabled) { transform: scale(.98); }

.regia-termina { align-self: center; color: var(--errore); font-size: 14px; min-height: 36px; }

/* QR a tutto schermo: sempre chiaro, anche col tema scuro — un QR in
   negativo non lo leggono tutte le fotocamere. */
.qr-velo {
  position: fixed; inset: 0; z-index: 50;
  background: #FFFFFF; color: #1B1A18;
  display: flex; align-items: center; justify-content: center;
  padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
}
.qr-carta { width: 100%; max-width: 520px; text-align: center; }
.qr-titolo { margin: 0 0 12px; font-size: 22px; font-weight: 700; }
.qr-codice svg { width: min(78vw, 58vh, 440px); height: auto; display: block; margin: 0 auto; }
.qr-indirizzo { margin: 10px 0 0; color: #57534E; font-size: 14px; word-break: break-all; }
.qr-oppure { margin: 14px 0 0; color: #57534E; font-size: 14px; }
.qr-grande { margin: 0; font-size: 44px; font-weight: 800; letter-spacing: .25em; color: #0B5C96; }
.qr-azioni { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.qr-velo .bottone-tonale { background: #E7F0F8; color: #0B5C96; }
.qr-velo .bottone-primario { background: #0B5C96; color: #FFFFFF; }

/* ---------------------------------------------------------------------
   Pubblico
   --------------------------------------------------------------------- */
.pubblico { position: fixed; inset: 0; background: var(--sfondo); }

.pubblico-deck {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
  background: #fff;
}

.pubblico-velo {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: calc(24px + var(--safe-t)) 16px calc(24px + var(--safe-b));
  display: flex; justify-content: center;
  background: var(--sfondo);
}

.carta-attesa { text-align: center; }
.carta-attesa .titolo { font-size: 22px; }
.attesa-scheletro { height: 120px; border-radius: var(--raggio-piccolo); }
.attesa-scheletro {
  background: linear-gradient(90deg, var(--contenitore) 0%, var(--carta) 50%, var(--contenitore) 100%);
  background-size: 200% 100%;
  animation: luccica 1.4s ease-in-out infinite;
}

.attesa-segno {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px;
  font-weight: 600; color: var(--primario);
}
.punto-vivo {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accento);
  animation: pulsa 1.6s ease-in-out infinite;
}
@keyframes pulsa { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

.pubblico-segnale {
  position: fixed; left: 50%; bottom: calc(14px + var(--safe-b));
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(20, 19, 16, .82); color: #FFFFFF;
  font-size: 13px; font-weight: 600;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
}

.avviso-volante {
  position: fixed; left: 50%; bottom: calc(20px + var(--safe-b));
  transform: translateX(-50%);
  margin: 0; max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: 12px;
  background: var(--testo); color: var(--sfondo);
  font-size: 14px; z-index: 60;
}

@media (prefers-reduced-motion: reduce) {
  .scheletro, .attesa-scheletro, .punto-vivo { animation: none; }
}