/* Dashboard, 30.09.2026: pezzi propri della demo (fogli di calcolo in sagoma, la pagina dei numeri, il grafico con il titolo-conclusione).
   Solo token; si anima solo opacity e transform. Direzione «F · Pulita» (DESIGN.md): fogli di carta senza cornice sul
   tavolo del palco (raggio 4), righe separate da filetti tenui, filtri a raggio 8 in inchiostro quando accesi.
   Arancio solo per il dato che conta: la barra del mese e la zona scelta nel grafico; il resto in grigio. */

/* ---------- il foglio di calcolo in sagoma: griglia, intestazione, celle con righe grigie. Niente da leggere ---------- */
.d-dashboard-tabella {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1px;
  overflow: hidden; border-radius: var(--r-carta); background: var(--linea-tenue);
}
.d-dashboard-tabella i { display: block; height: 30px; background: var(--carta); position: relative; }
.d-dashboard-tabella i::after { content: ""; position: absolute; left: 8px; right: 30%; top: 50%; height: 6px; translate: 0 -50%; border-radius: var(--r-cella); background: var(--linea-tenue); }
.d-dashboard-tabella i:nth-child(4n+2)::after, .d-dashboard-tabella i:nth-child(4n+3)::after, .d-dashboard-tabella i:nth-child(4n)::after { left: 30%; right: 8px; }
.d-dashboard-tabella i:nth-child(3n)::after { left: 45%; }
.d-dashboard-tabella i:nth-child(-n+4) { background: var(--superficie-2); }
.d-dashboard-tabella i:nth-child(-n+4)::after { background: var(--grafico-contesto); height: 5px; left: 8px; right: 40%; }

.d-dashboard-tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); align-items: start; max-width: 1000px; }

/* Oggi: i tre fogli in piccolo, uno sopra l'altro */
.d-dashboard-pila { display: grid; gap: var(--s-3); }
.d-dashboard-mini { display: grid; grid-template-columns: 9.5em 1fr; align-items: center; gap: var(--s-3); font-size: var(--t-piccolo); font-weight: 650; }
.d-dashboard-tabella--mini { border-radius: var(--r-cella); }
.d-dashboard-tabella--mini i { height: 14px; }
.d-dashboard-tabella--mini i::after { height: 4px; }
.d-dashboard-tabella--mini i:nth-child(n+13) { display: none; }

/* il posto del grafico nel report a mano: vuoto, tratteggiato */
.d-dashboard-vuoto { display: flex; align-items: flex-end; gap: 6px; height: 54px; padding: 6px 8px 0; border: 1px dashed var(--tratto); border-radius: var(--r-cella); background: var(--superficie-2); }
.d-dashboard-vuoto i { flex: 1; border-radius: var(--r-cella) var(--r-cella) 0 0; background: var(--grafico-contesto); opacity: .45; }
.d-dashboard-vuoto i:nth-child(1) { height: 30%; } .d-dashboard-vuoto i:nth-child(2) { height: 55%; } .d-dashboard-vuoto i:nth-child(3) { height: 40%; }
.d-dashboard-vuoto i:nth-child(4) { height: 70%; } .d-dashboard-vuoto i:nth-child(5) { height: 20%; } .d-dashboard-vuoto i:nth-child(6) { height: 45%; }

/* ---------- Con me: la pagina con i numeri che contano ---------- */
.d-dashboard-pagina {
  position: relative; display: grid; gap: var(--s-3); width: 100%;
  padding: var(--s-4); border-radius: var(--r-carta); background: var(--carta);
}
.d-dashboard-pagina__testa { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-bottom: var(--s-2); box-shadow: inset 0 -1px 0 var(--tratto-chiaro); font-size: var(--t-piccolo); font-weight: 650; }
.d-dashboard-pagina__testa span:last-child { font-weight: 500; color: var(--grigio); }
/* i numeri: righe di un pannello, separate da un filetto tenue (niente fondo crema né segno laterale) */
.d-dashboard-numeri { display: grid; gap: 0; margin: 0; }
.d-dashboard-numero { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: 8px 0; box-shadow: inset 0 -1px 0 var(--linea-tenue); }
.d-dashboard-numero:last-child { box-shadow: none; }
.d-dashboard-numero dt { font-size: var(--t-piccolo); font-weight: 600; color: var(--grafite); line-height: 1.2; }
.d-dashboard-numero dd { margin: 0; font-size: var(--t-grande); font-weight: 750; font-stretch: var(--semistretto); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.d-dashboard-sagoma { display: grid; gap: var(--s-2); }
.d-dashboard-sagoma .pv-riga { height: 9px; }
.d-dashboard-sagoma .pv-riga::after { background: var(--grafite); }
.d-dashboard-sagoma .d-dashboard-barre { height: 56px; }
/* «Si aggiorna da sola»: il cartellino di storie.css (inchiostro, raggio 8) con il quadratino arancio del marchio;
   sta dentro l'angolo del foglio, così non tocca il filetto dei comandi */
.d-dashboard-aggiornata { position: absolute; left: var(--s-4); bottom: -12px; display: flex; align-items: center; gap: var(--s-2); min-height: 28px; padding: 2px 10px; border-radius: var(--r-piccolo); background: var(--inchiostro); color: var(--su-inchiostro); font-size: var(--t-mini); font-weight: 650; }
.d-dashboard-aggiornata::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-cella); background: var(--accento); }

/* ---------- barre (sagoma nella pagina «Con me») ---------- */
.d-dashboard-barre { display: flex; align-items: flex-end; gap: 5px; height: 100%; }
.d-dashboard-barra { flex: 1; height: var(--h); border-radius: var(--r-cella) var(--r-cella) 0 0; background: var(--grafico-contesto); transform-origin: bottom; }
.d-dashboard-barra--conta { background: var(--accento); }

/* l'avviso: la pagina ti fa notare cosa è cambiato */
/* un foglietto di carta; il quadratino arancio accanto al titolo è il solo segno di colore (niente barra laterale) */
.d-dashboard-avviso { padding: var(--s-3) var(--s-4); border-radius: var(--r-piccolo); background: var(--carta); font-size: var(--t-piccolo); line-height: 1.3; color: var(--grafite); }
.d-dashboard-avviso strong { display: block; color: var(--inchiostro); font-weight: 700; }
.d-dashboard-avviso strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2); vertical-align: 0.1em; border-radius: var(--r-cella); background: var(--accento); }
.d-dashboard-avviso--grande { padding: var(--s-4); font-size: var(--t-medio); }
.d-dashboard-avviso--grande strong { font-size: var(--t-grande); line-height: 1.2; margin-bottom: 4px; }

/* ---------- computer ---------- */
.pa .d-dashboard-tre { margin-top: var(--s-2); }
.pa .d-dashboard-tre .d-dashboard-tabella i { height: 38px; }
.pa .pa-vista--conme { grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.2fr); }
.pa .d-dashboard-pagina { max-width: 480px; justify-self: center; }
.pa .pv-foglio .d-dashboard-vuoto { margin-top: 2px; }

@media (min-width: 701px) and (max-height: 820px) {
  .pa .d-dashboard-tre .d-dashboard-tabella i { height: 24px; }
  .pa .d-dashboard-tabella--mini i { height: 11px; }
  .pa .d-dashboard-pila { gap: var(--s-2); }
  .pa .d-dashboard-vuoto { height: 38px; }
      .pa .d-dashboard-sagoma .d-dashboard-barre { height: 34px; }
  .pa .d-dashboard-numero { padding: 5px var(--s-3); }
  .pa .d-dashboard-numero dd { font-size: var(--t-medio); }
  .pa .d-dashboard-pagina { gap: var(--s-2); padding: var(--s-3) var(--s-4); }
}

/* ---------- telefono: un gruppo per scheda ---------- */
.pb .d-dashboard-tre { display: flex; flex-direction: column; gap: var(--s-3); justify-content: flex-start; }
.pb .d-dashboard-tre .pv-fonte { width: 100%; }
.pb .d-dashboard-tre .d-dashboard-tabella { width: 100%; }
.pb .d-dashboard-tabella { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.pb .d-dashboard-tabella i { height: 20px; }
.pb .d-dashboard-tabella i:nth-child(n+13) { display: none; }
.pb .d-dashboard-brevi-mano .pv-breve { justify-content: center; text-align: center; }

@media (max-width: 700px) {
  .solo-telefono .pb .d-dashboard-tre { gap: var(--s-2); }
  .solo-telefono .pb .d-dashboard-tabella i { height: 13px; }
  .solo-telefono .pb .d-dashboard-tabella i::after { height: 4px; }
  .solo-telefono   .solo-telefono .pb .d-dashboard-avviso--grande { padding: var(--s-3); }
}
@media (max-width: 700px) and (max-height: 760px), (max-width: 380px) {
  /* telefoni bassi o stretti: le tre spunte della scheda «Con me» le toglie già il CSS comune; qui si stringono fogli e grafico */
  .solo-telefono .pb .d-dashboard-tabella i { height: 12px; }
  .solo-telefono .pb .d-dashboard-tabella i::after { height: 4px; }
  .solo-telefono   .solo-telefono   .solo-telefono   .solo-telefono .pb .d-dashboard-avviso--grande strong { font-size: var(--t-medio); }
  .solo-telefono .pb .d-dashboard-numero { padding: 6px var(--s-3); }
}

/* telefoni stretti e non alti (360 × 740): il titolo va su quattro righe; il suggerimento lascia il posto perché il ▶ resti nel primo schermo */
@media (max-width: 380px) and (max-height: 760px) {
  .solo-telefono .pv-suggerimento { display: none; }
}

/* ---------- Il risultato: la dashboard interattiva. Filtri in alto, le cifre scelte, un grafico con la conclusione nel titolo.
   Un puntatore (sul telefono un tocco) sceglie «Malcantone»: il tasto si accende e cifre, barre e titolo cambiano.
   Il cambio lo guida il segno .d-dashboard-clic (data-t): prima/dopo sono due livelli sovrapposti, si anima solo l'opacità.
   Con movimento ridotto o senza JS si vede lo stato dopo il clic. ---------- */
.d-dashboard-risultato { max-width: 1040px; }
.d-dashboard-cruscotto { position: relative; display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-carta); background: var(--carta); }
.d-dashboard-cruscotto__testa { display: flex; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-2); box-shadow: inset 0 -1px 0 var(--tratto-chiaro); font-size: var(--t-piccolo); font-weight: 650; }
.d-dashboard-cruscotto__testa span:last-child { font-weight: 500; color: var(--grigio); font-variant-numeric: tabular-nums; }

.d-dashboard-filtri { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.d-dashboard-gruppo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.d-dashboard-gruppo__nome { margin-right: 4px; font-size: var(--t-mini); font-weight: 600; color: var(--grafite); }
/* i filtri: controlli piccoli a raggio 8, carta con il filetto dei controlli; acceso = inchiostro (mai arancio) */
.d-dashboard-tasto { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border: 1px solid var(--tratto); border-radius: var(--r-piccolo); background: var(--carta); font-size: var(--t-mini); font-weight: 600; white-space: nowrap; }
.d-dashboard-tasto--acceso { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--su-inchiostro); }
/* «Tutte» acceso prima del clic, «Malcantone» dopo */
.d-dashboard-tasto--tutte { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--su-inchiostro); transition: background var(--d-media), color var(--d-media), border-color var(--d-media); }
.d-dashboard-cruscotto:has(.d-dashboard-clic.on) .d-dashboard-tasto--tutte { background: var(--carta); border-color: var(--tratto); color: var(--inchiostro); }
.d-dashboard-tasto--scelto { transition: background var(--d-media), color var(--d-media), border-color var(--d-media); }
.d-dashboard-cruscotto:has(.d-dashboard-clic.on) .d-dashboard-tasto--scelto { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--su-inchiostro); }

/* il puntatore arriva sul tasto; il clic è un'onda che si allarga */
.d-dashboard-cursore { position: absolute; left: 55%; top: 55%; width: 26px; height: 26px; z-index: 2; pointer-events: none; }
.d-dashboard-cursore svg { width: 100%; height: 100%; fill: var(--inchiostro); stroke: var(--superficie); stroke-width: 1.5; }
.pv-scena .d-dashboard-cursore[data-t] { transform: translate(160px, 120px); transition: opacity var(--d-media) var(--curva), transform 1.4s var(--curva); }
.pv-scena .d-dashboard-cursore[data-t].on { transform: none; }
.d-dashboard-clic { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1.5px solid var(--grafite); pointer-events: none; }
.pv-scena .d-dashboard-clic[data-t] { opacity: 0; transform: scale(.3); transition: none; }
.pv-scena .d-dashboard-clic[data-t].on { opacity: 0; transform: scale(1.8); transition: opacity .8s var(--curva), transform .8s var(--curva); animation: d-dashboard-onda .8s var(--curva); }
@keyframes d-dashboard-onda { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.8); } }
/* sul telefono: il segno del dito */
.d-dashboard-tocco { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--inchiostro); opacity: .28; pointer-events: none; }
.pv-scena .d-dashboard-tocco[data-t] { transform: translate(40px, 90px) scale(.8); transition: opacity var(--d-media) var(--curva), transform 1s var(--curva); }
.pv-scena .d-dashboard-tocco[data-t].on { opacity: .28; transform: none; }

/* prima e dopo, sovrapposti */
.d-dashboard-cambio { display: inline-grid; }
.d-dashboard-cambio > span { grid-area: 1 / 1; transition: opacity var(--d-lenta) var(--curva), transform var(--d-lenta) var(--curva); }
.d-dashboard-dopo { opacity: 0; transform: translateY(6px); }
.d-dashboard-cruscotto:has(.d-dashboard-clic.on) .d-dashboard-prima { opacity: 0; transform: translateY(-6px); }
.d-dashboard-cruscotto:has(.d-dashboard-clic.on) .d-dashboard-dopo { opacity: 1; transform: none; }

.d-dashboard-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--s-5); align-items: start; }
.d-dashboard-cruscotto .d-dashboard-numero dd { font-size: var(--t-grande); }
.d-dashboard-zone { margin: 0; display: grid; gap: var(--s-3); }
.d-dashboard-zone__titolo { font-size: clamp(1.25rem, .95rem + .9vw, 1.75rem); font-weight: 750; font-stretch: var(--semistretto); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.d-dashboard-zone__righe { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.d-dashboard-zona { display: grid; grid-template-columns: 11em 1fr 3.4em; align-items: center; gap: var(--s-2); font-size: var(--t-mini); }
.d-dashboard-zona__nome { color: var(--grafite); }
.d-dashboard-zona__pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.d-dashboard-zona__binario { height: 14px; overflow: hidden; border-radius: var(--r-cella); background: var(--grafico-traccia); }
.d-dashboard-zona__binario i { position: relative; display: block; height: 100%; width: 100%; background: var(--grafico-contesto); transform: scaleX(var(--q)); transform-origin: left; }
.d-dashboard-zona__binario i::after { content: ""; position: absolute; inset: 0; background: var(--accento); opacity: 0; transition: opacity var(--d-lenta) var(--curva); }
.d-dashboard-zona--prima .d-dashboard-zona__binario i::after { opacity: 1; }
.d-dashboard-cruscotto:has(.d-dashboard-clic.on) .d-dashboard-zona--prima .d-dashboard-zona__binario i::after { opacity: 0; }
.d-dashboard-cruscotto:has(.d-dashboard-clic.on) .d-dashboard-zona--dopo .d-dashboard-zona__binario i::after { opacity: 1; }
.d-dashboard-zona--prima .d-dashboard-zona__nome, .d-dashboard-zona--prima .d-dashboard-zona__pct { color: var(--inchiostro); font-weight: 750; }
.d-dashboard-cruscotto:has(.d-dashboard-clic.on) .d-dashboard-zona--prima .d-dashboard-zona__nome { color: var(--grafite); font-weight: 400; }
.d-dashboard-cruscotto:has(.d-dashboard-clic.on) .d-dashboard-zona--dopo .d-dashboard-zona__nome { color: var(--inchiostro); font-weight: 750; }

/* l'avviso compare come una notifica sulla pagina */
/* la notifica è un foglietto sopra la pagina: la sola ombra ammessa, quella dei fogli sovrapposti */
.d-dashboard-avviso--notifica { position: absolute; right: -12px; top: -18px; z-index: 3; max-width: 26em; box-shadow: var(--ombra-carta); }

@media (min-width: 701px) and (max-height: 820px) {
  .pa .d-dashboard-cruscotto { gap: var(--s-2); padding: var(--s-3) var(--s-4); }
  .pa .d-dashboard-cruscotto .d-dashboard-numero dd { font-size: var(--t-medio); }
  .pa .d-dashboard-cruscotto .d-dashboard-numeri { gap: 4px; }
  .pa .d-dashboard-zone { gap: var(--s-2); }
  .pa .d-dashboard-zone__titolo { font-size: clamp(1.125rem, .85rem + .8vw, 1.5rem); }
  .pa .d-dashboard-zone__righe { gap: 5px; }
  .pa .d-dashboard-zona__binario { height: 11px; }
  .pa .d-dashboard-tasto { padding: 3px 10px; }
}

/* telefono: filtri a capo, due cifre affiancate, poi il grafico */
.pb .d-dashboard-cruscotto { padding: var(--s-3); gap: var(--s-2); }
.pb .d-dashboard-cruscotto__testa { font-size: var(--t-mini); padding-bottom: 6px; }
.pb .d-dashboard-filtri { gap: 6px; }
.pb .d-dashboard-gruppo { gap: 4px; }
.pb .d-dashboard-tasto { padding: 3px 8px; }
.pb .d-dashboard-corpo { grid-template-columns: 1fr; gap: var(--s-2); }
.pb .d-dashboard-cruscotto .d-dashboard-numeri { grid-template-columns: 1fr 1fr; gap: 6px; }
.pb .d-dashboard-cruscotto .d-dashboard-numero { flex-direction: column; align-items: flex-start; gap: 0; padding: 5px var(--s-2); border-radius: var(--r-piccolo); background: var(--superficie-2); box-shadow: none; }
.pb .d-dashboard-cruscotto .d-dashboard-numero dt { font-size: var(--t-mini); }
.pb .d-dashboard-cruscotto .d-dashboard-numero dd { font-size: var(--t-medio); }
.pb .d-dashboard-zone { gap: var(--s-2); }
.pb .d-dashboard-zone__titolo { font-size: clamp(1.125rem, 5vw, 1.375rem); }
.pb .d-dashboard-zone__righe { gap: 4px; }
.pb .d-dashboard-zona { grid-template-columns: 8.6em 1fr 3em; font-size: var(--t-micro); }
.pb .d-dashboard-zona__binario { height: 10px; }
@media (max-width: 700px) and (max-height: 760px), (max-width: 380px) {
  .solo-telefono .pb .d-dashboard-cruscotto__testa { display: none; }
  .solo-telefono .pb .d-dashboard-zone__titolo { font-size: 1.0625rem; }
  .solo-telefono .pb .d-dashboard-zona { grid-template-columns: 7.8em 1fr 2.8em; }
}
/* telefono: una sola fila di filtri (la zona), niente testata; su un telefono basta vedere il tasto che si accende */
.pb .d-dashboard-cruscotto__testa { display: none; }
.pb .d-dashboard-gruppo:first-child { display: none; }
.pb .d-dashboard-gruppo .d-dashboard-tasto:nth-last-child(-n+2) { display: none; }
.pb .d-dashboard-gruppo { flex-wrap: nowrap; }
@media (max-width: 700px) and (max-height: 760px), (max-width: 380px) {
  .solo-telefono .pb .d-dashboard-cruscotto .d-dashboard-numero { padding: 3px var(--s-2); }
  .solo-telefono .pb .d-dashboard-zone__righe { gap: 3px; }
  .solo-telefono .pb .d-dashboard-zona__binario { height: 8px; }
}
.pb .d-dashboard-lungo { display: none; }
.pb .d-dashboard-zona { grid-template-columns: 8.6em 1fr 3.3em; }
@media (max-width: 380px) {
  .solo-telefono .pb .d-dashboard-gruppo__nome { display: none; }
}
@media (max-width: 700px) and (max-height: 760px), (max-width: 380px) {
  .solo-telefono .pb .d-dashboard-zona { grid-template-columns: 7.8em 1fr 3.2em; }
  .solo-telefono .pb .d-dashboard-cruscotto { gap: 6px; padding: var(--s-2) var(--s-3); }
  .solo-telefono .pb .d-dashboard-zone { gap: 6px; }
}
/* il cambio: il vecchio sparisce svelto, il nuovo entra subito dopo (niente testi accavallati) */
.d-dashboard-cursore { display: block; }
.d-dashboard-cambio > .d-dashboard-prima { transition-duration: var(--d-veloce); }
.d-dashboard-cruscotto:has(.d-dashboard-clic.on) .d-dashboard-dopo { transition-delay: var(--d-veloce); }
.pb .d-dashboard-zona { grid-template-columns: 9.6em 1fr 3.3em; }
.pb .d-dashboard-zone__righe .d-dashboard-zona, .solo-telefono .pb .d-dashboard-zone__righe .d-dashboard-zona { grid-template-columns: max-content 1fr 3.3em; }
.pb .d-dashboard-zone__righe { grid-template-columns: max-content 1fr 3.3em; }
.pb .d-dashboard-zone__righe .d-dashboard-zona { display: contents; }
.pb .d-dashboard-zona__nome { white-space: nowrap; }
.pb .d-dashboard-zone__righe { column-gap: var(--s-2); align-items: center; }