/* =====================================================================
   PANNELLI COMUNI — componenti (direzione 2 «Registro» + la frase della 3)

   Un solo piano di carta: niente schede né ombre, le sezioni si separano
   con una riga spessa d'inchiostro (le colonne della rivista VeloSide).
   Numeri sempre in Plex Mono: allineati, confrontabili riga per riga.
   Navigazione: tre tendine per gruppo in testata (details con lo stesso
   name: se ne apre una per volta, senza JavaScript).

   REGOLE DEL FOGLIO
   - Solo token (--pc-*). Colori e spazi scritti a mano NO; ammessi solo
     gli spessori dei fili (1–3 px), che sono disegno e non ritmo.
   - Nessuna regola dipende da JavaScript: aspetto.js aggiunge comodità
     (chiudere le tendine toccando fuori, Esc, conferme in finestra, tema)
     e se manca tutto funziona lo stesso.
   - Compatibile con CSP style-src 'self': nessuno style="" nel markup.
   - Ciò che usa CSS recente degrada da solo: :has() (Safari 15.4) solo
     per evidenziare la barra delle azioni in blocco; details name=
     (Safari 17.2) prima apre più tendine insieme, innocuo.

   Le classi vecchie dei tre pannelli e come si mappano su queste:
   CAMBIAMENTI-PER-SITO.md.
   ===================================================================== */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.pc {
  margin: 0; background: var(--pc-sfondo); color: var(--pc-testo);
  font-family: var(--pc-font); font-size: var(--pc-testo-md); line-height: 1.5;
}
.pc h1, .pc h2, .pc h3, .pc p { margin: 0; }
.pc a { color: var(--pc-accento-testo); text-underline-offset: 0.15em; }
.pc-corpo ul, .pc-corpo ol, .pc-testata ul { margin: 0; padding: 0; list-style: none; }
.pc img { max-width: 100%; display: block; }
/* Contorno da 3 px nel colore dell'accento, staccato di 2: si vede su carta e
   su fondo scuro (l'accento sta ≥ 3:1 su entrambi, misurato da contrasto.mjs). */
.pc :focus-visible { outline: 3px solid var(--pc-accento); outline-offset: 2px; }
.pc-num {
  font-family: var(--pc-font-mono); font-weight: var(--pc-mono-peso);
  font-variant-numeric: tabular-nums;
  /* Si serve un peso solo di Plex: niente grassetto finto sui numeri. */
  font-synthesis-weight: none;
}
.pc-tenue { color: var(--pc-testo-tenue); }
.pc-piccolo { font-size: var(--pc-testo-sm); }
.pc-codice { font-family: var(--pc-font-mono); font-size: var(--pc-testo-sm); overflow-wrap: anywhere; }
.pc-nascosto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.pc-simboli { position: absolute; width: 0; height: 0; overflow: hidden; }
.pc-icona { width: 1.125rem; height: 1.125rem; flex: none; }
.pc-salta {
  position: absolute; left: var(--pc-sp-2); top: -10rem; z-index: 20;
  background: var(--pc-testo); color: var(--pc-sfondo) !important; padding: var(--pc-sp-2) var(--pc-sp-4);
}
.pc-salta:focus { top: var(--pc-sp-2); }
/* Una classe con display non deve vincere su hidden (Altomare §2.46). */
[hidden] { display: none !important; }

/* =====================================================================
   TESTATA con i gruppi Lavoro · Sito · Sistema
   ===================================================================== */
.pc-testata {
  position: relative; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--pc-sp-4);
  padding: 0 var(--pc-sp-4); background: var(--pc-sfondo);
  border-bottom: 3px solid var(--pc-bordo-forte);
}
.pc-marchio {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--pc-sp-2); min-height: 3.25rem;
  padding-top: var(--pc-sp-3); color: var(--pc-testo) !important; text-decoration: none; min-width: 0;
}
.pc-marchio__nome {
  font-family: var(--pc-font-titoli); font-weight: var(--pc-titoli-peso); font-style: var(--pc-titoli-stile);
  font-size: var(--pc-testo-lg); letter-spacing: -0.01em; line-height: 1;
}
.pc-marchio__sotto, .pc-gruppo__nome, .pc-occhiello, .pc-sezione__titolo, .pc-cifra__etichetta,
.pc-campo > label, .pc-campo__etichetta, .pc-tabella thead th, .pc-elenco__intesta, .pc-dettagli > summary,
.pc-primo__etichetta, .pc-gruppo-campi > legend {
  /* Le «sigle» del registro: maiuscoletto in Mono. 12 px è il minimo (C3). */
  font-family: var(--pc-font-mono); font-weight: var(--pc-mono-peso); font-size: var(--pc-testo-xs);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.pc-marchio__sotto { color: var(--pc-testo-tenue); }
.pc-testata > .pc-nav { order: 3; flex: 1 0 100%; display: flex; flex-wrap: wrap; border-top: 1px solid var(--pc-bordo); }
.pc-utente { margin-left: auto; display: flex; align-items: center; }
.pc-utente form { margin: 0; display: flex; }
.pc-utente a, .pc-utente button {
  display: inline-flex; align-items: center; gap: var(--pc-sp-1); min-height: var(--pc-tocco); min-width: var(--pc-tocco);
  justify-content: center; padding: 0 var(--pc-sp-2); border: 0; background: none; cursor: pointer;
  color: var(--pc-testo-tenue); text-decoration: none; font: inherit; font-size: var(--pc-testo-sm);
}
.pc-utente a:hover, .pc-utente button:hover { color: var(--pc-testo); }
/* Sul telefono restano le icone: il nome accessibile è il testo nascosto, non l'icona. */
.pc-utente__testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 64rem) {
  .pc-testata { flex-wrap: nowrap; padding: 0 var(--pc-sp-6); }
  .pc-testata > .pc-nav { order: 0; flex: 1 1 auto; border-top: 0; margin-left: var(--pc-sp-4); }
  .pc-utente__testo { position: static; width: auto; height: auto; clip-path: none; }
}
.pc-gruppo > summary {
  display: flex; align-items: center; gap: var(--pc-sp-2);
  min-height: var(--pc-tocco); padding: 0 var(--pc-sp-3);
  cursor: pointer; list-style: none; font-weight: 600; white-space: nowrap;
}
.pc-gruppo:first-child > summary { padding-left: 0; }
@media (min-width: 64rem) { .pc-gruppo:first-child > summary { padding-left: var(--pc-sp-3); } }
.pc-gruppo > summary::-webkit-details-marker { display: none; }
.pc-gruppo > summary .pc-icona { width: 1rem; height: 1rem; color: var(--pc-testo-tenue); }
.pc-gruppo[open] > summary .pc-icona { rotate: 180deg; }
.pc-gruppo__nome { color: var(--pc-testo-tenue); }
.pc-gruppo--attivo .pc-gruppo__nome { color: var(--pc-testo); }
.pc-gruppo__qui { box-shadow: inset 0 -2px 0 var(--pc-accento); }
.pc-gruppo__voci {
  position: absolute; left: var(--pc-sp-4); right: var(--pc-sp-4); top: 100%;
  background: var(--pc-superficie); border: 1px solid var(--pc-bordo-forte); border-top-width: 3px;
  padding: var(--pc-sp-2) 0; display: grid; box-shadow: var(--pc-ombra-sopra);
  max-height: calc(100vh - 7rem); overflow-y: auto;
}
@media (min-width: 40rem) {
  .pc-gruppo { position: relative; }
  .pc-gruppo__voci { left: 0; right: auto; min-width: 16rem; top: calc(100% + 3px); }
}
.pc-gruppo__voci a {
  display: flex; align-items: center; gap: var(--pc-sp-2); min-height: var(--pc-tocco);
  padding: 0 var(--pc-sp-4); color: var(--pc-testo); text-decoration: none;
}
.pc-gruppo__voci a:hover { background: var(--pc-superficie-2); }
.pc-gruppo__voci a[aria-current="page"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--pc-accento); }
.pc-nav__testo { flex: 1; }
.pc-conto {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.375rem; height: 1.375rem;
  padding: 0 var(--pc-sp-1); background: var(--pc-accento); color: var(--pc-su-accento);
  font-family: var(--pc-font-mono); font-size: var(--pc-testo-xs); font-weight: var(--pc-mono-peso);
  font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none;
}
.pc-tema { /* l'interruttore del tema: compare solo se aspetto.js gira (nasce hidden) */ }

/* =====================================================================
   CORPO E INTESTAZIONE DI PAGINA
   ===================================================================== */
.pc-corpo { max-width: var(--pc-larghezza); margin: 0 auto; padding: var(--pc-sp-5) var(--pc-sp-4) var(--pc-sp-6); }
@media (min-width: 64rem) { .pc-corpo { padding: var(--pc-sp-6); } }
.pc-intesta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--pc-sp-3); margin-bottom: var(--pc-sp-4); }
.pc-intesta__testi { min-width: 0; }
.pc-occhiello { color: var(--pc-testo-tenue); margin-bottom: var(--pc-sp-1); }
.pc-intesta h1, .pc-titolo {
  font-family: var(--pc-font-titoli); font-weight: var(--pc-titoli-peso); font-style: var(--pc-titoli-stile);
  font-size: var(--pc-testo-2xl); line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere;
}
@media (max-width: 39.99rem) { .pc-intesta h1, .pc-titolo { font-size: var(--pc-testo-xl); } }
.pc-sottotitolo { font-family: var(--pc-font-mono); font-size: var(--pc-testo-sm); color: var(--pc-testo-tenue); margin-top: var(--pc-sp-2); }
.pc-intesta__azioni { display: flex; flex-wrap: wrap; gap: var(--pc-sp-2); }
.pc-briciole { font-size: var(--pc-testo-sm); margin-bottom: var(--pc-sp-2); }
.pc-briciole a { display: inline-flex; align-items: center; gap: var(--pc-sp-1); min-height: var(--pc-tocco); }

/* =====================================================================
   PULSANTI
   ===================================================================== */
.pc-pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pc-sp-2);
  min-height: var(--pc-tocco); padding: 0 var(--pc-sp-4);
  border: 1px solid var(--pc-testo); border-radius: var(--pc-raggio);
  background: transparent; color: var(--pc-testo) !important;
  font: inherit; font-size: var(--pc-testo-sm); font-weight: 600; text-decoration: none;
  cursor: pointer; white-space: nowrap; list-style: none;
}
.pc-pulsante::-webkit-details-marker { display: none; }
.pc-pulsante:hover { background: var(--pc-superficie-2); }
/* Pieno d'accento: UNO per schermata, il compito primario (CRITERI C2). */
.pc-pulsante--primario { background: var(--pc-accento); border-color: var(--pc-accento); color: var(--pc-su-accento) !important; }
.pc-pulsante--primario:hover { background: var(--pc-accento); filter: brightness(1.12); }
.pc-pulsante--testo { border-color: transparent; color: var(--pc-accento-testo) !important; text-decoration: underline; padding: 0 var(--pc-sp-1); }
.pc-pulsante--pericolo { color: var(--pc-negativo) !important; border-color: var(--pc-negativo); }
.pc-pulsante--pericolo-pieno { background: var(--pc-negativo); border-color: var(--pc-negativo); color: var(--pc-sfondo) !important; }
.pc-pulsante--piccolo { padding: 0 var(--pc-sp-3); }
.pc-pulsante--largo { width: 100%; }
/* Interruttore (pubblica/nascondi, «in home»): lo stato sta in aria-pressed, non in una classe,
   così chi usa un lettore di schermo sente «premuto». Il segno ✓ nel testo lo mette il sito. */
.pc-pulsante[aria-pressed="true"] { background: var(--pc-accento-tenue); border-color: var(--pc-accento); color: var(--pc-testo) !important; }
.pc-pulsante[disabled], .pc-pulsante[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.pc-pulsanti { display: flex; flex-wrap: wrap; gap: var(--pc-sp-2); align-items: center; }

/* =====================================================================
   BARRA DEGLI STRUMENTI: sotto-schede, periodo, filtri, ricerca
   ===================================================================== */
.pc-barra-strumenti {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pc-sp-2) var(--pc-sp-4);
  border-top: 1px solid var(--pc-bordo-forte); border-bottom: 1px solid var(--pc-bordo);
  margin-bottom: var(--pc-sp-5); padding: var(--pc-sp-1) 0;
}
.pc-sotto-schede ul, .pc-periodo ul, .pc-filtri ul { display: flex; flex-wrap: wrap; gap: 0 var(--pc-sp-4); }
.pc-sotto-schede a, .pc-periodo a, .pc-filtri a {
  display: inline-flex; align-items: center; gap: var(--pc-sp-1); min-height: var(--pc-tocco);
  color: var(--pc-testo-tenue); text-decoration: none; font-size: var(--pc-testo-sm); font-weight: 600;
}
.pc-sotto-schede a[aria-current="page"], .pc-periodo a[aria-current="page"], .pc-filtri a[aria-current="page"] {
  color: var(--pc-testo); box-shadow: inset 0 -3px 0 var(--pc-accento);
}
.pc-periodo a, .pc-filtri__n { font-family: var(--pc-font-mono); font-weight: var(--pc-mono-peso); }
.pc-cerca { position: relative; display: flex; gap: var(--pc-sp-2); flex: 1 1 16rem; max-width: 28rem; min-width: 0; padding: var(--pc-sp-1) 0; }
.pc-cerca__icona { position: absolute; left: var(--pc-sp-3); top: 50%; translate: 0 -50%; color: var(--pc-testo-tenue); pointer-events: none; }
.pc-cerca .pc-input { padding-left: calc(var(--pc-sp-6) + var(--pc-sp-1)); min-width: 0; }

/* =====================================================================
   SEZIONI A RIGA SPESSA
   ===================================================================== */
.pc-sezione { border-top: 3px solid var(--pc-bordo-forte); padding-top: var(--pc-sp-3); margin-bottom: var(--pc-sp-6); min-width: 0; }
.pc-sezione__titolo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pc-sp-1) var(--pc-sp-2); margin-bottom: var(--pc-sp-3); }
.pc-sezione__nota { color: var(--pc-testo-tenue); text-transform: none; letter-spacing: 0; }
.pc-sezione__piede { margin-top: var(--pc-sp-2); font-size: var(--pc-testo-sm); }
.pc-colonne { display: grid; gap: 0 var(--pc-sp-6); }
@media (min-width: 64rem) { .pc-colonne { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.pc-dettagli { border-top: 1px solid var(--pc-bordo-forte); }
.pc-dettagli > summary { min-height: var(--pc-tocco); display: flex; align-items: center; gap: var(--pc-sp-2); cursor: pointer; list-style: none; }
.pc-dettagli > summary::-webkit-details-marker { display: none; }
/* Il summary in flex perde il triangolino: + chiuso, − aperto, perché si veda che si apre. */
.pc-dettagli > summary::before { content: "+"; content: "+" / ""; font-size: 1rem; width: 1ch; }
.pc-dettagli[open] > summary::before { content: "−"; content: "−" / ""; }
.pc-dettagli__corpo { padding: 0 0 var(--pc-sp-4); font-size: var(--pc-testo-sm); max-width: var(--pc-larghezza-testo); }

/* =====================================================================
   FRASE-CIFRA (dalla direzione 3) — in cima al cruscotto
   Una frase da leggere prima delle sigle: «Dal 1 al 7 set 11 persone
   hanno guardato 405 pagine.» Per il collaboratore non tecnico è più
   chiara di una riga di cifre (VALUTAZIONE §3, decisione 9).
   ===================================================================== */
.pc-frase { border-top: 3px solid var(--pc-bordo-forte); border-bottom: 1px solid var(--pc-bordo); padding: var(--pc-sp-4) 0; margin-bottom: var(--pc-sp-5); }
.pc-frase__testo {
  font-family: var(--pc-font-titoli); font-weight: var(--pc-titoli-peso); font-style: var(--pc-titoli-stile);
  font-size: var(--pc-testo-lg); line-height: 1.3; max-width: 40rem; overflow-wrap: anywhere;
}
.pc-frase__testo strong {
  font-family: var(--pc-font-mono); font-weight: var(--pc-mono-peso); font-style: normal;
  /* Poco più grande della frase (1,2 em, non un salto di scala): con Mono a 28 px in una
     riga da 18 le righe si sfalsavano (visto a 390 px). */
  font-size: 1.2em; letter-spacing: -0.04em; color: var(--pc-accento-testo); white-space: nowrap;
  font-synthesis-weight: none;
}
@media (min-width: 40rem) { .pc-frase__testo { font-size: var(--pc-testo-xl); } }
.pc-frase .pc-var { display: block; margin-top: var(--pc-sp-2); }
.pc-frase__piede { display: flex; flex-wrap: wrap; gap: 0 var(--pc-sp-4); align-items: center; margin-top: var(--pc-sp-1); font-size: var(--pc-testo-sm); }
.pc-frase__piede a { display: inline-flex; align-items: center; min-height: var(--pc-tocco); }

/* ---------- «Per prima cosa»: una carta, l'unico pulsante pieno ---------- */
.pc-primo {
  display: grid; gap: var(--pc-sp-2); margin-bottom: var(--pc-sp-5);
  padding: var(--pc-sp-4); background: var(--pc-accento-tenue); border-left: 3px solid var(--pc-accento);
}
.pc-primo__etichetta { color: var(--pc-testo); }
.pc-primo__testo { font-size: var(--pc-testo-lg); font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.pc-primo__nota { color: var(--pc-testo); font-size: var(--pc-testo-sm); }
.pc-primo .pc-pulsante { justify-self: start; margin-top: var(--pc-sp-1); }
@media (max-width: 39.99rem) { .pc-primo .pc-pulsante { justify-self: stretch; } }
.pc-primo--calmo { background: transparent; border-left-color: var(--pc-positivo); }

/* =====================================================================
   CIFRE: una riga di registro, con la variazione
   ===================================================================== */
.pc-cifre {
  /* 11rem: a 9 un «1.519» in Mono da 40 px non ci stava e andava a capo dentro il numero
     (visto nel catalogo a 620 px: «1.51 / 9»). */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  border-top: 3px solid var(--pc-bordo-forte); border-bottom: 1px solid var(--pc-bordo); margin-bottom: var(--pc-sp-6);
}
.pc-cifra { padding: var(--pc-sp-3) var(--pc-sp-4) var(--pc-sp-3) 0; border-right: 1px solid var(--pc-bordo); min-width: 0; }
.pc-cifra + .pc-cifra { padding-left: var(--pc-sp-4); }
.pc-cifra:last-child { border-right: 0; }
.pc-cifra__etichetta { color: var(--pc-testo-tenue); letter-spacing: 0.06em; }
.pc-cifra__valore {
  font-family: var(--pc-font-mono); font-weight: var(--pc-mono-peso); font-variant-numeric: tabular-nums;
  /* Si va a capo solo fra le parole («1 min / 56 s»), mai dentro un numero. */
  font-size: var(--pc-testo-2xl); line-height: 1.1; letter-spacing: -0.03em; margin: var(--pc-sp-1) 0; overflow-wrap: normal;
}
.pc-cifra--prima .pc-cifra__valore { color: var(--pc-accento-testo); }
.pc-cifra__nota { font-size: var(--pc-testo-sm); color: var(--pc-testo-tenue); }
/* La variazione: segno, freccia E parola — il colore aiuta, non porta il significato (C6). */
.pc-var { font-family: var(--pc-font-mono); font-size: var(--pc-testo-xs); }
.pc-var--su { color: var(--pc-positivo); }
.pc-var--giu { color: var(--pc-negativo); }
.pc-var--pari, .pc-var--nd { color: var(--pc-testo-tenue); }
@media (max-width: 39.99rem) {
  /* Su due colonne il filo verticale va solo fra le due: la seconda e la quarta chiudono la riga. */
  .pc-cifre { grid-template-columns: 1fr 1fr; }
  .pc-cifra { padding: var(--pc-sp-3) var(--pc-sp-3) var(--pc-sp-3) 0; }
  .pc-cifra + .pc-cifra { padding-left: 0; }
  .pc-cifra:nth-child(even) { border-right: 0; padding-left: var(--pc-sp-3); }
  .pc-cifra:nth-child(n+3) { border-top: 1px solid var(--pc-bordo); }
  .pc-cifra__valore { font-size: var(--pc-testo-xl); }
}
.pc-cifre--colonna { grid-template-columns: 1fr; border-top: 0; margin-bottom: 0; }
.pc-cifre--colonna .pc-cifra {
  border-right: 0; border-bottom: 1px solid var(--pc-bordo); padding: var(--pc-sp-2) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--pc-sp-3);
}
.pc-cifre--colonna .pc-cifra:nth-child(even) { padding-left: 0; }
.pc-cifre--colonna .pc-cifra:nth-child(n+3) { border-top: 0; }
.pc-cifre--colonna .pc-cifra:last-child { border-bottom: 0; }
.pc-cifre--colonna .pc-cifra__valore { grid-column: 2; grid-row: 1 / span 2; font-size: var(--pc-testo-xl); }

/* =====================================================================
   DA FARE, STATO, ELENCHI SEMPLICI
   ===================================================================== */
.pc-compiti { display: grid; }
.pc-compito {
  display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: var(--pc-sp-1) var(--pc-sp-3);
  padding: var(--pc-sp-3) 0; border-bottom: 1px solid var(--pc-bordo); align-items: start;
}
.pc-compito:last-child { border-bottom: 0; }
.pc-compito > .pc-icona { margin-top: 3px; color: var(--pc-testo-tenue); }
.pc-compito--avviso > .pc-icona, .pc-compito--bozza > .pc-icona { color: var(--pc-avviso); }
.pc-compito--negativo > .pc-icona { color: var(--pc-negativo); }
.pc-compito__testo { overflow-wrap: anywhere; }
.pc-compito__nota { font-family: var(--pc-font-mono); font-size: var(--pc-testo-xs); color: var(--pc-testo-tenue); }
.pc-compito .pc-pulsante { grid-column: 2; justify-self: start; }
@media (min-width: 40rem) {
  .pc-compito { grid-template-columns: 1.125rem minmax(0, 1fr) auto; }
  .pc-compito .pc-pulsante { grid-column: 3; }
}
.pc-stato { display: grid; }
.pc-stato__voce {
  display: flex; gap: var(--pc-sp-2); align-items: flex-start; padding: var(--pc-sp-2) 0;
  border-bottom: 1px solid var(--pc-bordo); font-size: var(--pc-testo-sm);
}
.pc-stato__voce:last-child { border-bottom: 0; }
.pc-stato__voce .pc-icona { margin-top: 1px; }
.pc-stato__voce--ok .pc-icona { color: var(--pc-positivo); }
.pc-stato__voce--attenzione .pc-icona { color: var(--pc-avviso); }
.pc-stato__voce--negativo .pc-icona { color: var(--pc-negativo); }
.pc-elenco-semplice { display: grid; margin: var(--pc-sp-2) 0; }
.pc-elenco-semplice li {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--pc-sp-2);
  padding: var(--pc-sp-1) 0; border-bottom: 1px solid var(--pc-bordo); overflow-wrap: anywhere; font-size: var(--pc-testo-sm);
}
.pc-elenco-semplice a { display: inline-flex; align-items: center; min-height: var(--pc-tocco); }

/* =====================================================================
   AVVISI, NOTIFICHE, STATO VUOTO
   ===================================================================== */
.pc-avviso, .pc-notifica {
  display: flex; gap: var(--pc-sp-3); padding: var(--pc-sp-3) var(--pc-sp-4); border-left: 3px solid var(--pc-accento);
  margin-bottom: var(--pc-sp-4); color: var(--pc-testo); background: var(--pc-superficie-2);
}
.pc-avviso > .pc-icona, .pc-notifica > .pc-icona { margin-top: 3px; color: var(--pc-accento-testo); }
.pc-avviso__testo { min-width: 0; overflow-wrap: anywhere; }
.pc-avviso__titolo { font-weight: 700; }
.pc-avviso__testo p + p { margin-top: var(--pc-sp-1); font-size: var(--pc-testo-sm); }
.pc-avviso__azione { display: inline-flex; align-items: center; min-height: var(--pc-tocco); font-weight: 600; }
.pc-avviso--avviso, .pc-notifica--avviso { background: var(--pc-avviso-fondo); border-color: var(--pc-avviso); }
.pc-avviso--avviso > .pc-icona, .pc-notifica--avviso > .pc-icona { color: var(--pc-avviso); }
.pc-avviso--negativo, .pc-notifica--negativo { background: var(--pc-negativo-fondo); border-color: var(--pc-negativo); }
.pc-avviso--negativo > .pc-icona, .pc-notifica--negativo > .pc-icona { color: var(--pc-negativo); }
.pc-avviso--positivo, .pc-notifica--positivo { background: var(--pc-positivo-fondo); border-color: var(--pc-positivo); }
.pc-avviso--positivo > .pc-icona, .pc-notifica--positivo > .pc-icona { color: var(--pc-positivo); }
/* La notifica dopo un'azione («Salvato»): nel flusso, in cima al contenuto, non un
   riquadro che galleggia e sparisce — si rilegge con calma e non copre niente. */
.pc-notifica { align-items: flex-start; font-weight: 600; }
.pc-notifica__testo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pc-notifica__testo a { font-weight: 600; }

.pc-vuoto { padding: var(--pc-sp-4) 0; display: grid; gap: var(--pc-sp-1); justify-items: start; }
.pc-vuoto__icona { width: 1.5rem; height: 1.5rem; color: var(--pc-testo-tenue); }
.pc-vuoto--bene .pc-vuoto__icona { color: var(--pc-positivo); }
.pc-vuoto__titolo { font-weight: 700; }
.pc-vuoto__testo { font-size: var(--pc-testo-sm); color: var(--pc-testo-tenue); max-width: 32rem; }
.pc-vuoto .pc-pulsante { margin-top: var(--pc-sp-2); }

/* =====================================================================
   STATO DI UN CONTENUTO: un timbro, icona + parola (mai solo colore)
   ===================================================================== */
.pc-pastiglia {
  display: inline-flex; align-items: center; gap: var(--pc-sp-1); padding: 0 var(--pc-sp-1);
  border: 1px solid currentColor; font-family: var(--pc-font-mono); font-size: var(--pc-testo-xs);
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.6; white-space: nowrap;
}
.pc-pastiglia .pc-icona { width: 0.875rem; height: 0.875rem; }
.pc-pastiglia--positivo { color: var(--pc-positivo); }
.pc-pastiglia--avviso { color: var(--pc-avviso); }
.pc-pastiglia--negativo { color: var(--pc-negativo); }
.pc-pastiglia--accento { color: var(--pc-accento-testo); }
.pc-pastiglia--pieno { color: var(--pc-sfondo); background: var(--pc-testo); border-color: var(--pc-testo); }
.pc-pastiglia--tenue { color: var(--pc-testo-tenue); }

/* =====================================================================
   TABELLE DENSE
   ===================================================================== */
/* Una tabella più larga dello schermo scorre nel suo riquadro, non la pagina
   (C9). Il riquadro va raggiunto da tastiera: tabindex="0" + role="region". */
.pc-scorre { overflow-x: auto; max-width: 100%; position: relative; }
.pc-tabella { width: 100%; border-collapse: collapse; font-size: var(--pc-testo-sm); }
.pc-tabella caption { text-align: left; font-weight: 600; padding-bottom: var(--pc-sp-2); }
.pc-tabella th, .pc-tabella td {
  padding: var(--pc-sp-2) var(--pc-sp-2) var(--pc-sp-2) 0; border-bottom: 1px solid var(--pc-bordo);
  text-align: left; vertical-align: baseline;
}
.pc-tabella thead th { color: var(--pc-testo-tenue); letter-spacing: 0.06em; border-bottom-color: var(--pc-bordo-forte); white-space: nowrap; }
.pc-tabella tbody th { font-weight: 500; overflow-wrap: anywhere; }
.pc-tabella tbody th a { color: var(--pc-testo); text-decoration: none; }
.pc-tabella tbody th a:hover { text-decoration: underline; }
.pc-tabella .pc-num, .pc-tabella td.pc-num, .pc-tabella th.pc-num { text-align: right; white-space: nowrap; }
.pc-tabella__rotta { display: block; font-family: var(--pc-font-mono); font-size: var(--pc-testo-xs); color: var(--pc-testo-tenue); overflow-wrap: anywhere; }
.pc-tabella .pc-tabella__azioni { text-align: right; white-space: nowrap; padding-right: 0; }
.pc-tabella__piede { font-size: var(--pc-testo-sm); color: var(--pc-testo-tenue); margin-top: var(--pc-sp-2); }

/* =====================================================================
   ELENCO DEI CONTENUTI: righe da registro con stato, visite e azioni
   ===================================================================== */
.pc-elenco__intesta { display: none; color: var(--pc-testo-tenue); letter-spacing: 0.06em; }
.pc-elenco { border-top: 1px solid var(--pc-bordo-forte); }
.pc-voce {
  position: relative;
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto;
  grid-template-areas: "foto testo testo" "foto stato visite" ". azioni azioni";
  gap: var(--pc-sp-1) var(--pc-sp-3); align-items: center;
  padding: var(--pc-sp-3) 0; border-bottom: 1px solid var(--pc-bordo);
}
.pc-voce__foto { grid-area: foto; align-self: start; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--pc-superficie-2); }
.pc-voce__foto--vuota { display: grid; place-items: center; color: var(--pc-testo-tenue); }
.pc-voce__testo { grid-area: testo; min-width: 0; }
.pc-voce__titolo { color: var(--pc-testo) !important; font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.pc-voce__titolo:hover { text-decoration: underline; }
/* Tutta la riga è il bersaglio del titolo (link «stirato»): sul telefono si tocca
   la riga, non la parola. Azioni, stato e casella restano sopra, cliccabili da sole. */
.pc-voce__titolo::after { content: ""; position: absolute; inset: 0; }
.pc-voce__meta { font-family: var(--pc-font-mono); font-size: var(--pc-testo-xs); color: var(--pc-testo-tenue); overflow-wrap: anywhere; }
.pc-voce__stato { grid-area: stato; display: flex; flex-wrap: wrap; gap: var(--pc-sp-2); align-items: center; position: relative; z-index: 1; }
.pc-voce__visite { grid-area: visite; font-size: var(--pc-testo-xs); color: var(--pc-testo-tenue); text-align: right; white-space: nowrap; }
.pc-voce__visite .pc-num { color: var(--pc-testo); font-size: var(--pc-testo-sm); }
.pc-voce__azioni { grid-area: azioni; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pc-sp-1) var(--pc-sp-3); position: relative; z-index: 1; }
.pc-voce__azioni > .pc-pulsante, .pc-voce__azioni > form > .pc-pulsante {
  border-color: transparent; padding: 0; text-decoration: underline; color: var(--pc-accento-testo) !important; background: none;
}
.pc-voce__azioni form { margin: 0; display: inline-flex; }
/* Nella riga anche «Elimina» è una parola sottolineata (rossa): tre pulsanti incorniciati
   non stavano nella colonna e andavano a capo (visto a 1280). */
.pc-voce__azioni > .pc-conferma > summary { border-color: transparent; padding: 0; text-decoration: underline; background: none; }
.pc-voce__scelta { grid-area: scelta; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: var(--pc-tocco); min-width: var(--pc-tocco); margin: 0; cursor: pointer; }
.pc-voce__scelta input { width: 1.25rem; height: 1.25rem; accent-color: var(--pc-accento); margin: 0; }
/* Varianti: senza foto (utenti, gare, messaggi) e con la casella per le azioni in blocco. */
.pc-elenco--senza-foto .pc-voce { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "testo testo" "stato visite" "azioni azioni"; }
.pc-elenco--scelta .pc-voce { grid-template-columns: var(--pc-tocco) 3rem minmax(0, 1fr) auto; grid-template-areas: "scelta foto testo testo" "scelta foto stato visite" ". . azioni azioni"; }
.pc-elenco--scelta.pc-elenco--senza-foto .pc-voce { grid-template-columns: var(--pc-tocco) minmax(0, 1fr) auto; grid-template-areas: "scelta testo testo" "scelta stato visite" ". azioni azioni"; }
@media (min-width: 48rem) {
  .pc-voce, .pc-elenco__intesta { grid-template-columns: 3.5rem minmax(0, 1fr) 8.5rem 6rem 12rem; grid-template-areas: "foto testo stato visite azioni"; }
  .pc-elenco--senza-foto .pc-voce, .pc-elenco--senza-foto .pc-elenco__intesta { grid-template-columns: minmax(0, 1fr) 8.5rem 6rem 12rem; grid-template-areas: "testo stato visite azioni"; }
  .pc-elenco--scelta .pc-voce, .pc-elenco--scelta .pc-elenco__intesta { grid-template-columns: var(--pc-tocco) 3.5rem minmax(0, 1fr) 8.5rem 6rem 12rem; grid-template-areas: "scelta foto testo stato visite azioni"; }
  .pc-elenco--scelta.pc-elenco--senza-foto .pc-voce, .pc-elenco--scelta.pc-elenco--senza-foto .pc-elenco__intesta { grid-template-columns: var(--pc-tocco) minmax(0, 1fr) 8.5rem 6rem 12rem; grid-template-areas: "scelta testo stato visite azioni"; }
  .pc-voce { padding: var(--pc-sp-2) 0; }
  .pc-voce__azioni { justify-content: flex-end; }
  .pc-elenco__intesta { display: grid; gap: var(--pc-sp-3); padding: var(--pc-sp-1) 0; }
  .pc-elenco__intesta > :nth-last-child(-n+2) { text-align: right; }
}
.pc-elenco__intesta > * { min-width: 0; }
.pc-elenco__intesta .pc-c-foto { grid-area: foto; } .pc-elenco__intesta .pc-c-testo { grid-area: testo; }
.pc-elenco__intesta .pc-c-stato { grid-area: stato; } .pc-elenco__intesta .pc-c-visite { grid-area: visite; }
.pc-elenco__intesta .pc-c-azioni { grid-area: azioni; } .pc-elenco__intesta .pc-c-scelta { grid-area: scelta; }
.pc-elenco__piede { padding: var(--pc-sp-3) 0; font-size: var(--pc-testo-sm); color: var(--pc-testo-tenue); }
.pc-lingue { font-family: var(--pc-font-mono); font-size: var(--pc-testo-xs); color: var(--pc-testo-tenue); }

/* ---------- barra delle azioni in blocco ----------
   Un modulo a parte (le caselle lo raggiungono con l'attributo form=):
   così ogni riga può avere i suoi moduli senza annidarli, che l'HTML vieta. */
.pc-blocco {
  position: relative; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pc-sp-2) var(--pc-sp-3);
  margin: var(--pc-sp-3) 0 0; padding: var(--pc-sp-2) 0; background: var(--pc-sfondo);
  border-top: 3px solid var(--pc-bordo-forte);
}
.pc-blocco__conto { font-family: var(--pc-font-mono); font-size: var(--pc-testo-sm); color: var(--pc-testo-tenue); flex: 1 1 100%; }
@media (min-width: 40rem) { .pc-blocco__conto { flex: 0 1 auto; } }
.pc-blocco .pc-input { width: auto; flex: 1 1 12rem; max-width: 20rem; }
/* Con qualcosa di spuntato la barra si accende (dove :has esiste; altrove resta com'è). */
/* La barra si incolla al fondo dello schermo SOLO quando qualcosa è spuntato: sempre
   incollata copriva due righe dell'elenco sul telefono. Senza :has resta in fondo all'elenco. */
body:has(.pc-voce__scelta input:checked) .pc-blocco { position: sticky; bottom: 0; border-top-color: var(--pc-accento); background: var(--pc-accento-tenue); }
body:has(.pc-voce__scelta input:checked) .pc-blocco__conto { color: var(--pc-testo); }

/* ---------- conferma senza JavaScript: una tendina col secondo passo ----------
   Il primo tocco apre, il secondo (dentro) agisce: nessuna cancellazione con un
   tocco solo, e funziona con CSP rigida e JS spento. aspetto.js ci mette Esc. */
.pc-conferma { display: inline-block; }
.pc-conferma > summary { list-style: none; }
.pc-conferma[open] { display: block; flex: 1 1 100%; }
.pc-conferma__pannello {
  margin-top: var(--pc-sp-2); padding: var(--pc-sp-3); border: 1px solid var(--pc-negativo); border-left-width: 3px;
  background: var(--pc-negativo-fondo); display: grid; gap: var(--pc-sp-2); justify-items: start; overflow-wrap: anywhere;
}
.pc-conferma__pannello form { margin: 0; display: flex; flex-wrap: wrap; gap: var(--pc-sp-2); }

/* ---------- finestra di conferma (<dialog>, la apre aspetto.js) ---------- */
.pc-finestra {
  width: min(28rem, calc(100vw - 2 * var(--pc-sp-4))); padding: 0; border: 1px solid var(--pc-bordo-forte); border-top-width: 3px;
  background: var(--pc-superficie); color: var(--pc-testo); box-shadow: var(--pc-ombra-sopra);
}
.pc-finestra::backdrop { background: var(--pc-velo); }
.pc-finestra form { margin: 0; padding: var(--pc-sp-4); display: grid; gap: var(--pc-sp-4); }
.pc-finestra__titolo { font-family: var(--pc-font-titoli); font-weight: var(--pc-titoli-peso); font-style: var(--pc-titoli-stile); font-size: var(--pc-testo-lg); }
.pc-finestra__azioni { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pc-sp-2); }

/* =====================================================================
   PAGINAZIONE
   ===================================================================== */
.pc-paginazione { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pc-sp-2); margin: var(--pc-sp-4) 0; }
.pc-paginazione ul { display: flex; flex-wrap: wrap; gap: var(--pc-sp-1); }
.pc-paginazione a, .pc-paginazione [aria-current="page"], .pc-paginazione__salto {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--pc-tocco); min-height: var(--pc-tocco);
  padding: 0 var(--pc-sp-2); font-family: var(--pc-font-mono); font-size: var(--pc-testo-sm); text-decoration: none;
}
.pc-paginazione a { color: var(--pc-accento-testo); }
.pc-paginazione a:hover { background: var(--pc-superficie-2); }
.pc-paginazione [aria-current="page"] { color: var(--pc-testo); box-shadow: inset 0 -3px 0 var(--pc-accento); }
.pc-paginazione__salto { color: var(--pc-testo-tenue); min-width: auto; }
.pc-paginazione__dove { font-family: var(--pc-font-mono); font-size: var(--pc-testo-xs); color: var(--pc-testo-tenue); }
@media (max-width: 39.99rem) { .pc-paginazione .pc-paginazione__numeri { display: none; } } /* (0,2,0): «.pc-paginazione ul» lo batteva e i numeri restavano, mandando a capo «Successive» */
@media (min-width: 40rem) { .pc-paginazione__dove { display: none; } }

/* =====================================================================
   CAMPI E MODULI
   ===================================================================== */
.pc-modulo { max-width: var(--pc-larghezza-testo); }
.pc-modulo--largo { max-width: none; }
.pc-griglia-campi { display: grid; gap: 0 var(--pc-sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.pc-campo { margin-bottom: var(--pc-sp-4); min-width: 0; }
.pc-campo > label, .pc-campo__etichetta { display: block; letter-spacing: 0.06em; margin-bottom: var(--pc-sp-1); color: var(--pc-testo); }
.pc-campo__facoltativo { color: var(--pc-testo-tenue); text-transform: none; letter-spacing: 0; }
.pc-input {
  display: block; width: 100%; min-height: var(--pc-tocco); padding: var(--pc-sp-2) var(--pc-sp-3);
  border: 1px solid var(--pc-bordo-campo); border-bottom: 2px solid var(--pc-testo); border-radius: 0;
  background: var(--pc-superficie); color: var(--pc-testo);
  /* 16 px almeno: sotto, Safari su iPhone ingrandisce la pagina al tocco. */
  font: inherit; font-size: max(1rem, 16px);
}
textarea.pc-input { min-height: 8rem; resize: vertical; line-height: 1.5; }
textarea.pc-input--lungo { min-height: 18rem; font-family: var(--pc-font-mono); font-size: max(1rem, 16px); }
/* overflow hidden: in WebKit (Safari) il testo dell'opzione scelta, se più lungo del
   campo, allarga la pagina anche col select largo giusto (scrollWidth del contenitore
   654 px a 390: la pagina Strumenti di angelosasso sbordava di 280 px, 1 ott 2026). */
select.pc-input { padding-right: var(--pc-sp-6); overflow: hidden; text-overflow: ellipsis; }
.pc-input:disabled, .pc-input[readonly] { background: var(--pc-superficie-2); color: var(--pc-testo-tenue); }
.pc-input::placeholder { color: var(--pc-testo-tenue); opacity: 1; }
.pc-campo--errore .pc-input, .pc-input[aria-invalid="true"] { border-color: var(--pc-negativo); border-bottom-width: 3px; }
.pc-aiuto { font-size: var(--pc-testo-sm); color: var(--pc-testo-tenue); margin-top: var(--pc-sp-1); }
/* L'errore dice COME correggere ed è legato al campo con aria-describedby; l'icona ✕
   (nel markup) fa sì che non sia il rosso da solo a dirlo. */
.pc-errore { display: flex; gap: var(--pc-sp-1); align-items: flex-start; font-size: var(--pc-testo-sm); color: var(--pc-negativo); font-weight: 600; margin-top: var(--pc-sp-1); }
.pc-errore .pc-icona { width: 1rem; height: 1rem; margin-top: 2px; }
.pc-errori { border-left: 3px solid var(--pc-negativo); background: var(--pc-negativo-fondo); padding: var(--pc-sp-3) var(--pc-sp-4); margin-bottom: var(--pc-sp-4); }
.pc-errori__titolo { font-weight: 700; }
.pc-errori ul { list-style: disc; padding-left: var(--pc-sp-5); margin-top: var(--pc-sp-1); }
.pc-errori a { color: var(--pc-testo); }
.pc-spunta { display: inline-flex; align-items: center; gap: var(--pc-sp-2); min-height: var(--pc-tocco); margin-bottom: var(--pc-sp-2); cursor: pointer; }
.pc-spunta input { width: 1.25rem; height: 1.25rem; accent-color: var(--pc-accento); margin: 0; flex: none; }
.pc-gruppo-campi { border: 0; border-top: 3px solid var(--pc-bordo-forte); margin: 0 0 var(--pc-sp-5); padding: var(--pc-sp-3) 0 0; min-width: 0; }
.pc-gruppo-campi > legend { padding: 0 var(--pc-sp-2) 0 0; float: left; width: 100%; margin-bottom: var(--pc-sp-3); }
.pc-gruppo-campi > legend + * { clear: both; }
.pc-contatore { font-family: var(--pc-font-mono); font-size: var(--pc-testo-xs); color: var(--pc-testo-tenue); text-align: right; margin-top: var(--pc-sp-1); }
/* I pulsanti del modulo restano a portata di pollice mentre si scrive un testo lungo. */
.pc-modulo__azioni {
  position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: var(--pc-sp-2); align-items: center;
  padding: var(--pc-sp-3) 0; margin-top: var(--pc-sp-4); background: var(--pc-sfondo); border-top: 3px solid var(--pc-bordo-forte);
}
.pc-modulo__azioni .pc-aiuto { margin: 0; flex: 1 1 12rem; }
.pc-anteprima-foto { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--pc-sp-2); }
.pc-anteprima-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--pc-superficie-2); }

/* =====================================================================
   MOVIMENTO, COLORI FORZATI, STAMPA
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .pc-gruppo > summary .pc-icona { transition: rotate 150ms ease; }
  .pc-pulsante { transition: background-color 150ms ease; }
}
@media (forced-colors: active) {
  /* Nei colori forzati (Windows a contrasto elevato) i fili-ombra spariscono: si
     torna a un bordo vero, che il sistema colora. */
  .pc-gruppo__qui, .pc-sotto-schede a[aria-current="page"], .pc-periodo a[aria-current="page"],
  .pc-filtri a[aria-current="page"], .pc-paginazione [aria-current="page"] { box-shadow: none; text-decoration: underline 3px; }
  .pc-gruppo__voci a[aria-current="page"] { box-shadow: none; text-decoration: underline; }
  .pc-conto { border: 1px solid CanvasText; }
}
/* Margini del foglio: senza, chi stampa in PDF senza margini ha i numeri sul bordo
   (visto nel PDF di prova: la prima colonna delle cifre tagliata). */
@page { margin: 15mm 12mm; }
@media print {
  /* Sul foglio resta il contenuto: niente testata, navigazione, pulsanti, barre. */
  .pc-testata, .pc-salta, .pc-intesta__azioni, .pc-voce__azioni, .pc-voce__scelta, .pc-blocco, .pc-paginazione,
  .pc-modulo__azioni, .pc-barra-strumenti, .pc-tema, .pc-frase__piede, .pc-avviso__azione, .pc-pulsante, .pc-non-stampare { display: none !important; }
  body.pc { background: #fff; color: #000; font-size: 10.5pt; }
  .pc-corpo { max-width: none; padding: 0; }
  .pc a { color: inherit; text-decoration: none; }
  .pc-cifre, .pc-frase, .pc-voce, .pc-compito, .pc-tabella tr, .pc-avviso { break-inside: avoid; }
  .pc-sezione__titolo, .pc-intesta { break-after: avoid; }
  .pc-avviso, .pc-notifica, .pc-primo, .pc-errori { background: none; }
  .pc-voce__titolo::after { display: none; }
}