/* Optimvs v4 · vista «Limiti e buste»
   Solo quello che è proprio di questa vista: tutte le classi cominciano per .v-limiti-
   Riquadro, tabella, schede, cifra, etichetta, stato e dato con fonte vengono da assets/optimvs.css
   e qui non si riscrivono. Nessun colore scritto a mano: solo variabili. */

/* schede e parti */
.v-limiti-schede { margin-top: -4px; }
.v-limiti-parte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v-limiti-parte[hidden] { display: none; }
/* «backwards»: a movimento finito il pezzo torna al suo stato naturale e non resta «in trasformazione»
   (le etichette di pagina che volano si ancorano al loro dato, non alla parte) */
.v-limiti-parte.entra { animation: v-limiti-entra var(--t-rapido) var(--curva) backwards; }
@keyframes v-limiti-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.v-limiti-solo-carta { display: none; }

/* «Offerta tecnica»: tre piani, uno sotto l'altro e a tutta larghezza. La matrice in primo piano,
   le regole comuni (con quelle a pena di esclusione in cima), l'impaginazione incassata */
.v-limiti-tecnica-griglia, .v-limiti-lato { display: grid; gap: 12px; min-width: 0; align-items: start; }
@container centro (max-width: 659px) {
  .v-limiti-parte, .v-limiti-tecnica-griglia, .v-limiti-lato { gap: 10px; }
}
@container centro (min-width: 980px) {
  /* centro largo (documento nascosto): la matrice a sinistra, il resto in colonna a destra */
  .v-limiti-tecnica-griglia { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* ---------- facciate per criterio ---------- */

.v-limiti-matrice th, .v-limiti-matrice td { vertical-align: middle; }
/* testa su due righe (nome, poi formato): le colonne dei conti restano strette e il nome del criterio sta su una riga */
.v-limiti-th { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; vertical-align: bottom; line-height: 18px; }
.v-limiti-th-nome { display: inline-flex; align-items: center; gap: 7px; }
.v-limiti-th > .v-limiti-formato { margin-left: 17px; }
.v-limiti-matrice thead th { vertical-align: bottom; }
/* centro stretto: tutte le colonne, tranne il criterio, sono larghe quanto il loro contenuto.
   Con più posto il criterio prende un terzo e i conti respirano */
.v-limiti-matrice thead th:not(:first-child), .v-limiti-c-conto, .v-limiti-c-schede { white-space: nowrap; }
@container centro (max-width: 659px) {
  .v-limiti-matrice thead th:not(:first-child), .v-limiti-c-conto, .v-limiti-c-schede { width: 1%; }
}
@container centro (min-width: 660px) {
  .v-limiti-matrice thead th:first-child { width: 34%; }
  /* una sola colonna di conti (il disciplinare limita solo la relazione): il nome del criterio prende più posto e sta su una riga */
  .v-limiti-matrice.v-limiti-una-colonna thead th:first-child { width: 56%; }
}
.v-limiti-formato { font-weight: 500; color: var(--testo-2); }
/* la prima cella di ogni riga è il criterio: stessa riga, testo pieno */
.v-limiti-matrice tbody th {
  padding: 7px 10px 7px 14px; white-space: normal; font-weight: 400;
  color: var(--testo); background: transparent; border-bottom: 1px solid var(--bordo);
}
/* criterio senza conti: il nome resta in alto anche quando sotto si apre una nota */
.v-limiti-matrice tr.v-limiti-senza > th, .v-limiti-matrice tr.v-limiti-senza > td { vertical-align: top; }
.v-limiti-matrice tr.v-limiti-senza > th { padding-top: 8px; }
.v-limiti-crit { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 6px; align-items: baseline; }
.v-limiti-sigla { font-weight: 500; color: var(--testo-2); white-space: nowrap; }
.v-limiti-nome { font-weight: 500; text-wrap: balance; }

/* il conto: numero grande e, accanto, le pagine disegnate */
.v-limiti-c-conto { white-space: nowrap; }
.v-limiti-conto { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
button.v-limiti-conto {
  /* la cornice del conto aperto lascia aria anche a un numero di due cifre e alle pagine su due file */
  padding: 4px 7px 4px 5px; margin: -4px -7px -4px -5px;
  transition: background-color var(--t-rapido), box-shadow var(--t-rapido), transform var(--t-rapido) var(--curva);
}
button.v-limiti-conto:hover, button.v-limiti-conto.sopra { background: var(--blu-tinta); }
button.v-limiti-conto:active { transform: scale(0.97); }
/* il segno leggero del dato con fonte: il numero ha la sottolineatura punteggiata */
button.v-limiti-conto .v-limiti-n { text-decoration: underline dotted var(--bordo-forte) 1px; text-underline-offset: 4px; transition: text-decoration-color var(--t-rapido); }
button.v-limiti-conto:hover .v-limiti-n, button.v-limiti-conto.sopra .v-limiti-n { text-decoration-color: var(--blu); }
button.v-limiti-conto.attivo .v-limiti-n { text-decoration-color: transparent; }
.v-limiti-n {
  min-width: 25px; text-align: right;
  font: 600 var(--t-20)/22px var(--car-testo); letter-spacing: -0.025em; color: var(--testo);
}
.v-limiti-c-conto > .etichetta { margin-left: 8px; }
.v-limiti-unita { font-weight: 400; color: var(--testo-2); }
.v-limiti-somma-nota { font-weight: 400; color: var(--testo-2); }
.v-limiti-niente { color: var(--testo-3); }

/* le pagine: bordo blu; righe = relazione, riquadro pieno = elaborati */
.v-limiti-fogli { display: block; flex: none; overflow: visible; }
.v-limiti-f { fill: var(--riquadro); stroke: var(--blu); stroke-width: 1; }
.v-limiti-f-segno { fill: none; stroke: var(--blu); stroke-width: 1; opacity: 0.55; }
.v-limiti-f-pieno { fill: var(--blu); opacity: 0.75; }
.v-limiti-fogli-elaborati .v-limiti-f { fill: var(--blu-tinta-2); }
/* il conto appena aperto: le pagine si accendono una dopo l'altra, come contate. Solo opacità, una volta */
button.v-limiti-conto.attivo .v-limiti-pag { animation: v-limiti-conta 180ms var(--curva) backwards; animation-delay: calc(var(--i) * 14ms); }
@keyframes v-limiti-conta { from { opacity: 0.2; } to { opacity: 1; } }

/* colonna «pag.»: le etichette dei dati della riga nello stesso posto, si vede quella che serve */
.v-limiti-pagine { display: inline-grid; vertical-align: middle; }
.v-limiti-pagine > .pg { grid-area: 1 / 1; justify-self: end; }
.v-limiti-pagine > .pg + .pg:not(.sopra):not(.attivo):not(:hover):not(:focus-visible) { opacity: 0; pointer-events: none; }
.v-limiti-pagine > .pg.sopra, .v-limiti-pagine > .pg.attivo { z-index: 1; }
/* le schede tecniche hanno la stessa frase degli elaborati: la loro etichetta è già nella colonna «pag.» */
.v-limiti-c-schede .dato-vola > .pg { display: none; }

@container centro (max-width: 659px) {
  .v-limiti-matrice th, .v-limiti-matrice td { padding-left: 6px; padding-right: 6px; }
  .v-limiti-matrice tbody th { padding-right: 6px; }
  .v-limiti-matrice th:first-child, .v-limiti-matrice td:first-child { padding-left: 14px; }
  .v-limiti-matrice th:last-child, .v-limiti-matrice td:last-child { padding-right: 14px; }
  .v-limiti-matrice .v-limiti-conto { gap: 7px; }
}

/* schede tecniche: comprese, escluse, da verificare */
.v-limiti-schede-dentro { display: inline-flex; align-items: center; gap: 6px; }
/* da verificare: forma e parola, e sotto il rimando al punto di «Da chiarire» */
.v-limiti-schede-incerta {
  display: inline-grid; grid-template-columns: 15px auto; grid-template-areas: "segno parola" ". punto";
  column-gap: 6px; row-gap: 0; justify-items: start; align-items: center; vertical-align: middle;
}
.v-limiti-schede-incerta > .stato { grid-area: segno; height: 20px; }
.v-limiti-inc-parola { grid-area: parola; font-weight: 500; line-height: 20px; }
.v-limiti-schede-incerta > .v-limiti-punto { grid-area: punto; line-height: 18px; }
@container centro (max-width: 659px) {
  /* centro stretto: la parola va sotto, così la colonna resta stretta e i nomi dei criteri stanno su una riga */
  .v-limiti-schede-incerta { grid-template-areas: "segno punto" "parola parola"; }
  .v-limiti-schede-incerta > .v-limiti-punto { line-height: 20px; }
  .v-limiti-inc-parola { line-height: 18px; }
}

/* voci in più di un criterio, sotto la sua riga */
.v-limiti-matrice tr.v-limiti-con-sotto > th, .v-limiti-matrice tr.v-limiti-con-sotto > td { border-bottom-color: transparent; padding-bottom: 5px; }
.v-limiti-matrice tr.v-limiti-sotto > td { padding-top: 0; padding-bottom: 8px; }
.v-limiti-matrice tbody:hover tr.v-limiti-con-sotto:hover + tr.v-limiti-sotto,
.v-limiti-matrice tbody tr.v-limiti-con-sotto:has(+ tr.v-limiti-sotto:hover) { background: var(--riquadro-2); }
.v-limiti-voci { display: grid; gap: 2px; min-width: 0; }
/* dentro la matrice le frasi lunghe non devono allargare le colonne dei conti: si adattano a quello che c'è */
.v-limiti-matrice .v-limiti-voci { width: 0; min-width: 100%; }
/* una voce: il segno (stato, punto o piccola pagina), la frase, in fondo la pagina o la freccia.
   Nella matrice il fondo della riga è la colonna «pag.» */
.v-limiti-voce {
  display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; column-gap: 7px; align-items: start;
  min-width: 0; min-height: 22px; color: var(--testo-2);
}
.v-limiti-voce > .stato, .v-limiti-pallino, .v-limiti-di { height: 20px; }
.v-limiti-pallino, .v-limiti-di { display: grid; place-items: center; }
.v-limiti-pallino::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--bordo-forte); }
.v-limiti-voce-corpo { min-width: 0; line-height: 20px; }
/* di che cosa parla una regola generale («Cronoprogramma»): in grigio, davanti al testo */
.v-limiti-di-che { color: var(--testo-2); }
.v-limiti-di-che::after { content: '\00a0·\00a0'; color: var(--testo-3); }
.v-limiti-voce-testo { text-wrap: pretty; }
/* la frase con una fonte: lo stesso segno leggero dei dati nel testo */
button.v-limiti-voce-testo {
  padding: 0 3px; margin: 0 -3px; border-radius: var(--r-1); line-height: 20px;
  text-decoration: underline dotted var(--bordo-forte) 1px; text-underline-offset: 3px;
}
button.v-limiti-voce-testo:hover, button.v-limiti-voce-testo.sopra { color: var(--testo); background: var(--blu-tinta); text-decoration-color: var(--blu); }
button.v-limiti-voce-testo.attivo { color: var(--testo); background: var(--blu-tinta); box-shadow: inset 0 0 0 1.5px var(--blu); text-decoration-color: transparent; }
/* lo spazio prima del rimando al punto sta in coda alla frase: se il rimando va a capo comincia a filo */
button.v-limiti-voce-testo:has(+ .v-limiti-punto) { margin-right: 7px; }
.v-limiti-voce > .pg { margin-top: 1px; }
.v-limiti-apribile { cursor: pointer; }
/* una voce che si apre: al passaggio un velo largo quanto la riga (il contenuto non si sposta) */
.v-limiti-voce.v-limiti-apribile {
  margin: 0 -6px; padding: 0 6px; border-radius: var(--r-1);
  transition: color var(--t-rapido), background-color var(--t-rapido);
}
.v-limiti-voce.v-limiti-apribile:hover { color: var(--testo); background: var(--velo); }
.v-limiti-voce.v-limiti-apribile:hover .v-limiti-freccia { background: transparent; color: var(--testo); }
.v-limiti-freccia { width: 22px; height: 22px; margin: -1px 0 -1px auto; flex: none; }
.v-limiti-freccia .ico { transition: transform var(--t-medio) var(--curva); }
.v-limiti-freccia[aria-expanded="true"] .ico { transform: rotate(180deg); }
/* la freccia sta nella colonna «pag.», in riga con le etichette di pagina */
.v-limiti-voce > .v-limiti-freccia { margin-right: -3px; }

/* nota che si apre: una frase per riga. Aperta in fondo al centro, sale in vista e non resta a filo del bordo */
.v-limiti-nota, .v-limiti-dett { scroll-margin-bottom: 12px; }
.v-limiti-nota { padding: 2px 0 6px 22px; }
.v-limiti-nota-dentro { display: grid; gap: 2px; max-width: 68ch; font-size: var(--t-13); line-height: 1.45; color: var(--testo-2); animation: v-limiti-entra var(--t-rapido) var(--curva) backwards; }
.v-limiti-nota-dentro + .v-limiti-nota-dentro { margin-top: 8px; }
.v-limiti-nota-dentro ul { display: grid; gap: 3px; }
.v-limiti-nota-dentro li { text-wrap: pretty; }
.v-limiti-nota-nome { font-weight: 600; color: var(--testo); }

/* ---------- impaginazione: la facciata in grande, su un piano incassato ---------- */

.v-limiti-impag { container: v-limiti-impag / inline-size; }
.v-limiti-impag-corpo {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "foglio cifre" "voci voci";
  align-items: start; gap: 12px 18px; min-width: 0;
}
@container v-limiti-impag (min-width: 440px) {
  /* riquadro largo: quello che manca sta accanto al foglio, sotto le cifre */
  .v-limiti-impag-corpo { grid-template-areas: "foglio cifre" "foglio voci"; grid-template-rows: auto 1fr; }
}
.v-limiti-foglio {
  grid-area: foglio; display: block; line-height: 0;
  background: var(--riquadro); border: 1px solid var(--bordo-forte); border-radius: 3px;
  box-shadow: var(--ombra-2);
}
.v-limiti-foglio svg { display: block; }
.v-limiti-foglio-margini { fill: none; stroke: var(--mancante-pieno); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.7; }
.v-limiti-foglio-righe { fill: none; stroke: var(--blu); stroke-width: 1; opacity: 0.36; transition: opacity var(--t-rapido); }
/* passando sul numero delle righe (o con la sua frase aperta) le righe del disegno si accendono */
.v-limiti-impag:has(.v-limiti-righe:hover) .v-limiti-foglio-righe,
.v-limiti-impag:has(.v-limiti-righe.sopra) .v-limiti-foglio-righe,
.v-limiti-impag:has(.v-limiti-righe.attivo) .v-limiti-foglio-righe { opacity: 1; }
.v-limiti-impag-cifre { grid-area: cifre; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 32px; min-width: 0; }
/* il carattere minimo e il suo stato sono una cosa sola: stessa altezza del numero accanto («al massimo» e
   «Da verificare» sulla stessa riga) e, al passaggio o con la frase aperta, la cornice li abbraccia tutti e due
   (quella del solo numero toccava «Da verificare») */
.v-limiti-car {
  display: grid; gap: 1px; justify-items: start; border-radius: 2px;
  transition: background-color var(--t-rapido), box-shadow var(--t-rapido);
}
.v-limiti-car-sotto { display: inline-flex; align-items: center; gap: 10px; height: 18px; font-size: var(--t-13); }
.v-limiti-car > button.cifra:hover, .v-limiti-car > button.cifra.attivo { background: none; box-shadow: none; }
.v-limiti-car > button.cifra.attivo { outline-color: transparent; }
.v-limiti-car > button.cifra.attivo:focus-visible { outline-color: var(--blu); outline-offset: 2px; }
.v-limiti-car:has(> button.cifra:hover) { background: var(--riquadro); box-shadow: 0 0 0 6px var(--riquadro); }
.v-limiti-car:has(> button.cifra.attivo) { background: var(--blu-tinta); box-shadow: 0 0 0 6px var(--blu-tinta); outline: 1.5px solid var(--blu); outline-offset: 6px; }
.v-limiti-impag-voci { grid-area: voci; padding-top: 9px; border-top: 1px solid var(--bordo); gap: 4px; }
.v-limiti-impag-voci .v-limiti-voce { color: var(--testo); }

/* ---------- elenchi: regole comuni, regole sui file, documenti della busta ---------- */

.v-limiti-lista td { vertical-align: top; }
.v-limiti-lista td.v-limiti-c-stato { width: 1%; padding-right: 0; }
.v-limiti-c-stato .stato { height: 20px; }
.v-limiti-c-testo { line-height: 20px; }
.v-limiti-c-testo .v-limiti-testo { color: var(--testo); text-wrap: pretty; }
.v-limiti-c-testo .v-limiti-testo:has(+ .v-limiti-punto) { padding-right: 10px; }
.v-limiti-lista .col-pag { vertical-align: top; }
.v-limiti-lista .col-pag .pg { margin-top: 1px; }
.v-limiti-lista .col-pag .v-limiti-freccia { margin: -1px -3px -1px 0; }
/* la riga e la sua nota aperta sono una cosa sola */
.v-limiti-lista tr:has(+ .v-limiti-dett:not([hidden])) > td { border-bottom-color: transparent; }
.v-limiti-lista tr.v-limiti-dett > td { padding-top: 0; padding-bottom: 10px; }
.v-limiti-lista tbody tr.v-limiti-dett:hover { background: transparent; }
/* accesa: la frase della riga è aperta nel documento, oppure è aperta la sua frase «a pena di esclusione» */
.v-limiti-lista tbody tr.v-limiti-accesa, .v-limiti-lista tbody tr.v-limiti-accesa:hover,
.v-limiti-lista tbody tr.attivo + tr.v-limiti-dett, .v-limiti-lista tbody tr.attivo + tr.v-limiti-dett:hover,
.v-limiti-lista tbody tr.v-limiti-accesa + tr.v-limiti-dett, .v-limiti-lista tbody tr.v-limiti-accesa + tr.v-limiti-dett:hover { background: var(--blu-tinta); box-shadow: inset 2px 0 0 var(--blu); }
/* l'ultima riga visibile non ha il filo sotto, anche se dopo di lei c'è una nota chiusa */
.v-limiti-lista tbody tr:has(+ .v-limiti-dett[hidden]:last-child) > td { border-bottom: 0; }

/* documenti della busta */
.v-limiti-gruppo th { padding-top: 6px; padding-bottom: 6px; color: var(--testo-2); }
.v-limiti-gruppo .schede-n { margin-left: 8px; vertical-align: 1px; }
.v-limiti-lista td.v-limiti-c-sigla { width: 1%; padding-right: 2px; line-height: 20px; font-weight: 500; color: var(--testo-2); white-space: nowrap; }
.v-limiti-doc { display: block; font-weight: 500; color: var(--testo); text-wrap: pretty; }
.v-limiti-doc-sotto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; }
.v-limiti-quando { color: var(--testo-2); }
.v-limiti-quando::first-letter { text-transform: uppercase; }
.v-limiti-c-importo { line-height: 20px; color: var(--testo); }
.v-limiti-testa-nota { font-size: var(--t-13); color: var(--testo-2); text-align: right; }

/* «a pena di esclusione»: la stessa etichetta nella busta e nelle regole comuni */
.v-limiti-pena { gap: 5px; height: 22px; margin: 0; font-weight: 500; color: var(--testo); text-decoration: none; }
.v-limiti-pena .ico { width: 14px; height: 14px; }
.v-limiti-pena-dubbio { color: var(--verifica); }
button.v-limiti-pena {
  padding: 0 7px; border-radius: var(--r-1);
  transition: background-color var(--t-rapido), box-shadow var(--t-rapido), transform var(--t-rapido) var(--curva);
}
button.v-limiti-pena:hover, button.v-limiti-pena.sopra { background: var(--blu-tinta); box-shadow: inset 0 0 0 1px var(--blu-bordo); }
button.v-limiti-pena:active { transform: scale(0.97); }
button.v-limiti-pena.attivo { background: var(--blu-tinta); box-shadow: inset 0 0 0 1.5px var(--blu); }

/* ---------- regole sui file ---------- */

.v-limiti-peso { padding: 12px 14px 13px; border-bottom: 1px solid var(--bordo); }
.v-limiti-fermo {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
  font-size: var(--t-13); color: var(--testo-2);
  background: var(--fondo-2); border-radius: var(--r-3);
}
.v-limiti-fermo .ico { flex: none; color: var(--testo-3); }

/* ---------- carta ---------- */
/* sulla carta le tre schede vanno una dopo l'altra, ognuna dalla sua pagina, con tutte le note aperte */
@media print {
  .v-limiti-schede { display: none; }
  .v-limiti-parte[hidden] { display: flex !important; }
  .v-limiti-parte + .v-limiti-parte { break-before: page; }
  .v-limiti-solo-carta { display: block; break-after: avoid; }
  .v-limiti-nota[hidden], .v-limiti-dett[hidden] { display: revert !important; }
  .v-limiti-freccia { display: none; }
  .v-limiti-lista tbody tr.attivo + tr.v-limiti-dett, .v-limiti-lista tbody tr.v-limiti-accesa, .v-limiti-lista tbody tr.v-limiti-accesa + tr.v-limiti-dett { background: none; box-shadow: none; }
  button.v-limiti-voce-testo, button.v-limiti-pena.attivo { background: none; box-shadow: none; text-decoration: none; }
  .v-limiti-car:has(> button.cifra.attivo) { background: none; box-shadow: none; outline: none; }
}

/* la somma delle facciate è un conto di Optimvs: il segno delle cose calcolate davanti alla parola */
.v-limiti-somma { display: inline-flex; align-items: baseline; gap: 6px; }
.v-limiti-somma > .segno { align-self: center; flex: none; }

/* ---------- scheda «Offerta economica» e regole sui file sotto la busta ---------- */
.v-limiti-eco-valore { display: block; font-size: var(--t-13); line-height: 18px; color: var(--testo-2); text-wrap: pretty; }
.v-limiti-eco .cifra-sotto { white-space: normal; }

/* in fondo alla scheda «Offerta economica»: quanto vale il ribasso e il rimando al simulatore */
.v-limiti-eco-via { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px 11px; border-top: 1px solid var(--bordo); font-size: var(--t-13); line-height: 18px; color: var(--testo-2); }
.v-limiti-eco-via .collega { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.v-limiti-eco-via .ico { width: 14px; height: 14px; transition: transform var(--t-medio) var(--curva); }
.v-limiti-eco-via .collega:hover .ico { transform: translateX(2px); }