/* mx-afore — las dos figuras que se llaman sb_fig_tres_registros().
 *
 * ⚠️ OJO ANTES DE TOCAR NADA: la función tiene el mismo nombre en /afore-movil y en
 * /compara-tus-datos-imss-afore, pero NO son la misma figura ni comparten un solo carácter de
 * texto. Es una colisión de nombres, no una duplicación:
 *
 *   · pages/afore_movil.php   → «Las tres cosas que la gente llama registrarme»: tres TRÁMITES
 *     distintos (activar la app · vincular la cuenta · registrarte en una AFORE), en carriles
 *     numerados. Prefijo .tres-tramites
 *   · pages/compara_datos.php → «Los tres registros que tienen que decir lo mismo»: tres BASES
 *     DE DATOS (IMSS · PROCESAR · tu AFORE) que se validan entre sí. Prefijo .tres-reg
 *
 * Comparten hoja porque comparten nombre y tema, y las dos se apoyan en las piezas de
 * figuras.css (.figh__t, .figh__st, .figh__pie, .figh__n, .figh__caja). Lo de abajo es sólo lo
 * que esas piezas no cubren.
 *
 * Las dos venían de un SVG de viewBox 720 con .fig--wide, que en app.css:763 arrastra
 * min-width:640px: en un teléfono de 412px la figura pedía scroll lateral y la mitad derecha
 * —la que trae el "qué te pide" y el "qué guarda de ti"— quedaba fuera de pantalla. En HTML el
 * navegador corta las líneas con el ancho real y las columnas se apilan solas.
 */

/* ============================================================
   /afore-movil — «Registrarme» son tres cosas distintas
   ============================================================ */

/* <ol> y no <div>: el número ES contenido. El pie de la figura dice "lo tuyo son los pasos 1 y
   2. El 3 no te toca", así que el orden no es decorativo y no se puede reordenar con CSS. */
.tres-tramites__lista{list-style:none;margin:0;padding:0;display:grid;gap:12px}

/* Cada carril reusa .figh__caja + .figh__caja--acento: el acento lateral de --fc es exactamente
   el <rect> de 5px de color que el SVG ponía al borde izquierdo de cada caja.
   Dos carriles adentro —quién es el trámite | qué te pide y qué sale— porque el SVG tenía una
   línea vertical en x=320 separando esas dos mitades. */
.tres-tramites__item{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.3fr);
  gap:0 20px;align-items:start}

.tres-tramites__cab{display:grid;grid-template-columns:22px minmax(0,1fr);gap:3px 10px}
.tres-tramites__cab .figh__n{grid-column:1;grid-row:1}
/* Los dos van con el padre en el selector: `.figh__caja h4` y `.figh__caja p` (figuras.css:59 y
   :61) suman clase+tipo, así que una clase sola les pierde y el margen y el color vuelven solos.
   `.figh__caja h4` ya deja el título en --brand-d y 14,5px, que es lo que quiere el dibujo; sólo
   sobra el margen inferior, porque acá el gap de la rejilla ya separa. */
.tres-tramites__item .tres-tramites__tit{grid-column:2;margin:0}
/* En el SVG este renglón era class="t-sm" (12px, --muted): es una aclaración, no un subtítulo,
   y compite con el título de al lado si va del mismo tamaño. */
.tres-tramites__item .tres-tramites__sub{grid-column:2;margin:0;font-size:12.5px;line-height:1.45;
  color:var(--muted)}

/* El filete vertical del SVG. Cuando los dos carriles se apilan pasa a ser horizontal: separar
   sigue haciendo falta, lo que cambia es por dónde. */
.tres-tramites__det{list-style:none;margin:0;padding:0 0 0 20px;display:grid;gap:6px;
  border-left:1px solid var(--border)}
.tres-tramites__det li{font-size:13px;line-height:1.5;color:var(--soft)}
/* El veredicto de cada trámite ("casi nadie se traba" / "acá se cae todo el mundo"): en el SVG
   iba en negrita y con el color del estado. --vc lo pone el HTML porque es dato de la figura y
   NO coincide con el --fc del carril (el paso 1 es azul claro y su veredicto, verde).
   Los tres colores dan >5:1 sobre el --surface-alt de la caja. */
.tres-tramites__ver{font-weight:700;color:var(--vc,var(--brand))}

@media (max-width:720px){
  .tres-tramites__item{grid-template-columns:minmax(0,1fr);gap:11px}
  .tres-tramites__det{padding:11px 0 0;border-left:0;border-top:1px solid var(--border)}
}

/* ============================================================
   /compara-tus-datos-imss-afore — Los tres registros
   ============================================================ */

/* Rejilla propia y no .figh__cajas porque las flechas de doble punta son ítems de la rejilla:
   con auto-fit cada flecha reclamaría una columna entera. Acá el patrón es fijo —caja, nexo,
   caja, nexo, caja— y a ≤720px cae a una sola columna con los nexos girados. */
.tres-reg__grid{display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:14px}

/* Se le anula el padding a .figh__caja para que la banda de color llegue a los bordes, como el
   <rect> de cabecera del SVG. El padding lo maneja cada parte por su cuenta. */
.tres-reg__col{padding:0;overflow:hidden}
/* Sin modificador la banda es --brand, el registro del IMSS. */
.tres-reg__col--sar{--fc:var(--brand-l)}
/* Contraste de la banda: --brand (7,8:1 con blanco) y --brand-l (6,0:1) van derecho. El tercero
   era --accent, que con blanco da 3,0:1 y acá es texto normal de 13px en negrita —WCAG pide
   4,5:1—. Se usa --accent-t, el mismo verde ya oscurecido para esto (5,0:1), igual que hace
   .ivc__col--marca. El motivo está escrito en app.css:29. */
.tres-reg__col--afore{--fc:var(--accent-t)}

/* Doble selector para ganarle a `.figh__caja h4` (0,1,1), que pinta --brand-d: azul oscuro
   sobre banda azul es la trampa de la casa (figuras.css, regla 4). */
.tres-reg__col .tres-reg__cab{margin:0;padding:9px 15px;background:var(--fc,var(--brand));
  color:#fff;font-size:13px;font-weight:800;line-height:1.35}

.tres-reg__cuerpo{padding:13px 15px 15px}
/* Con el padre en el selector por lo mismo que arriba: `.figh__caja p` fija margin:0 y una clase
   sola no se lo gana, así que los dos párrafos quedarían pegados uno al otro. */
.tres-reg__col .tres-reg__desc{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--soft)}
/* El <line> que en el SVG separaba la descripción del "guarda de ti". */
.tres-reg__col .tres-reg__lbl{margin:0 0 6px;padding-top:11px;border-top:1px solid var(--border);
  font-size:12px;line-height:1.4;color:var(--muted)}
.tres-reg__datos{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.tres-reg__datos li{font-size:12.5px;font-weight:800;line-height:1.35;color:var(--brand-d)}

/* Nexo entre registros. Doble punta a propósito: la validación va en los dos sentidos, no es un
   flujo de izquierda a derecha. Es decoración pura —va aria-hidden— y por eso se dibuja con
   bordes y un degradado en vez de meter otro glifo de texto que el lector de pantalla tenga que
   saltear. El asta es el degradado; las dos puntas, los triángulos de ::before y ::after. */
.tres-reg__enlace{position:relative;align-self:center;justify-self:center;width:28px;height:14px;
  background:linear-gradient(var(--brand-l),var(--brand-l)) center/100% 2px no-repeat}
.tres-reg__enlace::before,.tres-reg__enlace::after{content:"";position:absolute;top:50%;
  margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent}
.tres-reg__enlace::before{left:0;border-right:8px solid var(--brand-l)}
.tres-reg__enlace::after{right:0;border-left:8px solid var(--brand-l)}

/* La caja de consecuencias. Conserva el borde fuerte del SVG (--danger a 1,5px) en vez del
   --danger-bd suave de .callout--danger: acá no es un aviso más de la página, es el remate de
   la figura y tiene que cortar. El strong lleva color explícito porque `strong{color:--brand-d}`
   (app.css:100) lo dejaría azul dentro de una caja roja. */
.tres-reg__alerta{margin:16px 0 0;padding:13px 16px;border-radius:12px;
  background:var(--danger-bg);border:1.5px solid var(--danger);display:grid;gap:5px}
.tres-reg__alerta strong{font-size:13px;line-height:1.4;color:var(--danger)}
.tres-reg__alerta span{font-size:12.5px;line-height:1.5;color:var(--soft)}

@media (max-width:720px){
  .tres-reg__grid{grid-template-columns:minmax(0,1fr)}
  /* Girar el nexo entero en vez de redefinir asta y puntas: una sola propiedad y no hay dos
     dibujos que mantener sincronizados. La caja de layout sigue siendo de 14px de alto y el
     dibujo sobresale 7px por lado, que caen dentro del gap de 14px de la rejilla. */
  .tres-reg__enlace{transform:rotate(90deg)}
}