/* Versione INTERATTIVA del coroplético Mundiales.
   Stato iniziale = identico alla statica (mappa larga + titolo + annotazione México).
   Sull'hover: l'annotazione svanisce, panel con bar chart asistencia compare.
   Filosofia: menos es más. NO bordi. NO box. */

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

#stage {
  position: relative;
  width: 1400px;
  height: 660px;
  margin: 0 auto;
}
#map { position: absolute; top: 60px; left: 0; width: 1000px; height: 600px; display: block; }

/* Titolo come overlay HTML (più libero di posizionare di Plotly title) */
#title {
  position: absolute;
  top: 56px;
  left: 280px;
  margin: 0;
  font-family: Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #000;
  z-index: 5;
  white-space: nowrap;
}
#title b { font-weight: 800; }

/* Legenda (stessa della statica) — sotto il continente americano */
#legend {
  position: absolute;
  top: 430px; left: 200px;
  background: rgba(0,0,0,0);
  padding: 0;
  border: none;
  font-size: 13px;
  z-index: 7;          /* sopra mappa e (quando visibile) sotto info-panel */
  color: #222;
  transition: opacity 0.18s;
}
#legend h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #222; }
.legend-item { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: #222; }
.color-box { width: 16px; height: 16px; border: 1px solid #aaa; }

/* Panel hover: FISSO a destra della mappa. Niente bordi, niente sfondo.
   Mostrato solo durante l'hover. */
#info-panel {
  position: absolute;
  top: 210px; left: 950px;
  width: 360px;
  z-index: 6;
  display: none;     /* uso display per evitare problemi di rendering Plotly su opacity:0 */
}
#info-panel.visible { display: block; }

#info-panel .ip-country {
  font-size: 22px; font-weight: 800; color: #6a3d9a;
  margin-bottom: 2px; min-height: 26px;
  line-height: 1.15;
}
#info-panel .ip-years {
  font-size: 13px; color: #555;
  margin-bottom: 10px;
  font-style: italic;
  min-height: 18px;
}

#attendance-chart {
  width: 100%; height: 240px;
}