/* =====================================================================
   Scanner ed etichette
   ===================================================================== */

/* ---------------------------------------------------------------- */
/*  Scanner                                                          */
/* ---------------------------------------------------------------- */

.scanner { background: var(--inchiostro); }

.riquadro-video {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #000;
}

.inquadratura {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mirino: quattro angoli, non una cornice piena, così non copre il codice. */
.mirino {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(62%, 260px);
  aspect-ratio: 1;
  pointer-events: none;
  background:
    linear-gradient(var(--carta), var(--carta)) 0 0 / 28px 3px no-repeat,
    linear-gradient(var(--carta), var(--carta)) 0 0 / 3px 28px no-repeat,
    linear-gradient(var(--carta), var(--carta)) 100% 0 / 28px 3px no-repeat,
    linear-gradient(var(--carta), var(--carta)) 100% 0 / 3px 28px no-repeat,
    linear-gradient(var(--carta), var(--carta)) 0 100% / 28px 3px no-repeat,
    linear-gradient(var(--carta), var(--carta)) 0 100% / 3px 28px no-repeat,
    linear-gradient(var(--carta), var(--carta)) 100% 100% / 28px 3px no-repeat,
    linear-gradient(var(--carta), var(--carta)) 100% 100% / 3px 28px no-repeat;
}

.stato-scanner {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  color: #9fb0bd;
  font-size: 14px;
}

.stato-scanner.errore-scanner { color: #ff9aa8; }

.affiancati { display: flex; gap: var(--sp-2); }
.affiancati input { flex: 1; }
.affiancati .pulsante { width: auto; flex-shrink: 0; }

/* ---------------------------------------------------------------- */
/*  Etichette a schermo                                              */
/* ---------------------------------------------------------------- */

.foglio {
  display: grid;
  gap: 2mm;
  padding: var(--sp-4);
  max-width: 720px;
  margin: 0 auto;
  background: var(--carta);
}

.foglio.f-piccola { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.foglio.f-grande  { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.etichetta {
  display: flex;
  align-items: center;
  gap: 3mm;
  padding: 2.5mm;
  border: 1px solid var(--riga);
  background: #fff;
  overflow: hidden;
}

.etichetta .qr { flex-shrink: 0; line-height: 0; }
.etichetta .qr svg { display: block; }

.f-piccola .etichetta .qr svg { width: 20mm; height: 20mm; }
.f-grande  .etichetta .qr svg { width: 32mm; height: 32mm; }

.etichetta .testi { min-width: 0; }

.et-codice {
  font-family: var(--mono);
  font-weight: 600;
  line-height: 1.15;
  color: var(--inchiostro);
}

.et-titolo {
  line-height: 1.2;
  margin-top: 1mm;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.et-sotto { color: var(--attenuato); line-height: 1.2; margin-top: 0.6mm; }

.f-piccola .et-codice { font-size: 11pt; }
.f-piccola .et-titolo { font-size: 8pt; }
.f-piccola .et-sotto  { font-size: 6.5pt; }

.f-grande .et-codice { font-size: 16pt; }
.f-grande .et-titolo { font-size: 11pt; }
.f-grande .et-sotto  { font-size: 8.5pt; }

/* ---------------------------------------------------------------- */
/*  Stampa                                                           */
/* ---------------------------------------------------------------- */

@page { size: A4; margin: 8mm; }

@media print {
  /* Resta in pagina solo il foglio di etichette. */
  .testata, .navigazione, .filtri, .non-stampare, .avviso { display: none !important; }

  html, body {
    background: #fff;
    padding: 0;
    margin: 0;
  }

  .foglio {
    padding: 0;
    margin: 0;
    max-width: none;
    background: #fff;
    gap: 0;
  }

  /* Misure fisse: nella finestra di stampa va disattivato
     l'adattamento alla pagina, o il browser le riscala. */
  .foglio.f-piccola { grid-template-columns: repeat(3, 63.5mm); }
  .foglio.f-grande  { grid-template-columns: repeat(2, 96mm); }

  .f-piccola .etichetta { height: 38.1mm; }
  .f-grande  .etichetta { height: 67.7mm; }

  .etichetta {
    border: 0.2mm dashed #999;   /* traccia di taglio */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .et-codice, .et-titolo { color: #000; }
  .et-sotto { color: #444; }
}