/* 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; }
  /* (Opcional) ocultar etiquetas derechas si invaden */
  svg .right-labels { display: none; }
}