/* mx-afore — las dos figuras de la calculadora de pensión (/calculadora-de-pension) * * ── QUÉ TIENEN DE DISTINTO ESTAS DOS ─────────────────────────────────────────────────────── * El resto de las figuras del sitio son diagramas: cajas con texto que se rehacen en HTML y * listo. Estas dos son DATOS CALCULADOS y, sobre todo, datos VIVOS: calc-pension.js las * repinta enteras cada vez que la persona toca un control, y lo hace con setAttribute sobre * los nodos del SVG (x, width, y, height) contra una geometría que tiene hardcodeada. Sobre * un
, setAttribute('width', …) no hace absolutamente nada: el dibujo se quedaría con * las proporciones del escenario de ejemplo mientras los montos de al lado cambian. Por eso * acá no se pasó todo a HTML, y por eso hay dos tratamientos distintos: * * 01 · Composición → HÍBRIDA. Texto (título, total, cuatro columnas) en HTML, que refluye; * la barra apilada sigue en SVG porque es lo que el JS mueve por geometría. El JS la * sigue actualizando igual: los nodos de texto los toca con textContent, que funciona * en un

lo mismo que en un . * 02 · Crecimiento → SVG ENTERO. Es una serie de cinco cortes de edad y el mensaje es la * geometría (cuánto sube la columna, cuánto verde le come al azul); una lista de * tarjetas no dice eso. Se le quitó `fig--wide` —el min-width:640px de app.css:763 que * forzaba scroll lateral— y la legibilidad se arregla por el otro lado: la tipografía. * * ── EL TRUCO DE LAS FUENTES (vale para las dos) ──────────────────────────────────────────── * Dentro de un SVG con viewBox, `font-size` está en UNIDADES DEL VIEWBOX: el texto escala con * el dibujo. Un 13px sobre un lienzo de 720 se ve 13px en escritorio y 6,4px en un teléfono * de 412 — que es exactamente el problema. Así que el tamaño sube por breakpoint a medida que * la figura se achica, para que el tamaño EN PANTALLA quede parejo: * * ancho de pantalla escala aprox. unidades se ve como * ≥ 900px 0,92 16 ~15px * ≤ 720px 0,77 20 ~15px * ≤ 560px 0,60 25 ~15px * ≤ 430px 0,49 28 ~14px * * Corolario que hay que respetar al tocar el PHP: **ni un style="font-size:…" inline en estas * figuras**, porque un style inline le gana a cualquier media query y deja el texto clavado * en 13px. Los tamaños viven acá y sólo acá. * * Las piezas compartidas (.figh__t, .figh__cajas, .figh__caja) salen de figuras.css; acá va * sólo lo propio, con prefijo .cpf1__ / .cpf2__. */ /* ============================================================ 01 · De qué está hecha la aportación mensual ============================================================ */ /* Título y total en la misma línea mientras entren, y uno debajo del otro cuando no. En el SVG eran dos anclados a los extremos (x=8 y x=712), que es justo lo que no se puede hacer cuando el ancho lo decide el teléfono. */ .cpf1__cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between; gap:2px 18px;margin:0 0 13px} .cpf1__cab .figh__t{margin:0} .cpf1__tot{margin:0;font-size:16px;font-weight:800;line-height:1.3;color:var(--brand-d); font-variant-numeric:tabular-nums;white-space:nowrap} /* La tira de la barra apilada. El viewBox recorta la franja (720x64), así que ocupa lo que ocupa una barra: ~62px de alto en escritorio, ~32px en un teléfono. */ .cpf1__bar{margin:0 0 16px} /* Los porcentajes dentro de la barra. Blanco sobre los dos tramos de color; el tercero es --bar-off (gris claro) y ahí el blanco no se leería, por eso invierte a --brand-d. Va --surface y no #fff por la regla de la casa: los colores salen de tokens para que la figura siga al tema. Especificidad de dos clases a propósito, para ganarle a `.fig text` de app.css:767, que es (0,1,1) y si no pintaría todo de --ink. */ .cpf1 .cpf1__pct{font-size:15px;font-weight:800;fill:var(--surface)} .cpf1 .cpf1__pct--oscuro{fill:var(--brand-d)} /* El monto de cada tarjeta. --ft lo pone el PHP tarjeta por tarjeta porque el verde y el naranja de marca no llegan a contraste como texto (para eso existen --accent-t y --orange-t), así que el filete de la caja y el número no son el mismo tono. Ojo con la especificidad: `.figh__caja p` de figuras.css es (0,1,1) y le ganaría a una clase sola, dejando el monto en 13px gris. De ahí el `.cpf1 ` de adelante. */ .cpf1 .cpf1__amt{margin:0 0 1px;font-size:21px;font-weight:800;letter-spacing:-.02em; line-height:1.15;font-variant-numeric:tabular-nums;color:var(--ft,var(--brand))} /* ============================================================ 02 · Cómo crece el saldo, edad por edad ============================================================ */ /* Los tamaños de acá abajo son unidades del viewBox de 720 (ver la tabla del encabezado). La geometría (posiciones, anchos, alturas) NO se toca desde el CSS: la escribe el PHP y la reescribe calc-pension.js, y si el CSS la pisara, el primer recálculo la devolvería a la suya y quedarían peleando. */ .cpf2 .cpf2__lbl{font-size:14px;font-weight:600;fill:var(--soft)} .cpf2 .cpf2__v{font-size:16px;font-weight:800;fill:var(--brand-d); font-variant-numeric:tabular-nums} .cpf2 .cpf2__e{font-size:14px;font-weight:700;fill:var(--muted)} /* El eje. A 0,49 de escala, un trazo de 1 se ve como medio píxel y se pierde. */ .cpf2 .cpf2__eje{stroke-width:1.5} /* ============================================================ Escalado tipográfico (el porqué está arriba) ============================================================ */ /* El segundo par de la leyenda se corre a la derecha a medida que la letra crece: "Aportaciones" mide ~6,5em, o sea que a 26 unidades termina en x≈198 y el cuadrito verde estaba en 140. El corrimiento va en unidades del viewBox, igual que todo lo demás. */ @media (max-width:720px){ .cpf1 .cpf1__pct{font-size:19px} .cpf2 .cpf2__lbl,.cpf2 .cpf2__e{font-size:18px} .cpf2 .cpf2__v{font-size:20px} .cpf2 .cpf2__eje{stroke-width:2} .cpf2__leg2{transform:translateX(30px)} } @media (max-width:560px){ .cpf1__tot{font-size:15px} .cpf1 .cpf1__pct{font-size:22px} .cpf1 .cpf1__amt{font-size:20px} .cpf2 .cpf2__lbl,.cpf2 .cpf2__e{font-size:22px} .cpf2 .cpf2__v{font-size:25px} .cpf2 .cpf2__eje{stroke-width:2.5} .cpf2__leg2{transform:translateX(60px)} } /* Teléfono (medido en 412px: la caja de la figura queda en 362px, o sea escala 0,503). 28 unidades son ~14px reales y "$214 mil" mide ~123, que entra en el paso de 146 entre columnas sin tocar a la etiqueta vecina. Subir más empieza a superponer. El porcentaje dentro de la barra es el que más margen pide, porque el tramo que lo contiene puede ser angosto. Aguanta por una simetría del propio dato: el JS lo dibuja recién a partir de 54 unidades de ancho, y un tramo de 54 es el 7,7% del total, o sea que ahí la etiqueta sólo puede ser de dos caracteres ("8%", ~18px medidos sobre 27px de tramo). Para que diga tres ("12%") el tramo tiene que ser del 10% o más, o sea ≥70 unidades, y ahí sobra lugar. Es decir: el largo de la etiqueta crece junto con el hueco. Por eso 26 es seguro. */ @media (max-width:430px){ .cpf1 .cpf1__pct{font-size:26px} .cpf2 .cpf2__lbl,.cpf2 .cpf2__e{font-size:26px} .cpf2 .cpf2__v{font-size:28px} .cpf2 .cpf2__eje{stroke-width:3} .cpf2__leg2{transform:translateX(90px)} }