/* Optimvs v4 · vista «Requisiti»
   Solo quello che è proprio di questa vista: tutte le classi cominciano per .v-requisiti-
   Riquadro, tabella, barra nella cella, cifra, segni, legenda, apribile, rimando al punto e dato con fonte
   vengono da assets/optimvs.css e qui non si riscrivono: si aggiungono solo le varianti. */

/* ---------- tabella SOA: due righe per categoria, colonne a misura fissa ---------- */

.v-requisiti-soa > .riquadro-testa { border-bottom: 0; padding-bottom: 8px; }

.tabella.v-requisiti-tab { table-layout: fixed; }
.v-requisiti-col-cat { width: 90px; }
.v-requisiti-col-cl { width: 74px; }
.v-requisiti-col-imp { width: 110px; }
.v-requisiti-col-peso { width: 64px; }
.v-requisiti-col-sub { width: 88px; }
.v-requisiti-col-pag { width: 54px; }

.tabella.v-requisiti-tab th, .tabella.v-requisiti-tab td { padding-left: 6px; padding-right: 6px; }
.tabella.v-requisiti-tab th:first-child, .tabella.v-requisiti-tab td:first-child { padding-left: 14px; }
.tabella.v-requisiti-tab th:last-child, .tabella.v-requisiti-tab td:last-child { padding-right: 14px; }
.tabella.v-requisiti-tab thead th { border-top: 1px solid var(--bordo); }
.tabella.v-requisiti-tab .v-requisiti-h-peso { padding-left: 13px; }

/* «Prevalente», «Scorporabili»: un'etichetta leggera sopra il gruppo */
.tabella.v-requisiti-tab .v-requisiti-gruppo th {
  padding-top: 7px; padding-bottom: 0;
  font-size: var(--t-13); font-weight: 500; color: var(--testo-3);
  background: none; border-bottom: 0;
}
.tabella.v-requisiti-tab tbody tr:hover { background: none; }

/* la categoria: riga dei numeri e, sotto, descrizione e white list. Si clicca tutta insieme */
.tabella.v-requisiti-tab .v-requisiti-cat { transition: background-color var(--t-rapido); }
.tabella.v-requisiti-tab .v-requisiti-cat[data-fonte] { cursor: pointer; }
.tabella.v-requisiti-tab .v-requisiti-cat:hover, .tabella.v-requisiti-tab .v-requisiti-cat.sopra { background: var(--riquadro-2); }
.tabella.v-requisiti-tab .v-requisiti-cat[data-fonte]:active { background: var(--etichetta); }
.tabella.v-requisiti-tab .v-requisiti-cat.attivo, .tabella.v-requisiti-tab .v-requisiti-cat.attivo:active { background: var(--blu-tinta); }
.tabella.v-requisiti-tab .v-requisiti-cat.attivo td:first-child { box-shadow: inset 2px 0 0 var(--blu); }
.tabella.v-requisiti-tab .v-requisiti-cat:focus-visible { outline: 2px solid var(--fuoco); outline-offset: -2px; }

.tabella.v-requisiti-tab .v-requisiti-sopra td { padding-top: 6px; padding-bottom: 0; border-bottom: 0; line-height: 19px; }
.tabella.v-requisiti-tab .v-requisiti-sotto td { padding-top: 0; padding-bottom: 6px; border-bottom: 1px solid var(--bordo); line-height: 17px; vertical-align: top; }
.tabella.v-requisiti-tab tbody:last-of-type .v-requisiti-sotto td { border-bottom: 0; }
/* anche la riga del totale è un dato */
.tabella.v-requisiti-tab tfoot tr[data-fonte] td { transition: background-color var(--t-rapido); }
.tabella.v-requisiti-tab tfoot tr[data-fonte]:hover td, .tabella.v-requisiti-tab tfoot tr.sopra td { background: var(--etichetta); }
.tabella.v-requisiti-tab tfoot tr.attivo td { background: var(--blu-tinta); }
.tabella.v-requisiti-tab tfoot tr.attivo td:first-child { box-shadow: inset 2px 0 0 var(--blu); }

.v-requisiti-c-cat { white-space: nowrap; }
.v-requisiti-c-cat .segno { margin-right: 7px; vertical-align: 0; }
.tabella.v-requisiti-tab .v-requisiti-c-descr { padding-left: 30px; color: var(--testo-2); }

/* la barra del peso: il binario è il totale (100%). Senza documento a fianco la colonna è larga: la barra si ferma a 220 px */
.tabella.v-requisiti-tab .v-requisiti-c-barra { padding-left: 4px; padding-right: 10px; }
.v-requisiti-c-barra .cella-barra { max-width: 220px; }
.v-requisiti-cat:not(.v-requisiti-prev) .cella-barra { --filo: var(--grafico-forte); }
.v-requisiti-cat.attivo .cella-barra { --filo: var(--blu); }
.v-requisiti-c-barra .cella-barra::before { transform-origin: 0 50%; transition: background-color var(--t-rapido); }
/* entrando nella vista le barre si disegnano da sinistra, una dopo l'altra (solo transform e opacity;
   «backwards»: a ingresso finito non resta nessuna trasformazione. Con ?fermo=1 e «movimento ridotto» il guscio lo spegne) */
.vista.entra .v-requisiti-c-barra .cella-barra::before {
  animation: v-requisiti-barra var(--t-lento) var(--curva) backwards;
  animation-delay: calc(60ms + var(--i, 0) * 30ms);
}
@keyframes v-requisiti-barra { from { transform: scaleX(0.2); opacity: 0.4; } }

/* subappalto: il numero resta in colonna, il segno «da verificare» ha il suo posto accanto.
   Il pulsante è alto 24 px ma occupa la riga di 19: i margini negativi lo tengono al suo posto */
.v-requisiti-sub { padding-right: 17px; }
.v-requisiti-dubbio { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px; margin: -3px -4px -2px; vertical-align: top; }
.v-requisiti-dubbio .sim { width: 13px; height: 13px; }

/* white list: una qualità della categoria, accanto alla descrizione. Discreta, cliccabile */
.v-requisiti-wl {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 5px; margin: -4px 0 -3px 5px; vertical-align: top;
  font-size: var(--t-13); color: var(--testo-2); white-space: nowrap;
}
.v-requisiti-wl .ico { width: 14px; height: 14px; color: var(--testo-3); transition: color var(--t-rapido); }
.v-requisiti-wl:hover, .v-requisiti-wl.sopra, .v-requisiti-wl.attivo { color: var(--blu-testo); }
.v-requisiti-wl:hover .ico, .v-requisiti-wl.sopra .ico, .v-requisiti-wl.attivo .ico { color: var(--blu-testo); }

/* i due pulsanti dentro la riga si toccano su 24 px, ma il fondo che si vede è alto 20:
   così, accesi, non salgono sotto i numeri della riga sopra */
.v-requisiti-wl, .v-requisiti-dubbio { position: relative; z-index: 0; }
.v-requisiti-wl::before, .v-requisiti-dubbio::before {
  content: ''; position: absolute; inset: 2px 0; z-index: -1; border-radius: var(--r-1);
  transition: background-color var(--t-rapido), box-shadow var(--t-rapido);
}
button.v-requisiti-wl, button.v-requisiti-wl:hover, button.v-requisiti-wl.attivo,
button.v-requisiti-dubbio, button.v-requisiti-dubbio:hover, button.v-requisiti-dubbio.attivo { background: none; box-shadow: none; }
/* dentro una riga già accesa il fondo del passaggio non si vedrebbe: un tono più giù */
button.v-requisiti-wl:hover::before, button.v-requisiti-dubbio:hover::before { background: var(--etichetta); }
.v-requisiti-cat.attivo button.v-requisiti-wl:hover::before, .v-requisiti-cat.attivo button.v-requisiti-dubbio:hover::before { background: var(--blu-tinta-2); }
button.v-requisiti-wl.attivo::before, button.v-requisiti-dubbio.attivo::before,
button.v-requisiti-wl.attivo:hover::before, button.v-requisiti-dubbio.attivo:hover::before { background: var(--blu-tinta); box-shadow: inset 0 0 0 1.5px var(--blu); }
button.v-requisiti-wl:active, button.v-requisiti-dubbio:active { transform: scale(0.97); }
button.v-requisiti-wl:focus-visible, button.v-requisiti-dubbio:focus-visible { outline-offset: -2px; }

/* l'attestazione dell'impresa non l'abbiamo: lo dice la testa del riquadro */
.v-requisiti-impresa { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-13); color: var(--testo-2); white-space: nowrap; }
.v-requisiti-impresa .sim { width: 14px; height: 14px; }
.v-requisiti-impresa b { margin-left: 2px; font-weight: 500; color: var(--testo); }

/* ---------- i riquadri ---------- */

/* tre riquadri con la cifra grande, uno accanto all'altro: garanzia provvisoria, durata, subappalto */
.v-requisiti-figure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@container centro (max-width: 659px) { .v-requisiti-figure { gap: 10px; } }
@container centro (max-width: 659px) { .v-requisiti-figure > .riquadro { padding-left: 12px; padding-right: 12px; } }

.v-requisiti-scheda > .riquadro-testa { margin-bottom: 3px; }
/* quante voci aperte, a parole: «1 da verificare» */
.v-requisiti-marche { display: inline-flex; align-items: center; gap: 12px; flex: none; font-size: var(--t-13); color: var(--testo-2); white-space: nowrap; }
.v-requisiti-marche .sim { width: 13px; height: 13px; }

/* ---------- gli altri requisiti: un elenco compatto di gruppi che si aprono ---------- */
.v-requisiti-altri { display: block; }
.v-requisiti-gruppo + .v-requisiti-gruppo { border-top: 1px solid var(--bordo); }
.v-requisiti-gruppo > summary { width: 100%; min-height: 42px; gap: 10px; padding: 0 14px 0 10px; border-radius: 0; color: var(--testo); }
.v-requisiti-gruppo:first-of-type > summary { border-radius: 7px 7px 0 0; }
.v-requisiti-gruppo:last-of-type:not([open]) > summary { border-radius: 0 0 7px 7px; }
.v-requisiti-gruppo-t { flex: none; font-size: var(--t-14); font-weight: 600; }
/* chiuso: il primo valore del gruppo, in grigio, dice che cosa c'è dentro. Aperto non serve: si legge sotto */
.v-requisiti-assaggio { flex: 1 1 auto; min-width: 0; font-size: var(--t-13); color: var(--testo-2); }
.v-requisiti-gruppo[open] .v-requisiti-assaggio { visibility: hidden; }
.v-requisiti-gruppo > .apribile-corpo { padding: 0 8px 8px; }
/* dentro un gruppo le righe stanno su due colonne (una nel centro stretto) */
.v-requisiti-righe.v-requisiti-in-gruppo { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.v-requisiti-in-gruppo > .v-requisiti-riga { padding-top: 1px; }
.v-requisiti-in-gruppo > .v-requisiti-riga::before { content: ''; position: absolute; left: 6px; right: 6px; top: 0; height: 1px; background: var(--bordo); }
@container centro (max-width: 659px) { .v-requisiti-righe.v-requisiti-in-gruppo { grid-template-columns: minmax(0, 1fr); } }
.v-requisiti-gruppo[open] > .apribile-corpo { animation: v-requisiti-apri var(--t-medio) var(--curva) backwards; }

/* la classifica nella tabella SOA quando ha una frase sua: si clicca da sola */
button.v-requisiti-cl { height: 24px; margin: -3px -6px -2px; padding: 0 6px; font: inherit; text-decoration: underline dotted var(--bordo-forte) 1px; text-underline-offset: 3px; }
button.v-requisiti-cl:hover, button.v-requisiti-cl.attivo { text-decoration-color: transparent; }
/* la riga del conto: il segno delle cose calcolate accanto al nome */
.v-requisiti-nome > .segno { flex: none; margin-top: 5px; }

/* cifra in testa al riquadro: dentro un riquadro il passaggio si vede con il grigio, non con il bianco */
.v-requisiti-cifra { margin: 8px 0 12px; max-width: 100%; transition: background-color var(--t-rapido), box-shadow var(--t-rapido), transform var(--t-rapido) var(--curva); }
.v-requisiti-cifra .cifra-nome { gap: 2px; }   /* il punto della fonte alla stessa distanza dal nome che ha nelle righe sotto */
.v-requisiti-cifra .cifra-sotto { white-space: normal; text-wrap: balance; }
.v-requisiti-cifra .cifra-nome .sim { width: 13px; height: 13px; }
/* il rimando al punto di «Da chiarire» che riguarda la cifra: sotto la cifra, sulla sua riga */
.v-requisiti-cifra-punto { margin: -6px 0 10px; font-size: var(--t-13); line-height: 22px; }
button.v-requisiti-cifra:hover:not(.attivo) { background: var(--riquadro-2); box-shadow: 0 0 0 6px var(--riquadro-2); }
button.v-requisiti-cifra:active { transform: scale(0.985); }

/* righe: il nome sopra, il valore sotto. Tutta la riga è il dato: si accende da bordo a bordo,
   6 px oltre il testo, come l'alone della cifra. L'etichetta di pagina sta accanto al nome */
.v-requisiti-righe { display: grid; min-width: 0; margin: 0 -6px; }
.v-requisiti-riga { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
/* il filo fra una riga e l'altra sta sopra la riga, fuori dal dato: al passaggio resta al suo posto */
.v-requisiti-riga + .v-requisiti-riga, .v-requisiti-cifra + .v-requisiti-righe > .v-requisiti-riga:first-child { padding-top: 1px; }
.v-requisiti-riga + .v-requisiti-riga::before, .v-requisiti-cifra + .v-requisiti-righe > .v-requisiti-riga:first-child::before {
  content: ''; position: absolute; left: 6px; right: 6px; top: 0; height: 1px; background: var(--bordo);
}

.v-requisiti-dato {
  grid-area: 1 / 1 / 2 / 3;
  display: grid; align-content: start; row-gap: 1px;
  width: 100%; min-width: 0; min-height: 30px; padding: 5px 6px 6px;
  text-align: left;
  transition: background-color var(--t-rapido), box-shadow var(--t-rapido), transform var(--t-rapido) var(--curva);
}
button.v-requisiti-dato:active { transform: scale(0.99); }
button.v-requisiti-dato:focus-visible { outline-offset: -2px; }

.v-requisiti-nome { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: var(--t-13); line-height: 18px; color: var(--testo-2); }
.v-requisiti-testo { flex: 1 1 auto; min-width: 0; text-wrap: balance; }
.v-requisiti-coda { white-space: nowrap; }
.v-requisiti-coda .pg { margin-left: 2px; vertical-align: top; }
.v-requisiti-nome > .stato { flex: none; height: 18px; }
.v-requisiti-nome .sim { width: 13px; height: 13px; }
.v-requisiti-valore { min-width: 0; font-size: var(--t-14); font-weight: 500; line-height: 20px; color: var(--testo); font-variant-numeric: tabular-nums; text-wrap: pretty; overflow-wrap: break-word; }
.v-requisiti-valore.v-requisiti-frase { font-weight: 400; }
/* mancante: dove cercarlo */
.v-requisiti-dove { font-size: var(--t-13); line-height: 18px; color: var(--testo-2); text-wrap: pretty; }

/* il rimando a «Da chiarire»: sempre a destra, sulla riga del nome. Sta sopra il dato (un collegamento
   non può stare dentro un pulsante): il nome gli lascia il posto */
.v-requisiti-con-punto .v-requisiti-nome { padding-right: 86px; }
.v-requisiti-con-punto.v-requisiti-lungo .v-requisiti-nome { padding-right: 94px; }   /* «Punto 10» */
/* alto 24 px (si tocca bene), centrato sulla riga del nome che ne misura 18 */
.v-requisiti-punto { grid-area: 1 / 2; z-index: 1; align-self: start; height: 24px; margin: 2px 6px 0 0; line-height: 24px; }

/* le voci di contorno: «Altro», «Riduzioni». Stanno in fondo al riquadro: in una coppia di riquadri
   alti uguali i due «Altro» sono alla stessa altezza */
.v-requisiti-resto { margin-top: auto; padding-top: 4px; }
.v-requisiti-righe + .v-requisiti-resto { border-top: 1px solid var(--bordo); }
.v-requisiti-resto > summary { margin-left: -3px; }
.v-requisiti-resto > .apribile-corpo { padding-top: 2px; }
.v-requisiti-scheda > .v-requisiti-resto:not([open]):last-child { margin-bottom: -5px; }
/* aprendo, le righe arrivano con un piccolo scorrimento (solo transform e opacity) */
.v-requisiti-resto[open] > .apribile-corpo, .v-requisiti-conti [open] > .apribile-corpo { animation: v-requisiti-apri var(--t-medio) var(--curva) backwards; }
@keyframes v-requisiti-apri { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- conti rifatti: una riga richiudibile ---------- */

.v-requisiti-conti { padding: 6px 10px; }
.v-requisiti-conti-n { padding: 0 6px; margin-left: 1px; line-height: 18px; color: var(--testo-2); background: var(--etichetta); border-radius: 9px; }
.v-requisiti-conti-elenco { display: grid; gap: 12px; padding: 8px 6px 8px 24px; }
.v-requisiti-conto { display: grid; grid-template-columns: 15px minmax(0, 1fr); column-gap: 9px; align-items: start; }
.v-requisiti-conto > .stato, .v-requisiti-conto-info { margin-top: 2px; }
.v-requisiti-conto-info { display: grid; color: var(--testo-3); }
.v-requisiti-conto-info .ico { width: 15px; height: 15px; }
.v-requisiti-conto-domanda b { font-weight: 600; }
.v-requisiti-conto-passi { display: grid; gap: 1px; margin-top: 3px; font-size: var(--t-13); line-height: 18px; color: var(--testo-2); }

/* centro stretto (finestra da 1280): nei tre riquadri con la cifra il rimando «Punto N» non ci sta accanto al nome.
   Scende sotto il valore, a sinistra, e il nome riprende tutta la riga */
@container centro (max-width: 659px) {
  .v-requisiti-figure .v-requisiti-con-punto .v-requisiti-nome,
  .v-requisiti-figure .v-requisiti-con-punto.v-requisiti-lungo .v-requisiti-nome { padding-right: 0; }
  .v-requisiti-figure .v-requisiti-con-punto > .v-requisiti-dato { padding-bottom: 28px; }
  .v-requisiti-figure .v-requisiti-punto { grid-area: 1 / 1 / 2 / 3; align-self: end; justify-self: start; margin: 0 0 4px 6px; }
}