/* mx-afore — las dos figuras del retiro por desempleo.
 *
 *   .cdes  → «Cómo se calcula tu retiro por desempleo»  (/retiro-por-desempleo)
 *   .rdes  → «De la baja al depósito: la ruta y dónde se atasca»
 *            (/{slug}/retiro-por-desempleo, o sea 10 URLs)
 *
 * Las dos eran SVG de coordenadas absolutas con `class="fig--wide"`, o sea min-width:640px
 * (app.css:763): en un teléfono de 412px pedían scroll lateral y el texto de 10,5-11,5px quedaba
 * ilegible. Van juntas en un archivo porque son la misma página en dos escalas (el pillar y su
 * versión por marca) y comparten el mismo vocabulario de color: ámbar = "acá se traba", rojo =
 * "esto lo pagas en semanas".
 *
 * Las reglas de la casa y las piezas compartidas están en figuras.css (.figh__t, .figh__st,
 * .figh__pie, .figh__n, .figh__pasos, .figh__paso, .figh__duo). Acá va sólo lo propio.
 *
 * OJO con la trampa repetida del repo: `strong{color:var(--brand-d)}` (app.css:100) es global y
 * pinta de azul cualquier <strong>, esté sobre el fondo que esté. Todos los <strong> de estas
 * dos figuras llevan color declarado a propósito. */


/* ══════════════════════════════════════════════════════════════════════════════
   .cdes — el cálculo: dos modalidades en paralelo + la banda del costo
   ══════════════════════════════════════════════════════════════════════════════ */

/* --cgap es la separación entre pasos del flujo Y el largo del conector: van atados porque el
   conector se dibuja exactamente dentro del hueco. Un solo número, imposible desincronizar. */
.cdes{--cgap:16px}

/* .figh__duo compara a 210px por columna, que le alcanza a un par de tarjetas de texto. Acá cada
   columna es una modalidad ENTERA (banda, tres o cuatro pasos y, en la B, dos opciones lado a
   lado), así que a 210px se estrangula. Se sube el mínimo sólo para esta figura: por debajo de
   ~590px las dos modalidades se apilan, que es lo correcto en un teléfono. */
.cdes__duo{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}

/* Cada modalidad lleva su color en --cc (lo fija el PHP en el style inline, igual que .arbol usa
   --gc): el mismo color pinta el borde de la tarjeta y el fondo de la banda, y así no hay forma
   de que la banda diga "A" y el marco diga "B". overflow:hidden es lo que recorta la banda
   contra las esquinas redondeadas de la tarjeta, como hacía el segundo <rect> del SVG. */
.cdes__mod{border:2px solid var(--cc);border-radius:13px;background:var(--tile);overflow:hidden}

/* La banda de cabecera: blanco sobre --brand (6,9:1) o sobre --brand-l (6,0:1). Los dos pasan
   4,5:1, que es el umbral que aplica acá — 13,5px en negrita NO es "texto grande". */
.cdes__cab{margin:0;padding:9px 14px;background:var(--cc);color:#fff;
  font-size:13.5px;font-weight:800;line-height:1.35;letter-spacing:.01em}

.cdes__flujo{display:grid;gap:var(--cgap);padding:14px}

/* Un paso del flujo. Puede ser una caja (lleva además .cdes__caja) o la fila de dos opciones de
   la Modalidad B (.cdes__ops); el conector se ancla acá y no en la caja para que sirva a los dos
   casos. */
.cdes__paso{position:relative;min-width:0}

/* El conector: línea + punta, los dos absolutos dentro del hueco de la rejilla.
   - la línea ocupa el hueco completo (height:--cgap, bottom:-(--cgap));
   - la punta es el triángulo clásico de bordes, apoyado en el mismo bottom, así que su base
     tapa los últimos 7px de la línea y la punta cae justo donde arranca el paso siguiente.
   Se dibujan con pseudo-elementos y no con nodos porque no hay geometría que recalcular cuando
   el texto envuelve — que es exactamente lo que rompía en el SVG. */
.cdes__paso:not(:last-child)::before{content:"";position:absolute;left:50%;
  bottom:calc(-1 * var(--cgap));width:2px;height:var(--cgap);
  transform:translateX(-50%);background:var(--brand-l);border-radius:1px}
.cdes__paso:not(:last-child)::after{content:"";position:absolute;left:50%;
  bottom:calc(-1 * var(--cgap));width:0;height:0;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid var(--brand-l)}

/* La caja base = el `class="box-s"` del SVG (relleno --surface-alt, filete --border). */
.cdes__caja{display:grid;gap:3px;padding:11px 13px;border-radius:9px;
  background:var(--surface-alt);border:1.5px solid var(--border)}

/* La pregunta bisagra ("¿pasa del tope?", "te pagan la MENOR"): ámbar, igual que en el SVG.
   --warn sobre --warn-bg da 6,8:1. */
.cdes__caja--warn{background:var(--warn-bg);border-color:var(--warn)}
/* El resultado de la Modalidad A: fondo blanco y filete verde, era el único <rect> con
   stroke --accent del SVG y sigue siendo el único acento de "esto es lo que cobras". */
.cdes__caja--fin{background:var(--surface);border:2px solid var(--accent)}
/* La coda de la Modalidad B: es una observación, no un paso; filete apenas visible. */
.cdes__caja--coda{background:var(--surface);border-color:var(--border-2)}

.cdes__lbl{font-size:13px;font-weight:600;line-height:1.4;color:var(--soft)}
.cdes__val{font-size:14.5px;font-weight:800;line-height:1.35;color:var(--brand-d);
  font-variant-numeric:tabular-nums}
.cdes__preg{font-size:13px;font-weight:700;line-height:1.4;color:var(--warn)}
.cdes__monto{font-size:19px;font-weight:800;line-height:1.2;color:var(--brand-d);
  font-variant-numeric:tabular-nums}
.cdes__coda{font-size:12.5px;line-height:1.45;color:var(--muted)}

/* Las dos opciones de la Modalidad B, lado a lado. El mínimo es chico (135px) a propósito: que
   se vean JUNTAS es media explicación de "te pagan la menor de las dos", así que aguantan
   apiladas sólo cuando de verdad no entran. */
.cdes__ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px}
.cdes__op{font-size:13px;font-weight:800;line-height:1.35;color:var(--brand-d);
  font-variant-numeric:tabular-nums}
.cdes__nota{font-size:12px;line-height:1.4;color:var(--muted)}

/* La banda de abajo: el costo, que es lo mismo en las dos modalidades y por eso cruza el ancho
   completo. Rojo (--danger sobre --danger-bg, 6,4:1) y no ámbar: el ámbar de arriba marca
   trámite, esto marca un costo irreversible mientras no reintegres.
   El <strong> lleva color declarado — sin esto el global de app.css:100 lo pintaría de
   --brand-d, o sea azul de marca dentro de una banda roja. */
.cdes__costo{margin:18px 0 0;padding:14px 16px;border-radius:12px;
  background:var(--danger-bg);border:1.5px solid var(--danger);
  display:grid;gap:5px;font-size:13px;line-height:1.5;color:var(--soft)}
.cdes__costo strong{font-size:13.5px;font-weight:800;color:var(--danger)}

@media (max-width:720px){
  .cdes{--cgap:14px}
  .cdes__flujo{padding:12px}
  .cdes__monto{font-size:17.5px}
}


/* ══════════════════════════════════════════════════════════════════════════════
   .rdes — la ruta: cinco etapas y los puntos donde se atasca
   ══════════════════════════════════════════════════════════════════════════════ */

/* El SVG ponía las cinco etapas en una tira horizontal de 134px cada una: en móvil eso es scroll
   lateral obligado, y el texto ya venía partido a mano en dos renglones para que entrara. Acá es
   la línea de tiempo VERTICAL de .figh__pasos, que es el arquetipo de la casa para secuencias:
   el riel y el orden se leen igual en 320px que en 900, y cada renglón partido a mano vuelve a
   ser una frase que el navegador corta donde entre. */

.rdes__cuerpo{display:grid;gap:6px;justify-items:start;min-width:0}
/* La separación la pone el gap, así que el margen que .figh__paso h4 le deja al título sobraría
   y dejaría 9px bajo el título contra 6px bajo la descripción. Misma especificidad que la regla
   compartida: gana ésta porque fig/*.css se carga después de figuras.css (layout.php:58-65). */
.rdes__cuerpo h4{margin-bottom:0}

/* La píldora del plazo. Era el <rect rx=11> con --tile del SVG; sigue siendo el único dato
   "duro" de cada etapa, así que se mantiene visualmente aparte del texto corrido.
   width:auto + justify-items:start del padre = la píldora mide lo que dice, no la columna. */
.rdes__chip{margin-top:1px;padding:3px 11px;border-radius:999px;background:var(--tile);
  color:var(--brand-d);font-size:11px;font-weight:800;line-height:1.5;letter-spacing:.03em;
  font-variant-numeric:tabular-nums}

/* El recuadro ámbar: dónde se traba el trámite.
   Doble clase (.rdes__paso .rdes__bloqueo) y no una sola: `.figh__paso p` de figuras.css ya
   pinta este <p> de --soft, y con una sola clase quedaríamos empatados en especificidad
   dependiendo del orden de carga. Con dos, gana siempre esta.
   --warn sobre --warn-bg: 6,8:1. */
.rdes__paso .rdes__bloqueo{margin-top:2px;padding:8px 11px;border-radius:9px;
  background:var(--warn-bg);border:1.2px solid var(--warn);
  font-size:12.5px;font-weight:700;line-height:1.4;color:var(--warn)}

@media (max-width:720px){
  .rdes__chip{font-size:10.5px}
  .rdes__paso .rdes__bloqueo{padding:7px 10px;font-size:12px}
}