/* Versione INTERATTIVA del consumo per regione.
   Stato iniziale = identico alla versione statica (titolo + mappa + SVG contesto).
   Sull'hover: SVG contesto svanisce, panel graphicacy compare al suo posto.
   Filosofia: menos es más. NO bordi. NO box. */

html, body { background: #fff; margin: 0; padding: 0; font-family: Arial, sans-serif; color: #222; }
body { overflow-x: auto; }

#stage {
  position: relative;
  width: 1100px;
  height: 820px;
  margin: 0 auto;
}

h1 {
  position: absolute;
  top: 30px; left: 60px;
  margin: 0; padding: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  z-index: 10;
}

#mapa {
  position: absolute;
  top: 20px; left: 380px;
  width: 560px; height: 780px;
}

/* SVG contesto: stato iniziale (identico alla statica). Svanisce su hover. */
#contexto {
  position: absolute;
  top: 200px; left: 50px;
  width: 420px; height: auto;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.18s;
}

/* Detail panel: stato di hover. Compare quando #contexto svanisce.
   NIENTE bordi, NIENTE sfondo. Stessa area del contesto. */
#info-panel {
  position: absolute;
  top: 215px; left: 50px;
  width: 320px;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}
#info-panel.visible { opacity: 1; }

.ip-region {
  font-size: 24px; font-weight: 800; color: #b3502a;
  margin-bottom: 6px;
  line-height: 1.15;
}
.ip-pop {
  font-size: 13px; color: #555;
  margin-bottom: 22px;
  font-style: italic;
}

.ip-bar-frame {
  width: 100%; height: 22px;
  background: #f0e8e5;
  position: relative;
  overflow: hidden;
}
.ip-bar {
  height: 100%; width: 0%;
  background: linear-gradient(to right, #fdcab5, #e34a33, #67001f);
  transition: width 0.18s ease-out;
}
.ip-bar-axis {
  display: flex; justify-content: space-between;
  font-size: 11px; color: #888;
  font-family: monospace;
  margin-top: 4px;
  margin-bottom: 14px;
}
.ip-comparison {
  font-size: 13px; color: #444;
}
.ip-comparison span {
  font-weight: 800; font-size: 18px; color: #b3502a;
  font-family: monospace;
}

footer {
  position: absolute;
  bottom: 20px; left: 60px;
  font-size: 12px; color: #777;
}
footer a { color: #b3502a; }