/* ============================================================
   Energia e Gas — la vista cliente, dai prototipi Energia.dc.html
   e Gas.dc.html
   ============================================================
   Undici blocchi: testata, il periodo, il ponte dei costi, l'anno,
   trimestri, semestri, voci di costo, fasce orarie, per punto,
   confronto fra strutture, segnalazioni.

   Le due materie condividono tutto tranne quattro colori e il soggetto
   animato. Il lime resta sulla card della previsione anche sul gas:
   li' non e' il colore di una commodity, e' l'intelligence Kesva.

   I valori stanno qui e non negli attributi style del prototipo: uno
   style="grid-template-columns" batte qualunque media query e il responsive
   non entra mai in funzione. Inline nel PHP restano solo i valori che
   vengono dai dati — altezze, larghezze, posizioni, colori di stato.
   ============================================================ */

.dmv {
  --dmv-ink: var(--dm-heading, #0f2244);
  --dmv-txt: var(--dm-text, #3c4760);
  --dmv-mut: var(--dm-text-muted, #66708a);
  --dmv-line: var(--dm-border, #e6e9f0);
  --dmv-line2: #eef0f4;
  --dmv-zebra: #fbfbf9;
  --dmv-hover: #f1f4fa;
  --dmv-card: 0 1px 2px rgba(15,34,68,.05), 0 14px 36px -14px rgba(15,34,68,.16);
  --dmv-card-hi: 0 3px 8px rgba(15,34,68,.07), 0 22px 46px -14px rgba(15,34,68,.2);
  --dmv-up: var(--dm-danger, #dc2626);
  --dmv-down: var(--dm-success, #16a34a);
  overflow-x: clip;
}
/* v5.147.0 — Qui stavano i due blocchi .dmv--energia e .dmv--gas con gli
   esadecimali delle materie. Adesso --acc, --acc-soft, --acc-ink e --acc-glow
   li stampa il PHP sul contenitore, leggendoli dal registro (class-dm-icone.php):
   una mappa sola invece di una qui e una di la' che potevano divergere senza
   che niente lo segnalasse. Restano i valori di sicurezza, per il caso in cui
   il markup arrivi senza lo stile — una sezione senza colore e' illeggibile,
   una col colore sbagliato si nota e si aggiusta. */
.dmv { --acc: #c3ec2e; --acc-soft: #d6f36a; --acc-ink: #5f7a10;
       --acc-chip: #f3fae2; --acc-glow: 195,236,46; }
.dmv--gas { --acc-chip: #e6f4fd; }
.dmv--acqua { --acc-chip: #e8f1fe; }
.dmv--fotovoltaico { --acc-chip: #fdf0dc; }

/* ---------- intestazione di sezione ---------- */
.dmv-sect { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.dmv-sect > i { width: 3px; height: 15px; border-radius: 2px; background: var(--acc); }
.dmv-sect > span { font-size: 11px; font-weight: 700; letter-spacing: .14em;
                   text-transform: uppercase; color: var(--dmv-ink); white-space: nowrap; }
.dmv-sect > b { flex: 1; height: 1px; background: var(--dmv-line); }

/* Il pulsante di aiuto vive dentro il divisore, e il pannello si apre sotto,
   ancorato a destra. Per questo il divisore e' position:relative. */
.dmv-help-b { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
              border: 1px solid var(--dmv-line); border-radius: 9px; background: #ffffff;
              color: var(--dmv-ink); font: inherit; font-size: 12px; font-weight: 700;
              cursor: pointer; white-space: nowrap;
              transition: border-color .2s ease, background .2s ease; }
.dmv-help-b:hover { border-color: var(--acc); background: #fbfdf4; }
.dmv-help { position: absolute; top: calc(100% + 10px); right: 0; width: min(420px, 92vw);
            padding: 20px 22px; border-radius: 12px; background: #0f2244; color: #d7e0f0;
            font-size: 12.5px; font-weight: 500; line-height: 1.6; z-index: 30;
            box-shadow: 0 20px 50px -16px rgba(15,34,68,.55); }
.dmv-help[hidden] { display: none; }
.dmv-help-t { display: flex; align-items: flex-start; justify-content: space-between;
              gap: 14px; margin-bottom: 12px; }
.dmv-help-t > span { font-size: 13.5px; font-weight: 700; color: #ffffff; }
.dmv-help-x { flex-shrink: 0; display: inline-flex; padding: 3px; border: 0; border-radius: 6px;
              background: rgba(255,255,255,.1); color: #ffffff; cursor: pointer; }
.dmv-help p { margin: 0 0 12px; }
.dmv-help p:last-child { margin: 0; color: #a9b7d0; }
.dmv-help-r { display: flex; gap: 10px; margin-bottom: 9px; }
.dmv-help-r > i { flex-shrink: 0; width: 8px; height: 8px; margin-top: 6px; border-radius: 2px; }
.dmv-help-r b { color: #ffffff; }
.dmv-help-sep { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }

/* ============================================================
   1 · Testata
   ============================================================ */

.dmv-hero { position: relative; overflow: hidden; border-radius: 16px; background: #0b1a35;
            box-shadow: 0 1px 2px rgba(11,26,53,.2), 0 26px 60px -20px rgba(11,26,53,.55); }
.dmv-hero-bg { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 130% at 50% 12%, #17325e 0%, #10254a 42%, #0b1a35 100%); }
.dmv-hero-core { position: absolute; left: 32%; top: -14%; width: 44%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(47,109,184,.34) 0%, rgba(47,109,184,.12) 52%, rgba(11,26,53,0) 100%); }
.dmv-glow  { position: absolute; left: 6%; top: -24%; width: 34%; height: 94%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--acc-glow),.14) 0%, rgba(var(--acc-glow),0) 100%);
  animation: dmvGlow 23s ease-in-out infinite; }
.dmv-glow2 { position: absolute; right: 4%; bottom: -20%; width: 38%; height: 90%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--acc-glow),.11) 0%, rgba(var(--acc-glow),0) 100%);
  animation: dmvGlow 31s ease-in-out infinite reverse; }
@keyframes dmvGlow { 0%,100% { opacity: .8; transform: none }
                     50%     { opacity: 1; transform: translateY(-10px) scale(1.05) } }

/* Le onde di fondo: cinque tracciati che scorrono su periodi non multipli fra
   loro, cosi' il disegno non torna mai uguale a se stesso. */
.dmv-waves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dmv-waves g { animation: dmvDrift linear infinite; }
@keyframes dmvDrift { from { transform: translateX(0) } to { transform: translateX(-240px) } }

/* La testata e' il blocco che si guarda per primo e deve avere l'aria di
   una copertina, non di una barra: e' alta quanto il soggetto piu' il
   racconto, con un minimo che le impedisce di schiacciarsi quando il testo
   e' corto. */
.dmv-pad { position: relative; padding: 30px 34px 32px; min-height: 620px;
           display: flex; flex-direction: column; justify-content: center; }
.dmv-pad > .dmv-top { flex: 0 0 auto; }
.dmv-pad > .dmv-main { flex: 1 1 auto; align-content: center; }
.dmv-top { display: flex; align-items: flex-start; justify-content: space-between;
           gap: 18px 26px; flex-wrap: wrap; }
.dmv-id  { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.dmv-id-ico { flex-shrink: 0; margin-top: 2px;
              filter: drop-shadow(0 0 12px rgba(var(--acc-glow),.45)); }
.dmv-id-lab { font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: .05em;
              text-transform: uppercase; color: #ffffff; }
.dmv-id-sub { display: flex; align-items: center; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.dmv-id-sep { font-size: 13px; font-weight: 600; color: #5f7a9e; }

/* Il menu a scelta rapida: sembra testo, e' un select. Il select vero copre il
   riquadro in trasparenza, cosi' funziona la tendina nativa del sistema — su
   telefono e' l'unica che si sappia usare — e l'aspetto resta quello del
   testo con la freccina. */
.dmv-pick { position: relative; display: inline-flex; align-items: center; gap: 5px;
            padding: 2px 6px; margin: 0 -6px; border-radius: 6px; font-size: 13px;
            font-weight: 600; color: #9fb4d4; max-width: 100%;
            transition: color .2s ease, background .2s ease; }
.dmv-pick:hover { color: #ffffff; background: rgba(255,255,255,.08); }
.dmv-pick > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmv-pick svg { opacity: .7; flex-shrink: 0; }
.dmv-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
                   cursor: pointer; font-family: inherit; font-size: 13px; }

.dmv-ctrl { display: flex; align-items: center; justify-content: flex-end;
            gap: 10px 12px; flex-wrap: wrap; margin-left: auto; }
/* v5.166.0 — Le azioni: Esporta Excel e Scarica il report, dopo un separatore.
   Stesso disegno di Riepilogo e Fotovoltaico: .dmr-cta e' navy pieno, e su una
   testata navy sparirebbe nel fondo; qui e' di vetro, col bordo a fare il
   lavoro del riempimento. */
.dmv-ctrl-sep { width: 1px; align-self: stretch; min-height: 26px; background: rgba(255,255,255,.16); }
.dmv-ctrl-a { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dmv-ctrl-a .dmr-cta {
  background: rgba(255,255,255,.1); color: #ffffff; padding: 9px 15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  font-size: 12.5px; border-radius: 9px;
}
.dmv-ctrl-a .dmr-cta:hover { background: rgba(255,255,255,.18); color: #ffffff; }
.dmv-ctrl-a .dmr-cta.is-locked { opacity: .5; }
.dmv-kic { font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
           color: #7d93b5; white-space: nowrap; }

/* La pillola del periodo: l'indicatore bianco scorre invece di saltare, cosi'
   si vede da dove viene la selezione. */
.dmv-winpill { position: relative; display: flex; height: 42px; padding: 4px;
               border-radius: 12px; background: rgba(255,255,255,.06); }
.dmv-winpill > i { position: absolute; top: 4px; bottom: 4px; border-radius: 9px;
                   background: #ffffff; transition: left .3s cubic-bezier(.16,1,.3,1); }
.dmv-winpill a { position: relative; z-index: 1; display: inline-flex; align-items: center;
                 padding: 0 16px; font-size: 13px; font-weight: 700; text-decoration: none;
                 transition: color .2s ease; }

.dmv-step { display: flex; align-items: center; gap: 2px; height: 42px; padding: 0 5px;
            border-radius: 12px; background: rgba(255,255,255,.06); }
.dmv-step a, .dmv-step span.off { display: inline-flex; align-items: center; justify-content: center;
            width: 32px; height: 32px; border-radius: 9px; transition: background .18s ease; }
.dmv-step a { color: #ffffff; }
.dmv-step a:hover { background: rgba(255,255,255,.12); color: #ffffff; }
.dmv-step span.off { color: #44597c; cursor: default; }
.dmv-step select { appearance: none; border: 0; background: transparent; font-family: inherit;
                   cursor: pointer; outline: none; color: #ffffff; padding: 0 4px;
                   font-size: 14px; font-weight: 700; text-align: center; min-width: 118px; }
.dmv-step > b { min-width: 118px; text-align: center; font-size: 14px; font-weight: 700; color: #ffffff; }
/* v5.157.0 — Il contenitore di "Confronta con" + menu. Su computer non esiste:
   display:contents lo dissolve e i due figli restano dov'erano. Serve solo alla
   vista telefono, che ne fa una scatola sola. */
.dmv-cmp { display: contents; }
.dmv-sel { display: inline-flex; align-items: center; height: 42px; padding: 0 4px;
           border-radius: 12px; background: rgba(255,255,255,.06); }
.dmv-sel select { appearance: none; border: 0; background: transparent; font-family: inherit;
                  cursor: pointer; outline: none; color: #ffffff; padding: 0 9px;
                  font-size: 13px; font-weight: 700; }
.dmv-sel svg { margin-right: 8px; pointer-events: none; }
.dmv-step select option, .dmv-sel select option, .dmv-pick select option { color: #0f2244; background: #ffffff; }
.dmv-step select:focus-visible, .dmv-sel select:focus-visible,
.dmv-pick select:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Tre colonne: il racconto, il palco, le schede. Il palco e' la meta' della
   riga perche' deve tenere il soggetto E le due etichette di confronto che gli
   stanno a destra: stretto com'era prima, il soggetto finiva schiacciato
   contro il bordo e le etichette gli salivano addosso. */
.dmv-main { display: grid; gap: 24px 26px; margin-top: 22px;
            grid-template-columns: minmax(260px,1fr) minmax(420px,2.05fr) minmax(240px,.95fr);
            align-items: center; }
.dmv-narr { min-width: 0; }
.dmv-narr h1 { margin: 0; font-size: clamp(30px,3.4vw,46px); line-height: 1.02;
               font-weight: 700; letter-spacing: -.034em; color: #ffffff; }
.dmv-lead { margin-top: 14px; font-size: clamp(17px,1.5vw,21px); line-height: 1.28;
            font-weight: 700; letter-spacing: -.018em; color: #ffffff; text-wrap: pretty; }
.dmv-desc { margin: 10px 0 0; max-width: 46ch; font-size: 13.5px; line-height: 1.6;
            font-weight: 500; color: #a8bcd8; text-wrap: pretty; }

/* Il mini-riassunto delle due cause, con il salto al ponte: chi vuole il
   dettaglio non deve cercarlo scorrendo. */
.dmv-causa { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.dmv-causa-h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.dmv-causa-h a { font-size: 11.5px; font-weight: 700; color: var(--acc); transition: opacity .2s ease; }
.dmv-causa-h a:hover { opacity: .72; color: var(--acc); }
.dmv-causa-l { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; max-width: 440px; }
.dmv-causa-r { display: grid; grid-template-columns: 74px minmax(60px,1fr) 84px 42px;
               gap: 12px; align-items: center; }
.dmv-causa-r > span:first-child { font-size: 12.5px; font-weight: 600; color: #cddcf0; }
/* La barra e' la parte che si guarda per prima, quindi ha lo spessore di una
   barra e non di una riga: prima era un filo rosso da 7px su fondo quasi
   invisibile, e a schermo si leggeva come un puntino. */
.dmv-causa-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.1);
                 box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; }
.dmv-causa-bar > i { display: block; height: 10px; border-radius: 6px; transform-origin: left;
                     box-shadow: 0 0 10px -1px currentColor; }
.dmv-causa-eur { font-size: 13px; font-weight: 700; text-align: right;
                 font-variant-numeric: tabular-nums; white-space: nowrap; }
.dmv-causa-pct { font-size: 12px; font-weight: 700; text-align: right;
                 font-variant-numeric: tabular-nums; color: #8fa6c6; }

.dmv-nota { display: flex; gap: 11px; margin-top: 20px; padding: 13px 15px; border-radius: 11px;
            background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
            font-size: 12px; font-weight: 500; line-height: 1.55; color: #a8bcd8; text-wrap: pretty; }
.dmv-nota svg { flex-shrink: 0; margin-top: 1px; }

.dmv-vis { position: relative; min-width: 0; width: 100%; }
/* Il contenitore che tiene insieme la scritta e il disegno. La misura sta qui
   e in nessun altro posto: e' l'unico modo perche' i due restino centrati
   sullo stesso asse a qualunque larghezza. Il margine destro lascia il posto
   alle etichette di confronto, che escono dal palco. */
.dmv-vis-in { position: relative; width: 70%; max-width: 530px; min-width: 210px;
              margin-left: auto; margin-right: 30%; }
.dmv-rif { text-align: center; margin-bottom: 12px; }
.dmv-rif-v { margin-top: 4px; font-size: 16px; font-weight: 700; color: #ffffff;
             font-variant-numeric: tabular-nums; }

/* Il palco e' quadrato e occupa i due terzi sinistri della colonna: il terzo
   che resta e' per le etichette, che la linea di richiamo raggiunge. */
.dmv-stage { position: relative; width: 100%; }
/* Il riquadro del disegno. L'energia tiene il rapporto del PNG, che porta il
   quadrante disegnato dentro; il gas e' quadrato perche' il suo anello lo
   disegna dmv_quadrante() su una viewBox 400x400, e in un riquadro non
   quadrato l'anello diventerebbe un'ellisse. */
.dmv-art { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.dmv--energia .dmv-art { aspect-ratio: 1223 / 1286; }

/* --- il quadrante --- */
.dmv-dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dmv-dial-track { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 5; }
/* v5.146.0 — Due tratti sullo stesso anello: la copertura dei dati, pallida e
   ferma, e la finestra selezionata, piena e mobile. Il tratto della finestra e'
   piu' spesso perche' deve leggersi sopra l'altro anche quando lo ricopre. */
.dmv-dial-cov { fill: none; stroke-width: 5; stroke-linecap: round; opacity: .22; }
.dmv-dial-arc { fill: none; stroke-width: 7; stroke-linecap: round; opacity: .95;
                transition: stroke-dasharray .45s ease, stroke-dashoffset .45s ease; }
.dmv-dial-tick line { stroke: rgba(255,255,255,.16); stroke-width: 2.5; stroke-linecap: round; }
.dmv-dial-tick line.on { stroke: rgba(255,255,255,.42); }
.dmv-dial-head { filter: drop-shadow(0 0 7px rgba(var(--acc-glow),.85)); }
.dmv-dial-lead line { stroke-width: 1.5; stroke-dasharray: 3 4; }

/* --- la lampadina --- */
/* Lampadina e fiamma riempiono il riquadro del soggetto, che il palco
   dimensiona: il rapporto lo tiene l'immagine, non il contenitore. */
/* Lampadina e fiamma riempiono il riquadro: il rapporto lo tiene .dmv-art. */
.dmv-art > .dmv-flick { position: absolute; inset: 0; }
/* La fiamma sta DENTRO l'anello, non sopra: il quadrante deve restare
   leggibile tutto intorno. */
.dmv-art > .dmv-flame { position: absolute; inset: 13%; width: 74%; height: 74%; }
.dmv-haze { position: absolute; left: -20%; top: -10%; right: -20%; bottom: -6%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(210,240,120,.17) 0%, rgba(163,214,52,.09) 44%,
                              rgba(47,109,184,.1) 68%, rgba(11,26,53,0) 100%);
  animation: dmvBreath 11.3s ease-in-out infinite; }
.dmv-bloom { position: absolute; left: 16%; top: 14%; width: 68%; height: 56%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(238,250,190,.46) 0%, rgba(195,236,46,.19) 46%,
                              rgba(195,236,46,0) 100%);
  filter: blur(7px); animation: dmvBreath 7.9s ease-in-out infinite; }
/* Tre respiri su periodi non multipli: le luci non tornano mai in fase. */
@keyframes dmvBreath { 0%,100% { transform: scale(1); opacity: .92 }
                       50%     { transform: scale(1.06); opacity: 1 } }
.dmv-flick { animation: dmvFlick 6.1s ease-in-out infinite; }
@keyframes dmvFlick { 0%,100% { opacity: 1 } 47% { opacity: 1 } 48% { opacity: .82 }
                      49% { opacity: 1 } 71% { opacity: .9 } 72% { opacity: 1 } }
.dmv-bulb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
            pointer-events: none; transition: filter .5s ease; }
/* Il ritaglio tondo tagliava di netto la sfumatura e a schermo si vedeva un
   mezzaluna grigia appoggiata sul vetro. La maschera la fa sparire ai bordi:
   il bagliore resta, lo spigolo no. */
.dmv-surgebox { position: absolute; left: 32%; top: 18%; width: 36%; height: 44%;
                pointer-events: none; overflow: hidden; border-radius: 50%;
                -webkit-mask-image: radial-gradient(closest-side, #000 48%, transparent 100%);
                mask-image: radial-gradient(closest-side, #000 48%, transparent 100%); }
.dmv-surge { position: absolute; left: -10%; right: -10%; height: 46%; bottom: 0;
  background: linear-gradient(to top, rgba(195,236,46,0) 0%, rgba(232,248,178,.5) 55%,
                              rgba(255,255,255,.34) 100%);
  filter: blur(7px); opacity: 0; animation: dmvSurge linear infinite; }
@keyframes dmvSurge { 0% { opacity: 0; transform: translateY(40%) }
                      12% { opacity: .85 } 40% { opacity: 0; transform: translateY(-20%) }
                      100% { opacity: 0; transform: translateY(-20%) } }
.dmv-motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dmv-motes > i { position: absolute; border-radius: 50%; opacity: 0;
                 animation: dmvMote linear infinite; }
@keyframes dmvMote { 0% { opacity: 0; transform: translateY(0) } 18% { opacity: .7 }
                     76% { opacity: .4 } 100% { opacity: 0; transform: translateY(-64px) } }

/* --- la fiamma (gas) ---
   Il fuoco lo fanno le lingue, non il mantello: cinque copie della stessa
   sagoma con periodo, ritardo, larghezza e altezza propri, tutte incernierate
   sulla base. I periodi non sono multipli fra loro, quindi il profilo
   d'insieme non si ripete mai davvero — ed e' quella la differenza fra una
   fiamma e una gelatina che si gonfia.
   Il perno e' sempre il piede: la base di una fiamma sta ferma, si muove la
   punta. --fa e' l'altezza (segue il consumo), --fv il moltiplicatore dei
   periodi (piu' consumo, piu' nervosa). */
.dmv-flame { overflow: visible; }

.dmv-fl-outer { transform-origin: 50% 95%; opacity: .9;
                animation: dmvFlOut calc(4.3s * var(--fv,1)) ease-in-out infinite; }
@keyframes dmvFlOut {
  0%,100% { transform: scale(1, calc(.98 * var(--fa,1) * var(--fk,1))) skewX(0deg) }
  28%     { transform: scale(.98, calc(1.04 * var(--fa,1) * var(--fk,1))) skewX(-1.6deg) }
  61%     { transform: scale(1.02, calc(1.0 * var(--fa,1) * var(--fk,1))) skewX(1.4deg) }
}

.dmv-fl-tongue { transform-origin: 50% 96%; mix-blend-mode: screen;
                 animation-name: dmvFlTongue; animation-timing-function: ease-in-out;
                 animation-iteration-count: infinite; }
/* La lingua nasce bassa e larga, sale allungandosi e stringendosi, e in punta
   perde corpo: e' il ciclo di una lingua di fuoco vera. La traslazione
   orizzontale e' minima — il gas esce da un ugello, non da un falo'. */
@keyframes dmvFlTongue {
  0%   { transform: translateX(var(--tx,0)) scale(calc(var(--tw,1) * 1.06),
                    calc(var(--th,1) * .84 * var(--fa,1) * var(--fk,1))); opacity: .5 }
  30%  { transform: translateX(calc(var(--tx,0) + 2px)) scale(calc(var(--tw,1) * .94),
                    calc(var(--th,1) * 1.08 * var(--fa,1) * var(--fk,1))); opacity: .95 }
  58%  { transform: translateX(calc(var(--tx,0) - 2px)) scale(calc(var(--tw,1) * 1.0),
                    calc(var(--th,1) * .96 * var(--fa,1) * var(--fk,1))); opacity: .8 }
  82%  { transform: translateX(calc(var(--tx,0) + 1px)) scale(calc(var(--tw,1) * .9),
                    calc(var(--th,1) * 1.12 * var(--fa,1) * var(--fk,1))); opacity: .62 }
  100% { transform: translateX(var(--tx,0)) scale(calc(var(--tw,1) * 1.06),
                    calc(var(--th,1) * .84 * var(--fa,1) * var(--fk,1))); opacity: .5 }
}

/* Il cono si muove pochissimo: e' la parte stabile della combustione, ed e'
   proprio la sua fermezza a far leggere il resto come fiamma. */
.dmv-fl-core { transform-origin: 50% 96%;
               animation: dmvFlCore calc(2.6s * var(--fv,1)) ease-in-out infinite; }
@keyframes dmvFlCore {
  0%,100% { transform: scale(1, calc(1.0 * var(--fa,1) * var(--fk,1))) }
  44%     { transform: scale(1.03, calc(.95 * var(--fa,1) * var(--fk,1))) }
}
.dmv-fl-heart { transform-origin: 50% 84%;
                animation: dmvFlHeart calc(1.9s * var(--fv,1)) ease-in-out infinite; }
@keyframes dmvFlHeart { 0%,100% { opacity: .78; transform: scale(1) }
                        50%     { opacity: 1; transform: scale(1.1) } }
.dmv-fl-glow { transform-origin: 50% 62%;
               animation: dmvFlGlow calc(5.9s * var(--fv,1)) ease-in-out infinite; }
@keyframes dmvFlGlow { 0%,100% { opacity: .8; transform: scale(1) }
                       50%     { opacity: 1; transform: scale(1.06) } }
.dmv-fl-foot { animation: dmvFlFoot calc(2.6s * var(--fv,1)) ease-in-out infinite; }
@keyframes dmvFlFoot { 0%,100% { opacity: .38; transform: scaleX(1) }
                       50%     { opacity: .5; transform: scaleX(1.07) } }
.dmv-fl-base { transform-origin: 50% 100%;
               animation: dmvFlGlow calc(5.9s * var(--fv,1)) ease-in-out infinite reverse; }

/* Le scintille salgono, si allargano appena e si spengono. */
.dmv-fl-spark { animation-name: dmvFlSpark; animation-timing-function: ease-out;
                animation-iteration-count: infinite; opacity: 0; }
@keyframes dmvFlSpark {
  0%   { opacity: 0; transform: translateY(0) scale(.6) }
  14%  { opacity: .9 }
  70%  { opacity: .35 }
  100% { opacity: 0; transform: translateY(-96px) scale(1.25) }
}

/* Le etichette stanno appena fuori dal palco, all'altezza a cui la linea di
   richiamo tocca l'anello (le due quote sono in DMV_BENCH_A/B). */
.dmv-bench { position: absolute; top: var(--bt, 50%); left: 100%; padding-left: 15px; min-width: 0;
             transform: translateY(-50%); }
/* Il PNG fa uscire i suoi richiami al 93% della larghezza, non al bordo. */
.dmv--energia .dmv-bench { left: 93%; padding-left: 13px; }
.dmv-bench-v { margin-top: 3px; font-weight: 700; color: #ffffff;
               font-variant-numeric: tabular-nums; white-space: nowrap; }
.dmv-pill { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 6px;
            font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.dmv-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dmv-card { border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: #102a4e;
            padding: 15px 16px; min-width: 0; }
.dmv-card-t { font-size: 12.5px; font-weight: 700; color: #ffffff; }
.dmv-ring-row { display: flex; align-items: center; gap: 14px; margin-top: 13px; }
.dmv-ringbox { position: relative; display: inline-flex; align-items: center; justify-content: center;
               flex-shrink: 0; width: 64px; height: 64px; }
.dmv-ringbox svg { position: absolute; inset: 0; }
.dmv-ringbox svg circle { transition: stroke-dasharray .7s cubic-bezier(.22,1,.3,1); }
.dmv-ringbox > span { position: relative; font-size: 13px; font-weight: 700; color: #ffffff;
                      font-variant-numeric: tabular-nums; }
.dmv-card-lab { font-size: 13px; font-weight: 700; color: #ffffff; }
.dmv-card-note { margin-top: 4px; font-size: 11.5px; font-weight: 500; line-height: 1.5;
                 color: #9fb4d4; text-wrap: pretty; }
.dmv-qs { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.dmv-qrow { display: flex; align-items: center; gap: 12px; padding: 9px 8px; margin: 0 -8px;
            border-radius: 9px; transition: background .2s ease; }
.dmv-qrow:hover { background: rgba(255,255,255,.06); }
.dmv-qico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
            width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.08); }
.dmv-qbody { flex: 1; min-width: 0; }
.dmv-qv { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.dmv-qv > span { font-size: 18px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em;
                 font-variant-numeric: tabular-nums; color: #ffffff; }
.dmv-qv > em { font-style: normal; font-size: 12px; font-weight: 600; color: #9fb4d4; }
.dmv-qlab { margin-top: 3px; font-size: 11.5px; font-weight: 500; color: #8fa6c6;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmv-qd { margin-top: 2px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dmv-qd em { font-style: normal; font-weight: 500; color: #8fa6c6; }

/* ============================================================
   2 · Il periodo — spesa e previsione
   ============================================================ */

.dmv-per { display: grid; gap: 22px; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }
.dmv-box { position: relative; overflow: hidden; border-radius: 16px; background: #ffffff;
           box-shadow: var(--dmv-card); transition: box-shadow .26s ease, transform .26s ease;
           padding: 24px 26px 22px; }
.dmv-box:hover { box-shadow: var(--dmv-card-hi); transform: translateY(-2px); }
.dmv-box-glow { position: absolute; left: -6%; top: -42%; width: 62%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(47,109,184,.09) 0%, rgba(47,109,184,.03) 52%, rgba(255,255,255,0) 100%); }
.dmv-box-h { position: relative; display: flex; align-items: center; gap: 12px; }
.dmv-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
           width: 38px; height: 38px; border-radius: 11px; background: var(--acc-chip); }
.dmv-ico--blu { background: #eef3fa; border: 1px solid #dde6f2; }
.dmv-ico--neutro { background: var(--dm-surface-3,#f4f2ec); border: 1px solid #e6e2d6; }
.dmv-cap { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
           color: var(--dmv-mut); }
.dmv-cap2 { margin-top: 3px; font-size: 12.5px; font-weight: 500; color: var(--dmv-mut); }
.dmv-big { position: relative; display: flex; align-items: baseline; gap: 9px; margin-top: 18px; flex-wrap: wrap; }
.dmv-big > span { font-size: clamp(40px,4.4vw,56px); line-height: 1.02; font-weight: 700;
                  letter-spacing: -.038em; font-variant-numeric: tabular-nums; color: var(--dmv-ink); }
.dmv-big > b { font-size: 21px; font-weight: 600; color: var(--dmv-mut); }
/* La pastiglia sta dentro .dmv-big, che porta il numero a 56px: senza
   rialzare la specificita' vinceva quella regola e lo scostamento usciva
   grande quanto la spesa. Non e' un dettaglio di gusto — un +4,8% delle
   dimensioni del totale dice che le due cose pesano uguale, e non e' vero. */
.dmv-chip, .dmv-big > span.dmv-chip {
  display: inline-flex; align-items: baseline; gap: 5px; margin-left: 6px;
  padding: 5px 10px; border-radius: 8px; font-size: 13px; line-height: 1.2;
  font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums;
  align-self: center; white-space: nowrap;
}
.dmv-big-sub { position: relative; margin-top: 9px; font-size: 13px; font-weight: 500;
               color: var(--dmv-mut); font-variant-numeric: tabular-nums; }
.dmv-kpi3 { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
            margin-top: 22px; padding: 16px 4px; border: 1px solid var(--dmv-line);
            border-radius: 13px; background: var(--dmv-zebra); }
.dmv-kpi3 > div { padding: 0 16px; }
.dmv-kpi3 > div + div { border-left: 1px solid var(--dmv-line); }
.dmv-kpi-l { font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
             color: var(--dmv-mut); }
.dmv-kpi-v { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; }
.dmv-kpi-v > span { font-size: 19px; font-weight: 700; letter-spacing: -.025em;
                    color: var(--dmv-ink); font-variant-numeric: tabular-nums; }
.dmv-kpi-v > b { font-size: 12px; font-weight: 600; color: var(--dmv-mut); }
.dmv-kpi-d { margin-top: 4px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* La card della previsione e' lime su tutte e due le materie: li' il lime non
   e' il colore della commodity, e' quello dell'intelligence Kesva. */
.dmv-prev { position: relative; overflow: hidden; border-radius: 16px; background: #c3ec2e;
            box-shadow: 0 1px 2px rgba(65,84,26,.1), 0 14px 36px -14px rgba(65,84,26,.28);
            transition: box-shadow .26s ease, transform .26s ease; padding: 24px 26px; }
.dmv-prev:hover { box-shadow: 0 3px 8px rgba(65,84,26,.14), 0 22px 46px -14px rgba(65,84,26,.34);
                  transform: translateY(-2px); }
.dmv-prev-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
                width: 38px; height: 38px; border-radius: 11px; background: #ffffff; }
.dmv-prev-k { display: flex; align-items: center; gap: 8px; }
.dmv-prev-k > i { width: 6px; height: 6px; border-radius: 50%; background: #2b3a0d; flex-shrink: 0; }
.dmv-prev-k > span { font-size: 11px; font-weight: 700; letter-spacing: .13em;
                     text-transform: uppercase; color: #2b3a0d; }
.dmv-prev-sub { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: #455c17; }
.dmv-prev-v { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.dmv-prev-v > span { font-size: 36px; line-height: 1.02; font-weight: 700; letter-spacing: -.032em;
                     color: #1a2409; font-variant-numeric: tabular-nums; }
.dmv-prev-v > b { font-size: 16px; font-weight: 700; color: #41541a; }
.dmv-prev-box { margin-top: 18px; padding: 15px 16px; border-radius: 13px; background: #ffffff; }
.dmv-prev-bh { display: flex; align-items: baseline; justify-content: space-between;
               gap: 10px; margin-bottom: 11px; }
.dmv-prev-bh > b { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: #41541a; }
.dmv-prev-track { position: relative; height: 6px; border-radius: 3px; background: #e4ebd2; }
.dmv-prev-track > i.fill { position: absolute; left: 0; top: 0; height: 6px; border-radius: 3px;
                           width: 100%; transform-origin: left; background: #7ea200; }
.dmv-prev-track > i.mark { position: absolute; top: -4px; width: 3px; height: 14px;
                           border-radius: 2px; background: #2b3a0d; }
.dmv-prev-ends { display: flex; justify-content: space-between; margin-top: 9px; font-size: 12px;
                 font-weight: 600; color: var(--dmv-mut); font-variant-numeric: tabular-nums; }
.dmv-prev-base { margin-top: 14px; font-size: 12.5px; font-weight: 600; color: #3a4d13;
                 line-height: 1.5; text-wrap: pretty; }
.dmv-prev-base b { color: #1a2409; font-weight: 700; font-variant-numeric: tabular-nums; }
.dmv-prev-off { margin-top: 16px; font-size: 13.5px; font-weight: 500; color: var(--dmv-mut);
                line-height: 1.55; text-wrap: pretty; }

/* ============================================================
   3 · Il ponte dei costi
   ============================================================ */

.dmv-bridge { position: relative; overflow: hidden; border-radius: 16px; background: #ffffff;
              box-shadow: var(--dmv-card); padding: 18px; }
.dmv-cbtop { position: relative; overflow: hidden; display: grid; align-items: center;
             gap: 18px 22px; padding: 22px 24px; border-radius: 13px; background: #fbfcf7;
/* Il tratto deve arrivare vicino a tutti e due i totali. Con le colonne
   laterali larghe e il testo allineato entrambe a sinistra, il capo destro
   finiva appiccicato al numero e quello sinistro a mezzo riquadro di
   distanza: la stessa linea sembrava storta. Il totale di destra ora e'
   allineato a destra, e la colonna di mezzo si prende lo spazio. */
             grid-template-columns: minmax(0,.62fr) minmax(280px,1.6fr) minmax(0,.62fr); }
.dmv-cbend:last-of-type { text-align: right; }
.dmv-cbend:last-of-type .dmv-cbend-v { justify-content: flex-end; }
.dmv-cbtop-glow { position: absolute; right: -6%; top: -60%; width: 46%; height: 220%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(195,236,46,.2) 0%, rgba(195,236,46,.05) 56%, rgba(251,252,247,0) 100%); }
.dmv-cbend { position: relative; min-width: 0; }
.dmv-cbend-v { margin-top: 8px; display: flex; align-items: baseline; gap: 5px; }
.dmv-cbend-v > span { font-size: clamp(28px,3vw,38px); line-height: 1.02; font-weight: 700;
                      letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--dmv-ink); }
.dmv-cbend-v > b { font-size: 18px; font-weight: 600; color: var(--dmv-mut); }
.dmv-cbend-d { margin-top: 11px; font-size: 12.5px; font-weight: 500; line-height: 1.7; color: var(--dmv-mut); }
.dmv-cbend-d b { color: var(--dmv-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.dmv-cbline { position: relative; min-width: 0; align-self: stretch;
              display: flex; flex-direction: column; justify-content: center; }
.dmv-cbtot { display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
             padding: 9px 16px; border-radius: 11px; white-space: nowrap; }
.dmv-cbtot > span:first-child { font-size: 20px; line-height: 1.05; font-weight: 700;
                                letter-spacing: -.028em; font-variant-numeric: tabular-nums; }
.dmv-cbtot > span + span { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dmv-cbcurve { position: relative; width: 100%; margin: 12px auto 0; height: 76px; }
.dmv-cbcurve svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* L'impulso corre dentro il tratto, non sopra: pathLength normalizzato a 1000
   perche' la sua lunghezza apparente non dipenda da quella del percorso. */
.dmv-flow { animation: dmvFlow 2.6s linear infinite; }
@keyframes dmvFlow { from { stroke-dashoffset: 1000 } to { stroke-dashoffset: 0 } }
/* I due capi: la quota verticale la mette il PHP, perche' dipende dal verso
   del tratto. Il margine negativo li centra sulla linea. */
.dmv-cbdot-a { position: absolute; left: -5px; margin-top: -5.5px; width: 11px; height: 11px;
               border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px rgba(var(--acc-glow),.22); }
.dmv-cbdot-b { position: absolute; right: -7px; margin-top: -7.5px; width: 15px; height: 15px;
               border-radius: 50%; background: #ffffff; border: 3px solid #4e9c00; }
.dmv-cbdot-b > i { position: absolute; inset: -3px; border-radius: 50%;
                   box-shadow: 0 0 0 0 rgba(78,156,0,.4); animation: dmvHalo 2.8s ease-out infinite; }
@keyframes dmvHalo { 0% { box-shadow: 0 0 0 0 rgba(78,156,0,.35) }
                     70%,100% { box-shadow: 0 0 0 12px rgba(78,156,0,0) } }
.dmv-cbcap { margin-top: 6px; text-align: center; font-size: 12px; font-weight: 500;
             color: var(--dmv-mut); text-wrap: pretty; }

.dmv-cb { display: grid; gap: 18px; margin-top: 18px; align-items: stretch;
          grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
.dmv-cbcause { min-width: 0; padding: 22px 24px; border: 1px solid var(--dmv-line2); border-radius: 13px; }
.dmv-cbcause-t { font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
                 color: var(--dmv-ink); }
.dmv-cbrows { display: flex; flex-direction: column; margin-top: 18px; }
.dmv-cbrow { display: grid; align-items: center; gap: 14px 18px; padding: 15px 0;
             grid-template-columns: minmax(0,1.25fr) minmax(90px,1fr) 108px; }
.dmv-cbrow + .dmv-cbrow { border-top: 1px solid var(--dmv-line2); }
.dmv-cbrow-l { display: flex; align-items: flex-start; gap: 13px; min-width: 0; }
.dmv-cbrow-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
                 width: 40px; height: 40px; border-radius: 12px; background: var(--acc-chip); }
.dmv-cbrow-lab { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.012em;
                 color: var(--dmv-ink); }
.dmv-cbrow-desc { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500;
                  line-height: 1.45; color: var(--dmv-mut); text-wrap: pretty; }
.dmv-cbrow-track { position: relative; display: block; height: 16px; border-radius: 8px;
                   background: #eef1f4; overflow: hidden; }
.dmv-cbrow-track > i.zero { position: absolute; left: 50%; top: -4px; bottom: -4px;
                            width: 1px; background: #d6dbe4; }
.dmv-cbrow-track > i.bar { position: absolute; top: 0; height: 16px; min-width: 4px;
                           overflow: hidden; transform-origin: left;
                           transition: width .45s cubic-bezier(.16,1,.3,1), left .45s cubic-bezier(.16,1,.3,1); }
.dmv-sheen { position: absolute; top: 0; bottom: 0; width: 34%;
  background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));
  animation: dmvSheen 3.4s ease-in-out infinite; }
@keyframes dmvSheen { 0% { transform: translateX(-140%) } 60%,100% { transform: translateX(420%) } }
.dmv-cbrow-r { text-align: right; min-width: 0; }
.dmv-cbrow-eur { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.022em;
                 font-variant-numeric: tabular-nums; white-space: nowrap; }
.dmv-cbrow-pct { display: block; margin-top: 3px; font-size: 14px; font-weight: 700;
                 font-variant-numeric: tabular-nums; color: var(--dmv-mut); }

.dmv-cbsum { position: relative; overflow: hidden; min-width: 0; padding: 22px 24px;
             border: 1px solid #e2eec0; border-radius: 13px;
             background: linear-gradient(160deg,#f6fce6 0%,#ffffff 78%); }
.dmv-cbsum-h { display: flex; align-items: center; gap: 9px; }
.dmv-cbsum-h > span { font-size: 11.5px; font-weight: 700; letter-spacing: .13em;
                      text-transform: uppercase; color: #41541a; }
.dmv-cbsum-b { display: flex; align-items: center; justify-content: space-between;
               gap: 20px; margin-top: 16px; flex-wrap: wrap; }
.dmv-cbsum-pct { font-size: clamp(34px,3.4vw,44px); line-height: 1; font-weight: 700;
                 letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--dmv-ink); }
.dmv-cbsum-t { margin-top: 9px; font-size: 14.5px; font-weight: 700; line-height: 1.3;
               color: var(--dmv-ink); text-wrap: pretty; }
.dmv-cbsum-s { margin-top: 9px; font-size: 12.5px; font-weight: 500; line-height: 1.6;
               color: var(--dmv-mut); font-variant-numeric: tabular-nums; }
.dmv-donut { position: relative; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dmv-donut-c { position: relative; display: inline-flex; align-items: center; justify-content: center;
               width: 116px; height: 116px; }
.dmv-donut-c svg { position: absolute; inset: 0; }
.dmv-donut-c svg circle { transition: stroke-dasharray .6s cubic-bezier(.16,1,.3,1); }
.dmv-donut-in { position: relative; text-align: center; }
.dmv-donut-in > span { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.028em;
                       font-variant-numeric: tabular-nums; color: var(--dmv-ink); }
.dmv-donut-in > em { display: block; margin-top: 1px; font-style: normal; font-size: 11.5px;
                     font-weight: 600; color: var(--dmv-mut); }
.dmv-donut-o > div:first-child { font-size: 15px; font-weight: 700; letter-spacing: -.02em;
                                 font-variant-numeric: tabular-nums; color: var(--dmv-ink); }
.dmv-donut-o > div + div { margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--dmv-mut); }
.dmv-cbins { display: flex; gap: 11px; margin-top: 18px; padding: 13px 14px; border-radius: 11px;
             background: #f2f9df; font-size: 12.5px; font-weight: 500; line-height: 1.5;
             color: var(--dmv-txt); text-wrap: pretty; }
.dmv-cbins svg { flex-shrink: 0; margin-top: 1px; }

.dmv-cbcalc { display: flex; align-items: center; gap: 20px 26px; margin-top: 18px;
              padding: 16px 24px; border-top: 1px solid var(--dmv-line2); flex-wrap: wrap; }
.dmv-cbcalc-h { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dmv-cbcalc-h > span:last-child { font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
                                  text-transform: uppercase; color: var(--dmv-ink); }
.dmv-cbcalc-i { min-width: 0; padding-left: 22px; border-left: 1px solid var(--dmv-line2); }
.dmv-cbcalc-i > span:first-child { display: block; font-size: 12.5px; font-weight: 700; color: var(--dmv-ink); }
.dmv-cbcalc-i > span + span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500;
                              color: var(--dmv-mut); font-variant-numeric: tabular-nums; }
.dmv-cbcalc-i b { color: var(--dmv-ink); font-weight: 700; }
.dmv-goto { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px;
            border: 1px solid var(--dmv-line); border-radius: 10px; font-size: 12.5px; font-weight: 700;
            color: var(--dmv-ink); white-space: nowrap;
            transition: border-color .2s ease, background .2s ease; }
.dmv-goto:hover { border-color: var(--acc); background: #fbfdf4; color: var(--dmv-ink); }

/* ============================================================
   4 · L'anno
   ============================================================ */

.dmv-anno { position: relative; border-radius: 16px; background: #0b1a35; overflow: hidden;
            box-shadow: 0 1px 2px rgba(11,26,53,.2), 0 26px 60px -20px rgba(11,26,53,.5);
            padding: 24px 28px 18px; }
.dmv-anno-h { display: flex; align-items: flex-start; justify-content: space-between;
              gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.dmv-anno-cap { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
                color: #9fb4d4; }
.dmv-read { margin-top: 8px; font-size: 14px; font-weight: 500; color: #9fb4d4; }
.dmv-read b { color: #ffffff; font-weight: 700; }
.dmv-anno-leg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 11px;
                font-size: 12px; font-weight: 600; color: #9fb4d4; }
.dmv-anno-leg span { display: inline-flex; align-items: center; gap: 6px; }
.dmv-unitpill { position: relative; display: flex; padding: 3px; border-radius: 9px;
                background: rgba(255,255,255,.07); }
.dmv-unitpill > i { position: absolute; top: 3px; bottom: 3px; border-radius: 7px; background: #ffffff;
                    transition: left .4s cubic-bezier(.16,1,.3,1); }
.dmv-unitpill a { position: relative; z-index: 1; padding: 6px 13px; font-size: 12px;
                  font-weight: 700; text-decoration: none; }
.dmv-tog-d { padding: 7px 13px; border: 0; border-radius: 8px; background: rgba(255,255,255,.07);
             color: #ffffff; font-size: 12px; font-weight: 700; text-decoration: none;
             display: inline-block; }
.dmv-tog-d:hover { background: rgba(255,255,255,.14); color: #ffffff; }

.dmv-plotbox { position: relative; height: 236px; padding-right: 56px; }
.dmv-gl { position: absolute; left: 0; right: 56px; height: 1px; }
.dmv-ax { position: absolute; right: 0; font-size: 11px; font-weight: 600; color: #9fb4d4;
          font-variant-numeric: tabular-nums; }
.dmv-plot { position: absolute; left: 0; right: 56px; top: 0; bottom: 0; cursor: crosshair; }
.dmv-plot-glow { position: absolute; left: -6%; right: -6%; bottom: -14%; height: 86%; pointer-events: none;
  background: radial-gradient(70% 100% at 50% 100%, rgba(var(--acc-glow),.2) 0%,
                              rgba(var(--acc-glow),.07) 46%, rgba(11,26,53,0) 100%); }
.dmv-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12,minmax(0,1fr));
            gap: 10px; align-items: end; }
.dmv-barslot { position: relative; display: flex; align-items: flex-end; height: 100%;
               transition: opacity .2s ease; }
.dmv-bar { position: relative; width: 100%; border-radius: 4px 4px 0 0; transform-origin: bottom;
           transition: height .5s cubic-bezier(.16,1,.3,1); }
.dmv-ping { position: absolute; left: 50%; top: -3px; margin-left: -3px; width: 6px; height: 6px;
            border-radius: 50%; background: #eaff9a; animation: dmvPing 2.2s ease-out infinite; }
@keyframes dmvPing { 0% { box-shadow: 0 0 0 0 rgba(234,255,154,.6) }
                     70%,100% { box-shadow: 0 0 0 9px rgba(234,255,154,0) } }
.dmv-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px;
           padding: 8px 11px; border-radius: 9px; background: #ffffff; color: var(--dmv-ink);
           font-size: 11.5px; font-weight: 500; line-height: 1.5; width: max-content; max-width: 220px;
           z-index: 6; font-variant-numeric: tabular-nums; opacity: 0; pointer-events: none;
           transition: opacity .18s ease; box-shadow: 0 10px 28px -10px rgba(15,34,68,.4); }
.dmv-tip--dark { background: var(--dmv-ink); color: #ffffff; }
.dmv-barslot:hover .dmv-tip, .dmv-qcol:hover .dmv-tip,
.dmv-vseg:hover .dmv-tip, .dmv-bcol:hover .dmv-tip { opacity: 1; }
.dmv-anno-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dmv-cross { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
.dmv-cross > i { position: absolute; left: -.5px; top: 0; bottom: 0; width: 1px;
                 background: #ffffff; opacity: .45; }
.dmv-mesi { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 10px;
            padding-right: 56px; padding-top: 9px; }
.dmv-mesi > div { text-align: center; font-size: 11px; }

/* ============================================================
   5-6 · Trimestri e semestri
   ============================================================ */

.dmv-duo { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 22px; }
.dmv-duo2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; }
.dmv-ch { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dmv-ch-l { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.dmv-tog { padding: 7px 13px; border: 1px solid var(--dmv-line); border-radius: 9px; background: #ffffff;
           color: var(--dmv-ink); font-size: 12px; font-weight: 700; text-decoration: none;
           display: inline-block; white-space: nowrap;
           transition: border-color .2s ease, background .2s ease; }
.dmv-tog:hover { border-color: var(--acc); background: #fbfdf4; color: var(--dmv-ink); }

.dmv-qplot { position: relative; height: 218px; margin-top: 18px; }
.dmv-qplot > i.base { position: absolute; left: 0; right: 0; bottom: 62px; height: 1px; background: #cfd6e4; }
.dmv-qgrid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px; height: 218px; }
.dmv-qcol { position: relative; display: flex; flex-direction: column; height: 218px; }
.dmv-qbars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 6px; min-height: 0; }
.dmv-qbars > i { width: 38%; border-radius: 4px 4px 0 0; transform-origin: bottom;
                 transition: height .5s cubic-bezier(.16,1,.3,1); }
.dmv-qfoot { height: 62px; padding-top: 11px; text-align: center; }
.dmv-qfoot > div:first-child { font-size: 12.5px; font-weight: 700; color: var(--dmv-ink); }
.dmv-qpct { margin-top: 3px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dmv-qpart { margin-top: 4px; font-size: 9.5px; font-weight: 700; color: #b45309;
             font-variant-numeric: tabular-nums; }
.dmv-qcol .dmv-tip { bottom: 70px; }

.dmv-hlist { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.dmv-hbox { padding: 16px 18px; border-radius: 10px; background: var(--dmv-zebra); }
.dmv-hbox-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dmv-hbox-h > span:first-child { font-size: 13px; font-weight: 700; color: var(--dmv-ink); }
.dmv-hpct { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 6px;
            font-variant-numeric: tabular-nums; }
.dmv-hvals { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 12px; }
.dmv-hvals span.k { font-size: 11px; font-weight: 600; color: var(--dmv-mut); }
.dmv-hvals span.v { display: block; margin-top: 3px; font-size: 19px; font-weight: 700;
                    letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dmv-hbars { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.dmv-hbars > span { display: block; height: 6px; border-radius: 3px; background: #eef1f8; }
.dmv-hbars > span > i { display: block; height: 6px; border-radius: 3px; transform-origin: left; }
.dmv-hpart { margin-top: 10px; font-size: 11px; font-weight: 600; color: #b45309; }

/* ============================================================
   7-8 · Voci di costo e fasce orarie
   ============================================================ */

.dmv-panel { border-radius: 16px; background: #ffffff; box-shadow: var(--dmv-card);
             transition: box-shadow .26s ease, transform .26s ease; padding: 24px 28px 20px; }
.dmv-panel:hover { box-shadow: var(--dmv-card-hi); transform: translateY(-2px); }
/* Le fasce stanno su carta, non su bianco: e' un blocco di contesto, non un
   risultato, e il cambio di fondo lo dice senza scriverlo. */
.dmv-panel--carta { background: #f6f4ee; box-shadow: inset 0 0 0 1px rgba(15,34,68,.07); }
.dmv-panel--carta:hover { box-shadow: inset 0 0 0 1px rgba(15,34,68,.12); transform: translateY(-2px); }
.dmv-panel-h { display: flex; align-items: flex-start; justify-content: space-between;
               gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.dmv-story { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--dmv-mut); text-wrap: pretty; }
.dmv-story--s { margin-top: 7px; font-size: 13px; }

.dmv-vbar { display: flex; gap: 3px; height: 34px; transform-origin: left; }
.dmv-vseg { position: relative; display: flex; align-items: center; justify-content: center;
            height: 34px; border-radius: 5px; min-width: 0; }
.dmv-vseg > span:first-child { font-size: 11.5px; font-weight: 700; white-space: nowrap;
                               font-variant-numeric: tabular-nums; }
.dmv-vcards { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
              gap: 12px; margin-top: 20px; }
.dmv-vcard { padding: 14px 16px; border-radius: 10px; background: var(--dmv-zebra); }
.dmv-vcard-t { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
               color: var(--dmv-ink); }
.dmv-vcard-t > i { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.dmv-vcard-v { display: flex; align-items: baseline; gap: 5px; margin-top: 10px; }
.dmv-vcard-v > span { font-size: 20px; font-weight: 700; letter-spacing: -.02em;
                      color: var(--dmv-ink); font-variant-numeric: tabular-nums; }
.dmv-vcard-v > b { font-size: 12px; font-weight: 600; color: var(--dmv-mut); }
.dmv-vcard-d { display: flex; align-items: center; gap: 9px; margin-top: 8px; font-size: 12px;
               font-weight: 500; color: var(--dmv-mut); font-variant-numeric: tabular-nums; }
.dmv-vuoto { padding: 16px 20px; border-radius: 10px; background: var(--dm-surface-3,#f4f2ec);
             font-size: 13px; font-weight: 500; color: var(--dmv-mut); line-height: 1.5; }

.dmv-bgrid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 10px; height: 160px; }
.dmv-bcol { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 160px; }
.dmv-bcol > i { display: block; transform-origin: bottom; }

/* ============================================================
   9-10 · Per punto e confronto fra strutture
   ============================================================ */

.dmv-plist { display: flex; flex-direction: column; gap: 14px; }
.dmv-prow-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dmv-prow-n { display: block; font-size: 13px; font-weight: 700; color: var(--dmv-ink);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmv-prow-c { display: block; margin-top: 2px; font-size: 11px; font-weight: 500;
              color: var(--dmv-mut); font-variant-numeric: tabular-nums; }
.dmv-prow-v { display: block; font-size: 14px; font-weight: 700; color: var(--dmv-ink);
              font-variant-numeric: tabular-nums; }
.dmv-prow-d { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700;
              font-variant-numeric: tabular-nums; }
.dmv-prow-track { height: 8px; border-radius: 3px; background: #eef1f8; margin-top: 9px; }
.dmv-prow-track > i { display: block; height: 8px; border-radius: 3px; transform-origin: left;
                      background: var(--dmv-ink); }
.dmv-prow-s { margin-top: 6px; font-size: 11.5px; font-weight: 500; color: var(--dmv-mut);
              font-variant-numeric: tabular-nums; }

.dmv-srows { display: flex; flex-direction: column; gap: 2px; min-width: 430px; }
.dmv-srow { position: relative; display: grid; grid-template-columns: minmax(96px,1fr) 88px 66px 16px;
            gap: 10px; align-items: center; padding: 11px 12px; border-radius: 8px; }
.dmv-srow:hover { background: var(--dmv-hover) !important; }
.dmv-srow > i.ind { position: absolute; left: 0; top: 8px; bottom: 8px; width: 2.5px;
                    border-radius: 2px; background: var(--acc); }
.dmv-srow-n { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmv-srow-track { display: block; height: 6px; border-radius: 3px; background: #eef1f8; margin-top: 7px; }
.dmv-srow-track > i { display: block; height: 6px; border-radius: 3px; transform-origin: left; }
.dmv-srow-v { font-size: 13px; font-weight: 700; color: var(--dmv-ink); text-align: right;
              font-variant-numeric: tabular-nums; white-space: nowrap; }
.dmv-srow-d { font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.dmv-scroll { overflow-x: auto; }

/* ============================================================
   11 · Segnalazioni
   ============================================================ */

.dmv-alist { display: flex; flex-direction: column; gap: 2px; }
.dmv-arow { position: relative; display: grid; align-items: center; gap: 14px; padding: 13px 12px;
            border-radius: 8px; grid-template-columns: 112px minmax(0,1.05fr) minmax(0,1.5fr) 116px 14px; }
.dmv-arow:hover { background: var(--dmv-hover) !important; }
.dmv-atag { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border-radius: 6px;
            justify-self: start; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.dmv-at { display: block; font-size: 13px; font-weight: 700; color: var(--dmv-ink);
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmv-ad { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--dmv-mut);
          font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmv-am { font-size: 12.5px; font-weight: 500; color: var(--dmv-txt); line-height: 1.4; text-wrap: pretty; }
.dmv-av { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums;
          white-space: nowrap; }
.dmv-ok { padding: 16px 20px; border-radius: 10px; background: #f0fdf4; color: #15803d;
          font-size: 13px; font-weight: 600; }

/* ============================================================
   Tabella comune a tutti i commutatori
   ============================================================ */

.dmv-tbl-scroll { overflow-x: auto; }
.dmv-tbl { display: grid; align-items: center; }
.dmv-tbl > span { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
                  text-overflow: ellipsis; border-bottom: 1px solid var(--dmv-line);
                  padding: 11px 10px; font-size: 12.5px; color: var(--dmv-ink); }
.dmv-tbl > span.h { padding: 0 10px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
                    text-transform: uppercase; color: var(--dmv-mut); }
.dmv-tbl > span.r { text-align: right; }
.dmv-tbl > span.m { color: var(--dmv-mut); font-weight: 500; }
.dmv-tbl > span.t { background: var(--dmv-zebra); font-weight: 700; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1240px) {
  .dmv-cb { grid-template-columns: minmax(0,1fr); }
  .dmv-duo, .dmv-duo2 { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 1180px) {
  /* Tre colonne non ci stanno senza schiacciare il soggetto: si impila e il
     soggetto resta centrato, perche' e' il soggetto. */
  .dmv-main { grid-template-columns: minmax(0,1fr); }
  .dmv-vis-in { width: 62%; max-width: 360px; margin-left: auto; margin-right: 38%; }
  .dmv-side { flex-direction: row; flex-wrap: wrap; }
  .dmv-side > .dmv-card { flex: 1 1 260px; }
  .dmv-ctrl { width: 100%; justify-content: flex-start; margin-left: 0; }
  .dmv-cbtop { grid-template-columns: minmax(0,1fr); }
  .dmv-cbline { order: 3; }
}
@media (max-width: 900px) {
  .dmv-per { grid-template-columns: minmax(0,1fr); }
  .dmv-pad { padding: 22px 18px 24px; }
  .dmv-vis-in { width: 56%; max-width: 300px; margin-right: 44%; }
  .dmv-anno, .dmv-panel, .dmv-box, .dmv-prev, .dmv-bridge { padding-left: 18px; padding-right: 18px; }
  /* Sotto questa soglia la colonna del motivo diventa piu' stretta di due
     parole: va a capo su tutta la riga. */
  .dmv-arow { grid-template-columns: 100px minmax(0,1fr) 14px; }
  .dmv-am { grid-column: 1 / -1; }
  .dmv-av { grid-column: 1 / -1; text-align: left; }
  .dmv-cbrow { grid-template-columns: minmax(0,1fr); }
  .dmv-cbrow-r { text-align: left; }
  .dmv-plotbox, .dmv-mesi { padding-right: 34px; }
  .dmv-gl, .dmv-plot { right: 34px; }
}
@media (max-width: 640px) {
  .dmv-kpi3 { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .dmv-kpi3 > div + div { border-left: 0; border-top: 1px solid var(--dmv-line); padding-top: 12px; }
  .dmv-bars, .dmv-mesi, .dmv-bgrid { gap: 4px; }
  .dmv-qgrid { gap: 12px; }
}

@media print {
  .dmv-hero, .dmv-anno, .dmv-box, .dmv-panel, .dmv-bridge, .dmv-prev {
    box-shadow: none; border: 1px solid var(--dmv-line);
  }
  .dmv-ctrl, .dmv-tog, .dmv-tog-d, .dmv-unitpill, .dmv-help-b, .dmv-help, .dmv-goto { display: none; }
  .dmv-glow, .dmv-glow2, .dmv-waves, .dmv-tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dmv *, .dmv *::before, .dmv *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   Interazioni
   ============================================================
   Una pagina che non risponde al puntatore sembra un'immagine. Qui sotto ci
   sono solo risposte che DICONO qualcosa: dove si puo' cliccare, cosa si sta
   guardando, quale riga corrisponde a quale barra. Niente movimento che non
   risponda a una domanda — e tutto in CSS, quindi non c'e' un solo ascoltatore
   in piu' da tenere in piedi.
   ============================================================ */

/* --- il soggetto risponde al passaggio --- */
/* Avvicinarsi al disegno lo accende: la lampadina schiarisce, la fiamma tira.
   E' il modo piu' diretto per dire che quel disegno e' un indicatore e non una
   decorazione messa li' per riempire. */
.dmv-stage { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.dmv-vis-in:hover .dmv-stage { transform: scale(1.015); }
.dmv-vis-in:hover .dmv-bulb { filter: brightness(1.12) saturate(1.1)
                              drop-shadow(0 20px 38px rgba(4,12,28,.55)) !important; }
.dmv-vis-in:hover .dmv-haze, .dmv-vis-in:hover .dmv-bloom { opacity: 1; }
.dmv-flame, .dmv-bulb, .dmv-haze, .dmv-bloom { transition: opacity .45s ease, filter .45s ease; }
/* Sulla fiamma si alza l'altezza: tira di piu', come se si aprisse il
   rubinetto. Il soprassalto ha una variabile sua e non riusa --fa, che arriva
   da uno style inline e batte qualunque regola del foglio — moltiplicarla per
   se stessa, poi, sarebbe una definizione circolare. */
.dmv-flame { --fk: 1; transition: none; }
.dmv-vis-in:hover .dmv-flame { --fk: 1.07; }
.dmv-dial-arc, .dmv-dial-head { transition: filter .35s ease, opacity .35s ease; }
.dmv-vis-in:hover .dmv-dial-arc { opacity: 1; }
.dmv-vis-in:hover .dmv-dial-head { filter: drop-shadow(0 0 12px rgba(var(--acc-glow),1)); }

/* --- le colonne dell'anno portano al loro mese --- */
a.dmv-barslot { cursor: pointer; text-decoration: none;
                transition: opacity .18s ease, transform .18s ease; }
a.dmv-barslot:hover { opacity: 1 !important; transform: translateY(-2px); }
a.dmv-barslot .dmv-bar { transition: background .18s ease, box-shadow .18s ease; }
a.dmv-barslot:hover .dmv-bar { background: var(--acc) !important;
                               box-shadow: 0 0 16px -2px rgba(var(--acc-glow),.75); }
/* La colonna e' un bersaglio da tastiera come da mouse: senza questo il
   grafico esiste solo per chi usa il puntatore. */
a.dmv-barslot:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px;
                              border-radius: 6px; opacity: 1 !important; }
/* Il nome del mese si accende insieme alla sua colonna. */
.dmv-bars:has(a.dmv-barslot:hover) ~ .dmv-mesi { color: inherit; }

/* --- le due cause: passare su una spegne l'altra --- */
/* Confrontare due barre e' piu' facile se una alla volta e' in primo piano.
   La riga che si guarda resta piena, l'altra si smorza: e' lo stesso gesto
   della legenda per materia, applicato a due voci invece che a tre. */
.dmv-cbrows:hover .dmv-cbrow { opacity: .45; transition: opacity .22s ease; }
.dmv-cbrows:hover .dmv-cbrow:hover { opacity: 1; }
.dmv-cbrow-track > i.bar { transition: width .45s cubic-bezier(.16,1,.3,1),
                                       left .45s cubic-bezier(.16,1,.3,1),
                                       filter .22s ease; }
.dmv-cbrow:hover .dmv-cbrow-track > i.bar { filter: saturate(1.25) brightness(1.06); }
.dmv-cbrow:hover .dmv-cbrow-ico { background: var(--acc-chip); }
.dmv-cbrow-ico { transition: background .22s ease; }

/* --- le schede si sollevano --- */
.dmv-card, .dmv-qs > div { transition: background .22s ease, transform .22s ease,
                                       box-shadow .22s ease; }
.dmv-qs > div:hover { background: rgba(255,255,255,.07); transform: translateX(2px); }

/* --- le pillole e i selettori --- */
.dmv-winpill a, .dmv-unitpill a { transition: color .2s ease, transform .18s ease; }
.dmv-winpill a:hover, .dmv-unitpill a:hover { transform: translateY(-1px); }

/* Con il movimento ridotto restano i cambi di colore e sparisce lo
   spostamento: chi soffre di cinetosi vede comunque dove sta puntando. */
@media (prefers-reduced-motion: reduce) {
  .dmv-vis-in:hover .dmv-stage, a.dmv-barslot:hover,
  .dmv-qs > div:hover, .dmv-winpill a:hover, .dmv-unitpill a:hover { transform: none; }
}

/* ============================================================
   Tocco — v5.149.0
   ============================================================
   Misurato prima di scrivere queste righe, su una sezione vera a 390 px:
   pillole del periodo 34 px, frecce 32x25, il menu del mese 20 px di altezza,
   "vedi la scomposizione" 17. La soglia comoda per un polpastrello sta sui
   44 px, e il menu del guscio — due dita piu' su nella stessa pagina — e' gia'
   a 48. Erano due standard diversi sullo stesso schermo.

   Il difetto non era sempre la scatola: spesso la scatola era gia' alta 42 e a
   essere piccolo era l'elemento dentro, che non la riempiva. Otto pixel su
   quarantadue non facevano niente, ed e' esattamente la fascia che un dito
   prende per prima.

   La condizione e' (hover: none) and (pointer: coarse) e non una larghezza:
   un tablet grande ha un dito come un telefono, e una finestra stretta su un
   portatile ha ancora un mouse. La domanda giusta e' come si tocca, non
   quanto e' largo lo schermo. */

@media (hover: none) and (pointer: coarse) {

  /* --- i controlli della testata --- */
  /* 52 e non 48: dentro c'e' un'imbottitura di 4 px per lato, e a fare
     44 dev'essere il link, non la pillola che lo contiene. */
  .dmv-winpill { height: 52px; }
  .dmv-step, .dmv-sel { height: 48px; }
  .dmv-winpill a { align-self: stretch; padding: 0 18px; }
  .dmv-step a, .dmv-step span.off { width: 44px; height: 44px; }
  /* Il select riempie il suo contenitore: la tendina di sistema si apre
     toccando tutta la pillola, non solo la riga di testo. */
  .dmv-sel select, .dmv-step select { align-self: stretch; min-height: 44px; }
  .dmv-pick { min-height: 44px; padding: 0 8px; margin: 0 -8px; }

  /* --- i comandi dentro i blocchi --- */
  .dmv-tog, .dmv-tog-d, .dmv-help-b, .dmv-goto {
    display: inline-flex; align-items: center; min-height: 44px;
    padding-top: 0; padding-bottom: 0;
  }
  .dmv-unitpill a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; }
  .dmv-causa-h a { display: inline-flex; align-items: center; min-height: 44px; }

  /* --- quello che il puntatore rivelava --- */
  /* Senza passaggio del mouse questi stati non arrivano mai: il soggetto non
     si illumina, l'anello non si accende, le barre non si spengono intorno a
     quella puntata. Vanno spenti del tutto invece di restare regole morte, e
     la versione a riposo deve gia' bastare da sola. */
  .dmv-vis-in:hover .dmv-stage,
  .dmv-vis-in:hover .dmv-bulb,
  .dmv-vis-in:hover .dmv-flame { transform: none; filter: none; }
  .dmv-cbrows:hover .dmv-cbrow { opacity: 1; }
  /* L'anello della finestra resta acceso: era l'evidenziazione del passaggio
     a portarlo a piena opacita', e senza passaggio restava sempre smorzato. */
  .dmv-dial-arc { opacity: 1; }

  /* --- il feedback al tocco prende il posto del passaggio --- */
  /* Un dito copre quello che tocca: l'unico ritorno che si vede e' il
     movimento del bersaglio sotto il dito. */
  .dmv-tog:active, .dmv-tog-d:active, .dmv-help-b:active, .dmv-goto:active,
  .dmv-winpill a:active, .dmv-unitpill a:active, .dmv-step a:active { transform: scale(.96); }
  .dmv-tog, .dmv-tog-d, .dmv-help-b, .dmv-goto, .dmv-winpill a,
  .dmv-unitpill a, .dmv-step a { transition: transform .12s ease; }
  /* Niente lampo azzurro del sistema sopra un bersaglio che si muove gia'. */
  .dmv a, .dmv button, .dmv select { -webkit-tap-highlight-color: transparent; }
}

/* Leggibilita' su schermo stretto: le etichette maiuscole stanno a 10 px e la
   spaziatura le allarga ancora. A sessanta centimetri sono eleganti, a trenta
   in mano sono un puntino. Salgono, e la spaziatura scende per non rubare
   larghezza a una colonna che e' gia' stretta. */
@media (max-width: 640px) {
  .dmv-kic { font-size: 11.5px; letter-spacing: .1em; }
  .dmv-kpi-l, .dmv-atag, .dmv-qpart { font-size: 11.5px; }
  .dmv-causa-r > span:first-child, .dmv-causa-pct { font-size: 12px; }
}

/* ============================================================
   Telefono — il soggetto torna al centro
   ============================================================
   Sotto i 900 px il disegno era spinto a sinistra con un margine destro del
   44%, per lasciare alle due etichette lo spazio in cui appendersi. Su un
   telefono quello spazio non c'e': restava un soggetto da 210 px in un angolo
   e due etichette schiacciate contro il bordo.

   Qui le etichette scendono SOTTO il disegno, affiancate, e il soggetto si
   riprende tutta la larghezza e il centro. E' la stessa informazione — anno di
   confronto a sinistra, anno in corso a destra — letta per righe invece che
   per altezze, che su una colonna stretta e' anche piu' naturale. */
@media (max-width: 640px) {
  .dmv-vis-in { width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
  .dmv-stage { padding-bottom: 92px; }
  /* top: 100% e non bottom: 0 — con l'allineamento in basso le due etichette
     partivano da altezze diverse, perche' quella dell'anno in corso porta
     anche la pillola dello scostamento ed e' piu' alta. Ancorate in cima
     cominciano insieme. */
  .dmv-bench { top: 100%; bottom: auto; left: 0; width: 50%; padding: 14px 6px 0;
               transform: none; text-align: center; }
  .dmv-bench + .dmv-bench { left: 50%; }
  .dmv--energia .dmv-bench { left: 0; }
  .dmv--energia .dmv-bench + .dmv-bench { left: 50%; }
  .dmv-bench .dmv-pill { margin-top: 5px; }
  /* Il quadrante del gas disegna due richiami che puntano dove le etichette
     stavano prima: senza etichette da raggiungere sono due trattini nel vuoto. */
  .dmv-dial-lead { display: none; }
}

/* ============================================================
   Telefono — la testata dice la risposta, poi la mostra
   ============================================================
   Misurata prima di riscriverla, a 390 px: la testata era alta 1.677 px, cioe'
   DUE SCHERMATE intere prima del primo blocco. Dentro, nell'ordine in cui
   arrivavano: 261 px di nome e filtri, 31 di titolo che ripeteva il periodo
   gia' scritto nel filtro sopra, 43 di perimetro, 128 di scomposizione, 84 di
   nota che spiega come funziona il disegno, 45 di riferimento annuale, 428 di
   disegno, e solo alla fine i 441 delle due schede — dove stanno i numeri.

   Su un computer l'occhio prende tutto insieme e l'ordine conta poco. Su una
   colonna larga 390 l'ordine E' il racconto, e questo racconto metteva le
   risposte in fondo.

   L'ordine nuovo: chi sei e che periodo guardi, cosa e' successo in una frase,
   i numeri, il disegno che li conferma, il contesto. Niente e' stato tolto dai
   dati: quello che sparisce su telefono e' duplicato altrove o e' un manuale
   d'istruzioni del disegno.

   Si usa flex e non grid perche' con display:contents le due schede diventano
   figlie dirette e possono prendere posizioni diverse fra loro — una prima del
   disegno, l'altra dopo. */
@media (max-width: 640px) {
  .dmv-main { display: flex; flex-direction: column; gap: 22px; }
  .dmv-narr { order: 1; }
  .dmv-side { display: contents; }
  .dmv-side > [data-dmv-card="breve"] { order: 2; }
  .dmv-vis { order: 3; }
  .dmv-side > [data-dmv-card="cov"] { order: 4; }

  /* Il titolo ripeteva parola per parola la pillola del periodo, due dita piu'
     su. Il posto di testata lo prende la frase che dice cosa e' successo. */
  .dmv-narr h1 { display: none; }
  .dmv-lead { margin-top: 0; font-size: 21px; line-height: 1.24; }

  /* Ottantaquattro pixel per spiegare che la lampadina si illumina di piu' se
     si consuma di piu'. Su un computer e' una didascalia; su un telefono e' un
     blocco di testo fra chi legge e il suo numero. Il disegno si spiega da
     solo guardandolo cambiare. */
  .dmv-nota { display: none; }

  /* Il totale dell'anno di confronto e' un'ancora, non una risposta: resta nel
     blocco "L'anno", dove serve davvero. */
  .dmv-rif { display: none; }

  /* Le due etichette sotto il soggetto dicono gli stessi due numeri della
     scheda "In breve", che ora sta appena sopra. Una volta sola. */
  .dmv-bench { display: none; }
  .dmv-stage { padding-bottom: 0; }
  .dmv-vis-in { max-width: 260px; }

  /* Una pillola che dice Mese / Trimestre / Anno non ha bisogno di una parola
     che dica "Periodo": e' una riga in meno su una colonna stretta. "Confronta
     con" invece resta, perche' un 2025 da solo non vuol dire niente.

     Tre righe piene e non due strette: schiacciando il passo del periodo
     accanto all'anno di confronto, "Luglio 2026" usciva troncato in "Luglio
     20". Su una colonna da 390 px una riga in piu' costa meno di una parola
     tagliata. */
  .dmv-kic--periodo { display: none; }
  .dmv-ctrl { gap: 10px; width: 100%; }
  .dmv-winpill, .dmv-step { width: 100%; }
  .dmv-winpill a { flex: 1; justify-content: center; padding: 0; }
  .dmv-step select, .dmv-step > b { flex: 1; min-width: 0; text-align: center; }

  /* flex-basis 260 arrivava dal blocco a 1180 px, dove le schede stavano
     AFFIANCATE e 260 era una larghezza. Qui la colonna e' verticale e lo stesso
     valore diventa un'altezza: la scheda della copertura si allungava a 260 px
     con un buco in fondo. */
  .dmv-side > .dmv-card { flex: 0 0 auto; width: 100%; }
}