/* mx-afore — las dos figuras de TRÁMITE: los plazos de la queja y el poder desde el extranjero. * * Las dos venían de SVG de 720px de ancho con texto de 11-13px y coordenadas absolutas. Un SVG * así escala como una imagen: su texto no refluye, y con el `min-width:640px` que app.css le pone * a `svg.fig--wide` un teléfono de 412px terminaba con scroll lateral. En las dos, encima, lo que * quedaba fuera de cuadro era justamente el dato: * * · en los plazos, la columna de la derecha —"30 días hábiles", "20 días hábiles"— que es la * única razón por la que la figura existe; * · en el poder, la columna del fedatario extranjero, o sea la mitad de la comparación. * * Comparten hoja porque comparten página vecina y porque son ~120 líneas entre las dos: dos * archivos de 60 no le ahorran nada a nadie. El armazón sale de figuras.css (.figh__t, .figh__st, * .figh__pie, .figh__pasos/.figh__paso, .figh__n, .figh__duo); acá va sólo lo propio. * * Convención de color, la misma que .arbol (--gc) y .figh__caja--acento (--fc): el color viaja en * --fc, que el PHP fija en el style del elemento, porque es dato de la figura y no del tema. */ /* ═══════════════════════════════════════════════════════════════════════════════════════════ 1. .plzq — "Los plazos que la ley te da" (/queja-condusef-afore) ═══════════════════════════════════════════════════════════════════════════════════════════ Arquetipo: LÍNEA DE TIEMPO. Seis pasos en secuencia, cada uno con su plazo legal. Es .figh__pasos tal cual; lo propio son la banda de la ventana de prescripción y la píldora del plazo. */ /* La ventana para reclamar enmarca a las seis: es el reloj que corre por encima de todos los demás. En el SVG era una banda violeta (--tip-bg/--tip-bd), el color de los callout de "dato útil"; acá pasa al azul de marca, que es lo que el rediseño usa para encuadrar, y así la figura no estrena una familia de color propia. Sobre --tile, --brand-d da de sobra el contraste. */ .plzq__ventana{margin:0 0 18px;padding:11px 15px;border-radius:10px;border-left:4px solid var(--brand-l);background:var(--tile);font-size:13px;font-weight:700;line-height:1.5; color:var(--brand-d)} /* El disco numerado hereda el color del paso. El de figuras.css es azul fijo, pero acá el color ES información: separa lo previo (gris), la vía UNE (azul de marca), el tramo Condusef (azul claro) y el desenlace (verde). Va con el ancestro delante porque .figh__n pinta el fondo con la misma especificidad: sin él quedaría dependiendo del orden de carga de las hojas. El número NO va aria-hidden: .figh__pasos lleva list-style:none y hay lectores que entonces dejan de anunciar la posición, así que sin el disco esos números no los diría nadie. */ .plzq .plzq__n{background:var(--fc,var(--brand))} /* Un solo hijo para la segunda columna de la rejilla de .figh__paso: si el h4, la píldora y el párrafo fueran hermanos, cada uno sería una celda suelta de esa rejilla. */ .plzq__cuerpo{min-width:0} /* La píldora del plazo. En el SVG era un alineado a la derecha, sobre la misma línea del título; acá va debajo, que es donde el ojo la busca al leer de arriba abajo y donde el lector de pantalla la dice justo después del título al que pertenece. Doble clase para ganarle a `.figh__paso p{...}` de figuras.css. --fc sobre --tile: el peor par de los cuatro es --accent-t, que igual queda en ~4,7:1. */ .plzq__paso .plzq__plazo{display:inline-block;margin:0 0 5px;padding:3px 10px;border-radius:999px; background:var(--tile);font-size:12px;font-weight:800;line-height:1.5;color:var(--fc,var(--brand)); font-variant-numeric:tabular-nums} /* ═══════════════════════════════════════════════════════════════════════════════════════════ 2. .pod — "Las dos formas de dar un poder desde el extranjero" (/afore-desde-estados-unidos) ═══════════════════════════════════════════════════════════════════════════════════════════ Arquetipo: COMPARACIÓN. Tres criterios contra dos caminos. En el SVG era una tabla de tres columnas clavadas (criterio 168px | consulado 262px | fedatario 262px): apretar eso en 412px es imposible, y por eso pedía scroll. Acá son dos tarjetas de .figh__duo, cada una con los tres criterios adentro. El criterio se repite en las dos columnas —en la tabla iba una sola vez— y es a propósito: apiladas en un teléfono, una columna sin sus rótulos es una lista de tres "Obligatoria" sueltos. */ /* --fc es el color del camino y --fb su superficie, los mismos --ok/--warn que pintaban el SVG: verde el que no pide nada extra, ámbar el que pide tres trámites. */ .pod__col{--fc:var(--ok);--fb:var(--ok-bg);border:1.5px solid var(--border);border-radius:13px; overflow:hidden;background:var(--surface-alt);display:flex;flex-direction:column} .pod__col--warn{--fc:var(--warn);--fb:var(--warn-bg)} /* ⚠️ `h1,h2,h3,h4{color:var(--brand-d)}` (app.css:80) también alcanza acá adentro y pintaría el título azul oscuro sobre la banda verde o ámbar. El selector va con el padre para ganarle en especificidad al selector de tipo; el margin de esa misma regla hay que anularlo igual. */ .pod__col .pod__cab{margin:0;padding:11px 16px 13px;background:var(--fc);color:#fff; font-size:14.5px;font-weight:800;line-height:1.3;text-wrap:balance} /* Los tres criterios.
y no