/* ============================================================
   Fotovoltaico — la vista cliente, dal prototipo Fotovoltaico.dc.html
   ============================================================
   Sette blocchi: testata con la scena dei flussi, nota di perimetro,
   KPI d'impianto, come si compone il beneficio, l'anno, beneficio per
   anno, da inizio anno.

   La semantica e' rovesciata rispetto alle altre sezioni: qui un beneficio
   che cresce e' una buona notizia, quindi il verde e' l'aumento. Le classi
   .up/.down delle altre sezioni non si riusano.
   ============================================================ */

.fvv {
  --fvv-ink: var(--dm-heading, #0f2244);
  --fvv-txt: var(--dm-text, #3c4760);
  --fvv-mut: var(--dm-text-muted, #66708a);
  --fvv-line: var(--dm-border, #e6e9f0);
  --fvv-card: 0 1px 2px rgba(15,34,68,.05), 0 12px 32px -12px rgba(15,34,68,.14);
  --fvv-card-hi: 0 3px 6px rgba(15,34,68,.06), 0 18px 40px -12px rgba(15,34,68,.18);
  /* v5.148.0 — Torna il lime: e' il colore del Fotovoltaico nel marchio, e
     l'ambra della 5.147.0 non stava in nessuna tavolozza di Kesva. Questi sono
     i valori di sicurezza; quelli veri li stampa il PHP sul contenitore .fvv
     leggendoli dal registro (includes/class-dm-icone.php). */
  --fvv-prod: #c3ec2e; --fvv-auto: #8db600; --fvv-imm: #2f6db8; --fvv-prel: #0f2244;
  overflow-x: clip;
}

.fvv-sect { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.fvv-sect > i { width: 3px; height: 15px; border-radius: 2px; background: var(--fvv-prod); }
.fvv-sect > span { font-size: 11px; font-weight: 700; letter-spacing: .14em;
                   text-transform: uppercase; color: var(--fvv-ink); }
.fvv-sect > b { flex: 1; height: 1px; background: var(--fvv-line); }

.fvv-perim { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
             border-radius: 10px; background: var(--dm-surface-3,#f4f2ec);
             font-size: 12.5px; font-weight: 500; color: var(--fvv-mut); line-height: 1.5; }
.fvv-perim svg { flex-shrink: 0; }
.fvv-perim b { color: var(--fvv-ink); font-weight: 700; }

/* ============================================================
   1 · Testata con la scena
   ============================================================ */

.fvv-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); }
.fvv-bg { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(118% 128% at 50% 14%, #16345d 0%, #0e2a4e 44%, #0b1a35 100%); }
.fvv-core { position: absolute; left: 30%; top: -14%; width: 44%; height: 122%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(195,236,46,.16) 0%, rgba(47,109,184,.1) 50%, rgba(11,26,53,0) 100%); }
.fvv-glow  { position: absolute; left: 6%; top: -24%; width: 34%; height: 94%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214,243,106,.12) 0%, rgba(214,243,106,0) 100%);
  animation: fvvGlow 19s ease-in-out infinite; }
.fvv-glow2 { position: absolute; right: 4%; bottom: -20%; width: 38%; height: 90%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(195,236,46,.11) 0%, rgba(195,236,46,0) 100%);
  animation: fvvGlow 27s ease-in-out infinite reverse; }
@keyframes fvvGlow { 0%,100% { opacity: .78; transform: none }
                     50%     { opacity: 1; transform: translateY(-9px) scale(1.04) } }

.fvv-pad { position: relative; padding: 24px 30px 26px; }
.fvv-top { display: flex; align-items: flex-start; justify-content: space-between;
           gap: 18px 26px; flex-wrap: wrap; }
.fvv-id { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.fvv-id-ico { flex-shrink: 0; margin-top: 2px; filter: drop-shadow(0 0 12px rgba(195,236,46,.45)); }
.fvv-id-lab { font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: .05em;
              text-transform: uppercase; color: #ffffff; }
.fvv-id-sub { display: flex; align-items: center; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.fvv-id-sep { font-size: 13px; font-weight: 600; color: #5f7a9e; }

.fvv-ctrl { display: flex; align-items: center; justify-content: flex-end;
            gap: 10px 14px; flex-wrap: wrap; }
.fvv-ctrl-g { display: flex; align-items: center; gap: 10px; }
.fvv-ctrl-sep { width: 1px; align-self: stretch; min-height: 26px;
                background: rgba(255,255,255,.16); }

/* Il pulsante di .dmr-cta e' navy pieno con testo bianco: su una testata navy
   spariva nel fondo. Qui e' di vetro, col bordo a fare il lavoro che faceva il
   riempimento. Fuori dalla testata la regola non esiste e riepilogo.css resta
   quello che e'. */
.fvv-ctrl-a { display: flex; align-items: center; gap: 9px; }
.fvv-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;
}
.fvv-ctrl-a .dmr-cta:hover { background: rgba(255,255,255,.18); color: #ffffff; }
.fvv-ctrl-a .dmr-cta.is-locked { opacity: .5; }
.fvv-kic { font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
           color: #7d93b5; white-space: nowrap; }
/* Le pillole scorrono invece di saltare: si vede da dove viene la selezione. */
.fvv-pill { position: relative; display: flex; height: 36px; padding: 3px; border-radius: 10px;
            background: rgba(255,255,255,.07); }
.fvv-pill > i { position: absolute; top: 3px; bottom: 3px; border-radius: 8px; background: #ffffff;
                transition: left .3s cubic-bezier(.16,1,.3,1); }
.fvv-pill--acc > i { background: var(--fvv-prod); }
.fvv-pill a { position: relative; z-index: 1; display: inline-flex; align-items: center;
              padding: 0 14px; font-size: 12.5px; font-weight: 700; text-decoration: none;
              transition: color .2s ease; white-space: nowrap; }
.fvv-sel { display: inline-flex; align-items: center; height: 36px; padding: 0 3px;
           border-radius: 10px; background: rgba(255,255,255,.07); max-width: 100%; }
.fvv-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; max-width: 210px; text-overflow: ellipsis; }
.fvv-sel svg { margin-right: 8px; pointer-events: none; flex-shrink: 0; }
.fvv-pick { position: relative; display: inline-flex; align-items: center; gap: 5px;
            padding: 2px 6px; border-radius: 6px; font-size: 13px; font-weight: 600;
            color: #9fb4d4; max-width: 100%; transition: color .2s ease, background .2s ease; }
.fvv-pick:hover { color: #ffffff; background: rgba(255,255,255,.08); }
.fvv-pick > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fvv-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
                   cursor: pointer; font-family: inherit; font-size: 13px; }
.fvv-sel select option, .fvv-pick select option { color: #0f2244; background: #ffffff; }

.fvv-narr { margin-top: 22px; }
.fvv-narr h1 { margin: 0; font-size: clamp(28px,2.8vw,40px); line-height: 1.03; font-weight: 700;
               letter-spacing: -.034em; color: #ffffff; }
.fvv-lead { margin-top: 11px; font-size: clamp(16px,1.4vw,20px); line-height: 1.28; font-weight: 700;
            letter-spacing: -.018em; color: #ffffff; text-wrap: pretty; }

.fvv-main { display: grid; gap: 24px 30px; margin-top: 22px;
            grid-template-columns: minmax(0,1.6fr) minmax(280px,.9fr); }

/* La scena: foto e tracciati riempiono lo stesso contenitore, che ha le
   proporzioni della foto. Se si desse object-fit:cover all'immagine e
   preserveAspectRatio all'SVG le due mappature coinciderebbero solo quando il
   riquadro ha esattamente quelle proporzioni: a ogni altra forma i flussi
   scivolerebbero via dai cavi. */
.fvv-scene { position: relative; background: #f2eeed; border: 1px solid rgba(255,255,255,.14);
             border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(4,12,28,.7); overflow: hidden; }
.fvv-stage { position: relative; aspect-ratio: 1600 / 988; }
.fvv-stage img { display: block; width: 100%; height: 100%; object-fit: fill; }
.fvv-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* La luce corre DENTRO il cavo: un tratto nitido largo quanto il tubo, con
   dietro una scia appena percettibile. pathLength normalizzato a 1000 perche'
   l'impulso abbia la stessa lunghezza apparente sui tre cavi. */
.fvv-soft { opacity: .18; }
.fvv-lit { stroke-dasharray: 26 974; animation: fvvRun var(--pvd,3s) linear infinite; }
@keyframes fvvRun { from { stroke-dashoffset: 1000 } to { stroke-dashoffset: 0 } }
.fvv-lbl { position: absolute; cursor: default; white-space: nowrap; z-index: 2; }
.fvv-lbl-k { display: flex; align-items: center; gap: 7px; font-size: 9.5px; font-weight: 700;
             letter-spacing: .13em; text-transform: uppercase; color: #5b6472; }
.fvv-lbl-k > i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
                 box-shadow: 0 0 0 3px rgba(242,238,237,.75); }
.fvv-lbl-v { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; }
.fvv-lbl-v > span { font-size: clamp(18px,1.7vw,26px); line-height: 1.1; font-weight: 700;
                    letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: #09183c;
                    text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.fvv-lbl-v > b { font-size: 12px; font-weight: 600; color: #5b6472; }
.fvv-lbl-d { margin-top: 3px; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fvv-lbl-d em { font-style: normal; font-weight: 500; color: #7c8595; }

.fvv-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fvv-card { border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: #102a4e;
            padding: 15px 16px; min-width: 0; }
.fvv-card-t { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700;
              color: #ffffff; }
.fvv-dot { position: relative; width: 7px; height: 7px; border-radius: 50%;
           background: var(--fvv-prod); flex-shrink: 0; }
.fvv-dot > i { position: absolute; inset: -4px; border-radius: 50%; background: var(--fvv-prod);
               animation: fvvPulse 2.6s ease-in-out infinite; }
@keyframes fvvPulse { 0%,100% { opacity: .35; transform: scale(.7) }
                      50%     { opacity: 0;   transform: scale(1.5) } }
.fvv-ben-v { display: flex; align-items: baseline; gap: 6px; margin-top: 13px; flex-wrap: wrap; }
.fvv-ben-v > span { font-size: 32px; line-height: 1.05; font-weight: 700; letter-spacing: -.035em;
                    font-variant-numeric: tabular-nums; color: #ffffff; }
.fvv-ben-v > b { font-size: 16px; font-weight: 600; color: var(--fvv-prod); }
.fvv-ben-d { display: flex; align-items: center; gap: 9px; margin-top: 11px; flex-wrap: wrap;
             font-size: 12px; font-weight: 500; color: #9fb4d4; }
.fvv-chip { padding: 4px 9px; border-radius: 7px; font-size: 12px; font-weight: 700;
            font-variant-numeric: tabular-nums; white-space: nowrap; }
.fvv-benrows { margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.11);
               display: flex; flex-direction: column; gap: 10px; }
.fvv-benrow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.fvv-benrow > span { min-width: 0; font-size: 12px; font-weight: 500; color: #9fb4d4;
                     display: flex; align-items: center; gap: 7px; line-height: 1.35; }
.fvv-benrow > span > i { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.fvv-benrow > b { font-size: 13.5px; font-weight: 700; color: #ffffff;
                  font-variant-numeric: tabular-nums; white-space: nowrap; }
.fvv-cardnote { margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.11);
                font-size: 12px; font-weight: 500; line-height: 1.55; color: #a8bcd8; text-wrap: pretty; }
.fvv-ringrow { display: flex; align-items: center; gap: 14px; margin-top: 13px; }
.fvv-ringbox { position: relative; display: inline-flex; align-items: center; justify-content: center;
               flex-shrink: 0; width: 64px; height: 64px; }
.fvv-ringbox svg { position: absolute; inset: 0; }
.fvv-ringbox svg circle { transition: stroke-dasharray .7s cubic-bezier(.22,1,.3,1); }
.fvv-ringbox > span { position: relative; font-size: 13px; font-weight: 700; color: #ffffff;
                      font-variant-numeric: tabular-nums; }
.fvv-card-lab { font-size: 13px; font-weight: 700; color: #ffffff; }
.fvv-card-sub { margin-top: 4px; font-size: 11.5px; font-weight: 500; line-height: 1.5;
                color: #9fb4d4; text-wrap: pretty; }
.fvv-nota { display: flex; gap: 11px; padding: 12px 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; }
.fvv-nota svg { flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   2 · KPI d'impianto
   ============================================================ */

.fvv-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.fvv-kpi { position: relative; overflow: hidden; padding: 17px 18px 15px; border-radius: 12px;
           background: #ffffff; box-shadow: 0 1px 2px rgba(15,34,68,.05), 0 10px 26px -10px rgba(15,34,68,.12);
           transition: box-shadow .26s ease, transform .26s ease; }
.fvv-kpi:hover { box-shadow: var(--fvv-card-hi); transform: translateY(-2px); }
.fvv-kpi-blob { position: absolute; right: -28px; top: -28px; width: 82px; height: 82px;
                border-radius: 50%; opacity: .07; pointer-events: none; }
.fvv-kpi-l { position: relative; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
             text-transform: uppercase; color: var(--fvv-mut); text-wrap: pretty; }
.fvv-kpi-v { position: relative; display: flex; align-items: baseline; gap: 4px; margin-top: 10px; }
.fvv-kpi-v > span { font-size: 25px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em;
                    color: var(--fvv-ink); font-variant-numeric: tabular-nums; }
.fvv-kpi-v > b { font-size: 12px; font-weight: 600; color: var(--fvv-mut); }
.fvv-kpi-bar { position: relative; display: flex; gap: 2px; height: 7px; margin-top: 12px; }
.fvv-kpi-bar > i { height: 7px; border-radius: 2px; transform-origin: left; }
.fvv-kpi-bar > i.rest { flex: 1; opacity: .28; }
.fvv-kpi-leg { position: relative; display: flex; justify-content: space-between; gap: 10px;
               margin-top: 7px; font-size: 10.5px; font-weight: 600; color: var(--fvv-mut); }
.fvv-kpi-leg > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fvv-kpi-leg > span:last-child { text-align: right; }
.fvv-kpi-spark { position: relative; height: 30px; margin-top: 11px; }
.fvv-kpi-spark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fvv-kpi-dot { position: absolute; left: 100%; width: 7px; height: 7px; margin: -3.5px 0 0 -5px;
               border-radius: 50%; }
.fvv-kpi-s { position: relative; margin-top: 9px; font-size: 11.5px; font-weight: 500;
             color: var(--fvv-mut); line-height: 1.4; text-wrap: pretty; }

/* ============================================================
   3 · Come si compone il beneficio
   ============================================================ */

.fvv-panel { border-radius: 12px; background: #ffffff; box-shadow: var(--fvv-card);
             padding: 24px 28px 20px; }
.fvv-panel-h { display: flex; align-items: flex-start; justify-content: space-between;
               gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.fvv-cap { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
           color: var(--fvv-mut); }
.fvv-story { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--fvv-mut);
             max-width: 660px; text-wrap: pretty; }
.fvv-help-b { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 0;
              border-radius: 8px; background: var(--dm-surface-3,#f4f2ec); color: var(--fvv-ink);
              font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.fvv-help-b:hover { background: #e8e5db; }
.fvv-help { margin-bottom: 20px; padding: 20px 22px; border-radius: 12px; background: #0f2244;
            color: #d7e0f0; font-size: 12.5px; font-weight: 500; line-height: 1.6; }
.fvv-help[hidden] { display: none; }
.fvv-help-t { display: flex; align-items: flex-start; justify-content: space-between;
              gap: 14px; margin-bottom: 12px; }
.fvv-help-t > span { font-size: 13.5px; font-weight: 700; color: #ffffff; }
.fvv-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; }
.fvv-help p { margin: 0 0 12px; }
.fvv-help p:last-child { margin: 0; color: #a9b7d0; }
.fvv-help-r { display: flex; gap: 10px; margin-bottom: 9px; }
.fvv-help-r > i { flex-shrink: 0; width: 8px; height: 8px; margin-top: 6px; border-radius: 2px; }
.fvv-help b { color: #ffffff; }
.fvv-help-sep { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }

.fvv-sav { display: flex; flex-direction: column; gap: 2px; }
.fvv-savrow { position: relative; display: grid;
              grid-template-columns: minmax(150px,1.5fr) minmax(0,1fr) 128px;
              gap: 16px; align-items: center; padding: 14px 12px; border-radius: 8px; }
.fvv-savrow:hover { background: #f1f4fa !important; }
.fvv-savrow > i.ind { position: absolute; left: 0; top: 9px; bottom: 9px; width: 2.5px; border-radius: 2px; }
.fvv-sav-l { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700;
             color: var(--fvv-ink); }
.fvv-sav-l > i { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.fvv-sav-l em { font-style: normal; font-weight: 500; color: var(--fvv-mut); }
.fvv-sav-f { display: block; margin-top: 4px; padding-left: 15px; font-size: 11.5px;
             font-weight: 500; color: var(--fvv-mut); font-variant-numeric: tabular-nums; }
.fvv-sav-track { display: block; height: 8px; border-radius: 3px; background: #eef1f8; }
.fvv-sav-track > i { display: block; height: 8px; border-radius: 3px; transform-origin: left; }
.fvv-sav-v { text-align: right; font-size: 16px; font-weight: 700; color: var(--fvv-ink);
             font-variant-numeric: tabular-nums; white-space: nowrap; }
.fvv-sav-tot { display: grid; grid-template-columns: minmax(150px,1.5fr) minmax(0,1fr) 128px;
               gap: 16px; align-items: center; padding: 16px 12px 4px; margin-top: 6px;
               border-top: 1px solid var(--fvv-line); }
.fvv-sav-tot > span:first-child { font-size: 13px; font-weight: 700; color: var(--fvv-ink); }
.fvv-sav-tot > span:last-child { text-align: right; font-size: 19px; font-weight: 700;
                                 color: var(--fvv-ink); font-variant-numeric: tabular-nums; }
.fvv-senza { margin-top: 16px; padding: 14px 16px; border-radius: 10px;
             background: var(--dm-surface-3,#f4f2ec); font-size: 13px; font-weight: 500;
             color: var(--fvv-mut); line-height: 1.5; }
.fvv-senza b { color: var(--fvv-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================
   4 · L'anno
   ============================================================
   Il grafico dell'anno qui sta su fondo bianco, mentre nelle sezioni materia
   sta sul navy. Non e' una variante del foglio di quelle: cambiano tutte le
   tinte, dai reticoli alle etichette, e un unico blocco con due palette
   avrebbe voluto dire un override per ogni riga. Sono due disegni. */

.fvv-yh { display: flex; align-items: flex-start; justify-content: space-between;
          gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.fvv-read { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--fvv-mut);
            font-variant-numeric: tabular-nums; }
.fvv-read b { color: var(--fvv-ink); font-weight: 700; }
.fvv-yh-r { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fvv-leg { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 600;
           color: var(--fvv-mut); flex-wrap: wrap; }
.fvv-leg span { display: inline-flex; align-items: center; gap: 6px; }
.fvv-leg i { width: 8px; height: 8px; border-radius: 2px; }
.fvv-leg i.dash { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed #8fa0bf; }
.fvv-unitpill { position: relative; display: flex; padding: 3px; border-radius: 9px;
                background: var(--dm-surface-3,#f4f2ec); }
.fvv-unitpill > i { position: absolute; top: 3px; bottom: 3px; border-radius: 7px;
                    background: var(--fvv-ink); transition: left .4s cubic-bezier(.16,1,.3,1); }
.fvv-unitpill a { position: relative; z-index: 1; padding: 6px 13px; font-size: 12px;
                  font-weight: 700; text-decoration: none; }

.fvv-plotbox { position: relative; height: 236px; padding-right: 56px; }
.fvv-gl { position: absolute; left: 0; right: 56px; height: 1px; }
.fvv-ax { position: absolute; right: 0; font-size: 11px; font-weight: 600;
          color: var(--fvv-mut); font-variant-numeric: tabular-nums; }
.fvv-plot { position: absolute; left: 0; right: 56px; top: 0; bottom: 0; cursor: crosshair; }
.fvv-bars { position: absolute; inset: 0; display: grid;
            grid-template-columns: repeat(12,minmax(0,1fr)); gap: 10px; align-items: end; }
.fvv-slot { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
            height: 100%; transition: opacity .2s ease; }
/* Le porzioni della pila hanno origine in basso: crescono dal loro appoggio,
   non dal centro, altrimenti la pila si scompone durante l'ingresso. */
.fvv-seg { transform-origin: bottom; }
.fvv-ysvg { position: absolute; inset: 0; width: 100%; height: 100%;
            pointer-events: none; overflow: visible; }
.fvv-cross { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
.fvv-cross > i { position: absolute; left: -.5px; top: 0; bottom: 0; width: 1px;
                 background: var(--fvv-ink); opacity: .2; }
.fvv-cross[hidden] { display: none; }
.fvv-mesi { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 10px;
            padding-right: 56px; padding-top: 9px; }
.fvv-mesi > div { text-align: center; font-size: 11px; font-weight: 600; color: var(--fvv-mut); }
.fvv-mesi > div.on { font-weight: 700; color: var(--fvv-ink); }
.fvv-slot:hover .fvv-tip { opacity: 1; }

.fvv-tblwrap { overflow-x: auto; }
.fvv-tbl { display: grid; align-items: center; }
.fvv-tbl > span { padding: 9px 10px; font-size: 12.5px; font-weight: 600; color: var(--fvv-txt);
                  border-bottom: 1px solid #f0f2f6; font-variant-numeric: tabular-nums;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fvv-tbl > span.h { font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
                    text-transform: uppercase; color: var(--fvv-mut);
                    border-bottom: 1px solid var(--fvv-line); }
.fvv-tbl > span.r { text-align: right; }
.fvv-tbl > span.m { color: var(--fvv-mut); font-weight: 500; }
.fvv-tbl > span.t { font-weight: 700; color: var(--fvv-ink);
                    background: var(--dm-surface-3,#f4f2ec); border-bottom: 0; }

/* ============================================================
   5 · Beneficio per anno
   ============================================================ */

.fvv-duo { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 22px; }
.fvv-anni-h, .fvv-anno-r { display: grid;
  grid-template-columns: minmax(120px,1.1fr) minmax(0,1.5fr) 110px 110px 104px; gap: 14px; }
.fvv-anni-h { padding: 0 2px 9px; border-bottom: 1px solid var(--fvv-line); }
.fvv-anni-h > span { font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
                     text-transform: uppercase; color: var(--fvv-mut); }
.fvv-anni-h > span:nth-child(n+3) { text-align: right; }
.fvv-anno-r { align-items: center; padding: 13px 2px; border-bottom: 1px solid #f0f2f6; }
.fvv-anno-lab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fvv-anno-lab > span { font-size: 16px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fvv-incorso { padding: 2px 7px; border-radius: 5px; background: #fdf3e3; font-size: 10px;
               font-weight: 700; color: #8a5a06; white-space: nowrap; }
/* Le dodici tacche: quante ne sono caricate. Un anno a 7/12 non si confronta
   con uno chiuso, e la tacca lo dice senza doverlo scrivere. */
.fvv-ticks { display: flex; gap: 1.5px; }
.fvv-ticks > i { width: 4px; height: 10px; border-radius: 1px; }
.fvv-anno-cov { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.fvv-anno-cov > span:last-child { font-size: 10.5px; font-weight: 600; color: var(--fvv-mut);
                                  font-variant-numeric: tabular-nums; white-space: nowrap; }
.fvv-anno-bar { position: relative; min-width: 0; }
.fvv-anno-bar > div { height: 20px; border-radius: 4px; background: var(--dm-surface-3,#f4f2ec);
                      overflow: hidden; }
.fvv-anno-bar > div > i { display: block; height: 20px; border-radius: 4px; transform-origin: left; }
.fvv-anno-tot { font-size: 15px; font-weight: 700; text-align: right;
                font-variant-numeric: tabular-nums; white-space: nowrap; }
.fvv-anno-med { font-size: 13px; font-weight: 600; text-align: right; color: var(--fvv-txt);
                font-variant-numeric: tabular-nums; white-space: nowrap; }
.fvv-anno-d { text-align: right; white-space: nowrap; }
.fvv-anno-d > span:first-child { display: block; font-size: 12.5px; font-weight: 700;
                                 font-variant-numeric: tabular-nums; }
.fvv-anno-d > span + span { display: block; margin-top: 2px; font-size: 10px; font-weight: 600;
                            color: var(--fvv-mut); }
.fvv-anni-nota { display: flex; gap: 10px; margin-top: 16px; padding: 11px 13px; border-radius: 9px;
                 background: #f6fbe4; font-size: 12px; font-weight: 500; line-height: 1.5;
                 color: var(--fvv-txt); text-wrap: pretty; }
.fvv-anni-nota svg { flex-shrink: 0; margin-top: 1px; }
.fvv-anni-nota b { color: var(--fvv-ink); font-weight: 700; }

/* ============================================================
   6 · Da inizio anno
   ============================================================ */

.fvv-ytd { border-radius: 12px; background: #ffffff; box-shadow: var(--fvv-card);
           padding: 24px 26px 22px; }
.fvv-ytd-v { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.fvv-ytd-v > span:first-child { font-size: 38px; line-height: 1.02; font-weight: 700;
                                letter-spacing: -.035em; color: var(--fvv-ink);
                                font-variant-numeric: tabular-nums; }
.fvv-ytd-v > b { font-size: 17px; font-weight: 600; color: var(--fvv-mut); }
.fvv-ytd-sub { margin-top: 8px; font-size: 12.5px; font-weight: 500; color: var(--fvv-mut);
               font-variant-numeric: tabular-nums; }
.fvv-ytd-b { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--fvv-line); }
.fvv-mix { display: flex; gap: 3px; height: 26px; margin-top: 11px; transform-origin: left; }
.fvv-mixseg { position: relative; display: flex; align-items: center; justify-content: center;
              height: 26px; border-radius: 5px; min-width: 2px; }
.fvv-mixseg > span:first-child { font-size: 11px; font-weight: 700; color: #ffffff;
                                 font-variant-numeric: tabular-nums; white-space: nowrap; }
.fvv-mixleg { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; }
.fvv-mixleg > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fvv-mixleg span.l { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0;
                     font-size: 12.5px; font-weight: 600; color: var(--fvv-ink); }
.fvv-mixleg span.l > i { flex-shrink: 0; width: 8px; height: 8px; border-radius: 2px;
                         transform: translateY(-1px); }
.fvv-mixleg span.l b { font-weight: 500; color: var(--fvv-mut); }
.fvv-mixleg span.v { font-size: 13px; font-weight: 700; color: var(--fvv-ink);
                     font-variant-numeric: tabular-nums; white-space: nowrap; }
.fvv-en { display: flex; flex-direction: column; margin-top: 6px; }
.fvv-en > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
                padding: 11px 0; border-bottom: 1px solid var(--fvv-line); }
.fvv-en > div:last-child { border-bottom: 0; }
.fvv-en span.l { min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--fvv-txt); }
.fvv-en span.v { text-align: right; white-space: nowrap; }
.fvv-en span.v > span { font-size: 14px; font-weight: 700; color: var(--fvv-ink);
                        font-variant-numeric: tabular-nums; }
.fvv-en span.v > em { margin-left: 8px; font-style: normal; font-size: 11.5px; font-weight: 700;
                      font-variant-numeric: tabular-nums; }

.fvv-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
           margin-bottom: 9px; padding: 8px 11px; border-radius: 9px; background: var(--fvv-ink);
           color: #ffffff; font-size: 11.5px; font-weight: 500; line-height: 1.5; width: max-content;
           max-width: 230px; z-index: 6; font-variant-numeric: tabular-nums; opacity: 0;
           pointer-events: none; transition: opacity .18s ease; }
.fvv-anno-bar:hover .fvv-tip, .fvv-mixseg:hover .fvv-tip { opacity: 1; }

.fvv-tog { padding: 7px 13px; border: 0; border-radius: 8px; background: var(--dm-surface-3,#f4f2ec);
           color: var(--fvv-ink); font-size: 12px; font-weight: 700; text-decoration: none;
           display: inline-block; white-space: nowrap; }
.fvv-tog:hover { background: #e8e5db; color: var(--fvv-ink); }

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

@media (max-width: 1240px) {
  .fvv-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fvv-duo { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 1060px) {
  .fvv-main { grid-template-columns: minmax(0,1fr); }
  .fvv-side { flex-direction: row; flex-wrap: wrap; }
  .fvv-side > * { flex: 1 1 260px; }
  .fvv-ctrl { width: 100%; }
}
@media (max-width: 900px) {
  .fvv-pad { padding: 22px 18px 24px; }
  .fvv-panel, .fvv-ytd { padding-left: 18px; padding-right: 18px; }
  /* Sotto questa larghezza le etichette sulla foto si accavallano: la scena
     resta, i numeri vanno sotto in una riga propria. */
  .fvv-lbl { position: static; display: inline-block; margin: 0 14px 10px 0; }
  .fvv-lbls-fallback { padding: 12px 14px; background: #f2eeed; }
  .fvv-savrow, .fvv-sav-tot { grid-template-columns: minmax(0,1fr) 110px; }
  .fvv-sav-track { grid-column: 1 / -1; }
  .fvv-anni-h { display: none; }
  .fvv-anno-r { grid-template-columns: minmax(0,1fr) 104px; }
  .fvv-anno-bar { grid-column: 1 / -1; }
  .fvv-anno-med { display: none; }
  /* Dodici colonne e un'asse a destra non stanno in 900px: l'asse se ne va e
     le colonne si stringono, perche' la forma dell'anno si legge lo stesso. */
  .fvv-plotbox, .fvv-mesi { padding-right: 34px; }
  .fvv-gl, .fvv-plot { right: 34px; }
  .fvv-bars, .fvv-mesi { gap: 4px; }
}
@media (max-width: 640px) {
  .fvv-kpis { grid-template-columns: minmax(0,1fr); }
}

@media print {
  .fvv-hero, .fvv-panel, .fvv-ytd, .fvv-kpi { box-shadow: none; border: 1px solid var(--fvv-line); }
  .fvv-ctrl, .fvv-tog, .fvv-help-b, .fvv-help, .fvv-unitpill { display: none; }
  .fvv-glow, .fvv-glow2, .fvv-tip { display: none; }
  /* In stampa il flusso animato diventa un tratteggio fermo in una posizione
     qualsiasi: resta il tracciato pieno, che dice la stessa cosa. */
  .fvv-lit { display: none; }
  .fvv-soft { opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .fvv *, .fvv *::before, .fvv *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   Tocco — v5.149.0
   ============================================================
   Nove pillole dell'unita' a 30 px, cinque toggle a 32, due pulsanti di aiuto
   a 32. Stessa soglia e stessa condizione delle altre sezioni: si guarda come
   si tocca, non quanto e' largo lo schermo. */

@media (hover: none) and (pointer: coarse) {
  .fvv-sel { height: 46px; }
  .fvv-sel select { align-self: stretch; min-height: 44px; }
  .fvv-unitpill a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; }
  .fvv-tog, .fvv-help-b { display: inline-flex; align-items: center; min-height: 44px;
                          padding-top: 0; padding-bottom: 0; }

  .fvv-tog:active, .fvv-help-b:active, .fvv-unitpill a:active { transform: scale(.96); }
  .fvv-tog, .fvv-help-b, .fvv-unitpill a { transition: transform .12s ease; }
  .fvv a, .fvv button, .fvv select { -webkit-tap-highlight-color: transparent; }
}

@media (max-width: 640px) {
  .fvv-kic { font-size: 11px; letter-spacing: .1em; }
  .fvv-kpi-l { font-size: 11.5px; letter-spacing: .06em; }
  .fvv-lbl-d em, .fvv-kpi-leg > span, .fvv-anni-h > span,
  .fvv-anno-cov > span:last-child, .fvv-anno-d > span + span,
  .fvv-anno-cov > span, .fvv-anno-d span,
  .fvv-tbl > span.h { font-size: 11.5px; letter-spacing: .06em; }
}