/* I grafici: hairline vere, griglia quasi invisibile, un solo accento.
   Tutto in variabili: il foglio di stampa li ribalta da solo. */

.grafico {
  display: block;
  width: 100%;
  overflow: visible;
}

/* le linee non si deformano quando l'SVG viene scalato in larghezza */
.grafico path, .grafico line, .grafico circle {
  vector-effect: non-scaling-stroke;
}

.g-linea {
  fill: none;
  stroke: var(--ambra);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* i due tracciati sovrapposti: il dato grezzo e' sottile e nervoso,
   la lettura del trend e' a gradini e in ambra */
.g-linea-dato {
  fill: none;
  stroke: var(--tratto-dato);
  stroke-width: 1;
  stroke-linejoin: round;
}
.g-linea-gradini {
  fill: none;
  stroke: var(--ambra);
  stroke-width: 1.5;
  stroke-linejoin: miter;
}

.g-tacca {
  fill: var(--testo-4);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.g-linea-confronto {
  fill: none;
  stroke: var(--testo-4);
  stroke-width: 1;
  stroke-linejoin: round;
}

.g-griglia {
  stroke: var(--griglia);
  stroke-width: 1;
}

.g-soglia {
  stroke: var(--testo-4);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.g-punto { fill: var(--ambra); }
.g-punto-piccolo { fill: var(--ambra); opacity: 0.55; }

.g-barra { fill: var(--testo-4); }
.g-barra-forte { fill: var(--ambra); }

.g-etichetta {
  fill: var(--testo-4);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sparkline { height: 44px; }
.andamento { height: 260px; }

.legenda { display: flex; gap: var(--s2); }
.legenda-voce { gap: 6px; }
.tratto {
  width: 14px; height: 0;
  border-top: 1px solid var(--tratto-dato);
  display: inline-block;
}
.tratto-chiave { border-top: 1.5px solid var(--ambra); }