/* ==========================================================================
   41-dashboard-machine-grafico.css
   Proposito: tamano y comportamiento responsive del grafico principal de Machine.
   Impacto: contenedores plot-quad / square-plot.
   ========================================================================== */

/* Contenedor del grafico: usa el maximo espacio disponible sin deformar */
.plot-quad,
.square-plot {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  flex: 0 0 auto;
  align-self: flex-start;
  position: relative;
  max-height: calc(100svh - 72px);
}

/* El dcc.Graph rellena el contenedor */
.plot-quad > *,
.square-plot > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Fallback para navegadores sin aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .plot-quad,
  .square-plot {
    height: auto;
  }
  .plot-quad::before,
  .square-plot::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
  .plot-quad > *,
  .square-plot > * {
    position: absolute;
    inset: 0;
  }
}

/* En pantallas bajas, 4:3 para no ocupar demasiado alto */
@media (max-height: 680px) {
  .plot-quad,
  .square-plot {
    aspect-ratio: 4 / 3;
    max-height: calc(100svh - 60px);
  }
}

/* Compacta el padding del card contenedor */
.ml-graph-card {
  padding: 0 !important;
}
.ml-graph-card .card-body {
  padding: 6px 8px !important;
}