/* Foglio A4 del formulario, sul modello FIR-2024-01 (stessa disposizione della Copia FIR Digitale RENTRI). */

.foglio {
  --f-blu: #1d3a6e;
  --f-banda: #dce5f2;
  --f-fascia: #e6ecf5;
  --f-bordo: #9fb2cf;
  --f-testo: #111;
  position: relative;
  box-sizing: border-box;
  width: 210mm;
  height: 297mm;
  padding: 7mm 8mm 5mm 9mm;
  background: #fff;
  color: var(--f-testo);
  font: 7pt/1.2 Arial, "Helvetica Neue", Helvetica, sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.foglio *,
.foglio *::before,
.foglio *::after {
  box-sizing: border-box;
}

.foglio .filigrana {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%) rotate(-52deg);
  font: 700 46pt/1 Arial, sans-serif;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.13);
  white-space: nowrap;
  pointer-events: none;
}
.foglio .timbro {
  position: absolute;
  right: 18mm;
  top: 30mm;
  padding: 2mm 5mm;
  border: 1mm solid #b3261e;
  color: #b3261e;
  font: 700 26pt/1 Arial, sans-serif;
  transform: rotate(-8deg);
  pointer-events: none;
}

/* testata */
.foglio .testata {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: end;
  gap: 3mm;
  margin-bottom: 2mm;
}
.foglio .titolo-modello {
  margin: 0;
  color: var(--f-blu);
  font: 700 12.5pt/1 Arial, sans-serif;
}
.foglio .titolo-modello {
  white-space: nowrap;
}
.foglio .titolo-modello .secondo {
  margin-left: 10mm;
}
.foglio .testata-reg {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 3mm;
  color: var(--f-blu);
  font-size: 6.6pt;
}
.foglio .testata-data {
  display: flex;
  align-items: center;
  gap: 1.5mm;
}
.foglio .testata-data .et {
  color: var(--f-blu);
  font-size: 6.6pt;
  text-align: right;
}
.foglio .riquadro {
  display: inline-block;
  min-width: 7mm;
  padding: 0.4mm 1.2mm;
  border: 0.25mm solid var(--f-bordo);
  background: #fff;
  font-weight: 700;
}
.foglio .riquadro.grande {
  padding: 1.6mm 3mm;
  background: var(--f-banda);
  border-color: var(--f-bordo);
  color: var(--f-blu);
  font-size: 11pt;
}
.foglio .riquadro.numero {
  min-width: 48mm;
  text-align: center;
}

/* corpo: fascia verticale con il nome della sezione + riquadri */
.foglio .corpo {
  flex: none;
  display: grid;
  grid-template-columns: 5mm 1fr;
  border: 0.25mm solid var(--f-bordo);
}
.foglio .corpo.senza-fasce {
  display: flex;
  flex-direction: column;
}
.foglio .fascia {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 0.25mm solid var(--f-bordo);
  background: var(--f-fascia);
}
.foglio .fascia span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--f-blu);
  font: italic 700 5.6pt/1 Georgia, "Times New Roman", serif;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.foglio .sezioni {
  border-left: 0.25mm solid var(--f-bordo);
  border-bottom: 0.25mm solid var(--f-bordo);
  min-width: 0;
}
.foglio .sez {
  padding: 0.9mm 2mm 1mm;
  border-bottom: 0.25mm solid var(--f-bordo);
}
.foglio .sezioni .sez:last-child,
.foglio .corpo.senza-fasce > .sez:last-of-type {
  border-bottom: 0;
}
.foglio .sez-testa {
  display: flex;
  align-items: center;
  gap: 2mm;
  margin-bottom: 0.5mm;
}
.foglio .sez-num {
  display: inline-grid;
  place-items: center;
  width: 5mm;
  height: 3.8mm;
  background: var(--f-blu);
  color: #fff;
  font-weight: 700;
  font-size: 6.6pt;
}
.foglio .sez-tit {
  min-width: 48mm;
  padding: 0.5mm 3mm;
  border: 0.25mm solid var(--f-bordo);
  background: var(--f-banda);
  color: var(--f-blu);
  font-weight: 700;
  font-size: 6.6pt;
  text-align: center;
}
.foglio .sez-nota {
  margin-left: auto;
  color: var(--f-blu);
  font-size: 6.4pt;
}
.foglio .provenienza {
  margin-left: auto;
  color: var(--f-blu);
  font-weight: 700;
  font-size: 6.6pt;
}

/* campi */
.foglio .campo {
  display: flex;
  align-items: baseline;
  gap: 1.2mm;
  min-width: 0;
  margin: 0.4mm 0;
}
.foglio .campo .et,
.foglio .riga > .et {
  flex: none;
  color: #2c3f63;
  font-size: 6.6pt;
  text-align: right;
}
.foglio .campo .val {
  flex: 1;
  min-width: 0;
  min-height: 3.3mm;
  padding: 0.1mm 1mm;
  border-bottom: 0.2mm solid #c9d3e3;
  overflow-wrap: anywhere;
}
.foglio .campo.lungo .et {
  width: 30mm;
}
.foglio .campo.box .val {
  padding: 0.35mm 1.2mm;
  border: 0.25mm solid var(--f-bordo);
}
.foglio .campo.box.piccolo .val {
  font-size: 5.6pt;
  line-height: 1.15;
}
.foglio .campo.impilato {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.foglio .campo.impilato .et {
  text-align: left;
}
.foglio .riga-vuota {
  height: 3.6mm;
  margin: 0.4mm 0 0.6mm 31.2mm;
  border-bottom: 0.2mm solid #c9d3e3;
}
.foglio .due {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3mm;
}
.foglio .due > .campo:first-child .et {
  width: 30mm;
}
.foglio .due > .campo:last-child .et {
  width: 27mm;
}
.foglio .riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6mm 3mm;
  margin: 0.45mm 0;
}
.foglio .riga > .campo {
  flex: 1 1 auto;
}
.foglio .riga > .campo.corto {
  flex: 0 1 26mm;
}
.foglio .riga > .campo.colli {
  flex: 1 1 52mm;
}
.foglio .riga > .campo.medio {
  flex: 1 1 36mm;
}
.foglio .riga > .campo.eer {
  flex: 0 1 46mm;
}
.foglio .riga > .campo.eer .val {
  text-align: center;
  font-weight: 700;
}
.foglio .riga.testa-doppia {
  display: grid;
  grid-template-columns: 1.05fr 0.6fr 0.35fr;
  align-items: start;
}
.foglio .riga.testa-doppia:has(> div > .sez-testa) {
  grid-template-columns: 1fr 1fr;
}
.foglio .riga.testa-doppia:has(> .sez-testa + .sez-testa) {
  grid-template-columns: 1fr 1fr;
}
.foglio .opz,
.foglio .um {
  display: inline-flex;
  align-items: center;
  gap: 1mm;
  color: #2c3f63;
  font-size: 6.6pt;
  white-space: nowrap;
}
.foglio .casella {
  display: inline-grid;
  place-items: center;
  width: 3.5mm;
  height: 3.5mm;
  border: 0.25mm solid var(--f-bordo);
  background: #fff;
  color: #000;
  font-size: 8pt;
  font-weight: 700;
  line-height: 1;
}
.foglio .destinazione {
  flex: none;
  color: var(--f-blu);
  font-size: 6.6pt;
}
.foglio .val.conducente {
  min-height: 4mm;
  margin: 0 0 0.6mm;
  padding: 0.3mm 1mm;
}
.foglio .val.firma {
  min-height: 4mm;
  padding: 0.3mm 1mm;
  font-size: 7pt;
}
.foglio .firma-dest {
  flex: 1 1 60mm;
}
.foglio .firma-dest .et {
  padding: 0.8mm 2mm;
  border: 0.25mm solid var(--f-bordo);
  background: var(--f-banda);
  color: var(--f-blu);
  text-align: center;
}
.foglio .sottotitolo {
  margin: 1.2mm 0 0.4mm 28mm;
  color: var(--f-blu);
  font-weight: 700;
  font-size: 6.6pt;
}

/* parte finale come la Copia FIR Digitale: annotazioni (17) e vidimazione, QR a destra alto quanto entrambe */
.foglio .fondo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 5mm minmax(0, 1fr) 46mm 32mm;
  grid-template-rows: auto 21mm auto auto;
  grid-template-areas:
    "quinta testa testa testa"
    "quinta ann ann qr"
    "vid vtesto vnum qr"
    "vid stampa stampa stampa";
}
.foglio .fondo.fondo-integrazione {
  grid-template-columns: minmax(0, 1fr) 46mm 32mm;
  grid-template-rows: auto 21mm auto;
  grid-template-areas:
    "testa testa testa"
    "ann ann qr"
    "vtesto vnum qr";
}
.foglio .fondo-fascia {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.25mm solid var(--f-bordo);
  background: var(--f-fascia);
}
.foglio .fondo-fascia.quinta {
  grid-area: quinta;
  border-bottom: 0.25mm solid var(--f-bordo);
}
.foglio .fondo-fascia.vid {
  grid-area: vid;
}
.foglio .fondo-fascia span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--f-blu);
  font: italic 700 5.6pt/1 Georgia, "Times New Roman", serif;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.foglio .fondo-testa {
  grid-area: testa;
  padding: 0.8mm 2mm 0.6mm;
}
.foglio .fondo-annotazioni {
  grid-area: ann;
  margin: 0 1.5mm 1.5mm 2mm;
  padding: 1mm 1.5mm;
  border: 0.25mm solid var(--f-bordo);
}
.foglio .fondo-annotazioni p {
  margin: 0 0 0.6mm;
  overflow-wrap: anywhere;
}
.foglio .fondo-qr {
  grid-area: qr;
  display: grid;
  place-items: center;
  margin: 0 2mm 1.5mm 0;
  padding: 1mm;
  border: 0.25mm solid var(--f-bordo);
}
.foglio .qr {
  width: 27mm;
  height: 27mm;
}
.foglio .qr path {
  fill: #000;
}
.foglio .fondo-vid-testo,
.foglio .fondo-vid-num {
  margin-bottom: 1.5mm;
  border: 0.25mm solid var(--f-bordo);
}
.foglio .fondo-vid-testo {
  grid-area: vtesto;
  display: flex;
  align-items: center;
  margin-left: 2mm;
  padding: 1mm 1.5mm;
  font-size: 6.4pt;
  line-height: 1.25;
}
.foglio .fondo-vid-num {
  grid-area: vnum;
  display: grid;
  place-items: center;
  margin-right: 1.5mm;
  border-left: 0;
  color: var(--f-blu);
  font-weight: 700;
  font-size: 12.5pt;
  white-space: nowrap;
}
.foglio .fondo-stampa {
  grid-area: stampa;
  padding: 0.8mm 2mm;
  border-top: 0.25mm solid var(--f-bordo);
  color: var(--f-blu);
  font: italic 6.4pt/1.2 Arial, sans-serif;
  text-align: center;
}

.foglio .nota-modello {
  margin: 1mm 0 0;
  padding: 0.6mm 3mm;
  width: 60%;
  background: var(--f-fascia);
  color: var(--f-blu);
  font: italic 5.6pt/1.2 Georgia, "Times New Roman", serif;
}
.foglio .piede {
  display: flex;
  justify-content: space-between;
  gap: 6mm;
  margin-top: auto;
  padding-top: 4mm;
  font-size: 8pt;
  color: #111;
}
