/* Un gráfico embebido en un artículo.
 *
 * La cargan **las dos** pantallas que lo dibujan: la página pública y el editor.
 * Es la misma razón por la que el marcado vive en una sola plantilla de Jinja —
 * lo que se ve al armar el bloque tiene que ser lo que se publica, y dos hojas
 * distintas se separan igual que se separan dos plantillas.
 *
 * Todo va anidado bajo `.grafico` y con valores propios, sin apoyarse en las
 * variables de ninguna de las dos hojas. Así gana por especificidad sobre las
 * reglas de `.reparto__*` que `app.css` ya tiene para el panel, y no depende del
 * orden en que se carguen los archivos: adentro de un artículo el gráfico se ve
 * igual en los dos lados, siempre.
 */

.grafico {
  margin: 2.5rem 0;
  padding: 0;
}

/* El título del gráfico, del tamaño de un subtítulo del artículo.
 *
 * A 1,0625 rem quedaba del mismo cuerpo que el texto corrido: no se leía como
 * el título de nada, competía con los párrafos de al lado y se perdía. A 1,25
 * —el mismo que un `h3`— encabeza su figura sin discutirle a los títulos de
 * sección, que están en 1,75. */
/* **El selector lleva `figure.grafico` a propósito, y no es redundante.**
 *
 * `app.css` tiene `.bloque__cuerpo p` para el texto de un bloque del editor, y
 * eso pesa más que una clase sola. El título y el pie de un gráfico son `<p>`,
 * así que adentro del editor la regla genérica les ganaba y les imponía el
 * cuerpo y el color del texto corrido: el mismo gráfico se veía de una forma en
 * el modal y de otra en la página. Con `figure.grafico` delante, la hoja del
 * gráfico gana en las dos, y sin depender de en qué orden se carguen. */
figure.grafico .grafico__titulo {
  margin: 0 0 1.25rem;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #0b1c26;
}

/* Varias series lado a lado: la manera barata de comparar dos alertas son dos
   dibujos iguales, no un gráfico nuevo que superponga curvas. Se apilan solas
   cuando no caben. */
.grafico__series {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .grafico__series[data-cuantas="2"],
  .grafico__series[data-cuantas="3"],
  .grafico__series[data-cuantas="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
  }
}

/* De cuándo son los números y de qué alerta salieron.
 *
 * **Una nota al pie, no un rótulo.** Antes esto eran dos bloques de versalitas
 * con tracking abierto —el nombre de la alerta arriba y el detalle abajo, en
 * tres renglones— y juntos pesaban más que el dibujo que venían a explicar. La
 * voz de instrumento de la marca es para un dato que se lee; esto es una
 * referencia que se consulta si se duda, así que va en la letra del texto, más
 * chica y en gris.
 *
 * Sigue estando porque no es un adorno: un total que no cuadra con el resto del
 * artículo se explica casi siempre por un filtro puesto, y si el gráfico no lo
 * dice nadie lo encuentra. Lo que se puede es elegir qué partes decir. */
figure.grafico .grafico__pie {
  margin: 0.75rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid #dde5ea;
  /* **La familia se declara, no se hereda.**
   *
   * Esta hoja la cargan las dos pantallas, y sin decir la letra el pie tomaba
   * la de donde cayera: serif en el artículo publicado y sans en el modal del
   * editor. O sea que la vista previa mostraba algo distinto de lo que se
   * publicaba, que es justo lo que esta hoja compartida existe para impedir.
   * La del artículo, porque el artículo es la verdad. */
  font-family: "Plex Serif", Georgia, "Times New Roman", serif;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #8096a5;
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

/* --- la evolución, dibujada en el navegador --------------------------------- */

/* Alto de sobra: a 240 px las etiquetas de los ejes quedaban contra el borde
   del lienzo, y un gráfico apretado se lee peor que uno con aire. */
.grafico .lienzo {
  width: 100%;
  height: 300px;
}

.grafico noscript svg,
.grafico svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- el reparto, dibujado en el servidor ------------------------------------
 *
 * Las mismas medidas que en el panel, repetidas acá a propósito: `app.css` no
 * se carga en la página pública, y anidarlas bajo `.grafico` las hace ganar en
 * el editor, que sí la carga. */

.grafico .reparto__barra {
  display: flex;
  height: 1.875rem;
  border-radius: 3px;
  overflow: hidden;
  /* El contorno es para el extremo claro de la rampa: sin él, el último trozo
     se apoya contra el fondo y la barra parece terminar antes. */
  box-shadow: inset 0 0 0 1px rgb(11 28 38 / 0.08);
}

.grafico .reparto__trozo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Un trozo del 0,4 % existe igual: es un hilo, pero está. */
  min-width: 2px;
}

.grafico .reparto__trozo b {
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.grafico .reparto__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  list-style: none;
  margin: 0.625rem 0 0;
  padding: 0;
  font-size: 0.75rem;
}

/* La identidad va acá y no adentro de la barra: en un trozo del 3 % no cabe un
   nombre, y medio nombre recortado es peor que ninguno. */
.grafico .reparto__clave {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  color: #3c5a6b;
  text-decoration: none;
}

.grafico .reparto__clave i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgb(11 28 38 / 0.08);
}

.grafico .reparto__clave b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #0b1c26;
}

.grafico .reparto__clave em {
  font-style: normal;
  color: #6b8494;
  font-variant-numeric: tabular-nums;
}