/* Optimvs v4 · vista «Sintesi»
   Solo quello che è proprio di questa vista: tutte le classi cominciano per .v-sintesi-
   Riquadro, righe con barra, cifre, legenda, linea del tempo, «Da fare ora» e dato con fonte
   vengono da assets/optimvs.css e qui non si riscrivono. */

/* cifre chiave: una riga sotto il titolo */
.v-sintesi-cifre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 16px; margin: 2px 0; }
@container centro (min-width: 980px) {
  /* centro largo (documento nascosto): le quattro cifre a passo uguale */
  .v-sintesi-cifre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; }
}
@container centro (max-width: 659px) {
  /* centro stretto (finestra da 1280): le cifre restano su una riga sola.
     I punti 70 / 30 si leggono nel riquadro Criteri, subito sotto. */
  .v-sintesi-punti { display: none; }
}

/* punti: due numeri, due fonti. Le due etichette stanno nello stesso posto: si vede quella che serve */
/* la cifra doppia «70 / 30» è un componente comune: .cifra-due, .cifra-parte, .cifra-sbarra (optimvs.css) */

/* i quattro riquadri. L'elenco dei sub-criteri è il più lungo: «Criteri» prende tutta l'altezza della colonna di destra;
   a sinistra, uno sotto l'altro, «Importi» e «Scadenze»; «Requisiti · SOA» chiude a tutta larghezza.
   Nessun riquadro resta mezzo vuoto, quanti che siano i sub-criteri e le date */
.v-sintesi-quadri {
  display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "importi criteri" "scadenze criteri" "soa soa";
}
.v-sintesi-importi { grid-area: importi; }
.v-sintesi-criteri { grid-area: criteri; }
.v-sintesi-scadenze { grid-area: scadenze; }
.v-sintesi-soa { grid-area: soa; }
@container centro (min-width: 980px) {
  /* centro largo: tre colonne, «Criteri» e «Scadenze» a tutta altezza, «Requisiti · SOA» sotto «Importi» */
  .v-sintesi-quadri { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "importi criteri scadenze" "soa criteri scadenze"; }
}
/* dentro ogni riquadro il contenuto riempie l'altezza, la legenda sta in fondo */
.v-sintesi-corpo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.v-sintesi-corpo > .legenda { margin-top: auto; padding-top: 8px; }

/* importi: la parte soggetta a ribasso in evidenza, la barra divisa in tre */
.v-sintesi-ribasso { display: grid; gap: 0; padding: 3px 6px 4px; margin: -3px -6px 0; width: max-content; max-width: calc(100% + 12px); }
.v-sintesi-ribasso-nome { display: flex; align-items: center; gap: 6px; font-size: var(--t-13); font-weight: 500; color: var(--blu-testo); }
.v-sintesi-ribasso-valore { font: 600 var(--t-18)/1.3 var(--car-testo); font-feature-settings: inherit; letter-spacing: -0.025em; color: var(--testo); }
.v-sintesi-graffa { height: 6px; margin-top: 10px; border: 1.5px solid var(--blu); border-bottom: 0; border-radius: 3px 3px 0 0; }
/* se il riquadro è più alto del necessario (il vicino ha una riga in più) la barra prende spessore */
.v-sintesi-importi .segmenti { flex: 1 0 20px; height: auto; max-height: 28px; margin-top: 3px; }
.v-sintesi-imp-righe { display: grid; gap: 1px; margin: auto -4px 0 -6px; padding-top: 10px; }
.v-sintesi-imp-riga {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px;
  width: 100%; height: 24px; padding: 0 2px 0 6px; font-size: var(--t-13);
}
.v-sintesi-imp-num { text-align: right; }

/* criteri: tecnica ed economica, la barra dei punti, i sub-criteri */
.v-sintesi-parti { display: flex; justify-content: space-between; gap: 8px; margin-top: -1px; }
.v-sintesi-parte { display: inline-flex; align-items: center; gap: 5px; height: 20px; font-size: var(--t-13); white-space: nowrap; }
.v-sintesi-parte b { font-weight: 600; }
.v-sintesi-criteri .segmenti { height: 8px; margin: 4px 0 8px; }

/* SOA */
.v-sintesi-cat { font-weight: 500; color: var(--testo); white-space: nowrap; }
.v-sintesi-cl { color: var(--testo-2); }

/* i punti da chiarire */
.v-sintesi-guardare { display: grid; gap: 8px; margin-top: 2px; }
.v-sintesi-punto {
  display: grid; grid-template-columns: 18px 15px minmax(0, 1fr) auto auto; align-items: center; column-gap: 9px;
  width: 100%; min-height: 36px; padding: 0 10px;
  border-radius: 0;
}
.v-sintesi-punti-elenco li + li > .v-sintesi-punto { border-top: 1px solid var(--bordo); }
.v-sintesi-punti-elenco li:first-child > .v-sintesi-punto { border-radius: 7px 7px 0 0; }
.v-sintesi-punto-n { color: var(--testo-3); text-align: right; font-size: var(--t-13); }
.v-sintesi-punto-titolo { min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-sintesi-punto-pagine { display: inline-flex; justify-content: flex-end; grid-column: 5; min-width: 40px; }   /* un solo segno per riga: la pagina della prima frase */
/* la scelta del team, in una parola: la stessa di «Da chiarire». Vuota finché il punto non è stato guardato */
.v-sintesi-punto-esito { display: inline-flex; align-items: center; gap: 4px; min-width: 100px; font-size: var(--t-13); color: var(--testo-2); white-space: nowrap; }   /* larghezza fissa: i tre disegni stanno in colonna */
.v-sintesi-punto-esito .ico { width: 14px; height: 14px; color: var(--testo-2); }
.v-sintesi-punto-esito .ico.ris-coincide { color: var(--certo); }
.v-sintesi-punto-esito .ico.ris-diverso { color: var(--blu-testo); }
.v-sintesi-punto-esito:empty { display: none; }
/* centro stretto (finestra da 1280 con il documento aperto): resta la spunta, la parola è per i lettori di schermo */
@container centro (max-width: 659px) {
  .v-sintesi-punto-parola { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .v-sintesi-punto-esito { min-width: 0; }
}
.v-sintesi-altri {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 32px;
  font-size: var(--t-13); color: var(--testo-2);
  background: var(--riquadro-2); border-top: 1px solid var(--bordo); border-radius: 0 0 7px 7px;
  transition: color var(--t-rapido), background-color var(--t-rapido);
}
.v-sintesi-altri:hover { color: var(--testo); }
.v-sintesi-altri .ico { transition: transform var(--t-medio) var(--curva); }
.v-sintesi-altri[aria-expanded="true"] .ico { transform: rotate(180deg); }

/* stato della lettura: una sola barra a segmenti */
.v-sintesi-lettura { gap: 9px; padding: 12px 14px 13px; }
.v-sintesi-lettura-testa { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
.v-sintesi-lettura p { font-size: var(--t-13); color: var(--testo-2); }

/* la riga di guida: una frase piana sopra le cifre, con la sua X. Non è un riquadro: non è un dato della gara */
.v-sintesi-guida { display: flex; align-items: center; gap: 8px; margin: -6px 0 10px; padding: 0 2px; min-height: 28px; font-size: var(--t-13); line-height: 18px; color: var(--testo-2); }
.v-sintesi-guida > .ico { width: 14px; height: 14px; flex: none; color: var(--blu-testo); }
.v-sintesi-guida > span { min-width: 0; }
.v-sintesi-guida-chiudi { width: 24px; height: 24px; margin-left: auto; flex: none; color: var(--testo-3); }
.v-sintesi-guida-chiudi .ico { width: 13px; height: 13px; }
@media print { .v-sintesi-guida { display: none; } }