@font-face {
  font-family: "Marcellus Documento";
  src: url("../fonts/Marcellus-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Documento";
  src: url("../fonts/InstrumentSans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

#documento {
  --doc-bianco: #fdfdfb;
  --doc-pietra: #656b68;
  --doc-nero: #202122;
  --doc-ottone: #887346;
  --doc-linea: #d9dcd6;
  --doc-fondo: #f2f3ef;
  display: none;
  color: var(--doc-nero);
  background: var(--doc-bianco);
  font: 10pt/1.4 "Instrument Documento", Arial, sans-serif;
  text-align: left;
  overflow-wrap: anywhere;
}
#documento, #documento * { box-sizing: border-box; }
#documento.anteprima { display: block; width: min(100%, 210mm); margin: 24px auto; }
#documento .doc-pagina { padding: 14mm; min-height: 297mm; display: flex; flex-direction: column; }
#documento h1, #documento h2, #documento h3, #documento h4 { font-family: "Marcellus Documento", Georgia, serif; font-weight: 400; line-height: 1.2; margin: 0; }
#documento h1 { font-size: 27pt; }
#documento h2 { font-size: 20pt; }
#documento h3 { font-size: 13pt; margin-bottom: 2mm; }
#documento h4 { font-size: 12pt; }
#documento p, #documento dl, #documento dd, #documento figure { margin: 0; }
#documento .doc-intestazione { display: flex; justify-content: space-between; align-items: center; gap: 6mm; border-bottom: 1px solid var(--doc-ottone); padding-bottom: 5mm; }
#documento .doc-marchio { display: flex; align-items: center; gap: 3mm; }
#documento .doc-marchio img { width: 18mm; height: 18mm; object-fit: contain; }
#documento .doc-marchio p { color: var(--doc-pietra); font-size: 8pt; margin-top: 1mm; }
#documento .doc-azienda { max-width: 91mm; font-size: 7.8pt; line-height: 1.55; text-align: right; }
#documento .doc-riferimenti { display: flex; align-items: center; justify-content: space-between; gap: 5mm; padding: 5mm 0 4mm; }
#documento .doc-etichetta { display: block; color: var(--doc-pietra); font-size: 8pt; margin-bottom: 1mm; }
#documento .doc-riferimenti dl { font-size: 8.5pt; }
#documento .doc-riferimenti dl > div { display: flex; gap: 4mm; justify-content: space-between; }
#documento dt { color: var(--doc-pietra); }
#documento .doc-cliente { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; padding: 3mm 4mm; background: var(--doc-fondo); }
#documento .doc-cliente strong { font-weight: 550; }
#documento .doc-oggetto { font-size: 17pt; margin: 5mm 0 4mm; max-width: 160mm; }
#documento .doc-disegno figcaption { display: flex; justify-content: space-between; gap: 3mm; font-size: 9pt; }
#documento .doc-disegno figcaption span { color: var(--doc-pietra); font-size: 7pt; }
#documento .doc-disegno svg { display: block; width: 100%; height: 87mm; }
#documento .doc-disegno.doc-con-3d svg { height: 50mm; }
#documento svg text { fill: var(--doc-nero); font-family: "Instrument Documento", Arial, sans-serif; }
#documento .doc-pietra { fill: #e9ece5; stroke: #656b68; stroke-width: 1; vector-effect: non-scaling-stroke; }
#documento .doc-foro { fill: var(--doc-bianco); stroke: #656b68; stroke-width: 0.8; vector-effect: non-scaling-stroke; }
#documento .doc-linea-quota { stroke: #656b68; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
#documento .doc-giunto { stroke: var(--doc-ottone); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
#documento .doc-fondo-giunto { stroke: var(--doc-bianco); stroke-width: 3; vector-effect: non-scaling-stroke; }
#documento .doc-legenda { font-size: 7pt; color: var(--doc-pietra); line-height: 1.45; margin: 1mm 0 4mm; }
#documento .doc-legenda p + p { margin-top: 1mm; }
#documento .doc-legenda span { display: inline-block; margin-right: 3mm; }
#documento .doc-legenda b { color: var(--doc-nero); }
#documento .doc-render { margin-bottom: 4mm; text-align: center; }
#documento .doc-render img { display: block; max-width: 100%; width: auto; height: 32mm; object-fit: contain; margin: auto; }
#documento .doc-render figcaption { color: var(--doc-pietra); font-size: 7pt; margin-top: 1mm; }
#documento .doc-alternative { margin-top: 2mm; }
#documento .doc-proposte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--doc-linea); }
#documento .doc-proposta { padding: 3mm; }
#documento .doc-proposta + .doc-proposta { border-left: 1px solid var(--doc-linea); }
#documento .doc-scelta { background: var(--doc-fondo); box-shadow: inset 0 2px var(--doc-ottone); }
#documento .doc-stato { display: block; color: var(--doc-pietra); font-size: 7pt; margin-bottom: 1.5mm; }
#documento .doc-scelta .doc-stato { color: var(--doc-ottone); font-weight: 650; }
#documento .doc-proposta p { font-size: 7pt; color: var(--doc-pietra); margin: 1.5mm 0 2mm; }
#documento .doc-proposta strong { display: block; font-size: 15pt; font-weight: 550; font-variant-numeric: tabular-nums; }
#documento .doc-proposta small { font-size: 7pt; color: var(--doc-pietra); }
#documento .doc-piede { display: flex; justify-content: space-between; gap: 3mm; margin-top: auto; padding-top: 4mm; color: var(--doc-pietra); font-size: 6.5pt; }
#documento .doc-piede span:last-child { white-space: nowrap; }
#documento .doc-seguito { display: flex; justify-content: space-between; gap: 4mm; font-size: 8pt; color: var(--doc-pietra); border-bottom: 1px solid var(--doc-ottone); padding-bottom: 3mm; margin-bottom: 5mm; }
#documento .doc-sottotitolo { color: var(--doc-pietra); margin: 2mm 0 4mm; font-size: 9pt; }
#documento .doc-voci { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 8pt; }
#documento .doc-voci caption { text-align: left; color: var(--doc-pietra); font-size: 7pt; margin-bottom: 2mm; }
#documento .doc-voci th { background: var(--doc-fondo); font-weight: 550; }
#documento .doc-voci th, #documento .doc-voci td { padding: 1.3mm 1.5mm; border-bottom: 1px solid var(--doc-linea); vertical-align: top; }
#documento .doc-voci th:first-child { width: 53%; }
#documento .doc-voci th:nth-child(2) { width: 9%; }
#documento .doc-voci th:nth-child(3) { width: 10%; }
#documento .doc-voci th:nth-child(4), #documento .doc-voci th:nth-child(5) { width: 14%; }
#documento .doc-voci th:not(:first-child), #documento .doc-voci td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
#documento .doc-voci td:nth-child(4), #documento .doc-voci td:nth-child(5) { white-space: nowrap; }
#documento .doc-totali { width: 80mm; max-width: 100%; margin: 3mm 0 4mm auto; }
#documento .doc-totali > div { display: flex; align-items: baseline; justify-content: space-between; gap: 4mm; padding: 1mm 2mm; font-size: 9pt; }
#documento .doc-totali dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
#documento .doc-totali .doc-totale { border-top: 1px solid var(--doc-ottone); margin-top: 1mm; padding-top: 2mm; font-size: 15pt; }
#documento .doc-totale dt { color: var(--doc-nero); font-size: 10pt; }
#documento .doc-verifiche { background: var(--doc-fondo); border-left: 2px solid var(--doc-ottone); padding: 3mm 4mm; }
#documento ul { padding-left: 4mm; margin: 0; }
#documento li + li { margin-top: 0.5mm; }
#documento .doc-verifiche, #documento .doc-note, #documento .doc-condizioni { font-size: 8pt; }
#documento .doc-note, #documento .doc-condizioni { margin-top: 3mm; }
#documento .doc-firma { font-size: 8pt; margin-top: 5mm; }
#documento .doc-firma > div { display: flex; justify-content: space-between; gap: 4mm; margin-top: 6mm; }

@page { size: A4; margin: 14mm; }
@media screen and (max-width: 600px) {
  #documento.anteprima { margin: 0 auto; }
  #documento .doc-pagina { padding: 22px 16px; min-height: auto; }
  #documento .doc-pagina + .doc-pagina { border-top: 8px solid var(--doc-fondo); }
  #documento .doc-intestazione { flex-direction: column; align-items: flex-start; gap: 12px; }
  #documento .doc-azienda { text-align: left; max-width: 100%; font-size: 9pt; }
  #documento .doc-riferimenti { align-items: flex-start; flex-wrap: wrap; }
  #documento .doc-riferimenti dl > div { gap: 12px; }
  #documento .doc-disegno figcaption { flex-direction: column; }
  #documento .doc-disegno svg { height: auto; max-height: 350px; }
  #documento .doc-disegno.doc-con-3d svg { height: auto; }
  #documento .doc-legenda { font-size: 9pt; }
  #documento .doc-legenda span { display: block; margin-bottom: 4px; }
  #documento .doc-proposte { grid-template-columns: 1fr; }
  #documento .doc-proposta { padding: 12px; }
  #documento .doc-proposta + .doc-proposta { border-left: 0; border-top: 1px solid var(--doc-linea); }
  #documento .doc-proposta h4 { font-size: 15pt; }
  #documento .doc-proposta p, #documento .doc-stato, #documento .doc-proposta small { font-size: 9pt; }
  #documento .doc-tabella-scroll { overflow-x: auto; }
  #documento .doc-voci { min-width: 570px; font-size: 10pt; }
  #documento .doc-verifiche, #documento .doc-note, #documento .doc-condizioni, #documento .doc-firma { font-size: 10pt; }
  #documento .doc-firma > div { flex-direction: column; gap: 24px; }
  #documento .doc-piede { padding-top: 24px; font-size: 7pt; }
}
@media print {
  body { margin: 0 !important; background: white !important; }
  body > *:not(#documento) { display: none !important; }
  #documento { display: block !important; width: auto !important; margin: 0 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #documento .doc-pagina { min-height: 268mm; padding: 0; }
  #documento .doc-pagina + .doc-pagina { break-before: page; }
  #documento figure, #documento .doc-alternative, #documento .doc-verifiche, #documento .doc-condizioni, #documento .doc-firma, #documento .doc-totali { break-inside: avoid; }
  #documento tr { break-inside: avoid; }
  #documento thead { display: table-header-group; }
  #documento h2, #documento h3 { break-after: avoid; }
}
#documento .doc-numero { font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 600; letter-spacing: -.01em; }
#documento .doc-render img { display: block; width: 100%; height: 50mm; object-fit: cover; border-radius: 1.5mm; }