:root{
     --bg:#fff; --fg:#111827; --muted:#6b7280; 
 }

*{
    box-sizing:border-box; 
}
html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif; }
main.page{ max-width:94%; margin:2% auto; padding:0 16px; }
h1{ font-size:20px; line-height:1.2; margin:8px 0 14px; }
.viz-root {
  position: relative;
  width: 100%;
  /* Desktop/base ratio taken from CHART 920x520 */
  aspect-ratio: 920 / 520;
}
.viz-root > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
@supports not (aspect-ratio: 1 / 1) {
  .viz-root {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: calc(520 / 920 * 100%);
  }
  .viz-root > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
}
.is-dimmed{ opacity:.2; }
.is-hovered{ opacity:1; filter:saturate(1.15); }
.d3-tooltip{ box-shadow:0 6px 18px rgba(0,0,0,.18); max-width:280px; }
.x-axis text,.y-axis text{ 
    fill:#4b5563; font-size:12px; 
}

@media (max-width: 1024px) {
  /* Aumenta altura relativa en tablet si hace falta */
  .viz-root { aspect-ratio: 4 / 3; }
  @supports not (aspect-ratio: 1 / 1) {
    .viz-root { padding-bottom: calc(3 / 4 * 100%); }
  }
}
@media (max-width: 767px) {
  /* Aún más alto en mobile (portrait). Ajustá si sobra o falta altura */
  .viz-root { aspect-ratio: 3 / 4; }
  @supports not (aspect-ratio: 1 / 1) {
    .viz-root { padding-bottom: calc(4 / 3 * 100%); }
  }
  /* Tipografía más chica para ejes */
  .x-axis text, .y-axis text { font-size: 10px; }
  /* Si las etiquetas derechas invaden, se pueden ocultar en mobile */
  /* svg .right-labels { display: none; } */
}