/* ===========================================================================
   DESIGN SYSTEM DEI PANNELLI INTERNI DI FAMILY HUB — pannelli.css
   Fonte: Family-Hub /srv/grafo/pubblico/ds/. Ogni pannello ne serve una copia identica (il portale in
   /srv/portale/app/ds/); la guardia della macchina confronta le copie ogni notte.

   COME SI USA
   · Ogni pannello serve una COPIA IDENTICA di questa cartella sotto /ds/ (pannelli.css, pannelli.js, logo.png): la
     politica dei contenuti dei pannelli accetta solo file loro. Mai modificare la copia: si cambia la fonte e si
     ridistribuisce. La riga «versione» qui sotto dice quale copia è.
   · Le regole proprie di un pannello vanno nel SUO foglio, caricato DOPO questo, e usano i gettoni (--…).
   · Niente immagini «data:» e niente indirizzi esterni: devono funzionare con img-src 'self'.
   versione: 2026-10-16
   =========================================================================== */

/* ---------- 1. Gettoni ---------- */
* { box-sizing: border-box; }
:root {
  color-scheme: dark;
  /* superfici */
  --bg: #171717; --card: #1e1e1e; --card-2: #1a1a1a; --campo: #141414; --fondo: #141414;
  --vetro: rgba(30, 30, 30, .8); --vetro-lato: rgba(26, 26, 26, .78);
  /* bordi e testo */
  --border: #2e2e2e; --border-2: #262626; --border-forte: #3d3d3d;
  --text: #ededed; --muted: #8f8f8f;
  /* accento: il verde del portale. Il testo sopra il verde è scuro. */
  --accent: #3ecf8e; --accent-testo: #052014; --accent-tenue: rgba(62, 207, 142, .12); --accent-bordo: rgba(62, 207, 142, .38);
  /* significati: ok, errore, avviso, informazione (non sono colori di decorazione) */
  --ok: #3ecf8e; --err: #f87171; --warn: #fbbf24; --info: #7aa2f7;
  --err-tenue: rgba(248, 113, 113, .09); --err-bordo: rgba(248, 113, 113, .38);
  --warn-tenue: rgba(251, 191, 36, .08); --warn-bordo: rgba(251, 191, 36, .34);
  --info-tenue: rgba(122, 162, 247, .12); --info-bordo: rgba(122, 162, 247, .38);
  /* forme */
  --raggio: 14px; --raggio-s: 10px;
  --ombra: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 32px -16px rgba(0, 0, 0, .6);
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --testata: 49px;     /* altezza della barra: la misura pannelli.js (DS.misuraBarra) */
}

/* ---------- 2. Base ---------- */
html { color-scheme: dark; }
body { margin: 0; min-height: 100vh; color: var(--text);
  font: 14px/1.5 -apple-system, Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased;
  background: radial-gradient(1100px 520px at 0% -10%, rgba(62, 207, 142, .055), transparent 60%),
              radial-gradient(900px 480px at 100% -10%, rgba(122, 162, 247, .05), transparent 60%), var(--bg);
  background-attachment: fixed; }
h1, h2, h3, h4 { margin: 0 0 12px; letter-spacing: -.005em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.02em; }
p { margin: 6px 0; }
a { color: var(--text); }
code { font-family: var(--mono); font-size: .9em; background: var(--campo); border: 1px solid var(--border-2); border-radius: 5px; padding: 0 5px; }
::selection { background: rgba(62, 207, 142, .3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .88em; }
.mono { font-family: var(--mono); }
.err { color: var(--err); }
.err:empty { display: none; }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.spinta { flex: 1 1 auto; }
.sopratitolo { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sub { margin: 4px 0 14px; }
.aiuto { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* ---------- 3. La barra ufficiale (identica a quella della conoscenza, nata dal pannello di Lilia) ---------- */
.pb-barra { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap;
  padding: 12px 24px; background: rgba(23, 23, 23, .94); backdrop-filter: blur(12px); border-bottom: 1px solid #2e2e2e; color: #ededed;
  font: 14px/1.5 -apple-system, Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.pb-barra a { text-decoration: none; }
.pb-marchio { display: flex; align-items: center; gap: 12px; color: #ededed; flex: none; }
.pb-logo { display: block; width: 158px; height: 24px; background: url("logo.png") no-repeat left center / contain; }
.pb-sep { width: 1px; height: 17px; background: #2e2e2e; }
.pb-prodotto { font-weight: 600; letter-spacing: .2px; white-space: nowrap; }
.pb-prodotto small { margin-left: 6px; color: #8f8f8f; font-size: 13px; font-weight: 400; letter-spacing: 0; }
.pb-sezioni { display: flex; gap: 4px; padding: 3px; background: #141414; border: 1px solid #2e2e2e; border-radius: 10px; overflow-x: auto; }
.pb-voce { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px; color: #8f8f8f; font-size: 13px; white-space: nowrap; }
.pb-voce:hover { color: #ededed; }
.pb-voce[hidden] { display: none; }
.pb-voce[aria-current="page"] { background: #1e1e1e; color: #ededed; box-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.pb-voce .conta:not(.pieno) { display: none; }
.pb-piede { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.pb-utente { color: #8f8f8f; font-size: 13px; white-space: nowrap; }
.pb-utente b { margin-left: 4px; color: #ededed; font-weight: 600; overflow-wrap: anywhere; }
.pb-utente.manca b { color: var(--err); }
.pb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 8px;
  background: #2a2a2a; color: #ededed; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s; }
.pb-btn:hover { background: #343434; }
.pb-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.pb-barra :focus-visible { outline: 2px solid #3ecf8e; outline-offset: 2px; }
@media (max-width: 760px) {
  .pb-barra { padding: 10px 16px; }
  .pb-logo { width: 132px; height: 20px; }
  .pb-prodotto small { display: none; }
  .pb-sezioni { order: 3; width: 100%; }
  .pb-utente > span { display: none; }
}

/* la riga sotto la barra (le schede di una sezione) */
.sottonav { position: sticky; top: var(--testata, 49px); z-index: 20; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 8px 24px; background: rgba(23, 23, 23, .9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
button.tab { background: transparent; border: 1px solid transparent; color: var(--muted); padding: 6px 12px; font-weight: 500; }
button.tab:hover { color: var(--text); background: rgba(255, 255, 255, .03); filter: none; }
button.tab.active, button.tab[aria-selected="true"] { color: var(--text); border-color: var(--border); background: var(--card); }

/* i contatori: ambra quando c'è qualcosa che aspetta */
.conta:empty { display: none; }
.conta { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #2a2a2a; color: var(--text);
  font-size: 11.5px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.conta.pieno { background: var(--warn); color: #1f1600; }

/* ---------- 4. Pulsanti e campi ---------- */
label { display: block; margin: 12px 0; font-size: .9em; color: var(--muted); }
input[type=text], input[type=search], input[type=tel], input[type=password], input[type=number], input[type=email], input[type=url], textarea, select {
  width: 100%; margin-top: 6px; padding: 9px 11px; background: var(--campo); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); font-size: 13.5px; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-bordo); box-shadow: 0 0 0 3px var(--accent-tenue); }
textarea { resize: vertical; min-height: 96px; }
button, .bottone { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--accent); color: var(--accent-testo);
  border: 1px solid transparent; border-radius: 9px; padding: 8px 15px; font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.25;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, filter .15s, transform .15s; }
button:hover, .bottone:hover { filter: brightness(1.07); }
button:disabled, .bottone[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; }
button svg, .bottone svg { width: 15px; height: 15px; flex: none; }
button.ghost, .bottone.ghost { background: transparent; border-color: var(--border); color: var(--text); font-weight: 500; }
button.ghost:hover, .bottone.ghost:hover { background: rgba(255, 255, 255, .05); border-color: var(--border-forte); filter: none; }
button.pericolo, .bottone.pericolo { background: #dc2626; color: #fff; }
button.ghost.pericolo, .bottone.ghost.pericolo { background: transparent; color: var(--err); border-color: var(--err-bordo); }
button.ghost.pericolo:hover, .bottone.ghost.pericolo:hover { background: var(--err-tenue); }
button.piccolo, .bottone.piccolo { padding: 5px 10px; font-size: 12.5px; }
button.minimo, .bottone.minimo { padding: 4px 9px; font-size: 12px; }
button.primario, .bottone.primario { background: var(--accent); color: var(--accent-testo); border-color: transparent; }

.griglia-campi { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.campo { min-width: 0; }
.campo > label { display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: #bdbdbd; }
.campo.cambiato > label { color: var(--warn); }
.campo.cambiato .valore-modificabile { border-color: var(--warn-bordo); box-shadow: 0 0 0 3px var(--warn-tenue); }
.valore-modificabile { width: 100%; margin: 0; background: var(--campo); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
  color: var(--text); font: inherit; font-size: 13.5px; }
.valore-modificabile.stretto { max-width: 130px; }
textarea.valore-modificabile { resize: vertical; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; min-height: 0; }
.valore-modificabile.una-riga { min-height: 0; resize: vertical; }
.campo.bloccato .valore { background: var(--card-2); border: 1px dashed var(--border); border-radius: 9px; padding: 9px 11px; font-size: 13px; overflow-wrap: anywhere; }
.lucchetto { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; font-size: 11.5px; }
.campo .stella { color: var(--warn); margin-left: 3px; }
.sezione-campi + .sezione-campi { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.sezione-campi > h3 { font-size: 14px; margin: 0 0 4px; }
.sezione-campi > .sub { margin: 0 0 14px; font-size: 12.5px; }

/* l'interruttore (si accende e si spegne) e la riga che lo contiene: si clicca tutta la riga */
.interruttore-scorrevole { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; cursor: pointer; }
.interruttore-scorrevole input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.interruttore-scorrevole .binario { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: background .15s; pointer-events: none; }
.interruttore-scorrevole .binario::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: transform .15s; }
.interruttore-scorrevole input:checked + .binario { background: var(--fam, var(--ok)); }
.interruttore-scorrevole input:checked + .binario::after { transform: translateX(14px); }
.interruttore-scorrevole input:focus-visible + .binario { outline: 2px solid var(--fam, var(--accent)); outline-offset: 2px; }
.interruttore-scorrevole input:disabled + .binario { opacity: .4; }
.interruttori { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 8px; }
label.interruttore-riga { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0; border-radius: 10px; border: 1px solid var(--border);
  background: var(--campo); cursor: pointer; color: var(--text); font-size: 13px; transition: border-color .15s, background .15s; }
label.interruttore-riga:hover { border-color: var(--border-forte); }
label.interruttore-riga.acceso { background: rgba(62, 207, 142, .05); }
label.interruttore-riga.cambiato { border-color: var(--warn-bordo); box-shadow: 0 0 0 3px var(--warn-tenue); }
label.interruttore-riga .testo-int { flex: 1; min-width: 0; }
label.interruttore-riga .testo-int small { display: block; color: var(--muted); font-size: 11.5px; }
.griglia-campi > label.interruttore-riga { align-self: start; margin-top: 25px; }

/* la barra di salvataggio: sempre a vista in fondo, gialla quando c'è qualcosa da salvare */
.barra-salva { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.barra-salva.fissa { position: sticky; bottom: 16px; z-index: 8; margin-top: 0; padding: 11px 14px 11px 18px; border: 1px solid var(--border); border-radius: 14px;
  background: rgba(28, 28, 28, .93); backdrop-filter: blur(14px); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7); }
.barra-salva.fissa.sporca { border-color: var(--warn-bordo); }
.barra-salva.fissa.sporca .contatore { color: var(--warn); }

/* ---------- 5. Impaginazione ---------- */
.panel { padding: 24px; display: grid; gap: 16px; max-width: 1180px; margin: 0 auto; }
body.largo .panel { max-width: 1500px; }
.card { background: var(--vetro); border: 1px solid var(--border); border-radius: var(--raggio); padding: 20px; min-width: 0; box-shadow: var(--ombra); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.card-h h2, .card-h h3 { margin: 0; }
.card-titolo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.card-titolo h2, .card-titolo h3 { margin: 0; font-size: 16px; }
.card-titolo .icona-tessera { width: 30px; height: 30px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.row.fine { justify-content: flex-end; }
.griglia-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 520px) { .griglia-2 { grid-template-columns: 1fr; } }

/* elenco a sinistra + contenuto a destra */
.spazio { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.principale { display: grid; gap: 16px; min-width: 0; }
.lato { position: sticky; top: calc(var(--testata, 49px) + 20px); max-height: calc(100vh - var(--testata, 49px) - 40px);
  display: flex; flex-direction: column; gap: 12px; padding: 16px 14px; background: var(--vetro-lato); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--ombra); min-width: 0; }
.lato-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 0 4px; }
.lato-testa h2 { font-size: 17px; margin: 2px 0 0; }
.cerca { position: relative; }
.cerca svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.cerca input { padding-left: 33px; margin: 0; }
.lato-lista { overflow-y: auto; margin: 0 -6px; padding: 2px 6px; display: grid; gap: 2px; align-content: start; min-height: 0; }
.lato-vuoto { padding: 14px 6px; color: var(--muted); font-size: 13px; }
button.voce-lato, a.voce-lato { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 11px; background: transparent;
  border: 1px solid transparent; color: var(--text); font-weight: 400; text-align: left; justify-content: flex-start; position: relative; text-decoration: none; }
button.voce-lato:hover, a.voce-lato:hover { background: rgba(255, 255, 255, .04); filter: none; }
.voce-lato.sel { background: rgba(255, 255, 255, .07); border-color: var(--border); }
.voce-lato.sel::before { content: ''; position: absolute; left: -7px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.voce-testo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.voce-testo strong { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voce-testo .mono, .voce-testo small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voce-segni { display: flex; align-items: center; gap: 6px; color: var(--muted); flex: none; }
.voce-segni svg { width: 13px; height: 13px; }
.lato-piede { border-top: 1px solid var(--border); padding-top: 10px; display: flex; gap: 8px; }
.lato-piede > * { flex: 1; }

/* ---------- 6. Stati: etichette, pillole, punti, avvisi ---------- */
.tag { display: inline-block; background: var(--campo); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; font-size: .8em; color: var(--muted); white-space: nowrap; }
.tag.ok-tag { color: var(--ok); border-color: var(--accent-bordo); }
.tag.bad-tag { color: var(--err); border-color: var(--err-bordo); background: var(--err-tenue); }
.tag.warn-tag { color: var(--warn); border-color: var(--warn-bordo); }
.tag.muted-tag { opacity: .75; }
.tag.accent-tag { color: var(--info); background: var(--info-tenue); border-color: var(--info-bordo); }
.pillola { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--campo); font-size: 12px; color: var(--muted); white-space: nowrap; line-height: 1.6; }
.pillola svg { width: 12px; height: 12px; }
.pillola.verde { color: var(--ok); border-color: var(--accent-bordo); background: var(--accent-tenue); }
.pillola.rossa { color: var(--err); border-color: var(--err-bordo); background: var(--err-tenue); }
.pillola.gialla { color: var(--warn); border-color: var(--warn-bordo); background: var(--warn-tenue); }
.pillola.blu { color: var(--info); border-color: var(--info-bordo); background: var(--info-tenue); }
.punto-stato { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tenue); flex: none; display: inline-block; }
.punto-stato.spento { background: transparent; border: 1.5px solid #5a5a5a; box-shadow: none; }
.punto-stato.rosso { background: var(--err); box-shadow: 0 0 0 3px var(--err-tenue); }
.punto-stato.giallo { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-tenue); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; align-items: center; }
button.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--campo); color: var(--muted); font-size: 13px; font-weight: 500; }
button.chip:hover { border-color: var(--border-forte); filter: none; }
button.chip.on { border-color: var(--accent-bordo); color: var(--text); background: var(--accent-tenue); }
.avviso { border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 10px; padding: 12px 14px; background: var(--warn-tenue); }
.avviso.errore { border-left-color: var(--err); background: var(--err-tenue); }
.avviso.riuscito { border-left-color: var(--ok); background: var(--accent-tenue); }
.avviso b { color: var(--text); }
.esito-box { border: 1px solid var(--accent-bordo); background: var(--accent-tenue); border-radius: 10px; padding: 10px 12px; }
.esito-box.errore { border-color: var(--err-bordo); background: var(--err-tenue); }
.esito-box p { margin: 0 0 6px; }

/* ---------- 7. Selettori: a segmenti e a schede ---------- */
/* .segmenti/.segmento sono i nomi del design system; .mondi/.mondo restano come sinonimi */
.segmenti, .mondi { display: inline-flex; gap: 2px; padding: 3px; background: var(--campo); border: 1px solid var(--border); border-radius: 10px; max-width: 100%; overflow-x: auto; }
.segmenti .segmento, .mondi .mondo { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: transparent; border: 0; color: var(--muted);
  padding: 5px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.segmenti .segmento:hover, .mondi .mondo:hover { color: var(--text); filter: none; }
.segmenti .segmento.sel, .mondi .mondo.sel { background: var(--card); color: var(--text); box-shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 0 0 1px var(--border) inset; }
.segmenti .quante, .mondi .mondo .quante { font-variant-numeric: tabular-nums; opacity: .7; font-size: 11.5px; }
.segmenti.pieno, .mondi.pieno { display: flex; width: 100%; }
.segmenti.pieno .segmento, .mondi.pieno .mondo { flex: 1 1 0; padding: 6px 6px; }
.schede { display: flex; gap: 4px; padding: 4px; background: var(--campo); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto;
  width: fit-content; max-width: 100%; }
button.scheda-tab, a.scheda-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 9px; background: transparent; border: 0;
  color: var(--muted); font-weight: 500; font-size: 13px; text-decoration: none; white-space: nowrap; }
button.scheda-tab:hover, a.scheda-tab:hover { color: var(--text); filter: none; }
.scheda-tab[aria-selected="true"], .scheda-tab[aria-current="page"] { background: var(--card); color: var(--text); box-shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 0 0 1px var(--border) inset; }
.scheda-tab[aria-selected="true"] svg, .scheda-tab[aria-current="page"] svg { color: var(--accent); }

/* ---------- 8. Testa di una pagina, avatar, copia ---------- */
.testa-pagina { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.testa-pagina .testa-testo { min-width: 0; flex: 1 1 260px; }
.titolo-grande { font-size: 26px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; margin: 0;
  background: linear-gradient(90deg, #ffffff, #b4b4b4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.titolo-medio { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.riga-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.testa-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
a.indietro { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; text-decoration: none; }
a.indietro:hover { color: var(--text); }
a.indietro svg { width: 15px; height: 15px; }
/* l'avatar con le iniziali: il colore (--tinta) lo mette il codice, stabile per nome */
.avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 700;
  letter-spacing: .02em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  background: linear-gradient(135deg, var(--tinta, #3ecf8e), color-mix(in srgb, var(--tinta, #3ecf8e) 40%, #0b0b0b));
  box-shadow: 0 8px 18px -10px var(--tinta, #3ecf8e); }
.avatar.grande { width: 58px; height: 58px; border-radius: 17px; font-size: 20px; }
button.copiabile { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted);
  background: transparent; border: 1px dashed var(--border-forte); padding: 2px 8px; border-radius: 7px; }
button.copiabile:hover { color: var(--text); border-color: var(--muted); filter: none; }
button.copiabile svg { width: 12px; height: 12px; }

/* ---------- 9. Tessere (riquadri della panoramica) e carte ---------- */
.tessere-pan { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; }
.carte { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.tessera-pan { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--raggio); background: var(--vetro);
  border: 1px solid var(--border); box-shadow: var(--ombra); text-align: left; color: var(--text); font-weight: 400; font-size: 13.5px;
  align-items: stretch; justify-content: flex-start; white-space: normal; min-width: 0; text-decoration: none; }
button.tessera-pan:hover, a.tessera-pan:hover { border-color: var(--border-forte); background: rgba(36, 36, 36, .88); transform: translateY(-1px); filter: none; }
.tessera-testa { display: flex; align-items: center; gap: 10px; }
.tessera-testa > span:not(.avatar):not(.icona-tessera) { min-width: 0; }
.icona-tessera { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none;
  color: var(--tinta, var(--accent)); background: color-mix(in srgb, var(--tinta, var(--accent)) 15%, transparent); }
.icona-tessera svg { width: 16px; height: 16px; }
.tessera-titolo { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tessera-valore { font-size: 19px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.tessera-righe { display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
.tessera-righe b { color: var(--text); font-weight: 600; }
.tessera-vai { margin-top: auto; font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.tessera-vai svg { width: 13px; height: 13px; }
button.tessera-pan:hover .tessera-vai, a.tessera-pan:hover .tessera-vai { color: var(--accent); }
.caricando { color: var(--muted); font-size: 12.5px; }
.dettagli-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 12px 0 4px; }
.dettaglio { background: var(--campo); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.dettaglio .tessera-titolo { font-size: 10.5px; }
.dettaglio div:last-child { margin-top: 3px; overflow-wrap: anywhere; }
.vuoto-carta { text-align: center; padding: 34px 20px; }
.vuoto-carta .icona-tessera { margin: 0 auto 10px; width: 44px; height: 44px; border-radius: 12px; }
.vuoto-carta .icona-tessera svg { width: 22px; height: 22px; }

/* ---------- 10. Avanzamento e passi ---------- */
.barra-avanz { display: block; height: 6px; border-radius: 999px; background: var(--campo); overflow: hidden; border: 1px solid var(--border-2); }
.barra-avanz > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #26a96a, var(--accent)); }
.spazio-passi { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
ol.passi-v { position: sticky; top: calc(var(--testata, 49px) + 20px); list-style: none; margin: 0; padding: 10px; display: grid; gap: 2px;
  background: var(--vetro-lato); backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--ombra); }
.passi-v .titolo-passi { padding: 6px 10px 8px; }
.passo-v > button { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 9px 10px; border-radius: 11px; background: transparent;
  border: 1px solid transparent; color: var(--muted); text-align: left; font-weight: 400; white-space: normal; justify-content: flex-start; }
.passo-v > button:hover { background: rgba(255, 255, 255, .04); color: var(--text); filter: none; }
.passo-v.qui > button { background: rgba(255, 255, 255, .07); border-color: var(--border); color: var(--text); }
.passo-v .segno { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  border: 1.5px solid var(--border-forte); color: var(--muted); background: var(--campo); margin-top: 1px; }
.passo-v .segno svg { width: 13px; height: 13px; stroke-width: 3; }
.passo-v.fatto .segno { background: var(--accent); border-color: var(--accent); color: var(--accent-testo); }
.passo-v.libero .segno { border-style: dashed; }
.passo-v.manca .segno { border-color: var(--warn-bordo); color: var(--warn); }
.passo-v.qui .segno { box-shadow: 0 0 0 3px var(--accent-tenue); }
.passo-v .nome { display: block; font-weight: 600; font-size: 13px; color: inherit; }
.passo-v .cosa { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; overflow-wrap: anywhere; }
.passo-v.manca .cosa { color: var(--warn); }
.passo-v.fatto .cosa { color: var(--ok); }
.testa-passo { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.testa-passo h3 { margin: 0; font-size: 18px; }
.testa-passo .sub { margin: 2px 0 0; }
.testa-passo .avanzamento { display: grid; gap: 5px; justify-items: end; min-width: 200px; max-width: 340px; }
.testa-passo .avanzamento .barra-avanz { width: 200px; }
.testa-passo .avanzamento .small { text-align: right; }
.passo-piede { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ---------- 11. Tabelle ---------- */
.tabella-wrap { overflow-x: auto; }
table.elenco { width: 100%; border-collapse: collapse; margin-top: 10px; }
table.elenco th { text-align: left; font-weight: 600; font-size: .82em; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; border-bottom: 1px solid var(--border); }
table.elenco td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.elenco tbody tr.riga, table.elenco.cliccabile tbody tr { cursor: pointer; }
table.elenco tbody tr:hover { background: rgba(255, 255, 255, .025); }
table.elenco td.num, table.elenco th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.elenco.compatta td { padding: 7px 10px; vertical-align: middle; }
table.elenco.compatta th { padding: 6px 10px; }

/* ---------- 12. Dialogo ---------- */
dialog { background: #1e1e1e; color: var(--text); border: 1px solid var(--border); border-radius: 16px; padding: 22px;
  width: min(760px, calc(100vw - 32px)); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); }
dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
dialog p { overflow-wrap: anywhere; }
dialog .err { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--err-bordo); border-radius: 8px; background: var(--err-tenue); }
dialog .err:empty { display: none; }
details > summary { cursor: pointer; color: var(--muted); font-size: .9em; user-select: none; }
details > summary:hover { color: var(--text); }

/* ---------- 13. Schermi stretti e movimento ---------- */
@media (max-width: 1020px) {
  .spazio, .spazio-passi { grid-template-columns: 1fr; }
  .lato, ol.passi-v { position: static; max-height: none; }
  .lato-lista { max-height: 300px; }
  ol.passi-v { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 760px) {
  .panel { padding: 16px; }
  .sottonav { padding: 8px 16px; }
  .titolo-grande { font-size: 22px; }
  .testa-azioni { margin-left: 0; }
  .barra-salva.fissa { bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}