/* Dos figuras que dicen lo mismo desde lados opuestos: una CONDICIÓN legal (.cond) y un ORDEN
 * legal (.prel).
 *
 *   .cond  → /fondo-de-pensiones-para-el-bienestar — las tres condiciones que tienen que darse a
 *            la vez para que una cuenta se transfiera al FPB. Era un SVG de 720x336 con
 *            class="fig--wide", o sea min-width:640px (app.css:763): en un teléfono de 412px
 *            había que arrastrar la figura de lado, y la compuerta —lo único que explica que las
 *            tres condiciones son simultáneas y no alternativas— quedaba fuera de pantalla.
 *   .prel  → /afore-de-una-persona-fallecida — el árbol de decisión y, dentro de la rama "no",
 *            el orden de prelación del art. 501 de la LFT. Era un SVG de 720x470, mismo problema,
 *            y encima el detalle de cada grupo se cortaba a dos renglones con wordwrap(52): el
 *            SVG no sabe envolver texto, así que había que decidir a mano cuánto entraba.
 *
 * Las reglas de la casa y las piezas compartidas (.figh__t, .figh__st, .figh__pie, .figh__n,
 * .figh__caja, .figh__pasos, .figh__paso, .figh__duo) están en ../figuras.css; acá va sólo lo
 * específico de estas dos.
 *
 * Los colores de cada caso van en variables locales (--sc/--sb en .cond, --rc/--rb en .prel) y
 * siempre apuntan a un token: un solo dato por caja en vez de repetir tres reglas por variante.
 */

/* ============================================================
   .cond — la compuerta "Y" del Fondo de Pensiones para el Bienestar
   ============================================================ */

/* Tres carriles: condiciones | llave | desenlaces. El del medio es la compuerta y por eso mide
   lo que mide (una llave, no una columna de contenido); los otros dos van con minmax(0,…) para
   que un texto largo no empuje la rejilla a lo ancho. */
.cond__grid{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1.05fr);
  gap:0 12px;align-items:stretch}

/* <ul> y no <ol>: las tres condiciones NO son una secuencia, se cumplen AL MISMO TIEMPO —es el
   punto entero de la figura—. La numeración "1 ·" ya viene dentro del rótulo de cada una.
   align-content:center las deja alineadas con los desenlaces cuando la columna de al lado es
   más alta. */
.cond__conds{list-style:none;margin:0;padding:0;display:grid;gap:30px;align-content:center}
.cond__caja{position:relative}

/* El filete y la "Y" que unen una condición con la siguiente: son la llave que el SVG dibujaba
   con un <path> a mano. Van en posición absoluta SOBRE el hueco de 30px de la rejilla, así que
   no empujan nada cuando el texto de una caja envuelve en más renglones. */
.cond__caja+.cond__caja::before{content:"";position:absolute;left:50%;top:-30px;width:2px;
  height:30px;background:var(--border);transform:translateX(-50%)}
/* La "Y" es el operador de la compuerta, es decir dibujo: va aria-hidden en el HTML. El fondo
   --surface tapa el filete de atrás sin necesidad de cortarlo. */
.cond__y{position:absolute;left:50%;top:-15px;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  padding:0 7px;border-radius:11px;background:var(--surface);border:1.5px solid var(--brand-l);
  color:var(--brand-l);font:800 11px/1 var(--font)}

/* La llave: filete vertical que recoge las tres condiciones y sale hacia los desenlaces. Es el
   carril del medio de la rejilla y va aria-hidden. Los márgenes lo dejan corto arriba y abajo
   para que abrace las cajas en vez de tocar el borde de la figura. */
.cond__llave{position:relative;margin:22px 0;border-left:2px solid var(--brand-l)}
.cond__llave::after{content:"";position:absolute;left:0;top:50%;width:100%;height:2px;
  background:var(--brand-l);transform:translateY(-50%)}

/* Los dos desenlaces. Cada uno trae su color en --sc (borde y banda) y su fondo en --sb. */
.cond__salidas{display:grid;gap:12px;align-content:center}
.cond__sal{border:2px solid var(--sc,var(--brand));border-radius:12px;overflow:hidden;
  background:var(--sb,var(--tile))}
.cond__sal--si{--sc:var(--ok);--sb:var(--ok-bg)}
.cond__sal--no{--sc:var(--brand);--sb:var(--tile)}

/* La banda del veredicto. Es un <h4>, y `h1,h2,h3,h4{color:var(--brand-d)}` (app.css:80) es
   GLOBAL: sin este color explícito quedaría azul oscuro sobre banda azul —el 1,38:1 que este
   repo ya se comió una vez—. El #fff es el mismo blanco sobre color que usan .figh__n y las
   bandas de las otras figuras. */
.cond__cab{margin:0;padding:9px 15px;background:var(--sc,var(--brand));color:#fff;
  font-size:13px;font-weight:800;line-height:1.3}
.cond__cuerpo{display:grid;gap:7px;padding:13px 15px}
.cond__cuerpo p{margin:0;font-size:13px;line-height:1.5;color:var(--soft)}

/* En un solo carril la llave apuntaría a la nada: se va. La lógica no se pierde porque la dicen
   los propios títulos de los desenlaces ("Sí, las tres…" / "Falta alguna…") y la bajada. */
@media (max-width:760px){
  .cond__grid{grid-template-columns:1fr;gap:20px}
  .cond__llave{display:none}
}

/* ============================================================
   .prel — quién cobra el saldo cuando fallece la persona titular
   ============================================================ */

/* La pregunta raíz. max-width en em y no en px: lo que hay que limitar es el largo de renglón,
   que se mide en caracteres, no el ancho del contenedor. */
.prel__raiz{position:relative;max-width:34em;margin:0 auto;padding:12px 18px;
  border:2px solid var(--brand);border-radius:12px;background:var(--tile);
  color:var(--brand-d);font-size:14px;font-weight:800;line-height:1.35;text-align:center}
/* El tronco que baja hacia las dos ramas: en el SVG era un <path>. Decorativo puro. */
.prel__raiz::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:16px;
  background:var(--brand-l);transform:translateX(-50%)}

/* Las dos ramas usan la rejilla compartida .figh__duo (auto-fit + minmax: se apilan solas). Cada
   una lleva su color en --rc y su fondo en --rb. flex en columna para que el cuerpo absorba el
   sobrante: la rama "no" es mucho más alta que la "sí" y así el sello verde no queda flotando a
   media caja. */
/* Dos retoques sobre .figh__duo, y los dos por la misma razón: la rama "no" lleva adentro una
   lista de cinco grupos y no es una caja de tres renglones como las de las otras figuras.
   · minmax(270px) en vez de los 210px de la hoja compartida: a dos columnas de 210 los rótulos
     ("Cónyuge, viuda o viudo, e hijos") envuelven en tres renglones. Con 270 apila antes.
   · align-items:start para que la rama corta mida lo que mide. Estiradas a la misma altura, la
     "sí" quedaba con media caja verde vacía, y encima el largo desigual DICE algo: uno de los
     caminos es corto y el otro no. */
.prel__ramas{margin-top:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  align-items:start}
.prel__rama{display:flex;flex-direction:column;border:2px solid var(--rc,var(--brand));
  border-radius:12px;overflow:hidden;background:var(--rb,var(--surface))}
.prel__rama--si{--rc:var(--ok);--rb:var(--ok-bg)}
.prel__rama--no{--rc:var(--warn);--rb:var(--warn-bg)}

/* Mismo caso que .cond__cab: <h4> sobre banda de color, el color global de encabezado hay que
   pisarlo a mano. */
.prel__cab{display:flex;align-items:center;gap:9px;margin:0;padding:9px 14px;
  background:var(--rc,var(--brand));color:#fff;font-size:13.5px;font-weight:800;line-height:1.3}
/* La etiqueta SÍ/NO es la respuesta a la pregunta de arriba: es CONTENIDO, no adorno, así que no
   va aria-hidden y tiene que leerse. Chip blanco con el texto del color de la rama —al revés que
   la banda— porque sobre el fondo de color un texto blanco más chico ya no rendiría. */
.prel__eti{flex:none;padding:3px 8px;border-radius:8px;background:var(--surface);
  color:var(--rc,var(--brand));font:800 11px/1 var(--font);letter-spacing:.06em}

.prel__cuerpo{flex:1;display:flex;flex-direction:column;padding:13px 15px}
.prel__cuerpo>p{margin:0 0 9px;font-size:13px;line-height:1.55;color:var(--soft)}
.prel__cuerpo>p:last-child{margin-bottom:0}
/* El bloque de entrada de cada rama iba con la clase t-lbl del SVG (más pesado que el resto). */
.prel__lead{font-weight:600}
/* El "se acredita…" verde del pie de la rama corta. El selector va con el padre porque
   `.prel__cuerpo>p` (0,2,1) le ganaría a una clase suelta y le devolvería el color --soft.
   margin-top:auto lo clava abajo de la caja, que es donde estaba en el SVG. */
.prel__cuerpo>.prel__sello{margin:auto 0 0;padding-top:11px;border-top:1px solid var(--ok-bd);
  color:var(--ok);font-size:12.5px;font-weight:800}

/* El orden de prelación reusa .figh__pasos/.figh__paso tal cual (rejilla 22px|1fr y conector
   vertical con ::before). Acá sólo se lo aprieta —son cinco grupos— y se pasa el conector al
   ámbar de la rama, que sobre --warn-bg se ve y el gris --border no. Esta hoja se carga después
   de figuras.css, así que a igual especificidad gana. */
.prel__orden{margin-top:11px}
.prel__paso{padding-bottom:15px}
.prel__paso::before{background:var(--warn-bd)}
.prel__paso h4{font-size:13.5px}
.prel__paso p{font-size:12.5px}
/* Un solo hijo para la segunda columna de la rejilla de .figh__paso: si el <h4> y el <p> fueran
   hermanos directos, cada uno sería una celda suelta y el <p> caería debajo del disco. */
.prel__cuerpo-paso{min-width:0}