/* Pagine di amministrazione del server: prima il telefono (360 px), comode anche sul computer. */
:root {
  --sfondo: #f5f6f8; --carta: #ffffff; --testo: #1f2328; --tenue: #5b636e; --bordo: #d5dbe2; --superficie: #eef1f5;
  --accento: #1d5fbf; --accento-forte: #174c99; --su-accento: #ffffff; --accento-tenue: #e6eefa;
  --ok: #1d6f3a; --ok-tenue: #e5f3e9; --attenzione: #8a5300; --attenzione-tenue: #fff3dc; --errore: #b3261e; --errore-tenue: #fdecea; --su-pericolo: #ffffff;
  --raggio: 10px; --ombra: 0 1px 2px rgba(20, 30, 40, .08);
  --bordo-campo: #7d8794;   /* bordo dei campi: almeno 3 a 1 sul fondo (WCAG 1.4.11) */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #121417; --carta: #1b1e23; --testo: #e7e9ec; --tenue: #a4acb6; --bordo: #353a42; --superficie: #242830;
    --accento: #7fb0ff; --accento-forte: #a8c8ff; --su-accento: #0f1216; --accento-tenue: #1d2a40;
    --ok: #7bd495; --ok-tenue: #17301f; --attenzione: #f0bd66; --attenzione-tenue: #33280f; --errore: #ff9189; --errore-tenue: #3a1a18; --su-pericolo: #1a0d0c;
    --ombra: none; --bordo-campo: #6b7480; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sfondo); color: var(--testo); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.15rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; margin-top: 1.2em; }
p { margin: 0 0 .75em; }
a { color: var(--accento); }
:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }

/* testata e menu */
.testata { background: var(--carta); border-bottom: 1px solid var(--bordo); }
.testata-in, .menu, main, .testata-conferma { max-width: 980px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.testata-conferma { padding-bottom: 10px; }
.testata-conferma .conferma { margin-top: 0; border-color: var(--attenzione); background: var(--attenzione-tenue); }   /* l'uscita da confermare, in arancione */
.testata-in { display: flex; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.marchio { flex: 1 1 auto; min-width: 0; }
.marchio h1 { margin: 0; }
.marchio .sotto { color: var(--tenue); font-size: .9rem; }
.comandi { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.lingue { display: inline-flex; border: 1px solid var(--bordo); border-radius: 8px; overflow: hidden; }
.lingue button { border: 0; border-radius: 0; min-height: 44px; padding: 4px 10px; background: transparent; color: var(--tenue); font-weight: 600; }
.lingue button[aria-pressed="true"] { background: var(--accento-tenue); color: var(--accento-forte); }
.lingue button:focus-visible { outline-offset: -4px; }   /* il gruppo taglia quello che sporge */
.menu { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; padding-bottom: 10px; }
.menu button { background: transparent; border: 1px solid var(--bordo); color: var(--testo); border-radius: 999px; min-height: 44px; padding: 6px 14px; font-weight: 500; }
.menu button[aria-current="page"] { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
/* Altre sezioni: quelle che all'evento adesso non servono, chiuse; aperte vanno in una riga sotto */
.menu .altre { border-style: dashed; color: var(--tenue); }
.menu .altre[aria-expanded="true"] { border-style: solid; color: var(--testo); }
.menu-altre { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }

main { padding-top: 16px; padding-bottom: 48px; }
.carta { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 16px; margin-bottom: 16px; box-shadow: var(--ombra); }
.carta > :last-child { margin-bottom: 0; }
@media (max-width: 400px) { .carta { padding: 14px 12px; } }
.stretta { max-width: 460px; margin-left: auto; margin-right: auto; }
.tenue { color: var(--tenue); }
.piccolo { font-size: .88rem; }

/* moduli: le regole per gli elementi valgono fuori dall'editor delle schede (.ed, con il suo editor.css), con il peso di un selettore di elemento */
label:where(:not(.ed *)) { display: block; font-weight: 600; margin: 12px 0 4px; }
.aiuto { display: block; font-weight: 400; color: var(--tenue); font-size: .88rem; margin-top: 2px; }
input, select, textarea, button { font: inherit; color: inherit; }
input[type=text]:where(:not(.ed *)), input[type=password]:where(:not(.ed *)), input[type=search]:where(:not(.ed *)), input[type=number]:where(:not(.ed *)),
input[type=datetime-local]:where(:not(.ed *)), input[type=date]:where(:not(.ed *)), input[type=time]:where(:not(.ed *)), select:where(:not(.ed *)),
textarea:where(:not(.ed *)) {
  display: block; width: 100%; max-width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--bordo-campo); border-radius: 8px;
  background: var(--carta); color: var(--testo);
}
textarea:where(:not(.ed *)) { min-height: 84px; resize: vertical; }
input[type=file]:where(:not(.ed *)) { display: block; width: 100%; max-width: 100%; margin: 6px 0; font-size: .95rem; }
button:where(:not(.ed *)) { cursor: pointer; border-radius: 8px; border: 1px solid transparent; min-height: 44px; padding: 8px 16px; font-weight: 600; }
button:disabled:where(:not(.ed *)) { cursor: default; opacity: .55; }

/* l'editor delle schede (editor.css) con i colori di queste pagine, chiaro e scuro */
.ed { --ed-carta: var(--carta); --ed-testo: var(--testo); --ed-tenue: var(--tenue); --ed-linea: var(--bordo); --ed-campo: var(--bordo-campo);
  --ed-fondo-tenue: var(--superficie); --ed-accento: var(--accento); --ed-su-accento: var(--su-accento); --ed-ok: var(--ok);
  --ed-att: var(--attenzione); --ed-att-fondo: var(--attenzione-tenue); --ed-su-att: var(--su-pericolo); --ed-err: var(--errore);
  --ed-err-fondo: var(--errore-tenue); --ed-su-err: var(--su-pericolo); margin-top: 6px; }
.primario { background: var(--accento); color: var(--su-accento); }
.primario:hover:not(:disabled) { background: var(--accento-forte); }
.secondario { background: var(--carta); color: var(--accento-forte); border-color: var(--bordo); }
.pericolo { background: var(--errore); color: var(--su-pericolo); }
a.bottone { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--bordo); font-weight: 600; text-decoration: none; }
.barra h2 { flex: 1 1 auto; margin: 0; }
.azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.msg { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; white-space: pre-line; }
.msg.info { background: var(--superficie); }
.msg.ok { background: var(--ok-tenue); color: var(--ok); }
.msg.attenzione { background: var(--attenzione-tenue); color: var(--attenzione); }
.msg.errore { background: var(--errore-tenue); color: var(--errore); }
.rete { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: calc(100% - 32px); background: var(--testo); color: var(--carta);
  padding: 10px 16px; border-radius: 999px; font-size: .92rem; z-index: 10; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }

/* riepiloghi */
.fatti { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; margin: 0; }
.fatti dt { color: var(--tenue); font-size: .88rem; margin-top: 8px; }
.fatti dd { margin: 0; font-weight: 600; }
@media (min-width: 640px) {
  .fatti { grid-template-columns: minmax(0, 14em) minmax(0, 1fr); }
  .fatti dt { margin-top: 0; padding: 6px 0; }
  .fatti dd { padding: 6px 0; }
}
.elenco { list-style: none; margin: 0; padding: 0; }
.elenco > li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--bordo); }
.elenco > li:first-child { border-top: 0; }
.elenco .nome { flex: 1 1 12em; min-width: 0; }
.elenco .nome small { display: block; color: var(--tenue); font-weight: 400; }
.distintivo { display: inline-block; font-size: .8rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--superficie); color: var(--tenue); white-space: nowrap; }
.distintivo.ok { background: var(--ok-tenue); color: var(--ok); }
.distintivo.attenzione { background: var(--attenzione-tenue); color: var(--attenzione); }
.distintivo.errore { background: var(--errore-tenue); color: var(--errore); }
.avvisi { margin: 12px 0 0; padding-left: 1.2em; }
.avvisi li { margin: 4px 0; color: var(--attenzione); }

/* anteprima del file */
.scelta { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 0; cursor: pointer; }
.scelta input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; }

/* regia */
.gruppo { display: flex; gap: 6px; flex: 0 1 auto; flex-wrap: wrap; }
.gruppo button { min-width: 44px; padding: 8px 9px; }
.ritardo { font-variant-numeric: tabular-nums; }
#regia-sale .nome { flex-basis: 7em; }
/* sala piena: l'icona e la scritta, premuto pieno; sotto il nome fino a quando */
.ic-piena { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.piena-btn { display: inline-flex; align-items: center; gap: 6px; }
.piena-btn[aria-pressed="true"] { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
#regia-sale .piena-fino:empty { display: none; }
#regia-sale .piena-fino { font-weight: 600; color: var(--testo); }
.stato-regia { font-size: .88rem; color: var(--tenue); margin: 0 0 12px; }
/* App sul server: stato, indirizzo e QR da stampare */
.stato-app { font-weight: 600; margin: 8px 0; }
.indirizzo { margin: 4px 0 8px; font-size: 1.05rem; }
.qr { width: min(220px, 70vw); margin: 14px 0 4px; }
.qr svg { display: block; width: 100%; height: auto; border-radius: 6px; }
/* comandi grandi per il telefono (avvisi e piano pioggia) */
.grande { min-height: 48px; min-width: 7.5em; }
/* piano pioggia: lo stato scritto con l'icona (mai solo il colore) */
.ic-pioggia { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.stato-pioggia { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 4px 0 8px; }
.stato-pioggia.acceso { color: var(--attenzione); }
.distintivo.stato { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; padding: 4px 10px; }
.distintivo.acceso { background: var(--attenzione-tenue); color: var(--attenzione); }
#regia-pioggia .nome { flex-basis: 9em; }
.conferma.conferma-pioggia { flex: 1 1 100%; margin-top: 4px; border-color: var(--attenzione); background: var(--attenzione-tenue); }

/* barra: un titolo o una ricerca, con i pulsanti accanto (gli eventi del gestore; nei congressi la ricerca dei dati riservati e dei codici) */
.barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.barra input[type=search] { flex: 1 1 14em; width: auto; }
/* tabelle (nei congressi i dati riservati, nei due bracci i numeri per l'organizzazione): tabella sul computer, schede sotto i 900 px,
   dove le tabelle con molte colonne non ci stanno */
.schede-ris { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.schede-ris button { background: transparent; border: 1px solid var(--bordo); color: var(--testo); border-radius: 999px; min-height: 44px; padding: 6px 12px; font-weight: 500; }
.schede-ris button[aria-pressed="true"] { background: var(--accento-tenue); color: var(--accento-forte); border-color: var(--accento); }
.contenitore-tabella { margin-top: 12px; overflow-x: auto; }
table.dati { border-collapse: collapse; width: 100%; font-size: .92rem; }
table.dati th, table.dati td { text-align: left; vertical-align: top; padding: 7px 8px; border-bottom: 1px solid var(--bordo); }
table.dati th { background: var(--superficie); font-weight: 600; white-space: nowrap; }
table.dati td { white-space: pre-line; }
/* un valore breve (un codice, una data, un nome) non si spezza dentro una parola e un pulsante resta su una riga: la tabella stringe
   i testi lunghi */
table.dati td.breve { overflow-wrap: normal; }
table.dati button { white-space: nowrap; }
@media (max-width: 899px) {
  table.dati, table.dati tbody, table.dati tr, table.dati td { display: block; width: 100%; }
  table.dati thead { display: none; }
  table.dati tr { border: 1px solid var(--bordo); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; background: var(--carta); }
  table.dati td { border: 0; padding: 3px 0; }
  table.dati td::before { content: attr(data-intestazione); display: block; font-size: .8rem; color: var(--tenue); font-weight: 600; }
  table.dati td:empty { display: none; }
}
/* numeri per l'organizzazione: il giorno da vedere, le ore con la barra (meter, senza stili nella pagina), la voce con quando sotto */
.num-scelta { margin: 14px 0 0; }
#num-ore h3 { margin-top: 1em; }
table.dati.num-ore { margin-top: 6px; }
table.dati.num-ore .num-h, table.dati.num-ore .num-n { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.dati.num-ore meter { display: inline-block; width: min(60vw, 280px); height: 12px; vertical-align: middle; margin-left: 8px; }
.num-quando { display: block; color: var(--tenue); font-size: .85rem; }
#num-pagina { margin-top: 10px; }
table.dati.num-elenco td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* sul telefono le ore, le stelline e gli sponsor in righe strette: la voce, il numero accanto */
@media (max-width: 899px) {
  table.dati.num-ore tr, table.dati.num-elenco tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; }
  table.dati.num-elenco tr { grid-template-columns: minmax(0, 1fr) auto; }
  table.dati.num-ore td, table.dati.num-elenco td { width: auto; }
  table.dati.num-ore td::before, table.dati.num-elenco td::before { content: none; }
  table.dati.num-elenco td:last-child { font-weight: 600; }
  table.dati.num-ore meter { width: calc(100% - 4em); }
}
.conferma { margin-top: 14px; padding: 14px; border-radius: 8px; border: 1px solid var(--errore); background: var(--errore-tenue); }
.conferma p { color: var(--testo); }


/* accesso: Resta collegato su questo telefono */
.scelta.resta { margin-top: 14px; }
/* accesso: Entro come (organizzatore o account), una scelta per riga alta 44 px */
.scelte { border: 0; margin: 14px 0 0; padding: 0; min-width: 0; }
.scelte legend { font-weight: 600; padding: 0; margin: 0 0 2px; }
.scelte .scelta { align-items: center; min-height: 44px; }
.scelte .scelta input { margin-top: 0; }

/* persone: l'elenco con le conferme nella riga, il link d'invito da copiare */
#persone-elenco .nome { flex-basis: 12em; }
.conferma.in-riga { flex: 1 1 100%; margin-top: 4px; }

/* le versioni salvate (Programma): la versione aperta nella sua riga, con cosa cambierebbe rimettendola */
.versione { flex: 1 1 100%; margin-top: 4px; padding: 12px; border: 1px solid var(--bordo); border-radius: 8px; background: var(--superficie); }
.versione-scheda + .versione-scheda { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bordo); }
.versione-scheda h3 { margin: 0 0 6px; font-size: 1rem; }
.versione-scheda h3 small { font-weight: 400; color: var(--tenue); }
.versione-scheda p { margin: 0; }
.differenze { margin: 8px 0 0; padding-left: 1.2em; font-size: .92rem; }
.differenze li + li { margin-top: 4px; }
.versione .azioni { margin-top: 10px; }
.versione .conferma { border-color: var(--attenzione); background: var(--carta); }
#persone-link { font: .92rem/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

/* avvisi nella regia: l'elenco di quelli attivi con Togli, lo stato scritto con l'icona (mai solo il colore) */
.ic-avviso { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; margin-right: 4px; }
.stato-avvisi { display: flex; align-items: center; gap: 4px; font-weight: 600; margin: 4px 0 8px; }
.stato-avvisi.acceso { color: var(--accento-forte); }
#regia-avvisi .nome { flex-basis: 12em; }
#regia-avvisi .n { font-weight: 600; }
#regia-avvisi .testo-avviso { white-space: pre-line; color: var(--testo); margin-top: 2px; }
#regia-avvisi-carta h3 { margin-top: 1em; }

/* cambi nel programma (regia): lo stato scritto con l'icona (mai solo il colore), le righe della scheda Cambi con Ripristina o Togli
   e la conferma nella riga, il modulo del cambio */
.ic-cambio { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; margin-right: 4px; }
.stato-cambi { display: flex; align-items: center; gap: 4px; font-weight: 600; margin: 4px 0 8px; }
.stato-cambi.acceso { color: var(--accento-forte); }
#regia-cambi .nome { flex-basis: 14em; }
#regia-cambi .n { font-weight: 600; }
#regia-cambi .cosa { color: var(--testo); margin-top: 2px; }
#regia-cambi li[data-tipo="riga"] .cosa { color: var(--attenzione); }
.conferma.conferma-cambio { flex: 1 1 100%; margin-top: 4px; border-color: var(--attenzione); background: var(--attenzione-tenue); }
#regia-cambi-carta h3 { margin-top: 1em; }
.cambio-modulo { margin-top: 14px; padding: 14px; border: 1px solid var(--bordo); border-radius: 8px; background: var(--superficie); }
.cambio-modulo h3 { margin: 0 0 4px; }
.due { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
@media (min-width: 480px) { .due { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* percorsi registrati camminando: la riga di quello che sta registrando, il nome della tappa, le tappe con Togli */
.reg-stato { font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.reg-tappa { margin-top: 14px; padding: 14px; border: 1px solid var(--bordo); border-radius: 8px; background: var(--superficie); }
#reg-riassunto:focus { outline: none; }
#reg-tappe-titolo { margin-top: 1em; }
.reg-tappe > li { padding: 6px 0; }