/*!
 * sn-charts.css — Marco del gráfico dentro de la grilla del informe.
 *
 * El autor del informe no escribe CSS de gráficos: sólo declara
 * `data-sn-col-span` en la <figure>. El alto sale de `data-sn-chart-ratio`,
 * nunca de un valor en píxeles, para que ningún gráfico quede descolocado
 * respecto de los módulos vecinos.
 */

.sn-chart {
  /* Encaja en la misma grilla de 12 columnas que el resto de los módulos. */
  grid-column: span var(--sn-col-span, 12);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 18px 20px 16px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--rule, #e5edf1);
  border-radius: 14px;
  min-width: 0; /* sin esto, un SVG ancho revienta la columna de la grilla */
}

.sn-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
  min-width: 0;
}

.sn-chart-title {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink, #132c3a);
  min-width: 0;
  overflow-wrap: break-word;
}

/* Leyenda HTML en el encabezado del módulo, nunca dentro del área de trazado. */
.sn-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.76rem;
  color: var(--muted, #4a5f6b);
}

.sn-chart-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sn-chart-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/*
 * El gráfico se ajusta por completo en escritorio. Sólo el teléfono habilita
 * un carril horizontal cuando el ancho mínimo legible supera la tarjeta.
 */
.sn-chart-scroll {
  min-width: 0;
  overflow: visible;
}

/* El alto lo fija la proporción, que sn-charts.js escribe desde el contrato. */
.sn-chart-plot {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1.8;
}

.sn-chart-plot svg {
  display: block;
  max-width: 100%;
}

.sn-chart-takeaway {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted, #4a5f6b);
  border-top: 1px solid var(--rule-soft, #edf2f4);
  padding-top: 10px;
  text-wrap: pretty;
}

/*
 * Tabla de respaldo: accesible para lector de pantalla y comparable por el
 * auditor contra lo dibujado. Oculta a la vista sin salir del DOM ni del
 * árbol de accesibilidad (nunca `display:none`).
 */
.sn-chart-table {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Un gráfico fuera de contrato se ve. No se degrada en silencio. */
.sn-chart-error {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: #fff7f7;
  border: 1px solid #bf4a4a;
  border-radius: 10px;
  color: #8f3636;
  font-size: 0.84rem;
  line-height: 1.5;
}

.sn-chart-error strong {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sn-chart-error p {
  margin: 0;
  overflow-wrap: break-word;
}

/*
 * Teléfonos: la tarjeta ocupa el ancho completo y el gráfico NO cambia de
 * proporción ni se comprime — conserva un ancho mínimo legible y se desplaza
 * horizontalmente dentro de su carril. Los formatos que entran naturalmente
 * en el ancho del teléfono (donut, cuadrado, ranking horizontal) no
 * necesitan mínimo y por lo tanto no generan scroll.
 */
@media screen and (max-width: 560px) {
  body:not(.sn-print-document) .sn-chart {
    grid-column: 1 / -1;
    padding: 14px 14px 12px;
  }

  body:not(.sn-print-document) .sn-chart-plot[data-sn-ratio="wide"] {
    min-width: 560px;
  }

  body:not(.sn-print-document) .sn-chart-plot[data-sn-ratio="standard"] {
    min-width: 470px;
  }

  body:not(.sn-print-document) .sn-chart-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  /* Un gráfico en error no dibuja nada: su aviso debe leerse sin desplazar. */
  body:not(.sn-print-document) figure[data-sn-chart-error] .sn-chart-plot {
    min-width: 0;
    aspect-ratio: auto;
  }
}

/*
 * Impresión: el SVG se rasteriza mal si el navegador escala la caja, así que
 * se fija el ancho disponible y se prohíbe partir el módulo entre páginas.
 */
@media print {
  .sn-chart {
    break-inside: avoid;
    page-break-inside: avoid;
    border-color: #cbdde5;
  }
  .sn-chart-plot {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-chart * {
    animation: none !important;
    transition: none !important;
  }
}