/* mx-afore — las dos figuras de "por dónde se hace el trámite": * .mcan → matriz trámite × canal (pages/afore_cita.php, se ve en las 10 /{slug}/cita) * .ivr → el menú telefónico de SARTEL (pages/sartel.php) * * Las dos eran SVG de 720px con la clase de figura ancha, o sea `min-width:640px` (app.css:763): * en un teléfono pedían scroll lateral, que en una tabla de decisión y en un mapa de menú es lo * mismo que no publicarlas. Comparten archivo porque comparten pregunta —qué canal resuelve qué— * y porque las dos son cuadrícula: una de trámites contra canales, la otra de pasos contra rutas. * * Las reglas de la casa y las piezas compartidas (.figh__t, .figh__st, .figh__pie, .figh__duo, * .figh__caja) están en assets/css/figuras.css. Acá va sólo lo propio, con prefijos .mcan__ y * .ivr__. */ /* ============================================================ .mcan — Matriz trámite × canal ============================================================ Una matriz de 9 filas × 4 canales no "refluye" a 412px: no hay reacomodo posible de 36 celdas en un carril. Lo que se hace es cambiar de forma, y esa forma ya existe en el sitio: el apilado fila→tarjeta de .tabla-comp (rediseno.css:617), donde cada celda reimprime su encabezado desde data-label. Por eso el PHP llama a sb_tabla_comp() en vez de escribir su propia tabla: acá abajo sólo se ajusta lo que cambia por estar DENTRO de una figura. */ /* El wrap de la tabla se desnuda. .table-wrap--limpio dibuja panel blanco + borde + sombra, y dentro de .fig__box —que ya es un panel blanco con borde y sombra— eso es un marco duplicado. Es el mismo desnudado que rediseno.css:1109 hace para .panel, .tarjeta, .celda y .slab; la figura es un contexto más de esa lista, sólo que declarado desde acá para no tocar ese archivo. */ .mcan .table-wrap{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0; margin:16px 0 0} /* 14px y no los 15,5 de la tabla comparativa: son cinco columnas y la última tiene que caber sin empujar. */ .mcan .tabla-comp{font-size:14px} /* Los cuatro canales se leen como columnas de una matriz: el valor va centrado bajo su rótulo, que es lo que hace que la columna se lea de arriba abajo. El nombre del trámite, no: es el rótulo de la fila y arranca a la izquierda. */ .mcan .tabla-comp thead th+th, .mcan .tabla-comp tbody td+td{text-align:center} /* "AforeMóvil" partido en dos renglones deja de nombrar un canal. Cabe: cuatro columnas de píldora ocupan ~90px cada una y la tabla vive en el ancho del artículo. */ .mcan .tabla-comp thead th+th{white-space:nowrap} /* El trámite es el dato de la fila, en tinta plena; el resto de la tabla va en --soft. */ .mcan .tabla-comp tbody td:first-child{color:var(--ink);font-weight:600} /* La píldora de respuesta. Los colores entran por --vb/--vc para que el modificador cambie los dos de una vez; el valor por defecto es el estado apagado, así que una clase mal escrita degrada a gris legible en lugar de a transparente. */ .mcan__v{--vb:var(--tile); --vc:var(--soft); display:inline-flex;align-items:center;justify-content:center;min-width:62px;padding:4px 11px; border-radius:var(--r-pill);background:var(--vb);color:var(--vc); font-size:12.5px;font-weight:800;line-height:1.35;white-space:nowrap} .mcan__v--si{--vb:var(--ok-bg); --vc:var(--ok)} .mcan__v--bio{--vb:var(--warn-bg); --vc:var(--warn)} .mcan__v--info{--vb:var(--info-bg); --vc:var(--info)} /* El "No" es el estado apagado, pero apagado no es ilegible: el SVG lo pintaba --muted (#74828f) sobre --tile (#e9f2f7) y eso da 3,5:1, por debajo del mínimo para texto chico. Con --soft son 6,8:1 y sigue siendo el más callado de los cuatro, porque el gris no compite con el verde ni con el ámbar de al lado. */ .mcan__v--no{--vb:var(--tile); --vc:var(--soft)} /* Leyenda: la píldora de verdad al frente de su explicación, en línea mientras entren las dos. */ .mcan__ley{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px 20px} .mcan__ley li{display:flex;align-items:center;gap:8px;min-width:0} .mcan__ley-t{font-size:12.5px;line-height:1.5;color:var(--muted)} .mcan .figh__pie{margin-top:11px} @media (max-width:720px){ /* Acá cada fila ya es una tarjeta (rediseno.css). Dos ajustes de contexto: 1. La tarjeta va sobre --surface-alt y no sobre --surface: el suelo de la figura ya es blanco, y blanco sobre blanco sólo se distingue por la sombra. Se repite el selector con :nth-child(even) porque la zebra de escritorio empata en especificidad y gana por orden. 2. Menos aire interior: son cinco datos cortos, no un párrafo. */ .mcan .tabla-comp tbody tr, .mcan .tabla-comp tbody tr:nth-child(even){background:var(--surface-alt);padding:13px 15px} .mcan .tabla-comp tbody td{padding:5px 0} .mcan .tabla-comp tbody td+td{text-align:left} /* El nombre del trámite deja de ser un par rótulo→valor y pasa a ser el TÍTULO de la tarjeta: el rótulo "TRÁMITE" no dice nada que el propio trámite no diga y gastaba un renglón entero. Es el mismo tratamiento que la columna AFORE del comparador (rediseno.css:679). El rótulo no se pierde para quien no ve la tarjeta: el sigue en el DOM. */ .mcan .tabla-comp tbody td:first-child{display:block;width:100%; padding:0 0 9px;margin-bottom:5px;border-bottom:1px solid var(--border); font-size:14.5px;font-weight:800;color:var(--brand-d);line-height:1.35} .mcan .tabla-comp tbody td:first-child::before{display:none} } /* ============================================================ .ivr — El menú telefónico de SARTEL ============================================================ Arquetipo: secuencia con una bifurcación. Marcas → eliges opción → el menú se abre en dos rutas según dónde cotizas → las dos terminan en el mismo dato. La estructura del HTML es esa misma (una
    de tres pasos, y dentro del tercero la