/* ===== Pannello — un foglio solo, token in cima ===== */
:root {
  --p-fondo: #f5f5f3; --p-carta: #fff; --p-testo: #1c1e21; --p-tenue: #5f656d; --p-riga: #dcdcd8;
  --p-primario: #16181b; --p-su-primario: #fff; --p-accento: #007a0f;
  --p-ok: #166534; --p-ok-fondo: #e8f5ec; --p-err: #b3261e; --p-err-fondo: #fbeae8; --p-avv: #8a5a00; --p-avv-fondo: #fff5dc;
  --p-raggio: 6px; --p-tocco: 44px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --p-fondo: #121416; --p-carta: #1b1e21; --p-testo: #ecebe7; --p-tenue: #a2a8ae; --p-riga: #30353a;
    --p-primario: #ecebe7; --p-su-primario: #121416; --p-accento: #00ff41;
    --p-ok: #7ee2a0; --p-ok-fondo: #12301c; --p-err: #ff9a90; --p-err-fondo: #3a1715; --p-avv: #ffd27a; --p-avv-fondo: #3a2c0c;
  }
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--p-fondo); color: var(--p-testo); font-size: 1rem; line-height: 1.5; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--p-accento); outline-offset: 2px; }
h1 { font-size: 1.6rem; margin: 0 0 1rem; line-height: 1.2; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
code { font-size: .9em; }
.p-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.p-testata { background: var(--p-carta); border-bottom: 1px solid var(--p-riga); padding: .5rem max(1rem, env(safe-area-inset-left)); display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; }
.p-marchio { font-weight: 800; text-decoration: none; min-height: var(--p-tocco); display: inline-flex; align-items: center; gap: .4rem; }
.p-marchio span, .p-accesso h1 span { font-weight: 400; color: var(--p-tenue); font-size: .85em; }
.p-testata ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 .25rem; }
.p-testata nav a { display: inline-flex; align-items: center; min-height: var(--p-tocco); padding: 0 .6rem; text-decoration: none; border-radius: var(--p-raggio); }
.p-testata nav a:hover { background: var(--p-fondo); }
.p-testata nav a[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -3px 0 var(--p-accento); border-radius: 0; }

.p-corpo { max-width: 60rem; margin: 0 auto; padding: 1.5rem max(1rem, env(safe-area-inset-left)) 6rem; }
.p-spiega { color: var(--p-tenue); margin-top: -.5rem; }
.p-vuoto { color: var(--p-tenue); background: var(--p-carta); border: 1px dashed var(--p-riga); border-radius: var(--p-raggio); padding: 1.25rem; }
.p-intesta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.p-intesta h1 { margin: 0; }

.p-avviso { padding: .75rem 1rem; border-radius: var(--p-raggio); border-left: 4px solid; font-weight: 500; }
.p-avviso--ok { background: var(--p-ok-fondo); color: var(--p-ok); }
.p-avviso--errore { background: var(--p-err-fondo); color: var(--p-err); }
.p-avviso--avviso { background: var(--p-avv-fondo); color: var(--p-avv); }

.p-pulsante { display: inline-flex; align-items: center; justify-content: center; min-height: var(--p-tocco); padding: .5rem 1rem; border: 1px solid var(--p-riga); border-radius: var(--p-raggio); background: var(--p-carta); color: var(--p-testo); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.p-pulsante:hover { border-color: var(--p-testo); }
.p-pulsante--primario { background: var(--p-primario); color: var(--p-su-primario); border-color: var(--p-primario); }
.p-pulsante--pericolo { color: var(--p-err); border-color: currentColor; }
.p-pulsante--piccolo { min-width: var(--p-tocco); padding: .25rem .5rem; }
.p-inline { display: inline; margin: 0; }
.p-azioni { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1.5rem; }
/* Il pulsante Salva resta a portata anche in fondo a un modulo lungo. */
.p-azioni--fisse { position: sticky; bottom: 0; background: var(--p-fondo); padding: .75rem 0 max(.75rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--p-riga); }
.p-zona-pericolo { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--p-riga); }

.p-modulo { max-width: 44rem; }
.p-campo { margin-bottom: 1.25rem; }
.p-campo label { display: block; font-weight: 600; margin-bottom: .35rem; }
.p-facoltativo { font-weight: 400; color: var(--p-tenue); }
.p-campo input:not([type="checkbox"]), .p-campo textarea { width: 100%; min-height: var(--p-tocco); padding: .6rem .75rem; font: inherit; font-size: max(1rem, 16px); color: var(--p-testo); background: var(--p-carta); border: 1px solid var(--p-riga); border-radius: var(--p-raggio); }
.p-campo textarea { resize: vertical; line-height: 1.5; }
.p-campo [aria-invalid="true"] { border-color: var(--p-err); border-width: 2px; }
.p-spunta { display: inline-flex !important; align-items: center; gap: .6rem; min-height: var(--p-tocco); }
.p-spunta input { width: 1.25rem; height: 1.25rem; }
/* Senza: il !important qui sopra vince su [hidden] e «Seleziona tutti» comparirebbe anche senza JS, dove non fa nulla. */
.p-spunta[hidden] { display: none !important; }
.p-aiuto { color: var(--p-tenue); font-size: .875rem; margin: .35rem 0 0; }
.p-errore { color: var(--p-err); font-size: .875rem; font-weight: 600; margin: .35rem 0 0; }

.p-elenco { list-style: none; margin: 0; padding: 0; background: var(--p-carta); border: 1px solid var(--p-riga); border-radius: var(--p-raggio); }
.p-elenco li { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--p-riga); padding-right: .5rem; }
.p-elenco li:last-child { border-bottom: 0; }
.p-elenco li > a { flex: 1; min-width: 0; display: block; padding: .85rem 1rem; text-decoration: none; }
.p-elenco li > a:hover { background: var(--p-fondo); }
.p-nuovo { box-shadow: inset 4px 0 0 var(--p-accento); }
.p-sotto { display: block; color: var(--p-tenue); font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-etichetta { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .45rem; border-radius: 99px; background: var(--p-fondo); color: var(--p-tenue); vertical-align: middle; }
.p-etichetta--ok { background: var(--p-ok-fondo); color: var(--p-ok); }
.p-ordine { display: flex; gap: .25rem; }
.p-massa { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; background: var(--p-fondo); padding: .75rem 0 max(.75rem, env(safe-area-inset-bottom)); margin-top: .5rem; border-top: 1px solid var(--p-riga); }
/* Il fuoco della tastiera e i salti di scorrimento non finiscono sotto la barra: l'altezza vera la scrive pannello.js. */
html:has(.p-massa) { scroll-padding-bottom: var(--alto-massa, 8rem); }
@media (max-width: 30rem) { .p-solo-largo { display: none; } }
.p-massa__conto { margin: 0; color: var(--p-tenue); font-size: .875rem; flex: 1; min-width: 8rem; }
.p-massa__conto:empty { display: none; }
.p-massa__azioni { display: flex; flex-wrap: wrap; gap: .5rem; }
.p-elenco--pubblicabile li { flex-wrap: wrap; padding-left: 0; }
.p-elenco--pubblicabile li > a { flex: 1 1 12rem; padding-left: 0; }
.p-scelta { display: flex; align-items: center; justify-content: center; align-self: stretch; min-width: var(--p-tocco); cursor: pointer; }
.p-scelta input { width: 1.25rem; height: 1.25rem; }
/* L'interruttore: il colore non basta (daltonici), lo dice anche la posizione del pallino. */
.p-pubblica { gap: .45rem; }
.p-interruttore { position: relative; flex: none; width: 2.1rem; height: 1.2rem; border-radius: 99px; border: 2px solid var(--p-tenue); background: var(--p-carta); }
.p-interruttore::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.2rem - 8px); height: calc(1.2rem - 8px); border-radius: 50%; background: var(--p-tenue); }
[aria-pressed="true"] .p-interruttore { border-color: var(--p-ok); background: var(--p-ok); }
[aria-pressed="true"] .p-interruttore::after { left: auto; right: 2px; background: var(--p-carta); }
[aria-pressed="false"].p-pubblica { color: var(--p-tenue); font-weight: 400; }
.p-elenco--pubblicabile .p-ordine { min-width: calc(2 * var(--p-tocco) + .25rem); justify-content: flex-end; }

.p-riquadro { background: var(--p-carta); border: 1px solid var(--p-riga); border-radius: var(--p-raggio); padding: 1.25rem; margin-bottom: 1.25rem; }
.p-riquadro--avviso { background: var(--p-avv-fondo); color: var(--p-avv); border-color: currentColor; }
.p-riquadro--avviso ul { margin: 0; padding-left: 1.2rem; }

.p-cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.p-cifra { display: block; background: var(--p-carta); border: 1px solid var(--p-riga); border-radius: var(--p-raggio); padding: 1rem 1.25rem; text-decoration: none; color: var(--p-tenue); }
.p-cifra strong { display: block; font-size: 2rem; color: var(--p-testo); line-height: 1.1; }
a.p-cifra:hover { border-color: var(--p-testo); }

.p-scheda { background: var(--p-carta); border: 1px solid var(--p-riga); border-radius: var(--p-raggio); padding: .5rem 1.25rem; margin: 0 0 1rem; }
.p-scheda div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--p-riga); }
.p-scheda div:last-child { border-bottom: 0; }
.p-scheda dt { color: var(--p-tenue); }
.p-scheda dd { margin: 0; overflow-wrap: anywhere; }
.p-messaggio { background: var(--p-carta); border: 1px solid var(--p-riga); border-radius: var(--p-raggio); padding: 1.25rem; font-size: 1.05rem; overflow-wrap: anywhere; }
/* La richiesta riscritta come frase (modulo «a frase», 27 set 2026): si legge in un colpo. */
.p-frase { font-size: 1.1rem; line-height: 1.6; border-left: 3px solid var(--p-riga); padding-left: 1rem; margin: 0 0 1rem; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .p-scheda div { grid-template-columns: 1fr; gap: 0; } }

.p-grafico { margin: 0 0 2rem; background: var(--p-carta); border: 1px solid var(--p-riga); border-radius: var(--p-raggio); padding: 1rem; }
.p-grafico figcaption { font-weight: 600; margin-bottom: .75rem; }
.p-grafico ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 2px; height: 10rem; }
.p-grafico li { flex: 1; min-width: 0; height: max(var(--h), 2px); background: var(--p-accento); border-radius: 2px 2px 0 0; position: relative; }
.p-barra-n { position: absolute; bottom: 100%; left: 0; right: 0; text-align: center; font-size: .65rem; color: var(--p-tenue); }
.p-colonne { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .p-colonne { grid-template-columns: 1fr 1fr; } }
.p-tabella { width: 100%; border-collapse: collapse; background: var(--p-carta); border: 1px solid var(--p-riga); }
.p-tabella th, .p-tabella td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--p-riga); overflow-wrap: anywhere; }
.p-tabella td:last-child, .p-tabella th:last-child { text-align: right; width: 5rem; }

.p-accesso { max-width: 24rem; margin: 12vh auto 0; background: var(--p-carta); border: 1px solid var(--p-riga); border-radius: var(--p-raggio); padding: 2rem; }
.p-accesso h1 { font-size: 1.4rem; }
.p-accesso .p-pulsante { width: 100%; }

.p-foto { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.p-foto__img { width: 160px; height: auto; border-radius: var(--p-raggio); border: 1px solid var(--p-riga); }
.p-campo input[type="file"] { min-height: var(--p-tocco); font: inherit; }

.p-schermate { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .75rem; }
.p-schermate li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1rem; align-items: center; border-bottom: 1px solid var(--p-riga); padding-bottom: .75rem; }
.p-schermate li .p-ordine { grid-column: 2; }
.p-schermate__img { width: 200px; height: auto; border: 1px solid var(--p-riga); border-radius: var(--p-raggio); }
.p-icona { width: 96px; height: 96px; border-radius: 22px; border: 1px solid var(--p-riga); }
@media (max-width: 30rem) { .p-schermate li { grid-template-columns: 1fr; } .p-schermate li .p-ordine { grid-column: 1; } }

/* --- Pagine con anteprima dal vivo (Scheda, Strumenti) --- */
.p-doppia { display: grid; gap: 1.5rem; }
@media (min-width: 70rem) {
  .p-corpo:has(.p-doppia) { max-width: 88rem; }
  .p-doppia { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); align-items: start; }
  .p-anteprima { position: sticky; top: 1rem; }
}
.p-campo select { width: 100%; min-height: var(--p-tocco); padding: .5rem .75rem; font: inherit; font-size: max(1rem, 16px); color: var(--p-testo); background: var(--p-carta); border: 1px solid var(--p-riga); border-radius: var(--p-raggio); }
.p-anteprima { margin: 0; }
.p-anteprima figcaption { font-size: .8125rem; color: var(--p-tenue); margin-bottom: .5rem; }
/* La home è larga 1280 px dentro l'iframe e viene rimpicciolita alla
   colonna: così si vede com'è su un computer, non «stretta». */
.p-anteprima__vetro { position: relative; overflow: hidden; height: calc(var(--alto) * var(--scala, .5)); border: 1px solid var(--p-riga); border-radius: var(--p-raggio); background: var(--p-carta); }
.p-anteprima__vetro iframe { position: absolute; top: 0; left: 0; width: 1280px; height: var(--alto); border: 0; transform: scale(var(--scala, .5)); transform-origin: 0 0; pointer-events: auto; }

.p-contatore--oltre { color: var(--p-err); font-weight: 600; }

/* --- Statistiche --- */
.p-schede, .p-periodo { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; margin: 1rem 0; }
.p-schede a, .p-periodo a { display: inline-flex; align-items: center; min-height: var(--p-tocco); padding: 0 .9rem; border: 1px solid var(--p-riga); border-radius: 99px; text-decoration: none; background: var(--p-carta); }
.p-schede a[aria-current="page"], .p-periodo a[aria-current="page"] { background: var(--p-primario); color: var(--p-su-primario); border-color: var(--p-primario); font-weight: 600; }
.p-schede--filtri a { font-size: .875rem; }
.p-cifra__nota { display: block; font-size: .8125rem; margin-top: .25rem; }
.p-cifra--escluse strong { color: var(--p-tenue); }
.p-grafico li a { position: absolute; inset: 0; }
.p-come summary { cursor: pointer; font-weight: 600; min-height: var(--p-tocco); display: flex; align-items: center; }
.p-come ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.p-come li { margin-bottom: .6rem; }
.p-escludimi p { margin-top: 0; }
.p-scorre { overflow-x: auto; }
.p-tabella--righe { font-size: .875rem; min-width: 46rem; }
.p-tabella--righe td:last-child, .p-tabella--righe th:last-child { width: auto; text-align: left; }
.p-classe--persona td:nth-child(3) { color: var(--p-ok); font-weight: 600; }
.p-classe--robot td, .p-classe--bussata td, .p-classe--non-confermato td { color: var(--p-tenue); }

/* Accesso, secondo fattore, account e utenti (sicurezza, 30 set 2026) */
.p-accesso--largo { max-width: 36rem; margin-top: 6vh; }
.p-accesso form + form, .p-accesso .p-inline { display: block; margin-top: 1rem; }
.p-oppure { display: flex; align-items: center; gap: .75rem; color: var(--p-tenue); margin: 1.25rem 0; }
.p-oppure::before, .p-oppure::after { content: ""; flex: 1; border-top: 1px solid var(--p-riga); }
.p-pulsante--testo { border-color: transparent; background: none; font-weight: 400; text-decoration: underline; }
.p-passi { padding-left: 1.25rem; }
.p-passi li + li { margin-top: 1rem; }
/* Il QR non deve superare la colonna (a 320 px sbordava di 14 px): si rimpicciolisce, resta leggibile. */
.p-qr img { display: block; margin: .75rem 0; background: #fff; padding: 8px; border-radius: var(--p-raggio); image-rendering: pixelated; max-width: 100%; height: auto; box-sizing: border-box; }
.p-chiave { font-size: 1rem; letter-spacing: .05em; overflow-wrap: anywhere; user-select: all; }
.p-codici { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; list-style: none; padding: 0; }
.p-codici code { font-size: 1.05rem; user-select: all; }
.p-elenco-semplice { list-style: none; padding: 0; margin: 0 0 1rem; }
.p-elenco-semplice li { padding: .75rem 0; border-bottom: 1px solid var(--p-riga); }
.p-riga-azioni { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin: .75rem 0; }
.p-riga-azioni .p-campo { margin: 0; }
.p-sotto-inline { color: var(--p-tenue); font-size: .875rem; font-weight: 400; }
.p-sotto-blocco { color: var(--p-tenue); margin: 0 0 .5rem; }
.p-scorri { overflow-x: auto; }
.p-riga--allarme td { background: var(--p-err-fondo); }
.p-scadenza { position: sticky; top: 0; z-index: 2; margin: 0; border-radius: 0; }
.p-riquadro details { margin-top: .5rem; }
.p-riquadro summary { cursor: pointer; min-height: var(--p-tocco); display: flex; align-items: center; }