/* Noda - stili. Stessa carta delle bozze: fondo carta, inchiostro blu
   notte, un solo colore d'allarme. I colori delle persone arrivano da --c. */

:root {
  --carta: #F4F2ED;
  --carta-2: #ECE8E0;
  --bianco: #FFFFFF;
  --tenue: #F7F5F1;
  --linea: #E4DFD5;
  --linea-2: #EFEBE4;
  --linea-forte: #CFC8BB;
  --inchiostro: #0F1F2A;
  --inchiostro-2: #44535C;
  --inchiostro-3: #5E6B72;
  --notte: #0F1F2A;
  --notte-2: #203546;
  --notte-testo: #C9D3D9;
  --notte-tenue: #9DB0BB;
  --link: #1F5FAE;
  --serie: #2a78d6;
  --serie-chiara: #cde2fb;
  --giallo-sfondo: #FEF3D6;
  --giallo-testo: #6B4600;
  --verde-sfondo: #E2F0E8;
  --verde-testo: #1E6B45;
  --blu-sfondo: #E6EEF8;
  --blu-testo: #1B4F8F;
  --viola-sfondo: #F1EAFB;
  --viola-testo: #5A3E99;
  --rosso-sfondo: #FDE4E1;
  --rosso-testo: #A3261E;
  --grigio-sfondo: #F1EEE8;
  --titoli: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --testo: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--testo); color: var(--inchiostro); background: var(--carta); -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.45; }
a { color: var(--link); text-decoration: none; }
a:hover { color: #123F78; text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input::placeholder, textarea::placeholder { color: #6B777D; }
:focus-visible { outline: 2px solid var(--serie); outline-offset: 2px; }
h1, h2, h3 { margin: 0; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caricamento { padding: 48px; color: var(--inchiostro-3); }
svg.icona { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.icona.piccola { width: 14px; height: 14px; stroke-width: 2.2; }

/* ------------------------------------------------------------ guscio */

.guscio { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.lato { background: var(--notte); color: var(--notte-testo); display: flex; flex-direction: column; gap: 28px; padding: 24px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marchio { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.marchio b { font-family: var(--titoli); font-weight: 700; font-size: 19px; color: #fff; letter-spacing: -0.01em; display: block; }
.marchio small { font-size: 12px; color: var(--notte-tenue); }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 10px; color: var(--notte-testo); font-weight: 500; }
.nav a:hover { background: #1A2F3E; color: #fff; text-decoration: none; }
.nav a[aria-current="page"] { background: var(--notte-2); color: #fff; }
.nav a span { flex-grow: 1; }
.nav a small { font-size: 12px; color: var(--notte-tenue); }
.etichetta-lato { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--notte-tenue); }
.squadra-lato { display: flex; flex-direction: column; gap: 12px; padding: 0 8px; }
.squadra-lato .chi { display: flex; align-items: center; gap: 10px; }
.squadra-lato .chi b { font-weight: 400; color: #fff; display: block; }
.squadra-lato .chi small { font-size: 12px; color: var(--notte-tenue); display: block; }
.piede-lato { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 8px 0; border-top: 1px solid #22384A; font-size: 12px; color: var(--notte-tenue); }
.piede-lato .io { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #fff; }
.piede-lato .io > span:not(.av) { flex-grow: 1; }
.piede-lato button { background: none; border: 0; color: var(--notte-testo); font-size: 13px; padding: 12px 4px; }
.piede-lato button:hover { color: #fff; text-decoration: underline; }
.barra-mobile { display: none; }

.principale { min-width: 0; padding: 36px 40px 48px; display: flex; flex-direction: column; gap: 22px; }
.testata { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.testata .sopra { font-size: 13px; color: var(--inchiostro-3); display: block; margin-bottom: 6px; }
.titolo { font-family: var(--titoli); font-size: 38px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.azioni { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.briciole { display: flex; gap: 8px; font-size: 13px; color: var(--inchiostro-3); margin-bottom: -8px; }

/* ----------------------------------------------------------- elementi */

.bottone { height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--inchiostro); color: #fff; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.bottone:hover { background: var(--notte-2); color: #fff; text-decoration: none; }
.bottone.secondario { background: var(--bianco); color: var(--inchiostro); border: 1px solid var(--linea); font-weight: 500; }
.bottone.secondario:hover { border-color: var(--linea-forte); background: var(--tenue); }
.bottone.piccolo { height: 36px; padding: 0 12px; font-size: 13px; }
.bottone.voto-no { background: var(--rosso-sfondo); color: var(--rosso-testo); border: 1px solid #E7A39B; }
.scelta-voto { display: inline-flex; gap: 6px; }
.piede.piede-voti { flex-wrap: wrap; row-gap: 8px; }
.bottone.pericolo { background: var(--bianco); color: var(--rosso-testo); border: 1px solid #F0C4BE; }
.bottone.pericolo:hover { background: var(--rosso-sfondo); }
.bottone:disabled { opacity: 0.6; cursor: default; }
.link-bottone { background: none; border: 0; padding: 12px 0; color: var(--link); font-size: 13px; font-weight: 500; }
.link-bottone:hover { text-decoration: underline; }

.scheda { background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.scheda > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.scheda h2 { font-family: var(--titoli); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.scheda h2 small { font-family: var(--testo); font-size: 13px; font-weight: 400; color: var(--inchiostro-3); margin-left: 6px; }
.nota-piccola { font-size: 12px; line-height: 1.5; color: var(--inchiostro-3); margin: 0; }

.griglia { display: grid; gap: 16px; }
.griglia.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.griglia.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia.lr { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.colonna-schede { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.cifra { background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; color: var(--inchiostro); }
.cifra .nome { font-size: 13px; color: var(--inchiostro-2); }
.cifra .valore { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.cifra .sotto { font-size: 13px; color: var(--inchiostro-3); }
a.cifra:hover { border-color: var(--linea-forte); text-decoration: none; }
.cifra.larga { grid-column: span 2; }

.av { --c: #5E6B72; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.av.s { width: 24px; height: 24px; font-size: 10px; }
.av.l { width: 40px; height: 40px; font-size: 15px; }
.av.xl { width: 56px; height: 56px; font-size: 20px; }
.av.vuoto { background: var(--bianco); color: var(--inchiostro-3); border: 1.5px solid #B9B2A4; }
/* Chi ha votato «no» a un'idea. */
.av.voto-no { background: var(--rosso-sfondo); color: var(--rosso-testo); border: 1.5px solid #E7A39B; }
.pila { display: inline-flex; padding-left: 6px; }
.pila .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--bianco); }
.pila .av-altri { background: var(--carta-2); color: var(--inchiostro-2); font-size: 10px; letter-spacing: -0.02em; }

.chip { height: 24px; padding: 0 10px; border-radius: 999px; background: var(--grigio-sfondo); color: var(--inchiostro-2); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chip.attenzione { background: var(--giallo-sfondo); color: var(--giallo-testo); }
.chip.ok { background: var(--verde-sfondo); color: var(--verde-testo); }
.chip.attesa { background: var(--blu-sfondo); color: var(--blu-testo); }
.chip.critico { background: var(--rosso-sfondo); color: var(--rosso-testo); }
.chip.prova { background: var(--viola-sfondo); color: var(--viola-testo); }
.chip.contorno { background: transparent; border: 1px dashed #B9B2A4; font-weight: 500; }
.tipo { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--inchiostro-3); }

.barra { height: 6px; border-radius: 3px; background: var(--serie-chiara); overflow: hidden; flex-grow: 1; }
.barra i { display: block; height: 100%; border-radius: 3px; background: var(--serie); width: var(--p, 0%); }
.barra.grossa { height: 10px; border-radius: 5px; }
.avanzamento { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--inchiostro-2); font-variant-numeric: tabular-nums; }

.riga { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 4px; border-top: 1px solid var(--linea-2); }
.riga .corpo { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.riga .corpo b { font-weight: 600; }
.riga .corpo small { font-size: 12px; color: var(--inchiostro-3); }
.riga .quando { font-size: 12px; color: var(--inchiostro-3); white-space: nowrap; }
.riga.fatta .corpo > span:first-child, .carta.fatta .titolo-carta { text-decoration: line-through; color: var(--inchiostro-3); }
.riga-link { color: var(--inchiostro); }
.riga-link:hover { background: var(--tenue); text-decoration: none; }
.taglia { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spunta { width: 44px; height: 44px; margin: -10px -8px -10px -12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.spunta input { width: 18px; height: 18px; margin: 0; accent-color: var(--inchiostro); cursor: pointer; }
/* Il messaggio «niente qui» (un paragrafo): «vuoto» e' anche la faccia di chi non ha ancora votato. */
p.vuoto { padding: 18px 8px; color: var(--inchiostro-3); font-size: 13px; text-align: center; }

.pillole { display: flex; gap: 8px; flex-wrap: wrap; }
.pillola { height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linea); background: var(--bianco); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
/* Il numero dentro una pillola (i filtri): un bollino a parte, come i conti delle colonne. */
.pillola small { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--carta-2); color: var(--inchiostro-2); font-size: 12px; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.pillola[aria-pressed="true"] small, .pillola[aria-current="true"] small { background: rgba(255, 255, 255, 0.18); color: #fff; }
.pillola[aria-pressed="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
/* Il filtro «di chi» quando le persone sono tante: un menu dentro una pillola. */
.pillola.scegli-chi { position: relative; padding: 0 34px 0 16px; cursor: pointer; color: var(--inchiostro-2); }
.pillola.scegli-chi select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; color: var(--inchiostro); cursor: pointer; max-width: 46vw; text-overflow: ellipsis; }
.pillola.scegli-chi::after { content: ""; position: absolute; right: 16px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-75%) rotate(45deg); pointer-events: none; }
.pillola.scegli-chi.attiva { background: var(--inchiostro); border-color: var(--inchiostro); color: rgba(255, 255, 255, 0.75); }
.pillola.scegli-chi.attiva select { color: #fff; }
.pillola.scegli-chi.attiva select option { color: var(--inchiostro); }
.pillola.scegli-chi:focus-within { outline: 2px solid var(--serie); outline-offset: 2px; }
.segmenti { display: inline-flex; gap: 4px; padding: 4px; background: var(--segmenti, #EAE6DE); border-radius: 12px; }
.segmenti button { height: 36px; min-width: 44px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; font-size: 13px; font-weight: 500; }
.segmenti button[aria-pressed="true"] { background: var(--bianco); box-shadow: 0 1px 2px rgba(15, 31, 42, 0.12); }
.barra-filtri { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ------------------------------------------------------------ bacheche */

.bacheca { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.colonna { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--carta-2); min-width: 0; }
.colonna > header { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 4px; }
.colonna h2 { font-size: 14px; font-weight: 600; }
.conta { font-size: 12px; font-weight: 600; color: var(--inchiostro-2); background: var(--bianco); border-radius: 999px; padding: 2px 9px; }
.carta { background: var(--bianco); border: 1px solid var(--linea); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.carta .testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.titolo-carta { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--inchiostro); text-align: left; background: none; border: 0; padding: 0; overflow-wrap: anywhere; }
a.titolo-carta { color: var(--link); }
button.titolo-carta:hover { text-decoration: underline; }
.carta p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--inchiostro-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carta .piede { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--inchiostro-3); border-top: 1px solid var(--linea-2); padding-top: 8px; }
/* La priorita' (la sceglie un admin): alta color pesca, bassa tratteggiata e piu' tenue. */
.carta.prio-alta { background: #FFF6EA; border-color: #F2C79A; }
.carta.prio-bassa { background: transparent; border-style: dashed; border-color: var(--linea-forte); }
.carta.prio-bassa .titolo-carta, .carta.prio-bassa p { color: var(--inchiostro-3); }
.riga.prio-alta { background: #FFF6EA; border-radius: 10px; border-top-color: transparent; padding-left: 8px; padding-right: 8px; }
.riga.prio-bassa .titolo-riga { color: var(--inchiostro-3); }
.chip.prio-alta { background: #FCE2C6; color: #8F420A; }
.chip.prio-bassa { background: var(--grigio-sfondo); color: var(--inchiostro-3); }
.chips-carta { display: flex; flex-wrap: wrap; gap: 6px; }
/* La fase sulla carta di un progetto: un menu con l'aspetto di un'etichetta. */
.chip-stato { position: relative; padding-right: 24px; cursor: pointer; }
.chip-stato select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.chip-stato::after { content: ""; position: absolute; right: 10px; top: 50%; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-75%) rotate(45deg); pointer-events: none; }
.chip-stato:focus-within { outline: 2px solid var(--serie); outline-offset: 2px; }
/* Il campo della priorita' nel modulo: tre segmenti (sono radio). */
.scegli-livello label { position: relative; display: inline-flex; }
.scegli-livello input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.scegli-livello span { height: 36px; padding: 0 14px; border-radius: 9px; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--inchiostro-2); }
.scegli-livello input:checked + span { background: var(--bianco); color: var(--inchiostro); box-shadow: 0 1px 2px rgba(15, 31, 42, 0.12); }
.scegli-livello .livello-alta input:checked + span { background: #FFF6EA; color: #8F420A; box-shadow: 0 0 0 1px #F2C79A; }
.scegli-livello input:focus-visible + span { outline: 2px solid var(--serie); outline-offset: 2px; }
/* «Mettimi in ordine»: la finestra con oggi e la settimana (tutto con il prefisso «ord-»). */
.ord-titolo { display: flex; align-items: center; gap: 8px; }
.ord-schede { align-self: flex-start; }
.ord-etichetta { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inchiostro-3); margin-bottom: -8px; }
.ord-adesso { border-radius: 14px; padding: 14px; background: #FFF6EA; border: 1px solid #F2C79A; display: flex; flex-direction: column; gap: 6px; }
.ord-adesso .ord-ora { font-weight: 600; color: #8F420A; padding: 0; }
.ord-adesso b { font-size: 16px; }
.ord-adesso small { color: var(--inchiostro-3); font-size: 12.5px; }
.ord-perche { font-size: 13px; color: var(--inchiostro-2); font-style: italic; }
.ord-azioni { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.ord-linee, .ord-lista, .ord-giorni { display: flex; flex-direction: column; gap: 8px; }
.ord-linea { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; }
.ord-ora { font-family: var(--mono); font-size: 12.5px; color: var(--inchiostro-3); padding-top: 2px; }
.ord-cosa { min-width: 0; }
.ord-cosa .chip { margin-left: 6px; vertical-align: 1px; height: 20px; }
.ord-cosa small { display: block; color: var(--inchiostro-3); font-size: 12px; margin-top: 2px; }
.ord small.ord-conflitto { color: var(--rosso-testo); }
.ord small.ord-conflitto[hidden] { display: none; }
.ord-oltre { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--rosso-sfondo); color: var(--rosso-testo); font-size: 11px; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
.ord-cosa svg { vertical-align: -2px; margin-right: 4px; color: var(--verde-testo); }
.ord-linea.impegno .ord-cosa, .ord-linea.saltata .ord-cosa { color: var(--inchiostro-3); }
.ord-linea.impegno .ord-cosa::before, .ord-impegni::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #B9B2A4; margin-right: 6px; vertical-align: 1px; }
.ord-linea.fatta .ord-cosa { text-decoration: line-through; color: var(--inchiostro-3); }
.ord-sposta { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--tenue); font-size: 14px; cursor: pointer; }
.ord-sposta .ord-cosa { flex: 1; }
.ord-sposta b { font-weight: 600; white-space: nowrap; }
.ord-avvisi { padding: 10px 12px; border-radius: 12px; background: var(--rosso-sfondo); color: var(--rosso-testo); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.ord-avvisi p { margin: 0; display: flex; gap: 6px; align-items: flex-start; }
.ord-avvisi svg { margin-top: 2px; }
.ord-finito { margin: 0; padding: 14px; border-radius: 14px; background: var(--verde-sfondo); color: var(--verde-testo); font-weight: 600; }
.ord-giorno { border-top: 1px solid var(--linea-2); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ord-giorno > header { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ord-giorno > header b { min-width: 72px; }
.ord-giorno > header small { color: var(--inchiostro-3); white-space: nowrap; }
.ord-carico { flex: 1; height: 6px; border-radius: 99px; background: var(--linea-2); position: relative; overflow: hidden; }
.ord-carico i { position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--serie); border-radius: 99px; }
.ord-carico.pieno i { background: #D9730D; }
.ord-voce { display: grid; grid-template-columns: auto 52px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14px; cursor: pointer; }
/* Le caselle della finestra: piccole (le regole dei moduli fanno le caselle larghe quanto la riga). */
.ord .ord-sposta input, .ord .ord-voce input { width: 18px; height: 18px; flex: none; margin: 0; padding: 0; accent-color: var(--inchiostro); }
.ord .ord-voce input { margin-top: 2px; }
.ord-impegni { margin: 0; font-size: 12px; color: var(--inchiostro-3); }
.carta.attivita { flex-direction: row; gap: 4px; padding: 10px 10px 10px 4px; }
.carta.attivita .spunta { margin: -2px 0 0; width: 40px; height: 40px; }
.carta.attivita .dentro { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; min-width: 0; padding-top: 9px; }
.carta .sposta { display: flex; gap: 2px; }
.carta .sposta button { width: 32px; height: 32px; border: 1px solid var(--linea); border-radius: 8px; background: var(--bianco); color: var(--inchiostro-2); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.carta .sposta button:hover { border-color: var(--linea-forte); color: var(--inchiostro); }
.striscia { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px dashed var(--linea-forte); border-radius: 14px; }
.striscia h2 { font-size: 14px; font-weight: 600; }
.striscia h2 span { font-weight: 400; color: var(--inchiostro-3); }
.striscia .elenco { display: flex; flex-wrap: wrap; gap: 8px; }
.striscia a { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--bianco); border: 1px solid var(--linea); font-size: 13px; display: inline-flex; align-items: center; color: var(--inchiostro); }
.striscia a.pausa { background: var(--giallo-sfondo); border-color: transparent; color: var(--giallo-testo); }
.striscia a.terminato { background: var(--verde-sfondo); border-color: transparent; color: var(--verde-testo); }
.striscia a.fallito { background: var(--rosso-sfondo); border-color: transparent; color: var(--rosso-testo); }

.avviso-riga { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--giallo-sfondo); color: var(--giallo-testo); font-size: 13px; line-height: 1.4; }
.info-riga { padding: 12px 16px; border-radius: 12px; background: var(--blu-sfondo); color: var(--blu-testo); font-size: 14px; line-height: 1.45; margin: 0; }

/* ---------------------------------------------------------- aggiunta rapida */

.rapida { display: flex; align-items: center; gap: 10px; background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; padding: 6px 6px 6px 16px; flex-wrap: wrap; }
.rapida label.campo-testo { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; color: var(--inchiostro-3); }
.rapida input[type="text"] { border: 0; outline: none; background: transparent; height: 44px; flex-grow: 1; min-width: 0; font-size: 15px; color: var(--inchiostro); }
.rapida select { height: 44px; border: 1px solid var(--linea); border-radius: 10px; padding: 0 10px; background: var(--bianco); font-size: 14px; max-width: 220px; }

/* ------------------------------------------------------------- soldi */

.passi { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.passi li { border-top: 1px solid var(--linea-2); }
.passi label { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px; cursor: pointer; }
.passi input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--inchiostro); flex-shrink: 0; }
.passi .n { font-size: 13px; font-weight: 600; color: var(--inchiostro-3); width: 18px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.passi b { font-weight: 600; display: block; }
.passi small { font-size: 13px; line-height: 1.45; color: var(--inchiostro-2); display: block; margin-top: 3px; }
.passi .fatto b { text-decoration: line-through; color: var(--inchiostro-3); }
.fatture { margin: 0; padding: 0; list-style: none; }
.fattura { display: grid; grid-template-columns: 72px 64px minmax(0, 1fr) 110px 170px; gap: 12px; align-items: center; min-height: 56px; padding: 4px 6px; border-top: 1px solid var(--linea-2); }
.fattura.intestazione { min-height: 0; border: 0; font-size: 12px; color: var(--inchiostro-3); }
.fattura .num { font-family: var(--mono); font-size: 13px; color: var(--inchiostro-2); }
.fattura .importo { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.fattura .stato { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fattura button.apri { background: none; border: 0; padding: 0; text-align: left; color: var(--inchiostro); min-width: 0; }
.fattura button.apri:hover b { text-decoration: underline; }
.conti { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 14px; border-radius: 10px; background: var(--tenue); font-size: 14px; }
.conti dt { color: var(--inchiostro-2); }
.conti dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.conti .tot { font-weight: 600; color: var(--inchiostro); }
.conti .testa-conti { grid-column: 1 / -1; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.grafico { display: flex; gap: 12px; }
.asse { display: flex; flex-direction: column; justify-content: space-between; height: 188px; margin-top: -6px; width: 52px; font-size: 11px; color: var(--inchiostro-3); text-align: right; font-variant-numeric: tabular-nums; }
.piano { position: relative; height: 176px; flex-grow: 1; background: linear-gradient(var(--linea-2) 1px, transparent 1px) 0 0 / 100% 44px; border-bottom: 1px solid var(--linea-forte); display: flex; align-items: flex-end; justify-content: space-between; padding: 0 4px; }
.mese { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline-offset: -2px; }
.mese i { display: block; width: min(36px, 70%); height: var(--h); border-radius: 4px 4px 0 0; background: var(--serie); }
.mese:hover i, .mese:focus-visible i { background: #1c5cab; }
.mese .valore { position: absolute; left: 50%; bottom: calc(var(--h) + 6px); transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--inchiostro); color: #fff; opacity: 0; pointer-events: none; }
.mese:hover .valore, .mese:focus-visible .valore, .mese.corrente .valore { opacity: 1; }
.mesi-nomi { display: flex; justify-content: space-between; padding: 6px 4px 0 68px; }
.mesi-nomi span { flex: 1 1 0; text-align: center; font-size: 12px; color: var(--inchiostro-3); }
.scadenza-fiscale { display: flex; align-items: center; gap: 14px; min-height: 48px; border-top: 1px solid var(--linea-2); }
.scadenza-fiscale .giorno { width: 52px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.scadenza-fiscale .giorno b { font-size: 18px; font-weight: 600; }
.scadenza-fiscale .giorno small { font-size: 11px; color: var(--inchiostro-3); text-transform: uppercase; letter-spacing: 0.04em; }

/* ------------------------------------------------------------- moduli */

dialog#finestra { border: 0; border-radius: 18px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 24px 64px rgba(15, 31, 42, 0.28); color: var(--inchiostro); }
dialog#finestra::backdrop { background: rgba(15, 31, 42, 0.45); }
.modulo { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.modulo > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modulo h2 { font-family: var(--titoli); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.modulo .chiudi { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; display: inline-flex; align-items: center; justify-content: center; margin-right: -10px; }
.modulo .chiudi:hover { background: var(--tenue); }
.modulo .campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.modulo .campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; min-width: 0; }
.modulo .campo.largo { grid-column: 1 / -1; }
.modulo input, .modulo select, .modulo textarea { height: 44px; padding: 0 12px; border: 1px solid var(--linea-forte); border-radius: 10px; background: var(--bianco); font-size: 15px; font-weight: 400; width: 100%; }
.modulo textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.modulo input[type="range"] { padding: 0; accent-color: var(--serie); border: 0; }
.modulo .aiuto { font-size: 12px; font-weight: 400; color: var(--inchiostro-3); }
.modulo fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.modulo legend { font-size: 13px; font-weight: 500; padding: 0; margin-bottom: 6px; }
.scegli-persone { display: flex; gap: 8px; flex-wrap: wrap; }
.scorciatoie-persone { margin-left: 10px; font-size: 13px; font-weight: 400; color: var(--inchiostro-3); }
.scegli-persone label { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 8px; border: 1px solid var(--linea-forte); border-radius: 999px; cursor: pointer; font-weight: 500; }
.scegli-persone input { width: 16px; height: 16px; margin: 0; accent-color: var(--inchiostro); }
.scegli-persone label:has(input:checked) { border-color: var(--inchiostro); background: var(--tenue); }
.modulo fieldset[hidden] { display: none; }
/* Poche voci lunghe, una sotto l'altra (per esempio con chi condividere un documento). */
.scegli-opzione { display: flex; flex-direction: column; gap: 8px; }
.scegli-opzione label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--linea-forte); border-radius: 12px; cursor: pointer; font-weight: 500; }
.scegli-opzione input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--inchiostro); }
.scegli-opzione label:has(input:checked) { border-color: var(--inchiostro); background: var(--tenue); }
.modulo > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.modulo > footer .destra { display: flex; gap: 10px; margin-left: auto; }

#avviso { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--inchiostro); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 10; max-width: calc(100vw - 32px); }
#avviso.visibile { opacity: 1; transform: translate(-50%, 0); }
#avviso.errore { background: var(--rosso-testo); }

/* ------------------------------------------------------ scelta persona */

.accesso { display: grid; grid-template-columns: minmax(0, 620px) minmax(380px, 1fr); min-height: 100vh; }
.accesso .scena { position: relative; overflow: hidden; background: var(--notte); color: var(--notte-testo); padding: 56px 64px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.accesso .scena h1 { font-family: var(--titoli); font-size: 76px; line-height: 0.95; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.accesso .scena p { font-size: 20px; line-height: 1.4; max-width: 400px; margin: 0; }
.accesso .scena svg.rete { position: absolute; left: 0; bottom: 0; width: 100%; height: 220px; }
.accesso .scena svg.rete line { stroke: #1B3244; stroke-width: 1.5; }
.accesso .scena svg.rete circle { fill: #1E3A50; }
.accesso .scena svg.rete circle.anello { fill: var(--notte); stroke: #24445C; stroke-width: 3; }
.accesso .lato-destro { display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.accesso .riquadro { width: min(440px, 100%); background: var(--bianco); border: 1px solid var(--linea); border-radius: 18px; padding: 40px; display: flex; flex-direction: column; gap: 18px; }
.accesso .riquadro h2 { font-family: var(--titoli); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.accesso .riquadro p { margin: 0; color: var(--inchiostro-2); font-size: 15px; }
.scelta-persona { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 16px; border: 1px solid var(--linea-forte); border-radius: 14px; background: var(--bianco); font-size: 17px; font-weight: 600; text-align: left; }
.scelta-persona:hover { border-color: var(--inchiostro); background: var(--tenue); }

/* ------------------------------------------------------------ telefono */

@media (max-width: 1180px) {
  .griglia.g3 { grid-template-columns: minmax(0, 1fr); }
  .griglia.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bacheca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .griglia.lr { grid-template-columns: minmax(0, 1fr); }
  .fattura { grid-template-columns: 64px 58px minmax(0, 1fr) 96px; }
  .fattura .stato { grid-column: 3 / -1; }
}

@media (max-width: 860px) {
  body { font-size: 15px; }
  .guscio { grid-template-columns: minmax(0, 1fr); }
  .lato { display: none; }
  .principale { padding: 20px 16px 104px; gap: 18px; }
  .titolo { font-size: 32px; }
  .barra-mobile { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; height: 72px; padding: 4px 4px 12px; background: var(--bianco); border-top: 1px solid var(--linea); z-index: 5; }
  .barra-mobile a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--inchiostro-3); }
  .barra-mobile a[aria-current="page"] { color: var(--inchiostro); font-weight: 600; }
  .barra-mobile a:hover { text-decoration: none; }
  .griglia.g3, .griglia.g2 { grid-template-columns: minmax(0, 1fr); }
  .cifra.larga { grid-column: 1 / -1; }
  .bacheca { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 8px; }
  .bacheca .colonna { flex: 0 0 min(300px, 84vw); scroll-snap-align: start; }
  .passi { grid-template-columns: minmax(0, 1fr); }
  .modulo .campi { grid-template-columns: minmax(0, 1fr); }
  .accesso { grid-template-columns: minmax(0, 1fr); }
  .accesso .scena { padding: 40px 24px 120px; }
  .accesso .scena h1 { font-size: 52px; }
  .accesso .riquadro { padding: 28px 20px; }
  .mesi-nomi { padding-left: 64px; }
}

/* ------------------------------------------------------ pezzi delle viste */

.persona-testa { display: flex; align-items: center; gap: 12px; }
.persona-testa b { font-size: 16px; font-weight: 600; display: block; }
.persona-testa small { font-size: 13px; color: var(--inchiostro-3); display: block; }
.numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.numeri b { font-size: 20px; font-weight: 600; display: block; }
.numeri small { font-size: 12px; color: var(--inchiostro-3); }
.tenue-riga { padding: 10px 12px; border-radius: 10px; background: var(--carta); color: var(--inchiostro-2); font-size: 13px; }
.col-avanz { width: 150px; flex-shrink: 0; }
.col-quando { width: 88px; text-align: right; flex-shrink: 0; }
.cifra .barra { flex-grow: 0; }
.link-testo { color: var(--link); }
.sotto.rosso { color: var(--rosso-testo); display: flex; align-items: center; gap: 6px; }
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.carta .chip, .carta .link-bottone { align-self: flex-start; }
.carta .link-bottone { padding: 6px 0; display: inline-flex; align-items: center; gap: 4px; }
.carta .testa .quando, .testata .quando { font-size: 12px; color: var(--inchiostro-3); }
.carta.attivita .titolo-carta { font-size: 14px; font-weight: 500; }
.di-progetto { font-size: 12px; color: var(--inchiostro-3); }
.piede-carta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.piede-carta .sposta { margin-left: auto; }
.proposta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--inchiostro-3); }
.voti { display: inline-flex; align-items: center; gap: 4px; }
.voti > span:last-child { margin-left: 4px; }
.titolo-riga { background: none; border: 0; padding: 0; text-align: left; font-size: 14px; color: var(--inchiostro); overflow-wrap: anywhere; }
.titolo-riga:hover { text-decoration: underline; }
.riga.fatta .titolo-riga { text-decoration: line-through; color: var(--inchiostro-3); }
.nota-avviso { color: var(--giallo-testo) !important; }
.importo-riga { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.testata-progetto { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.descrizione { margin: 0; font-size: 15px; line-height: 1.5; color: var(--inchiostro-2); text-wrap: pretty; }
.grosso { font-size: 22px; font-weight: 600; }
.prossimo { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.prossimo span { font-size: 12px; color: var(--inchiostro-3); }
.dettagli { margin: 0; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px 12px; font-size: 14px; }
.dettagli dt { color: var(--inchiostro-3); }
.dettagli dd { margin: 0; overflow-wrap: anywhere; }
.mono { font-family: var(--mono); font-size: 13px; }
.nuova-nota { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.nuova-nota textarea { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--linea-forte); border-radius: 10px; resize: vertical; line-height: 1.45; background: var(--bianco); }
.diario { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.nota { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea-2); }
.nota > div { flex-grow: 1; min-width: 0; }
.nota-testa { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.nota-testa span { color: var(--inchiostro-3); font-size: 12px; }
.nota-testa .link-bottone { margin-left: auto; padding: 4px 0; font-size: 12px; }
.nota p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.larghezza-passi { width: 240px; }
.cifra-dentro { display: flex; flex-direction: column; gap: 4px; }
.cifra-dentro span { font-size: 13px; color: var(--inchiostro-2); }
.cifra-dentro b { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; }
.pareggi { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--tenue); font-size: 14px; }
.pareggi .testa-conti { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--inchiostro-2); }
.fattura .apri { display: flex; flex-direction: column; gap: 2px; }
.fattura .apri small { font-size: 12px; color: var(--inchiostro-3); }
.scheda > header > div:not(.avanzamento):not(.segmenti) { display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 860px) {
  .col-avanz { width: 90px; }
  .col-quando, .riga-link .pila { display: none; }
  .larghezza-passi { width: 100%; }
  .scheda > header { flex-wrap: wrap; }
}
.carta .piede > span:last-child { white-space: nowrap; flex-shrink: 0; }
.carta .chip { max-width: 100%; white-space: normal; height: auto; min-height: 24px; padding-top: 3px; padding-bottom: 3px; line-height: 1.3; }
.piede-lato a { color: var(--notte-testo); font-size: 13px; padding: 12px 4px; }
.piede-lato a:hover { color: #fff; }
.principale.fermo { max-width: 560px; margin: 12vh auto 0; align-items: flex-start; }
.principale.fermo p { margin: 0; font-size: 15px; color: var(--inchiostro-2); }

/* ------------------------------------------------------------------ AI */

dialog#finestra.larga { width: min(900px, calc(100vw - 32px)); }
.note-modulo { padding: 12px 14px; border-radius: 10px; background: var(--blu-sfondo); color: var(--blu-testo); font-size: 13px; }
.note-modulo ul { margin: 6px 0 0; padding-left: 18px; }
.modulo.attesa .gira { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.modulo.attesa .gira p { margin: 0; font-size: 15px; color: var(--inchiostro-2); }
.cerchio { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; border: 3px solid var(--serie-chiara); border-top-color: var(--serie); animation: gira 0.9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cerchio { animation-duration: 3s; } }

.idea-ai form { display: flex; flex-direction: column; gap: 10px; }
.idea-ai textarea { width: 100%; min-height: 72px; padding: 10px 12px; border: 1px solid var(--linea-forte); border-radius: 10px; resize: vertical; line-height: 1.45; background: var(--bianco); }
.riga-azioni { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.prospetto-pronto { align-self: flex-start; }

.riordino h3, .prospetto h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--inchiostro-2); margin: 0 0 8px; }
.elenco-ai { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.elenco-ai li b { display: block; }
.elenco-ai li span { font-size: 13px; color: var(--inchiostro-2); }
.tema { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--linea-2); }
.tema span { font-size: 13px; }
.tema small { font-size: 12px; color: var(--inchiostro-3); }
.nuove { display: flex; flex-direction: column; gap: 8px; }
.nuova { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--tenue); }
.nuova b { display: block; }
.nuova span { font-size: 13px; color: var(--inchiostro-2); }
.riordino > div:not(.griglia) { display: flex; flex-direction: column; }

.prospetto { gap: 18px; }
.prospetto > header .sopra { font-size: 12px; color: var(--inchiostro-3); display: block; margin-bottom: 2px; }
.prospetto p { margin: 0 0 6px; line-height: 1.5; }
.prospetto h4 { font-size: 12px; font-weight: 600; color: var(--inchiostro-3); margin: 10px 0 4px; }
.prospetto ul, .prospetto ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.verdetto { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 12px; background: var(--tenue); }
.verdetto p { margin: 0; }
.voto { font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.voto small { font-size: 16px; color: var(--inchiostro-3); }
.sintesi { font-size: 16px; }
.blocchi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.tabella-scorre { overflow-x: auto; }
table.scenari { width: 100%; border-collapse: collapse; font-size: 14px; }
table.scenari th, table.scenari td { text-align: left; padding: 8px 10px 8px 0; border-top: 1px solid var(--linea-2); vertical-align: top; font-variant-numeric: tabular-nums; }
table.scenari thead th { border-top: 0; font-size: 12px; font-weight: 500; color: var(--inchiostro-3); }
table.scenari th[scope="row"] { text-transform: capitalize; }
table.scenari .ipotesi { font-size: 13px; color: var(--inchiostro-2); min-width: 200px; }
.costi { list-style: none; padding: 0 !important; }
.costi li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--linea-2); padding-top: 6px; }
.costi small { color: var(--inchiostro-3); }
.chi { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.chi span { display: inline-flex; align-items: center; gap: 6px; }
.passi-prospetto li { display: list-item; }
.passi-prospetto li > span:first-child { margin-right: 10px; }
.prospetto > footer { border-top: 1px solid var(--linea-2); padding-top: 14px; }

@media (max-width: 860px) {
  .blocchi { grid-template-columns: minmax(0, 1fr); }
  .riordino .griglia.g2 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ passkey */

.bottone.grande { height: 52px; font-size: 16px; width: 100%; }
.link-accesso { display: flex; align-items: center; gap: 8px; min-height: 36px; color: var(--notte-testo); font-size: 13px; padding: 0 !important; }
.link-accesso:hover { color: #fff; }
.link-accesso[aria-current="page"] { color: #fff; font-weight: 600; }
.avviso-passkey { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--blu-sfondo); color: var(--blu-testo); font-size: 14px; line-height: 1.4; }
.avviso-passkey:hover { text-decoration: none; background: #DCE8F6; color: var(--blu-testo); }
.avviso-passkey span { flex-grow: 1; }
.icona-passkey { width: 36px; height: 36px; border-radius: 10px; background: var(--tenue); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--inchiostro-2); }
.riga-invito { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.riga-invito select, .riga-invito input { height: 44px; border: 1px solid var(--linea-forte); border-radius: 10px; padding: 0 12px; background: var(--bianco); font-size: 14px; }
.riga-invito input { flex: 1 1 260px; min-width: 0; font-family: var(--mono); font-size: 12px; }
.riga-invito input.testo-libero { font-family: inherit; font-size: 14px; }
.link-invito { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.allinea-sinistra { align-self: flex-start; }

/* -------------------------------------------------------------- spazi */

.spazi-lato { display: flex; flex-direction: column; gap: 2px; }
.spazi-lato .etichetta-lato { padding: 0 8px 6px; }
.spazi-lato a, .spazi-lato button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--notte-testo); font-size: 14px; text-align: left; }
.spazi-lato a:hover, .spazi-lato button:hover { background: #1A2F3E; color: #fff; text-decoration: none; }
.spazi-lato a[aria-current="true"] { background: var(--notte-2); color: #fff; font-weight: 600; }
.spazi-lato .taglia { flex-grow: 1; min-width: 0; }
.spazi-lato button { color: var(--notte-tenue); font-size: 13px; }
.segno-spazio { width: 20px; height: 20px; border-radius: 6px; background: var(--cs, var(--serie)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.segno-spazio.grande { width: 40px; height: 40px; border-radius: 10px; font-size: 17px; }
/* Un gestionale con un colore: le sue pagine prendono la tinta, con una riga in cima. */
.guscio.con-colore .principale {
  --carta: var(--spazio-tinta);
  /* Le colonne della bacheca e le barre di scelta: la stessa tinta, un po' piu' carica. */
  --carta-2: color-mix(in srgb, var(--spazio-tinta) 90%, var(--spazio));
  --segmenti: color-mix(in srgb, var(--spazio-tinta) 88%, var(--spazio));
  background: var(--spazio-tinta);
  box-shadow: inset 0 4px 0 var(--spazio);
}
.punto-spazio { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cs); flex-shrink: 0; margin-right: 6px; vertical-align: 1px; }
.pillola .punto-spazio { margin-right: 0; }
.pillola[aria-current="true"] .punto-spazio { box-shadow: 0 0 0 2px #fff; }
/* La scelta del colore nel modulo del gestionale: una fila di pallini. */
.scegli-colore { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.scegli-colore label { position: relative; display: inline-flex; cursor: pointer; }
.scegli-colore input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.scegli-colore .campione { width: 32px; height: 32px; border-radius: 50%; background: var(--cs); box-shadow: inset 0 0 0 1px rgba(15, 31, 42, 0.12); }
.scegli-colore .campione.nessuno { background: linear-gradient(135deg, transparent 45%, var(--inchiostro-3) 45% 55%, transparent 55%), var(--bianco); }
.scegli-colore input:checked + .campione { box-shadow: 0 0 0 2px var(--bianco), 0 0 0 4px var(--inchiostro); }
.scegli-colore input:focus-visible + .campione { outline: 2px solid var(--serie); outline-offset: 4px; }
.spazi-mobile { display: none; }
.pillola[aria-current="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
a.pillola { color: var(--inchiostro); }
a.pillola:hover { text-decoration: none; border-color: var(--linea-forte); }
a.pillola[aria-current="true"]:hover { color: #fff; }

.blocco-spazi { display: flex; flex-direction: column; gap: 12px; }
.testata-blocco { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.testata-blocco h2 { font-family: var(--titoli); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.spazio-carta { flex-direction: row; align-items: center; gap: 14px; color: var(--inchiostro); }
.spazio-carta:hover { border-color: var(--linea-forte); text-decoration: none; color: var(--inchiostro); }
.spazio-carta .corpo { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.spazio-carta .corpo b { font-size: 16px; font-weight: 600; }
.spazio-carta .corpo small { font-size: 13px; color: var(--inchiostro-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.membro .corpo b small { font-weight: 400; color: var(--inchiostro-3); }
.membro .comandi { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.riga small { font-weight: 400; }
.pericolo-testo { color: var(--rosso-testo); }
.modulo-invita { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) auto; gap: 10px; align-items: end; }
.modulo-invita .campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; min-width: 0; }
.modulo-invita input, .modulo-invita select { height: 44px; width: 100%; padding: 0 12px; border: 1px solid var(--linea-forte); border-radius: 10px; background: var(--bianco); font-size: 14px; }
.riga-segmenti { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--inchiostro-2); }

.modulo-ingresso { display: flex; flex-direction: column; gap: 14px; }
.modulo-ingresso .campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.modulo-ingresso input { height: 48px; padding: 0 14px; border: 1px solid var(--linea-forte); border-radius: 10px; background: var(--bianco); font-size: 16px; font-weight: 400; }

@media (max-width: 1180px) {
  .modulo-invita { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .spazi-mobile { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
  .spazi-mobile::-webkit-scrollbar { display: none; }
  .spazi-mobile .pillola { flex-shrink: 0; height: 40px; }
  .barra-mobile { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
  .modulo-invita { grid-template-columns: minmax(0, 1fr); }
  .membro { flex-wrap: wrap; }
  .membro .comandi { width: 100%; justify-content: flex-start; padding-left: 52px; }
}

/* ---------------------------------------------------- errori nei moduli */

/* La casella sbagliata si colora di rosso; la spiegazione breve sta in fondo al modulo. */
input:not([type="checkbox"])[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--rosso-testo) !important; box-shadow: 0 0 0 1px var(--rosso-testo); background: #FFF8F7; }
.con-errore { color: var(--rosso-testo); }
.con-errore .aiuto { color: var(--rosso-testo); }
.con-errore .scegli-persone label { border-color: var(--rosso-testo); }
.rapida:has([aria-invalid="true"]) { border-color: var(--rosso-testo); box-shadow: 0 0 0 1px var(--rosso-testo); }
.rapida input[aria-invalid="true"] { box-shadow: none; background: transparent; }
.errore-modulo { flex-basis: 100%; grid-column: 1 / -1; align-self: stretch; padding: 10px 12px; border-radius: 10px; background: var(--rosso-sfondo); color: var(--rosso-testo); font-size: 13px; line-height: 1.45; }
.errore-modulo[hidden] { display: none; }
.errore-modulo ul { margin: 0; padding-left: 18px; }
.errore-modulo ul.una { padding-left: 0; list-style: none; }

/* In fondo alla riga di una spesa: ripeti e apri il sito. */
.azioni-spesa { display: inline-flex; gap: 6px; flex-shrink: 0; }
.icona-riga { padding: 0; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--linea); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--inchiostro-2); background: var(--bianco); }
.icona-riga:hover { border-color: var(--linea-forte); color: var(--link); text-decoration: none; }
.icona-riga.vuoto { visibility: hidden; }
.prossimo .titolo-riga { font-size: 15px; align-self: flex-start; }

/* ------------------------------------------------ carte e righe cliccabili */

/* Tutta la carta (o la riga) apre il suo elemento, non solo il titolo: il titolo
   si allarga con un ::after che copre la carta; caselle, frecce e link restano sopra. */
.carta { position: relative; }
.carta .titolo-carta::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.carta :is(a, button, label, input):not(.titolo-carta) { position: relative; z-index: 1; }
.riga:has(.titolo-riga) { position: relative; }
.riga .titolo-riga::after { content: ""; position: absolute; inset: 0; }
.riga:has(.titolo-riga) :is(a, button, label, input):not(.titolo-riga) { position: relative; z-index: 1; }
.fattura { position: relative; }
.fattura .apri::after { content: ""; position: absolute; inset: 0; }
.fattura .stato :is(a, button) { position: relative; z-index: 1; }

/* ------------------------------------------------------------ telefono */

@media (max-width: 860px) {
  /* Tacca in alto e striscia dei gesti in basso (serve viewport-fit=cover in index.html). */
  .principale { padding: calc(14px + env(safe-area-inset-top)) 16px calc(170px + env(safe-area-inset-bottom)); gap: 16px; }
  .barra-mobile { height: auto; padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); }
  .barra-mobile a { min-height: 50px; }
  .accesso .scena { padding-top: calc(40px + env(safe-area-inset-top)); }
  #avviso { bottom: calc(88px + env(safe-area-inset-bottom)); }

  /* Sotto i 16 px iPhone ingrandisce la pagina quando si tocca una casella. */
  input:not([type="checkbox"]):not([type="range"]), select, textarea { font-size: 16px !important; }

  /* Titoli e numeri piu' compatti: si vede di piu' senza scorrere. */
  .titolo { font-size: 28px; }
  .testata { gap: 12px; }
  .griglia.g4, .griglia.g3 { gap: 12px; }
  .cifra { padding: 14px 16px; gap: 4px; }
  .cifra .valore { font-size: 28px; }
  .scheda { padding: 16px; }

  /* Il pulsante per creare diventa un «+» rotondo in basso a destra, sopra la barra. */
  .bottone.crea { position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 6; width: 56px; height: 56px; padding: 0; border-radius: 18px; box-shadow: 0 8px 24px rgba(15, 31, 42, 0.3); }
  .bottone.crea .etichetta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bottone.crea svg.icona { width: 26px; height: 26px; stroke-width: 2.2; }

  /* Aree da toccare di almeno 40 px. */
  .bottone.piccolo { height: 40px; }
  .segmenti button { height: 40px; }
  .carta .sposta button, .icona-riga { width: 40px; height: 40px; }
  .striscia a { height: 40px; }
  .carta .link-bottone { padding: 12px 0; }
  .riga .link-bottone { padding-left: 8px; padding-right: 8px; min-width: 44px; }
  .membro .comandi .link-bottone { padding: 12px 6px; }

  /* I filtri a segmenti stanno su una riga: se non ci stanno, si scorrono. */
  .segmenti { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .segmenti::-webkit-scrollbar { display: none; }
  .segmenti button { flex: 1 0 auto; white-space: nowrap; }
  .scheda > header .segmenti, .barra-filtri .segmenti { width: 100%; }

  /* Fatture: il cliente per intero e l'importo sulla prima riga, numero e data
     sotto, poi lo stato. */
  .fatture .intestazione { display: none; }
  .fattura { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "apri apri apri importo" "num data . ." "stato stato stato stato"; gap: 2px 10px; padding: 12px 2px; }
  .fattura .apri { grid-area: apri; }
  .fattura .importo { grid-area: importo; }
  .fattura .num { grid-area: num; font-size: 12px; }
  .fattura .data { grid-area: data; font-size: 12px; color: var(--inchiostro-3); }
  .fattura .stato { grid-area: stato; margin-top: 6px; }

  /* Spese: descrizione a tutta larghezza, importo a destra, pulsanti sotto l'importo. */
  .riga.spesa { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "corpo av importo" "corpo azioni azioni"; align-items: center; gap: 6px 10px; padding: 10px 2px; }
  .riga.spesa .corpo { grid-area: corpo; align-self: start; }
  .riga.spesa .av { grid-area: av; }
  .riga.spesa .importo-riga { grid-area: importo; justify-self: end; }
  .riga.spesa .azioni-spesa { grid-area: azioni; justify-self: end; }

  /* Le finestre salgono dal basso a tutta larghezza; titolo e pulsanti restano
     sempre visibili, il contenuto scorre in mezzo. */
  dialog#finestra, dialog#finestra.larga { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .modulo { padding: 0 16px; gap: 14px; }
  .modulo > header { position: sticky; top: 0; z-index: 2; background: var(--bianco); padding: 16px 0 6px; }
  .modulo h2 { font-size: 21px; }
  .modulo > footer { position: sticky; bottom: 0; z-index: 2; background: var(--bianco); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea-2); }
  .modulo > footer .destra { flex: 1; }
  .modulo > footer .destra .bottone { flex: 1; }
  .modulo .campi { gap: 12px; }
  /* Solo la finestra d'attesa (Claude che scrive): «attesa» e' anche il colore di alcune etichette. */
  .modulo.attesa { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* Il titolo riceve il focus a ogni cambio pagina (per i lettori di schermo): non va evidenziato. */
.titolo[tabindex="-1"]:focus { outline: none; }

/* ------------------------------------------------------------ calendario */

/* La griglia del mese: sette colonne da lunedi' a domenica. Tutta la casella
   sceglie il giorno (::after del numero); le voci dentro restano cliccabili. */
.cal-naviga { display: flex; align-items: center; gap: 6px; }
.cal-mese { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--linea-2); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.cal-nome-giorno { background: var(--tenue); padding: 8px 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--inchiostro-3); }
.cal-giorno { position: relative; min-width: 0; min-height: 108px; padding: 6px; background: var(--bianco); display: flex; flex-direction: column; gap: 4px; }
.cal-giorno:hover { background: var(--tenue); }
.cal-giorno.fuori { background: var(--tenue); }
.cal-giorno.fuori .numero { color: var(--inchiostro-3); font-weight: 500; }
.cal-giorno .numero { align-self: flex-start; min-width: 28px; height: 28px; padding: 0 7px; border: 0; border-radius: 999px; background: none; font-size: 13px; font-weight: 600; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.cal-giorno .numero::after { content: ""; position: absolute; inset: 0; }
.cal-giorno.oggi .numero { background: var(--inchiostro); color: #fff; }
.cal-giorno.scelto { box-shadow: inset 0 0 0 2px var(--serie); }
.cal-voci { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-voce { position: relative; z-index: 1; display: block; width: 100%; padding: 2px 6px; border: 0; border-radius: 6px; font-size: 12px; line-height: 1.35; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--blu-sfondo); color: var(--blu-testo); }
.cal-voce:hover { text-decoration: none; filter: brightness(0.96); }
.cal-voce.cal-attivita { background: var(--giallo-sfondo); color: var(--giallo-testo); }
.cal-voce.cal-ritardo { background: var(--rosso-sfondo); color: var(--rosso-testo); }
.cal-voce.cal-fattura { background: var(--verde-sfondo); color: var(--verde-testo); }
.cal-voce.cal-tasse { background: var(--viola-sfondo); color: var(--viola-testo); }
.cal-voci .cal-altre { padding-left: 6px; font-size: 12px; color: var(--inchiostro-3); }
.cal-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--inchiostro-3); }
.cal-legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; background: var(--blu-testo); }
.cal-legenda .cal-attivita::before { background: #C98A06; }
.cal-legenda .cal-ritardo::before { background: var(--rosso-testo); }
.cal-legenda .cal-fattura::before { background: var(--verde-testo); }
.cal-legenda .cal-tasse::before { background: var(--viola-testo); }

/* Le liste del giorno scelto e di cosa arriva: a sinistra l'ora o un segno. */
.cal-giorno-lista { margin: 14px 0 2px; font-size: 13px; font-weight: 600; color: var(--inchiostro-2); }
.cal-giorno-lista:first-child { margin-top: 0; }
.cal-giorno-lista.critico { color: var(--rosso-testo); }
.ora-voce { width: 44px; flex-shrink: 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--inchiostro); }
.segno-voce { display: inline-flex; align-items: center; color: var(--inchiostro-3); }
.riga .corpo small a { color: var(--link); }

@media (max-width: 860px) {
  /* Sul telefono la casella mostra il numero e un puntino per ogni cosa: il
     dettaglio sta sotto, nel giorno scelto. */
  .cal-giorno { min-height: 54px; padding: 4px 2px; align-items: center; gap: 3px; }
  .cal-giorno .numero { align-self: center; min-width: 30px; height: 30px; padding: 0 4px; }
  .cal-voci { flex-direction: row; justify-content: center; gap: 3px; }
  .cal-voce { width: 7px; height: 7px; padding: 0; border-radius: 999px; font-size: 0; pointer-events: none; background: var(--blu-testo); }
  .cal-voce.cal-attivita { background: #C98A06; }
  .cal-voce.cal-ritardo { background: var(--rosso-testo); }
  .cal-voce.cal-fattura { background: var(--verde-testo); }
  .cal-voce.cal-tasse { background: var(--viola-testo); }
  .cal-voci .cal-altre { display: none; }
  .cal-nome-giorno { padding: 6px 0; font-size: 11px; }
  .cal-mese { margin: 0 -6px; }
  #giorno-scelto { scroll-margin-bottom: 110px; }
}

/* Impegni personali («solo io») e la proposta di «Organizza con Claude». */
.cal-voce svg.icona { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; }
.solo-tu { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--inchiostro-2); }
.solo-tu svg.icona { width: 12px; height: 12px; }
.proposte { display: flex; flex-direction: column; border-top: 1px solid var(--linea-2); }
.proposta { display: flex; align-items: flex-start; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--linea-2); cursor: pointer; }
.proposta input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--inchiostro); }
.proposta .corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proposta .corpo b { font-weight: 600; }
.proposta .corpo small { font-size: 12px; color: var(--inchiostro-3); }
.proposta .perche { font-style: italic; }
.proposta.aggiunta { opacity: 0.55; }
.proposta.aggiunta b::after { content: " · aggiunta"; font-weight: 500; color: var(--verde-testo); }

@media (max-width: 860px) {
  .cal-voce svg.icona { display: none; }
}

/* Il calendario incrocia gli altri spazi di chi guarda: quelle voci hanno solo il bordo. */
.cal-voce.cal-altrove { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.cal-legenda .cal-altrove::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--inchiostro-3); }
.cal-piede { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.cal-incrocia { height: 36px; padding: 0 12px; font-size: 13px; }
.cal-incrocia svg.icona { width: 14px; height: 14px; }
.tag-spazio { font-weight: 600; color: var(--inchiostro-2); }

@media (max-width: 860px) {
  .cal-voce.cal-altrove { background: var(--bianco); box-shadow: inset 0 0 0 2px var(--blu-testo); }
  .cal-voce.cal-altrove.cal-attivita { box-shadow: inset 0 0 0 2px #C98A06; }
  .cal-voce.cal-altrove.cal-ritardo { box-shadow: inset 0 0 0 2px var(--rosso-testo); }
  .cal-incrocia { height: 40px; }
}

/* Gli eventi dei calendari collegati (Google...): grigi, solo da guardare. Il clic passa
   alla casella, che sceglie il giorno. */
.cal-voce.cal-esterno { background: var(--grigio-sfondo); color: var(--inchiostro-2); }
.cal-legenda .cal-esterno::before { background: #9AA3A8; }
.riga.esterno .corpo > span { color: var(--inchiostro-2); }

/* Collegare un calendario: nome, indirizzo, pulsante. */
.modulo-collega { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 10px; align-items: end; }
.modulo-collega .campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; min-width: 0; }
.modulo-collega input { height: 44px; padding: 0 12px; border: 1px solid var(--linea-forte); border-radius: 10px; background: var(--bianco); font-size: 14px; font-weight: 400; width: 100%; }
details.come { font-size: 13px; color: var(--inchiostro-2); }
details.come summary { cursor: pointer; color: var(--link); font-weight: 500; padding: 6px 0; }
details.come ol { margin: 6px 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 860px) {
  .cal-voce.cal-esterno { background: #9AA3A8; }
  .modulo-collega { grid-template-columns: minmax(0, 1fr); }
  .modulo-collega .bottone { justify-self: start; }
}

/* «In arrivo» si chiude e si apre dal titolo. */
.piega { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.piega svg.icona { transition: transform 0.15s ease; }
.piega[aria-expanded="true"] svg.icona { transform: rotate(90deg); }
.piega:hover { color: var(--link); }
@media (prefers-reduced-motion: reduce) { .piega svg.icona { transition: none; } }

/* ------------------------------------------------ la lavagna di un progetto */
.schede-progetto { display: flex; gap: 4px; margin: -8px 0 18px; border-bottom: 1px solid var(--linea); }
.schede-progetto a { padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--inchiostro-2); font-weight: 500; font-size: 14px; }
.schede-progetto a:hover { color: var(--inchiostro); text-decoration: none; }
.schede-progetto a[aria-current="page"] { color: var(--inchiostro); border-bottom-color: var(--inchiostro); }

.lavagna { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: 18px; background: var(--bianco); overflow: hidden; }
.lavagna [hidden] { display: none !important; }
.lav-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.lav-gruppi { display: none; align-items: center; gap: 8px; flex-wrap: wrap; }
.lavagna[data-vista="mappa"] .lav-gruppi, .lavagna[data-vista="zone"] .lav-gruppi { display: flex; }
.lav-modello select { height: 34px; padding: 0 10px; border: 1px solid var(--linea-forte); border-radius: 10px; background: var(--bianco); font-size: 13px; }
.lav-gruppi .bottone svg.icona { width: 15px; height: 15px; }
.lav-presenti { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.lav-presenti small { font-size: 12px; color: var(--inchiostro-3); margin-left: 4px; }
.lav-stato { font-size: 12px; color: var(--inchiostro-3); white-space: nowrap; }
.lav-stato[data-stato="in linea"]::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--verde-testo); vertical-align: 1px; }
.lav-stato[data-stato="offline"] { color: var(--giallo-testo); }
.lav-stato[data-stato="eliminata"], .lav-stato[data-stato="negata"] { color: var(--rosso-testo); }

.lav-corpo { display: flex; min-width: 0; }
.lav-strumenti { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-right: 1px solid var(--linea); }
.lav-strumenti button { width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--inchiostro-2); display: flex; align-items: center; justify-content: center; }
.lav-strumenti button:hover { background: var(--tenue); }
.lav-strumenti button[aria-pressed="true"] { background: var(--blu-sfondo); color: var(--blu-testo); }
.lavagna[data-vista="mappa"] .lav-strumenti { display: none; }
.lavagna[data-vista="zone"] [data-strumento="freccia"], .lavagna[data-vista="zone"] [data-strumento="penna"] { display: none; }

.lav-area { --zoom: 1; --gx: 0px; --gy: 0px; position: relative; flex: 1; min-width: 0; height: min(72vh, 760px); min-height: 420px; overflow: hidden; touch-action: none; outline: none; user-select: none; -webkit-user-select: none;
  background-color: var(--tenue); background-image: radial-gradient(circle, rgba(15, 31, 42, 0.13) 1px, transparent 1.3px); background-size: calc(24px * var(--zoom)) calc(24px * var(--zoom)); background-position: var(--gx) var(--gy); }
.lav-area:focus-visible { box-shadow: inset 0 0 0 2px var(--link); }
.lavagna[data-attrezzo="nota"] .lav-area, .lavagna[data-attrezzo="testo"] .lav-area, .lavagna[data-attrezzo="forma"] .lav-area, .lavagna[data-attrezzo="freccia"] .lav-area, .lavagna[data-attrezzo="penna"] .lav-area { cursor: crosshair; }
.lav-mondo { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.lav-sotto, .lav-sopra { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.lav-elementi { position: absolute; left: 0; top: 0; }

.lav-el { position: absolute; left: 0; top: 0; box-sizing: border-box; }
.lav-el.scelto { outline: 2px solid var(--link); outline-offset: 3px; }
.lav-el.in-modifica { visibility: hidden; }
.lav-parole { white-space: pre-wrap; overflow-wrap: anywhere; }
.lav-nota { padding: 12px 14px 24px; border-radius: 4px; font-size: 15px; line-height: 1.35; overflow: hidden; cursor: grab; box-shadow: 0 1px 2px rgba(15, 31, 42, 0.12), 0 8px 16px -8px rgba(15, 31, 42, 0.3); }
/* Il post-it cresce con il testo (min-height da lavagna.js): niente da tagliare. */
.lav-autore { position: absolute; left: 14px; bottom: 6px; font-size: 11px; opacity: 0.75; }
.lav-nota[data-colore="giallo"], .lav-scrivi[data-colore="giallo"] { background: #FFF1B8; color: #5C4600; }
.lav-nota[data-colore="verde"], .lav-scrivi[data-colore="verde"] { background: #D8F1DE; color: #1E5B36; }
.lav-nota[data-colore="rosa"], .lav-scrivi[data-colore="rosa"] { background: #FCE1EA; color: #8A2447; }
.lav-nota[data-colore="viola"], .lav-scrivi[data-colore="viola"] { background: #EAE2FB; color: #4B3290; }
.lav-nota[data-colore="azzurro"], .lav-scrivi[data-colore="azzurro"] { background: #DCEEFB; color: #1A4F80; }
.lav-nota[data-colore="arancio"], .lav-scrivi[data-colore="arancio"] { background: #FFE3CC; color: #8A3D0B; }
.lav-nota[data-colore="grigio"], .lav-scrivi[data-colore="grigio"] { background: #ECEAE4; color: #4A4945; }
.lav-testo { padding: 4px 6px; border-radius: 6px; font-size: 16px; line-height: 1.4; color: var(--inchiostro); cursor: grab; }
.lav-testo[data-dimensione="grande"], .lav-scrivi[data-dimensione="grande"] { font-size: 22px; font-weight: 600; }
.lav-testo[data-dimensione="titolo"], .lav-scrivi[data-dimensione="titolo"] { font-family: var(--titoli); font-size: 32px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.lav-forma { display: flex; align-items: center; justify-content: center; padding: 10px 14px; text-align: center; cursor: grab; }
.lav-sagoma { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lav-sagoma rect, .lav-sagoma ellipse, .lav-sagoma path { fill: var(--bianco); stroke: var(--inchiostro-2); stroke-width: 1.5; }
.lav-forma .lav-parole { position: relative; font-size: 14px; line-height: 1.3; }
.lav-attivita { display: flex; align-items: flex-start; gap: 6px; padding: 10px 12px 10px 8px; background: var(--bianco); border: 1px solid #9DB8DC; border-radius: 10px; cursor: grab; box-shadow: 0 6px 14px -8px rgba(15, 31, 42, 0.3); }
.lav-attivita .spunta { margin: -12px -6px -12px -8px; }
.lav-corpo-attivita { min-width: 0; font-size: 14px; line-height: 1.35; }
.lav-corpo-attivita small { display: block; margin-top: 3px; font-size: 12px; color: var(--inchiostro-3); }
.lav-attivita.fatta .lav-parole { text-decoration: line-through; color: var(--inchiostro-3); }
.lav-attivita.persa { border-style: dashed; color: var(--inchiostro-3); }
.lav-maniglia { position: absolute; right: -9px; bottom: -9px; width: 14px; height: 14px; background: var(--bianco); border: 2px solid var(--link); border-radius: 4px; cursor: nwse-resize; }
.lav-maniglia[data-tipo="lato"] { top: calc(50% - 7px); bottom: auto; cursor: ew-resize; }
.lav-scrivi { position: absolute; left: 0; top: 0; box-sizing: border-box; padding: 12px 14px; border: 2px solid var(--link); border-radius: 4px; resize: none; outline: none; font: inherit; font-size: 15px; line-height: 1.35; background: var(--bianco); color: var(--inchiostro); }
.lav-scrivi-testo { padding: 4px 6px; font-size: 16px; line-height: 1.4; }
.lav-scrivi-forma { text-align: center; font-size: 14px; }

.lav-freccia { fill: none; stroke: var(--inchiostro-2); stroke-width: 2; }
.lav-freccia.tratteggio { stroke-dasharray: 7 6; }
#lav-punta path { fill: var(--inchiostro-2); }
.lav-tratto { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lav-tratto.colore-nero { stroke: #1F1E1D; }
.lav-tratto.colore-rosso { stroke: #C2362F; }
.lav-tratto.colore-blu { stroke: #1F5FAE; }
.lav-tratto.colore-verde { stroke: #1E7A4C; }
.lav-freccia.scelto, .lav-tratto.scelto { stroke: var(--link); }
.lav-presa { fill: none; stroke: transparent; stroke-width: 16px; pointer-events: stroke; cursor: pointer; }
.lav-bozza-forma { fill: rgba(31, 95, 174, 0.06); stroke: var(--link); stroke-dasharray: 5 4; }

.lav-zona rect { fill: var(--bianco); stroke: rgba(15, 31, 42, 0.2); stroke-width: 1.5; stroke-dasharray: 7 6; }
.lav-zona text { font-family: var(--titoli); font-size: 19px; font-weight: 700; fill: var(--inchiostro-2); }
.lav-zona.colore-giallo rect { fill: #FFFCEB; }
.lav-zona.colore-verde rect { fill: #F2FAF4; }
.lav-zona.colore-rosa rect { fill: #FEF4F7; }
.lav-zona.colore-viola rect { fill: #F7F3FD; }
.lav-zona.colore-azzurro rect { fill: #F1F8FE; }
.lav-zona.colore-arancio rect { fill: #FFF6EE; }

.lav-centro, .lav-ramo-nodo, .lav-foglia { position: absolute; left: 0; top: 0; box-sizing: border-box; }
.lav-centro { display: flex; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid #9DB8DC; border-radius: 999px; background: var(--blu-sfondo); color: var(--blu-testo); font-family: var(--titoli); font-size: 19px; font-weight: 700; text-align: center; }
.lav-ramo-nodo { display: flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; background: #ECEAE4; color: #4A4945; }
.lav-foglia { padding: 5px 10px; border: 1px solid var(--linea-forte); border-radius: 8px; background: var(--bianco); font-size: 13px; line-height: 1.35; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: grab; }
.lav-foglia.e-attivita { border-color: #9DB8DC; }
/* Nelle zone un elemento sta al massimo in 400px di altezza, come lo dispone la pagina. */
.lavagna[data-vista="zone"] .lav-testo, .lavagna[data-vista="zone"] .lav-attivita, .lavagna[data-vista="zone"] .lav-nota { max-height: 400px; overflow: hidden; }
.lav-ramo { fill: none; stroke-width: 2; stroke: #B4B2A9; }
.colore-giallo.lav-ramo-nodo, .lav-proposta b.colore-giallo { background: #FFF1B8; color: #5C4600; }
.colore-verde.lav-ramo-nodo, .lav-proposta b.colore-verde { background: #D8F1DE; color: #1E5B36; }
.colore-rosa.lav-ramo-nodo, .lav-proposta b.colore-rosa { background: #FCE1EA; color: #8A2447; }
.colore-viola.lav-ramo-nodo, .lav-proposta b.colore-viola { background: #EAE2FB; color: #4B3290; }
.colore-azzurro.lav-ramo-nodo, .lav-proposta b.colore-azzurro { background: #DCEEFB; color: #1A4F80; }
.colore-arancio.lav-ramo-nodo, .lav-proposta b.colore-arancio { background: #FFE3CC; color: #8A3D0B; }
.lav-ramo.colore-giallo { stroke: #D9A400; }
.lav-ramo.colore-verde { stroke: #3C9A62; }
.lav-ramo.colore-rosa { stroke: #D4537E; }
.lav-ramo.colore-viola { stroke: #7F66D0; }
.lav-ramo.colore-azzurro { stroke: #3D8BD1; }
.lav-ramo.colore-arancio { stroke: #D9772B; }

.lav-azioni { position: absolute; left: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--bianco); border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 10px 28px rgba(15, 31, 42, 0.16); white-space: nowrap; }
.lav-azioni button { height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--inchiostro-2); }
.lav-azioni button:hover { background: var(--tenue); color: var(--inchiostro); }
.lav-azioni svg.icona { width: 16px; height: 16px; }
.lav-azioni select { height: 32px; padding: 0 8px; border: 1px solid var(--linea); border-radius: 8px; background: var(--bianco); font-size: 13px; }
.lav-colori { display: inline-flex; gap: 3px; padding: 0 4px; }
.lav-azioni .lav-colore { width: 22px; height: 22px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid var(--bianco); box-shadow: 0 0 0 1px var(--linea-forte); }
.lav-azioni .lav-colore.attivo { box-shadow: 0 0 0 2px var(--inchiostro); }
.lav-colore.colore-giallo { --c: #FFE27A; }
.lav-colore.colore-verde { --c: #A9E0B8; }
.lav-colore.colore-rosa { --c: #F7B6CB; }
.lav-colore.colore-viola { --c: #CDBDF4; }
.lav-colore.colore-azzurro { --c: #A9D2F4; }
.lav-colore.colore-arancio { --c: #FFC593; }
.lav-colore.colore-grigio { --c: #D3D0C7; }
.lav-colore.tratto-nero { --c: #1F1E1D; }
.lav-colore.tratto-rosso { --c: #C2362F; }
.lav-colore.tratto-blu { --c: #1F5FAE; }
.lav-colore.tratto-verde { --c: #1E7A4C; }

.lav-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; background: var(--bianco); border: 1px solid var(--linea); border-radius: 10px; }
.lav-zoom button { height: 34px; min-width: 34px; padding: 0 8px; border: 0; background: none; color: var(--inchiostro-2); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.lav-zoom svg.icona { width: 14px; height: 14px; }
.lav-zoom .lav-adatta { border-left: 1px solid var(--linea); }
.lav-scelta-attivita { position: absolute; left: 12px; top: 12px; z-index: 6; width: min(320px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; padding: 12px; background: var(--bianco); border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 10px 28px rgba(15, 31, 42, 0.16); font-size: 14px; }
.lav-lista { display: flex; flex-direction: column; margin: 8px 0; }
.lav-lista button { padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 14px; }
.lav-lista button:hover { background: var(--tenue); }
.lav-cursori { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lav-cursore { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; }
.lav-cursore svg { width: 16px; height: 16px; fill: var(--c); stroke: #fff; stroke-width: 1; }
.lav-cursore span { margin: 12px 0 0 -2px; padding: 1px 7px; border-radius: 6px; background: var(--c); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
.lav-vuota { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 340px; margin: 0; text-align: center; font-size: 14px; color: var(--inchiostro-3); pointer-events: none; }
.lav-riga-gruppo { display: grid; grid-template-columns: minmax(0, 1fr) 130px 44px; gap: 8px; margin-bottom: 8px; }
.lav-proposta { display: flex; flex-direction: column; gap: 14px; max-height: 50vh; overflow: auto; }
.lav-proposta b { display: inline-block; padding: 3px 12px; border-radius: 999px; background: #ECEAE4; font-size: 14px; }
.lav-proposta ul { margin: 6px 0 0; padding-left: 20px; font-size: 14px; color: var(--inchiostro-2); }
/* Le copie di sicurezza della lavagna (pulsante «Copie», solo per gli admin). */
.lav-copie { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow: auto; border-top: 1px solid var(--linea); }
.lav-copie li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--linea); font-size: 14px; }
.lav-copie li span::first-letter { text-transform: uppercase; }
.lav-indietro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lav-indietro input { height: 34px; padding: 0 10px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; }
/* Le immagini: il riquadro e' sempre in proporzione (lavagna.js); se il file non si vede resta il riquadro. */
.lav-immagine { border-radius: 4px; background: var(--bianco); cursor: grab; box-shadow: 0 1px 2px rgba(15, 31, 42, 0.12), 0 8px 16px -8px rgba(15, 31, 42, 0.3); }
.lav-immagine img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; pointer-events: none; -webkit-user-drag: none; }
.lav-immagine-persa { display: none; }
.lav-immagine.non-disponibile { display: flex; align-items: center; justify-content: center; padding: 8px; border: 1px dashed var(--linea-forte); box-shadow: none; }
.lav-immagine.non-disponibile img { display: none; }
.lav-immagine.non-disponibile .lav-immagine-persa { display: block; font-size: 13px; color: var(--inchiostro-3); text-align: center; }
.lav-carico { position: absolute; left: 0; top: 0; width: 220px; height: 140px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--link); border-radius: 4px; background: var(--bianco); font-size: 14px; color: var(--inchiostro-2); pointer-events: none; }
.lav-area.con-file { outline: 3px dashed var(--link); outline-offset: -8px; }

@media (max-width: 860px) {
  .lav-corpo { flex-direction: column; }
  .lav-strumenti { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--linea); overflow-x: auto; }
  .lav-area { height: 64vh; min-height: 360px; }
  .lav-presenti small { display: none; }
  .lav-stato { font-size: 11px; }
}

/* ------------------------------------------------------------ File */
/* La pagina File (versione B): elenco con il dettaglio a lato; la cassaforte velata finche'
   non la si apre. Anche il riquadro dei caricamenti e gli allegati di progetti e attivita'. */
.f-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.f-schede button small { margin-left: 2px; color: var(--inchiostro-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.f-schede button .icona { width: 15px; height: 15px; margin-right: 4px; vertical-align: -3px; }
.f-cerca { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--linea-forte); border-radius: 10px; background: var(--bianco); color: var(--inchiostro-3); flex: 1 1 200px; max-width: 320px; }
.f-cerca input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--inchiostro); }
.f-cerca:focus-within { outline: 2px solid var(--serie); outline-offset: 1px; }
.f-trascina { border: 1.5px dashed #B9C6D4; border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; color: var(--inchiostro-2); background: rgba(255, 255, 255, 0.55); margin-bottom: 16px; font-size: 14px; }
.f-trascina > .icona { color: var(--serie); flex: none; }
body.trascina-file [data-zona-file] { border-color: var(--serie); background: #EAF2FC; box-shadow: 0 0 0 4px rgba(42, 120, 214, 0.12); }

.b-due { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.b-elenco { background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; container-type: inline-size; }
.b-riga { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 32px 84px 64px; gap: 12px; align-items: center; width: 100%; padding: 9px 14px; border: 0; border-top: 1px solid var(--linea); background: none; font: inherit; font-size: 14px; text-align: left; color: inherit; cursor: pointer; }
.b-riga:first-child { border-top: 0; }
.b-riga[hidden] { display: none; }
.b-riga:hover { background: var(--tenue); }
.b-riga.scelta { background: #EAF2FC; }
.b-riga.testa { cursor: default; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--inchiostro-3); padding-top: 10px; padding-bottom: 8px; background: var(--tenue); }
.b-nome { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.b-nome b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-nome small, .b-quando, .b-peso { color: var(--inchiostro-3); font-size: 12.5px; }
.b-nome small .icona { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.b-dove { min-width: 0; }
.b-dove .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Le colonne seguono la larghezza dell'elenco (non della finestra): con poco posto vanno via
   prima «Quando» e «Peso», poi progetto e persona (il peso resta sotto il nome). */
@container (max-width: 620px) {
  .b-riga { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 130px) 32px; }
  .b-riga .b-quando, .b-riga .b-peso { display: none; }
}
@container (max-width: 440px) {
  .b-riga { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .b-riga .b-dove, .b-riga .b-chi, .b-riga .b-peso { display: none; }
  .b-riga .b-quando { display: block; }
  .b-riga.testa { display: none; }
}
.f-mini { width: 40px; height: 30px; border-radius: 6px; overflow: hidden; display: block; background: var(--carta-2); }
.f-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-mini-tipo { width: 40px; height: 30px; border-radius: 6px; display: grid; place-items: center; background: var(--s); color: var(--c); font: 700 9px var(--mono); letter-spacing: 0.06em; }

.b-pannello { background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; position: sticky; top: 16px; }
.b-pannello.in-finestra { position: static; border: 0; border-radius: 0; }
.b-pannello.in-finestra .b-info h3 { display: none; }
.b-pannello > .vuoto { padding: 24px 16px; margin: 0; }
.b-vista { aspect-ratio: 4 / 3; background: var(--carta-2); display: grid; place-items: center; overflow: hidden; }
.b-vista img { width: 100%; height: 100%; object-fit: contain; display: block; }
.b-vista-tipo { background: var(--s); color: var(--c); gap: 6px; align-content: center; }
.b-vista-tipo .icona { width: 46px; height: 46px; stroke-width: 1.3; }
.b-vista-tipo b { font: 700 13px var(--mono); letter-spacing: 0.08em; }
.b-info { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.b-info h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.b-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; color: var(--inchiostro-2); }
.b-info dt { color: var(--inchiostro-3); }
.b-info dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.b-azioni { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 16px; }
.b-azioni .bottone { text-decoration: none; }

/* La cassaforte: chiusa e velata, aperta con il conto alla rovescia. */
.f-velo { position: relative; min-height: 320px; }
.f-velo .b-elenco { filter: blur(4px); opacity: 0.55; }
.b-riga.finta { cursor: default; grid-template-columns: 40px minmax(0, 1fr) 120px; }
.b-riga.finta span { height: 12px; border-radius: 6px; background: var(--carta-2); }
.b-riga.finta span:first-child { height: 30px; }
.f-sopra { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; }
.f-cassaforte-scheda { max-width: 440px; text-align: center; padding: 28px; display: flex; flex-direction: column; gap: 10px; align-items: center; box-shadow: 0 18px 50px -20px rgba(15, 31, 42, 0.45); }
.f-cassaforte-scheda h2 { margin: 0; }
.f-cassaforte-scheda p { margin: 0; color: var(--inchiostro-2); line-height: 1.5; }
.f-cassaforte-scheda .icona.grande { width: 40px; height: 40px; }
.f-aperta { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--verde-sfondo); color: var(--verde-testo); margin-bottom: 14px; font-size: 14px; font-weight: 500; }
.f-aperta .bottone { margin-left: auto; }
.f-scade { font-variant-numeric: tabular-nums; }

/* I caricamenti in corso: in basso, su ogni pagina. */
#caricamenti { position: fixed; right: 16px; bottom: 16px; z-index: 30; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
#caricamenti:empty { display: none; }
.caricamento { pointer-events: auto; background: var(--bianco); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 30px -14px rgba(15, 31, 42, 0.4); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; font-size: 13px; }
.caricamento .nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caricamento small { color: var(--inchiostro-3); text-align: right; }
.caricamento .barra { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--linea-2); overflow: hidden; }
.caricamento .barra i { display: block; height: 100%; width: 0; background: var(--serie); border-radius: 99px; transition: width 0.15s; }
.caricamento.fatto .barra i { width: 100%; background: var(--verde-testo); }
.caricamento.sbagliato { border-color: #F0C4BE; }
.caricamento.sbagliato small { color: var(--rosso-testo); grid-column: 1 / -1; text-align: left; }

/* Gli allegati di progetti e attivita'. */
.allegati { display: flex; flex-direction: column; gap: 6px; }
.allegato { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 1px solid var(--linea); border-radius: 10px; background: var(--bianco); font: inherit; font-size: 14px; text-align: left; color: inherit; cursor: pointer; }
.allegato:hover { background: var(--tenue); }
.allegato > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.allegato b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.allegato small { color: var(--inchiostro-3); font-size: 12px; }
.allegati-modulo { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.allegati-modulo > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.allegati-modulo h3 { margin: 0; font-size: 14px; }
/* L'avanzamento degli allegati caricati da dentro la finestra dell'attivita'. */
.caricamenti-modulo { display: flex; flex-direction: column; gap: 6px; }
.caricamenti-modulo:empty { display: none; }
.caricamenti-modulo .caricamento { box-shadow: none; }
.graffetta { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; color: var(--inchiostro-3); font-size: 12px; font-weight: 600; vertical-align: 1px; }
.graffetta .icona { width: 13px; height: 13px; }

/* «Altro», sul telefono: le sezioni che non stanno nella barra in basso. */
.menu-altro { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 8px; }
.menu-altro a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border-radius: 12px; color: var(--inchiostro); font-weight: 500; text-decoration: none; }
.menu-altro a:hover, .menu-altro a[aria-current="page"] { background: var(--tenue); }

@media (max-width: 860px) {
  .barra-mobile button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--inchiostro-3); background: none; border: 0; min-height: 50px; font-family: inherit; }
  .barra-mobile button[aria-current="page"] { color: var(--inchiostro); font-weight: 600; }
  .b-due { grid-template-columns: 1fr; }
  .b-due > .b-pannello { display: none; }
  .f-cerca { max-width: none; }
  /* Le quattro schede stanno in una riga anche sul telefono: senza i numeri, piu' strette. */
  .f-schede button { padding: 0 9px; }
  .f-schede button small { display: none; }
  /* Sopra il «+» rotondo (in basso a 84px, alto 56px) e sopra l'avviso: non copre nessuno dei due. */
  #caricamenti { left: 16px; right: 16px; bottom: calc(152px + env(safe-area-inset-bottom)); width: auto; }
  .f-velo { min-height: 360px; }
}

/* L'area in alto nel pannello del file: con un'anteprima e' un pulsante che la apre. */
button.b-vista { width: 100%; padding: 0; border: 0; border-radius: 0; font: inherit; cursor: zoom-in; }
button.b-vista:focus-visible { outline-offset: -3px; }

/* ------------------------------------------------------------ Anteprima */
/* Il visore a tutto schermo (anche sopra la finestra): fondo scuro, intestazione fissa, il
   contenuto che scorre. Tiene conto delle aree sicure del telefono (tacca, barra in basso). */
dialog#anteprima { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #12181E; color: #E8EDF2; overflow: hidden; }
dialog#anteprima[open] { display: flex; flex-direction: column; }
dialog#anteprima::backdrop { background: rgba(8, 12, 16, 0.6); }
.ap-testa { flex: none; display: flex; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: #1A2229; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ap-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ap-nome h2 { margin: 0; font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-nome small { font-size: 12px; color: rgba(232, 237, 242, 0.65); }
.ap-comandi { flex: none; display: flex; align-items: center; gap: 6px; }
.ap-tasto { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #E8EDF2; display: inline-flex; align-items: center; justify-content: center; }
.ap-tasto:hover { background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; }
.ap-tasto svg.icona { width: 20px; height: 20px; }
.ap-scarica { height: 40px; }
.ap-blu { background: #2A78D6; }
.ap-blu:hover { background: #1F66BD; }
.ap-corpo { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
.ap-corpo.con-barra { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.ap-attesa { margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(232, 237, 242, 0.75); }
.ap-messaggio { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.ap-messaggio p { margin: 0; max-width: 420px; font-size: 15px; line-height: 1.5; color: rgba(232, 237, 242, 0.9); }
.ap-nota { flex: none; margin: 0; padding: 8px 16px; font-size: 12.5px; color: rgba(232, 237, 242, 0.7); text-align: center; }
.ap-nota[hidden] { display: none; }

/* Foto: adattata allo schermo (mai ingrandita oltre la sua misura); un tocco la mostra a
   grandezza vera, e si scorre. */
.ap-foto { width: 100%; height: 100%; display: flex; }
.ap-foto > button { flex: 1; min-width: 0; min-height: 0; display: flex; padding: 12px; border: 0; background: none; cursor: zoom-in; }
.ap-foto img { width: 100%; height: 100%; object-fit: scale-down; display: block; }
.ap-foto.reale { width: max-content; height: auto; min-width: 100%; min-height: 100%; }
.ap-foto.reale > button { cursor: zoom-out; }
.ap-foto.reale img { width: auto; height: auto; max-width: none; margin: auto; }

/* PDF: le pagine una sotto l'altra, centrate; con lo zoom si scorre anche di lato. */
.ap-pdf { width: max-content; min-width: 100%; padding: 16px; }
.ap-pagina { margin: 0 auto 12px; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; }
.ap-pagina canvas { display: block; width: 100%; height: 100%; }
.ap-pagina-persa { margin: 0; padding: 16px; color: #5B6770; font-size: 13px; text-align: center; }
.ap-barra { position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: rgba(26, 34, 41, 0.94); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); white-space: nowrap; }
.ap-adatta { height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: #E8EDF2; font-size: 13px; font-weight: 600; }
.ap-adatta:hover { background: rgba(255, 255, 255, 0.1); }
.ap-pagine { padding: 0 10px 0 6px; font-size: 13px; color: rgba(232, 237, 242, 0.8); font-variant-numeric: tabular-nums; }

/* Word: il documento in un riquadro isolato, con la nota sotto. */
.ap-word { height: 100%; display: flex; flex-direction: column; }
.ap-word iframe { flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }

/* Fogli di calcolo: le schede dei fogli e la tabella, che scorre in tutte e due le direzioni. */
.ap-foglio { height: 100%; display: flex; flex-direction: column; }
.ap-schede { flex: none; display: flex; gap: 4px; padding: 8px 12px 0; overflow-x: auto; }
.ap-schede[hidden] { display: none; }
.ap-schede button { flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: 9px 9px 0 0; background: rgba(255, 255, 255, 0.08); color: rgba(232, 237, 242, 0.8); font-size: 13px; font-weight: 500; }
.ap-schede button[aria-selected="true"] { background: #fff; color: #0F1F2A; font-weight: 600; }
.ap-tabella { flex: 1; min-height: 0; overflow: auto; background: #fff; color: #0F1F2A; }
.ap-tabella table { border-collapse: collapse; font-size: 13px; }
.ap-tabella th, .ap-tabella td { border: 1px solid #DDE3E8; padding: 4px 8px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ap-tabella thead th { position: sticky; top: 0; z-index: 1; background: #EEF2F5; font-weight: 600; color: #5B6770; text-align: center; }
.ap-tabella tbody th { position: sticky; left: 0; background: #EEF2F5; font-weight: 500; color: #5B6770; text-align: right; }
.ap-vuoto { margin: 0; padding: 24px; color: #5B6770; }

/* Testo: va a capo, su un foglio chiaro di larghezza comoda. */
.ap-testo { padding: 16px; }
.ap-testo pre { margin: 0 auto; max-width: 900px; padding: 20px 24px; background: #fff; color: #1F2933; border-radius: 6px; font: 13.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Audio e video: al centro. */
.ap-media { height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ap-media video { max-width: 100%; max-height: 100%; background: #000; }
.ap-media audio { width: min(560px, 100%); }

@media (max-width: 560px) {
  .ap-testa { gap: 8px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .ap-scarica { width: 40px; padding: 0; }
  .ap-etichetta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ap-pdf { padding: 8px; }
}

/* «Sposta il progetto»: il riepilogo di cosa si sposta e chi non lo vedra' piu'. */
.sp-riepilogo { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--inchiostro-2); }
.sp-riepilogo:empty { display: none; }
.sp-riepilogo p { margin: 0; }
.sp-persone { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-persone li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; border: 1px solid var(--linea); border-radius: 10px; }
.sp-persone b { flex: 1; min-width: 0; font-weight: 600; color: var(--inchiostro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-persone label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.sp-persone input { width: 16px; height: 16px; margin: 0; accent-color: var(--inchiostro); }