/* Optimvs v4 · vista «Criteri»
   Solo quello che è proprio di questa vista: tutte le classi cominciano per .v-criteri-
   Riquadro, cifre, coppie, campi, apribile, avanzamento, pulsanti e dato con fonte vengono da
   assets/optimvs.css e qui non si riscrivono. Nessun colore scritto a mano: solo variabili. */

/* ---------- impianto: una colonna; con il centro largo le regole passano a lato ---------- */
.v-criteri-pagina { display: grid; gap: 20px; min-width: 0; }
.v-criteri-sx { display: grid; gap: 12px; min-width: 0; align-content: start; }
.v-criteri-dx { display: grid; gap: 8px; min-width: 0; align-content: start; }
/* tecnica ed economica una accanto all'altra, come sulla barra dei 100 punti; sotto, le regole comuni */
.v-criteri-lato { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.v-criteri-lato > .v-criteri-regole-r { grid-column: 1 / -1; }
@container centro (min-width: 1000px) {
  .v-criteri-pagina { grid-template-columns: minmax(0, 1fr) 336px; column-gap: 24px; }
  .v-criteri-lato { grid-template-columns: minmax(0, 1fr); }
  .v-criteri-dx { padding-top: 2px; }
}

/* ---------- i 100 punti ---------- */
.v-criteri-cento { display: grid; gap: 10px; min-width: 0; margin: 2px 0 0; }
/* la seconda cifra comincia dove comincia il suo pezzo di barra */
.v-criteri-parti {
  display: grid; align-items: end;
  grid-template-columns: calc((100% - var(--stacchi, 0px)) * var(--tec, 0.5) + var(--stacchi, 0px)) minmax(0, 1fr);
}
.v-criteri-parti > .cifra { align-self: end; }

.v-criteri-barra { display: flex; gap: 2px; min-width: 0; }
.v-criteri-seg {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 3px;
  min-width: 0; padding: 0; border-radius: var(--r-1);
  font-size: var(--t-13); line-height: 18px; color: var(--testo-2);
}
.v-criteri-seg.dato-riga:hover, .v-criteri-seg.dato-riga.attivo { background: none; box-shadow: none; }
.v-criteri-pezzo { justify-self: stretch; height: 20px; border-radius: 3px; transition: opacity var(--t-rapido), box-shadow var(--t-rapido); }
.v-criteri-seg-n { white-space: nowrap; transition: color var(--t-rapido); }
.v-criteri-seg:hover .v-criteri-seg-n, .v-criteri-seg.sopra .v-criteri-seg-n { color: var(--blu-testo); }
.v-criteri-seg.attivo .v-criteri-seg-n, .v-criteri-seg.v-criteri-della-riga .v-criteri-seg-n { color: var(--blu-testo); font-weight: 600; }
.v-criteri-seg.attivo .v-criteri-pezzo { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3.5px var(--blu); }
/* la riga accesa nella griglia tiene pieno il suo pezzo: gli altri si fanno da parte */
.v-criteri-barra.v-criteri-una-riga .v-criteri-pezzo { opacity: 0.32; }
.v-criteri-barra .v-criteri-seg.v-criteri-della-riga .v-criteri-pezzo,
.v-criteri-barra.v-criteri-una-riga .v-criteri-pezzo.acceso { opacity: 1; }

/* ---------- la griglia dei sub-criteri ---------- */
.v-criteri-tab { width: 100%; border-collapse: collapse; table-layout: fixed; }
.v-criteri-c-sigla { width: 46px; }
.v-criteri-c-pt { width: 78px; }

/* intestazione: nome della colonna e, sotto, la sua unità di misura */
.v-criteri-tab thead th {
  padding: 8px 0 7px; vertical-align: top; text-align: left; white-space: nowrap;
  font-size: var(--t-13); line-height: 18px; font-weight: 500; color: var(--testo-2);
  background: var(--riquadro-2); border-bottom: 1px solid var(--bordo);
}
.v-criteri-tab thead .v-criteri-th-sub { padding-left: 14px; }
.v-criteri-tab thead .v-criteri-th-pt { padding-right: 14px; text-align: right; }
.v-criteri-th-fila { display: flex; align-items: center; gap: 10px; height: 18px; }
.v-criteri-th-lim > span { display: block; }
.v-criteri-th-u { font-weight: 400; color: var(--testo-3); }

/* metodo: una parola con il contorno punteggiato, che è il segno del dato con fonte */
.v-criteri-metodo {
  display: inline-flex; align-items: center; gap: 2px; min-height: 24px; padding: 0 7px;
  font-size: var(--t-13); line-height: 18px; font-weight: 500; color: var(--testo-2); white-space: nowrap;
  border: 1px dotted var(--bordo-forte); border-radius: var(--r-1);
  transition: color var(--t-rapido), border-color var(--t-rapido), background-color var(--t-rapido), box-shadow var(--t-rapido);
}
.v-criteri-metodo:hover, .v-criteri-metodo.sopra { color: var(--blu-testo); border-color: var(--blu-bordo); }
.v-criteri-metodo.attivo { color: var(--blu-testo); border-color: transparent; }
/* dentro una riga (più metodi nella stessa gara): l'etichetta di pagina vola accanto alla parola. Il segno del dato resta il contorno */
.v-criteri-metodo.dato-vola { margin: 0; padding: 0 7px; text-decoration: none; }
/* nell'intestazione l'etichetta di pagina esce a destra della parola: lì la cella è vuota */
.v-criteri-metodo.v-criteri-in-testa { position: relative; }
.v-criteri-metodo.v-criteri-in-testa > .pg { position: absolute; left: calc(100% + 5px); top: 50%; margin-top: -9px; }
.v-criteri-metodo.v-criteri-in-testa > .pg::after { display: none; }

.v-criteri-corpo { scroll-margin: 8px 0 12px; }
.v-criteri-corpo + .v-criteri-corpo { border-top: 1px solid var(--bordo); }
.v-criteri-tab td, .v-criteri-tab tbody th { padding: 0; text-align: left; font-weight: 400; }
.v-criteri-corpo > tr > * { transition: background-color var(--t-rapido); }

/* prima riga: sigla, nome, limiti, punti. Stessa linea di base per tutti */
.v-criteri-r1 > * { vertical-align: baseline; }
.v-criteri-tab .v-criteri-sigla {
  position: relative; padding: 8px 0 0 14px;
  font-size: var(--t-13); font-weight: 500; color: var(--testo-3); white-space: nowrap;
  transition: color var(--t-rapido), background-color var(--t-rapido);
}
.v-criteri-tab .v-criteri-capo { padding: 8px 10px 0 0; }
.v-criteri-capo-d { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.v-criteri-nome { font-weight: 600; color: var(--testo); text-wrap: balance; }
.v-criteri-capo-d > .stato, .v-criteri-perche { align-self: center; }
/* il segno dello stato accanto al nome: un clic apre la riga sul motivo */
.v-criteri-perche {
  display: grid; place-items: center; width: 24px; height: 24px; margin: -2px -4px -2px -5px;
  border-radius: var(--r-2); transition: background-color var(--t-rapido);
}
.v-criteri-perche:hover { background: var(--velo); }
.v-criteri-punto { align-self: center; min-height: 24px; margin: -2px 0; }   /* l'aspetto è di .al-punto (guscio): qui solo il posto nella riga */

/* limite di facciate: il numero è il dato; l'etichetta di pagina ha il suo posto subito dopo */
.v-criteri-tab .v-criteri-lim { padding-top: 8px; white-space: nowrap; }
.v-criteri-lim-d {
  display: inline-flex; align-items: baseline; gap: 3px;
  min-height: 24px; padding: 0 0 0 5px; margin-left: -5px;
  font-size: var(--t-14); line-height: 24px; color: var(--testo-2);
}
.v-criteri-lim-d > b { min-width: 2ch; text-align: right; font-weight: 600; color: var(--testo); }
/* la sottolineatura punteggiata è il segno del dato con fonte: senza fonte non c'è */
.dato.v-criteri-lim-d > :first-child, .dato.v-criteri-n > b, .dato.v-criteri-c-d > span {
  text-decoration: underline dotted var(--bordo-forte) 1px; text-underline-offset: 3px;
  transition: text-decoration-color var(--t-rapido);
}
.v-criteri-lim-d > .stato { align-self: center; margin-left: 2px; }
.v-criteri-lim-d .sim { width: 13px; height: 13px; }
.v-criteri-lim-d > .pg::after, .v-criteri-n > .pg::after { display: none; }      /* il segno del dato qui è la sottolineatura */
.dato.v-criteri-lim-d:hover > :first-child, .dato.v-criteri-lim-d.sopra > :first-child, .dato.v-criteri-n:hover > b, .dato.v-criteri-n.sopra > b { text-decoration-color: var(--blu); }
.dato.v-criteri-lim-d.attivo > :first-child, .dato.v-criteri-n.attivo > b { text-decoration-color: transparent; }
/* al posto del numero, il documento da compilare */
.v-criteri-lim-d.v-criteri-a-parole { font-size: var(--t-13); font-weight: 500; }

.v-criteri-tab .v-criteri-pt { padding: 8px 10px 0 0; text-align: right; white-space: nowrap; }
.v-criteri-n { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 2px; min-width: 24px; min-height: 24px; padding: 0 4px 0 0; }
.v-criteri-n > b { font: 600 var(--t-18)/24px var(--car-testo); letter-spacing: -0.02em; color: var(--testo); }
.dato.v-criteri-n > b { text-underline-offset: 4px; }

/* seconda riga: barra dei punti, che cosa chiede, campi del team */
.v-criteri-r2 > td { padding: 0 14px 10px 0; }
.v-criteri-filo { margin: 3px 0; }

.v-criteri-chiede { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: start; column-gap: 4px; margin-left: -6px; }
.v-criteri-chiede-d {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 6px;
  min-height: 24px; padding: 2px 2px 2px 6px;
  font-size: var(--t-13); line-height: 20px; color: var(--testo-2); text-align: left;
}
.v-criteri-chiede-d > .pg { margin-top: 1px; }
/* che cosa chiede: fino a due righe (quasi tutte le frasi ci stanno intere); il resto si apre con la freccia */
.v-criteri-chiede-t { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; text-wrap: pretty; }
.v-criteri-aperto .v-criteri-chiede-t { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; color: var(--testo); }
.v-criteri-apri.btn-ico { width: 24px; height: 24px; }
.v-criteri-apri .ico { transition: transform var(--t-medio) var(--curva); }
.v-criteri-apri[aria-expanded="true"] { color: var(--testo); background: var(--velo); }
.v-criteri-apri[aria-expanded="true"] .ico { transform: rotate(180deg); }

/* limiti a parole (modello da compilare, limite non indicato) */
.v-criteri-consegna { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-left: -6px; font-size: var(--t-13); color: var(--testo-2); }
.v-criteri-doc { display: inline-flex; align-items: center; gap: 5px; min-width: 0; min-height: 24px; padding: 2px 0 2px 6px; text-align: left; }
.v-criteri-doc.dato-senza { padding-right: 6px; }
/* a riga aperta quello che manca è scritto sotto, con dove cercarlo: qui non si ripete */
.v-criteri-aperto .v-criteri-consegna > .dato-senza { display: none; }

/* «il resto»: si apre sotto la riga, un piano più in basso */
.v-criteri-resto {
  display: grid; gap: 2px; margin: 4px 0 6px; padding: 4px 12px 8px;
  background: var(--riquadro-2); border: 1px solid var(--bordo); border-radius: var(--r-2);
  --dato-sopra: var(--riquadro);
  animation: v-criteri-apre var(--t-medio) var(--curva) both;
}
@keyframes v-criteri-apre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.v-criteri-resto .coppie dd { font-weight: 400; }
/* perché è da verificare: una frase e le pagine da confrontare */
.v-criteri-nota { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 30px; padding: 3px 0; font-size: var(--t-13); border-bottom: 1px solid var(--bordo); }
.v-criteri-nota .stato { white-space: normal; }
/* fuori dal «resto», sempre in vista sotto «che cosa chiede»: una riga leggera, senza filo */
.v-criteri-nota.v-criteri-in-riga { min-height: 24px; padding: 0 0 2px; border-bottom: 0; }
.v-criteri-nota-pag { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.v-criteri-nota-pag > .pg { height: 24px; line-height: 24px; padding: 0 5px; }
.v-criteri-dove { display: block; font-size: var(--t-13); font-weight: 400; color: var(--testo-3); text-wrap: pretty; }
.v-criteri-via { display: inline-flex; align-items: center; gap: 5px; width: max-content; max-width: 100%; margin-top: 6px; font-size: var(--t-13); }
.v-criteri-via .ico { width: 14px; height: 14px; transition: transform var(--t-medio) var(--curva); }
.v-criteri-via:hover .ico { transform: translateX(2px); }

/* nome e valore in colonna: l'etichetta di pagina sta accanto al nome, il valore porta la sottolineatura del dato */
.v-criteri-pagina .coppie.in-colonna > div { gap: 3px; }
.v-criteri-pagina .coppie.in-colonna dt { display: flex; align-items: center; gap: 2px; min-height: 19px; }
.v-criteri-pagina .coppie.in-colonna dt > .pg::after { right: auto; left: 4px; }      /* il punto sta subito dopo il nome */
.v-criteri-val { padding: 2px 3px; margin: -2px -3px; border-radius: var(--r-1); text-align: left; }
.dato.v-criteri-val { text-decoration: underline dotted var(--bordo-forte) 1px; text-underline-offset: 3px; }
.v-criteri-val.dato-riga:hover, .v-criteri-val.dato-riga.sopra { background: var(--blu-tinta); text-decoration-color: var(--blu); }
.v-criteri-val.dato-riga.attivo { text-decoration-color: transparent; }
.v-criteri-val:focus-visible { outline-offset: 0; }      /* l'anello non tocca il nome che sta sopra */

/* i due campi del team: nome fisso, campo comune. Vuoto è un posto da riempire (tenue);
   scritto è un dato del team (pieno, testo più forte). «Elaborato» è il più largo: tre parti a cinque,
   perché a metà esatta nel responsabile non entrava un nome con il titolo («Arch. Maria Bianchi») */
.v-criteri-campi {
  display: grid; grid-template-columns: auto minmax(0, 3fr) auto minmax(0, 5fr); align-items: center; column-gap: 8px;
  margin-top: 4px;
}
.v-criteri-campi > .campo-nome { cursor: pointer; }
.v-criteri-campi > .campo-nome:nth-of-type(n + 2) { margin-left: 8px; }
.v-criteri-in { padding: 0 8px; text-overflow: ellipsis; }
/* vuoto: niente riquadro (dodici caselle grigie pesavano più dei dati). Resta il segnaposto; il bordo torna
   al passaggio e al fuoco, dove serve per capire che si scrive */
.v-criteri-in.v-criteri-vuoto:not(:focus) { background: transparent; border-color: transparent; box-shadow: none; }
.v-criteri-in.v-criteri-vuoto:not(:focus):hover { background: var(--riquadro-2); border-color: var(--bordo-forte); }
.v-criteri-in.v-criteri-vuoto::placeholder { color: var(--testo-3); }
.v-criteri-in.v-criteri-salvato { font-weight: 500; }
/* appena scritto nel registro: il campo lo conferma per un attimo */
.v-criteri-in.v-criteri-fatto:not(:focus) { border-color: var(--certo-pieno); box-shadow: 0 0 0 3px var(--certo-tinta); }

/* la riga del dato aperto nel documento: un filo blu a sinistra, la sigla accesa, un velo di tinta */
.v-criteri-sigla::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--blu);
  transform: scaleY(0); transition: transform var(--t-rapido) var(--curva);
}
.v-criteri-attiva .v-criteri-sigla::before { transform: scaleY(1); transition-duration: var(--t-medio); }
.v-criteri-tab .v-criteri-attiva .v-criteri-sigla { color: var(--blu-testo); font-weight: 600; }
.v-criteri-attiva > tr > * { background: var(--blu-tinta); }

/* ---------- accanto al titolo ---------- */
.v-criteri-av { flex: none; }
.v-criteri-av .avanzamento-barra { flex: none; width: 56px; min-width: 0; }

/* ---------- come si valuta ---------- */
.v-criteri-dx > h2 { min-height: 22px; }

/* una scala a gradini: nome, barra, valore. Tutta la scala è un dato solo */
.v-criteri-scala { display: grid; gap: 1px; width: calc(100% + 12px); margin: -2px -6px 0; padding: 3px 6px 5px; text-align: left; --nome-l: 58px; }
.v-criteri-scala.v-criteri-larga { --nome-l: 90px; }
.v-criteri-scala-t { display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: var(--t-13); color: var(--testo-2); }
.v-criteri-scala-t > .pg { margin-left: auto; }
.v-criteri-sc { display: grid; grid-template-columns: var(--nome-l) minmax(0, 1fr) 30px; align-items: center; column-gap: 8px; height: 21px; font-size: var(--t-13); }
.v-criteri-sc-n { white-space: nowrap; }
.v-criteri-sc-b { height: 4px; border-radius: 2px; background: var(--grafico-neutro-tinta); }
.v-criteri-sc-b::before { content: ''; display: block; height: 100%; width: calc(var(--q, 0) * 100%); border-radius: inherit; background: var(--grafico-forte); transition: background-color var(--t-rapido); }
.v-criteri-scala:hover .v-criteri-sc-b::before, .v-criteri-scala.attivo .v-criteri-sc-b::before { background: var(--blu); }
.v-criteri-sc-v { text-align: right; font-weight: 500; }
.v-criteri-metodo-r > .v-criteri-poche { margin-top: auto; }
.v-criteri-poche { padding-top: 6px; border-top: 1px solid var(--bordo); }
.v-criteri-poche .coppie { margin-top: 4px; border-top: 1px solid var(--bordo); }
.v-criteri-poche .coppie dd { font-weight: 400; }
.v-criteri-metodo-r > .v-criteri-scala { margin-bottom: 8px; }
/* più metodi: una riga per metodo con le sigle dei sub-criteri; sotto la scala, quando vale */
.v-criteri-metodi { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--bordo); }
.v-criteri-metodi dd { font-weight: 500; }
.v-criteri-quando { margin: -2px 0 0; font-size: var(--t-13); color: var(--testo-2); text-wrap: pretty; }

/* offerta economica: lo schema della formula e il rimando al simulatore */
.v-criteri-eco > .v-criteri-via { margin-top: 2px; font-size: var(--t-14); }
.v-criteri-curva {
  flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 128px auto;      /* altezza fissa: lo schema non si stira se il riquadro accanto cresce */
  column-gap: 8px; row-gap: 1px; margin: 12px 0 6px;
  font-size: var(--t-13); line-height: 18px; color: var(--testo-2);
}
/* asse dei coefficienti: ogni etichetta è centrata sulla sua linea */
.v-criteri-c-y { display: grid; grid-template-rows: var(--righe, 1fr 4fr); justify-items: end; }
.v-criteri-c-y > * { align-self: start; display: inline-flex; align-items: center; height: 24px; margin-top: -12px; white-space: nowrap; }
.v-criteri-c-area { position: relative; min-width: 0; border-left: 1px solid var(--bordo-forte); border-bottom: 1px solid var(--bordo-forte); }
.v-criteri-c-area > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.v-criteri-c-guida { fill: none; stroke: var(--bordo-forte); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.v-criteri-c-linea { fill: none; stroke: var(--blu); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.v-criteri-c-punto {
  position: absolute; left: 50%; top: var(--su, 20%); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--riquadro); box-shadow: inset 0 0 0 2px var(--blu);
}
/* «schema» e la pagina delle formule: nell'angolo sotto la curva, dove il grafico è vuoto */
.v-criteri-c-nota { position: absolute; right: 8px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; color: var(--testo-3); }
.v-criteri-c-nota > .pg { height: 24px; line-height: 24px; padding: 0 5px; }
/* asse dei ribassi: «media» sotto il ginocchio, «massimo» in fondo */
.v-criteri-c-x { grid-column: 2; display: grid; }
.v-criteri-c-x > * { grid-area: 1 / 1; justify-self: center; display: inline-flex; align-items: center; height: 24px; white-space: nowrap; }
.v-criteri-c-x > :last-child { justify-self: end; }
.v-criteri-c-d { padding: 0 4px; margin-left: -4px; margin-right: -4px; }
.v-criteri-c-d.dato-riga:hover, .v-criteri-c-d.dato-riga.sopra { color: var(--blu-testo); background: var(--blu-tinta); }
.v-criteri-c-d:hover > span, .v-criteri-c-d.sopra > span { text-decoration-color: var(--blu); }
.v-criteri-c-d.attivo { color: var(--blu-testo); }
.v-criteri-c-d.attivo > span { text-decoration-color: transparent; }

/* regole comuni: un piano sotto. Con il centro stretto le quattro regole stanno su due colonne */
.v-criteri-regole-r .coppie { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.v-criteri-regole-r .coppie > div { align-content: start; border-top: 0; }
.v-criteri-regole-r .coppie > div:nth-child(n + 3) { border-top: 1px solid var(--bordo-forte); }
.v-criteri-regole-r .coppie dd { font-weight: 500; }
.v-criteri-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.v-criteri-fila .stato { font-size: var(--t-13); }
@container centro (min-width: 1000px) {
  .v-criteri-regole-r .coppie { grid-template-columns: minmax(0, 1fr); }
  .v-criteri-regole-r .coppie > div:nth-child(n + 2) { border-top: 1px solid var(--bordo-forte); }
}

/* ---------- centro stretto (finestra da 1280 con il documento aperto) ---------- */
@container centro (max-width: 659px) {
  .v-criteri-pagina { gap: 16px; }
  .v-criteri-sx { gap: 10px; }
  .v-criteri-lato { gap: 10px; }
  .v-criteri-c-sigla { width: 42px; }
  .v-criteri-c-pt { width: 74px; }
  .v-criteri-tab .v-criteri-capo { padding-right: 6px; }
  /* meno spazio: al responsabile quattro parti su nove, quanto basta a un nome con il titolo */
  .v-criteri-campi { grid-template-columns: auto minmax(0, 4fr) auto minmax(0, 5fr); }
}

/* centro stretto (finestra da 1280): il nome prende tutta la prima riga e il metodo sta sempre sotto,
   in ogni sub-criterio. Prima andava a capo solo dove il nome era lungo, e le righe non si somigliavano */
@container centro (max-width: 659px) {
  .v-criteri-capo-d > .v-criteri-nome { flex: 1 1 100%; }
  .v-criteri-capo-d { row-gap: 2px; }
}