/*
 * PORTALE UNICO PRATICHE FOTOVOLTAICO - stile.css
 * Grafica del portale. Colori e carattere sono descritti nel file master, cap. 5.
 */
:root {
  --notte: #06132b;       /* fondo del vetro */
  --cella: #0d2f66;       /* blu della cella fotovoltaica */
  --vetro: #1a56b0;       /* blu chiaro, riflessi e azioni */
  --sole: #ffb62e;        /* luce: avanzamento e selezione */
  --sole-scuro: #f09a12;
  --carta: #f4f7fb;       /* fondo dei moduli da compilare */
  --bianco: #ffffff;
  --testo: #0b1a33;
  --testo-2: #56667f;
  --linea: #cbd5e3;
  --errore: #b3261e;
  --curva: cubic-bezier(.22, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--testo);
  background: var(--carta);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sole); outline-offset: 3px; }

/* ---------- Struttura ---------- */
.pagina { min-height: 100vh; display: flex; }

/* ---------- Lato vetro: il modulo fotovoltaico sotto il sole ---------- */
.hero {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--bianco);
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  background: linear-gradient(155deg, var(--notte) 0%, #0a2654 52%, var(--vetro) 135%);
}
/* Il sole che sorge nell'angolo: un disco netto e il suo bagliore sul vetro */
.sole, .bagliore {
  position: absolute;
  top: 0;
  right: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  animation: alba 2.2s var(--curva) .1s both;
}
.sole {
  width: 34%;
  translate: 38% -46%;
  background: radial-gradient(circle at 32% 68%, #fff3d1 0%, #ffcd63 38%, #ff9f0f 100%);
  box-shadow: 0 0 48px 14px rgba(255, 176, 46, .75), 0 0 150px 60px rgba(255, 150, 40, .30);
}
.bagliore {                /* il cielo si schiarisce attorno al sole */
  width: 170%;
  translate: 46% -50%;
  background: radial-gradient(closest-side, rgba(150, 190, 255, .55) 0%, rgba(90, 150, 255, .26) 40%, transparent 100%);
  mix-blend-mode: screen;
}
.hero::before {            /* celle e busbar */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 100% 104px, 104px 100%, 26px 100%;
  -webkit-mask-image: linear-gradient(205deg, #000 8%, transparent 78%);
  mask-image: linear-gradient(205deg, #000 8%, transparent 78%);
}
.hero::after {             /* riflesso che attraversa il vetro all'apertura */
  content: "";
  position: absolute;
  inset: -20% -60%;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 44%, rgba(255, 255, 255, .16) 50%, transparent 56%);
  transform: translateX(-70%);
  animation: riflesso 2.6s var(--curva) .25s both;
}
.hero > :not(.sole):not(.bagliore) { position: relative; z-index: 1; }

.marchio { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 550; font-size: .98rem; }
.marchio svg { width: 24px; height: 24px; flex: none; }

.presentazione { max-width: 42rem; overflow: hidden; }
.diapositive { display: grid; }
.diapositiva { grid-area: 1 / 1; }
/* Le pagine non in vista restano nella griglia, invisibili: così l'altezza non salta a ogni cambio. */
.diapositiva[hidden] { display: block; visibility: hidden; }
.diapositiva.attiva.da-destra { animation: entra .55s var(--curva) both; }
.diapositiva.attiva.da-sinistra { animation: rientra .55s var(--curva) both; }
.diapositiva .per { margin: 0 0 14px; animation: sale .6s var(--curva) both; }
.chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--notte);
  background: var(--sole);
  box-shadow: 0 0 0 4px rgba(255, 182, 46, .18);
}
.hero h1, .diapositiva h2 {
  font-stretch: 122%;
  font-weight: 650;
  font-size: clamp(2.3rem, 4.5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.018em;
  margin: 0;
  max-width: 11.5em;
  color: var(--bianco);
  animation: sale .8s var(--curva) .1s both;
  transition: font-size .7s var(--curva);
}
.diapositiva > p:not(.per), .tre-passi {
  margin: 20px 0 0;
  max-width: 40ch;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, .8);
  max-height: 14em;
  animation: sale .8s var(--curva) .25s both;
  transition: opacity .35s, max-height .6s var(--curva), margin .6s var(--curva);
}
.tre-passi { padding-left: 0; list-style: none; counter-reset: passo; display: grid; gap: 10px; }
.tre-passi li { position: relative; padding-left: 44px; min-height: 32px; }
.tre-passi li::before {
  counter-increment: passo;
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .9rem;
  font-weight: 700;
  color: var(--notte);
  background: var(--sole);
}
.tre-passi strong { color: var(--bianco); }
/* I comandi: frecce e punti. Sotto il punto della pagina in vista scorre il tempo che manca alla prossima. */
.presentazione-comandi { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.freccia {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .06);
  color: var(--bianco);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s, border-color .2s;
}
.freccia svg { width: 20px; height: 20px; }
.freccia:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .7); }
.punti { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.punti button {
  position: relative;
  width: 26px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  overflow: hidden;
  transition: background .2s;
}
.punti button:hover { background: rgba(255, 255, 255, .55); }
.punti button[aria-current="true"] { background: rgba(255, 255, 255, .45); }
.punti button[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--sole);
  transform-origin: left;
  transform: scaleX(0);
}
.presentazione.gira .punti button[aria-current="true"]::after { animation: avanza var(--durata, 8s) linear both; }
.presentazione:not(.gira) .punti button[aria-current="true"]::after { transform: scaleX(1); }
@keyframes avanza { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Le tappe di una pratica: la linea si accende all'apertura */
.percorso {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 640px;
}
.percorso::before, .percorso::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 10%;
  height: 2px;
  border-radius: 2px;
}
.percorso::before { right: 10%; background: rgba(255, 255, 255, .22); }
.percorso::after {
  width: 60%;
  background: linear-gradient(90deg, var(--sole-scuro), var(--sole));
  box-shadow: 0 0 14px rgba(255, 182, 46, .7);
  transform-origin: left;
  animation: traccia 1.5s var(--curva) .6s both;
}
.tappa { position: relative; z-index: 1; text-align: center; font-size: .82rem; color: rgba(255, 255, 255, .72); }
.tappa::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45);
  background: #0a2654;
}
.tappa.fatta::before, .tappa.corso::before {
  border-color: var(--sole);
  animation: accende .45s var(--curva) both;
  animation-delay: calc(.6s + var(--i) * .5s);
}
.tappa.fatta::before { background: var(--sole); box-shadow: 0 0 0 5px rgba(255, 182, 46, .18); }
.tappa.corso { color: var(--bianco); font-weight: 600; }
.tappa.corso::after {     /* alone che pulsa sulla tappa in corso */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  border: 2px solid var(--sole);
  animation: pulsa 2.4s ease-out 2.4s infinite;
  opacity: 0;
}

/* ---------- Lato carta: accesso e registrazione ---------- */
.pannello {
  flex: 0 0 42%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px);
  background: var(--carta);
  transition: flex-basis .7s var(--curva);
}
.vista { width: 100%; max-width: 400px; }
#vista-spazio { max-width: 780px; }
#vista-registrazione { max-width: 460px; }

/* Passando alla registrazione il vetro si rimpicciolisce e lascia spazio alle scelte */
.pagina[data-vista="spazio"] .pannello { flex-basis: 66%; }
.pagina[data-vista="spazio"] .hero h1, .pagina[data-vista="spazio"] .diapositiva h2 { font-size: clamp(1.5rem, 2.2vw, 2.2rem); }
.pagina[data-vista="spazio"] .diapositiva > p:not(.per), .pagina[data-vista="spazio"] .tre-passi, .pagina[data-vista="spazio"] .presentazione-comandi { opacity: 0; max-height: 0; margin-top: 0; overflow: hidden; }

h2 {
  font-stretch: 114%;
  font-weight: 650;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -.012em;
  margin: 0 0 8px;
}
h2:focus { outline: none; }
.sotto { color: var(--testo-2); margin: 0 0 26px; }

.campo { margin: 0 0 18px; }
.coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
label, .etichetta { display: block; font-weight: 550; font-size: .95rem; margin: 0 0 6px; }
.facoltativo { font-weight: 400; color: var(--testo-2); }
.aiuto { font-size: .88rem; color: var(--testo-2); margin: 6px 0 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"] {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 13px 14px;
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus-visible { outline: none; border-color: var(--vetro); box-shadow: 0 0 0 4px rgba(26, 86, 176, .16); }
input.sbagliato { border-color: var(--errore); }
.maiuscolo { text-transform: uppercase; }
.con-pulsante { position: relative; }
.con-pulsante input { padding-right: 96px; }
.con-pulsante button {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--vetro);
  cursor: pointer;
}

.pulsante {
  width: 100%;
  font-weight: 600;
  padding: 14px 20px;
  border: 0;
  border-radius: 10px;
  color: var(--bianco);
  background: linear-gradient(135deg, var(--vetro), var(--cella));
  box-shadow: 0 10px 22px -10px rgba(13, 47, 102, .7);
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
.pulsante:hover { filter: brightness(1.12); }
.pulsante:active { transform: scale(.985); }
.pulsante:disabled { opacity: .6; cursor: default; filter: none; }
.pulsante.leggero {
  width: auto;
  color: var(--cella);
  background: transparent;
  border: 1.5px solid var(--linea);
  box-shadow: none;
}
.pulsante.leggero:hover { border-color: var(--vetro); filter: none; }
.pulsante.google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--testo);
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  box-shadow: none;
}
.pulsante.google:hover { border-color: var(--vetro); filter: none; }
.pulsante.google svg { width: 20px; height: 20px; flex: none; }
.oppure {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  font-size: .9rem;
  color: var(--testo-2);
}
.oppure::before, .oppure::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.collegamento {
  border: 0;
  background: none;
  padding: 0;
  font-weight: 600;
  color: var(--vetro);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a { color: var(--vetro); font-weight: 600; text-underline-offset: 3px; }
.azioni { display: flex; gap: 12px; align-items: center; margin-top: 26px; }
.azioni .pulsante:not(.leggero) { flex: 1; }
.cambio { margin: 26px 0 0; color: var(--testo-2); }

.avviso {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-left: 3px solid var(--errore);
  border-radius: 0 8px 8px 0;
  background: #fbeceb;
  color: var(--errore);
}
.errore-campo { margin: 6px 0 0; font-size: .9rem; color: var(--errore); }

/* ---------- Registrazione ---------- */
.testata { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; font-size: .9rem; color: var(--testo-2); }
.barra { flex: 1; height: 4px; border-radius: 4px; background: var(--linea); overflow: hidden; }
.barra i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sole-scuro), var(--sole));
  transform-origin: left;
  transform: scaleX(.25);
  transition: transform .6s var(--curva);
}
.riepilogo { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.riepilogo:empty { display: none; }
.fatto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 14px 6px 10px;
  font-size: .9rem;
  font-weight: 550;
  color: var(--cella);
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s;
}
.fatto:hover { border-color: var(--vetro); }
.fatto svg { width: 18px; height: 18px; flex: none; color: var(--sole-scuro); }
.fatto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.passo { animation: entra .5s var(--curva) both; }
.passo.indietro { animation-name: rientra; }

.scelte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scelta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 250px;
  text-align: left;
  padding: 22px 20px 26px;
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  border-radius: 16px;
  cursor: pointer;
  transition: transform .3s var(--curva), border-color .2s, box-shadow .3s, opacity .22s;
}
.scelta::before {          /* luce che entra nella scheda quando ci passi sopra */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(255, 182, 46, .22), rgba(26, 86, 176, .10) 55%, transparent 80%);
  opacity: 0;
  transition: opacity .3s;
}
.scelta > * { position: relative; }
.scelta:hover, .scelta:focus-visible, .scelta.presa {
  transform: translateY(-4px);
  border-color: var(--vetro);
  box-shadow: 0 20px 38px -20px rgba(13, 47, 102, .5);
}
.scelta:hover::before, .scelta:focus-visible::before, .scelta.presa::before { opacity: 1; }
.scelta svg {
  display: block;
  flex: none;
  width: 60px;
  height: 60px;
  padding: 9px;
  margin: 0 0 24px;
  border-radius: 14px;
  color: var(--cella);
  background: linear-gradient(140deg, rgba(255, 182, 46, .38), rgba(26, 86, 176, .16));
}
.scelta strong { display: block; font-stretch: 110%; font-size: 1.14rem; line-height: 1.2; margin: 0 0 8px; }
.scelta span { display: block; font-size: .93rem; line-height: 1.4; color: var(--testo-2); }
.scelte.deciso .scelta:not(.presa) { opacity: 0; transform: scale(.9); }
.volo { position: fixed; z-index: 60; margin: 0; pointer-events: none; transform-origin: top left; }
.volo.vuoto { background: var(--bianco); border: 1.5px solid var(--linea); border-radius: 16px; }
.volo > * { animation: svanisce .22s ease-out both; }

.riconosciuto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 7px 14px;
  font-size: .92rem;
  font-weight: 550;
  color: var(--cella);
  background: linear-gradient(120deg, rgba(255, 182, 46, .28), rgba(26, 86, 176, .12));
  border-radius: 999px;
  animation: entra .4s var(--curva) both;
}
.extra { animation: entra .45s var(--curva) both; }

.doppia {                  /* scelta fra due: il cursore scorre sulla risposta */
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 12px;
  background: #e4ebf4;
}
.doppia::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 9px;
  background: var(--bianco);
  box-shadow: 0 2px 8px rgba(11, 26, 51, .18);
  opacity: 0;
  transition: transform .35s var(--curva), opacity .2s;
}
.doppia[data-valore="SI"]::before { opacity: 1; }
.doppia[data-valore="NO"]::before { opacity: 1; transform: translateX(100%); }
.doppia button {
  position: relative;
  border: 0;
  background: none;
  padding: 10px 30px;
  border-radius: 9px;
  font-weight: 600;
  color: var(--testo-2);
  cursor: pointer;
}
.doppia button[aria-pressed="true"] { color: var(--testo); }

.spunta { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 0; font-weight: 400; font-size: .97rem; }
.spunta input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--vetro); }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.stato-icona svg { display: block; width: 56px; height: 56px; margin: 0 0 20px; color: var(--sole-scuro); }
.azioni.colonna { flex-direction: column; align-items: stretch; }
.azioni.colonna .pulsante { width: 100%; flex: none; }
.piede { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; }

.info {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-left: 3px solid var(--vetro);
  border-radius: 0 8px 8px 0;
  background: #e6eefb;
  color: var(--cella);
}
.sotto-campo { margin: -8px 0 18px; font-size: .93rem; }
input:disabled { background: #eef2f7; color: var(--testo-2); }

/* ---------- Area riservata ---------- */
.area { min-height: 100vh; display: flex; flex-direction: column; background: var(--carta); }
.barra-alta {
  position: sticky;      /* resta in alto mentre la pagina scorre, come una riga bloccata */
  top: 0;
  z-index: 60;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 14px clamp(16px, 4vw, 40px);
  color: var(--bianco);
  background: linear-gradient(110deg, var(--notte) 0%, #0a2654 60%, var(--vetro) 160%);
  border-bottom: 3px solid var(--sole);
}
.barra-alta::before {      /* le stesse celle dell'ingresso */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 104px 100%, 26px 100%;
  -webkit-mask-image: linear-gradient(270deg, #000, transparent 70%);
  mask-image: linear-gradient(270deg, #000, transparent 70%);
}
.barra-alta > * { position: relative; }
/* La barra di stato: una riga sotto, ferma con la barra, che dice dove si è */
.barra-stato { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 2px 0 -6px; padding: 7px 0 0; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .88rem; color: #dbe5f5; }
.barra-stato[hidden] { display: none; }
.stato-sigla { padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .06em; color: var(--notte); background: var(--sole); }
.stato-nome { font-weight: 700; color: var(--bianco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.stato-fase { color: #c9d6ea; }
.stato-modifica { padding: 2px 10px; border-radius: 999px; font-weight: 600; color: var(--sole); background: rgba(255, 182, 46, .16); }
.stato-salvataggio { margin-left: auto; color: #c9d6ea; }
.stato-salvataggio.errore { color: #ffb4a8; font-weight: 700; }
.stato-salvataggio.in-corso::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border: 2px solid #c9d6ea; border-right-color: transparent; border-radius: 50%; animation: gira 0.9s linear infinite; vertical-align: -1px; }
.con-stato .sommario { top: 136px; }
.chi { display: flex; align-items: center; gap: 12px; font-size: .93rem; }
.chi-nome { font-weight: 600; }
.chi-ruolo {
  padding: 3px 11px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--sole);
  background: rgba(255, 182, 46, .16);
}
.chi button {
  padding: 7px 14px;
  font-weight: 600;
  color: var(--bianco);
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .4);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s;
}
.chi button:hover { border-color: var(--bianco); }
.contenuto {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 44px) clamp(16px, 4vw, 40px) 64px;
  animation: sale .5s var(--curva) both;
}
.contenuto:focus { outline: none; }

.amm h1 {
  font-stretch: 116%;
  font-weight: 650;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -.014em;
  margin: 0 0 8px;
}
.amm-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 0 0 24px; }
.amm-testa h1 { margin: 0; }
.doppia.linguette { grid-template-columns: repeat(var(--n, 2), 1fr); }
.doppia.linguette::before {    /* il cursore scorre sulla linguetta scelta */
  width: calc((100% - 8px) / var(--n, 2));
  opacity: 1;
  transform: translateX(calc(var(--i, 0) * 100%));
}
.linguette button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; white-space: nowrap; }
/* Pratiche: elenco, stato generale, iter */
.blocco-pratiche { margin-top: 26px; }
.blocco-pratiche .amm-testa { margin-bottom: 14px; }
.blocco-pratiche .amm-testa .titolo-elenco { margin: 0; }
.blocco-pratiche .amm-testa .pulsante { width: auto; padding: 11px 24px; }
.pratiche { display: grid; gap: 12px; }
.pratica {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left;
  padding: 16px 20px; border: 1.5px solid var(--linea); border-radius: 16px;
  background: var(--bianco); color: inherit; font: inherit; cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.pratica:hover, .pratica:focus-visible { border-color: var(--vetro); box-shadow: 0 22px 40px -28px rgba(13, 47, 102, .6); transform: translateY(-1px); }
.pratica-testo { display: grid; gap: 2px; min-width: 0; }
.pratica-testo .sigla { font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: var(--vetro); }
.pratica-testo strong { font-stretch: 108%; font-size: 1.08rem; }
.pratica-testo span:last-child { font-size: .92rem; color: var(--testo-2); }

/* Lo stato generale: un riquadro colorato e, sotto, il binario di Terna */
.stato { flex: none; display: grid; gap: 7px; width: 168px; }
.stato-nome {
  display: block; padding: 9px 10px; border: 2px solid var(--st-bordo, var(--linea)); border-radius: 10px;
  background: var(--st-fondo, var(--bianco)); color: var(--st-testo, var(--testo));
  font-weight: 700; font-size: .84rem; letter-spacing: .04em; text-align: center; white-space: nowrap;
}
.stato[data-stato="DOC MANCANTI"] { --st-fondo: #fde7e4; --st-bordo: #c62828; --st-testo: #7f1d1d; }
.stato[data-stato="IN LAVORAZIONE"] { --st-fondo: #e2f4e6; --st-bordo: #2e7d32; --st-testo: #14532d; }
.stato[data-stato="IN ATTESA"] { --st-fondo: #fff3c4; --st-bordo: #c99700; --st-testo: #6b4e00; }
.stato[data-stato="COMPLETAMENTO"] { --st-fondo: #f1e6d2; --st-bordo: #a1887f; --st-testo: #5d4037; }
.stato[data-stato="COMPLETA"] { --st-fondo: #ffffff; --st-bordo: #9aa7b8; --st-testo: #33415c; }
.stato-binario { display: flex; align-items: center; min-height: 14px; padding: 0 2px; }
/* Tutto grigio finché non è fatto: il verde vuol dire fatto, e nient'altro. */
.stato-binario .linea, .stato-binario .tratto { flex: 1; height: 3px; border-radius: 2px; background: #c5cedb; }
.stato-binario .tratto.acceso { background: #3a9d4b; }
.stato-binario .pallino {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border: 2px solid #b6c0ce; border-radius: 50%; background: var(--bianco); color: #8b97a8;
}
.stato-binario .pallino svg { width: 14px; height: 14px; fill: currentColor; }
.stato-binario .pallino.acceso { border-color: #3a9d4b; background: #3a9d4b; color: var(--bianco); }

.stato[data-stato="BOZZA"] { --st-fondo: #eef1f5; --st-bordo: #9aa7b8; --st-testo: #4a5670; }
.stato[data-stato="BOZZA"] .stato-nome { border-style: dashed; }
.comandi-elenco { display: flex; flex-wrap: wrap; gap: 10px; }
.scheda-bozza { max-width: 760px; margin-top: 18px; }
/* La lettura dei documenti: che cosa sta facendo, e i campi che ha compilato, in giallo finché nessuno li controlla */
.lettura { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--linea); background: #eef3fb; }
.lettura[hidden] { display: none; }
.lettura p { margin: 0; }
.lettura.fatto { border-color: var(--sole); background: #fff8e8; }
.lettura.in-corso p::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2px solid var(--vetro); border-right-color: transparent; border-radius: 50%; animation: gira 0.9s linear infinite; vertical-align: -1px; }
.lettura .lettura-avviso { margin-top: 6px; color: var(--errore); font-weight: 600; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lettura.in-corso p::before { animation: none; } }
.lettura-dettagli { margin-top: 8px; }
.lettura-dettagli summary { cursor: pointer; color: var(--vetro); font-weight: 600; font-size: .92rem; }
.lettura-dettagli pre { margin: 8px 0 0; padding: 10px; max-height: 260px; overflow: auto; border-radius: 8px; background: var(--bianco); border: 1px solid var(--linea); font-size: .82rem; white-space: pre-wrap; word-break: break-word; }
/* IN PROVA, solo per il gestore: la lettura interna e quella con AI a confronto */
.scheda-bozza input.letto, .scheda-bozza select.letto { border-color: var(--sole); background: #fff8e8; }
.scelta-due.letto { padding: 4px; border-radius: 14px; background: #fff3d1; }
/* Un campo con una modifica proposta, in attesa dello studio: giallo come i dati letti, con il bordo più deciso. */
.scheda-bozza input.proposto, .scheda-bozza select.proposto { border-color: #e0a100; background: #fff3d1; }
.scelta-due.proposto { padding: 4px; border-radius: 14px; background: #fff3d1; }
.riga-impianto.proposto { background: #fff8e8; border-color: #e0a100; }

/* Riquadro dei documenti: un blocco per ogni documento previsto, con i file caricati */
.documenti { display: grid; gap: 12px; margin-top: 10px; }
.documento { padding: 14px 16px; border: 1.5px solid var(--linea); border-radius: 14px; background: #f7f9fc; }
/* I comandi di un passo, a destra del suo nome */
.iter .tappa-azioni { flex: none; display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* I posti per i documenti di un passo: tratteggiati finché sono vuoti */
.iter .posti { flex-basis: 100%; margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.iter .posti li { counter-increment: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 12px; border: 1.5px dashed var(--linea); border-radius: 10px; background: #f7f9fc; }
.iter .posti li::before { content: none; display: none; }
.iter .posti li.pieno { display: grid; gap: 4px; border-style: solid; background: var(--bianco); }
.iter .posti li.pieno .documento-scheda { margin-top: 2px; }
.iter .posti li.sopra { border-color: var(--vetro); background: #e9f0fb; }
.iter .posti .pulsante { width: auto; padding: 6px 16px; }
.iter .posti .posto-nome { flex: 1; min-width: 200px; font-size: .98rem; font-weight: 600; color: var(--testo); }
/* Il conto alla rovescia: un anello che si svuota, con al centro il comando per fermare */
.conto { flex: none; display: flex; align-items: center; gap: 10px; max-width: 330px; }
.conto-testo { font-size: .88rem; color: var(--testo-2); }
.conto-ferma { flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.conto-ferma:hover, .conto-ferma:focus-visible { outline: none; background: #e6ecf5; }
.conto-ferma svg { display: block; width: 46px; height: 46px; transform: rotate(-90deg); }
.conto-fondo { fill: none; stroke: var(--linea); stroke-width: 4; }
.conto-giro { fill: none; stroke: var(--sole); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 119.4; animation: svuota linear forwards; }
.conto-stop { fill: var(--cella); }
@keyframes svuota { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 119.4; } }
@media (prefers-reduced-motion: reduce) { .conto-giro { animation: none; } }
/* L'albero delle cartelle: si guarda e si scarica; solo INPUT, in ambra e tratteggiata, è da usare liberamente */
.albero { display: grid; gap: 8px; margin-top: 10px; }
.cartella { padding: 12px 16px; border: 1.5px solid var(--linea); border-radius: 14px; background: #f7f9fc; }
.cartella.vuota { opacity: .65; }
.cartella.libera { opacity: 1; border: 2px dashed var(--sole); background: #fff8e8; }
.cartella.libera.sopra { background: #ffefc7; }
.cartella-testa { display: flex; align-items: center; gap: 12px; }
.cartella-testa strong::before { content: "\1F4C1"; margin-right: 8px; }
.cartella-conta { flex: 1; color: var(--testo-2); font-size: .88rem; }
.cartella-testa .pulsante { width: auto; padding: 8px 18px; }
.cartella .aiuto { margin: 6px 0 0; }
.cartella .documento-file { margin-left: 22px; }
.albero .usato { margin: 0; text-align: right; }
.archivio-dove { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.archivio-dove select { padding: 8px 10px; border: 1.5px solid var(--linea); border-radius: 10px; background: var(--bianco); font: inherit; }
.iter li.sopra { outline: 2px dashed var(--vetro); outline-offset: 2px; }
.iter .tappa-file { flex-basis: 100%; margin: 6px 0 0; }
/* I file di una tappa sono righe dentro la tappa: non sono tappe, quindi niente numero e niente riquadro da tappa */
.iter .tappa-file li { counter-increment: none; align-items: baseline; gap: 4px 14px; padding: 8px 12px; border: 1px solid var(--linea); border-radius: 10px; background: #f7f9fc; }
.iter .tappa-file li::before { content: none; display: none; }
.iter .tappa-nota { flex-basis: 100%; margin: 4px 0 0; }
/* Quanto va pagato e dove: lo scrive lo studio dentro il passo */
.iter .pagamento { flex-basis: 100%; margin: 8px 0 0; padding: 10px 12px; border: 1.5px solid var(--linea); border-radius: 10px; background: #fff8e8; }
.iter .pagamento strong { font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; color: var(--testo-2); }
.iter .pagamento p { margin: 4px 0 0; }
.pagamento-riga { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pagamento-riga input { padding: 9px 12px; border: 1.5px solid var(--linea); border-radius: 10px; background: var(--bianco); font: inherit; }
.pagamento-riga input:first-child { width: 110px; }
.pagamento-riga input:nth-child(2) { flex: 1; min-width: 220px; }
.pagamento-riga .pulsante { width: auto; padding: 9px 20px; }
/* Le fotografie tra i dati principali, e il visore che le mostra una alla volta */
.dati-principali dd.fotografie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dati-principali dd.fotografie .pulsante { width: auto; padding: 6px 16px; }
.visore { width: min(1100px, 96vw); max-width: none; height: min(820px, 92vh); max-height: none; padding: 0; border: 0; border-radius: 18px; background: var(--notte); color: #fff; overflow: hidden; }
.visore[open] { display: flex; flex-direction: column; }
.visore::backdrop { background: rgba(6, 19, 43, .78); }
.visore-comandi { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 2px solid var(--sole); }
.visore-titolo { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.visore-comandi .pulsante { width: auto; padding: 8px 18px; }
.visore-corpo { flex: 1; min-height: 0; display: flex; align-items: stretch; }
.visore-tela { flex: 1; min-width: 0; display: grid; place-items: center; padding: 14px; }
.visore-tela img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.visore-tela img[hidden] { display: none; }
.visore-stato { margin: 0; color: #c9d6ea; }
.visore-freccia { flex: none; width: 64px; border: 0; background: none; color: #fff; font-size: 3rem; line-height: 1; cursor: pointer; }
.visore-freccia:hover:not(:disabled), .visore-freccia:focus-visible { outline: none; background: rgba(255, 255, 255, .1); }
.visore-freccia:disabled { opacity: .25; cursor: default; }
/* Un documento obbligatorio che manca: in rosso, per il colpo d'occhio. Uno già usato dallo studio: spento */
.documento.manca { border-color: var(--errore); background: #fdf3f1; }
.documento.chiuso { background: #eef2f7; }
.documento.chiuso .documento-nome { color: var(--testo-2); }
.assistenza { margin: 10px 0 22px; }
.assistenza .collegamento { margin-top: 6px; }
.documento.sopra { border-color: var(--vetro); border-style: dashed; background: #e9f0fb; }
.documenti .usato { margin: 0; text-align: right; }
.documento-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.documento-testa .pulsante { width: auto; padding: 8px 18px; }
.documento .aiuto { margin: 4px 0 0; }
.documento .modelli a { color: var(--vetro); font-weight: 600; }
.documento-file { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.documento-file li { display: block; padding: 8px 12px; border-radius: 10px; background: var(--bianco); border: 1px solid var(--linea); }
/* La scheda di un file, su tre righe: il nome con l'estensione; peso, chi e quando; i comandi */
.documento-scheda { display: grid; gap: 2px; min-width: 0; }
.documento-nome { display: flex; min-width: 0; font-weight: 600; }
.documento-nome .nome-base { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.documento-nome .nome-estensione { flex: none; }
.documento-dati { color: var(--testo-2); font-size: .88rem; }
.documento-azioni { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 2px; }
.documento-azioni .collegamento { font-size: .92rem; }
.documento-scheda .togli { color: var(--errore); }

/* L'attesa in sovraimpressione: la pagina si scurisce e si sfuma, un sole gira finché l'operazione non è finita */
.attesa { width: auto; max-width: min(420px, 90vw); max-height: none; padding: 0; border: 0; background: none; color: #fff; text-align: center; outline: none; }
.attesa[open] { display: grid; justify-items: center; gap: 14px; }
.attesa::backdrop { background: rgba(6, 19, 43, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.attesa-sole { display: block; width: 88px; height: 88px; overflow: visible; filter: drop-shadow(0 0 16px rgba(255, 182, 46, .5)); }
.attesa-alone { fill: var(--sole); opacity: .2; transform-box: view-box; transform-origin: 50% 50%; animation: attesa-respira 2.6s ease-in-out infinite; }
.attesa-raggi { stroke: var(--sole); stroke-width: 5; stroke-linecap: round; transform-box: view-box; transform-origin: 50% 50%; animation: attesa-gira 9s linear infinite; }
.attesa-nucleo { fill: var(--sole); }
.attesa-testo { margin: 0; font-size: 1.08rem; font-weight: 600; }
.attesa-nota { margin: -8px 0 0; font-size: .9rem; color: #c9d6ea; }
.attesa-nota[hidden] { display: none; }
@keyframes attesa-gira { to { transform: rotate(360deg); } }
@keyframes attesa-respira { 0%, 100% { transform: scale(1); opacity: .16; } 50% { transform: scale(1.22); opacity: .32; } }
@media (prefers-reduced-motion: reduce) { .attesa-raggi, .attesa-alone { animation: none; } }

/* Suggerimenti dei comuni sotto la casella in cui si scrive */
.con-suggerimenti { position: relative; }
.suggerimenti { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--bianco); box-shadow: 0 22px 44px -24px rgba(6, 19, 43, .55); }
.suggerimenti[hidden] { display: none; }
.suggerimenti li { padding: 9px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggerimenti li:hover, .suggerimenti li.scelto { background: #e6ecf5; }
.nascita-campi { display: grid; grid-template-columns: 1fr 1.3fr 96px; gap: 12px; }
.scheda-bozza .etichetta.in-gruppo { margin: 20px 0 4px; font-weight: 700; }
.scheda-bozza .invito-riga .pulsante { width: auto; padding: 0 20px; }

/* La scheda con il sommario accanto: l'indice resta in vista mentre si scorre */
.con-sommario { display: grid; grid-template-columns: minmax(0, 660px) 230px; gap: 34px; align-items: start; }
/* La colonna a destra: il sommario e, sotto, lo storico delle modifiche. Resta ferma mentre la scheda scorre; se lo storico
   non ci sta nell'altezza della finestra, è lui a stringersi e a scorrere, non a uscire dalla pagina */
.colonna-destra { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 110px); }
.con-stato .colonna-destra { top: 136px; max-height: calc(100vh - 154px); }
.sommario { flex: none; display: grid; gap: 2px; margin-top: 18px; padding: 14px 10px 12px; border-left: 2px solid var(--linea); }
.sommario strong { padding: 0 10px 8px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-2); }
.sommario button { padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--testo-2); font: inherit; font-size: .95rem; text-align: left; cursor: pointer; }
.sommario button.sotto-voce { padding-left: 24px; font-size: .88rem; }
.sommario button:hover, .sommario button:focus-visible { outline: none; background: #e6ecf5; color: var(--testo); }
.sommario button[aria-current="true"] { background: #e6ecf5; color: var(--cella); font-weight: 700; box-shadow: inset 3px 0 0 var(--sole); }
.scheda-bozza .gruppo, .scheda-bozza .etichetta.sezione { scroll-margin-top: 96px; }
.scheda-bozza input.sbagliato { border-color: var(--errore); background: #fdf3f1; }
@media (max-width: 1080px) { .con-sommario { grid-template-columns: minmax(0, 1fr); } .sommario { display: none; } .colonna-destra { position: static; max-height: none; } .modifiche { max-height: 420px; } }
/* Lo storico delle modifiche: ora, persona e, campo per campo, prima → dopo, con "Ripristina". Mostra le ultime righe
   (CONFIG.modificheMostrate) e, se non ci stanno, scorre; il titolo "Modifiche" resta fermo in cima mentre si scorre */
.modifiche { flex: 0 1 auto; min-height: 0; overflow: auto; padding: 0 12px 10px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--bianco); font-size: .86rem; }
.modifiche summary { position: sticky; top: 0; z-index: 1; padding: 12px 0 2px; background: var(--bianco); cursor: pointer; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-2); }
.modifiche-righe { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.modifiche-righe li { padding: 0 0 10px; border-bottom: 1px solid #e6ecf5; }
.modifiche-righe li:last-child { border-bottom: 0; padding-bottom: 0; }
.modifiche-vuoto { color: var(--testo-2); }
.modifica-testa { display: flex; gap: 8px; color: var(--testo-2); }
.modifica-quando { font-variant-numeric: tabular-nums; }
.modifica-chi { font-weight: 600; color: var(--testo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modifica-cambio { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.modifica-campo { font-weight: 600; }
.modifica-valori { overflow-wrap: anywhere; }
.modifica-cambio .collegamento { font-size: .82rem; }
/* La fascia di chi guarda una bozza in modifica da un altro */
.sola-lettura { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid #e0a100; background: #fff3d1; }
.sola-lettura .pulsante { width: auto; padding: 8px 18px; margin-left: auto; }
.modifiche-pratica { margin: 18px 0 22px; max-height: 440px; }
.azioni.tre { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; }
.azioni.tre .pulsante { width: auto; padding-left: 22px; padding-right: 22px; }
.azioni.tre .pulsante[type="submit"] { width: 100%; }
.elimina-bozza { display: inline-block; margin-top: 16px; color: var(--errore); }
.scheda-bozza .calcolo { margin-top: 6px; }
.scheda-bozza input:disabled, .scheda-bozza select:disabled, .scheda-bozza textarea:disabled { background: #eef2f7; color: var(--testo-2); }
.scelta-due button:disabled { cursor: default; opacity: .75; }
.scheda-bozza .gruppo.primo { margin-top: 14px; padding-top: 0; border-top: 0; }
.scheda-bozza .etichetta.sezione { margin: 16px 0 6px; font-weight: 700; }
.scheda-bozza input[type="date"] { width: 100%; padding: 13px 14px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--bianco); color: var(--testo); font: inherit; }
.scheda-bozza input[type="date"]:focus-visible { outline: none; border-color: var(--vetro); box-shadow: 0 0 0 4px rgba(26, 86, 176, .16); }
.scheda-bozza textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--linea); border-radius: 12px; font: inherit; resize: vertical; }
.indirizzo-campi { display: grid; grid-template-columns: 1fr 110px 110px; gap: 12px; }
/* L'indirizzo in tre pezzi: tipo di via, nome, numero civico */
.indirizzo-via { display: grid; grid-template-columns: 150px 1fr 120px; gap: 12px; }
.indirizzo-via .campo, .indirizzo-campi .campo, .terna-campi.pari .campo { margin: 0 0 14px; }
.terna-campi.pari { grid-template-columns: repeat(3, 1fr); }
.riga-impianto .coppia { margin-top: 8px; }
.riga-impianto .coppia .campo, .riga-impianto > .campo { margin: 0; }
.riga-impianto > .campo { margin-top: 8px; }
.scheda-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.scheda-testa .stato { width: 200px; margin-top: 6px; }
.scheda-testa .stato-nome { padding: 12px; font-size: .95rem; }
.prossimo { margin: 14px 0 6px; font-weight: 600; }
.aggiornamenti { margin: 10px 0 0; }
.aggiornamenti .avviso { margin-bottom: 10px; }
.iter { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: tappa; }
.iter li {
  counter-increment: tappa; display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--bianco);
  flex-wrap: wrap;   /* i file della tappa vanno a capo, sotto il suo nome */
}
.iter li::before {
  content: counter(tappa); flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  border: 2px solid var(--linea); border-radius: 50%; font-weight: 700; font-size: .85rem; color: var(--testo-2);
}
.iter li.fatta::before { content: "✓"; border-color: #5aae61; background: #5aae61; color: var(--bianco); }
.iter li.prossima { border-color: var(--sole); box-shadow: 0 14px 30px -26px rgba(240, 154, 18, .9); }
.iter li.prossima::before { border-color: var(--sole-scuro); color: var(--testo); }
.iter li > div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.iter li span { font-size: .88rem; color: var(--testo-2); }
.iter li .pulsante { width: auto; padding: 9px 16px; white-space: nowrap; }
.dati-principali { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; padding: 16px 20px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--bianco); }
.dati-principali dt { color: var(--testo-2); font-size: .92rem; }
.dati-principali dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* Scelta obbligatoria fra due voci: due pulsanti distinti, nessuno premuto finché non si sceglie */
.scelta-due { display: flex; flex-wrap: wrap; gap: 10px; padding: 3px; margin: -3px; border-radius: 14px; }
.scelta-due button {
  min-width: 96px; padding: 11px 20px; border: 1.5px solid var(--linea); border-radius: 12px;
  background: var(--bianco); color: var(--testo); font: inherit; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.scelta-due button:hover { border-color: var(--vetro); }
.scelta-due button:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(26, 86, 176, .16); }
.scelta-due button[aria-pressed="true"] { border-color: var(--cella); background: var(--cella); color: var(--bianco); }
.scelta-due.sbagliato button { border-color: var(--errore); }
.obbligatorio { color: var(--errore); font-weight: 700; }
.nota-obbligatori { margin: 18px 0 0; }
.da-sistemare { margin: 12px 0 0; padding: 12px 16px; border: 1.5px solid var(--linea); border-left: 4px solid var(--errore); border-radius: 12px; background: var(--bianco); font-size: .95rem; }
.da-sistemare ul { margin: 6px 0 0; padding-left: 20px; }
.da-sistemare li { margin: 2px 0; }
.pulsante:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Dati principali e, accanto, le note dello studio: un foglietto giallo, sobrio */
.scheda-dati { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: stretch; }
.scheda-dati.da-soli { grid-template-columns: minmax(0, 1fr); }
.scheda-dati.da-soli .post-it { max-width: 420px; margin-top: 30px; }
.scheda-dati > div:first-child { display: flex; flex-direction: column; }
.scheda-dati .dati-principali { flex: 1; align-content: start; }
.post-it {
  display: flex; flex-direction: column; min-height: 290px; margin-top: 30px; padding: 14px 16px 10px;
  border: 1px solid #ead98f; border-radius: 3px 3px 16px 3px; background: linear-gradient(180deg, #fff9d9, #fff3bd);
  box-shadow: 0 18px 28px -20px rgba(92, 72, 0, .6);
}
.post-it-titolo { margin: 0 0 8px; font-weight: 700; font-stretch: 108%; color: #5c4a00; }
.post-it textarea {
  flex: 1; width: 100%; min-height: 180px; padding: 0; border: 0; background: transparent; resize: vertical;
  color: var(--testo); font: inherit; line-height: 1.5;
}
.post-it textarea:focus-visible { outline: none; }
.post-it:focus-within { border-color: #c9a400; box-shadow: 0 0 0 4px rgba(255, 182, 46, .22), 0 18px 28px -20px rgba(92, 72, 0, .6); }
.post-it-piede { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #ead98f; font-size: .82rem; color: #7a6a2a; }
.assegnazione { margin: 16px 0 0; }
.assegnazione .scelta-due { margin-top: 6px; }
.assegnazione p { margin: 4px 0 0; }

/* Eliminazione della pratica: ben riconoscibile, e con una finestra di conferma */
.zona-elimina {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 36px 0 0;
  padding: 16px 20px; border: 1.5px solid #e7b4ae; border-radius: 14px; background: #fdf3f1;
}
.zona-elimina > div { display: grid; gap: 2px; }
.zona-elimina span { font-size: .92rem; color: var(--testo-2); }
.zona-elimina .pulsante { width: auto; padding: 11px 22px; white-space: nowrap; }
.pulsante.pericolo { background: #c62828; color: var(--bianco); box-shadow: 0 16px 30px -18px rgba(198, 40, 40, .9); }
.pulsante.pericolo:hover:not(:disabled) { background: #a61f1f; }
.conferma-elimina { width: min(460px, calc(100vw - 32px)); padding: 26px 26px 22px; border: 0; border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(6, 19, 43, .6); color: var(--testo); }
.conferma-elimina::backdrop { background: rgba(6, 19, 43, .55); }
.conferma-elimina h2 { margin: 0 0 8px; font-size: 1.3rem; font-stretch: 108%; }
.conferma-elimina p { margin: 0 0 16px; color: var(--testo-2); }
.conferma-elimina .azioni { margin-top: 18px; }
.conferma-elimina .cose { margin: 0 0 16px; padding-left: 20px; color: var(--testo-2); }
.conferma-elimina .cose li { margin: 4px 0; }
.collegamento.pericolo { color: #c62828; }
.iter li.saltata { background: transparent; border-style: dashed; }
.iter li.saltata::before { content: "–"; }
.iter li.saltata strong { color: var(--testo-2); font-weight: 500; }

/* Nuova pratica: gruppi di dati, righe di inverter e accumuli, esito del calcolo */
.nuova-pratica { max-width: 720px; }
.nuova-pratica select { width: 100%; max-width: none; }
.nuova-pratica .gruppo { margin: 26px 0 6px; padding-top: 18px; border-top: 1px solid var(--linea); font-size: 1rem; font-stretch: 108%; }
.nuova-pratica .gruppo + .aiuto { margin: 0 0 10px; }
.riga-impianto { margin: 0 0 12px; padding: 12px 14px 10px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--carta); }
.terna-campi { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; }
.terna-campi .campo { margin: 0; }
.riga-impianto-sotto { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 2px; }
.riga-impianto .terna-campi + .terna-campi, .riga-impianto-sotto + .terna-campi { margin-top: 8px; }
.spunta-riga { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; cursor: pointer; }
.spunta-riga input { width: 18px; height: 18px; accent-color: var(--vetro); }
.esito-calcolo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 14px; }
.esito-calcolo > div { display: grid; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--carta); }
.esito-calcolo span { font-size: .85rem; color: var(--testo-2); }
.esito-calcolo strong { font-size: 1.15rem; font-stretch: 108%; }
select {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--linea); border-radius: 12px;
  background: var(--bianco); color: var(--testo); font: inherit;
}
select:focus-visible { outline: none; border-color: var(--vetro); box-shadow: 0 0 0 4px rgba(26, 86, 176, .16); }

/* Avviso di nuova versione, per chi ha una scheda aperta durante una pubblicazione */
.aggiornamento {
  position: fixed; left: 50%; bottom: 20px; z-index: 80; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px;
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 14px 12px 20px;
  border-radius: 14px; border-bottom: 3px solid var(--sole);
  background: var(--notte); color: var(--bianco); font-weight: 500;
  box-shadow: 0 24px 48px -20px rgba(6, 19, 43, .7);
}
.aggiornamento button {
  padding: 8px 16px; border: 0; border-radius: 10px;
  background: var(--sole); color: var(--notte); font: inherit; font-weight: 700; cursor: pointer;
}
.aggiornamento button:hover { background: var(--sole-scuro); }

/* Area riservata: spazio in uso, elenco degli spazi */
.spazio-attuale {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 46vw; padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: var(--bianco);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spazio-attuale:hover { border-color: var(--sole); }
.spazio-attuale .sigla { color: var(--sole); letter-spacing: .04em; }
.spazio-attuale .nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.spazio-attuale[hidden] { display: none; }
.spazi { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 0 0 26px; }
.spazio {
  display: grid; gap: 4px; align-content: start; text-align: left;
  padding: 20px 22px; border: 1.5px solid var(--linea); border-radius: 16px;
  background: var(--bianco); color: inherit; font: inherit; cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.spazio:hover, .spazio:focus-visible { border-color: var(--vetro); box-shadow: 0 22px 40px -28px rgba(13, 47, 102, .6); transform: translateY(-2px); }
.spazio .sigla { font-size: .82rem; font-weight: 700; letter-spacing: .08em; color: var(--vetro); }
.spazio strong { font-stretch: 108%; font-size: 1.15rem; line-height: 1.25; }
.spazio span { font-size: .93rem; color: var(--testo-2); }
.spazio .entra { margin-top: 10px; font-weight: 600; color: var(--vetro); }
.invito-ricevuto { margin: 0 0 18px; border-color: var(--sole); box-shadow: 0 18px 36px -28px rgba(240, 154, 18, .9); }
.invito-ricevuto .sigla { display: block; margin: 0 0 4px; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sole-scuro); }
.barra-sinistra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
button.marchio { padding: 4px 6px; border: 0; border-radius: 10px; background: none; color: inherit; font-family: inherit; cursor: pointer; }
button.marchio:hover, button.marchio:focus-visible { outline: none; background: rgba(255, 255, 255, .1); }
.ritorno {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 9px 12px;
  border: 0; border-radius: 12px; background: var(--sole); color: var(--notte);
  font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .8);
}
.ritorno[hidden] { display: none; }
.ritorno:hover, .ritorno:focus-visible { outline: none; background: var(--sole-scuro); }
.ritorno svg { width: 18px; height: 18px; }
.titolo-elenco { margin: 30px 0 12px; font-size: 1.1rem; font-stretch: 108%; }
.invito { margin: 22px 0 18px; max-width: 560px; }
.invito-riga { display: flex; gap: 10px; }
.invito-riga input { flex: 1; min-width: 0; }
.invito-riga .pulsante { width: auto; padding: 0 26px; }
.cella-azione .collegamento + .collegamento { margin-left: 18px; }
.nuova-anagrafica { max-width: 640px; margin: 8px 0 22px; padding: 4px 22px 22px; border: 1.5px solid var(--linea); border-radius: 16px; background: var(--bianco); }
.nuova-anagrafica .titolo-elenco { margin-top: 18px; }
.azioni-pagina { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0 0 8px; }
.azioni-pagina .pulsante { width: auto; padding: 12px 26px; }
.vuoto + .azioni-pagina { margin-top: 20px; }
.spunta + .spunta { margin-top: 12px; }
.prova-server { margin-top: 36px; padding-top: 16px; border-top: 1px solid rgba(13, 47, 102, .14); display: grid; gap: 10px; justify-items: start; }
.prova-server > div { display: grid; gap: 8px; width: 100%; }
.codice-grande { font-stretch: 112%; font-size: 1.5rem; font-weight: 650; letter-spacing: .08em; color: var(--cella); }
.codice { font-weight: 600; letter-spacing: .05em; white-space: nowrap; }
.conta {
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .8rem;
  text-align: center;
  color: var(--testo);
  background: var(--linea);
  transition: background .3s;
}
.linguette button[aria-pressed="true"] .conta { background: var(--sole); }

.elenco { display: grid; gap: 14px; overflow-x: auto; }
.riga-utente {
  padding: 20px 22px;
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  border-radius: 16px;
  transition: border-color .2s, box-shadow .3s;
  animation: entra .4s var(--curva) both;
}
.riga-utente.in-attivazione { border-color: var(--vetro); box-shadow: 0 22px 40px -26px rgba(13, 47, 102, .55); }
.riga-testa { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.riga-nome { display: block; font-stretch: 108%; font-size: 1.15rem; line-height: 1.25; }
.riga-sotto { margin: 2px 0 0; font-size: .95rem; color: var(--testo-2); }
.bollo { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.bollo.buono { color: #17603a; background: #dcf2e5; }
.bollo.attesa { color: #855600; background: #ffedc4; }
.bollo.fermo { color: var(--errore); background: #fbeceb; }
.dettagli { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 20px; margin: 18px 0 0; }
.dettagli dt { font-size: .8rem; color: var(--testo-2); }
.dettagli dd { margin: 1px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.riga-azioni { display: flex; align-items: center; gap: 22px; margin: 20px 0 0; }
.riga-azioni .pulsante { width: auto; padding: 11px 28px; }

.attivazione { margin: 20px 0 0; padding: 20px 0 0; border-top: 1.5px solid var(--linea); animation: entra .4s var(--curva) both; }
.attivazione .azioni { margin-top: 18px; }
.attivazione .azioni .pulsante:not(.leggero) { flex: none; width: auto; padding: 13px 26px; }
.pillole { display: flex; flex-wrap: wrap; gap: 8px; }
.pillole button {
  padding: 9px 16px;
  font-weight: 550;
  color: var(--testo-2);
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.pillole button[aria-pressed="true"] {
  color: var(--testo);
  border-color: var(--vetro);
  background: linear-gradient(120deg, rgba(255, 182, 46, .28), rgba(26, 86, 176, .12));
}
select {
  width: 100%;
  max-width: 32rem;
  font: inherit;
  color: inherit;
  padding: 12px 14px;
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  border-radius: 10px;
}
.vuoto { padding: 28px 24px; border: 1.5px dashed var(--linea); border-radius: 16px; }
.vuoto strong { font-size: 1.1rem; }
.vuoto p { margin: 4px 0 12px; color: var(--testo-2); }

.tabella {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--bianco);
  border: 1.5px solid var(--linea);
  border-radius: 16px;
}
.tabella th { padding: 13px 16px; text-align: left; font-size: .8rem; font-weight: 600; color: var(--testo-2); border-bottom: 1.5px solid var(--linea); }
.tabella td { padding: 13px 16px; vertical-align: middle; border-bottom: 1px solid #e6ecf4; }
.tabella tr:last-child td { border-bottom: 0; }
.cella-azione { text-align: right; white-space: nowrap; }

@media (max-width: 760px) {
  .barra-alta .marchio { font-size: .86rem; }
  .amm-testa .linguette { width: 100%; }
  .linguette button { padding: 9px 6px; font-size: .9rem; gap: 6px; }
  .chi-nome { display: none; }
  .pratica { flex-direction: column; align-items: stretch; }
  .pratica .stato, .scheda-testa .stato { width: 100%; }
  .scheda-testa { flex-direction: column; }
  .iter li { flex-wrap: wrap; }
  .azioni.tre { grid-template-columns: 1fr 1fr; }
  .azioni.tre .pulsante[type="submit"] { grid-column: 1 / -1; }
  .indirizzo-campi { grid-template-columns: 1fr 1fr; }
  .indirizzo-via { grid-template-columns: 1fr 1fr; grid-template-areas: "tipo civico" "nome nome"; }
  .indirizzo-via .campo:nth-child(1) { grid-area: tipo; }
  .indirizzo-via .campo:nth-child(2) { grid-area: nome; }
  .indirizzo-via .campo:nth-child(3) { grid-area: civico; }
  .nascita-campi { grid-template-columns: 1fr; }
  .indirizzo-campi .campo:first-child { grid-column: 1 / -1; }
  .scheda-dati { grid-template-columns: minmax(0, 1fr); }
  .post-it { margin-top: 4px; min-height: 220px; }
  .zona-elimina { flex-direction: column; align-items: stretch; }
  .terna-campi, .esito-calcolo { grid-template-columns: 1fr; }
  .dati-principali { grid-template-columns: 1fr; gap: 2px; }
  .dati-principali dd { margin-bottom: 8px; }
  .iter li > div { flex-basis: calc(100% - 44px); }
  .iter li .pulsante, .iter li .collegamento { margin-left: 44px; }
  .iter .posti .documento-azioni .collegamento { margin-left: 0; }
  .barra-alta .marchio span { display: none; }
  .spazio-attuale { max-width: 58vw; }
  .tabella, .tabella tbody, .tabella tr, .tabella td { display: block; }
  .tabella thead { display: none; }
  .tabella { background: none; border: 0; border-radius: 0; overflow: visible; }
  .tabella tr { margin: 0 0 12px; padding: 14px 16px; background: var(--bianco); border: 1.5px solid var(--linea); border-radius: 16px; }
  .tabella td { display: flex; gap: 12px; padding: 4px 0; border: 0; overflow-wrap: anywhere; }
  .tabella td::before { content: attr(data-etichetta); flex: 0 0 92px; padding-top: 2px; font-size: .8rem; color: var(--testo-2); }
  .tabella td:empty { display: none; }
  .tabella td.cella-azione { padding-top: 10px; text-align: left; }
  .tabella td.cella-azione::before { display: none; }
  .riga-azioni .pulsante { flex: 1; }
}

/* ---------- Movimenti ---------- */
@keyframes riflesso { to { transform: translateX(70%); } }
@keyframes alba { from { opacity: 0; transform: translate(14%, 14%) scale(.82); } }
@keyframes sale { from { opacity: 0; transform: translateY(18px); } }
@keyframes traccia { from { transform: scaleX(0); } }
@keyframes accende { from { transform: scale(.4); border-color: rgba(255, 255, 255, .45); background: #0a2654; box-shadow: none; } }
@keyframes pulsa { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes entra { from { opacity: 0; transform: translateX(28px); } }
@keyframes svanisce { to { opacity: 0; } }
@keyframes rientra { from { opacity: 0; transform: translateX(-28px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Schermi stretti ---------- */
@media (max-width: 900px) {
  .pagina { flex-direction: column; }
  .hero { flex: none; padding: 22px 20px 26px; gap: 22px; }
  .sole { width: 30%; translate: 52% -58%; }
  .marchio { max-width: 82%; font-size: .86rem; gap: 8px; }
  .marchio svg { width: 20px; height: 20px; }
  .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.7rem); }
  .presentazione { max-height: 40em; transition: max-height .6s var(--curva), opacity .35s; }
  .diapositiva[hidden] { display: none; }
  .diapositiva > p:not(.per), .tre-passi { font-size: 1rem; margin-top: 14px; }
  .presentazione-comandi { margin-top: 18px; }
  .freccia { width: 34px; height: 34px; }
  .percorso { max-height: 5em; transition: max-height .6s var(--curva), opacity .35s; }
  .tappa { font-size: .74rem; }
  .pannello { flex: 1 1 auto; align-items: flex-start; padding: 30px 20px 44px; }
  .pagina[data-vista="spazio"] .pannello { flex-basis: auto; }
  .pagina[data-vista="spazio"] .hero { gap: 0; padding-bottom: 20px; }
  .pagina[data-vista="spazio"] .presentazione,
  .pagina[data-vista="spazio"] .percorso { max-height: 0; opacity: 0; overflow: hidden; }
  .scelte { grid-template-columns: 1fr; gap: 12px; }
  .scelta { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; min-height: 0; padding: 16px; align-items: start; }
  .scelta svg { grid-row: span 2; width: 52px; height: 52px; padding: 9px; margin: 0; }
  .scelta strong { margin-bottom: 4px; }
  .coppia { grid-template-columns: 1fr; }
  h2 { font-size: 1.7rem; }
}

/* ---------- modifiche proposte ai dati, a pratica aperta ---------- */
.proposte { margin: 18px 0; }
.proposta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 12px 14px; margin: 8px 0; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--carta); }
.proposta.in-attesa { border-color: #e0a100; background: #fff8e8; }
.proposta.accettata { border-color: #2e7d32; }
.proposta.rifiutata, .proposta.superata { opacity: .8; }
.proposta-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proposta-testo .sotto { margin: 0; }
.proposta-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.proposta-azioni input { flex: 1 1 220px; min-width: 160px; }
.proposta-azioni .pulsante { width: auto; padding: 8px 18px; }
.proposte-decise { margin-top: 10px; }
.proposte-decise summary { cursor: pointer; color: var(--testo-2); }
.scheda-dati .amm-testa { align-items: baseline; }

/* ---------- lettura AI, nella gestione della piattaforma ---------- */
.lettura-ai .impostazioni-ai { max-width: 720px; margin: 14px 0 22px; }
.lettura-ai .impostazioni-ai .azioni .pulsante { width: auto; padding: 10px 22px; }
.prova-ai { margin: 12px 0; padding: 12px 14px; border: 2px dashed var(--vetro); border-radius: 12px; background: #f3f7fe; }
.prova-ai-comandi { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.prova-ai-comandi .pulsante { width: auto; padding: 8px 18px; }
.prova-ai-stato { margin: 8px 0; }
.prova-ai .tabella { margin-top: 8px; }