/* NIA — il sistema grafico comune a tutte le pagine interne e dell'area cliente.
   Colori di NIA, tema chiaro, Montserrat. Regola del magenta: e' l'unico colore
   acceso, solo per l'azione primaria e per cio' che e' "in lavorazione adesso".
   Tutto il resto e' nero NIA. Il Checkup pubblico ha il suo tema scuro. */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap");

/* I colori di NIA (niamarketing.it): nero #04020D, magenta #E6007E, bianco.
   Tema chiaro per chi ci lavora ore; il magenta resta l'unico colore acceso.
   I nomi dei token restano quelli di prima (carta, inchiostro, minio) per
   non toccare le pagine: cambiano i valori. */
:root {
  --carta: #f6f5f8;       /* fondo: bianco appena velato */
  --foglio: #ffffff;      /* superfici appoggiate sopra */
  --carta-2: #edebf1;     /* incassi, hover, campi */
  --filetto: #e1dee7;     /* righe e bordi */
  --filetto-2: #c8c3d1;
  --inchiostro: #04020d;  /* nero NIA: testo */
  --inchiostro-2: #4a4556;/* testo secondario (8.6:1 su fondo) */
  --inchiostro-3: #6b6576;/* metadati (5.3:1 su fondo) */
  --minio: #e6007e;       /* magenta NIA: fondi, timbri, azione primaria */
  --minio-testo: #b5005f; /* magenta per testo piccolo (6.3:1) */
  --minio-velo: #fde3f0;
  --verde: #3d6b3a;       /* fatto */
  --verde-velo: #dfe8d6;
  --ocra: #8a5a0f;        /* attenzione (testo) */
  --ocra-velo: #f1e2c2;

  --serif: "Montserrat", "Segoe UI", system-ui, sans-serif; /* i titoli: Montserrat pesante */
  --sans: "Montserrat", "Segoe UI", system-ui, sans-serif;

  --r: 6px;               /* un solo raggio */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --moto: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--inchiostro);
  background: var(--carta);
  min-height: 100dvh;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--minio); color: var(--foglio); }
input, textarea, select, button { font: inherit; color: inherit; caret-color: var(--minio); }
a { color: inherit; text-decoration-color: var(--filetto-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--minio); }
:focus-visible { outline: 2px solid var(--minio); outline-offset: 2px; border-radius: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--filetto-2) transparent; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

h1, h2, .titolo { font-family: var(--serif); font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.05; }
h2 { font-size: 22px; line-height: 1.2; }
h3 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.meta { font-size: 13px; color: var(--inchiostro-3); }
.sotto { color: var(--inchiostro-2); max-width: 62ch; }

/* --- testata comune --------------------------------------------------- */
.testata {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s5);
  height: 60px; padding: 0 var(--s5);
  background: color-mix(in srgb, var(--carta) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--filetto);
}
.marchio { font-family: var(--serif); font-weight: 900; font-size: 22px; line-height: 1; text-decoration: none; display: flex; align-items: baseline; gap: 2px; }
.marchio i { width: 7px; height: 7px; background: var(--minio); border-radius: 50%; }
.marchio small { font-family: var(--sans); font-size: 13px; color: var(--inchiostro-3); margin-left: var(--s3); }
.voci { display: flex; gap: var(--s1); margin-left: auto; }
.voci a {
  padding: 8px 12px; border-radius: var(--r); text-decoration: none;
  font-size: 14px; font-weight: 500; color: var(--inchiostro-2);
}
.voci a:hover { background: var(--carta-2); color: var(--inchiostro); }
.voci a[aria-current="page"] { color: var(--inchiostro); box-shadow: inset 0 -2px 0 var(--minio); border-radius: 0; }
@media (max-width: 640px) {
  .testata { gap: var(--s3); padding: 0 var(--s4); }
  .marchio small { display: none; }
  .voci { overflow-x: auto; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: var(--s5); }
  .voci a { padding: 8px; }
}

/* --- impaginato --------------------------------------------------------- */
.pagina { max-width: 1180px; margin: 0 auto; padding: var(--s7) var(--s5) var(--s8); }
.pagina.stretta { max-width: 760px; }
.apertura { padding-bottom: var(--s6); margin-bottom: var(--s6); border-bottom: 1px solid var(--filetto); }
.apertura .sotto { margin-top: var(--s3); font-size: 17px; }
.sezione { margin-top: var(--s7); }
.sezione > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
@media (max-width: 640px) { .pagina { padding: var(--s5) var(--s4) var(--s7); } }

/* --- foglio: il pannello. Niente ombre: bordo e carta piu' chiara --------- */
.foglio { background: var(--foglio); border: 1px solid var(--filetto); border-radius: var(--r); padding: var(--s5); }
.foglio + .foglio { margin-top: var(--s4); }

/* --- righe di registro -------------------------------------------------- */
.registro { list-style: none; border-top: 1px solid var(--filetto); }
.registro > li, .registro > .voce { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--filetto); min-width: 0; }
.registro .cresce { flex: 1; min-width: 0; }
a.voce, .registro > a { color: inherit; text-decoration: none; transition: background .2s var(--moto); }
a.voce:hover, .registro > a:hover { background: var(--carta-2); }

/* barra di completezza: sottile, inchiostro; ocra se scarsa */
.barra { height: 3px; background: var(--filetto); border-radius: 2px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--inchiostro); }
.barra.scarsa > span { background: var(--ocra); }

/* --- bottoni ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 40px; padding: 0 var(--s4); border-radius: var(--r);
  border: 1px solid var(--filetto-2); background: var(--foglio);
  font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background .2s var(--moto), border-color .2s var(--moto), transform .1s;
}
.btn:hover { background: var(--carta-2); border-color: var(--inchiostro-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primario { background: var(--minio); border-color: var(--minio); color: #ffffff; }
.btn.primario:hover { background: #c8006d; border-color: #c8006d; }
.btn.inchiostro { background: var(--inchiostro); border-color: var(--inchiostro); color: #ffffff; }
.btn.inchiostro:hover { background: #1d1a28; }
.btn.piccolo { min-height: 32px; padding: 0 var(--s3); font-size: 13px; }
.btn.nudo { border-color: transparent; background: transparent; }
.btn.nudo:hover { background: var(--carta-2); }

/* --- campi -------------------------------------------------------------- */
.etichetta { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.campo {
  width: 100%; min-height: 40px; padding: 8px 12px;
  background: var(--foglio); border: 1px solid var(--filetto-2); border-radius: var(--r);
  font-size: 15px; transition: border-color .2s, box-shadow .2s;
}
.campo::placeholder { color: var(--inchiostro-3); }
.campo:hover { border-color: var(--inchiostro-3); }
.campo:focus { outline: none; border-color: var(--inchiostro); box-shadow: 0 0 0 3px var(--minio-velo); }
textarea.campo { min-height: 88px; resize: vertical; line-height: 1.5; }
select.campo {
  appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--inchiostro-2) 50%), linear-gradient(135deg, var(--inchiostro-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- timbro: lo stato di lavorazione (il segno di NIA) ------------------- */
.timbro {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border: 1.5px solid currentColor; border-radius: 3px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5;
  color: var(--inchiostro-3); white-space: nowrap;
}
.timbro.in-corso { color: var(--minio-testo); background: var(--minio-velo); }
.timbro.in-corso::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--minio); animation: respiro 2.4s var(--moto) infinite; }
.timbro.fatto { color: var(--verde); background: var(--verde-velo); }
.timbro.attenzione { color: var(--ocra); background: var(--ocra-velo); }
@keyframes respiro { 50% { opacity: .35; } }

/* --- fonte di un dato ---------------------------------------------------- */
.fonte { font-size: 12px; color: var(--inchiostro-3); white-space: nowrap; }
.fonte.tua { color: var(--verde); font-weight: 600; }

/* --- stati: caricamento, vuoto, errore ----------------------------------- */
.vuoto { padding: var(--s6) var(--s4); text-align: center; color: var(--inchiostro-2); border: 1px dashed var(--filetto-2); border-radius: var(--r); }
.errore { color: var(--minio-testo); font-size: 14px; }
.scheletro { background: linear-gradient(90deg, var(--carta-2) 0 40%, var(--foglio) 50%, var(--carta-2) 60% 100%); background-size: 300% 100%; animation: luce 1.4s linear infinite; border-radius: var(--r); min-height: 16px; }
@keyframes luce { to { background-position: -150% 0; } }

/* --- avviso a scomparsa -------------------------------------------------- */
.avviso {
  position: fixed; left: 50%; bottom: var(--s5); transform: translate(-50%, 16px); opacity: 0;
  padding: 10px 16px; border-radius: var(--r); background: var(--inchiostro); color: var(--carta);
  font-size: 14px; transition: opacity .3s var(--moto), transform .3s var(--moto); pointer-events: none; z-index: 50;
}
.avviso.visibile { opacity: 1; transform: translate(-50%, 0); }

.piede { max-width: 1180px; margin: 0 auto; padding: var(--s5); border-top: 1px solid var(--filetto); font-size: 13px; color: var(--inchiostro-3); }

@media (prefers-reduced-motion: reduce) {
  .timbro.in-corso::before, .scheletro { animation: none; }
  .btn, .campo, .avviso { transition: none; }
}