/* El mismo saldo, tres destinos (/retiro-afore-65-anos) — .dest
 *
 * Reemplaza al SVG de 760x424 que llevaba 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 tercera
 * columna —Ley 97, el régimen de todo el que se jubile de acá en más— arrancaba fuera de
 * pantalla. Acá las tres columnas se apilan solas.
 *
 * Las reglas de la casa y las piezas compartidas (.figh__t, .figh__st, .figh__cajas) están en
 * ../figuras.css; esta hoja sólo trae lo específico de esta figura.
 *
 * Cada columna trae su color en --dc (siempre un token, nunca un hex): lo usan la banda del
 * título y el veredicto del pie. Un solo dato por columna en lugar de tres reglas repetidas.
 */

/* La rejilla es la compartida .figh__cajas (auto-fit + minmax: pasa de 3 columnas a 1 sin media
   query propia, y por debajo de 720px la hoja compartida ya fuerza una sola). Acá sólo se le
   quitan las viñetas y el sangrado: allá se usa sobre <div> y esta figura es una <ul> porque
   son tres casos excluyentes que conviene anunciar como lista. */
.dest__cols{list-style:none;margin:0;padding:0}

/* La columna. flex en columna para que el bloque de en medio (.dest__dl, con flex:1) absorba el
   sobrante y los tres veredictos queden alineados al pie aunque el texto de arriba tenga
   distinto largo. overflow:hidden recorta la banda de color contra el radio, sin repetir el
   redondeo arriba. */
.dest__col{display:flex;flex-direction:column;border:2px solid var(--dc,var(--brand));
  border-radius:12px;overflow:hidden;background:var(--surface)}

/* La banda de color con el título del caso. 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 de marca que
   usan .figh__n y la banda del estado de cuenta. */
.dest__cab{margin:0;padding:9px 15px;background:var(--dc,var(--brand));color:#fff;
  font-size:13px;font-weight:800;line-height:1.3}

/* Los dos pares rótulo/valor. El <dl> viene con márgenes del navegador y el <dd> con sangría:
   los dos a cero, la separación la ponen los márgenes de acá. flex:1 empuja el veredicto abajo
   cuando la columna es más alta que su contenido. */
.dest__dl{flex:1;margin:0;padding:13px 15px}
.dest__dl dt{margin:0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.dest__dl dd{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--soft)}
/* El filete que en el SVG era un <line> a media caja: acá cuelga del segundo rótulo, así se
   mueve solo cuando el texto de arriba envuelve en más renglones. */
.dest__dl dd+dt{margin-top:13px;padding-top:13px;border-top:1px solid var(--border)}
/* Lo que te dan en la mano: es el dato que se busca de un vistazo, va más pesado y más oscuro. */
.dest__fuerte{font-weight:800;color:var(--brand-d)}

/* El veredicto: la frase de una línea que resume la columna. Fondo neutro y texto del color del
   caso —sobre --tile, el más claro de los tres (--brand-l) da 5,2:1, de sobra para 12px en 800. */
.dest__verdicto{margin:0 13px 13px;padding:8px 11px;border-radius:8px;background:var(--tile);
  color:var(--dc,var(--brand));font-size:12px;font-weight:800;line-height:1.35}

/* El aviso de abajo: la condición previa a los tres caminos, no un cuarto camino. */
.dest__aviso{display:grid;gap:4px;margin:14px 0 0;padding:13px 16px;
  border:1.5px solid var(--warn);border-radius:11px;background:var(--warn-bg)}
/* `strong{color:var(--brand-d)}` (app.css:100) pintaría de azul de marca lo que en el SVG iba
   del color del aviso. El selector va con el padre para ganarle en especificidad al de tipo. */
.dest__aviso strong{color:var(--warn);font-size:13px;font-weight:800;line-height:1.4}
.dest__aviso span{font-size:13px;line-height:1.5;color:var(--soft)}
