/* ===== Layout backoffice ===== */
.admin-body {
  background: #f4f6f5;
  font-family: var(--font-body);
}
.admin-layout {
  display: flex;
  min-height: 100vh;
}

/* ===== Sidebar ===== */
.admin-sidebar {
  width: 240px;
  background: var(--bcc-deep);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  flex-shrink: 0;
}
.admin-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-sidebar-logo {
  padding: 0 .5rem 1.5rem;
}
.admin-sidebar-logo img {
  height: 36px;
  filter: brightness(0) invert(1);
}
.admin-hamburger {
  background: rgba(255,255,255,.1);
  border: none;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.admin-nav {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex-grow: 1;
}
.admin-nav-link {
  color: rgba(255,255,255,.8);
  text-decoration: none;
  padding: .7rem .9rem;
  border-radius: 10px;
  font-weight: 500;
  font-size: .95rem;
}
.admin-nav-link:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.admin-nav-link.active {
  background: rgba(255,255,255,.12);
  color: #fff;
}
/* Etichetta di sezione del menu laterale (Gestione, Soci, Sito...) */
.admin-nav-sezione {
  color: rgba(255,255,255,.45);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .9rem .9rem .25rem;
}
.admin-nav-sezione:first-child {
  padding-top: .25rem;
}

/* Schede di navigazione tra i registri di log */
.admin-tab-log .nav-link {
  color: var(--bcc-green, #1A4137);
  font-weight: 500;
  border-radius: 999px;
  padding: .45rem 1.1rem;
  font-size: .92rem;
}
.admin-tab-log .nav-link:hover {
  background: rgba(26,65,55,.08);
}
.admin-tab-log .nav-link.active {
  background: #1A4137;
  color: #fff;
}
.admin-sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.admin-logout-link {
  color: var(--bcc-blue);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
}
.admin-logout-link:hover {
  color: #fff;
}

/* ===== Contenuto ===== */
.admin-content {
  flex-grow: 1;
  padding: 2.5rem 3rem;
  max-width: 100%;
  overflow-x: auto;
}
.admin-page-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--bcc-deep);
}

/* ===== Login ===== */
.admin-login-body {
  min-height: 100vh;
  background: var(--bcc-cream);
}
.admin-login-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: 0 6px 24px rgba(25,53,45,.1);
}

/* ===== Tabella eventi ===== */
.admin-table {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(25,53,45,.06);
}
.admin-table table {
  margin-bottom: 0;
}
.admin-table th {
  font-family: var(--font-heading);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6b7c76;
  border-bottom: 2px solid #eef1ef;
  padding: 1rem;
}
.admin-table td {
  padding: 1rem;
  vertical-align: middle;
  font-size: .92rem;
}
.badge-stato-bozza {
  background: #e9ecef;
  color: #495057;
}
.badge-stato-pubblicato {
  background: #e3f3e0;
  color: #2f7a1f;
}
.badge-stato-chiuso {
  background: #fbe7e5;
  color: #a13b2f;
}
.badge-stato-nascosto {
  background: #e9ecef;
  color: #6b7c76;
}
/* Riservato: prenotabile, ma solo da chi ha l'invito. Colore distinto
   dal nascosto perche' sono due cose diverse e dall'elenco si deve
   capire a colpo d'occhio quale evento sta ancora raccogliendo adesioni. */
.badge-stato-riservato {
  background: #e7eefc;
  color: #2d4f8f;
}
.badge-stato {
  padding: .3rem .7rem;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 600;
}

/* ===== Form evento ===== */
.admin-form-card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(25,53,45,.06);
  max-width: 700px;
}
.admin-form-card .form-label {
  font-weight: 600;
  font-size: .88rem;
  color: var(--bcc-deep);
}
.admin-form-card .form-control,
.admin-form-card .form-select,
.admin-form-card textarea {
  border-radius: 8px;
  border-color: #d8ddd9;
}

@media (max-width: 768px) {
  .admin-layout {
    flex-direction: column;
  }
  .admin-sidebar {
    width: 100%;
    padding: 1rem 1.25rem;
  }
  .admin-sidebar-logo {
    padding: 0;
  }
  .admin-nav {
    flex-direction: column;
    padding-top: 1rem;
  }
  .admin-nav-link {
    padding: .85rem 1rem;
  }
  .admin-sidebar-footer {
    margin-top: .5rem;
  }
  .admin-content {
    padding: 1.5rem;
  }
  .admin-table {
    overflow-x: auto;
  }
}

/* ===== Verifica invito: barra di stato ===== */
.checkin-banner {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.1rem 1.5rem;
  border-radius: 14px;
  font-weight: 600;
  font-size: 1.05rem;
  color: #ffffff;
}
.checkin-banner i {
  font-size: 1.6rem;
}
.checkin-banner-ok {
  background-color: #2f7a1f;
}
.checkin-banner-ko {
  background-color: #a13b2f;
}

/* ===================================================================
   Composizione a blocchi delle pagine
   =================================================================== */
.blocco-editor {
  border: 1px solid #e3e6e4;
  border-radius: 12px;
  background: #fff;
  margin-bottom: .85rem;
  overflow: hidden;
}
.blocco-editor-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .9rem;
  background: #f6f8f7;
  border-bottom: 1px solid #e3e6e4;
}
.blocco-editor-nome {
  font-weight: 600;
  color: #1A4137;
  font-size: .95rem;
}
.blocco-editor-comandi { display: flex; gap: .15rem; flex-shrink: 0; }
.blocco-editor-comandi .btn { padding: .2rem .5rem; line-height: 1; }
.blocco-editor-corpo { padding: 1rem .9rem .35rem; }
.blocco-editor.chiuso .blocco-editor-corpo { display: none; }

.elenco-blocco { margin-bottom: 1rem; }
.elenco-blocco-riga {
  display: flex;
  gap: .6rem;
  border: 1px dashed #dfe4e2;
  border-radius: 10px;
  padding: .75rem .8rem .1rem;
  margin-bottom: .55rem;
  background: #fcfdfc;
}
.elenco-blocco-riga-campi { flex: 1 1 auto; min-width: 0; }
.elenco-blocco-riga-comandi {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  flex-shrink: 0;
}
.elenco-blocco-riga-comandi .btn { padding: .15rem .4rem; line-height: 1; }

.anteprima-immagine-blocco {
  display: inline-block;
  width: 64px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid #e3e6e4;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.anteprima-icona-blocco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eef3f1;
  color: #1A4137;
  font-size: 1.1rem;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .elenco-blocco-riga { flex-direction: column-reverse; }
  .elenco-blocco-riga-comandi { flex-direction: row; justify-content: flex-end; }
}
.blocco-editor-riassunto {
  font-weight: 400;
  color: #6c7a76;
  margin-left: .25rem;
}

/* Anteprima della fotografia di una filiale nel form */
.anteprima-foto-filiale {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e3e6e4;
}
.miniatura-filiale {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 8px;
  vertical-align: middle;
}

/* Contatore dei messaggi da leggere, accanto alla voce di menu */
.admin-nav-pallino {
  display: inline-block;
  min-width: 20px;
  padding: 0 .35rem;
  margin-left: .4rem;
  border-radius: 50px;
  background: #c7933a;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* Testo del messaggio nella pagina di dettaglio */
.testo-messaggio {
  background: #f8faf9;
  border: 1px solid #e6eae8;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  color: #3c4c47;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* =====================================================================
   POSTAZIONI DI LETTURA QR
   Pagina pensata per un tablet o un telefono tenuto in mano a un banco:
   caratteri grandi, esito a tutto schermo, nessun dettaglio superfluo.
   ===================================================================== */

.postazione-intestazione {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: var(--bcc-deep);
  color: #fff;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

/* Il nome della postazione è la cosa più importante della pagina: deve
   essere impossibile controllare gli omaggi credendo di essere
   all'ingresso. */
.postazione-nome {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.postazione-evento {
  font-size: .9rem;
  opacity: .8;
}

.postazione-conteggio {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.postazione-conteggio-etichetta {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .8;
}

.postazione-scelta {
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}

.postazione-scelta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 65, 55, .13);
}

/* ---------- Schermata dell'esito ---------- */
/* Copre tutto: chi legge i QR guarda le persone, non il tablet, e deve
   accorgersi del risultato con la coda dell'occhio. */
.postazione-esito {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  color: #fff;
}

.postazione-esito[hidden] { display: none; }

.esito-ok        { background: #1f7a4d; }
.esito-ko        { background: #a52a2a; }
/* Ingresso parziale: ne sono entrate alcune e altre no. Non e' verde
   perche' non e' riuscito, non e' rosso perche' qualcuno e' entrato.
   L'ambra ferma chi sta alla porta invece di lasciarlo passare oltre. */
.esito-parziale  { background: #b86e00; }
.esito-annullato { background: #5a6b66; }
/* La DOMANDA "quante persone entrano". Non e' un esito: non e' ancora
   successo niente, e nessun colore deve suggerire riuscito o respinto.
   Il blu non vuol dire ne' si' ne' no, e si distingue a mezzo metro dal
   verde e dal rosso - che e' la distanza da cui lo si guarda. */
.esito-domanda   { background: #1d4e6f; }

/* Sulla schermata della domanda l'icona si fa da parte: lo spazio serve ai
   numeri da toccare, e su un telefono in mano alla hostess non ce n'e'
   abbastanza per entrambi. */
.esito-domanda .postazione-esito-icona {
  font-size: 3rem;
  margin-bottom: .5rem;
}

.postazione-esito-icona {
  font-size: 5.5rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.postazione-esito-nome {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .25rem;
}

.postazione-esito-persone {
  font-size: 1.35rem;
  font-weight: 600;
  opacity: .9;
  margin-bottom: .75rem;
}

.postazione-esito-messaggio {
  font-size: 1.15rem;
  max-width: 24ch;
  line-height: 1.4;
}

.postazione-esito-annulla,
.postazione-esito-chiudi {
  margin-top: 2rem;
  border: 2px solid rgba(255, 255, 255, .7);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: .7rem 1.75rem;
  font-weight: 600;
  font-size: 1rem;
}

.postazione-esito-chiudi {
  margin-top: .75rem;
  border-color: rgba(255, 255, 255, .35);
  font-weight: 500;
}

.postazione-esito-annulla[hidden] { display: none; }

/* ---------------------------------------------------------------------
   I numeri da toccare: quante persone del gruppo stanno entrando.
   --------------------------------------------------------------------- */
.postazione-scelta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.5rem;
  max-width: 100%;
}

.postazione-scelta[hidden] { display: none; }

/* Bersagli larghi. Si tocca in piedi, con una mano sola, spesso tenendo
   anche un elenco di carta: un pulsante piccolo si sbaglia, e sbagliarlo
   vuol dire scrivere il numero sbagliato di persone in sala. */
.postazione-scelta-numero {
  min-width: 64px;
  min-height: 64px;
  border: 2px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-radius: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  padding: 0 .5rem;
}

/* Il gruppo al completo: e' il caso di quasi tutte le letture, quindi e'
   il pulsante piu' grande e il piu' chiaro. Chi arriva tutto insieme -
   la normalita' - paga un tocco solo, e nemmeno deve cercarlo. */
.postazione-scelta-tutti {
  min-width: 104px;
  min-height: 80px;
  background: #fff;
  color: #1d4e6f;
  border-color: #fff;
  font-size: 2.2rem;
}

.postazione-scelta-numero:active { transform: scale(.96); }

@media (max-width: 480px) {
  .postazione-nome           { font-size: 1.25rem; }
  .postazione-esito-icona    { font-size: 4.5rem; }
  .postazione-esito-nome     { font-size: 1.6rem; }
  /* Con la domanda a schermo il contenuto e' piu' alto del solito: su uno
     schermo basso, o in orizzontale, deve poter scorrere invece di
     tagliare via i numeri. */
  .postazione-esito          { overflow-y: auto; justify-content: flex-start; padding-top: 1.25rem; }
}

/* =====================================================================
   DASHBOARD ASSEMBLEA
   ===================================================================== */

.cifra-grande {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--bcc-deep);
}

.cifra-enorme {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bcc-deep);
}

/* L'elenco dei premiandi può essere lungo: scorre dentro la scheda
   invece di allungare la pagina all'infinito. */
.elenco-premiandi {
  max-height: 320px;
  overflow-y: auto;
}

/* Fascia dell'ultimo premiando entrato, versione backoffice. */
.fascia-ultimo-premiato {
  border-left: 5px solid var(--bcc-gold, #c7933a);
}

@keyframes lampeggioPremioChiaro {
  0%   { background: rgba(199, 147, 58, .28); }
  100% { background: #fff; }
}

.fascia-ultimo-premiato.appena-arrivato { animation: lampeggioPremioChiaro 2.6s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .fascia-ultimo-premiato.appena-arrivato { animation: none; }
}

/* =====================================================================
   PROIEZIONE IN SALA
   Si legge dal fondo della sala: sfondo scuro, poche cose grandi, e in
   tutta la pagina gli unici nomi sono quelli dei premiandi.
   ===================================================================== */

.proiezione {
  margin: 0;
  /* Altezza fissa, non minima: su un proiettore non si scorre, quindi
     quello che non entra non esiste. Con "min-height" un elenco lungo
     allungherebbe la pagina sotto il bordo dello schermo; con l'altezza
     fissa è l'elenco a doversi restringere, e infatti scorre da solo. */
  height: 100vh;
  background: #10231d;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.proiezione-testa {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  flex: 0 0 auto;
}

.proiezione-logo { height: 52px; width: auto; }

.proiezione-titolo {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
}

.proiezione-data { opacity: .7; font-size: 1.05rem; }

/* Grande e con cifre a larghezza fissa, così i secondi che scorrono non
   fanno ballare l'orario da una parte all'altra. */
.proiezione-orologio {
  margin-left: auto;
  font-size: clamp(2.4rem, 3.6vw, 3.8rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  line-height: 1;
}

.proiezione-corpo {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1.75rem 2.5rem;
  min-height: 0;
  overflow: hidden;
}

/* Con le colonne accanto: i premiandi prendono poco più di un terzo,
   il resto è del numero dei presenti. Niente avvolgimento, altrimenti
   l'altezza della riga la deciderebbe il contenuto e le colonne
   sfonderebbero in basso. */
.proiezione-corpo.con-elenco {
  align-items: stretch;
  flex-wrap: nowrap;
}

.proiezione-principale {
  flex: 1 1 65%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

/* ---------- Soci presenti ---------- */

.proiezione-blocco {
  text-align: center;
  width: 100%;
  max-width: 700px;
}

.proiezione-etichetta {
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .75;
  margin-bottom: .5rem;
}

.proiezione-cifra {
  font-size: clamp(6rem, 17vh, 16rem);
  font-weight: 700;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}

.proiezione-sotto {
  font-size: 1.6rem;
  opacity: .75;
  margin-top: .35rem;
}

.proiezione-barra {
  height: 16px;
  background: rgba(255, 255, 255, .15);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 1.5rem;
}

.proiezione-barra-piena {
  height: 100%;
  background: var(--bcc-blue, #62B5E4);
  border-radius: 999px;
  transition: width .6s ease;
}

/* ---------- Ultimi premiandi entrati ---------- */

.proiezione-ultimi {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 6px solid var(--bcc-gold, #c7933a);
  border-radius: 16px;
  padding: 1rem 1.5rem 1.25rem;
}

.proiezione-ultimi-etichetta {
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .7;
  text-align: center;
  margin-bottom: .75rem;
}

.proiezione-ultimi-elenco {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

.proiezione-ultimo {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: .5rem .5rem;
  border-radius: 10px;
}

/* Il più recente è il primo e si vede che lo è: più grande e staccato
   dagli altri due, che restano come coda leggibile. */
.proiezione-ultimo.piu-recente {
  flex: 1.6 1 0;
  background: rgba(199, 147, 58, .14);
}

.proiezione-ultimo-nome {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proiezione-ultimo.piu-recente .proiezione-ultimo-nome {
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
}

.proiezione-ultimo-dettaglio {
  font-size: .95rem;
  opacity: .7;
  margin-top: .1rem;
}

.proiezione-ultimo.piu-recente .proiezione-ultimo-dettaglio { font-size: 1.1rem; }

.proiezione-ultimo-vuoto {
  flex: 1 1 auto;
  text-align: center;
  opacity: .45;
  font-size: 1.2rem;
  padding: .6rem 0;
}

@keyframes lampeggioPremio {
  0%   { background: rgba(199, 147, 58, .6); }
  100% { background: rgba(199, 147, 58, .14); }
}

.proiezione-ultimo.appena-arrivato { animation: lampeggioPremio 2.6s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .proiezione-ultimo.appena-arrivato { animation: none; }
}

/* ---------- Colonne dei premi di anzianità ---------- */

.proiezione-premiandi {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  min-height: 0;
  min-width: 0;
}

.proiezione-premiandi-titolo {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .7;
  text-align: center;
  padding-bottom: .6rem;
  margin-bottom: .6rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  flex: 0 0 auto;
}

.proiezione-colonne {
  flex: 1 1 auto;
  display: flex;
  gap: 1rem;
  min-height: 0;
}

.proiezione-colonna {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.proiezione-colonna + .proiezione-colonna {
  border-left: 1px solid rgba(255, 255, 255, .12);
  padding-left: 1rem;
}

.proiezione-gruppo-testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--bcc-gold, #c7933a);
  margin-bottom: .5rem;
  flex: 0 0 auto;
}

.proiezione-gruppo-conteggio {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.proiezione-colonna-scorri {
  flex: 1 1 auto;
  overflow: hidden;   /* scorre da solo: in sala non c'è un mouse */
  min-height: 0;
  /* Sfumatura in fondo: un elenco più lungo dello spazio si legge come
     "continua" invece che come tagliato a metà nome. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}

.proiezione-premiando {
  display: flex;
  /* In alto e non al centro: quando un nome lungo va a capo, la spunta e
     l'orario restano allineati alla prima riga invece di galleggiare a
     metà. */
  align-items: flex-start;
  gap: .4rem;
  padding: .28rem 0;
  font-size: clamp(.95rem, 1.1vw, 1.3rem);
  line-height: 1.25;
}

/* Entrato e atteso non si distinguono solo per il colore: cambia anche
   l'icona, spunta piena contro cerchio vuoto, e il peso del testo. Su un
   proiettore i colori si sbiadiscono, la forma no. */
.proiezione-premiando.dentro {
  font-weight: 700;
  color: #fff;
}

.proiezione-premiando.dentro .bi { color: #3ddc84; }

.proiezione-premiando.atteso {
  font-weight: 400;
  color: #fff;
  opacity: .82;
}

.proiezione-premiando.atteso .bi { color: #fff; }

/* Il nome va a capo invece di essere troncato con i puntini: in una
   colonna stretta "Zanardi Maria Luisa" diventerebbe "Zanardi Maria
   Lui...", e su un proiettore il nome per esteso è esattamente la cosa
   che deve leggersi. Due righe disallineano un po' l'elenco, ma è un
   prezzo minore. */
.proiezione-premiando-nome {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.proiezione-premiando-ora {
  flex: 0 0 auto;
  font-size: .72em;
  font-variant-numeric: tabular-nums;
  opacity: .7;
  padding-top: .18em;   /* allinea otticamente alla prima riga del nome */
}

/* ---------- Comandi ---------- */

.proiezione-schermo-intero {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  opacity: .25;
  transition: opacity .2s ease;
}

.proiezione-schermo-intero:hover { opacity: 1; }

@media (max-width: 991px) {
  /* Su uno schermo stretto non è più una proiezione ma qualcuno che la
     guarda in mano: le colonne si impilano e la pagina torna a scorrere. */
  .proiezione { height: auto; min-height: 100vh; overflow: auto; }
  .proiezione-corpo.con-elenco { flex-direction: column; overflow: visible; }
  .proiezione-premiandi { flex: 1 1 auto; max-height: 60vh; }
  .proiezione-colonna-scorri { overflow-y: auto; }
  .proiezione-testa { padding: 1rem 1.25rem; gap: 1rem; }
  .proiezione-titolo { font-size: 1.15rem; }
  .proiezione-ultimi-elenco { flex-direction: column; gap: .5rem; }
}

/* =====================================================================
   SCHEDE DEL CONFIGURATORE EVENTO
   ===================================================================== */

.admin-schede {
  border-bottom: 2px solid rgba(26, 65, 55, .12);
  gap: .25rem;
}

.admin-schede .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: .7rem 1.25rem;
  font-weight: 600;
  color: #5a6b66;
  background: transparent;
}

.admin-schede .nav-link:hover {
  color: var(--bcc-deep);
  border-bottom-color: rgba(26, 65, 55, .25);
}

.admin-schede .nav-link.active {
  color: var(--bcc-deep);
  border-bottom-color: var(--bcc-deep);
  background: transparent;
}

/* Il numero accanto al nome della scheda: dice a colpo d'occhio se una
   parte della configurazione è ancora vuota, senza doverla aprire. */
.admin-schede-numero {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 .4em;
  margin-left: .4em;
  border-radius: 999px;
  background: rgba(26, 65, 55, .1);
  font-size: .8em;
  font-weight: 700;
  text-align: center;
}

.admin-schede .nav-link.active .admin-schede-numero {
  background: var(--bcc-deep);
  color: #fff;
}

/* Variante a piena larghezza della scheda bianca.
   Quella base è limitata a 700px, giusto per un modulo da compilare ma
   stretto quando la scheda affianca una tabella larga: senza questa, nel
   configuratore l'intestazione dell'evento e il modulo delle postazioni
   restavano più corti della tabella sopra. */
.admin-form-card-largo {
  max-width: none;
}