/* mx-afore — figura «De ese número, ¿qué puedes sacar hoy?» (/cuanto-tengo-en-mi-afore)
 *
 * Era un SVG de 720x412 con texto de 12px y `class="fig--wide"`, o sea min-width:640px: en un
 * teléfono de 412px la figura pedía scroll lateral y las tres columnas del árbol (raíz →
 * subcuenta → casos) quedaban ilegibles. Acá el mismo árbol es una lista anidada: en escritorio
 * la subcuenta va al lado de sus casos y en móvil cae debajo, sin una sola cifra distinta.
 *
 * La estructura NO es decorativa: <ul> dentro de <ul> es literalmente el árbol que dibujaba el
 * SVG, así que un lector de pantalla anuncia «3 elementos» y, dentro del primero, sus 3 casos.
 * Los conectores (tronco y codos) son pseudo-elementos: no hay geometría que recalcular cuando
 * el texto envuelve, que es justamente lo que rompía en el SVG.
 *
 * Las reglas de la casa están en figuras.css; de ahí salen .figh__t, .figh__st y .figh__pie.
 * Acá sólo va lo propio de esta figura, con prefijo .qps__.
 */

/* --qpad es el carril del tronco (padding izquierdo de la lista de ramas) y --qgap la separación
   entre ramas. Van como variables porque los conectores se posicionan CONTRA ellas: cambiarlas en
   la media query mueve línea, codo y caja a la vez, sin tres números sueltos que se desincronicen. */
.qps{--qpad:26px; --qgap:14px; --qcodo:26px}

/* La raíz: ancho al contenido, no al carril. Es una caja del dibujo, no una banda. */
.qps__raiz{display:inline-flex;flex-direction:column;gap:2px;max-width:100%;
  padding:11px 16px;border-radius:11px;background:var(--tile);border:1.5px solid var(--brand-l)}
.qps__raiz-t{font-size:14px;font-weight:800;line-height:1.3;color:var(--brand-d)}
.qps__raiz-d{font-size:12.5px;line-height:1.4;color:var(--muted)}

.qps__ramas{list-style:none;margin:var(--qgap) 0 0;padding:0 0 0 var(--qpad);display:grid;
  gap:var(--qgap)}

/* Cada rama: la subcuenta a la izquierda y sus casos a la derecha. El minmax de la primera
   columna la deja encoger hasta que ya no entra; ahí la media query las apila. */
.qps__rama{position:relative;display:grid;
  grid-template-columns:minmax(180px,.85fr) minmax(250px,2fr);gap:12px;align-items:start}

/* El tronco que baja de la raíz. Se dibuja por rama y no en el contenedor porque el contenedor
   no sabe dónde está el codo de la última: si la línea llegara hasta abajo quedaría un filete
   colgando debajo del último caso. Cada rama pinta su tramo hasta la rama siguiente; la última
   sólo el pedacito que llega a su propio codo. */
.qps__rama::before{content:"";position:absolute;width:2px;border-radius:1px;background:var(--border);
  left:calc(9px - var(--qpad));top:0;bottom:calc(-1 * var(--qgap))}
.qps__rama:first-child::before{top:calc(-1 * var(--qgap))}
.qps__rama:last-child::before{bottom:auto;height:var(--qcodo)}
/* El codo horizontal que entra a la caja de la subcuenta. */
.qps__rama::after{content:"";position:absolute;height:2px;border-radius:1px;background:var(--border);
  left:calc(9px - var(--qpad));top:var(--qcodo);width:calc(var(--qpad) - 11px)}

/* La caja de la subcuenta lleva el color de su rama en --qc (lo fija el PHP, igual que .arbol
   usa --gc). Sobre --tile los tres colores pasan de 4,5:1; sobre --brand no pasarían, por eso el
   fondo es el azulejo claro y no la banda de marca. */
.qps__sc{padding:12px 14px;border-radius:11px;background:var(--tile);border:1.5px solid var(--qc)}
.qps__sc-t{margin:0;font-size:14px;font-weight:800;line-height:1.3;color:var(--qc)}
.qps__sc-d{margin:3px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}

/* Los casos: el filete izquierdo repite el color de la rama, que es lo único que ata cada caso
   con su subcuenta cuando la rejilla se apila en móvil. */
.qps__casos{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.qps__caso{padding:11px 14px;border-radius:10px;background:var(--surface-alt);
  border:1px solid var(--border);border-left:5px solid var(--qc)}
.qps__caso-t{margin:0 0 3px;font-size:13.5px;font-weight:800;line-height:1.35;color:var(--brand-d)}
.qps__caso p{margin:0;font-size:13px;line-height:1.55;color:var(--soft)}

@media (max-width:720px){
  /* Apiladas, la subcuenta encabeza sus casos y el carril del tronco se angosta: en un teléfono
     esos 26px de sangría son ancho de texto. */
  .qps{--qpad:18px}
  .qps__rama{grid-template-columns:1fr;gap:10px}
  .qps__caso{padding:10px 12px}
}