/* Figura "Del día de tu baja al depósito" — /cuanto-tarda-el-retiro-de-afore
 * (pages/cuanto_tarda.php → sb_fig_linea_tiempo).
 *
 * Arquetipo: LÍNEA DE TIEMPO. Es el molde de las demás líneas de tiempo del sitio, así que acá
 * está escrito el porqué de la forma. El armazón lo pone figuras.css (.figh__pasos/.figh__paso
 * para el riel vertical, .figh__caja para la caja de cada tramo, .figh__t/.figh__st para los
 * textos de marco); acá va sólo lo que esta figura tiene: el nodo-anillo, la marca de tiempo, la
 * anotación colgada y la banda de cierre.
 *
 * ── POR QUÉ ES VERTICAL SIEMPRE, Y NO "HORIZONTAL QUE SE APILA EN MÓVIL" ───────────────────
 * El SVG dibujaba los cuatro tramos en fila. Lo obvio sería conservar esa fila en pantallas
 * anchas y apilarla abajo de 720px, pero acá no conviene, por tres razones:
 *
 * 1. No son cuatro hitos pelados. Cada tramo lleva título + una frase, y dos de los cuatro
 *    arrastran además la anotación que en el SVG era un corchete de tres renglones. Repartido en
 *    cuatro columnas dentro de la caja de una figura, cada columna cae a ~150px: ahí el texto
 *    queda en dos palabras por renglón, que es la misma ilegibilidad de la que veníamos huyendo,
 *    sólo que sin scroll lateral.
 * 2. Serían dos dibujos que mantener: dos geometrías de conector, dos órdenes de lectura y dos
 *    lugares donde algo se rompe cuando alguien agrega un quinto tramo o alarga una frase. Para
 *    una pieza que se va a copiar a otras páginas, la que hay que dejar es la que aguanta
 *    cualquier cantidad de tramos y cualquier largo de texto.
 * 3. Bajar ES avanzar. En una página que se lee scrolleando, el sentido natural del tiempo es
 *    hacia abajo, y coincide con el orden del <ol> que oye un lector de pantalla. El ancho es el
 *    recurso escaso en un teléfono; el alto no.
 *
 * El corchete del SVG —la llave que abrazaba un tramo para decir "esto es tuyo"— desaparece como
 * geometría: la anotación cuelga del tramo que anota y comparte su color. Menos dibujo que
 * sostener, la misma información.
 *
 * En pantallas anchas el ancho no se desperdicia: la caja del tramo y su anotación se ponen lado
 * a lado. La línea sigue siendo vertical; lo que se reparte es cada escalón.
 * ───────────────────────────────────────────────────────────────────────────────────────────
 */

/* Cada <li> fija --lc (el color del tramo: nodo, borde y rótulos) y --lf (el fondo de su caja),
   los mismos tokens que tenían los <rect> del SVG. --fc, que es el que lee .figh__caja--acento,
   se deriva de --lc en vez de repetirse en el marcado: así no hay manera de que el nodo quede de
   un color y el borde de su caja de otro. */

/* El nodo. El .figh__n de la casa es un disco lleno con un número; acá va un anillo hueco porque
   el tramo no se numera (ver el comentario del PHP). Ocupa la columna de 22px de .figh__paso y va
   centrado en ella para caer justo sobre el riel. */
.lt__pt{justify-self:center;align-self:start;width:14px;height:14px;box-sizing:border-box;
  border-radius:50%;background:var(--surface);border:3px solid var(--lc,var(--brand))}

/* El riel de figuras.css arranca en top:24px, que es lo que mide el disco numerado. El anillo es
   más chico y la fila empieza con un rótulo de 11,5px: sin esto quedaba un hueco de 10px entre
   el nodo y su línea. Va con .lt delante por lo mismo que las de más abajo: para ganarle a
   .figh__paso::before por especificidad y no por orden de carga. */
.lt .lt__paso::before{top:18px}

/* min-width:0 porque es ítem de la rejilla de .figh__paso: sin esto una palabra larga en la
   anotación ensancha la columna en vez de cortarse. */
.lt__cuerpo{min-width:0;display:grid;gap:9px}

/* La marca de tiempo: mismo tamaño, peso y color que el <text> del SVG. Va arriba de la caja
   porque marca el INSTANTE en que el tramo empieza, no lo que pasa adentro. */
.lt__hito{display:block;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--muted);
  line-height:1.2}

/* Las reglas que pisan a figuras.css van con el padre para ganar por ESPECIFICIDAD y no por
   orden de carga: figuras.css y esta hoja son dos archivos distintos y el orden entre ellos no
   es un contrato que esta figura pueda dar por seguro. */
.lt__paso .lt__caja{--fc:var(--lc,var(--brand));background:var(--lf,var(--surface-alt))}
.lt__paso .lt__caja h4{color:var(--lc,var(--brand-d))}

/* La anotación (el ex corchete). Sin fondo y con filete a la izquierda: tiene que leerse como una
   acotación colgada del tramo, no como un segundo bloque de la secuencia. */
.lt__nota{padding-left:13px;border-left:3px solid var(--lc,var(--brand-l))}
/* Dos clases (0,0,1,1) contra el `strong{color:var(--brand-d)}` global de app.css:100 (0,0,0,1):
   sin esto el rótulo sale azul de marca aunque el tramo sea el naranja de "acá se detiene". */
.lt__nota strong{display:block;font-size:12.5px;font-weight:800;color:var(--lc,var(--brand-l));
  line-height:1.35}
.lt__nota span{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--soft)}

/* La banda de cierre: hábiles contra naturales. Es la que corrige el malentendido que trae a la
   gente a esta página, así que va separada de la secuencia y en el rojo de aviso. */
.lt__relojes{margin:20px 0 0;padding:14px 16px;border-radius:11px;background:var(--danger-bg);
  border:1.5px solid var(--danger)}
/* Mismo caso que en .lt__nota: <strong> sobre fondo teñido. Sin el color explícito hereda el
   azul-marca global y queda casi invisible sobre el rosa del aviso. */
.lt__relojes strong{display:block;margin-bottom:5px;font-size:13.5px;font-weight:800;
  color:var(--danger);line-height:1.35}
.lt__relojes span{display:block;font-size:13px;line-height:1.5;color:var(--soft)}
.lt__relojes span+span{margin-top:3px}

/* Desde acá hay ancho para poner la anotación al lado de su caja en vez de debajo. El umbral no
   es "escritorio": es el ancho a partir del cual las dos columnas siguen teniendo sitio para
   media docena de palabras por renglón dentro de la caja de la figura. */
@media (min-width:820px){
  .lt__cuerpo{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:20px;
    align-items:start}
  .lt__hito{grid-column:1/-1}
  /* Los tramos sin anotación ocupan el escalón entero. :last-child y no una clase modificadora
     porque la condición ES "no tiene nada al lado", y el marcado ya la expresa. */
  .lt__paso .lt__caja:last-child{grid-column:1/-1}
}