/* ============================================================
   Tessera fisica, formato ISO CR80: 85,6 × 54 mm.
   Misure in millimetri, non in pixel: il browser la manda alla Zebra
   come un foglio qualunque (stesso metodo di Tappito).
   FRONTE: logo al centro su colore di sfondo (azienda).
   RETRO: solo il nome, centrato (font per persona, dimensione e colore per azienda).
   ============================================================ */
.tessera {
  width: 85.6mm; height: 54mm; box-sizing: border-box; flex: 0 0 auto;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3.18mm; /* raggio ISO: solo a schermo, la plastica ce l'ha già */
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 6px 16px rgba(15, 23, 42, .10);
  break-inside: avoid; page-break-inside: avoid;
  /* Il browser di suo non stampa gli sfondi: su una tessera lo sfondo È la tessera */
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.tessera-fronte img { display: block; max-height: 72%; object-fit: contain; }
.tessera-fronte .tessera-azienda {
  color: #fff; font: 700 4.2mm/1.15 system-ui, sans-serif; text-align: center; padding: 0 6mm;
  overflow-wrap: anywhere; opacity: .95;
}
.tessera-retro { padding: 4mm 5mm; }
.tessera-nome {
  display: block; max-width: 100%; text-align: center; line-height: 1.12;
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.tessere-anteprima { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.tessere-anteprima figure { margin: 0; }
.tessere-anteprima figcaption { font-size: .78rem; color: var(--muted, #64748b); margin-top: 6px; text-align: center; }
@media screen and (max-width: 520px) {
  .tessere-anteprima { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
}