: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; }
/* Ratio base tomado de CHART 920x520 */
.viz-root {
  --w: 920;
  --h: 520;
  position: relative;
  width: 100%;
  aspect-ratio: var(--w) / var(--h);
}
.viz-root > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Fallback si el contexto ignora aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .viz-root {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: calc(var(--h) / var(--w) * 100%);
  }
  .viz-root > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
}

/* Tablet: más alto si hace falta */
@media (max-width: 1024px) {
  .viz-root { aspect-ratio: 4 / 3; }
  @supports not (aspect-ratio: 1 / 1) {
    .viz-root { padding-bottom: calc(3 / 4 * 100%); }
  }
}

/* Mobile: portrait y tipografías un toque más chicas */
@media (max-width: 767px) {
  .viz-root { aspect-ratio: 3 / 4; }
  @supports not (aspect-ratio: 1 / 1) {
    .viz-root { padding-bottom: calc(4 / 3 * 100%); }
  }
  .x-axis text, .y-axis text { font-size: 10px; }
  svg .right-labels { display: none; } 
}
.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; }