/* ============================================================
   Sezione Fotovoltaico. Dipende da frontend.css solo per le variabili
   --dm-*; ogni valore ha il proprio fallback, quindi il foglio funziona
   anche da solo.
   ============================================================ */

.dmfv-hero,.dmfv-ben,.dmfv-kpis,.dmfv-sect-h,.dmfv-nota{
  --fv-ink:var(--dm-heading,#0f2244);
  --fv-mut:var(--dm-text-muted,#66708a);
  --fv-line:var(--dm-border,#e6e9f0);
}

/* ---------- Intestazione di sezione ---------- */

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

/* ---------- Hero ---------- */

.dmfv-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);
}
.dmfv-glow{position:absolute;pointer-events:none;border-radius:50%}
.dmfv-glow.a{
  left:-6%;top:-24%;width:52%;height:120%;
  background:radial-gradient(closest-side, rgba(195,236,46,.16) 0%, rgba(195,236,46,0) 100%);
  animation:dmfvGlow 19s ease-in-out infinite;
}
.dmfv-glow.b{
  right:-10%;bottom:-30%;width:46%;height:110%;
  background:radial-gradient(closest-side, rgba(47,109,184,.22) 0%, rgba(47,109,184,0) 100%);
  animation:dmfvGlow2 23s ease-in-out infinite;
}
@keyframes dmfvGlow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:translate3d(2%,-4%,0) scale(1.1)}}
@keyframes dmfvGlow2{0%,100%{opacity:.5;transform:scale(1.06)}50%{opacity:.95;transform:translate3d(-3%,3%,0) scale(1)}}

.dmfv-pad{position:relative;padding:24px 30px 26px}
.dmfv-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px 26px;flex-wrap:wrap}
.dmfv-id{display:flex;align-items:flex-start;gap:13px;min-width:0}
.dmfv-ico{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:30px;height:30px;border-radius:9px;background:rgba(195,236,46,.14);margin-top:2px;
}
.dmfv-name{font-size:22px;line-height:1.1;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#ffffff}
.dmfv-sub{margin-top:5px;font-size:13px;font-weight:600;color:#9fb4d4}
.dmfv-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.dmfv-main{
  display:grid;gap:24px 28px;margin-top:20px;align-items:start;
  grid-template-columns:minmax(0,.85fr) minmax(360px,1.7fr) minmax(0,.8fr);
}
.dmfv-narr h1{margin:0;font-size:clamp(28px,3vw,40px);line-height:1.04;font-weight:700;letter-spacing:-.032em;color:#ffffff}
.dmfv-headline{margin-top:13px;font-size:clamp(16px,1.4vw,19px);line-height:1.3;font-weight:700;letter-spacing:-.018em;color:#ffffff;text-wrap:pretty}
.dmfv-narr p{margin:10px 0 0;font-size:13px;line-height:1.6;font-weight:500;color:#a8bcd8;text-wrap:pretty}

/* ---------- La scena ----------
   Foto e tracciati riempiono lo STESSO palco, che ha esattamente le
   proporzioni della foto: entrambi lo mappano linearmente, quindi non
   possono scollarsi. Il ritaglio lo fa il riquadro esterno sul palco
   intero, non sui due separatamente. */

.dmfv-vis{position:relative;display:flex;flex-direction:column;min-width:0}
.dmfv-scene{
  position:relative;overflow:hidden;border-radius:12px;background:#f2eeed;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px -18px rgba(4,12,28,.7);
  flex:1;min-height:340px;
}
.dmfv-stage{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  aspect-ratio:1600 / 988;min-width:100%;min-height:100%;
}
.dmfv-stage>img{display:block;width:100%;height:100%;object-fit:fill}
.dmfv-flows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Luce che scorre DENTRO il cavo: un tratto nitido largo quanto il tubo, con
   dietro una scia larga e appena percettibile. pathLength normalizzato a 1000,
   cosi' l'impulso ha la stessa lunghezza apparente su tracciati di lunghezza
   diversa, e la velocita' resta proporzionale ai kWh. */
.dmfv-soft,.dmfv-lit{
  animation-name:dmfvRun;animation-timing-function:linear;
  animation-iteration-count:infinite;animation-duration:var(--dmfv-d,3s);
}
.dmfv-soft{stroke-dasharray:150 850;opacity:.14}
.dmfv-lit{stroke-dasharray:70 930;opacity:.9}
@keyframes dmfvRun{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}

.dmfv-flow{transition:opacity .22s ease}
.dmfv-scene:hover .dmfv-flow{opacity:.3}
.dmfv-hero[data-dmfv-on] .dmfv-flow{opacity:.3}
.dmfv-hero[data-dmfv-on="auto"] .dmfv-flow[data-flow="auto"],
.dmfv-hero[data-dmfv-on="imm"]  .dmfv-flow[data-flow="imm"],
.dmfv-hero[data-dmfv-on="prel"] .dmfv-flow[data-flow="prel"]{opacity:1}
.dmfv-hero[data-dmfv-on="auto"] .dmfv-flow[data-flow="auto"] .dmfv-soft,
.dmfv-hero[data-dmfv-on="imm"]  .dmfv-flow[data-flow="imm"]  .dmfv-soft,
.dmfv-hero[data-dmfv-on="prel"] .dmfv-flow[data-flow="prel"] .dmfv-soft{opacity:.3}

/* ---------- Etichette sulla scena ---------- */

.dmfv-lbls{position:absolute;inset:0;pointer-events:none}
.dmfv-lbl{position:absolute;pointer-events:auto;transition:transform .22s ease;border-radius:8px}
.dmfv-lbl:hover{transform:translateY(-2px)}
.dmfv-lbl:focus-visible{outline:2px solid var(--fv-ink);outline-offset:4px}
.dmfv-lbl[data-pos="tl"]{left:3%;top:4%}
.dmfv-lbl[data-pos="tr"]{left:45%;top:4%}
.dmfv-lbl[data-pos="bl"]{left:3%;bottom:4%}
.dmfv-lbl[data-pos="br"]{left:42%;bottom:4%}
.dmfv-lbl-h{
  display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fv-mut);
}
.dmfv-lbl-h i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dmfv-lbl-v{
  margin-top:5px;font-size:26px;line-height:1.05;font-weight:700;
  letter-spacing:-.03em;color:var(--fv-ink);font-variant-numeric:tabular-nums;
}
.dmfv-lbl-v b{margin-left:4px;font-size:13px;font-weight:600;color:var(--fv-mut)}
.dmfv-lbl-d{margin-top:4px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fv-mut)}
.dmfv-lbl-d.up{color:var(--dm-danger,#dc2626)}
.dmfv-lbl-d.down{color:var(--dm-success,#16a34a)}
.dmfv-lbl-d span{font-weight:500;color:var(--fv-mut)}

/* ---------- Note laterali ---------- */

.dmfv-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.dmfv-note{border:1px solid rgba(255,255,255,.13);border-radius:13px;background:#102a4e;padding:15px 16px;min-width:0}
.dmfv-note-t{font-size:12.5px;font-weight:700;color:#ffffff}
.dmfv-note-s{margin-top:7px;font-size:11.5px;font-weight:500;line-height:1.55;color:#9fb4d4;text-wrap:pretty}

/* ---------- KPI ---------- */

.dmfv-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.dmfv-kpi{
  position:relative;overflow:hidden;padding:17px 18px 15px;border-radius:12px;
  background:var(--dm-card,#ffffff);
  box-shadow:0 1px 2px rgba(15,34,68,.05), 0 10px 26px -10px rgba(15,34,68,.12);
  transition:transform .22s ease,box-shadow .22s ease;
}
.dmfv-kpi:hover{transform:translateY(-2px);box-shadow:0 3px 6px rgba(15,34,68,.06), 0 18px 40px -12px rgba(15,34,68,.18)}
/* Il tondo sborda dall'angolo per disegno: chiuso in un contenitore che lo
   ritaglia, lo sconfinamento non risale alla scheda e non la fa risultare
   piu' larga del proprio riquadro. */
.dmfv-kpi-blob{position:absolute;inset:0;overflow:hidden;border-radius:12px;pointer-events:none}
.dmfv-kpi-blob>i{position:absolute;right:-28px;top:-28px;width:82px;height:82px;border-radius:50%;opacity:.07}
.dmfv-kpi-l{position:relative;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fv-mut);text-wrap:pretty}
.dmfv-kpi-v{position:relative;display:flex;align-items:baseline;gap:4px;margin-top:10px;min-width:0}
.dmfv-kpi-v span{font-size:25px;line-height:1.1;font-weight:700;letter-spacing:-.025em;color:var(--fv-ink);font-variant-numeric:tabular-nums}
.dmfv-kpi-v b{font-size:12px;font-weight:600;color:var(--fv-mut)}
.dmfv-kpi-bar{position:relative;display:flex;gap:2px;height:7px;margin-top:12px}
.dmfv-kpi-bar>i{height:7px;border-radius:2px;transform-origin:left}
.dmfv-kpi-bar>i.rest{flex:1;opacity:.28}
.dmfv-kpi-leg{
  position:relative;display:flex;justify-content:space-between;gap:10px;
  margin-top:7px;font-size:10.5px;font-weight:600;color:var(--fv-mut);
}
.dmfv-kpi-leg span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmfv-kpi-leg span:last-child{text-align:right}
.dmfv-kpi-leg.one{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmfv-kpi-s{position:relative;margin-top:9px;font-size:11.5px;font-weight:500;color:var(--fv-mut);line-height:1.4;text-wrap:pretty}
.dmfv-spark{position:relative;height:30px;margin-top:11px}
.dmfv-spark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dmfv-dot{position:absolute;left:100%;width:7px;height:7px;margin:0 0 -3.5px -5px;border-radius:50%;transition:transform .22s ease}
.dmfv-kpi:hover .dmfv-dot{transform:scale(1.5)}

/* ---------- Beneficio economico ---------- */

.dmfv-ben{
  border-radius:12px;background:var(--dm-card,#ffffff);padding:22px 24px 20px;
  box-shadow:0 1px 2px rgba(15,34,68,.05), 0 12px 32px -12px rgba(15,34,68,.14);
}
.dmfv-cap{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fv-mut)}
.dmfv-ben-tot{display:flex;align-items:baseline;gap:8px;margin-top:10px;flex-wrap:wrap}
.dmfv-ben-tot>span:first-child{font-size:34px;line-height:1.05;font-weight:700;letter-spacing:-.03em;color:var(--fv-ink);font-variant-numeric:tabular-nums}
.dmfv-ben-tot>em{font-style:normal;font-size:16px;font-weight:600;color:var(--fv-mut)}
.dmfv-pill{padding:4px 9px;border-radius:7px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Sul fotovoltaico il beneficio in crescita e' una buona notizia: la semantica
   e' rovesciata rispetto alla spesa, e i colori la seguono. */
.dmfv-pill.up{background:#e9f7ee;color:var(--dm-success,#16a34a)}
.dmfv-pill.down{background:#fdecec;color:var(--dm-danger,#dc2626)}
.dmfv-ben-rows{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.dmfv-ben-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 110px;gap:6px 14px;align-items:center}
.dmfv-ben-l{font-size:13px;font-weight:600;color:var(--fv-ink)}
.dmfv-ben-l b{margin-left:6px;font-size:11px;font-weight:600;color:var(--fv-mut)}
.dmfv-ben-bar{height:8px;border-radius:4px;background:#f4f2ec;overflow:hidden}
.dmfv-ben-bar>i{display:block;height:8px;border-radius:4px;transform-origin:left}
.dmfv-ben-v{font-size:14px;font-weight:700;text-align:right;color:var(--fv-ink);font-variant-numeric:tabular-nums}
.dmfv-ben-f{grid-column:1 / -1;font-size:11.5px;font-weight:500;color:var(--fv-mut);font-variant-numeric:tabular-nums}

/* ---------- Animazioni d'ingresso ----------
   Le regole ci sono, ma e' il JS che le assegna: un fill-mode backwards
   dichiarato qui lascerebbe il blocco invisibile in stampa e in PDF. */

@keyframes dmfvUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dmfvFade{from{opacity:0}to{opacity:1}}
@keyframes dmfvFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dmfvRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- Responsive ---------- */

@media (max-width:1240px){
  .dmfv-main{grid-template-columns:minmax(0,1fr) minmax(340px,1.6fr)}
  .dmfv-side{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
  /* Base minima: a colonna stretta tre schede affiancate diventano tre strisce
     con dentro dei paragrafi. Con la base vanno a capo da sole. */
  .dmfv-side>div{flex:1 1 240px}
}
@media (max-width:1060px){
  .dmfv-main{grid-template-columns:1fr;gap:22px}
  .dmfv-vis{max-width:760px;margin:0 auto;width:100%}
  .dmfv-scene{min-height:0;aspect-ratio:1600 / 988}
  .dmfv-pad{padding:22px 18px 24px}
  .dmfv-ctrl{width:100%}
}
@media (max-width:760px){
  .dmfv-kpis{grid-template-columns:1fr}
  .dmfv-lbl-v{font-size:19px}
  .dmfv-lbl-h{font-size:9.5px}
  .dmfv-ben-row{grid-template-columns:minmax(0,1fr) 100px}
  .dmfv-ben-bar{grid-column:1 / -1;order:3}
  .dmfv-ben-f{order:4}
}

@media print{
  .dmfv-soft,.dmfv-lit,.dmfv-glow{animation:none}
  .dmfv-hero,.dmfv-ben,.dmfv-kpi{box-shadow:none;border:1px solid var(--fv-line)}
}
@media (prefers-reduced-motion: reduce){
  .dmfv-soft,.dmfv-lit{display:none}
  .dmfv-glow{animation:none}
  .dmfv-hero *,.dmfv-ben *,.dmfv-kpi{transition:none !important}
}

/* v5.141.0 — La frase "senza impianto / con l'impianto" sotto il beneficio.
   Non sta nel modulo perche' non e' una riga del calcolo: e' la traduzione
   del totale in una cosa che il cliente puo' ripetere a voce. */
.dmfv-nota{
  margin-top:12px;padding:13px 15px;border-radius:11px;
  background:var(--dm-surface-2,#f6f7fa);border:1px solid var(--fv-line);
  font-size:12.5px;font-weight:500;line-height:1.6;color:var(--fv-mut);text-wrap:pretty;
}
.dmfv-nota b{font-weight:700;color:var(--fv-ink)}