:root {
  /* palette di partenza */
  --principale: #e3e3e3;
  --secondario: #adadad;
  --accento: #d7d7d7;
  --testo: #1c1c1a;

  --sfondo: #eeede9;
  --carta: #ffffff;
  --carta-2: #f7f6f3;
  --linea: #e2e0da;
  --linea-forte: #cfccc4;
  --tenue: #6b6963;
  --scuro: #1c1c1a;
  --scuro-2: #2a2a27;
  --ok: #2d6a3e;
  --ok-tenue: #e3efe5;
  --attesa: #94600f;
  --attesa-tenue: #f6ecda;
  --errore: #a33a2b;
  --errore-tenue: #f6e3df;
  --raggio: 14px;
  --raggio-s: 9px;
  --ombra: 0 1px 2px rgba(28, 28, 26, .05), 0 4px 14px rgba(28, 28, 26, .04);
  --sidebar: 248px;
  --barra: 64px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body { min-height: 100vh; min-height: 100dvh; background: var(--sfondo); color: var(--testo);
       font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-size: 16px; line-height: 1.45; }
[hidden] { display: none !important; }
a { color: inherit; }
svg.icona { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.num, .cifra strong, .voce-importo, .conto-riga b { font-variant-numeric: tabular-nums; }

/* ---------- layout (telefono prima) ---------- */
main { padding: 1.25rem 1rem calc(var(--barra) + 2rem + env(safe-area-inset-bottom)); width: 100%; max-width: 1200px; }

.barra-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex;
                background: rgba(28, 28, 26, .97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
                padding-bottom: env(safe-area-inset-bottom); }
.barra-mobile a, .barra-mobile label { flex: 1; min-width: 0; height: var(--barra); display: flex; flex-direction: column; align-items: center; justify-content: center;
                gap: 4px; color: #9c9a94; text-decoration: none; font-size: .68rem; font-weight: 600; cursor: pointer; position: relative; }
.barra-mobile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.barra-mobile [aria-current="page"] { color: #fff; }
.barra-mobile [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; border-radius: 0 0 2px 2px; background: #fff; }

#menu-aperto { position: absolute; opacity: 0; pointer-events: none; }
.sidebar { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(300px, 84vw); display: flex; flex-direction: column;
           background: var(--scuro); color: #e9e8e4; padding: calc(1.2rem + env(safe-area-inset-top)) .8rem calc(1rem + env(safe-area-inset-bottom));
           transform: translateX(-102%); transition: transform .24s cubic-bezier(.2, .8, .2, 1); overflow-y: auto; }
.velo { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .24s ease; }
#menu-aperto:checked ~ .sidebar { transform: none; }
#menu-aperto:checked ~ .velo { opacity: 1; pointer-events: auto; }

.marchio { display: flex; align-items: center; gap: .65rem; padding: 0 .5rem 1.1rem; margin-bottom: .4rem;
           border-bottom: 1px solid #34342f; color: inherit; text-decoration: none; }
.marchio b { display: grid; place-items: center; flex: none; width: 38px; height: 32px; border-radius: 8px;
             background: #f1efe9; color: var(--scuro); font-size: .74rem; font-weight: 800; letter-spacing: .03em; }
.marchio span { font-weight: 700; letter-spacing: -.01em; }
.marchio small { display: block; font-size: .72rem; font-weight: 500; color: #8e8c86; letter-spacing: 0; }

.sidebar nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar .gruppo { margin: 1rem .55rem .3rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #7d7b75; }
.sidebar nav a { display: flex; align-items: center; gap: .7rem; min-height: 42px; padding: .4rem .6rem; border-radius: 8px; color: #c9c7c1;
                 text-decoration: none; font-size: .94rem; }
.sidebar nav a svg { width: 19px; height: 19px; opacity: .75; }
.sidebar nav a:hover { background: var(--scuro-2); color: #fff; }
.sidebar nav a[aria-current="page"] { background: #f1efe9; color: var(--scuro); font-weight: 650; }
.sidebar nav a[aria-current="page"] svg { opacity: 1; }

.sidebar .piede { margin-top: auto; padding: 1rem .55rem 0; border-top: 1px solid #34342f; font-size: .85rem; display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #3a3a35; color: #fff; font-weight: 700; font-size: .85rem; text-transform: uppercase; flex: none; }
.sidebar .piede .chi { flex: 1; min-width: 0; }
.sidebar .piede .nome { display: block; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .piede .ruolo { color: #8e8c86; font-size: .78rem; }
.sidebar .piede form { width: 100%; }
.sidebar .piede button { margin-top: .6rem; width: 100%; background: transparent; color: #c9c7c1; border-color: #45453f; }
.sidebar .piede button:hover { background: var(--scuro-2); color: #fff; }

@media (min-width: 900px) {
  body.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .sidebar { position: sticky; height: 100vh; width: auto; transform: none; transition: none; padding: 1.4rem .8rem 1.2rem; }
  .velo, .barra-mobile { display: none; }
  main { padding: 2.25rem 2.5rem 3rem; }
}

/* ---------- intestazione ---------- */
.testa { margin-bottom: 1.25rem; }
.testa .sopra { margin: 0 0 .2rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.testa h1 { margin: 0; font-size: 1.6rem; font-weight: 750; letter-spacing: -.025em; line-height: 1.15; }
.testa p { margin: .35rem 0 0; color: var(--tenue); font-size: .95rem; max-width: 60ch; }
@media (min-width: 900px) { .testa { margin-bottom: 1.75rem; } .testa h1 { font-size: 1.9rem; } }

.schede { display: flex; gap: .4rem; margin: -.25rem 0 1.1rem; overflow-x: auto; scrollbar-width: none; }
.schede a { flex: none; padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--linea-forte); color: var(--testo);
            text-decoration: none; font-size: .9rem; font-weight: 600; background: var(--carta); }
.schede a[aria-current="page"] { background: var(--scuro); border-color: var(--scuro); color: #fff; }

.avviso { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--raggio-s); font-weight: 550; font-size: .95rem; border: 1px solid transparent; }
.avviso.ok { color: var(--ok); background: var(--ok-tenue); border-color: #c9dfcd; }
.avviso.errore { color: var(--errore); background: var(--errore-tenue); border-color: #ecc9c2; }

/* ---------- griglie e riquadri ---------- */
.griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 1100px) {
  .griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.1rem; }
  .s12 { grid-column: span 12; } .s8 { grid-column: span 8; } .s7 { grid-column: span 7; } .s6 { grid-column: span 6; }
  .s5 { grid-column: span 5; } .s4 { grid-column: span 4; }
}
.colonna { display: grid; gap: 1rem; align-content: start; }
.spazio { margin-bottom: 1rem; }

.riquadro { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 1.1rem; box-shadow: var(--ombra); }
.riquadro > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.riquadro h2 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; }
.riquadro h2 svg { width: 18px; height: 18px; color: var(--tenue); }
.riquadro header a { font-size: .88rem; font-weight: 600; color: var(--tenue); text-decoration: none; padding: .25rem 0; white-space: nowrap; }
.riquadro header a:hover { color: var(--testo); }
@media (min-width: 900px) { .riquadro { padding: 1.25rem 1.4rem; } }

/* cifre */
.cifre { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.cifra { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: .9rem 1rem; min-width: 0; box-shadow: var(--ombra); }
.cifra span { display: block; font-size: .78rem; font-weight: 600; color: var(--tenue); }
.cifra strong { display: block; margin-top: .25rem; font-size: 1.3rem; font-weight: 750; letter-spacing: -.02em; overflow-wrap: break-word; }
.cifra small { display: block; margin-top: .15rem; font-size: .76rem; color: var(--tenue); }
.cifra .mini { margin-top: .55rem; }
.cifre > .cifra:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .cifre { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
  .cifre > .cifra:last-child:nth-child(odd) { grid-column: auto; }
  .cifra strong { font-size: 1.45rem; }
}

/* barre */
.barra, .mini { height: 8px; background: var(--carta-2); border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; }
.mini { height: 6px; }
.barra i, .mini i { display: block; height: 100%; background: var(--scuro); border-radius: inherit; }
.mini.ok i { background: var(--ok); }
.avanz-testo { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .55rem; font-size: .85rem; color: var(--tenue); }
.avanz-testo b { color: var(--testo); }
.date { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linea); }
.date span { display: block; font-size: .74rem; font-weight: 600; color: var(--tenue); }
.date strong { font-weight: 650; font-size: .92rem; }

/* ---------- dashboard ---------- */
.eroe { background: var(--scuro); color: #f1efe9; border-radius: calc(var(--raggio) + 4px); padding: 1.25rem; margin-bottom: 1rem; box-shadow: 0 10px 30px rgba(28, 28, 26, .18); }
.eroe .etichetta { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9c9a94; }
.eroe .saldo { display: block; margin: .2rem 0 .1rem; font-size: 2.4rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.eroe .saldo.negativo { color: #ffb4a6; }
.eroe .sotto { color: #b9b7b0; font-size: .9rem; }
.bilancio { margin-top: 1.1rem; display: grid; gap: .55rem; }
.bilancio-riga { display: grid; grid-template-columns: 4.6rem 1fr auto; align-items: center; gap: .7rem; font-size: .85rem; }
.bilancio-riga span { color: #b9b7b0; }
.bilancio-riga b { font-variant-numeric: tabular-nums; font-weight: 650; }
.bilancio-riga .traccia { height: 10px; border-radius: 999px; background: #33332e; overflow: hidden; }
.bilancio-riga .traccia i { display: block; height: 100%; border-radius: inherit; background: #f1efe9; }
.bilancio-riga.uscite .traccia i { background: #d98b7d; }
.eroe-piede { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #34342f; }
.eroe-piede span { display: block; font-size: .74rem; color: #9c9a94; font-weight: 600; }
.eroe-piede b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .eroe { padding: 1.6rem 1.75rem; } .eroe .saldo { font-size: 3rem; } .eroe-piede { grid-template-columns: repeat(4, 1fr); } }

.conto-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .75rem; padding: .6rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: inherit; }
.conto-riga:last-of-type { border-bottom: 0; }
.conto-riga:hover .conto-voce { text-decoration: underline; }
.conto-voce { font-weight: 600; font-size: .94rem; overflow-wrap: break-word; }
.conto-riga b { font-weight: 700; text-align: right; white-space: nowrap; }
.conto-riga b.negativo { color: var(--errore); }
.conto-riga small { grid-column: 1 / -1; font-size: .78rem; color: var(--tenue); }
.conto-riga .quota { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--carta-2); overflow: hidden; margin-top: .2rem; }
.conto-riga .quota i { display: block; height: 100%; background: var(--linea-forte); border-radius: inherit; }
.conto-totale { display: flex; justify-content: space-between; gap: 1rem; margin-top: .4rem; padding: .75rem .9rem; border-radius: var(--raggio-s); background: var(--carta-2); font-weight: 750; font-variant-numeric: tabular-nums; }
.punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .45rem; vertical-align: middle; background: var(--attesa); }
.punto.si { background: var(--ok); }

.evento { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.tessera { display: block; background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: .9rem 1rem; text-decoration: none; color: inherit; box-shadow: var(--ombra); min-width: 0; }
.tessera:hover { border-color: var(--linea-forte); }
.tessera .capo { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 650; color: var(--tenue); }
.tessera .capo svg { width: 17px; height: 17px; }
.tessera strong { display: block; margin: .35rem 0 .45rem; font-size: 1.35rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tessera strong small { font-size: .85rem; font-weight: 600; color: var(--tenue); letter-spacing: 0; }
.tessera p { margin: .45rem 0 0; font-size: .78rem; color: var(--tenue); }

.listino { display: flex; flex-wrap: wrap; gap: .4rem; }
.listino span { display: inline-flex; gap: .4rem; padding: .35rem .65rem; border-radius: 999px; background: var(--carta-2); border: 1px solid var(--linea); font-size: .82rem; }
.listino b { font-variant-numeric: tabular-nums; }

/* ---------- form ---------- */
form.campi { display: grid; gap: .85rem; }
form.riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .85rem; align-items: end; }
.azioni-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
label { display: block; margin-bottom: .3rem; font-size: .82rem; font-weight: 650; color: var(--tenue); }
input, select { width: 100%; min-height: 46px; padding: .6rem .8rem; font: inherit; font-size: 16px; color: var(--testo);
                background: var(--carta); border: 1px solid var(--linea-forte); border-radius: var(--raggio-s); transition: border-color .15s, box-shadow .15s; }
input::placeholder { color: #a3a19a; }
input:focus, select:focus { outline: none; border-color: var(--scuro); box-shadow: 0 0 0 3px rgba(28, 28, 26, .1); }
select { appearance: none; -webkit-appearance: none; padding-right: 2.1rem;
         background: var(--carta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6963' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right .8rem center; }
input[type="file"] { padding: .6rem .55rem; font-size: .9rem; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; accent-color: var(--scuro); flex: none; box-shadow: none; }
.spunta { display: flex; align-items: center; gap: .6rem; min-height: 46px; }
.spunta label { margin: 0; color: var(--testo); font-size: .95rem; font-weight: 500; }
.aiuto { margin: .55rem 0 0; font-size: .8rem; color: var(--tenue); }

button, .bottone { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 46px; padding: .55rem 1.05rem;
         font: inherit; font-size: .95rem; font-weight: 650; color: var(--testo); cursor: pointer; background: var(--carta);
         border: 1px solid var(--linea-forte); border-radius: var(--raggio-s); text-decoration: none; line-height: 1.2; transition: background .15s, transform .05s; }
button:hover, .bottone:hover { background: var(--carta-2); }
button:active { transform: translateY(1px); }
button.primario { background: var(--scuro); color: #fff; border-color: var(--scuro); }
button.primario:hover { background: var(--scuro-2); }
button.pieno { width: 100%; }
button.piccolo, .bottone.piccolo { min-height: 36px; padding: .35rem .8rem; font-size: .85rem; }
button.pericolo { color: var(--errore); background: transparent; border-color: #e0b8b0; }
button.pericolo:hover { background: var(--errore); color: #fff; border-color: var(--errore); }
button:disabled { opacity: .45; cursor: not-allowed; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--scuro); outline-offset: 2px; }
.sidebar a:focus-visible, .sidebar button:focus-visible, .barra-mobile a:focus-visible { outline-color: #fff; outline-offset: -2px; }

details.modulo { padding: 0; }
details.modulo > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
                           padding: .95rem 1.1rem; cursor: pointer; font-weight: 700; min-height: 56px; }
details.modulo > summary::-webkit-details-marker { display: none; }
details.modulo > summary::after { content: "+"; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
                                   background: var(--scuro); color: #fff; font-size: 1.25rem; font-weight: 500; line-height: 1; }
details.modulo[open] > summary::after { content: "–"; background: var(--carta-2); color: var(--testo); border: 1px solid var(--linea); }
details.modulo .corpo { padding: 0 1.1rem 1.1rem; }
details.modulo.attivo { border-color: var(--scuro); box-shadow: 0 0 0 1px var(--scuro), var(--ombra); }
.elimina-voce { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
@media (min-width: 900px) { details.modulo > summary { padding: 1rem 1.4rem; } details.modulo .corpo { padding: 0 1.4rem 1.3rem; } }

/* ---------- liste ---------- */
.cerca { margin-bottom: .5rem; }
.cerca input { padding-left: 2.4rem; background: var(--carta-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6963' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .85rem center; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { display: flex; align-items: center; gap: .65rem; padding: .7rem 0; border-bottom: 1px solid var(--linea); }
.lista > li:last-child { border-bottom: 0; }
.lista > li.attiva { background: var(--carta-2); margin: 0 -.6rem; padding-left: .6rem; padding-right: .6rem; border-radius: var(--raggio-s); }
.lista > li.gruppo-lista { display: block; padding: 1rem 0 .35rem; font-size: .74rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.lista > li.gruppo-lista:first-child { padding-top: .25rem; }
.voce-corpo { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; min-height: 44px; }
a.voce-corpo:hover .voce-titolo { text-decoration: underline; }
.voce-testo { flex: 1; min-width: 0; }
.voce-titolo { display: block; font-weight: 600; overflow-wrap: break-word; }
.voce-sotto { display: block; font-size: .82rem; color: var(--tenue); overflow-wrap: break-word; }
.voce-destra { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.voce-importo { flex: none; font-weight: 700; white-space: nowrap; }
.voce-importo.negativo { color: var(--errore); }
.logo { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--carta-2); border: 1px solid var(--linea); object-fit: contain; }
span.logo { display: none; }
@media (min-width: 900px) { span.logo { display: block; } }
.lista form { margin: 0; flex: none; }
.stato { display: inline-flex; align-items: center; gap: .35rem; min-height: 30px; padding: .15rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 650;
         border: 1px solid transparent; line-height: 1.3; white-space: nowrap; }
.stato::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stato.si { color: var(--ok); background: var(--ok-tenue); }
.stato.no { color: var(--attesa); background: var(--attesa-tenue); }
button.stato:hover { border-color: currentColor; }
button.stato.si:hover { background: var(--ok-tenue); } button.stato.no:hover { background: var(--attesa-tenue); }
.tag { font-size: .78rem; color: var(--tenue); font-weight: 550; }
.vuoto { margin: 0; padding: 1.25rem 0; color: var(--tenue); font-size: .95rem; text-align: center; }

/* checklist */
.spunta-tondo { display: grid; place-items: center; width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid var(--linea-forte);
                background: var(--carta); color: transparent; flex: none; }
.spunta-tondo svg { width: 16px; height: 16px; stroke-width: 3; }
button.spunta-tondo:hover { border-color: var(--scuro); background: var(--carta); color: var(--linea-forte); }
.spunta-tondo.fatto, button.spunta-tondo.fatto:hover { background: var(--ok); border-color: var(--ok); color: #fff; }
li.fatto .voce-titolo { text-decoration: line-through; color: var(--tenue); font-weight: 500; }

/* contatore */
.contatore { display: inline-flex; align-items: center; border: 1px solid var(--linea-forte); border-radius: 999px; overflow: hidden; background: var(--carta); }
.contatore button { min-height: 32px; width: 34px; padding: 0; border: 0; border-radius: 0; font-size: 1.05rem; background: transparent; }
.contatore span { min-width: 2rem; text-align: center; font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }

/* tabelle semplici */
table { width: 100%; border-collapse: collapse; }
th, td { padding: .6rem .25rem; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: middle; }
th { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; white-space: nowrap; }

/* utenti e permessi */
.utente-riga { display: grid; gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--linea); }
.utente-riga:first-child { padding-top: 0; }
.utente-riga:last-child { border-bottom: 0; padding-bottom: 0; }
.utente-capo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.utente-capo .chi { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.utente-capo .avatar, .log-voce .avatar { background: var(--carta-2); color: var(--testo); border: 1px solid var(--linea); }
.distintivo { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--carta-2); border: 1px solid var(--linea); color: var(--tenue); margin-left: .35rem; vertical-align: middle; }
.distintivo.admin { background: var(--scuro); border-color: var(--scuro); color: #fff; }
.permessi-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .75rem; }
.permessi-griglia label { font-size: .76rem; }
@media (min-width: 760px) { .permessi-griglia { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; } }
details.piega > summary { cursor: pointer; color: var(--tenue); font-size: .9rem; font-weight: 650; padding: .4rem 0; min-height: 36px; }
details.piega[open] > summary { margin-bottom: .5rem; }

/* registro */
.log-voce { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .75rem; padding: .8rem 0; border-bottom: 1px solid var(--linea); }
.log-voce:last-of-type { border-bottom: 0; }
.log-voce .avatar { grid-row: span 3; width: 32px; height: 32px; font-size: .8rem; }
.log-voce p { margin: 0; overflow-wrap: break-word; }
.log-voce .quando { font-size: .76rem; color: var(--tenue); margin-top: .15rem; }
.log-voce .dettaglio { font-size: .86rem; color: var(--tenue); margin-top: .1rem; }
.filtri { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.filtri button { grid-column: 1 / -1; }
@media (min-width: 700px) { .filtri { grid-template-columns: 1fr 1fr auto; align-items: end; } .filtri button { grid-column: auto; } }
.paginazione { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .88rem; color: var(--tenue); }

/* importazione */
.anteprima > details { border-bottom: 1px solid var(--linea); }
.anteprima > details:last-child { border-bottom: 0; }
.anteprima summary { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; cursor: pointer; list-style: none; min-height: 56px; }
.anteprima summary::-webkit-details-marker { display: none; }
.anteprima summary .voce-testo small { display: block; color: var(--tenue); font-size: .8rem; }
.anteprima .lista { padding-bottom: .5rem; }
.anteprima .lista > li { padding: .45rem 0; font-size: .92rem; }
.gruppo-import { margin: 1.1rem 0 .1rem; font-size: .74rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.gruppo-import:first-child { margin-top: 0; }
.scelta { display: grid; gap: .5rem; }
.scelta label.opzione { display: flex; gap: .7rem; align-items: flex-start; margin: 0; padding: .85rem; border: 1px solid var(--linea-forte); border-radius: var(--raggio-s);
                        background: var(--carta); color: var(--testo); font-weight: 600; font-size: .95rem; cursor: pointer; }
.scelta label.opzione:has(input:checked) { border-color: var(--scuro); box-shadow: 0 0 0 1px var(--scuro); }
.scelta label.opzione small { display: block; color: var(--tenue); font-size: .8rem; font-weight: 400; }
.scelta input { margin-top: .1rem; }
.controllo { font-size: .88rem; font-weight: 550; padding: .7rem .9rem; border-radius: var(--raggio-s); margin: 0 0 .75rem; }
.controllo.ok { color: var(--ok); background: var(--ok-tenue); } .controllo.no { color: var(--attesa); background: var(--attesa-tenue); }

/* ---------- accesso ---------- */
body.accesso { display: grid; place-items: center; padding: 1.25rem; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
.accesso-box { width: 100%; max-width: 390px; }
.accesso-box .marchio { color: var(--testo); border: 0; padding: 0; margin-bottom: 1.6rem; justify-content: center; }
.accesso-box .marchio b { background: var(--scuro); color: #fff; width: 48px; height: 40px; font-size: .88rem; border-radius: 10px; }
.accesso-box .marchio span { font-size: 1.2rem; }
.accesso-box .marchio small { color: var(--tenue); }
.accesso-box .riquadro { padding: 1.6rem 1.35rem; }
.accesso-box h1 { margin: 0 0 .25rem; font-size: 1.4rem; font-weight: 750; letter-spacing: -.02em; }
.accesso-box .sub { margin: 0 0 1.3rem; color: var(--tenue); font-size: .95rem; }
.accesso-box .avviso { margin-bottom: 1rem; }
.accesso-box .piede-accesso { margin-top: 1.25rem; text-align: center; font-size: .8rem; color: var(--tenue); }

/* barra obiettivo a due livelli */
.obiettivo-barra { position: relative; height: 16px; border-radius: 999px; background: var(--carta-2); border: 1px solid var(--linea); overflow: hidden; }
.obiettivo-barra i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; }
.obiettivo-barra .previsto { background: var(--linea-forte); }
.obiettivo-barra .incassato { background: var(--scuro); }
.legenda { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .7rem; font-size: .84rem; color: var(--tenue); }
.legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--scuro); }
.legenda i.chiaro { background: var(--linea-forte); }
.legenda b { color: var(--testo); font-variant-numeric: tabular-nums; }
@media (min-width: 760px) { .evento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }

/* danger zone */
.pericolo-zona { margin-top: 1.25rem; border-color: #e5bfb7; box-shadow: 0 0 0 1px #f1d6d0, var(--ombra); }
.pericolo-zona > header h2 { color: var(--errore); }
.pericolo-blocco { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: 1rem 0; border-top: 1px solid var(--linea); }
.pericolo-blocco h3 { margin: 0; font-size: .95rem; font-weight: 700; }
.pericolo-blocco p { margin: .15rem 0 0; font-size: .84rem; color: var(--tenue); }
details.pericolo-blocco { display: block; }
details.pericolo-blocco > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--testo); padding: 0; }
details.pericolo-blocco > summary::-webkit-details-marker { display: none; }
details.pericolo-blocco > summary::after { content: "Apri"; flex: none; padding: .35rem .8rem; border-radius: var(--raggio-s); border: 1px solid #e0b8b0; color: var(--errore); font-size: .85rem; font-weight: 650; }
details.pericolo-blocco[open] > summary::after { content: "Chiudi"; }
details.pericolo-blocco[open] > summary { margin-bottom: 1rem; }
details.pericolo-blocco > summary .voce-sotto { font-weight: 400; margin-top: .15rem; }