/* ============================================================================
   LO SCONTRINO STAMPABILE
   ----------------------------------------------------------------------------
   Questo foglio e' accodato con media="print": a schermo non esiste nemmeno
   come regola, e il browser non lo usa per calcolare niente.

   LA REGOLA CHE GOVERNA TUTTO
   ---------------------------
   Qui dentro i millimetri sono millimetri VERI. Un mm del CSS vale un mm
   sulla carta finche' si stampa al 100%, e questo foglio esiste solo per
   quello: ogni misura che riguarda il righello e le sagome e' in mm, mai
   in rem, mai in px, mai in percentuale. Un valore relativo infilato qui
   dentro e' un rotolo ordinato sbagliato.

   Il testo invece sta in pt, che e' l'unita' della stampa.
   ========================================================================= */

@page {
  size: A4 portrait;
  /* Il margine lo decide la pagina, non la stampante: i margini
     "predefiniti" dei browser variano di qualche millimetro, e qualche
     millimetro qui dentro e' esattamente l'errore che si sta cercando di
     togliere al cliente. */
  margin: 14mm 12mm;
}

/* ── Si stampa questo, e nient'altro ─────────────────────────────────────
   display:none su tutto il resto e non visibility:hidden: nascosto ma
   presente lascia pagine bianche in coda, e una pagina bianca in piu' e'
   una carta sprecata a chi di mestiere vende carta.                      */

@media print {

  /* La seconda cintura: il foglio prende il posto della pagina SOLO se
     la pagina contiene davvero lo scontrino. Se un giorno il foglio
     finisse dove il blocco non c'e', non si stampa un foglio bianco: si
     stampa la pagina, come prima di tutto questo. */
  body:has([data-rt-scontrino]) > *     { display: none !important; }
  body:has([data-rt-scontrino]) > [data-rt-scontrino] { display: block !important; }

  html, body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #000;
    font-family: var(--rt-font);
    -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  }

  /* ── Il foglio ─────────────────────────────────────────────────────────
     Largo 110 mm, che non e' un numero scelto per estetica: e' la piu'
     larga delle carte a catalogo. Lo scontrino e' largo quanto il rotolo
     piu' largo che vendiamo, e il righello dentro ci sta per intero.    */

  [data-rt-scontrino] {
    display: block;
    width: 130mm;
    margin: 0 auto;
    padding: 0;
    color: #000;
    font-size: 8.5pt;
    line-height: 1.35;
  }

  [data-rt-scontrino] * { box-sizing: border-box; }

  /* ── Lo strappo ───────────────────────────────────────────────────────
     La dentellatura vera dello scontrino, fatta con due gradienti conici
     affiancati che si ripetono ogni 4 mm. Un bordo tratteggiato sarebbe
     stato piu' semplice e avrebbe detto "qui si taglia"; questo dice
     "questo e' uno scontrino", che e' un'altra cosa.                    */

  .rt-sc__strappo {
    height: 2.4mm;
    background:
      repeating-linear-gradient(135deg, #000 0 0.25mm, transparent 0.25mm 2.83mm),
      repeating-linear-gradient(225deg, #000 0 0.25mm, transparent 0.25mm 2.83mm);
    background-size: 4mm 2.4mm;
    opacity: 0.55;
  }
  .rt-sc__strappo--su  { margin-bottom: 5mm; }
  .rt-sc__strappo--giu { margin-top: 6mm; }

  /* ── Testa ────────────────────────────────────────────────────────────*/

  .rt-sc__testa {
    text-align: center;
    padding-bottom: 3mm;
    border-bottom: 0.35mm solid #000;
  }
  .rt-sc__testa strong {
    display: block;
    font-size: 13pt;
    font-weight: 800;
    letter-spacing: 0.18em;
  }
  .rt-sc__testa span {
    display: block;
    margin-top: 1mm;
    font-size: 8pt;
  }
  .rt-sc__data { font-size: 7pt !important; opacity: 0.6; }

  /* ── Le etichette di sezione ──────────────────────────────────────────*/

  .rt-sc__et {
    margin: 6mm 0 2mm;
    font-size: 7pt;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .rt-sc__nota {
    margin: 2mm 0 0;
    font-size: 7.5pt;
    line-height: 1.4;
  }
  .rt-sc__nota b { font-weight: 800; }

  /* ── La taratura ──────────────────────────────────────────────────────
     Sta per prima perche' se la scala e' sbagliata tutto il resto e'
     peggio che inutile: e' sbagliato con l'aria di essere giusto.      */

  .rt-sc__taratura { break-inside: avoid; }
  /* NIENTE BORDI QUI DENTRO, e la ragione e' un errore misurato.
     Con border-left e border-right la riga fra i due trattini misurava
     99,48 mm invece di 100: i bordi mangiavano la larghezza da dentro, e
     non si capiva piu' se "questa riga" fosse da bordo esterno o da
     bordo interno. Mezzo millimetro non si vede a occhio, ma uno
     strumento di taratura che lascia un dubbio non e' uno strumento.

     Ora: il contenitore e' largo 100 mm netti, la riga lo attraversa
     tutto, e i due trattini sono fondi disegnati DENTRO ai due estremi.
     Da fuori a fuori: 100,0 mm, senza interpretazioni. */
  .rt-sc__cento {
    position: relative;
    width: 100mm;
    height: 6mm;
  }
  .rt-sc__cento::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0.3mm;
    background: #000;
  }
  .rt-sc__cento::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(#000, #000) left  / 0.3mm 100% no-repeat,
      linear-gradient(#000, #000) right / 0.3mm 100% no-repeat;
  }
  .rt-sc__cento span {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 2mm;
    background: #fff;
    font-size: 7.5pt;
    font-weight: 800;
  }

  /* ── Il righello ──────────────────────────────────────────────────────
     Tre gradienti ripetuti, non centoventi elementi: un gradiente
     ripetuto non accumula errore di arrotondamento, centoventi div
     allineati a mano si'. La tacca del millimetro e' alta 2 mm, quella
     dei cinque 3,4 mm, quella dei dieci arriva in fondo.               */

  .rt-sc__righello { break-inside: avoid; }
  .rt-sc__scala {
    position: relative;
    width: 120mm;
    height: 13mm;
    border-top: 0.4mm solid #000;
  }
  .rt-sc__tacche {
    position: absolute;
    inset: 0 0 auto 0;
    height: 7mm;
    background:
      repeating-linear-gradient(90deg, #000 0 0.18mm, transparent 0.18mm 10mm) top left / 100% 7mm   no-repeat,
      repeating-linear-gradient(90deg, #000 0 0.16mm, transparent 0.16mm 5mm)  top left / 100% 3.4mm no-repeat,
      repeating-linear-gradient(90deg, #000 0 0.12mm, transparent 0.12mm 1mm)  top left / 100% 2mm   no-repeat;
  }
  .rt-sc__cifre { position: absolute; inset: 7.6mm 0 0 0; }
  .rt-sc__cifra {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 7pt;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  /* Lo zero e il centoventi sono ai due estremi: centrati sborderebbero
     dal foglio, quindi si appoggiano al proprio bordo. */
  .rt-sc__cifra:first-child { transform: none; }
  .rt-sc__cifra:last-child  { transform: translateX(-100%); }

  /* ── Le sagome ────────────────────────────────────────────────────────
     Cinque barre larghe quanto la carta vera. Si appoggia il rotolo con
     il bordo sinistro sulla linea di partenza e si guarda quale barra
     finisce dove finisce lui.                                          */

  .rt-sc__sagome-sez { break-inside: avoid; }
  .rt-sc__sagome {
    margin: 0;
    padding: 0 0 0 0.6mm;
    list-style: none;
    border-left: 0.4mm solid #000;
  }
  /* Blocco e non flex, e la ragione e' tutta nei numeri: in riga, la
     barra da 110 mm piu' la sua didascalia superavano la larghezza del
     foglio, e il flex faceva l'unica cosa che sa fare — la restringeva.
     Misurata al banco: 102,84 mm invece di 110. Su un righello sarebbe
     stato un errore di sette millimetri e mezzo, cioe' esattamente la
     differenza fra una 57 e una 62 sbagliata.

     Un elemento che DEVE avere una misura non va mai messo dentro un
     contenitore che ha il diritto di cambiargliela. */
  .rt-sc__sagoma {
    display: block;
    margin-bottom: 2mm;
  }
  .rt-sc__barra {
    position: relative;
    display: block;
    flex: none;
    height: 6mm;
    border: 0.3mm solid #000;
    border-left: 0;
    /* Righe diagonali leggere: una barra piena a tutta pagina sarebbe
       mezzo grammo di toner per niente, e il bordo del rotolo appoggiato
       sopra su un fondo pieno non si vedrebbe. */
    background: repeating-linear-gradient(45deg, #000 0 0.12mm, transparent 0.12mm 1.6mm);
  }
  .rt-sc__barra b {
    position: absolute;
    top: 50%;
    right: 1.2mm;
    transform: translateY(-50%);
    padding: 0 1mm;
    background: #fff;
    font-size: 7.5pt;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .rt-sc__dove {
    display: block;
    margin-top: 0.5mm;
    font-size: 6.5pt;
    opacity: 0.75;
  }

  /* ── La misura per intero ─────────────────────────────────────────────*/

  .rt-sc__come { break-inside: avoid; }
  .rt-sc__come dl {
    display: grid;
    grid-template-columns: 26mm 1fr;
    gap: 1.2mm 3mm;
    margin: 0;
  }
  .rt-sc__come dt { font-weight: 800; font-size: 7.5pt; }
  .rt-sc__come dd { margin: 0; font-size: 7.5pt; }

  /* ── Il piede ─────────────────────────────────────────────────────────*/

  .rt-sc__piede {
    display: flex;
    align-items: center;
    gap: 4mm;
    margin-top: 6mm;
    padding-top: 3mm;
    border-top: 0.35mm solid #000;
    break-inside: avoid;
  }
  .rt-sc__qr { flex: none; width: 20mm; height: 20mm; }
  .rt-sc__qr svg { display: block; width: 100%; height: 100%; }
  .rt-sc__piede-testo b,
  .rt-sc__piede-testo span { display: block; }
  .rt-sc__piede-testo b { font-size: 9.5pt; font-weight: 800; }
  .rt-sc__piede-testo span { font-size: 7pt; }
  .rt-sc__legale { margin-top: 1.4mm; opacity: 0.6; }

  /* Nessun indirizzo in coda ai collegamenti: su un righello non servono,
     e Chrome li stampa fra parentesi in mezzo al testo. */
  a[href]::after { content: none !important; }
}

/* A schermo lo scontrino non si vede, ma la regola che lo nasconde NON puo'
   stare qui: questo foglio e' accodato con media="print", quindi dentro di
   lui un @media screen non si avvera mai. Ci ho provato, e il risultato era
   un righello lungo mezzo metro in fondo alla home.

   L'attributo hidden sul blocco fa il lavoro, e lo fa senza dipendere da
   nessun foglio: se il CSS non arriva, resta nascosto lo stesso. Qui sopra
   lo si riaccende soltanto per la stampa.                                */