/* ============================================================
   CertoFlow — il foglio dell'attestato
   Pensato per la carta prima che per lo schermo: A4, margini veri,
   niente colori di sfondo che divorino il toner. Sullo schermo il foglio
   galleggia su un piano grigio, come un documento appoggiato al tavolo.
   ============================================================ */

body { background: var(--bg-2); }

.att-foglio {
  width: 210mm;
  min-height: 297mm;
  max-width: 100%;
  margin: 28px auto;
  padding: 22mm 20mm 16mm;
  background: #fff;
  color: #16211c;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

/* Sul foglio non si segue il tema scuro: la carta è bianca. */
.att-foglio, .att-foglio * { color-scheme: light; }

/* ---------- Testata ---------- */
.att-testata {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #16211c;
}

.att-ente-nome {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  color: #16211c;
}

.att-ente-meta { font-size: 11px; color: #5c6b64; margin: 3px 0 0; max-width: 44ch; }

.att-numero { text-align: right; display: grid; gap: 2px; }

.att-etichetta {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #7d8a84;
}

.att-numero-valore {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  color: #16211c;
}

/* ---------- Titolo ---------- */
.att-titolo {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  text-align: center;
  margin: 18px 0 4px;
  letter-spacing: -.012em;
  color: #16211c;
}

.att-titolo small {
  display: block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .02em;
  color: #5c6b64;
  margin-top: 6px;
}

/* ---------- Corpo ---------- */
.att-corpo { flex: 1; text-align: center; margin-top: 15px; }

.att-riga {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 6px;
  color: #2f3d37;
}

.att-intestatario {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  margin: 12px 0 2px;
  color: #16211c;
}

.att-identita { font-size: 12.5px; color: #5c6b64; margin: 0 0 14px; }

.att-corso {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  margin: 12px auto 14px;
  max-width: 34ch;
  color: #1f5f43;
  line-height: 1.25;
}

.att-norma {
  font-size: 12.5px;
  color: #5c6b64;
  margin: 18px auto 0;
  max-width: 62ch;
  padding-top: 12px;
  border-top: 1px solid #e0ddd3;
}

.att-contenuti {
  font-size: 12px;
  color: #5c6b64;
  margin: 8px auto 0;
  max-width: 66ch;
  text-align: left;
}

.att-validita { font-size: 13px; color: #2f3d37; margin: 12px auto 0; max-width: 60ch; }

/* ---------- Firme ---------- */
.att-firme {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 24px 0 16px;
}

.att-firma { text-align: center; }

.att-firma-riga { border-bottom: 1px solid #16211c; height: 34px; margin-bottom: 7px; }

.att-firma-ruolo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #2f3d37;
}

.att-firma-nome { display: block; font-size: 13px; color: #16211c; margin-top: 3px; }
.att-firma-meta { display: block; font-size: 10px; color: #7d8a84; margin-top: 1px; }

/* ---------- Piede: QR, verifica, organizzatore ---------- */
.att-piede {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding-top: 14px;
  border-top: 1px solid #e0ddd3;
}

.att-qr img { display: block; width: 132px; height: 132px; }

.att-verifica-titolo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #2f3d37;
  margin: 0 0 5px;
}

.att-verifica-url { font-size: 11.5px; color: #1f5f43; margin: 0 0 6px; word-break: break-all; }

.att-verifica-codici { font-size: 11.5px; color: #2f3d37; margin: 0 0 6px; }

.att-mono {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .06em;
}

/* CertoFlow resta un dettaglio: il documento è del cliente. */
.att-verifica-nota { font-size: 9.5px; color: #98a29c; margin: 0; letter-spacing: .04em; }

.att-organizzatore p { font-size: 11.5px; color: #2f3d37; margin: 0 0 3px; }
.att-qualifica { font-size: 10px !important; color: #7d8a84 !important; line-height: 1.4; }

/* ============================================================
   Il foglio della traduzione
   ------------------------------------------------------------
   Quando il discente non legge l'italiano, all'attestato si accoda un
   secondo foglio identico nella sua lingua. Non è un sottotitolo del
   primo: è un documento intero, e si legge come tale.
   Il primo tentativo metteva la traduzione riga per riga sotto l'italiano.
   Misurato: il foglio passava da 306 a 425 mm — due pagine A4 con la
   seconda mezza vuota. Da lì la scelta di separarli.
   ============================================================ */
.att-traduzione { border-top: 4px solid #1f5f43; }

/* La fascia che dice che cos'è questo foglio. Sta in cima perché la
   domanda «quale dei due vale?» va risolta prima di leggere, non dopo.
   ⚠️ Le due lingue vanno di seguito, non incolonnate: il foglio è un A4 e
   ogni millimetro speso qui è un millimetro tolto al documento. Misurato:
   incolonnate costavano 20 mm, di seguito ne costano 8. */
.att-nota-traduzione {
  margin: 0 0 12px;
  padding: 7px 12px;
  background: #f2f5f1;
  border: 1px solid #d5e0d6;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.45;
  color: #3d4a44;
  text-align: center;
}

.att-nota-alt { font-style: italic; color: #5c6b64; }
.att-nota-alt::before { content: " · "; font-style: normal; color: #a8b3ae; }

/* ⚠️ La fascia costa 15 mm, e il foglio della traduzione ha esattamente lo
   stesso contenuto di quello italiano: senza compensare, uscirebbe di A4 e
   si stamperebbe su due pagine. I 15 mm si riprendono dalla SPAZIATURA di
   questo foglio soltanto — mai dal corpo del carattere, che è la riga che
   il discente straniero legge davvero. */
.att-traduzione .att-titolo { margin-top: 8px; }
.att-traduzione .att-corpo { margin-top: 4px; }
.att-traduzione .att-firme { margin: 10px 0 10px; }
/* Lo spazio per firmare sta sul documento che si firma. Qui la riga resta
   perché il foglio si legga uguale, ma può essere più bassa. */
.att-traduzione .att-firma-riga { height: 24px; }

/* ---------- Stampa ---------- */
@page { size: A4; margin: 0; }

@media print {
  body { background: #fff; }
  .att-foglio {
    margin: 0;
    box-shadow: none;
    width: auto;
    min-height: auto;
    padding: 18mm 18mm 12mm;
  }
  .att-firma-riga { border-bottom-color: #000; }
  /* La traduzione è un foglio a sé: parte da pagina nuova, sempre. Senza
     questo si stamperebbe di seguito, e le due versioni si spezzerebbero
     a metà l'una nell'altra. */
  .att-traduzione { break-before: page; page-break-before: always; border-top: none; }
}

/* ---------- Schermi piccoli ---------- */
@media (max-width: 800px) {
  .att-foglio { width: auto; min-height: 0; padding: 24px 20px; margin: 0; box-shadow: none; }
  .att-testata { flex-direction: column; gap: 12px; }
  .att-numero { text-align: left; }
  .att-titolo { font-size: 26px; }
  .att-intestatario { font-size: 24px; }
  .att-firme { grid-template-columns: 1fr; gap: 18px; }
  .att-piede { grid-template-columns: 1fr; }
}

/* Il logo di chi eroga, in testa all'attestato. Altezza limitata perché
   la testata resti alta uguale con qualunque logo: un marchio quadrato e
   uno lungo e stretto non devono spostare tutto il resto. */
.att-logo {
  display: block;
  max-width: 220px;
  max-height: 64px;
  height: auto;
  width: auto;
  margin-bottom: 8px;
}