/* LIFEX CheckUp — un monitor vitale per le aziende.
   Il colore "vita" segue la salute dell'azienda aperta (o la media dello studio): verde, ambra, rosso.
   Movimento solo dove racconta qualcosa (battito, tracciato, sfondo); tabelle e moduli restano fermi. */

@font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/geist-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/geist-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600 800; font-style: normal; font-display: swap; src: url("fonts/geist-sans-latin-600-normal.woff2") format("woff2"); }

@property --vita { syntax: "<color>"; inherits: true; initial-value: #10d9a0; }
@property --vita-2 { syntax: "<color>"; inherits: true; initial-value: #22c3ee; }
@property --vita-3 { syntax: "<color>"; inherits: true; initial-value: #6d7cff; }

:root {
  --notte: #0a1120;
  --notte-2: #111b2e;
  --carta: #f3f5f9;
  --foglio: rgba(255, 255, 255, 0.86);
  --inchiostro: #0f1b2d;
  --inchiostro-chiaro: #9fb0c4;
  --testo: #172235;
  --tenue: #5a6779;
  --riga: rgba(15, 27, 45, 0.09);
  --timbro: #d93a3a;
  --entrata: #0e9f6e;
  --ambra: #e8930c;
  --fuoco: #4f7cff;
  --raggio: 10px;
  --raggio-grande: 20px;
  --ombra: 0 1px 2px rgba(15, 27, 45, 0.04), 0 12px 32px -16px rgba(15, 27, 45, 0.22);
  --ombra-alta: 0 2px 4px rgba(15, 27, 45, 0.05), 0 22px 48px -18px rgba(15, 27, 45, 0.32);
  --battito: 0.97s;
  --vita: #10d9a0; --vita-2: #22c3ee; --vita-3: #6d7cff;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--testo);
  background: var(--carta);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
body[data-salute="ok"] { --vita: #10d9a0; --vita-2: #22c3ee; --vita-3: #6d7cff; }
body[data-salute="attenzione"] { --vita: #f5a524; --vita-2: #ff7a3d; --vita-3: #f0c419; }
body[data-salute="critico"] { --vita: #ff4d5e; --vita-2: #ff7a3d; --vita-3: #c026d3; }
body[data-salute="nd"] { --vita: #7c93b5; --vita-2: #38bdf8; --vita-3: #8b7cff; }
body { transition: --vita 1.2s ease, --vita-2 1.2s ease, --vita-3 1.2s ease; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; position: relative; overflow-x: hidden; }
h1 { font-size: 1.9rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; margin: 0; color: var(--inchiostro); }
h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.75rem; color: var(--inchiostro); }
p { margin: 0 0 0.75rem; max-width: 72ch; }
a { color: var(--inchiostro); text-underline-offset: 3px; }
a:hover { color: var(--fuoco); }
small { font-size: 0.8rem; }
code, .codice { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.85rem; }
:focus-visible { outline: 3px solid var(--fuoco); outline-offset: 2px; border-radius: 4px; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tenue { color: var(--tenue); }
.nota { color: var(--tenue); font-size: 0.875rem; }
.negativo { color: var(--timbro); }

/* ---------------------------------------------------------------- sfondo vivo */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bolla { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.22; will-change: transform; }
.bolla-1 { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: var(--vita); animation: deriva-1 24s ease-in-out infinite alternate; }
.bolla-2 { width: 38vw; height: 38vw; right: -10vw; top: 18vh; background: var(--vita-2); animation: deriva-2 30s ease-in-out infinite alternate; }
.bolla-3 { width: 34vw; height: 34vw; left: 30vw; bottom: -20vw; background: var(--vita-3); animation: deriva-3 36s ease-in-out infinite alternate; opacity: 0.16; }
@keyframes deriva-1 { to { translate: 8vw 6vh; scale: 1.15; } }
@keyframes deriva-2 { to { translate: -10vw 10vh; scale: 0.9; } }
@keyframes deriva-3 { to { translate: 6vw -8vh; scale: 1.2; } }
.aurora .bolla { animation-name: deriva-1, respiro; animation-duration: 24s, 14s; animation-direction: alternate; animation-iteration-count: infinite; }
.aurora .bolla-2 { animation-name: deriva-2, respiro; animation-duration: 30s, 18s; }
.aurora .bolla-3 { animation-name: deriva-3, respiro; animation-duration: 36s, 22s; }
@keyframes respiro { from { filter: blur(70px) hue-rotate(-14deg); } to { filter: blur(80px) hue-rotate(14deg); } }

/* ---------------------------------------------------------------- marchio */
.logo { width: 30px; height: 30px; flex: none; overflow: visible; }
.logo-gemma { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.logo-faccia { fill: none; stroke: currentColor; stroke-width: 0.9; opacity: 0.35; }
.logo-ecg {
  fill: none; stroke: var(--vita); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; filter: drop-shadow(0 0 3px var(--vita));
  animation: traccia-logo calc(var(--battito) * 3) linear infinite;
}
@keyframes traccia-logo { 0% { stroke-dashoffset: 100; } 55%, 100% { stroke-dashoffset: 0; } }
.marchio-nome { font-weight: 400; letter-spacing: -0.01em; }
.marchio-nome b { font-weight: 800; letter-spacing: 0.04em; }

/* ---------------------------------------------------------------- testata */
.testata {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 2rem;
  padding: 0 1.5rem; height: 62px;
  background: rgba(10, 17, 32, 0.93); color: #fff;
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.testata::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--vita), var(--vita-2), transparent);
  opacity: 0.7;
}
.marchio { display: flex; align-items: center; gap: 0.65rem; color: #fff; text-decoration: none; white-space: nowrap; min-width: 0; }
.marchio:hover { color: #fff; }
.marchio-studio { color: #8fa1ba; font-size: 0.85rem; padding-left: 0.65rem; border-left: 1px solid rgba(255, 255, 255, 0.15); overflow: hidden; text-overflow: ellipsis; max-width: 18rem; }
.menu { display: flex; gap: 0.25rem; flex: 1; overflow-x: auto; }
.menu a, .esci { color: #c3cfde; text-decoration: none; padding: 0.42rem 0.8rem; border-radius: 999px; white-space: nowrap; font-size: 0.95rem; transition: background 0.2s, color 0.2s; }
.menu a:hover, .esci:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.menu a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.chi { color: #c3cfde; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }

.barra-azienda {
  position: sticky; top: 62px; z-index: 19;
  display: flex; align-items: center; gap: 1.5rem; padding: 0 1.5rem; min-height: 52px;
  background: rgba(255, 255, 255, 0.74); border-bottom: 1px solid var(--riga);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.azienda-nome { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; color: var(--inchiostro); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22rem; }
.menu-azienda { display: flex; gap: 0.15rem; overflow-x: auto; }
.menu-azienda a { color: var(--tenue); text-decoration: none; padding: 0.85rem 0.75rem; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.2s, border-color 0.2s; }
.menu-azienda a:hover { color: var(--inchiostro); }
.menu-azienda a[aria-current="page"] { color: var(--inchiostro); border-bottom-color: var(--vita); font-weight: 600; }

/* La spia: batte al ritmo dello stato di salute */
.spia { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--vita); flex: none; display: inline-block; box-shadow: 0 0 0 0 var(--vita); animation: pulsa var(--battito) ease-out infinite; }
@keyframes pulsa {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vita) 70%, transparent); transform: scale(1); }
  14% { transform: scale(1.25); }
  28% { transform: scale(1); }
  100% { box-shadow: 0 0 0 9px transparent; }
}

/* ---------------------------------------------------------------- pagina */
.pagina { max-width: 1120px; margin: 0 auto; padding: 2rem 1.5rem 4rem; position: relative; }
.intestazione { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.introduzione { color: var(--tenue); margin-top: -0.75rem; margin-bottom: 1.5rem; }
.stretta { max-width: 560px; }
.blocco, .vuoto, .modulo-esporta, .richiesta, .bilancio, .modulo-fattura fieldset {
  background: var(--foglio); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: var(--raggio-grande);
  box-shadow: var(--ombra);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.blocco { padding: 1.4rem 1.6rem; margin-bottom: 1.5rem; }
.griglia-due { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.griglia-due > .blocco { margin-bottom: 1.5rem; }
.vuoto { padding: 2rem 1.6rem; }

.avviso { padding: 0.8rem 1.1rem; border-radius: var(--raggio); border: 1px solid color-mix(in srgb, var(--entrata) 30%, transparent); background: color-mix(in srgb, var(--entrata) 10%, white); margin-bottom: 1.5rem; max-width: none; }
.avviso-errore { border-color: color-mix(in srgb, var(--timbro) 30%, transparent); background: color-mix(in srgb, var(--timbro) 9%, white); }
.errore-campo { display: block; color: var(--timbro); font-size: 0.8rem; margin-top: 0.25rem; font-weight: 500; }

/* Comparsa morbida allo scorrimento (solo con JS attivo) */
.js .rivela { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(.2, .7, .2, 1), transform 0.7s cubic-bezier(.2, .7, .2, 1); }
.js .rivela.visibile { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- bottoni e campi */
button, .primario, .secondario {
  font: inherit; font-weight: 600; cursor: pointer; display: inline-block; text-decoration: none;
  padding: 0.62rem 1.15rem; border-radius: var(--raggio); border: 1px solid rgba(15, 27, 45, 0.16);
  background: #fff; color: var(--inchiostro);
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.primario { background: var(--inchiostro); color: #fff; border-color: var(--inchiostro); box-shadow: 0 6px 18px -8px rgba(15, 27, 45, 0.6); }
.primario:hover { color: #fff; background: #1b2c46; box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--vita) 70%, transparent); transform: translateY(-1px); }
.secondario:hover, button:hover { background: #f1f4f9; }
.primario:hover { background: #1b2c46; }
button:active, .primario:active, .secondario:active { transform: translateY(0) scale(0.98); }

input, select, textarea {
  font: inherit; width: 100%; padding: 0.6rem 0.7rem; color: var(--testo);
  border: 1px solid rgba(15, 27, 45, 0.16); border-radius: var(--raggio); background: rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--fuoco); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fuoco) 15%, transparent); outline: none; }
input[type="radio"], input[type="checkbox"] { width: auto; accent-color: var(--inchiostro); }
label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--tenue); }
label > input, label > select, label > textarea { margin-top: 0.3rem; }

/* ---------------------------------------------------------------- accesso: schermo del monitor */
:root:has(body.senza-menu) { background: var(--notte); }
.senza-menu { color: #e8eef7; }
.senza-menu .aurora .bolla { opacity: 0.38; }
.senza-menu .pagina { display: grid; place-items: center; align-content: center; gap: 1.5rem; min-height: 100vh; padding-top: 2rem; }
.schermo-accesso { position: fixed; inset: 0; z-index: -1; display: grid; align-items: center; pointer-events: none; }
.tracciato-sfondo { width: 100%; height: 34vh; opacity: 0.55; }
.marchio-accesso { display: flex; align-items: center; gap: 0.8rem; color: #fff; font-size: 1.6rem; background: none; border: 0; padding: 0.4rem 0.8rem; border-radius: 16px; cursor: pointer; }
.marchio-accesso:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.logo-grande { width: 52px; height: 52px; }
.versione { font-size: 0.72rem; color: rgba(255, 255, 255, 0.35); margin: 0; letter-spacing: 0.04em; }
.accesso .nota a { color: var(--inchiostro); }
.accesso {
  width: min(430px, 100%); padding: 2.1rem; border-radius: 24px;
  background: rgba(255, 255, 255, 0.94); color: var(--testo);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.4);
  animation: entra 0.8s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes entra { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
.accesso h1 { margin-bottom: 0.75rem; }
.senza-menu .avviso { width: min(430px, 100%); margin: 0; color: var(--testo); }
.modulo-stretto { display: grid; gap: 1rem; margin-top: 1.25rem; }
.codice { background: #eef2f6; padding: 0.75rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; border-radius: var(--raggio); max-height: 28rem; }
.elenco-stato { padding: 0; list-style: none; margin: 1rem 0 1.5rem; }
.elenco-stato li { padding: 0.4rem 0 0.4rem 1.5rem; position: relative; }
.elenco-stato li::before { content: ""; position: absolute; left: 0; top: 0.8rem; width: 10px; height: 10px; border-radius: 50%; background: var(--timbro); }
.elenco-stato li.fatto::before { background: var(--entrata); }

/* ---------------------------------------------------------------- tracciato ECG */
.tracciato { display: block; width: 100%; overflow: visible; }
.ecg-base { fill: none; stroke: var(--vita); stroke-opacity: 0.18; stroke-width: 2; vector-effect: non-scaling-stroke; }
.ecg-luce {
  fill: none; stroke: var(--vita); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 160 840;
  filter: drop-shadow(0 0 6px var(--vita)) drop-shadow(0 0 14px var(--vita));
  animation: scorre-ecg calc(var(--battito) * 8) linear infinite;
}
@keyframes scorre-ecg { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- monitor (cartella e studio) */
.monitor {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 0% 0%, var(--notte-2), var(--notte) 60%);
  color: #e8eef7; border-radius: 28px; padding: 2.2rem 2.4rem 1.2rem; margin-bottom: 2.2rem;
  box-shadow: 0 30px 70px -30px rgba(10, 17, 32, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.monitor-sfondo { position: absolute; inset: 0; z-index: -2; }
.monitor-sfondo .bolla { opacity: 0.45; filter: blur(60px); }
.monitor-sfondo .bolla-1 { width: 420px; height: 420px; left: auto; right: -80px; top: -160px; }
.monitor-sfondo .bolla-2 { width: 360px; height: 360px; right: auto; left: -120px; top: 60%; }
.monitor-testa { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.monitor h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -0.035em; margin-bottom: 0.6rem; }
.sopratitolo { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 600; color: #8fa1ba; margin-bottom: 0.5rem; }
.monitor-stato { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 1.05rem; padding: 0.35rem 0.9rem 0.35rem 0.75rem; border-radius: 999px; background: color-mix(in srgb, var(--vita) 16%, transparent); color: color-mix(in srgb, var(--vita) 55%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vita) 35%, transparent); margin-bottom: 0.7rem; }
.monitor-frase { color: #b8c5d6; margin-bottom: 1rem; }
.monitor-conti { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; list-style: none; padding: 0; margin: 0; color: #8fa1ba; font-size: 0.9rem; }
.monitor-conti strong { font-size: 1.5rem; color: #fff; margin-right: 0.3rem; font-weight: 700; }
.conto-ok strong { color: #4ff0bd; }
.conto-attenzione strong { color: #ffc35c; }
.conto-critico strong { color: #ff7683; }
.monitor-traccia { position: relative; margin: 1.4rem -2.4rem 0; height: 90px; }
.monitor-traccia .tracciato { height: 90px; }
.bpm { position: absolute; right: 2.4rem; bottom: 0.2rem; font-size: 0.8rem; color: #8fa1ba; display: flex; align-items: center; gap: 0.35rem; }
.bpm strong { color: #fff; font-size: 1rem; }
button.bpm { font: inherit; font-size: 0.8rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 0.3rem 0.8rem; color: #8fa1ba; cursor: pointer; bottom: 0; }
button.bpm:hover { background: rgba(255, 255, 255, 0.12); color: #fff; transform: none; }
.ascolta { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; color: var(--vita); margin-left: 0.2rem; }
.suono { background: none; border: 0; padding: 0.4rem; border-radius: 999px; color: #c3cfde; line-height: 0; }
.suono:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.suono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.suono .altoparlante { fill: currentColor; }
.suono[aria-pressed="true"] .muto, .suono[aria-pressed="false"] .onde { display: none; }
.cuore { color: var(--vita); display: inline-block; animation: batte var(--battito) ease-out infinite; text-shadow: 0 0 10px var(--vita); }
@keyframes batte { 0%, 40%, 100% { transform: scale(1); } 12% { transform: scale(1.35); } 24% { transform: scale(1.08); } 30% { transform: scale(1.22); } }

.anello { position: relative; width: 150px; height: 150px; flex: none; }
.anello-grande { width: 190px; height: 190px; }
.anello svg { width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.anello-fondo { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 9; }
.anello-valore {
  fill: none; stroke: var(--vita); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: var(--valore) 100; filter: drop-shadow(0 0 8px var(--vita));
  animation: riempi 1.6s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes riempi { from { stroke-dasharray: 0 100; } }
.anello-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.anello-centro strong { font-size: 3.1rem; font-weight: 700; color: #fff; letter-spacing: -0.04em; line-height: 1; }
.anello:not(.anello-grande) .anello-centro strong { font-size: 2.4rem; }
.anello-centro span { font-size: 0.75rem; color: #8fa1ba; text-transform: uppercase; letter-spacing: 0.12em; margin-top: 0.3rem; }

/* parametri vitali */
.titolo-sezione { font-size: 1.15rem; margin: 0 0 1rem; display: flex; align-items: center; gap: 0.6rem; }
.etichetta-arrivo { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tenue); background: rgba(15, 27, 45, 0.06); padding: 0.2rem 0.6rem; border-radius: 999px; }
.vitali { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 2.2rem; }
.vitale {
  --tono: var(--entrata);
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1.15rem 1.25rem 1.1rem; border-radius: var(--raggio-grande); text-decoration: none; color: var(--testo);
  background: var(--foglio); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: var(--ombra);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform 0.25s cubic-bezier(.2, .7, .2, 1), box-shadow 0.25s;
}
.vitale::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--tono), transparent); }
.vitale::after { content: ""; position: absolute; width: 140px; height: 140px; right: -60px; top: -60px; border-radius: 50%; background: var(--tono); opacity: 0.08; filter: blur(10px); transition: opacity 0.3s; }
a.vitale:hover { transform: translateY(-4px); box-shadow: var(--ombra-alta); color: var(--testo); }
a.vitale:hover::after { opacity: 0.18; }
.vitale-attenzione { --tono: var(--ambra); }
.vitale-critico { --tono: var(--timbro); }
.vitale-nd, .vitale-futuro { --tono: var(--inchiostro-chiaro); }
.vitale .spia { --vita: var(--tono); }
.vitale-ok .spia, .vitale-nd .spia, .vitale-futuro .spia { animation: none; }
.vitale-nome { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--tenue); }
.vitale-valore { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.03em; color: var(--inchiostro); line-height: 1.2; }
.vitale-spiega { font-size: 0.85rem; color: var(--tenue); line-height: 1.4; }
.vitale-esito { margin-top: auto; padding-top: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tono); }
.vitale-futuro { background: rgba(255, 255, 255, 0.5); border-style: dashed; border-color: rgba(15, 27, 45, 0.14); box-shadow: none; }
.vitale-futuro .vitale-nome { color: var(--inchiostro); font-size: 0.95rem; }
.avvertenza { max-width: 80ch; }

/* lista aziende: polso */
.cella-salute { width: 1%; white-space: nowrap; }
.polso { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.7rem 0.25rem 0.55rem; border-radius: 999px; text-decoration: none; font-weight: 700; --tono: var(--entrata); background: color-mix(in srgb, var(--tono) 12%, white); color: color-mix(in srgb, var(--tono) 80%, black); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono) 25%, transparent); }
.polso .spia { --vita: var(--tono); width: 8px; height: 8px; }
.polso-ok .spia, .polso-nd .spia { animation: none; }
.polso-attenzione { --tono: var(--ambra); }
.polso-critico { --tono: var(--timbro); }
.polso-critico .spia { animation-duration: 0.5s; }
.polso-nd { --tono: #7c8ca3; }
.cella-salute small { display: block; margin-top: 0.2rem; }
.riga-salute td:first-child { box-shadow: inset 3px 0 0 transparent; }
.riga-critico td:first-child { box-shadow: inset 3px 0 0 var(--timbro); }
.riga-attenzione td:first-child { box-shadow: inset 3px 0 0 var(--ambra); }
.tabella-aziende tbody tr { transition: background 0.2s; }
.tabella-aziende tbody tr:hover { background: rgba(15, 27, 45, 0.025); }

/* ---------------------------------------------------------------- situazione (conti) */
.scelta-anno select { width: auto; font-weight: 600; }
.bilancio { padding: 1.75rem 1.6rem 1.3rem; margin-bottom: 1.5rem; }
.bilancio-lati { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.lato { display: flex; flex-direction: column; }
.lato-ricevute { text-align: right; align-items: flex-end; }
.lato-nome { font-weight: 600; color: var(--tenue); }
.lato-cifra { font-size: clamp(1.8rem, 4.5vw, 2.8rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--inchiostro); }
.lato-ricevute .lato-cifra { color: #4f6680; }
.lato-nota { font-size: 0.85rem; color: var(--tenue); }
.bilancio-barra { display: flex; height: 12px; margin: 1.25rem 0 0.9rem; border-radius: 999px; overflow: hidden; background: #dfe6ef; }
.barra-emesse { background: linear-gradient(90deg, var(--inchiostro), #34507a); border-right: 2px solid #fff; border-radius: 999px 0 0 999px; }
.barra-ricevute { flex: 1; background: var(--inchiostro-chiaro); }
.bilancio-esito { margin: 0; color: var(--tenue); }
.bilancio-esito strong { color: var(--testo); font-size: 1.1rem; }

.righe-cifre { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; margin: 0 0 1rem; }
.righe-cifre dt { color: var(--tenue); }
.righe-cifre dd { margin: 0; text-align: right; }
.righe-cifre .totale { font-weight: 700; color: var(--testo); border-top: 1px solid var(--riga); padding-top: 0.5rem; }

.scadenze { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.scadenze li { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--riga); align-items: baseline; }
.scad-data { font-weight: 600; }
.scad-chi small { display: block; color: var(--tenue); }
.scad-importo { text-align: right; white-space: nowrap; font-size: 0.9rem; }
.entrata { color: var(--entrata); }
.uscita { color: var(--timbro); }

.mesi { display: grid; gap: 0.4rem; }
.mese { display: grid; grid-template-columns: 2.5rem 1fr 8.5rem; gap: 0.75rem; align-items: center; }
.mese-nome { color: var(--tenue); font-size: 0.85rem; }
.mese-barre { display: grid; gap: 3px; }
.mb { display: block; height: 8px; min-width: 1px; border-radius: 999px; transform-origin: left; }
.js .visibile .mb { animation: cresce 1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes cresce { from { transform: scaleX(0); } }
.mb-emesse { background: linear-gradient(90deg, var(--inchiostro), #34507a); }
.mb-ricevute { background: var(--inchiostro-chiaro); }
.mese-cifre { text-align: right; font-size: 0.8rem; line-height: 1.25; }
.legenda { margin: 1rem 0 0; font-size: 0.85rem; color: var(--tenue); display: flex; gap: 0.5rem; align-items: center; }
.punto { width: 10px; height: 10px; display: inline-block; border-radius: 50%; }
.punto-emesse { background: var(--inchiostro); }
.punto-ricevute { background: var(--inchiostro-chiaro); margin-left: 0.75rem; }

/* ---------------------------------------------------------------- tabelle */
.scorre { overflow-x: auto; background: var(--foglio); border-radius: var(--raggio-grande); box-shadow: var(--ombra); border: 1px solid rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tabella { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabella th { text-align: left; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tenue); padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--riga); white-space: nowrap; }
.tabella td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--riga); vertical-align: top; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.blocco .tabella td { padding-left: 0; }
.blocco .tabella th { padding-left: 0; }
.tabella small { display: block; }
.num { text-align: right; white-space: nowrap; }
.verso { display: inline-block; min-width: 1.6rem; font-size: 0.75rem; font-weight: 700; color: var(--tenue); }
.verso-emessa { color: var(--inchiostro); }
.pagine { display: flex; gap: 1rem; justify-content: center; margin-top: 1.25rem; align-items: center; }

/* ---------------------------------------------------------------- archivio */
.riga-caricamento { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin: 1rem 0 0.5rem; }
.riga-caricamento input { width: auto; flex: 1; min-width: 14rem; background: #f8fafb; border-style: dashed; }
.esito-import { margin-top: 1rem; border-top: 1px solid var(--riga); padding-top: 0.75rem; }
.esito-import summary { cursor: pointer; font-weight: 600; }
.esito-import ul { font-size: 0.875rem; padding-left: 1.25rem; }
.filtri { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.filtri label { min-width: 9rem; }
.filtri .cresce { flex: 1; min-width: 14rem; }

/* ---------------------------------------------------------------- moduli */
.modulo-fattura fieldset { margin: 0 0 1.5rem; padding: 1.3rem 1.6rem; }
.modulo-fattura legend { font-weight: 600; color: var(--inchiostro); padding: 0; float: left; width: 100%; margin-bottom: 1rem; font-size: 1.05rem; }
.modulo-fattura legend + * { clear: both; }
.campi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 0.75rem; }
.campi .largo { grid-column: span 2; }
.scelta-cliente { display: flex; gap: 1.5rem; margin-bottom: 1rem; }
.scelta-cliente label { display: flex; gap: 0.5rem; align-items: center; color: var(--testo); font-size: 1rem; }
.cliente-privato .solo-azienda, .cliente-azienda .solo-privato { display: none; }

.righe { display: grid; gap: 0.5rem; margin-bottom: 0.75rem; }
.riga, .riga-intestazione { display: grid; grid-template-columns: minmax(0, 3fr) 5rem 4.5rem 7rem 11rem auto; gap: 0.5rem; align-items: start; }
.riga-intestazione span { font-size: 0.8rem; font-weight: 500; color: var(--tenue); }
.riga select + select { margin-top: 0.3rem; }
.togli { padding: 0.55rem 0.7rem; border-color: var(--riga); color: var(--tenue); font-weight: 500; margin-top: 0.3rem; }
.totale-vivo { margin: 1rem 0 0; font-weight: 600; }
.azioni { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.azioni .nota { margin: 0; max-width: 46ch; }
.modulo-fattura > .azioni { margin-bottom: 2rem; }
.esito-fattura { box-shadow: var(--ombra), inset 0 3px 0 var(--entrata); }
.esito-fattura details { margin-top: 1rem; }

/* ---------------------------------------------------------------- studio */
.da-fare { color: var(--timbro); font-weight: 500; }
.tabella small.da-fare { display: block; }
.tabella-aziende .apri { font-weight: 600; }
.nuova-azienda { margin-top: 1.5rem; }
.riga-modulo { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.riga-modulo label { min-width: 12rem; }
.riga-modulo .cresce { flex: 1; min-width: 16rem; }
.link-invito { box-shadow: var(--ombra), inset 0 3px 0 var(--entrata); }
.riga-copia { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.riga-copia input { font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; background: #f8fafb; }
.azioni-riga { width: 1%; }
.azioni-riga form { display: flex; gap: 0.4rem; justify-content: flex-end; white-space: nowrap; }
.piccolo { padding: 0.35rem 0.7rem; font-size: 0.85rem; font-weight: 500; }
.tabella tr.spento td { color: var(--tenue); }
.scelta-aziende { margin-bottom: 0.75rem; }
.etichetta { font-size: 0.875rem; font-weight: 500; color: var(--tenue); margin-bottom: 0.4rem; }
.spunta { display: flex; gap: 0.5rem; align-items: center; color: var(--testo); font-size: 0.95rem; padding: 0.2rem 0; }
.spunta input { width: auto; }
.modulo-fattura + .tabella, .scorre + .modulo-fattura { margin-top: 1.5rem; }

/* ---------------------------------------------------------------- esportazione */
.modulo-esporta { padding: 1.3rem 1.6rem; }
.scorciatoie { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.scorciatoie button { border-radius: 999px; font-weight: 500; padding: 0.45rem 0.95rem; }
.scorciatoie [aria-pressed="true"] { background: var(--inchiostro); color: #fff; }
.modulo-esporta .riga-modulo label { min-width: 10rem; }
.modulo-esporta .nota { margin-top: 0.9rem; }
.azioni-studio { margin: 1rem 0 0; }

/* ---------------------------------------------------------------- richieste */
.richiesta { --tono: var(--inchiostro-chiaro); padding: 1.2rem 1.6rem; margin-bottom: 1rem; box-shadow: var(--ombra), inset 4px 0 0 var(--tono); }
.richiesta-in-ritardo { --tono: var(--timbro); }
.richiesta-consegnata { --tono: var(--entrata); }
.richiesta-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.richiesta-testa h2 { margin: 0; font-size: 1.1rem; }
.stato { font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.65rem; border-radius: 999px; background: #eef2f6; color: var(--inchiostro); white-space: nowrap; }
.stato-in-ritardo { background: color-mix(in srgb, var(--timbro) 12%, white); color: var(--timbro); }
.stato-consegnata { background: color-mix(in srgb, var(--entrata) 12%, white); color: var(--entrata); }
.richiesta-meta { color: var(--tenue); font-size: 0.9rem; margin: 0.35rem 0 0.5rem; }
.richiesta-meta strong { color: var(--testo); }
.richiesta-descr { margin-bottom: 0.5rem; }
.nota-studio { background: #fbf3e4; border-left: 3px solid #c08a2b; border-radius: 0 var(--raggio) var(--raggio) 0; padding: 0.5rem 0.75rem; font-size: 0.9rem; }
.file-caricati { list-style: none; padding: 0; margin: 0.5rem 0; }
.file-caricati li { padding: 0.25rem 0; font-size: 0.95rem; }
.richiesta .riga-caricamento { margin: 0.75rem 0 0; }
.azioni-richiesta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--riga); }
.azioni-richiesta .riapri { display: flex; gap: 0.4rem; flex: 1; min-width: 18rem; }
.azioni-richiesta .riapri input { flex: 1; }
.azioni-richiesta form:last-child { margin-left: auto; }
.storico summary { cursor: pointer; font-weight: 600; color: var(--inchiostro); }
.storico ul { padding-left: 1.2rem; margin: 0.75rem 0 0; }
.storico li { padding: 0.2rem 0; }
.riepilogo-richieste { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; color: var(--tenue); }
.riepilogo-richieste strong { font-size: 1.6rem; color: var(--inchiostro); margin-right: 0.25rem; }
.conteggio-ritardo strong { color: var(--timbro); }
.pallino { display: block; font-size: 0.85rem; white-space: nowrap; }
.pallino::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--inchiostro-chiaro); margin-right: 0.4rem; vertical-align: 1px; }
.pallino-ritardo { color: var(--timbro); font-weight: 500; }
.pallino-ritardo::before { background: var(--timbro); }
.pallino-ok { color: var(--entrata); font-weight: 500; }
.pallino-ok::before { background: var(--entrata); }

/* ---------------------------------------------------------------- due passaggi */
.passi { padding-left: 1.2rem; margin: 0 0 1rem; }
.passi li { padding: 0.2rem 0; }
.qr { width: 220px; max-width: 100%; margin: 0.5rem auto 0.75rem; background: #fff; }
.qr svg { display: block; width: 100%; height: auto; }
.manuale summary { cursor: pointer; font-size: 0.875rem; color: var(--tenue); }
.segreto { display: block; margin-top: 0.4rem; font-size: 1rem; letter-spacing: 0.08em; word-break: break-all; }
.campo-codice { font-size: 1.6rem; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- mobile */
@media (max-width: 860px) {
  .testata { flex-wrap: wrap; height: auto; padding: 0.7rem 1rem; gap: 0.4rem 1rem; position: relative; }
  .barra-azienda { position: relative; top: 0; }
  .menu { order: 3; flex-basis: 100%; }
  .esci { margin-left: auto; }
  .chi, .marchio-studio { display: none; }
  .azioni-riga form { flex-direction: column; align-items: stretch; }
  .barra-azienda { flex-wrap: wrap; gap: 0; padding: 0.5rem 1rem 0; }
  .azienda-nome { flex-basis: 100%; }
  .pagina { padding: 1.25rem 1rem 3rem; }
  .griglia-due { grid-template-columns: 1fr; gap: 0; }
  .campi { grid-template-columns: 1fr 1fr; }
  .riga-intestazione { display: none; }
  .riga { grid-template-columns: 1fr 1fr; padding-bottom: 0.75rem; border-bottom: 1px solid var(--riga); }
  .riga label:first-child { grid-column: 1 / -1; }
  .riga .nascosto { position: static; width: auto; height: auto; clip: auto; font-size: 0.8rem; }
  .lato-ricevute { text-align: left; align-items: flex-start; }
  .mese { grid-template-columns: 2.2rem 1fr 6.5rem; }
  .scadenze li { grid-template-columns: 1fr auto; }
  .scad-data { grid-column: 1 / -1; }
  .monitor { padding: 1.6rem 1.3rem 1rem; border-radius: 22px; }
  .monitor-testa { flex-direction: column-reverse; align-items: flex-start; gap: 1.2rem; }
  .anello-grande { width: 140px; height: 140px; }
  .anello-grande .anello-centro strong { font-size: 2.4rem; }
  .monitor-traccia { margin: 1rem -1.3rem 0; }
  .bpm { right: 1.3rem; }
  .bolla { filter: blur(50px); }
}

/* Chi ha chiesto meno movimento al sistema lo ottiene: resta il colore, sparisce l'animazione */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rivela { opacity: 1; transform: none; }
  .ecg-luce { stroke-dasharray: none; }
  .logo-ecg { stroke-dasharray: none; }
}

/* ---------------------------------------------------------------- home pubblica */
.home { background: var(--carta); }
.home .pagina { max-width: 1180px; padding-top: 0; }
.home .aurora .bolla { opacity: 0.28; }
.home-testata { display: flex; align-items: center; gap: 2rem; padding: 1.1rem 0; }
.home-marchio { display: flex; align-items: center; gap: 0.6rem; color: var(--inchiostro); text-decoration: none; font-size: 1.15rem; }
.home-marchio .logo { color: var(--inchiostro); }
.home-menu { display: flex; gap: 0.25rem; flex: 1; justify-content: center; flex-wrap: wrap; }
.home-testata .primario { margin-left: -1.25rem; }
.home-prezzo strong { white-space: nowrap; }
.registrati-attesa { text-align: left; }
.home-menu a { color: var(--tenue); text-decoration: none; padding: 0.4rem 0.8rem; border-radius: 999px; font-size: 0.95rem; }
.home-menu a:hover { color: var(--inchiostro); background: rgba(15, 27, 45, 0.06); }
.grande { padding: 0.85rem 1.5rem; font-size: 1.05rem; border-radius: 14px; }

.home-apertura { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding: 3.5rem 0 4rem; }
.home-apertura h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); letter-spacing: -0.04em; line-height: 1.05; margin: 0.4rem 0 1.2rem; }
.evidenza { background: linear-gradient(90deg, var(--vita), var(--vita-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-sotto { font-size: 1.15rem; color: var(--tenue); max-width: 54ch; margin-bottom: 1.6rem; }
.home-azioni { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.home-nota { max-width: 52ch; }
.monitor-demo { margin: 0; padding-bottom: 1rem; }
.monitor-demo .demo-nome { color: #fff; font-size: 1.7rem; letter-spacing: -0.03em; margin-bottom: 0.6rem; }
.monitor-demo .monitor-traccia { height: 80px; }

.home-blocco { padding: 3.5rem 0; border-top: 1px solid var(--riga); }
.home-titolo { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.03em; line-height: 1.15; max-width: 26ch; margin-bottom: 1.6rem; }
.home-intro { font-size: 1.1rem; color: var(--tenue); margin: -0.8rem 0 1.6rem; }
.home-tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.home-carta { background: var(--foglio); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--raggio-grande); box-shadow: var(--ombra); padding: 1.5rem 1.6rem; backdrop-filter: blur(10px); }
.home-carta h3, .home-passi h3 { font-size: 1.15rem; letter-spacing: -0.015em; margin: 0.8rem 0 0.5rem; color: var(--inchiostro); }
.home-carta p, .home-passi p { color: var(--tenue); margin: 0; max-width: none; }
.home-numero { display: inline-grid; place-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--inchiostro); color: #fff; font-weight: 700; }
.home-problema .home-numero { background: var(--timbro); }
.home-passi { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.home-passi li { padding: 1.5rem 1.6rem; border-radius: var(--raggio-grande); background: var(--foglio); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: var(--ombra); }
.home-passi .home-numero { background: linear-gradient(135deg, var(--vita), var(--vita-2)); color: var(--notte); }
.home .vitali { margin-bottom: 0; }
.home .vitale-spiega { font-size: 0.92rem; color: var(--testo); }
.home .vitale-nome { color: var(--inchiostro); font-size: 0.95rem; }

.home-insieme { background: radial-gradient(120% 140% at 0% 0%, var(--notte-2), var(--notte) 60%); color: #e8eef7; border-radius: 28px; padding: 3rem 2.6rem; margin: 1rem 0; border: 0; box-shadow: 0 30px 70px -30px rgba(10, 17, 32, 0.75); }
.home-insieme h2 { color: #fff; font-size: 1.7rem; letter-spacing: -0.03em; margin: 0.3rem 0 0.8rem; }
.home-insieme p { color: #b8c5d6; max-width: none; }
.home-due { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.home-regola { margin: 2rem 0 0; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.12); color: #8fa1ba !important; font-size: 0.95rem; }

.home-piani { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.home-piano { background: var(--foglio); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--raggio-grande); box-shadow: var(--ombra); padding: 1.8rem 1.8rem 1.6rem; display: flex; flex-direction: column; }
.home-piano-forte { box-shadow: var(--ombra-alta), inset 0 3px 0 var(--vita); }
.home-piano h3 { margin: 0 0 0.4rem; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tenue); }
.home-prezzo { color: var(--tenue); margin-bottom: 1.2rem; }
.home-prezzo strong { font-size: 2.6rem; color: var(--inchiostro); letter-spacing: -0.04em; margin-right: 0.3rem; }
.home-piano ul { list-style: none; padding: 0; margin: 0 0 1.6rem; flex: 1; }
.home-piano li { padding: 0.45rem 0 0.45rem 1.6rem; position: relative; border-bottom: 1px solid var(--riga); }
.home-piano li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 9px; height: 9px; border-radius: 50%; background: var(--vita); }
.home-piano a { text-align: center; }

.home-assistito-testo { max-width: 860px; }
.home-assistito .home-intro { margin-top: -0.6rem; }
.home-elenco { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; gap: 0.7rem; }
.home-elenco li { padding-left: 1.8rem; position: relative; color: var(--tenue); font-size: 1.05rem; }
.home-elenco li::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--vita), var(--vita-2)); }
.home-elenco strong { color: var(--inchiostro); }
.home-finale { text-align: center; padding: 4rem 0; }
.home-finale h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.03em; max-width: 30ch; margin: 0 auto 1.5rem; }
.home-piede { border-top: 1px solid var(--riga); padding: 2rem 0 1rem; color: var(--tenue); font-size: 0.9rem; }
.home-piede p { max-width: none; margin-bottom: 0.3rem; }

@media (max-width: 860px) {
  .home-testata { flex-wrap: wrap; gap: 0.75rem 1rem; }
  .home-menu { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .home-accedi { margin-left: auto; }
  .home-testata .primario { margin-left: 0; }
  .home-apertura { grid-template-columns: 1fr; gap: 2rem; padding: 1.5rem 0 3rem; }
  .home-tre, .home-passi, .home-piani, .home-due { grid-template-columns: 1fr; }
  .home-blocco.home-insieme { padding: 2rem 1.4rem; border-radius: 22px; }
  .home-blocco { padding: 2.5rem 0; }
}

/* ---------------------------------------------------------------- collegamenti azienda-professionisti */
.banda-collegamenti { display: flex; align-items: center; gap: 0.75rem; justify-content: center; flex-wrap: wrap; padding: 0.7rem 1.5rem; background: color-mix(in srgb, var(--ambra) 14%, white); border-bottom: 1px solid color-mix(in srgb, var(--ambra) 30%, transparent); font-weight: 500; }
.banda-collegamenti .spia { --vita: var(--ambra); }
.richieste-collegamento { box-shadow: var(--ombra), inset 0 3px 0 var(--ambra); }
.collegamento { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.75rem 0; border-bottom: 1px solid var(--riga); }
.collegamento:last-child { border-bottom: 0; }
.collegamento small { display: block; }
.collegamento .azioni { gap: 0.4rem; }
.modulo-collega { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--riga); }
.modulo-collega h3 { margin: 0 0 0.9rem; font-size: 1rem; color: var(--inchiostro); }
.modulo-collega .campi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nuova-azienda .modulo-collega { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 860px) { .modulo-collega .campi { grid-template-columns: 1fr; } .modulo-collega .campi .largo { grid-column: auto; } }

/* ---------------------------------------------------------------- home: tema notte (niente bianco morto) */
:root:has(body.home) { background: var(--notte); }
.home { background: transparent; color: #c9d4e3; }
.home .aurora .bolla { opacity: 0.32; filter: blur(90px); }
.home .aurora .bolla-1 { width: 60vw; height: 60vw; }
.home .aurora .bolla-3 { opacity: 0.26; }
.home h1, .home h2, .home h3, .home .home-titolo { color: #fff; }
.home .sopratitolo { color: var(--vita); }
.home .nota, .home .tenue, .home .home-intro, .home .home-sotto { color: #9fb0c4; }
.home-marchio, .home-marchio:hover, .home-marchio .logo { color: #fff; }
.home-menu a { color: #b8c5d6; }
.home-menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.home .secondario { background: rgba(255, 255, 255, 0.04); color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.home .secondario:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.home .primario { background: linear-gradient(135deg, var(--vita), var(--vita-2)); color: #04131c; border: 0; box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--vita) 80%, transparent); }
.home .primario:hover { background: linear-gradient(135deg, var(--vita-2), var(--vita)); color: #04131c; box-shadow: 0 14px 40px -10px var(--vita); }
.home-blocco { border-top-color: rgba(255, 255, 255, 0.08); }

/* carte di vetro scuro */
.home .home-carta, .home .home-passi li, .home .vitale, .home .home-piano {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #c9d4e3;
}
.home .home-carta p, .home .home-passi p, .home .vitale-spiega { color: #a9b7c9; }
.home .vitale-nome { color: #fff; }
.home .vitale::after { opacity: 0.18; }
.home a.vitale:hover, .home .home-carta:hover, .home .home-passi li:hover { border-color: color-mix(in srgb, var(--vita) 40%, transparent); }
.home .home-carta, .home .home-passi li { transition: border-color 0.3s, transform 0.3s; }
.home .home-carta:hover, .home .home-passi li:hover { transform: translateY(-3px); }
.home-problema .home-numero { background: linear-gradient(135deg, #ff4d5e, #ff7a3d); }
.home .home-elenco li { color: #a9b7c9; }
.home .home-elenco strong { color: #fff; }

/* azienda e professionisti: riquadro con bordo luminoso */
.home .home-insieme { background: linear-gradient(160deg, rgba(16, 217, 160, 0.10), rgba(109, 124, 255, 0.10)), rgba(10, 17, 32, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); }

/* prezzi */
.home .home-piano h3 { color: #9fb0c4; }
.home .home-prezzo, .home .home-prezzo strong { color: #fff; }
.home .home-piano li { border-bottom-color: rgba(255, 255, 255, 0.08); }
.home .home-piano-forte { border-color: color-mix(in srgb, var(--vita) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--vita) 30%, transparent), 0 30px 80px -30px color-mix(in srgb, var(--vita) 60%, transparent); }

/* sezione finale con alone */
.home-finale { position: relative; }
.home-finale::before { content: ""; position: absolute; inset: 10% 20%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--vita) 30%, transparent), transparent); filter: blur(30px); }
.home-piede { border-top-color: rgba(255, 255, 255, 0.08); color: #8496ad; }
.home-piede a { color: #c9d4e3; }

/* la cartella di esempio si stacca dallo sfondo */
.home .monitor-demo { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 100px -30px color-mix(in srgb, var(--vita) 45%, transparent); }

/* ---------------------------------------------------------------- iscrizione, verifica, guida */
.iscrizione-scelta .scelta { display: block; padding: 1rem 1.1rem; margin-bottom: 0.75rem; border-radius: 14px; border: 1px solid var(--riga); text-decoration: none; color: var(--testo); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.iscrizione-scelta .scelta:hover { border-color: var(--vita); transform: translateY(-2px); box-shadow: var(--ombra); color: var(--testo); }
.iscrizione-scelta .scelta strong { display: block; color: var(--inchiostro); margin-bottom: 0.2rem; }
.iscrizione-scelta .scelta span { font-size: 0.9rem; color: var(--tenue); }
.iscrizione { width: min(480px, 100%); }
.iscrizione .spunta { align-items: flex-start; font-size: 0.9rem; }
.iscrizione .spunta input { margin-top: 0.2rem; }
.avviso-attenzione { border-color: color-mix(in srgb, var(--ambra) 40%, transparent); background: color-mix(in srgb, var(--ambra) 12%, white); }
.verifica .blocco { margin-top: 1rem; }

.guida { background: var(--foglio); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--raggio-grande); box-shadow: var(--ombra-alta), inset 0 3px 0 var(--vita); padding: 1.5rem 1.6rem 1.1rem; margin-bottom: 2rem; backdrop-filter: blur(10px); }
.guida-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.guida-testa h2 { font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 0.3rem; }
.guida-testa .sopratitolo { color: var(--tenue); }
.guida-avanzamento { min-width: 190px; text-align: right; }
.guida-avanzamento strong { display: block; font-size: 1.1rem; color: var(--inchiostro); margin-bottom: 0.4rem; }
.guida-barra { display: block; height: 10px; border-radius: 999px; background: rgba(15, 27, 45, 0.08); overflow: hidden; }
.guida-barra span { display: block; height: 100%; width: var(--fatto); border-radius: 999px; background: linear-gradient(90deg, var(--vita), var(--vita-2)); transition: width 1s; }
.guida-passi { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.guida-passi li { display: grid; grid-template-columns: 36px 1fr auto; gap: 0.9rem; align-items: start; padding: 0.9rem 1rem; border-radius: 14px; border: 1px solid var(--riga); background: rgba(255, 255, 255, 0.6); }
.guida-passi li.prossimo { border-color: color-mix(in srgb, var(--vita) 55%, transparent); box-shadow: 0 10px 30px -18px var(--vita); }
.guida-passi li.fatto { opacity: 0.6; padding: 0.6rem 1rem; }
.guida-passi h3 { margin: 0.35rem 0 0.4rem; font-size: 1rem; color: var(--inchiostro); }
.guida-passi li.fatto h3 { margin: 0.4rem 0; text-decoration: line-through; text-decoration-color: rgba(15, 27, 45, 0.3); }
.guida-passi p { margin: 0 0 0.3rem; font-size: 0.9rem; color: var(--tenue); max-width: 80ch; }
.guida-passi p strong { color: var(--testo); }
.guida-numero { display: inline-grid; place-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(15, 27, 45, 0.08); color: var(--inchiostro); font-weight: 700; }
.guida-passi li.prossimo .guida-numero { background: linear-gradient(135deg, var(--vita), var(--vita-2)); color: var(--notte); }
.guida-passi li.fatto .guida-numero { background: var(--entrata); color: #fff; }
.guida-passi .piccolo { margin-top: 0.3rem; white-space: nowrap; }
.guida-chiudi { text-align: right; margin-top: 0.8rem; }
@media (max-width: 860px) { .guida-passi li { grid-template-columns: 32px 1fr; } .guida-passi li > a { grid-column: 2; justify-self: start; } .guida-avanzamento { text-align: left; } }