/* Optimvs v4 · vista «Registro»
   Solo quello che è proprio di questa vista: tutte le classi cominciano per .v-registro-
   Riquadro, cifre, coppie, legenda, barra a segmenti, avanzamento, stato vuoto, pulsanti e dato con fonte
   vengono da assets/optimvs.css e qui non si riscrivono. */

/* un riquadro, due schede: Optimvs e il team. Le linguette e il filo sotto sono le .schede del guscio */
.v-registro-schede { padding: 2px 6px 0; }
.v-registro-pannelli { min-width: 0; }
.v-registro-pannello { display: flex; flex-direction: column; min-width: 0; padding: 12px 14px; }
.v-registro-pannello.v-registro-chiuso { display: none; }
/* il titolo del pannello serve solo quando le linguette non ci sono: centro largo e carta */
.v-registro-pannello-t { display: none; margin-bottom: 10px; }
@container centro (min-width: 1100px) {
  /* centro largo (documento nascosto, finestra da 1440): le due schede diventano due colonne */
  .v-registro-schede { display: none; }
  .v-registro-pannelli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-registro-pannello, .v-registro-pannello.v-registro-chiuso { display: flex; padding: 14px 16px; }
  .v-registro-pannello + .v-registro-pannello { border-left: 1px solid var(--bordo); }
  .v-registro-pannello-t { display: block; }
}

/* pezzi che si vedono solo sulla carta, o solo sullo schermo */
.v-registro-stampa { display: none; }

/* un pezzo aperto da chi guarda entra con un soffio, senza muovere quello che ha intorno.
   «backwards»: finita l'animazione il pezzo torna al suo stato naturale, senza trasformazioni addosso */
.v-registro-apre { animation: v-registro-apre var(--t-rapido) var(--curva) backwards; }
@keyframes v-registro-apre { from { opacity: 0; transform: translateY(-3px); } }
/* cambio di scheda: il pannello compare in dissolvenza e basta */
.v-registro-cambia { animation: v-registro-cambia var(--t-rapido) var(--curva) backwards; }
@keyframes v-registro-cambia { from { opacity: 0; } }

/* ---------- i passi di Optimvs, per giorno ---------- */
.v-registro-giorni { display: grid; gap: 10px; }
.v-registro-giorno { margin-bottom: 2px; font: 500 var(--t-13)/18px var(--car-testo); color: var(--testo-3); }
.v-registro-passi { display: grid; margin: 0 -8px; }
/* il filo che lega i passi dello stesso giorno: parte dal primo segno e si ferma all'ultimo */
.v-registro-passo { position: relative; }
.v-registro-passo::before { content: ''; position: absolute; z-index: 1; left: 12px; top: 0; bottom: 0; width: 1px; background: var(--bordo-forte); pointer-events: none; }
.v-registro-passo:first-child::before { top: 16px; }
.v-registro-passo:last-child::before { bottom: auto; height: 16px; }
.v-registro-passo:first-child:last-child::before { display: none; }

.v-registro-passo-riga {
  position: relative;
  display: grid; grid-template-columns: 9px minmax(0, 1fr) 16px; column-gap: 10px; align-items: start;
  padding: 6px 8px; border-radius: var(--r-2);
  transition: background-color var(--t-rapido);
}
.v-registro-passo-riga:has(> button.v-registro-passo-testa):hover { background: var(--riquadro-2); }
.v-registro-passo-riga:has(> button.v-registro-passo-testa:active) { background: var(--etichetta); }
.v-registro-pallino { position: relative; z-index: 2; margin-top: 6px; transition: background-color var(--t-rapido), box-shadow var(--t-rapido); }
.v-registro-passo-riga:has(> button.v-registro-passo-testa):hover .v-registro-pallino { background: var(--riquadro-2); }
.v-registro-passo-riga:has(> button.v-registro-passo-testa:active) .v-registro-pallino { background: var(--etichetta); }
/* passo aperto: il segno si riempie */
.v-registro-passo-riga:has(> button[aria-expanded="true"]) .v-registro-pallino,
.v-registro-passo-riga:has(> button[aria-expanded="true"]):hover .v-registro-pallino { background: var(--blu); box-shadow: none; }

/* il titolo del passo e, in colonna a destra, di che passo si tratta */
.v-registro-passo-testa { display: grid; grid-template-columns: minmax(0, 1fr) 140px; column-gap: 12px; min-width: 0; }
.v-registro-passo-titolo { font-weight: 500; line-height: 20px; text-wrap: pretty; }
.v-registro-passo-meta { font-size: var(--t-13); line-height: 20px; color: var(--testo-2); white-space: nowrap; }
/* il dato del passo, come nel Cruscotto: i numeri in colonna (allineati a destra), la parola accanto.
   In fondo alla colonna resta il posto dell'etichetta di pagina */
.v-registro-passo-dato b { display: inline-block; min-width: 28px; margin-right: 2px; text-align: right; font-size: var(--t-14); font-weight: 600; color: var(--testo); font-variant-numeric: tabular-nums; }
@container centro (max-width: 659px) {
  /* centro stretto (finestra da 1280): la colonna del tipo si stringe */
  .v-registro-passo-testa { grid-template-columns: minmax(0, 1fr) 116px; }
}
/* tutta la riga apre la nota: il pulsante si allarga sulla riga, l'etichetta di pagina resta sopra */
button.v-registro-passo-testa::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-2); }
button.v-registro-passo-testa:focus-visible { outline: none; }
button.v-registro-passo-testa:focus-visible::after { outline: 2px solid var(--fuoco); outline-offset: -2px; }
.v-registro-passo-riga > .pg { position: absolute; right: 36px; top: 7px; z-index: 1; }
/* al passaggio sulla riga l'etichetta di pagina si fa vedere, come dentro un dato */
.v-registro-passo-riga:hover > .pg.zitta:not(.attivo) { background: var(--blu-tinta-2); color: var(--blu-testo); }
.v-registro-passo-riga:hover > .pg.zitta::after { opacity: 0; }
/* la freccia a destra: gira quando il pezzo è aperto (passi e gruppi di scelte) */
.v-registro-freccia { flex: none; color: var(--testo-3); transition: transform var(--t-medio) var(--curva), color var(--t-rapido); }
.v-registro-passo-riga > .v-registro-freccia { grid-column: 3; margin-top: 2px; }
.v-registro-passo-riga:hover > .v-registro-freccia { color: var(--testo); }
.v-registro-passo-riga > [aria-expanded="true"] ~ .v-registro-freccia { transform: rotate(180deg); }

/* la nota del passo: una frase per riga, allineata al titolo. La prima è la frase intera del registro */
.v-registro-nota { display: grid; gap: 4px; padding: 1px 34px 10px 27px; font-size: var(--t-13); line-height: 1.5; color: var(--testo-2); text-wrap: pretty; }
.v-registro-nota-prima { font-weight: 500; color: var(--testo); }
/* un numero di pagina dentro una nota: porta il documento a quella pagina */
.v-registro-pagina {
  padding: 0 2px; margin: 0 -2px 0 -1px; font-weight: 500; color: var(--blu-testo); border-radius: var(--r-1);
  text-decoration: underline dotted var(--blu-bordo) 1px; text-underline-offset: 3px;
  transition: background-color var(--t-rapido), text-decoration-color var(--t-rapido);
}
.v-registro-pagina:hover { background: var(--blu-tinta); text-decoration-color: var(--blu); }
.v-registro-pagina:active { background: var(--blu-tinta-2); }
/* l'anello di fuoco sta stretto sul numero: non copre la parentesi e la «e» accanto */
.v-registro-pagina:focus-visible { outline-offset: 0; text-decoration-color: transparent; }

/* la leva che apre un elenco: come «apribile» del guscio, ma è un pulsante (in stampa l'elenco si apre da solo) */
.v-registro-leva {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start; width: max-content; max-width: 100%;
  padding: 3px 6px 3px 2px; margin-left: -2px;
  font-size: var(--t-13); font-weight: 500; color: var(--testo-2); border-radius: var(--r-1);
  transition: color var(--t-rapido), background-color var(--t-rapido);
}
.v-registro-leva::before {
  content: ''; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--freccia) center / 16px 16px no-repeat; mask: var(--freccia) center / 16px 16px no-repeat;
  transform: rotate(-90deg); transition: transform var(--t-medio) var(--curva);
}
.v-registro-leva[aria-expanded="true"]::before { transform: none; }
.v-registro-leva:hover { color: var(--testo); background: var(--velo); }
.v-registro-leva:active { background: var(--etichetta); }

/* ---------- documenti letti e non letti ---------- */
.v-registro-doc { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bordo); }
.v-registro-doc-testa { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.v-registro-doc .segmenti { height: 8px; }
.v-registro-letto { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 1px; align-items: center; margin-top: 2px; }
.v-registro-letto .ico { color: var(--testo-3); }
.v-registro-letto-nome { font-weight: 500; }
.v-registro-letto-meta { font-size: var(--t-13); line-height: 18px; color: var(--testo-2); white-space: nowrap; }
@container centro (max-width: 659px) {
  .v-registro-letto { grid-template-columns: 16px minmax(0, 1fr); }
  .v-registro-letto-meta { grid-column: 2; }
}
.v-registro-mancanti { display: grid; gap: 9px; padding: 4px 0 2px; }
.v-registro-mancanti > li { display: grid; grid-template-columns: 15px minmax(0, 1fr); column-gap: 8px; row-gap: 1px; align-items: start; font-size: var(--t-13); line-height: 1.45; }
.v-registro-mancanti .stato { height: 19px; }
.v-registro-manc-nome { font-weight: 500; color: var(--testo); }
.v-registro-manc-dove { grid-column: 2; color: var(--testo-2); text-wrap: pretty; }
.v-registro-manc-titolo { margin: 10px 0 2px; font: 500 var(--t-13)/18px var(--car-testo); color: var(--testo-3); }
.v-registro-manc-link { margin: 8px 0 0 23px; font-size: var(--t-13); }

/* ---------- le decisioni del team ---------- */
.v-registro-team { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.v-registro-vuoto { flex: 1; padding: 24px 16px 28px; }
/* chi ha registrato le decisioni: una riga discreta sotto il titolo */
.v-registro-chi { margin-bottom: 8px; font-size: var(--t-13); line-height: 18px; color: var(--testo-3); }
.v-registro-chi b { font-weight: 500; color: var(--testo-2); }
/* un gruppo di scelte: «Da chiarire» sempre aperto, gli altri si aprono dalla riga del titolo */
.v-registro-gruppo { display: grid; min-width: 0; }
.v-registro-gruppo + .v-registro-gruppo { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--bordo); }
.v-registro-gruppo-testa { display: flex; align-items: center; gap: 12px; min-height: 28px; min-width: 0; font: 500 var(--t-13)/18px var(--car-testo); color: var(--testo-3); }
.v-registro-gruppo-testa h3 { flex: none; font: inherit; color: inherit; }
.v-registro-gruppo-testa .avanzamento { flex: 1; justify-content: flex-end; font-weight: 400; }
.v-registro-gruppo-testa .avanzamento-barra { flex: 0 1 96px; }
/* la riga del titolo è il pulsante: nome a sinistra, in colonna con «Da chiarire», freccia a destra come nei passi */
.v-registro-gruppo-leva {
  flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
  margin: 0 -8px; padding: 5px 8px;
  font: inherit; color: inherit; text-align: left; border-radius: var(--r-2);
  transition: background-color var(--t-rapido), color var(--t-rapido);
}
.v-registro-gruppo-leva:hover { background: var(--riquadro-2); color: var(--testo); }
.v-registro-gruppo-leva:active { background: var(--etichetta); }
.v-registro-gruppo-leva:focus-visible { outline-offset: -2px; }
.v-registro-gruppo-leva > .v-registro-freccia { margin-left: auto; }
.v-registro-gruppo-leva:hover > .v-registro-freccia { color: var(--testo); }
.v-registro-gruppo-leva[aria-expanded="true"] > .v-registro-freccia { transform: rotate(180deg); }
.v-registro-scelte { display: grid; min-width: 0; }
.v-registro-scelta-posto + .v-registro-scelta-posto { border-top: 1px solid var(--bordo); transition: border-color var(--t-rapido); }
/* il filo fra due righe si ritira accanto alla riga sotto il puntatore, a fuoco o aperta: niente doppia linea */
.v-registro-scelta-posto:has(> button.dato:hover), .v-registro-scelta-posto:has(> button.dato:hover) + .v-registro-scelta-posto,
.v-registro-scelta-posto:has(> button.dato:focus-visible), .v-registro-scelta-posto:has(> button.dato:focus-visible) + .v-registro-scelta-posto,
.v-registro-scelta-posto:has(> .dato.attivo), .v-registro-scelta-posto:has(> .dato.attivo) + .v-registro-scelta-posto { border-top-color: transparent; }
/* la riga esce di 8 px ai lati: il fondo al passaggio respira, i testi restano in colonna con il titolo */
.v-registro-scelta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; align-items: start;
  width: calc(100% + 16px); margin: 0 -8px; padding: 8px 8px;
}
.v-registro-scelta-titolo { font-weight: 500; line-height: 20px; text-wrap: pretty; }
.v-registro-scelta-n { display: inline-block; min-width: 14px; margin-right: 6px; font-weight: 400; color: var(--testo-3); }
.v-registro-scelta-pagine { display: inline-flex; gap: 4px; margin-top: 1px; }
/* una scelta senza frase citata ma con la pagina: l'etichetta si fa vedere al passaggio sulla riga, come le altre */
.dato-senza.v-registro-scelta:hover .pg.zitta { background: var(--blu-tinta-2); color: var(--blu-testo); }
.dato-senza.v-registro-scelta:hover .pg.zitta::after { opacity: 0; }
.v-registro-scelta-sotto { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.v-registro-scelta-sotto .etichetta { flex: 0 1 auto; min-width: 0; transition: background-color var(--t-rapido); }
/* sulla riga aperta il fondo è già della tinta dell'etichetta: l'etichetta sale di un tono e resta un pezzo a sé */
.v-registro-scelta.attivo .etichetta { background: var(--blu-tinta-2); }
.v-registro-scelta-valore { min-width: 0; overflow-wrap: anywhere; color: var(--testo-2); }
.v-registro-scelta-quando { margin-left: auto; font-size: var(--t-13); color: var(--testo-3); white-space: nowrap; }
.v-registro-scelta-nota { flex-basis: 100%; font-size: var(--t-13); line-height: 1.45; color: var(--testo-2); text-wrap: pretty; overflow-wrap: anywhere; }
/* una decisione appena arrivata nel registro */
.v-registro-nuova { animation: v-registro-entra var(--t-medio) var(--curva) backwards; }
@keyframes v-registro-entra { from { opacity: 0; transform: translateY(4px); } }
/* azzerare è un comando di servizio: discreto a riposo, del colore di chi cancella quando ci si passa sopra */
.v-registro-piede { display: flex; margin-top: auto; padding-top: 12px; }
.v-registro-azzera { margin-left: -6px; color: var(--testo-3); }
.v-registro-azzera:hover:not(:disabled), .v-registro-azzera:focus-visible { color: var(--pericolo); background: var(--pericolo-tinta); }

/* ---------- la sintesi per la dichiarazione ---------- */
.v-registro-dich { gap: 12px; padding-bottom: 10px; }
.v-registro-dich > .riquadro-testa { margin-bottom: 0; }
/* le cifre in fila, separate da un filo */
.v-registro-cifre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v-registro-cifre > .cifra { justify-self: stretch; padding-left: 12px; border-left: 1px solid var(--bordo); border-radius: 0; }
.v-registro-cifre > .cifra:first-child { padding-left: 0; border-left: 0; }
.v-registro-fatti { border-top: 1px solid var(--bordo); }
@container centro (min-width: 1100px) {
  /* centro largo: i fatti su due colonne, divise dove si dividono i due pannelli sopra */
  .v-registro-fatti { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .v-registro-fatti > div:nth-child(2) { border-top: 0; }
}
.v-registro-chiude { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: -4px; padding-top: 8px; border-top: 1px solid var(--bordo); }
.v-registro-firma { font-size: var(--t-13); color: var(--testo-2); }
.v-registro-testo {
  margin: 0; padding: 10px 12px;
  font: 400 var(--t-13)/1.55 var(--car-testo); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--testo);
  background: var(--riquadro-2); border: 1px solid var(--bordo); border-radius: var(--r-2);
}
/* «Copiata»: la conferma prende il colore del certo per un momento */
.btn.v-registro-fatto, .btn.btn-secondario.v-registro-fatto:hover:not(:disabled) { color: var(--certo); border-color: var(--certo); }
.v-registro-fatto > * { animation: v-registro-apre var(--t-rapido) var(--curva) backwards; }

/* ---------- sulla carta: un foglio A4 pulito, una colonna, tutto aperto ----------
   I margini del foglio (A4, regola @page) li mette il guscio per tutte le viste: optimvs.css, in fondo */
@media print {
  .v-registro-stampa { display: revert; }
  .v-registro-schermo { display: none; }
  .v-registro .riquadro { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; break-inside: auto; }
  /* sulla carta la sintesi viene per prima, poi i due pannelli uno sotto l'altro, ognuno con il suo titolo */
  .v-registro-dich { order: -1; }
  .v-registro-schede { display: none; }
  .v-registro-pannelli { display: block; }
  .v-registro-pannello, .v-registro-pannello.v-registro-chiuso { display: block; padding: 0; border: 0; }
  .v-registro-libro, .v-registro-pannello + .v-registro-pannello { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--bordo-forte); }
  .v-registro-pannello + .v-registro-pannello { margin-top: 18px; }
  .v-registro-pannello-t { display: block; }
  .v-registro-pannello-t, .v-registro .riquadro-testa h2 { font-size: var(--t-16); }
  /* niente righe che escono dai margini: sulla carta il fondo al passaggio non serve */
  .v-registro-passi { margin: 0; }
  /* la freccia non c'è: il tipo di passo va a filo del margine destro, come data e pagina delle scelte.
     Il titolo è la frase intera del registro: la prima riga della nota non serve */
  .v-registro-passo-riga { grid-template-columns: 9px minmax(0, 1fr); padding-left: 0; padding-right: 0; }
  .v-registro-passo-testa { grid-template-columns: minmax(0, 1fr) auto; }
  .v-registro-passo-meta { text-align: right; }
  .v-registro-nota-prima { display: none; }
  .v-registro-passo::before { left: 4px; }
  .v-registro-nota { padding-left: 19px; padding-right: 0; }
  .v-registro-scelta { width: 100%; margin: 0; padding-left: 0; padding-right: 0; }
  /* sulla carta non c'è una riga aperta: i fili fra le scelte ci sono tutti, e l'etichetta torna com'è */
  .v-registro-scelta-posto + .v-registro-scelta-posto { border-top-color: var(--bordo) !important; }
  .v-registro-scelta.attivo .etichetta { background: var(--blu-tinta); }
  /* i titoli dei gruppi: testo e basta */
  .v-registro-gruppo-leva { margin: 0; padding: 0; }
  .v-registro-gruppo-leva .schede-n { background: none; padding: 0; min-width: 0; }
  /* i documenti: blocchi uno sotto l'altro, così il titolo non resta solo in fondo alla pagina */
  .v-registro-doc { display: block; }
  .v-registro-doc > * + * { margin-top: 8px; }
  .v-registro-doc-testa, .v-registro-doc .segmenti { break-after: avoid; }
  /* le note dei passi, i gruppi e gli elenchi si stampano aperti */
  ul.v-registro-su-carta[hidden] { display: grid !important; }
  div.v-registro-su-carta[hidden] { display: block !important; }
  .v-registro-freccia, .v-registro-passo-riga > .pg, .v-registro-scelta-pagine { display: none; }
  .v-registro-pagina { padding: 0; margin: 0; color: inherit; font-weight: inherit; text-decoration: none; }
  .v-registro-passo, .v-registro-scelta-posto, .v-registro-mancanti > li, .v-registro-letto, .v-registro-cifre, .v-registro-fatti > div { break-inside: avoid; }
  .v-registro-giorno, .v-registro-gruppo-testa, .v-registro-chi, .v-registro-manc-titolo, .v-registro-pannello-t, .v-registro .riquadro-testa { break-after: avoid; }
  /* un titolo non resta solo in fondo alla pagina: chiede il posto anche per la prima riga del suo elenco
     (il margine negativo riprende lo spazio: sullo schermo e a metà pagina non cambia niente) */
  .v-registro-manc-titolo { break-inside: avoid; padding-bottom: 64px; margin-bottom: -62px; }
  .v-registro-mancanti { break-before: avoid; }
  /* registro del team ancora vuoto: sulla carta basta una riga, senza disegno */
  .v-registro-vuoto { display: block; min-height: 0; padding: 0; text-align: left; }
  .v-registro-vuoto .stato-vuoto-icona, .v-registro-vuoto .stato-vuoto-testo { display: none; }
  .v-registro-vuoto .stato-vuoto-titolo { font-weight: 400; color: var(--testo-2); }
  /* «Esportato da Optimvs il…» sta in cima al foglio, sotto il titolo: in fondo poteva restare da sola su una pagina in più */
  .v-registro-carta { order: -2; margin: -4px 0 4px; font-size: var(--t-13); color: var(--testo-2); }
}

/* demo pubblica: i passi della lettura sono scritti a mano. Una riga piana sopra i passi, anche sulla carta */
.v-registro-demo { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; font-size: var(--t-13); line-height: 18px; color: var(--testo-2); }
.v-registro-demo > .ico { width: 14px; height: 14px; margin-top: 2px; flex: none; color: var(--testo-3); }