/* ============================================================
   CertoFlow — pagina pubblica di verifica
   Chi la legge è in piedi, col telefono, e ha trenta secondi.
   L'esito deve essere leggibile a un metro di distanza.
   ============================================================ */

.verifica-testata { padding: 62px 0 44px; background: var(--panel); border-bottom: 1px solid var(--line); }
.verifica-testata h1 { font-size: clamp(32px, 5vw, 46px); margin-bottom: 12px; }

/* ---------- Esito ---------- */
.verifica-esito {
  padding: 54px 0 46px;
  border-bottom: 1px solid var(--line);
  border-top: 6px solid var(--ink-4);
  background: var(--panel);
}

.esito-titolo { font-size: clamp(30px, 5vw, 46px); margin-bottom: 10px; }
.esito-testo { font-size: 18px; max-width: 62ch; margin-bottom: 20px; }
.esito-codice { margin: 0; }
.esito-codice .code { font-size: 20px; color: var(--ink-2); }

.esito-ok   { border-top-color: var(--good); }
.esito-ok   .esito-titolo { color: var(--good-ink); }
.esito-warn { border-top-color: var(--warn); }
.esito-warn .esito-titolo { color: var(--warn-ink); }
.esito-bad  { border-top-color: var(--bad); }
.esito-bad  .esito-titolo { color: var(--bad-ink); }

/* ---------- Il documento ---------- */
.documento {
  margin: 40px 0 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 32px;
  box-shadow: var(--shadow);
}

.documento-testata { padding-bottom: 20px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.documento-testata .eyebrow { color: var(--ink-3); }
.documento-titolo { font-size: clamp(23px, 3.4vw, 30px); margin: 8px 0 8px; }
.documento-norma { font-size: 14px; color: var(--ink-3); margin: 0; }

.dati { margin: 0; padding: 0; }

.dato {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-2);
}

.dato dt {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
  padding-top: 2px;
}

.dato dd { margin: 0; font-size: 17px; color: var(--ink); }

/* ---------- Conferma del nominativo ----------
   È un blocco a sé: chi controlla sta facendo un'altra cosa rispetto al
   leggere l'attestato, e deve vedere dove comincia. Senza il riquadro,
   il campo di ricerca sembrava la continuazione dei dati sopra.
   ⚠️ Classe usata da luglio e mai definita: il blocco non si distingueva
   in nulla dal resto della pagina (vedi tests/classi_css.test.js). */
.conferma {
  margin-top: 30px;
  padding: 22px 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.conferma .firme-titolo { margin-top: 0; }

/* La riga che spiega la regola della conferma — «ti diremo soltanto se
   corrisponde» — è la ragione per cui questo campo non è una violazione
   della privacy. Va letta, quindi si distingue dal testo corrente. */
.conferma-spiega {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 16px;
  max-width: 62ch;
}

/* ---------- Firme ---------- */
.firme-titolo {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-3);
  font-family: var(--font);
  margin: 30px 0 14px;
}

.firme { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.firma {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  background: var(--seal-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.firma-ruolo {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--seal-ink);
}
.firma-nome { font-size: 17px; font-weight: 600; color: var(--ink); }
.firma-meta { font-size: 13px; color: var(--ink-3); }


/* ---------- Modulo di ricerca ---------- */
.cerca { margin-top: 26px; max-width: 540px; }

.cerca-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.cerca-riga { display: flex; gap: 10px; flex-wrap: wrap; }

.cerca-campo {
  flex: 1 1 260px;
  min-height: var(--ctl-h);
  padding: 11px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 18px;
  text-transform: uppercase;
}
.cerca-campo::placeholder { color: var(--ink-4); letter-spacing: .08em; }
.cerca-campo:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.cerca-aiuto { font-size: 14px; color: var(--ink-3); margin: 10px 0 0; }

.rifai { padding: 8px 0 64px; border-top: 1px solid var(--line); margin-top: 30px; padding-top: 30px; }

@media (max-width: 640px) {
  .dato { grid-template-columns: 1fr; gap: 3px; }
  .documento { padding: 24px 20px; }
  .verifica-testata { padding: 40px 0 32px; }
}