/* Il pannello di Inviti Digitali: compatto (regola d'oro: spazio ottimizzato, niente ripetizioni, pulizia).
   Tutti i valori vengono da tema.css. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--sfondo); color: var(--testo); font-family: var(--font-testo); font-size: 14px; }
input, select, textarea, button { font-family: inherit; }
h1, h2, h3 { font-family: var(--font-titoli); font-weight: 500; margin: 0; }
h1 { font-size: var(--dimensione-titolo); }
h2 { font-size: 1rem; color: var(--testo-lieve); }
h3 { font-size: var(--dimensione-testo); }

/* barra in alto */
.barra { position: sticky; top: 0; z-index: 10; background: var(--superficie); box-shadow: 0 1px 4px rgba(15, 23, 42, .08); }
.barra-contenuto { display: flex; align-items: center; gap: 12px; height: var(--altezza-barra); max-width: var(--larghezza-contenuto); margin: 0 auto; padding: 0 16px; }
.logo { height: 32px; width: auto; display: block; }
/* Lo sposo di uno STAND partner: il logo dello stand (largo quanto serve) o il suo nome scritto (_Layout.cshtml). */
.logo-stand { max-width: 180px; object-fit: contain; }
.marchio-testo { font-weight: 600; font-size: 1rem; text-decoration: none; color: inherit; white-space: nowrap; }
.titolo-barra { flex: 1 1 auto; text-align: center; color: var(--primario); font-family: var(--font-firma); font-size: var(--dimensione-firma); line-height: 1; white-space: nowrap; }
.barra-esci { margin: 0; }
.barra-portale { white-space: nowrap; text-decoration: none; }
.barra-portale .corto { display: none; }
@media (max-width: 560px) { .barra-portale .lungo { display: none; } .barra-portale .corto { display: inline; } }

.contenuto { max-width: var(--larghezza-contenuto); margin: 0 auto; padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.esito { padding: 8px 12px; border-radius: var(--raggio); background: var(--esito-sfondo); color: var(--primario); font-size: var(--dimensione-testo); }

.scheda, .card { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-scheda); padding: 16px; display: flex; flex-direction: column; gap: var(--spazio); }
.scheda-centrata { max-width: 420px; margin: 24px auto 0; text-align: center; align-items: center; }
.sezione { display: flex; flex-direction: column; gap: 10px; }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.card-testa, .card-riga { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.etichetta, .testo-lieve { color: var(--testo-lieve); font-size: var(--dimensione-piccola); margin: 0; }
.chiave { font-family: ui-monospace, Consolas, monospace; font-size: var(--dimensione-piccola); letter-spacing: .04em; }
.avviso { color: var(--avviso); font-size: var(--dimensione-piccola); margin: 0; }

/* moduli */
.modulo { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.riga-campi { display: flex; gap: 6px; }
.riga-campi > * { flex: 1 1 0; min-width: 0; }
input, select { height: var(--altezza-campo); padding: 0 10px; border: 1px solid var(--bordo); border-radius: var(--raggio); font-size: var(--dimensione-piccola); background: var(--superficie); width: 100%; }
input:focus, select:focus { outline: none; border-color: var(--arancione); }

/* pulsanti */
.pulsante, .bottone-bordo { display: inline-flex; align-items: center; justify-content: center; height: var(--altezza-pulsante); padding: 0 14px; border-radius: var(--raggio); font-size: 0.8125rem; font-weight: 500; text-decoration: none; cursor: pointer; }
.pulsante { background: var(--primario); color: #fff; border: 0; }
.bottone-bordo { background: transparent; color: var(--primario); border: 1px solid var(--primario); }
.bottone-piccolo { height: 28px; padding: 0 10px; font-size: var(--dimensione-piccola); }

.esito-errore { background: var(--errore-sfondo); color: var(--avviso); }
.pulsante-pericolo { background: var(--avviso); }
.riga-pulsanti { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.vuoto { color: var(--testo-lieve); font-size: var(--dimensione-piccola); padding: 14px; text-align: center; border: 1px dashed var(--bordo); border-radius: var(--raggio); margin: 0; }

/* lingua del pannello, in alto */
.barra-lingua { display: flex; gap: 2px; margin: 0; }
.barra-lingua button { border: 1px solid var(--bordo); background: transparent; color: var(--testo-lieve); height: 24px; padding: 0 6px; border-radius: var(--raggio); font-size: 0.6875rem; cursor: pointer; }
.barra-lingua button.attiva { border-color: var(--primario); color: var(--primario); font-weight: 600; }

/* testa dell'evento + schede (una copia sola, _TestaEvento) */
.testa-evento { display: flex; flex-direction: column; gap: 2px; }
.testa-evento .indietro { color: var(--testo-lieve); font-size: var(--dimensione-piccola); text-decoration: none; }
.testa-evento p { margin: 0; }
.schede { display: flex; gap: 4px; margin-top: 6px; border-bottom: 1px solid var(--bordo); overflow-x: auto; }
.schede a { padding: 6px 12px; font-size: var(--dimensione-testo); color: var(--testo-lieve); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.schede a.attiva { color: var(--primario); border-bottom-color: var(--arancione); font-weight: 600; }

/* i numeri dell'evento in una fascia sola */
.numeri { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1px; background: var(--bordo); border: 1px solid var(--bordo); border-radius: var(--raggio-scheda); overflow: hidden; }
.numero { background: var(--superficie); padding: 10px 14px; text-align: left; border: 0; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 2px; }
button.numero { cursor: pointer; }
button.numero:hover { background: var(--primario-velato); }
.numero-grande { background: var(--primario-velato); }
.cifra { font-family: var(--font-titoli); font-weight: 700; font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; transition: color .3s; }
.numero-grande .cifra { font-size: 1.9rem; }
.cifra-primaria { color: var(--primario); }
.cifra.cambiato { color: var(--arancione); }
.percentuale, .vai { font-size: var(--dimensione-piccola); color: var(--testo-lieve); }
.percentuale { color: var(--primario); font-weight: 600; }

.riga-titolo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.filtro { display: flex; gap: 4px; flex-wrap: wrap; }
.filtro button { border: 1px solid var(--bordo); background: var(--superficie); color: var(--testo-lieve); border-radius: 999px; height: 26px; padding: 0 10px; font-size: var(--dimensione-piccola); cursor: pointer; }
.filtro button.attivo { border-color: var(--primario); color: var(--primario); font-weight: 600; }
.separatore { margin: 6px 0 0; font-size: var(--dimensione-piccola); color: var(--testo-lieve); font-style: italic; border-top: 1px dashed var(--bordo); padding-top: 8px; }

/* la card di un invito: filetto in alto sempre acceso (si capisce dove finisce una e comincia l'altra) */
.griglia-inviti { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card-invito { position: relative; overflow: hidden; gap: 6px; padding: 12px 14px; }
.card-invito::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--primario), var(--arancione)); }
.card-invito p { margin: 0; }
.card-invito h3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pastiglia { font-family: var(--font-testo); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--primario); background: var(--primario-velato); border: 1px solid var(--bordo); border-radius: 999px; padding: 1px 7px; }
.lingua { font-size: 0.625rem; font-weight: 600; color: var(--testo-lieve); border: 1px solid var(--bordo); border-radius: 999px; padding: 1px 6px; }
.conteggi { font-size: var(--dimensione-piccola); color: var(--testo-lieve); }
.c-si { color: var(--stato-si-testo); }
.c-no { color: var(--stato-no-testo); }
.nota-prova { font-size: var(--dimensione-piccola); color: var(--arancione); }
.persone { list-style: none; margin: 0; padding: 0; }
.persone li, .persona { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--primario-velato); font-size: var(--dimensione-piccola); }
.persone li:first-child { border-top: 0; }
.persona-nome { display: flex; flex-direction: column; min-width: 0; }
.allergie { color: var(--avviso); font-size: 0.6875rem; }
.stato { flex: none; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 1px 7px; }
.stato-presente { background: var(--stato-si-sfondo); color: var(--stato-si-testo); }
.stato-assente { background: var(--stato-no-sfondo); color: var(--stato-no-testo); }
.stato-in_attesa { background: var(--stato-attesa-sfondo); color: var(--stato-attesa-testo); }
.azioni { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.azioni .bottone-piccolo { height: 26px; padding: 0 8px; }
.bottone-elimina { color: var(--avviso); border-color: var(--avviso); margin-left: auto; }
.fatto { background: var(--primario); color: #fff; }
@keyframes lampo-nuovo { 0%, 100% { background: var(--superficie); } 25%, 75% { background: var(--nuovo-sfondo); } }
.card-invito.nuovo { animation: lampo-nuovo 1.1s ease-in-out 3; border-color: var(--arancione); }
@media (prefers-reduced-motion: reduce) { .card-invito.nuovo { animation: none; background: var(--nuovo-sfondo); } }

/* i dialoghi (80% dello schermo, come in Events) */
.dialogo { width: min(80vw, 640px); max-height: 80vh; border: 0; border-radius: var(--raggio-scheda); padding: 0; box-shadow: 0 24px 60px rgba(15, 23, 42, .2); }
.dialogo::backdrop { background: rgba(15, 23, 42, .35); }
.dialogo-piccolo { width: min(92vw, 380px); padding: 16px; }
.dialogo-piccolo p { margin: 0; }
.dialogo-testa { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--bordo); position: sticky; top: 0; background: var(--superficie); }
.dialogo-corpo { padding: 8px 16px 16px; overflow-y: auto; }
.chiudi { border: 0; background: transparent; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--testo-lieve); }
.gruppo { font-family: var(--font-titoli); font-weight: 600; margin: 10px 0 2px; font-size: var(--dimensione-testo); }
.iniziale { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--primario-velato); color: var(--primario); font-weight: 600; font-size: 0.6875rem; }
.persona .persona-nome { flex: 1; }

/* moduli dell'evento (crea invito, saluto) */
.scheda-modulo { max-width: 640px; }
.scheda-modulo p { margin: 0; }
.etichetta { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.lista-persone { display: flex; flex-direction: column; gap: 4px; }
.riga-persona { display: flex; gap: 4px; }
.riga-persona .bottone-piccolo { height: var(--altezza-campo); flex: none; }
.bottone-aggiungi { align-self: flex-start; }
.scelta-lingua { display: flex; gap: 4px; }
.scelta-lingua label { flex: 1; }
.scelta-lingua input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scelta-lingua span { display: flex; align-items: center; justify-content: center; height: var(--altezza-campo); border: 1px solid var(--bordo); border-radius: var(--raggio); font-size: var(--dimensione-piccola); cursor: pointer; }
.scelta-lingua input:checked + span { border-color: var(--primario); color: var(--primario); background: var(--primario-velato); font-weight: 600; }
.scelta-lingua input:focus-visible + span { outline: 2px solid var(--arancione); }
.campo-saluto { display: flex; flex-direction: column; gap: 4px; }
.pronte { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pronte > span { font-size: 0.6875rem; color: var(--testo-lieve); text-transform: uppercase; letter-spacing: .05em; }
.pastiglia-scelta { border: 1px solid var(--bordo); background: var(--primario-velato); border-radius: 999px; height: 24px; padding: 0 9px; font-size: 0.6875rem; cursor: pointer; color: var(--testo); }
.pastiglia-scelta:hover { border-color: var(--arancione); }
.nota { font-size: 0.6875rem; color: var(--testo-lieve); }
.nome-invito { font-family: var(--font-titoli); font-weight: 700; font-size: 1.05rem; display: flex; gap: 6px; align-items: center; }
.si-legge { background: var(--primario-velato); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }

@media (max-width: 767px) {
    .titolo-barra { font-size: 1.4rem; }
    .contenuto { padding: 8px 12px 16px; }
    .numeri { grid-template-columns: 1fr 1fr; } /* due file da due: tutte le caselle piene */
    .cifra { font-size: 1.25rem; }
    .numero-grande .cifra { font-size: 1.6rem; }
    .numero { padding: 8px 12px; }
    .griglia-inviti { grid-template-columns: 1fr; }
    .dialogo { width: 92vw; }
}

/* budget */
.numeri-budget { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; position: sticky; top: calc(var(--altezza-barra) + 4px); z-index: 5; }
.budget { display: flex; flex-direction: column; gap: 12px; }
.budget h2 { color: var(--testo); font-size: var(--dimensione-testo); font-weight: 700; }
.budget p { margin: 0; }
.campo-corto { max-width: 160px; }
.griglia-voci { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; } /* sul telefono due colonne: meno da scorrere */
.voce-budget { display: flex; flex-direction: column; gap: 3px; font-size: var(--dimensione-piccola); position: relative; }
.campo-euro { position: relative; display: block; }
.campo-euro::before { content: "€"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--testo-lieve); font-size: var(--dimensione-piccola); font-weight: 600; }
.campo-euro input { padding-left: 24px; font-variant-numeric: tabular-nums; }
input.pieno { background: var(--primario-velato); }
.voce-mia .togli { position: absolute; right: 0; top: -3px; border: 0; background: transparent; color: var(--avviso); cursor: pointer; font-size: 1rem; line-height: 1; }
.riga-aggiungi { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px dashed var(--bordo); padding-top: 10px; }
.riga-aggiungi > input { flex: 1 1 180px; width: auto; }
.riga-aggiungi .campo-euro { flex: 0 1 130px; }
.riga-aggiungi .bottone-bordo { height: var(--altezza-campo); }
.barra-voce { padding: 6px 0; border-bottom: 1px solid var(--primario-velato); }
.barra-voce:last-child { border-bottom: 0; }
.barra-testa { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font-size: var(--dimensione-piccola); }
.barra-nome { flex: 1; }
.barra-importo { font-weight: 700; font-variant-numeric: tabular-nums; }
.barra-pct { color: var(--testo-lieve); min-width: 38px; text-align: right; }
.barra-fondo { height: 8px; border-radius: 99px; background: var(--primario-velato); overflow: hidden; }
.barra-fondo i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--primario), var(--arancione)); transition: width .35s; }
.salva-fondo { position: sticky; bottom: 0; padding: 10px 0 4px; background: linear-gradient(180deg, transparent, var(--sfondo) 40%); display: flex; justify-content: flex-end; }
@media (max-width: 767px) {
    .numeri-budget { grid-template-columns: 1fr 1fr; }
    .numeri-budget .numero-grande, .numeri-budget .numero-bilancio { grid-column: 1 / -1; }
    .salva-fondo .pulsante { width: 100%; }
}

/* personalizza: a sinistra l'invito vero nella cornice di un telefono, a destra le schede */
.pz { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
@media (min-width: 900px) { .pz { grid-template-columns: minmax(280px, 1fr) minmax(360px, 460px); } .pz-tela { position: sticky; top: calc(var(--altezza-barra) + 8px); } }
.pz > * { min-width: 0; }
.pz-tela { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pz-fono { width: min(320px, 86vw); aspect-ratio: 9 / 19; max-height: 72vh; border: 8px solid var(--testo); border-radius: 28px; overflow: hidden; box-shadow: 0 14px 36px rgba(15, 23, 42, .2); background: #fff; }
.pz-fono iframe { width: 100%; height: 100%; border: 0; display: block; }
.pz-tela .nota { text-align: center; }
.pz-isp { padding: 0; gap: 0; } /* niente overflow:hidden: la barra delle schede deve restare ferma rispetto alla pagina */
.pz-barra { display: flex; align-items: center; gap: 8px; padding: 8px 10px 0; border-bottom: 1px solid var(--bordo); flex-wrap: wrap; position: sticky; top: var(--altezza-barra); background: var(--superficie); z-index: 4; border-radius: var(--raggio-scheda) var(--raggio-scheda) 0 0; }
.pz-schede { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 auto; }
.pz-scheda { border: 0; background: transparent; padding: 6px 8px; font: inherit; font-size: var(--dimensione-piccola); color: var(--testo-lieve); cursor: pointer; border-bottom: 2px solid transparent; }
.pz-scheda[aria-selected="true"] { color: var(--primario); font-weight: 600; border-bottom-color: var(--arancione); }
.pz-stato { font-size: 0.6875rem; color: var(--testo-lieve); }
.pz-stato.da-salvare { color: var(--arancione); font-weight: 600; }
.pz-barra .pulsante { margin-bottom: 6px; }
.pz-form { margin: 0; }
.pz-pannello { padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.pz-pannello[hidden] { display: none; }
.pz-pannello p { margin: 0; }
.pz-gruppo { font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-lieve); margin-top: 6px !important; }
.pz-campo { display: flex; flex-direction: column; gap: 3px; }
.pz-campo label { font-size: var(--dimensione-piccola); color: var(--testo-lieve); }
.pz-lingue { display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pz-lingue--una { grid-template-columns: 1fr; }
.pz-lingua { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pz-lingua-tag { align-self: flex-start; font-size: 0.625rem; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-lieve); background: var(--primario-velato); border-radius: 999px; padding: 0 6px; }
.pz-lingua-tag.e-manca { color: var(--avviso); background: var(--errore-sfondo); }
.pz-campo textarea { width: 100%; min-height: 54px; resize: vertical; padding: 6px 10px; border: 1px solid var(--bordo); border-radius: var(--raggio); font: inherit; font-size: var(--dimensione-piccola); }
.pz-campo textarea:focus { outline: none; border-color: var(--arancione); }
.pz-manca-trad { font-size: 0.6875rem; color: var(--avviso); }
.pz-riepilogo-trad { background: var(--errore-sfondo); border-radius: var(--raggio); padding: 8px 10px; font-size: var(--dimensione-piccola); color: var(--avviso); }
.pz-aiuto-ind { font-size: 0.6875rem; color: var(--testo-lieve); background: var(--primario-velato); border-radius: var(--raggio); padding: 6px 8px; }
.pz-aiuto-ind .es { color: var(--testo); font-weight: 600; }
.pz-serie { font-style: normal; font-size: 0.625rem; color: var(--primario); background: var(--primario-velato); border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.pz-scelte { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.pz-scelte--font { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pz-scelta { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 6px 8px; background: var(--superficie); cursor: pointer; text-align: left; font: inherit; display: flex; flex-direction: column; gap: 1px; }
.pz-scelta:hover { border-color: var(--arancione); }
.pz-scelta.on { border-color: var(--primario); background: var(--primario-velato); box-shadow: inset 0 0 0 1px var(--primario); }
.pz-scelta .n { font-weight: 600; font-size: var(--dimensione-piccola); }
.pz-scelta .s { font-size: 0.6875rem; color: var(--testo-lieve); }
.pz-scelta--multi { flex-direction: row; align-items: center; gap: 6px; }
.pz-scelta--multi input { width: 15px; height: 15px; accent-color: var(--primario); margin: 0; }
.pz-scelta--multi.spenta { opacity: .45; }
.pz-gocce { display: flex; margin-bottom: 2px; }
.pz-gocce i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; margin-right: -6px; display: block; }
.pz-saggio { display: block; font-size: 1.3rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-saggio-t { display: block; font-size: 0.75rem; color: var(--testo-lieve); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-slider { display: flex; align-items: center; gap: 10px; }
.pz-slider input[type=range] { flex: 1; accent-color: var(--primario); height: auto; border: 0; padding: 0; }
.pz-slider .v { font-weight: 600; min-width: 4ch; text-align: right; font-size: var(--dimensione-piccola); }
.pz-mod { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--primario-velato); }
.pz-mod .t { display: flex; flex-direction: column; font-size: var(--dimensione-piccola); }
.pz-mod .t span { color: var(--testo-lieve); font-size: 0.6875rem; }
.pz-mod .sw { margin-left: auto; }
.sw { position: relative; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw label { display: block; width: 40px; height: 22px; border-radius: 99px; background: var(--bordo); position: relative; cursor: pointer; }
.sw label::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.sw input:checked + label { background: var(--primario); }
.sw input:checked + label::after { transform: translateX(18px); }
.sw input:disabled + label { opacity: .4; cursor: not-allowed; }
.sw input:focus-visible + label { outline: 2px solid var(--arancione); }
.pz-fissa { display: flex; gap: 8px; align-items: center; background: var(--primario-velato); border-radius: var(--raggio); padding: 6px 8px; font-size: var(--dimensione-piccola); }
.pz-fissa span:last-child { display: flex; flex-direction: column; }
.pz-fissa span span { color: var(--testo-lieve); font-size: 0.6875rem; }
.pz-foto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pz-foto .cella { aspect-ratio: 3 / 4; border-radius: var(--raggio); overflow: hidden; position: relative; background: #000; }
.pz-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-foto form { position: absolute; top: 4px; right: 4px; margin: 0; }
.togli-foto { width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(15, 23, 42, .65); color: #fff; cursor: pointer; }
.pz-carica { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.pz-carica input[type=file] { flex: 1 1 160px; height: auto; padding: 4px; font-size: 0.6875rem; }
.pz-brano { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.pz-brano.on { border-color: var(--primario); background: var(--primario-velato); }
.pz-brano__t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--dimensione-piccola); }
.pz-brano__n { font-weight: 600; word-break: break-all; }
.pz-brano__tag { font-size: 0.625rem; text-transform: uppercase; color: var(--testo-lieve); background: var(--bordo); border-radius: 999px; padding: 0 6px; }
.pz-brano__ora { margin-left: auto; font-size: 0.6875rem; color: var(--primario); font-weight: 700; }
.pz-brano audio { width: 100%; height: 32px; }
.pz-brano__az { display: flex; gap: 4px; }
.pz-brano__az form { margin: 0; }
.pz-video { width: 100%; max-height: 200px; border-radius: var(--raggio); background: #000; }
.pz-locale { border: 1px solid var(--bordo); border-radius: var(--raggio-scheda); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.pz-locale-tit { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.pz-locale-tit .em { display: inline-flex; color: var(--primario); }
.pz-locale-tit .tg { margin-left: auto; font-size: 0.625rem; text-transform: uppercase; letter-spacing: .06em; color: var(--primario); background: var(--primario-velato); border-radius: 999px; padding: 1px 7px; }

/* menu laterale (il menu «hamburger» della dashboard di Events) */
.menu-apri { margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--bordo); background: var(--superficie); border-radius: var(--raggio); display: grid; place-content: center; gap: 4px; cursor: pointer; }
.menu-apri span { display: block; width: 18px; height: 2px; background: var(--testo); border-radius: 2px; }
.menu-apri:hover { border-color: var(--arancione); }
.menu-laterale { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(290px, 86vw); border: 0; padding: 0; box-shadow: -12px 0 40px rgba(15, 23, 42, .18); }
.menu-laterale::backdrop { background: rgba(15, 23, 42, .35); }
.menu-profilo { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--bordo); background: var(--primario-velato); }
.menu-profilo .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--primario); color: #fff; font-weight: 700; flex: none; }
.menu-profilo .info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.menu-profilo .info b { font-size: var(--dimensione-testo); overflow: hidden; text-overflow: ellipsis; }
.menu-profilo .info small { font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-lieve); }
.menu-profilo .chiudi { margin-left: auto; }
.menu-voci { padding: 6px 8px 16px; display: flex; flex-direction: column; }
.menu-voci .sep { margin: 10px 8px 2px; font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-lieve); font-weight: 600; }
.menu-voci .voce { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: var(--raggio); color: var(--testo); text-decoration: none; font-size: var(--dimensione-testo); border: 0; background: none; width: 100%; font: inherit; cursor: pointer; text-align: left; }
.menu-voci .voce:hover { background: var(--primario-velato); color: var(--primario); }
.menu-voci .voce.on { color: var(--primario); font-weight: 700; }
.menu-voci .ic { width: 20px; display: inline-flex; justify-content: center; flex: none; }
.menu-voci .voce-evento { font-size: var(--dimensione-piccola); }
.menu-accessi { padding: 0 8px 4px 38px; }
.menu-accessi div { padding: 3px 0; border-bottom: 1px solid var(--primario-velato); font-size: 0.6875rem; }
.menu-accessi b { display: block; font-size: var(--dimensione-piccola); }
.menu-accessi span { color: var(--testo-lieve); }
.menu-lingua { display: flex; gap: 6px; padding: 2px 8px; margin: 0; }
.menu-lingua button { flex: 1; border: 1px solid var(--bordo); background: var(--superficie); border-radius: 999px; height: 28px; font: inherit; font-size: var(--dimensione-piccola); cursor: pointer; }
.menu-lingua button.on { background: var(--primario); color: #fff; border-color: var(--primario); }
.menu-esci { margin: 0; }

/* accessi */
.credenziali { border-color: var(--primario); background: var(--primario-velato); }
.cred-titolo { margin: 0; font-weight: 600; }
.credenziali p { margin: 0; }
.card-accesso p { margin: 0; }
.scelta-livello { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.scelta-livello label { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 8px; cursor: pointer; }
.scelta-livello input { width: auto; height: auto; margin-top: 3px; accent-color: var(--primario); }
.scelta-livello span { display: flex; flex-direction: column; gap: 2px; font-size: var(--dimensione-piccola); }
.scelta-livello small { color: var(--testo-lieve); }

/* la firma Zenith in fondo al pannello (la stessa dell'invito) */
.firma-pannello { max-width: var(--larghezza-contenuto); margin: 8px auto 0; padding: 0 16px 12px; }
.credenziali .riga-campi > button { flex: none; }
.firma-pannello .firma-zenith { text-align: center; }
.firma-pannello .firma-zenith__logo { display: block; margin: 0 auto; }

/* Personalizza — caricamento appena scelto, palette del cliente, avvisi (15 ott 2026) */
.pz-scegli { position: relative; overflow: hidden; cursor: pointer; display: inline-flex; align-items: center; }
.pz-scegli input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.pz-scegli:has(input:disabled) { opacity: .5; cursor: progress; }
.pz-carica progress { flex: 1 1 100%; height: 6px; accent-color: var(--primario); }
.pz-esito { font-size: 0.6875rem; color: var(--testo-lieve); }
.pz-esito.e-errore { color: var(--avviso); }
.pz-esito:empty { display: none; }
.pz-avviso { font-size: var(--dimensione-piccola); color: var(--avviso); background: var(--errore-sfondo); border-radius: var(--raggio); padding: 6px 8px; }
.pz-avviso[hidden], .pz-video[hidden], .pz-nessuna[hidden], .pz-gruppo[hidden] { display: none; }
.pz-mia { position: relative; display: flex; }
.pz-mia .pz-scelta { flex: 1; }
.pz-mia-togli { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--superficie); color: var(--testo-lieve); line-height: 1; cursor: pointer; box-shadow: 0 0 0 1px var(--bordo); }
.pz-mia-togli:hover { color: var(--avviso); box-shadow: 0 0 0 1px var(--avviso); }
.pz-crea-mia { border: 1px dashed var(--bordo); border-radius: var(--raggio-scheda); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pz-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pz-colore { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.6875rem; color: var(--testo-lieve); cursor: pointer; }
.pz-colore input[type=color] { width: 100%; height: 44px; padding: 2px; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--superficie); cursor: pointer; }
.pz-mia-riga { display: flex; gap: 6px; flex-wrap: wrap; }
.pz-mia-riga input[type=text] { flex: 1 1 140px; min-width: 0; }
/* Si capisce che il quadrato si tocca: la matita accanto al nome e il bordo che si accende. */
.pz-colore span::before { content: "\270E  "; color: var(--arancione); }
.pz-colore input[type=color]:hover, .pz-colore input[type=color]:focus-visible { border-color: var(--arancione); outline: none; box-shadow: 0 0 0 2px var(--primario-velato); }

/* Budget: il bilancio (15 ott 2026) */
.riga-invitati { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.numero-bilancio.e-guadagno .cifra { color: var(--primario); }
.numero-bilancio.e-perdita { background: var(--errore-sfondo); }
.numero-bilancio.e-perdita .cifra, .numero-bilancio.e-perdita [data-bilancio-esito] { color: var(--avviso); }
.numero-bilancio [data-bilancio-esito] { font-weight: 600; }
.pz-busta-colore { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.pz-busta-colore .pz-colore { width: 140px; }

/* L'anteprima in un'altra lingua dell'evento (Personalizza): due pastiglie sopra l'invito di prova. */
.pz-lingua-anteprima { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.pz-lingua-anteprima .pz-scelta { padding: .3rem .8rem; }

/* SOLA LETTURA: l amministratore del portale guarda il pannello di un cliente (Program.cs blocca i salvataggi). */
.fascia-guarda { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 10px 16px;
    background: #fff3ec; border-bottom: 2px solid #DD571C; color: #b4461a; font-weight: 600; font-size: .9rem; text-align: center; }
.fascia-guarda form { margin: 0; }