/* =====================================================================
   PANNELLO di simplebuild.it (motore di angelosasso.it) — SOLO ciò che è proprio di questo sito.

   Dal 1 ott 2026 l'aspetto è quello COMUNE dei tre pannelli
   (~/Pannelli-Comuni/aspetto: token.css, marchi/angelosasso.css,
   componenti.css, copiati da allinea.sh in assets/aspetto/). Questo foglio
   arriva DOPO quei tre (pcHead, fogli_extra) e contiene solo i pezzi che il
   modulo non ha: accesso, anteprime della home e del Markdown, confronto
   delle versioni, messaggio, codici e QR, foto e schermate, frecce
   dell'ordine, interruttore «Sul sito», avviso di scadenza, copia di riserva.
   ⛔️ SUPERATO il 1 ott 2026: il foglio a prefisso p- con i suoi token
   (--p-fondo, --p-carta…) e il tema scuro proprio (in git fino a bd59d20).

   Regole: solo token --pc-* (il tema chiaro/scuro, anche forzato, segue da
   sé); nessun elemento nudo (body, a, h1…): toccherebbe tutte le pagine e
   litigherebbe col modulo; niente --pc-* ridefinite qui (scavalcherebbero
   marchio e tema scuro, CAMBIAMENTI-PER-SITO punto 7).
   ===================================================================== */

/* ===== I colori di SimpleBuild (11 ott 2026) =====
   'simplebuild' non è fra i marchi del modulo comune (PC_MARCHI): il telaio non scrive
   data-sito e carica solo token.css generico. Qui gli stessi selettori di token.css, che
   questo foglio segue (pcHead, fogli_extra): a parità di peso vince l'ultimo.
   Chiaro = la Laguna del sito, scuro = il Notturno. Contrasti (formula WCAG):
   accento-testo #006b78 su #f4fbfc 5,8:1 · #6ef2ff su #0b0f13 14:1. */
:root, [data-tema="chiaro"] {
  --pc-sfondo: #f4fbfc; --pc-superficie: #ffffff; --pc-superficie-2: #e3f4f7;
  --pc-testo: #082a31; --pc-testo-tenue: #4f6a71; --pc-bordo: #cfe7eb; --pc-bordo-forte: #082a31; --pc-bordo-campo: #5f7a80;
  --pc-accento: #006b78; --pc-accento-testo: #006b78; --pc-su-accento: #ffffff; --pc-accento-tenue: #d4f3f7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --pc-sfondo: #06080b; --pc-superficie: #0e1318; --pc-superficie-2: #141b22;
    --pc-testo: #eafcff; --pc-testo-tenue: #8a9a94; --pc-bordo: #1e262d; --pc-bordo-forte: #eafcff; --pc-bordo-campo: #6d7c80;
    --pc-accento: #6ef2ff; --pc-accento-testo: #6ef2ff; --pc-su-accento: #03181b; --pc-accento-tenue: #0d2a30;
  }
}
[data-tema="scuro"] {
  --pc-sfondo: #06080b; --pc-superficie: #0e1318; --pc-superficie-2: #141b22;
  --pc-testo: #eafcff; --pc-testo-tenue: #8a9a94; --pc-bordo: #1e262d; --pc-bordo-forte: #eafcff; --pc-bordo-campo: #6d7c80;
  --pc-accento: #6ef2ff; --pc-accento-testo: #6ef2ff; --pc-su-accento: #03181b; --pc-accento-tenue: #0d2a30;
}


/* Un modulo con un solo pulsante, in riga con gli altri. */
.p-inline { display: inline-flex; margin: 0; }

/* ---------- Pagine dell'accesso (password, secondo fattore, iscrizione) ---------- */
.p-fuori .pc-corpo { max-width: 30rem; }
.p-fuori .pc-corpo:has(.p-accesso--largo) { max-width: 40rem; }
.p-accesso { margin-top: var(--pc-sp-4); }
.p-accesso > form + form, .p-accesso > .p-inline { display: flex; margin-top: var(--pc-sp-4); }
.p-oppure { display: flex; align-items: center; gap: var(--pc-sp-3); color: var(--pc-testo-tenue); margin: var(--pc-sp-4) 0; }
.p-oppure::before, .p-oppure::after { content: ""; flex: 1; border-top: 1px solid var(--pc-bordo); }
.p-passi { padding-left: var(--pc-sp-5); }
.p-passi li + li { margin-top: var(--pc-sp-4); }
.p-errore-pagina { max-width: var(--pc-larghezza-testo); }
.p-errore-pagina p { margin-top: var(--pc-sp-3); }

/* Il QR va letto da una fotocamera: nero su BIANCO anche nel tema scuro (un QR
   invertito molte app non lo leggono). A 320 px sbordava di 14 px: si
   rimpicciolisce, resta leggibile. */
.p-qr img { display: block; margin: var(--pc-sp-3) 0; background: #fff; padding: var(--pc-sp-2); image-rendering: pixelated; max-width: 100%; height: auto; }
.p-chiave { font-family: var(--pc-font-mono); font-size: var(--pc-testo-md); letter-spacing: 0.05em; overflow-wrap: anywhere; user-select: all; }
.p-codici { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--pc-sp-2); margin: var(--pc-sp-3) 0; }
.p-codici code { font-family: var(--pc-font-mono); font-size: var(--pc-testo-md); user-select: all; }

/* ---------- Messaggio del modulo contatti ---------- */
.p-scheda { margin: 0 0 var(--pc-sp-4); border-top: 1px solid var(--pc-bordo-forte); }
.p-scheda > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--pc-sp-3); padding: var(--pc-sp-2) 0; border-bottom: 1px solid var(--pc-bordo); }
.p-scheda dt { color: var(--pc-testo-tenue); font-family: var(--pc-font-mono); font-size: var(--pc-testo-xs); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 0.15em; }
.p-scheda dd { margin: 0; overflow-wrap: anywhere; }
.p-scheda a { display: inline-flex; align-items: center; min-height: var(--pc-tocco); }
@media (max-width: 30rem) { .p-scheda > div { grid-template-columns: 1fr; gap: 0; } }
.p-messaggio { background: var(--pc-superficie); border-left: 3px solid var(--pc-bordo-forte); padding: var(--pc-sp-4); font-size: var(--pc-testo-md); overflow-wrap: anywhere; margin-bottom: var(--pc-sp-4); }
/* La richiesta riscritta come frase (modulo «a frase», 27 set 2026): si legge in un colpo. */
.p-frase { font-size: var(--pc-testo-lg); line-height: 1.5; border-left: 3px solid var(--pc-accento); padding-left: var(--pc-sp-4); margin: 0 0 var(--pc-sp-4); overflow-wrap: anywhere; }

/* ---------- Foto del profilo, schermate e icona dei lavori ---------- */
.p-foto { display: flex; flex-wrap: wrap; gap: var(--pc-sp-4); align-items: flex-start; margin-bottom: var(--pc-sp-4); }
.p-foto__img { width: 10rem; height: auto; border: 1px solid var(--pc-bordo); }
.p-schermate { display: grid; gap: var(--pc-sp-3); margin: 0 0 var(--pc-sp-4); }
.p-schermate li { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: var(--pc-sp-3); align-items: center; border-bottom: 1px solid var(--pc-bordo); padding-bottom: var(--pc-sp-3); }
.p-schermate li > .p-ordine { grid-column: 2; }
.p-schermate__img { width: 12.5rem; height: auto; border: 1px solid var(--pc-bordo); }
.p-icona { width: 6rem; height: 6rem; border-radius: 22%; border: 1px solid var(--pc-bordo); }
@media (max-width: 30rem) { .p-schermate li { grid-template-columns: 1fr; } .p-schermate li > .p-ordine { grid-column: 1; } }
/* Il campo file del browser: alto quanto un bersaglio da dito. */
.p-file { display: block; min-height: var(--pc-tocco); font: inherit; max-width: 100%; }

/* ---------- Frecce dell'ordine (servizi, lavori, tutorial, schermate) ---------- */
.p-ordine { display: flex; flex-wrap: wrap; gap: var(--pc-sp-1); align-items: center; }
.p-ordine .pc-pulsante { min-width: var(--pc-tocco); }

/* ---------- Interruttore «Sul sito» nell'elenco ----------
   Il nome resta «Sul sito» e aria-pressed dice se è acceso: il lettore di
   schermo legge lo stato, non l'azione. Il colore non basta (daltonici): lo
   dice anche la posizione del pallino. */
.p-pubblica { gap: var(--pc-sp-2); }
.p-interruttore { position: relative; flex: none; width: 2.1rem; height: 1.2rem; border-radius: 99px; border: 2px solid var(--pc-testo-tenue); background: var(--pc-superficie); }
.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(--pc-testo-tenue); }
[aria-pressed="true"] > .p-interruttore { border-color: var(--pc-positivo); background: var(--pc-positivo); }
[aria-pressed="true"] > .p-interruttore::after { left: auto; right: 2px; background: var(--pc-superficie); }
.pc-pulsante.p-pubblica[aria-pressed="false"] { color: var(--pc-testo-tenue) !important; font-weight: 400; }
/* La barra in basso, quando si incolla: fuoco e salti non finiscono sotto (l'altezza la scrive pannello.js). */
html:has(.pc-voce__scelta input:checked) { scroll-padding-bottom: var(--alto-massa, 8rem); }
.p-massa-tutti { margin: 0; }
@media (max-width: 30rem) { .p-solo-largo { display: none; } }

/* ---------- Pagine con anteprima dal vivo della home (Scheda, Strumenti) ---------- */
.p-doppia { display: grid; gap: var(--pc-sp-5); }
@media (min-width: 70rem) {
  .p-doppia { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); align-items: start; }
  .p-anteprima { position: sticky; top: var(--pc-sp-4); }
}
.p-anteprima { margin: 0; }
.p-anteprima figcaption { font-size: var(--pc-testo-sm); color: var(--pc-testo-tenue); margin-bottom: var(--pc-sp-2); }
/* La home è larga 1280 px dentro l'iframe e viene rimpicciolita alla colonna:
   così si vede com'è su un computer, non «stretta». L'altezza era uno style=""
   per pagina: dal 1 ott 2026 è qui (le due pagine usano 760 px), perché la CSP
   non ammette più stili in linea. La scala la scrive pannello.js (CSSOM). */
.p-anteprima__vetro { --alto: 760px; position: relative; overflow: hidden; height: calc(var(--alto) * var(--scala, 0.5)); border: 1px solid var(--pc-bordo); background: var(--pc-superficie); }
.p-anteprima__vetro iframe { position: absolute; top: 0; left: 0; width: 1280px; height: var(--alto); border: 0; transform: scale(var(--scala, 0.5)); transform-origin: 0 0; }

/* ---------- Anteprima del Markdown (tutorial e Privacy) ---------- */
.p-anteprima-md { margin: calc(-1 * var(--pc-sp-2)) 0 var(--pc-sp-4); }
.p-anteprima-md .pc-aiuto:empty { display: none; }
.p-anteprima-md__vetro { margin-top: var(--pc-sp-2); border: 1px solid var(--pc-bordo); overflow: hidden; }
/* Lo sfondo della cornice è quello del SITO (il CSS dentro l'iframe è il suo): bianco
   nel chiaro, il suo nero nel buio, finché il foglio non arriva. */
.p-anteprima-md__vetro iframe { display: block; width: 100%; height: min(70vh, 40rem); border: 0; background: #fff; }
@media (prefers-color-scheme: dark) { .p-anteprima-md__vetro iframe { background: #121416; } }
.p-contatore--oltre { color: var(--pc-negativo); font-weight: 600; }

/* ---------- Versioni: il confronto riga per riga ---------- */
.p-confronto h3 { font-size: var(--pc-testo-md); margin: var(--pc-sp-4) 0 var(--pc-sp-2); }
.p-scheda--confronto > div { grid-template-columns: 10rem minmax(0, 1fr); }
@media (max-width: 30rem) { .p-scheda--confronto > div { grid-template-columns: 1fr; } }
.p-diff { border: 1px solid var(--pc-bordo); overflow: hidden; font-size: var(--pc-testo-sm); }
.p-diff__riga { display: block; padding: 0.15rem var(--pc-sp-2); white-space: pre-wrap; overflow-wrap: anywhere; text-decoration: none; color: var(--pc-testo); }
.p-diff__riga--via { background: var(--pc-negativo-fondo); }
.p-diff__riga--torna { background: var(--pc-positivo-fondo); }
.p-diff__segno { display: inline-block; width: 1.25em; font-weight: 700; font-family: var(--pc-font-mono); }
.p-diff__salto { margin: 0; padding: 0.1rem var(--pc-sp-2); color: var(--pc-testo-tenue); background: var(--pc-superficie-2); }

/* ---------- Avviso di scadenza della sessione (lo crea pannello.js) ---------- */
.p-scadenza { position: sticky; top: 0; z-index: 6; margin: 0; }

/* ---------- Copia di riserva dei moduli (la propone pannello.js) ---------- */
.p-riserva { display: grid; gap: var(--pc-sp-2); }

/* ---------- Scheda Privacy ---------- */
.p-privacy-azioni { margin-top: var(--pc-sp-2); }
.p-segnaposti > div { display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); gap: var(--pc-sp-3); padding: var(--pc-sp-2) 0; border-bottom: 1px solid var(--pc-bordo); }
.p-segnaposti dt code { font-family: var(--pc-font-mono); font-size: var(--pc-testo-sm); }
.p-segnaposti dd { margin: 0; font-size: var(--pc-testo-sm); overflow-wrap: anywhere; }
@media (max-width: 30rem) { .p-segnaposti > div { grid-template-columns: 1fr; gap: 0; } }
/* Una versione archiviata, letta dentro il pannello: conta il testo, non la grafica del sito. */
.p-privacy-testo { max-width: var(--pc-larghezza-testo); overflow-wrap: anywhere; }
.p-privacy-testo__titolo { font-weight: 700; font-size: var(--pc-testo-lg); }
.p-privacy-testo h2 { font-size: var(--pc-testo-md); margin: var(--pc-sp-4) 0 var(--pc-sp-1); }
.p-privacy-testo p { margin: var(--pc-sp-2) 0; }

/* ---------- Spazi fra le parti di una pagina del pannello ---------- */
.p-spazio { margin-top: var(--pc-sp-5); }
.p-sotto { display: block; color: var(--pc-testo-tenue); font-size: var(--pc-testo-sm); overflow-wrap: anywhere; }

/* ---------- Filtri degli elenchi e del registro, ruolo di un utente ----------
   Campi in riga che vanno a capo: sul telefono uno sotto l'altro. */
.p-filtri-elenco, .p-filtri-registro, .p-ruolo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 var(--pc-sp-3); flex: 1 1 100%; }
.p-filtri-elenco .pc-campo, .p-filtri-registro .pc-campo, .p-ruolo .pc-campo { flex: 1 1 12rem; min-width: 0; margin-bottom: var(--pc-sp-2); }
.p-filtri-elenco .pc-campo:first-of-type { flex-basis: 16rem; }
.p-filtri-elenco .pc-pulsanti, .p-filtri-registro .pc-pulsanti, .p-ruolo > .pc-pulsante { margin-bottom: var(--pc-sp-2); }
.p-ruolo { max-width: 32rem; margin-top: var(--pc-sp-3); }
/* Il registro ha sei colonne: sotto i 46rem scorre nel suo riquadro, non la pagina. */
.p-registro { min-width: 46rem; }
.p-registro td { overflow-wrap: anywhere; }

/* ---------- Campi della versione inglese (moduli dei contenuti) ---------- */
.p-inglese { border-top: 3px solid var(--pc-bordo-forte); padding-top: var(--pc-sp-3); margin-top: var(--pc-sp-6); }
/* «Manca la traduzione» non è un errore del modulo (si salva lo stesso): colore d'avviso, con l'icona. */
.p-da-tradurre { color: var(--pc-avviso); }
/* Una sezione a riga spessa subito dopo un testo d'aiuto (Tutorial: «pronti da
   importare») stava attaccata al paragrafo: visto nelle schermate a 390 (1 ott 2026). */
.pc-aiuto + .pc-sezione, .pc-aiuto + .pc-barra-strumenti { margin-top: var(--pc-sp-5); }