/* mx-afore — infografías en HTML.
 *
 * ── POR QUÉ EXISTE ESTE ARCHIVO ────────────────────────────────────────────────────────────
 * Las figuras del sitio eran SVG de coordenadas absolutas (720px de ancho, texto de 11-13px).
 * Un SVG así escala como una imagen: su texto NO refluye. En un teléfono sólo quedaban dos
 * salidas y las dos malas — encogerlo hasta que el texto cae a 6px, o dejarlo a tamaño y pedir
 * scroll lateral, que es lo que hacía `.fig__box svg.fig--wide{min-width:640px}` en app.css.
 * Rehechas en HTML, las mismas cajas y conectores se reacomodan solos a cualquier ancho.
 *
 * Van en su propia hoja y no en app.css porque son ~30 bloques y app.css ya sostiene el
 * sistema entero; separarlas mantiene legible a los dos. Se carga después de rediseno.css.
 *
 * ── REGLAS DE LA CASA ──────────────────────────────────────────────────────────────────────
 * 1. NUNCA cifras inventadas. Donde el SVG usaba barras o bloques de relleno para no publicar
 *    un dato que no tenemos, el HTML hace lo mismo (y ese relleno va aria-hidden).
 * 2. El texto de la figura es texto de verdad: seleccionable, traducible e indexable. Por eso
 *    estas figuras usan sb_figure_html() y NO llevan role="img" ni alt — el alt taparía el
 *    contenido para el lector de pantalla y además lo duplicaría.
 * 3. Nada de anchos fijos en px para los contenedores. Rejillas con minmax() y auto-fit, o
 *    flex con wrap. Los px sólo para cosas que no deben crecer (discos, iconos, filetes).
 * 4. Cuando un bloque cambia de color de fondo, revisar qué reglas GLOBALES siguen pintando su
 *    texto. `strong{color:var(--brand-d)}` de app.css:100 ya provocó azul-sobre-azul dentro de
 *    una banda de marca (contraste 1,38:1). Es el error más repetido de este repo.
 * 5. Los colores salen de los tokens de app.css (--brand, --brand-l, --accent, --warn…), nunca
 *    hexadecimales sueltos: las figuras tienen que seguir al tema.
 * ───────────────────────────────────────────────────────────────────────────────────────────
 */

/* ============================================================
   Piezas compartidas por varias figuras
   ============================================================ */

/* Título y bajada internos de una figura. Casi todas los tienen: en el SVG eran los dos <text>
   de arriba de todo. */
.figh__t{margin:0;font-size:16.5px;font-weight:800;color:var(--brand-d);line-height:1.3}
.figh__st{margin:5px 0 18px;font-size:13.5px;color:var(--muted);line-height:1.5}
.figh__pie{margin:18px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* Disco numerado. El mismo objeto que marca un punto del dibujo y encabeza su explicación: es
   lo único que ata una cosa con la otra, así que se usa idéntico en los dos sitios. */
.figh__n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;
  height:22px;border-radius:50%;background:var(--brand);color:#fff;
  font:800 12px/1 var(--font);font-variant-numeric:tabular-nums}
.figh__n--claro{background:#fff;color:var(--brand-d)}
/* --accent-t y no --accent: el disco lleva texto blanco de 12px, o sea texto normal para WCAG
   (pide 4,5:1). El verde base da 3,0:1 y el oscuro 4,0:1; sólo éste llega, con 5,0:1. Es el
   mismo motivo por el que --accent-t existe en app.css, y la razón de que este modificador NO
   coincida con el verde del CTA del header. */
.figh__n--ok{background:var(--accent-t)}
.figh__n--warn{background:var(--warn)}
.figh__n--alt{background:var(--brand-l)}

/* Lista de notas numeradas al costado de un dibujo. */
.figh__notas{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.figh__notas li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
.figh__notas p{margin:0;font-size:13.5px;line-height:1.5;color:var(--soft)}

/* Rejilla de tarjetas de figura: el arquetipo más común (3-4 cajas con título y texto). auto-fit
   + minmax es lo que hace que pase de 4 columnas a 1 sin una sola media query. */
.figh__cajas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.figh__caja{border:1px solid var(--border);border-radius:12px;padding:14px 15px;
  background:var(--surface-alt)}
.figh__caja h4{margin:0 0 5px;font-size:14.5px;font-weight:800;color:var(--brand-d);
  line-height:1.3}
.figh__caja p{margin:0;font-size:13px;line-height:1.5;color:var(--soft)}
/* El acento de la caja lo pone cada figura con --fc, igual que .arbol usa --gc. */
.figh__caja--acento{border-color:var(--fc,var(--brand));border-left-width:4px}

/* Paso de una secuencia (líneas de tiempo y flujos). El conector vertical se dibuja con un
   ::before y no con un elemento: así no hay nada que reposicionar cuando el texto envuelve. */
.figh__pasos{list-style:none;margin:0;padding:0;display:grid;gap:0}
.figh__paso{position:relative;display:grid;grid-template-columns:22px 1fr;gap:12px;
  padding:0 0 18px}
.figh__paso:last-child{padding-bottom:0}
.figh__paso::before{content:"";position:absolute;left:10px;top:24px;bottom:0;width:2px;
  background:var(--border);border-radius:1px}
.figh__paso:last-child::before{display:none}
.figh__paso h4{margin:0 0 3px;font-size:14.5px;font-weight:800;color:var(--brand-d);
  line-height:1.35}
.figh__paso p{margin:0;font-size:13px;line-height:1.5;color:var(--soft)}

/* Dos columnas que se comparan (antes/después, sí/no, igual/cambia). */
.figh__duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}

/* Barra proporcional para figuras que ilustran reparto SIN publicar cifras. El ancho va en el
   style inline de cada <i> porque es dato de la figura, no del tema.
   display:block explícito: sin él, montada sobre un <span> —que es lo natural cuando la barra
   va dentro de una fila de texto— el elemento queda inline y ni el alto ni el fondo pintan; la
   barra desaparece y sólo se ve el relleno flotando sobre nada. */
.figh__barra{display:block;height:10px;border-radius:5px;background:var(--border-2);
  overflow:hidden}
.figh__barra i{display:block;height:100%;border-radius:5px;background:var(--brand-l)}

@media (max-width:720px){
  .figh__t{font-size:15.5px}
  .figh__cajas{grid-template-columns:1fr}
}