/* Optimvs v4 · vista «Cruscotto dello studio» (e «Scadenze»)
   Solo quello che è proprio di questa vista: tutte le classi cominciano per .v-cruscotto-
   Riquadro, tabella, cifra, legenda, segni, barra a segmenti, «Da fare ora», pulsanti e dato con fonte
   vengono da assets/optimvs.css e qui non si riscrivono. Colori: solo variabili.

   La griglia: due colonne, la stessa per la scheda della gara (gara | lettura) e per il resto
   (scadenze | scouting e controlli). Il filo dentro la scheda cade sul bordo della colonna di destra.
   #scadenze ([data-sezione="scadenze"], lo mette il guscio): gli stessi riquadri, con le scadenze in cima e a tutta larghezza. */
.vista.v-cruscotto {
  --v-cruscotto-colonne: minmax(0, 1.9fr) minmax(0, 1fr);
  display: grid; grid-template-columns: var(--v-cruscotto-colonne); gap: 12px;
  grid-template-areas: "demo demo" "gara gara" "ora ora" "scad lato" "altre altre";
}
.vista.v-cruscotto[data-sezione="scadenze"] { grid-template-areas: "demo demo" "scad scad" "gara gara" "ora ora" "lato lato" "altre altre"; }
.vista.v-cruscotto:has(> .v-cruscotto-lato:empty) { grid-template-areas: "demo demo" "gara gara" "ora ora" "scad scad" "altre altre"; }
/* demo pubblica: che cosa è inventato, in una riga piana sopra la scheda (non un riquadro: non è un dato della gara) */
.v-cruscotto-demo { grid-area: demo; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: -4px 0 0; padding: 0 2px; font-size: var(--t-13); line-height: 20px; color: var(--testo-2); }
.v-cruscotto-demo > .ico { width: 14px; height: 14px; flex: none; color: var(--testo-3); }
.v-cruscotto-demo > .collega { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; white-space: nowrap; }
.v-cruscotto-demo > .collega .ico { width: 13px; height: 13px; }
/* le altre gare dello studio: d'esempio e non apribili. Contorno tratteggiato, come le gare dello scouting */
.v-cruscotto-altre { grid-area: altre; border-style: dashed; border-color: var(--bordo-forte); box-shadow: none; }
.v-cruscotto .v-cruscotto-altre > .riquadro-testa { min-height: 40px; padding: 4px 20px; gap: 10px; }
.v-cruscotto-altre-nota { margin-left: auto; font-size: var(--t-13); color: var(--testo-3); white-space: nowrap; }
.v-cruscotto-altre-t th:first-child, .v-cruscotto-altre-t td:first-child { padding-left: 20px; }
.v-cruscotto-altre-t th:last-child, .v-cruscotto-altre-t td:last-child { padding-right: 20px; }
.v-cruscotto-altre-t td { vertical-align: middle; line-height: 18px; }
.v-cruscotto-altra-nome { display: block; font-weight: 500; color: var(--testo); }
.v-cruscotto-altra-ente { display: block; color: var(--testo-3); }
.v-cruscotto-altra-criterio, .v-cruscotto-altra-quando { white-space: nowrap; color: var(--testo-2); }
.v-cruscotto-altre-t .v-cruscotto-fra { width: 1%; text-align: right; white-space: nowrap; color: var(--testo-2); }
.v-cruscotto-altre-t tbody tr:hover { background: none; }
.v-cruscotto-gara { grid-area: gara; }
.v-cruscotto-ora { grid-area: ora; min-width: 0; }
.v-cruscotto-scadenze { grid-area: scad; }
.v-cruscotto-lato { grid-area: lato; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v-cruscotto-ora:empty, .v-cruscotto-lato:empty { display: none; }
/* la frase parte dalla stessa verticale del nome della gara e delle date sotto */
.v-cruscotto-ora > .ora { padding-left: 20px; }
/* il titolo «Scadenze» lo scrive già il guscio sopra la vista: quello del riquadro resta solo per i lettori di schermo, e la legenda va a sinistra */
.v-cruscotto[data-sezione="scadenze"] .v-cruscotto-scadenze > .riquadro-testa > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.v-cruscotto[data-sezione="scadenze"] .v-cruscotto-scadenze > .riquadro-testa > .legenda { margin-left: 0; }
/* con le scadenze in cima, scouting e controlli stanno sotto, sulle stesse due colonne della scheda */
.v-cruscotto[data-sezione="scadenze"] .v-cruscotto-lato { display: grid; grid-template-columns: var(--v-cruscotto-colonne); }
/* lì «Scouting gare» è nella colonna di sinistra: prende il margine dei riquadri che ha sopra */
.v-cruscotto[data-sezione="scadenze"] .v-cruscotto-scouting > .riquadro-testa, .v-cruscotto[data-sezione="scadenze"] .v-cruscotto-esempio { padding-left: 20px; }

/* accanto al titolo: il giorno di «oggi» */
.v-cruscotto-data { display: flex; gap: 6px; font-size: var(--t-13); color: var(--testo-2); white-space: nowrap; }
.v-cruscotto-data span { color: var(--testo-3); }

/* ---------- 1 · la gara in esame: il primo piano della vista ---------- */
.v-cruscotto-gara { display: grid; grid-template-columns: var(--v-cruscotto-colonne); column-gap: 12px; }
.v-cruscotto-gara-sx { display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: 22px 8px 20px 20px; }

/* il nome della gara; in fondo alla riga il codice e la fase */
.v-cruscotto-chi-riga { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.v-cruscotto-nome { margin-right: auto; font-size: var(--t-20); line-height: 1.25; letter-spacing: -0.02em; }
.v-cruscotto-nome a { text-decoration: none; border-radius: var(--r-1); transition: color var(--t-rapido); }
.v-cruscotto-nome a:hover { color: var(--blu-testo); }
.v-cruscotto-segni { display: flex; align-items: center; gap: 6px; }
.v-cruscotto-ente { margin-top: 2px; color: var(--testo-2); }

/* le tre cifre: nomi, valori e righe sotto stanno sulle stesse tre linee, anche con corpi diversi
   (i valori poggiano in basso; con queste interlinee 32 px e 24 px hanno la stessa linea di base) */
.v-cruscotto-cifre { display: flex; flex-wrap: wrap; gap: 12px 52px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bordo); }
.v-cruscotto-cifra { grid-template-rows: 20px 40px 18px; }
.v-cruscotto-cifra .cifra-valore { align-self: end; line-height: 32px; }
.v-cruscotto-cifra.grande .cifra-valore { line-height: 38px; }
/* dentro un riquadro bianco il passaggio sulla cifra ha bisogno di un tono */
.v-cruscotto-gara button.cifra:hover { background: var(--dato-sopra); box-shadow: 0 0 0 6px var(--dato-sopra); }
/* l'anello del fuoco gira largo come il fondo del passaggio, non attaccato al testo; alla pressione il fondo si fa blu */
.v-cruscotto-gara button.cifra:focus-visible { outline-offset: 6px; }
.v-cruscotto-gara button.cifra:active { background: var(--blu-tinta); box-shadow: 0 0 0 6px var(--blu-tinta); }

/* la cifra doppia «70 / 30» (due numeri, due fonti) è un componente comune: .cifra-due, .cifra-parte, .cifra-sbarra (optimvs.css) */

/* la lettura: un tono sotto, con i tre conteggi sopra la loro barra */
/* i margini interni sono quelli dei riquadri sotto: a destra 14 px come scouting e controlli.
   In alto 5 px in più della parte sinistra: così «Lettura del disciplinare» (14 px) sta sulla linea di base del nome della gara (20 px);
   in basso 7 px in meno: così «letto il…» sta sulla linea di «tecnica / economica» */
.v-cruscotto-lettura { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 27px 14px 13px 14px; background: var(--riquadro-2); border-left: 1px solid var(--bordo); }
.v-cruscotto-lettura-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 22px; }
.v-cruscotto-pagine { font-size: var(--t-13); color: var(--testo-3); white-space: nowrap; }
/* tre colonne uguali, mai più strette del loro testo */
.v-cruscotto-conti { display: grid; grid-template-columns: repeat(3, minmax(max-content, 1fr)); gap: 6px 12px; }
.v-cruscotto-conti li { display: grid; justify-items: start; gap: 2px; }
.v-cruscotto-conti b { font: 600 var(--t-20)/1.2 var(--car-testo); letter-spacing: -0.025em; color: var(--testo); }
.v-cruscotto-conti .stato { gap: 5px; font-weight: 400; }
.v-cruscotto-conti .sim { width: 13px; height: 13px; }
.v-cruscotto-lettura-piede { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.v-cruscotto-letto { font-size: var(--t-13); color: var(--testo-3); white-space: nowrap; }
.v-cruscotto-lettura-piede .btn { margin-left: auto; }

/* ---------- 3 · scadenze ---------- */
/* le teste di «Scadenze» e «Scouting gare» sono alte uguali (una ha la legenda, l'altra un'etichetta): il filo sotto cade sulla stessa riga */
.v-cruscotto .v-cruscotto-scadenze > .riquadro-testa, .v-cruscotto .v-cruscotto-scouting > .riquadro-testa { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
.v-cruscotto .v-cruscotto-scadenze > .riquadro-testa { padding-left: 20px; padding-right: 20px; }
.v-cruscotto-scadenze > .riquadro-testa .legenda { gap: 2px 16px; }

/* la linea del tempo in scala: un giorno vale sempre lo stesso spazio.
   Tre piani: sopra le etichette (date, «oggi», il nome della fascia), in mezzo l'asse con i segni, sotto i mesi */
/* se la colonna accanto è più alta, lo spazio in più va attorno alla linea del tempo, non sotto la tabella */
.v-cruscotto-striscia-posto { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.v-cruscotto-striscia { position: relative; height: 60px; margin: 20px 20px 15px; font-size: var(--t-13); line-height: 18px; }
.v-cruscotto-striscia > * { position: absolute; }
.v-cruscotto-asse { left: 0; right: 0; top: 30px; height: 1px; background: var(--bordo-forte); }
.v-cruscotto-tacca-mese { top: 31px; width: 1px; height: 5px; background: var(--bordo-forte); }
.v-cruscotto-mese { top: 42px; text-align: center; color: var(--testo-3); white-space: nowrap; }

/* la fascia: quanto resta valida l'offerta, dal termine alla fine della validità minima.
   Sotto la tinta c'è il fondo del riquadro: nel tema scuro le tinte sono trasparenti e l'asse si vedrebbe attraverso */
.v-cruscotto-fascia {
  top: 26px; height: 9px; border-radius: 4.5px;
  background: linear-gradient(var(--blu-tinta-2), var(--blu-tinta-2)), var(--riquadro);
  box-shadow: inset 0 0 0 1px var(--blu-bordo);
}
/* i primi del mese dentro la fascia: fili che la dividono in mesi, come un righello (fuori dalla fascia sono le tacche sotto l'asse) */
.v-cruscotto-tacca-dentro { position: absolute; top: 1px; bottom: 1px; width: 1px; background: var(--blu-bordo); pointer-events: none; }
.v-cruscotto-fascia::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--blu-bordo); opacity: 0; transition: opacity var(--t-rapido); }
.v-cruscotto-fascia.sopra::after, .v-cruscotto-fascia.v-cruscotto-fuoco::after { opacity: 1; }
/* il puntatore la prende anche un po' sopra e un po' sotto */
button.v-cruscotto-fascia::before { content: ''; position: absolute; inset: -6px 0; }
.v-cruscotto-fascia-nome { top: 0; transform: translateX(-50%); color: var(--testo-3); white-space: nowrap; }

/* le date: tondo pieno se scritte nel disciplinare, rombo vuoto se calcolate. Un filo chiaro le stacca dalla linea.
   Sopra ogni segno la sua data: sempre scritta per il termine delle offerte e per le date che hanno posto attorno,
   al passaggio e al fuoco per le altre */
.v-cruscotto-tappa { top: 19px; width: 14px; height: 23px; margin-left: -7px; display: grid; place-items: center; border-radius: var(--r-1); }
.v-cruscotto-tappa .segno { outline: 2px solid var(--riquadro); transition: scale var(--t-rapido) var(--curva), background-color var(--t-rapido), box-shadow var(--t-rapido); }
.v-cruscotto-tappa-principale .segno { width: 11px; height: 11px; background: var(--testo); }
.v-cruscotto-tappa-data {
  position: absolute; left: 50%; bottom: 100%; translate: -50% 0;
  font-weight: 500; color: var(--testo-2); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--t-rapido);
}
.v-cruscotto-tappa-fissa .v-cruscotto-tappa-data { opacity: 1; }
.v-cruscotto-tappa-principale .v-cruscotto-tappa-data { font-weight: 600; color: var(--testo); }
.v-cruscotto-tappa.sopra, .v-cruscotto-tappa.v-cruscotto-fuoco { z-index: 2; }
.v-cruscotto-tappa.sopra .segno, .v-cruscotto-tappa.v-cruscotto-fuoco .segno { scale: 1.3; }
.v-cruscotto-tappa.sopra .v-cruscotto-tappa-data, .v-cruscotto-tappa.v-cruscotto-fuoco .v-cruscotto-tappa-data { opacity: 1; color: var(--testo); }
button.v-cruscotto-tappa:active .segno { scale: 1.1; }
/* si passa su una data (qui o nella tabella): le altre si fanno da parte, e lasciano il posto alla sua etichetta.
   Prendono il colore dell'asse (non la trasparenza: sotto si vedrebbero l'asse e la fascia) */
.v-cruscotto-striscia:has(.v-cruscotto-tappa.sopra) .v-cruscotto-tappa:not(.sopra) .segno:not(.vuoto),
.v-cruscotto-striscia:has(.v-cruscotto-tappa.v-cruscotto-fuoco) .v-cruscotto-tappa:not(.v-cruscotto-fuoco) .segno:not(.vuoto) { background: var(--bordo-forte); }
.v-cruscotto-striscia:has(.v-cruscotto-tappa.sopra) .v-cruscotto-tappa:not(.sopra) .segno.vuoto,
.v-cruscotto-striscia:has(.v-cruscotto-tappa.v-cruscotto-fuoco) .v-cruscotto-tappa:not(.v-cruscotto-fuoco) .segno.vuoto { box-shadow: inset 0 0 0 1.5px var(--bordo-forte); }
.v-cruscotto-striscia:has(.v-cruscotto-tappa.sopra) .v-cruscotto-tappa:not(.sopra) .v-cruscotto-tappa-data,
.v-cruscotto-striscia:has(.v-cruscotto-tappa.v-cruscotto-fuoco) .v-cruscotto-tappa:not(.v-cruscotto-fuoco) .v-cruscotto-tappa-data { opacity: 0; }

/* oggi */
.v-cruscotto-adesso { top: 20px; width: 2px; height: 21px; margin-left: -1px; border-radius: 1px; background: var(--blu); box-shadow: 0 0 0 2px var(--riquadro); pointer-events: none; }
.v-cruscotto-adesso-nome { top: 0; transform: translateX(-50%); display: flex; gap: 5px; color: var(--blu-testo); font-weight: 500; white-space: nowrap; }
.v-cruscotto-adesso-nome b { font-weight: 600; }

/* la fascia si stende quando la vista entra (solo se il guscio anima l'ingresso).
   «backwards»: a movimento finito non resta nessun ritaglio (taglierebbe l'area larga in cui il puntatore prende la fascia) */
.v-cruscotto.entra .v-cruscotto-fascia { animation: v-cruscotto-stende var(--t-lento) var(--curva) 90ms backwards; }
@keyframes v-cruscotto-stende { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* le date in tabella: la data, poi la scadenza, poi i giorni che mancano (solo per le date che devono venire), poi la pagina.
   Senza riga d'intestazione: le colonne si leggono da sole, e quello che dice il segno è nella legenda in testa */
.v-cruscotto-date { border-top: 1px solid var(--bordo); }
.v-cruscotto-date td { padding-top: 9px; padding-bottom: 9px; line-height: 18px; vertical-align: top; }
.v-cruscotto-date td:first-child { padding-left: 20px; }
.v-cruscotto-date td:last-child { padding-right: 16px; }
.v-cruscotto-date .v-cruscotto-quando { width: 178px; white-space: nowrap; }
.v-cruscotto-quando-dentro { display: inline-flex; align-items: center; gap: 10px; height: 18px; }
/* tondo e rombo occupano lo stesso posto: le date partono tutte dalla stessa verticale */
.v-cruscotto-quando-dentro .segno { margin: 0 0.5px; }
.v-cruscotto-quando-dentro .segno.rombo { margin: 0 1px; }
.v-cruscotto-giorno { font-weight: 500; color: var(--testo); }
.v-cruscotto-ore { margin-left: -3px; color: var(--testo-3); }
.v-cruscotto-voce { display: block; }
.v-cruscotto-cosa { display: block; font-weight: 500; color: var(--testo); }
.v-cruscotto-origine { display: block; color: var(--testo-2); }
/* «fra 12 giorni»: un numero in grigio accanto alla data che deve venire. Niente colori d'allarme */
.v-cruscotto-date .v-cruscotto-fra { width: 1%; padding-left: 8px; padding-right: 8px; text-align: right; white-space: nowrap; color: var(--testo-2); font-size: var(--t-13); }
.v-cruscotto-principale .v-cruscotto-fra { color: var(--testo); font-weight: 500; }
.v-cruscotto-principale .v-cruscotto-giorno, .v-cruscotto-principale .v-cruscotto-cosa { font-weight: 600; }
.v-cruscotto-date tr.sopra { background: var(--riquadro-2); }
.v-cruscotto-date tr[data-fonte]:active { background: var(--blu-tinta); }
.v-cruscotto-manca .stato { height: 18px; font-weight: 400; }
.v-cruscotto-manca .sim { width: 13px; height: 13px; margin: 0 2px 0 -2px; }
.v-cruscotto-manca .v-cruscotto-cosa { font-weight: 400; }
/* le righe che non portano da nessuna parte non si accendono */
.v-cruscotto-date .v-cruscotto-manca:hover, .v-cruscotto-date .v-cruscotto-riga-oggi:hover { background: none; }

/* la riga «oggi» divide le date passate da quelle che devono venire */
.v-cruscotto-date .v-cruscotto-riga-oggi td { height: 24px; padding-top: 0; padding-bottom: 0; padding-right: 20px; vertical-align: middle; }
.v-cruscotto-riga-oggi-dentro { display: flex; align-items: center; gap: 10px; color: var(--blu-testo); white-space: nowrap; }
.v-cruscotto-riga-oggi-dentro b { font-weight: 600; }
.v-cruscotto-riga-oggi-dentro::before { content: ''; width: 9px; height: 2px; flex: none; border-radius: 1px; background: var(--blu); }
.v-cruscotto-riga-oggi-dentro::after { content: ''; flex: 1; height: 0; border-top: 1px dashed var(--blu-bordo); }

/* ---------- 4 · scouting: gare d'esempio. Il contorno tratteggiato dice che non sono gare dello studio ---------- */
.v-cruscotto-scouting { border-style: dashed; border-color: var(--bordo-forte); box-shadow: none; }
.v-cruscotto-scouting > .riquadro-testa { gap: 10px; }
.v-cruscotto-esempi li + li { border-top: 1px solid var(--bordo); }
/* ogni riga è un collegamento intero: a sinistra la gara e l'ente, a destra l'importo e il termine */
.v-cruscotto-esempio {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
  padding: 9px 14px; font-size: var(--t-13); line-height: 18px; text-decoration: none;
  transition: background-color var(--t-rapido);
}
.v-cruscotto-esempio:hover { background: var(--riquadro-2); }
.v-cruscotto-esempio:active { background: var(--blu-tinta); }
.v-cruscotto-esempio:focus-visible { outline-offset: -2px; border-radius: var(--r-2); }
.v-cruscotto-esempio-chi { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v-cruscotto-esempio-nome { min-width: 0; font-weight: 500; color: var(--testo); transition: color var(--t-rapido); }
.v-cruscotto-esempio:hover .v-cruscotto-esempio-nome { color: var(--blu-testo); }
.v-cruscotto-deciso { height: 18px; }
.v-cruscotto-importo { text-align: right; font-weight: 500; color: var(--testo); white-space: nowrap; }
.v-cruscotto-sotto-riga { min-width: 0; color: var(--testo-3); }
.v-cruscotto-termine { text-align: right; white-space: nowrap; }
.v-cruscotto-scouting .stato-vuoto { flex: 1; }

/* ---------- 5 · i controlli di Optimvs, in piccolo: riempie quello che resta della colonna ---------- */
.v-cruscotto-attivita { flex: 1; padding: 10px 14px 10px; }
.v-cruscotto-attivita > .riquadro-testa { margin-bottom: 4px; }
.v-cruscotto-att { width: 100%; border-collapse: collapse; font-size: var(--t-13); line-height: 18px; }
.v-cruscotto-att td { padding: 4px 0; vertical-align: top; }
.v-cruscotto-att .v-cruscotto-att-quando { width: 1%; padding-right: 12px; white-space: nowrap; color: var(--testo-2); }
.v-cruscotto-att-ora { display: block; color: var(--testo-3); }
.v-cruscotto-att-cosa { color: var(--testo); text-wrap: pretty; }
.v-cruscotto-att-riga { display: flex; align-items: flex-start; gap: 7px; }
.v-cruscotto-att-riga .ico { width: 14px; height: 14px; margin-top: 2px; color: var(--testo-3); }
/* la scelta sta sulla sua riga, sotto il punto e accanto all'ora: se il titolo va a capo non resta appesa in fondo */
.v-cruscotto-att-scelta { display: block; color: var(--blu-testo); font-weight: 500; }
.v-cruscotto-att-gruppo { margin: 9px 0 3px; padding-top: 10px; border-top: 1px solid var(--bordo-forte); }
/* finché il team non ha deciso niente */
.v-cruscotto-att-vuoto { padding: 4px 0; font-size: var(--t-13); line-height: 18px; color: var(--testo-3); }

/* qui il documento non c'è: fuori dalla gara il guscio non segna nessun dato come «aperto»: non serve nessuna regola per spegnerlo */

/* ---------- finestra bassa (1280 × 800): le stesse cose con meno aria, così il cruscotto sta in una schermata ---------- */
@media (max-height: 859px) {
  .v-cruscotto-gara-sx { gap: 14px; padding-top: 18px; padding-bottom: 20px; }
  .v-cruscotto-lettura { gap: 12px; padding-top: 23px; padding-bottom: 13px; }
  .v-cruscotto-striscia { margin-top: 12px; margin-bottom: 9px; }
  .v-cruscotto-date td { padding-top: 7px; padding-bottom: 7px; }
  .v-cruscotto-date .v-cruscotto-riga-oggi td { height: 22px; }
  .v-cruscotto-esempio { padding-top: 7px; padding-bottom: 7px; }
  .v-cruscotto-att td, .v-cruscotto-att-vuoto { padding-top: 3px; padding-bottom: 3px; }
}

/* ---------- centro più stretto o più largo ---------- */
@container centro (min-width: 1000px) {
  /* #scadenze a tutta larghezza: la regola (o dove cercare) sta accanto al nome, su una riga sola */
  .v-cruscotto[data-sezione="scadenze"] .v-cruscotto-voce { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 24px; }
}
@container centro (max-width: 1119px) {
  /* finestra da 1280 */
  .v-cruscotto-cifre { column-gap: 36px; }
  .v-cruscotto-date .v-cruscotto-quando { width: 164px; }
}
@container centro (max-width: 999px) {
  /* una colonna sola: la lettura passa sotto la gara; scouting e controlli, affiancati, sotto le scadenze */
  .vista.v-cruscotto { --v-cruscotto-colonne: minmax(0, 1fr); grid-template-areas: "demo" "gara" "ora" "scad" "lato" "altre"; }
  .vista.v-cruscotto[data-sezione="scadenze"] { grid-template-areas: "demo" "scad" "gara" "ora" "lato" "altre"; }
  .vista.v-cruscotto:has(> .v-cruscotto-lato:empty) { grid-template-areas: "demo" "gara" "ora" "scad" "altre"; }
  .v-cruscotto-gara-sx { padding-right: 20px; }
  .v-cruscotto-lettura { padding: 18px 20px 16px; border-left: 0; border-top: 1px solid var(--bordo); }
  .v-cruscotto-lato, .v-cruscotto[data-sezione="scadenze"] .v-cruscotto-lato { display: flex; flex-direction: row; align-items: stretch; }
  .v-cruscotto-lato > * { flex: 1 1 0; }
  .v-cruscotto .v-cruscotto-scouting > .riquadro-testa, .v-cruscotto-esempio { padding-left: 20px; }
}
@container centro (max-width: 719px) {
  .v-cruscotto-lato, .v-cruscotto[data-sezione="scadenze"] .v-cruscotto-lato { flex-direction: column; }
  .v-cruscotto-fascia-nome { display: none; }
}

/* il segno del salto sull'asse spezzato: copre linea e fascia con il fondo del riquadro e ci disegna due tratti obliqui */
.v-cruscotto-salto {
  top: 21px; height: 19px; z-index: 2; pointer-events: auto;
  background:
    linear-gradient(105deg, transparent calc(50% - 4.5px), var(--testo-3) calc(50% - 4.5px), var(--testo-3) calc(50% - 3px), transparent calc(50% - 3px),
      transparent calc(50% + 3px), var(--testo-3) calc(50% + 3px), var(--testo-3) calc(50% + 4.5px), transparent calc(50% + 4.5px)),
    var(--riquadro);
}