/* ============================================================ Capa de componentes del rediseño 2026 ============================================================ Especificación: docs/design/handoff/README.md Prototipos: docs/design/handoff//.dc.html ⚠️ NO escribas una ruta con glob en este comentario. La versión anterior decía "handoff" seguido de barra-asterisco-barra-asterisco: ese asterisco-barra CERRABA el comentario en la línea 4, el parser se comía el resto del texto buscando un "{" y descartaba la PRIMERA regla del archivo, que era .wrap. Resultado: .wrap no existió en ninguna página del sitio durante toda la portación. Por qué existe este archivo y no se mezcló en app.css: app.css sostiene las páginas que todavía no se rediseñaron. Acá van SÓLO los patrones nuevos que el handoff introduce, para poder verlos y quitarlos como bloque. Cuando todas estén portadas, esto se funde en app.css y el archivo desaparece. REGLA para quien porte una página: usá estas clases. Si te falta un patrón, agregalo ACÁ con un comentario de en qué prototipo aparece — no lo metas inline en la página ni te inventes una clase nueva por página. Dieciocho dialectos es peor que un patrón imperfecto. ============================================================ */ /* ---------- Contenedor ---------- El diseño usa 24px de padding lateral; app.css traía 20px. */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} /* layout.php ya envuelve todo el contenido en .container, que ahora también usa --pad. Una .wrap ANIDADA no vuelve a aplicar el padding: si no, en móvil sumaban 48px laterales y la columna de 820 quedaba 8% más angosta que las secciones de 1120 de la misma página. */ .container .wrap{padding-left:0;padding-right:0} /* Texto largo: el diseño lo corta a 820px para que la línea no pase de ~85 caracteres. */ .prosa{max-width:820px} /* Una sección `wrap prosa` (columna de 820) se ALINEA A LA IZQUIERDA, no centrada: así arranca en el mismo margen que el hero y que las secciones anchas de la misma página. Antes iba centrada (el margin:0 auto del .wrap), y al quedar el hero pegado al margen la columna colgaba indentada a la derecha — se leía como texto flotando fuera de sitio. El max-width:820 sigue dando la medida de lectura; sólo cambia de dónde arranca. (`.prosa` SIN `.wrap` no se toca: ahí sólo acota un párrafo dentro de una sección ancha, que ya está a la izquierda.) */ .container .wrap.prosa{margin-left:0;margin-right:auto} /* Entradilla de página interior: el par H1 + bajada que abren las 16 páginas que no son la portada. El handoff la fija en 18,5px/1.62 en color secundario; .hero__lede de app.css sólo da ese color dentro de .hero--content, y estas páginas no llevan caja de hero. */ .entradilla{font-size:18.5px;line-height:1.62;color:var(--soft);margin:14px 0 0;max-width:62ch} /* Línea de metadatos de guía: "Lectura de 4 minutos · Fuente: CONSAR". Es gris y discreta; .updated (verde, con punto) es otra cosa: la fecha de verificación. */ .meta-guia{font-size:15px;color:var(--muted);margin:16px 0 0} /* Variante en fila de ENLACES: la que cierra «Por qué puedes confiar en estos datos» en la portada. Iba como un

sin clase, o sea a 16px y en negro de cuerpo: pesaba más que las tres celdas que venía a rematar. Acá baja a 15px grises y los separadores los pone el CSS. El · va en ::after (después de cada enlace salvo el último) y NO en ::before: escrito a mano quedaba pegado al enlace anterior, y en el teléfono, donde la fila envuelve, abría la línea siguiente colgando de la nada. Con ::after el separador se queda arriba, con su enlace. */ .meta-guia--enlaces{display:flex;flex-wrap:wrap;gap:2px 7px;margin-top:18px} /* inline-block y no inline: el separador vive DENTRO del , y el subrayado de `a:hover` (app.css) se propaga a los descendientes inline —arrastraba el · y sus 7px de aire, y en hover el enlace parecía terminar dos caracteres más allá—. Un inline-block es atómico y no lo hereda. El margen va a la izquierda para que quede fuera del área clicable. */ .meta-guia--enlaces a:not(:last-child)::after{content:"·";display:inline-block; color:var(--muted);margin-left:7px} /* ---------- [hidden] tiene que ganar ---------- El atributo `hidden` es sólo `display:none` en la hoja del navegador, con especificidad de selector de tipo: CUALQUIER regla nuestra con una clase le gana. Y hay dos que le ganaban: `.tabla-comp tbody tr{display:block}` del apilado móvil y `.rej` sobre sus hijos. El efecto era que el buscador «filtraba» y en el teléfono no desaparecía ni una fila. Es el único !important del archivo y se gana el lugar: `hidden` significa una sola cosa y no hay caso en que queramos mostrar algo marcado como oculto. */ [hidden]{display:none !important} /* ---------- Buscador (.dirsearch) ---------- El bloque base vive en app.css desde mx-issste. Sólo se corrigen dos cosas para que no desentone: el borde iba en --border-2 (#eef3f6), el mismo token casi invisible que había que corregir en las tablas —sobre el gris de página da 1,15:1 y el campo parecía flotar sin contorno— y el radio se alinea con el resto de los contenedores del rediseño. */ .dirsearch__box{border:1px solid var(--border);border-radius:var(--r)} .dirsearch__lbl{font-size:14px;color:var(--soft);font-weight:700} .dirsearch__count{color:var(--accent-t)} /* ---------- Resaltado de coincidencia del buscador ---------- app.css ya traía un `mark`, pero escopado a `.dir-list`/`.dir-rows` —las clases del directorio de clínicas que este sitio nunca usó— y en el amarillo del sistema anterior. Va en --orange-bg y no en el verde de acento por una razón concreta: el verde ya significa otra cosa en las tablas del sitio (la fila del primer lugar del comparador). Dos verdes con dos significados en la misma página se leen como el mismo. El naranja no está tomado. font-weight:600 y no bold: en una dirección larga, resaltar en negrita además del fondo hace que la coincidencia grite por encima del renglón entero. box-decoration-break para que un match partido en dos líneas conserve su esquina redondeada en las dos. */ mark{background:var(--orange-bg);color:inherit;font-weight:600;border-radius:3px;padding:0 2px; box-decoration-break:clone;-webkit-box-decoration-break:clone} /* ---------- Subtítulo de sección (.group-head) ---------- Se re-estila en vez de reescribirse, igual que se hizo con .card y .section-head: son seis usos en dos rutas y el markup (un H3 con id, destino de ancla) es correcto; lo que era del sistema anterior es la piel — 22px en --brand con una barrita azul vertical delante. El handoff no dibuja esa barrita en ningún prototipo. Su H3 de subtítulo es `font-weight:800;font-size:20px;color:#05374f`, que es lo que se aplica acá. La barrita se anula con content:none y no borrando la regla, porque la regla vive en app.css y todavía la usan las páginas sin portar. */ .group-head{font-size:20px;font-weight:800;color:var(--brand-d);letter-spacing:-.015em; gap:0;margin:34px 0 12px} .group-head::before{content:none} /* ---------- Migas de pan ---------- El separador era un chevron SVG en --border (#dde7ed) sobre un fondo de --bg (#f2f6f8): 1,1:1 de contraste, no se veía. Y no era sólo cuestión de subirle el color: el handoff no usa chevron. Las cinco páginas que dibujan migas (comparador/FichaAfore.dc.html, comparador/Comparador.dc.html, calculadora/Calculadora.dc.html y las dos institucionales) separan con una BARRA de texto que hereda el gris del contenedor, sin color propio. El resto del bloque también se alinea con el prototipo: 13,5px en móvil (en DESKTOP vuelve a 14,5 por pedido, ver el media query de abajo); enlaces en --muted en vez del azul de marca; gap de 8px. El crumb actual se queda en --soft y peso 600, que es lo único que ya coincidía y lo que lo distingue de sus ancestros. El comportamiento de app.css NO se toca: la línea única con scroll y máscara (que evita un salto de 29px cuando carga el webfont) y el plegado a dos renglones en móvil siguen igual. Acá sólo cambia la piel. */ .breadcrumbs ol{gap:8px;font-size:13.5px} /* En desktop el breadcrumb va a 14,5px (por pedido). El corte 561px es el mismo del bloque móvil de app.css: a ≤560px el breadcrumb pliega a dos renglones y se queda en 13,5. */ @media (min-width:561px){.breadcrumbs ol{font-size:14.5px}} .breadcrumbs a{color:var(--muted);font-weight:400} .breadcrumbs a:hover{color:var(--brand-br)} /* margin-right y no sólo el gap del

    : el separador vive DENTRO del
  1. del crumb que sigue, así que el gap lo separa del crumb anterior pero no del suyo propio, y quedaba "/AFORES" pegado. En el prototipo los tres son hermanos del mismo flex y respiran igual a los dos lados. */ .breadcrumbs .sep{color:var(--muted);font-weight:400;margin-right:8px} /* ---------- Barra superior de estado del dato ---------- Va en todas las páginas y la emite partials/header.php, a sangre y arriba de todo. El diseño la quiere visible, no en letra chica: es donde se dice que las cifras son preliminares (decisión de producto nº3 del handoff). */ .databar{background:var(--brand-d);color:#cfe3ec} .databar__in{display:flex;align-items:center;gap:9px;padding:9px var(--pad); max-width:var(--wrap);margin:0 auto;font-size:12.5px;font-weight:500} /* El punto va INLINE como viñeta dentro del mensaje (no como ítem flex aparte): así nunca queda solo en su renglón cuando el texto envuelve en móvil. */ .databar__msg{min-width:0} .databar__dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);vertical-align:middle;margin-right:8px} .databar__short{display:none} /* versión corta: sólo en móvil, para que entre en una línea */ /* "Sitio no oficial" al final de la franja: el prototipo no lo dibuja, pero es la restricción número uno del sitio y antes vivía en esta misma barra. */ .databar__no{margin-left:auto;color:#cfe3ec;font-weight:700;flex:none; border:1px solid rgba(255,255,255,.24);border-radius:var(--r-pill);padding:2px 10px} .databar__no:hover{color:#fff;background:rgba(255,255,255,.1);text-decoration:none} /* En móvil la databar se queda solo con el mensaje del corte: "Sitio no oficial" se oculta acá (sigue en el footer, en el aviso del contenido y en su página propia) para no ocupar una tercera línea con el texto ya envuelto. */ /* El enlace "Sitio no oficial" YA NO se oculta acá: sólo se acorta a "No oficial" por el par full/short que lleva adentro. Ocultarlo ahorraba un renglón y a cambio dejaba la restricción número uno del sitio sin aparecer en toda la parte alta de la página en móvil. */ @media (max-width:560px){.databar__in{gap:4px 9px}.databar__full{display:none}.databar__short{display:inline} .databar__no{padding:2px 8px}} /* ---------- Bloque oscuro (hero de portada y CTA de cierre) ---------- Los anillos concéntricos del prototipo son decorativos y se generan con ::before/::after en vez de con cuatro divs vacíos: el mismo resultado sin ensuciar el markup ni el lector de pantalla. display:block explícito porque el bloque también se usa como (índice de guías): en un inline, overflow:hidden no recorta y los anillos se desparraman por la página. */ .slab{display:block;position:relative;overflow:hidden;isolation:isolate;background:var(--brand); border-radius:var(--r-cta);padding:56px 48px 52px;box-shadow:0 24px 50px -28px rgba(7,55,79,.75)} .slab>*{position:relative;z-index:1} .slab::before,.slab::after{content:"";position:absolute;border-radius:50%;z-index:0;pointer-events:none} .slab::before{top:-420px;right:-300px;width:900px;height:900px;border:70px solid rgba(3,42,60,.15)} .slab::after{bottom:-620px;right:-120px;width:820px;height:820px;border:55px solid rgba(3,42,60,.12)} /* El degradado diagonal del prototipo: sin él el hero es un rectángulo plano en vez de un azul modelado. Va como tercera capa sobre los anillos. */ .slab{background-image:linear-gradient(155deg,rgba(10,106,148,.5) 0%,rgba(7,77,111,0) 55%,rgba(5,55,79,.55) 100%)} .slab h1,.slab h2,.slab h3{color:#fff} .slab p{color:#cfe3ec} .slab strong{color:#fff} .slab a:not(.btn){color:var(--accent-o)} .slab .eyebrow{color:var(--accent-o)} .slab .dato__n{color:#fff} .slab .dato__lbl{color:var(--accent-o)} /* La métrica destacada del bloque oscuro (la tasa de reemplazo) va en verde, no en blanco. */ .slab .dato__n--o{color:var(--accent-o)} /* Un contenedor CLARO dentro del bloque oscuro (una .tarjeta, un .panel, una .celda que no sea --o) tiene que recuperar los colores de fondo claro: si no, `.slab p` gana por especificidad y el texto sale azul clarito sobre blanco. */ .slab .tarjeta p,.slab .panel p,.slab .celda:not(.celda--o) p{color:var(--soft)} .slab .tarjeta h2,.slab .tarjeta h3,.slab .panel h2,.slab .panel h3, .slab .celda:not(.celda--o) h3{color:var(--brand-d)} .slab .tarjeta .dato__n,.slab .panel .dato__n,.slab .celda:not(.celda--o) .dato__n{color:var(--brand-d)} .slab .tarjeta .dato__lbl,.slab .panel .dato__lbl,.slab .celda:not(.celda--o) .dato__lbl{color:var(--muted)} .slab--deep{background-color:var(--brand-d);box-shadow:var(--sh-3)} /* Variante CTA en FILA: texto a la izquierda, botón a la derecha. Es el cierre de casi todos los prototipos (Comparador, FichaAfore, Calculadora, CambioAfore, MiAfore, las cuatro guías y las tres institucionales). Con .slab a secas el botón cae debajo y el bloque crece 90px. */ .slab--cta{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap; padding:44px 48px} .slab--cta::after{bottom:-620px;left:-220px;right:auto} .slab--cta__txt{max-width:46ch} /* El titular del CTA cuando NO es un encabezado. sb_render_official_cta() lo emite en un

    porque ese helper corre en 12 rutas y meterles un

    nuevo les cambiaría el esquema de encabezados a todas por una razón de estilo. Tamaño y peso, los del titular del prototipo. */ .slab--cta__t{font:800 24px/1.2 var(--font);color:#fff;margin:0 0 6px;letter-spacing:-.015em} /* El titular del CTA es 28px en el prototipo, no los 32 del H2 de sección: es un cierre, no una sección nueva. Sin esto la banda crece ~80px de alto. */ .slab--cta h2,.slab--cta h3{font-size:28px;line-height:1.2} .slab--cta__txt>:last-child{margin-bottom:0} .slab--cta .btn{flex:none} /* Variante PANEL: el bloque oscuro metido dentro de una columna, no a ancho completo. .slab trae padding y anillos dimensionados para un hero; en una columna de ~530px queda holgado y el titular se parte. (Calculadora: el bloque de resultado.) */ .slab--panel{border-radius:var(--r-xl);padding:34px 36px} .slab--panel::after{display:none} .slab--panel::before{top:-380px;right:-220px;width:760px;height:760px;border-width:60px} /* Fila de métricas del bloque oscuro, separada por un filete claro. (Calculadora.) */ .slab__stats{border-top:1px solid rgba(255,255,255,.16);margin-top:30px;padding-top:24px} /* ---------- Panel y tarjeta ---------- */ .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl); padding:30px 36px;box-shadow:var(--sh-1)} /* El H2 de un panel es subordinado al H2 de sección: 25px, no los 32px globales. */ .panel>h2,.panel__head h2{font-size:25px;line-height:1.25} /* Cabecera de panel: título a la izquierda, metadato o enlace de acción a la derecha, alineados abajo. (Comparador: "Indicador de Rendimiento Neto · SB 85-89" + "Nacidos entre 1985 y 1989". Portada: "Las mejores AFORES hoy" + "Ver la tabla completa →".) */ .panel__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px; flex-wrap:wrap;margin-bottom:16px} .panel__head h2,.panel__head h3{margin:0 0 6px} .panel__head>*{min-width:0} .panel__head__meta{font-size:13.5px;color:var(--muted);flex:none} /* Cuando el metadato es un enlace de acción ("Ver la tabla completa →") pesa más: 15px/700. */ a.panel__head__meta{font-weight:700;font-size:15px;color:var(--brand-br);display:inline-flex; align-items:center;gap:7px} a.panel__head__meta .ico{width:16px;height:16px} .panel__head p{margin:0;color:var(--muted);font-size:15.5px} /* El H3 dentro de un panel es 18,5px, no los 20 globales: dentro de un panel de 25px de título, un H3 de 20 compite con su propio encabezado. */ .panel>h3:not(.group-head){font-size:18.5px} .panel>:last-child{margin-bottom:0} /* Compatibilidad con las ~40 secciones que vienen de sb_box(): su contenido se escribió contra `.box ul li::before` de app.css, que es quien pinta el cuadrito verde y quita la sangría de 40px del navegador. Escopada a .box, al mudarse el contenido al panel la lista caía al bullet por defecto. Es la misma regla, con el mismo token, en el contenedor nuevo. Las listas con marca propia (.lista-check / .lista-x) ganan por especificidad: 0,2,1 contra los 0,1,2 de acá. */ .panel>ul,.panel ul.lista{margin:14px 0;padding-left:0;list-style:none} .panel>ul>li{position:relative;padding:6px 0 6px 26px;line-height:1.6} .panel>ul>li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px; border-radius:2px;background:var(--accent)} .tarjeta{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l); padding:24px 28px;box-shadow:var(--sh-1)} /* Tipografía propia: sin esto la tarjeta hereda h3 20px y cuerpo 17px/ink y pesa bastante más que en el prototipo, que usa 17,5-18px y 15px en color secundario. */ .tarjeta h3{font-size:18px;line-height:1.3;margin:0 0 6px} /* :not(.eyebrow) porque el rótulo en versalitas suele ir en un

    dentro de la tarjeta y esta regla, más específica que .eyebrow--acento, le pisaba el tamaño y el color verde. */ .tarjeta p:not(.eyebrow){font-size:15px;line-height:1.6;color:var(--soft)} .tarjeta>:last-child{margin-bottom:0} .tarjeta--alta{box-shadow:var(--sh-2)} /* Tarjeta destacada: la recomendada / la ganadora. Borde verde de 2px y sombra verde; es el único mecanismo con el que el diseño dice "ésta es la que te señalamos". Compensa el px de más en el padding para que no salte respecto de sus hermanas. */ .tarjeta--acento{border:2px solid var(--accent);box-shadow:var(--sh-accent);padding:23px 27px} /* Variante azul: la columna elegida de un comparador de dos (renta vitalicia). */ .tarjeta--sel{border:2px solid var(--brand-l);padding:23px 27px} .tarjeta--sel .eyebrow{color:var(--brand)} /* Filas clave→valor dentro de una tarjeta, separadas por filete. Etiqueta a la izquierda en gris, valor a la derecha en negrita. (En corto · Ten a la mano · Monto/Se hereda/Riesgo.) */ .kv{margin:14px 0 0;display:block} /* Ancladas al pie: el diseño alinea la franja de datos entre las tarjetas de una misma fila para poder compararlas de un barrido horizontal. */ .tarjeta--via{display:flex;flex-direction:column} .tarjeta--via .kv{margin-top:auto} .kv__f{display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:9px 0;border-top:1px solid var(--border-2);font-size:15px} .kv__k{color:var(--muted);flex:none} .kv__v{color:var(--ink);font-weight:600;text-align:right} .celda{background:var(--surface-alt);border:1px solid var(--border-2);border-radius:var(--r);padding:18px 20px} /* Celda TRANSLÚCIDA sobre bloque oscuro: las cuatro cajas de vidrio del CTA de la portada. Sin esto quedan cuatro tarjetas blancas pegadas sobre azul, que se lee como otra sección. */ .celda--o{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16); border-radius:13px;padding:20px;color:rgba(255,255,255,.72)} .celda--o .dato__lbl,.celda--o .eyebrow{color:var(--accent-o);margin-bottom:10px;display:block} .celda--o h3,.celda--o .celda__t{font-weight:700;font-size:16px;color:#fff;margin:0 0 6px;line-height:1.3} .celda--o p,.celda--o .muted{font-size:14px;line-height:1.5;color:rgba(255,255,255,.72);margin:0} /* ---------- Rejilla ---------- */ .rej{display:grid;gap:16px} /* Un párrafo pegado a una rejilla de tarjetas: `p` sólo trae margin-BOTTOM (app.css), así que el texto que sigue a una .rej quedaba sin aire arriba, tocando las tarjetas. Se le da la misma separación que hay entre secciones. */ .rej + p{margin-top:24px} .rej--2{grid-template-columns:repeat(2,1fr)} .rej--3{grid-template-columns:repeat(3,1fr)} .rej--4{grid-template-columns:repeat(4,1fr)} .rej--5{grid-template-columns:repeat(5,1fr)} /* Asimétrica: panel de datos fijo + resultado elástico. Es la rejilla de la herramienta de la calculadora (400px + 1fr); con .rej--2 la columna de resultado pierde 140px y el titular de la pensión se parte en dos líneas. */ .rej--lateral{grid-template-columns:minmax(340px,400px) 1fr} /* Con aside fijo a la derecha: el hero partido de los prototipos de trámite (1fr + 340px). */ .rej--aside{grid-template-columns:1fr 340px;gap:40px;align-items:start} /* ---------- Separación entre secciones: 56-64px según el handoff ---------- */ /* Ritmo del prototipo (más apretado que el README de 56-64px que seguía la pasada anterior): el diseño separa la cabecera de página del breadcrumb en ~24px y las secciones mayores en ~40px. */ .secc{margin-top:40px} .secc--corta{margin-top:24px} /* ---------- Rótulo de sección en versalitas ---------- El handoff pone arriba de cada H2 un rótulo 800/12px en mayúsculas, y lo COLOREA: verde casi siempre, naranja en una sección por página. .eyebrow de app.css sólo existe en gris, así que sin estos modificadores se pierde el código de color con el que el diseño distingue "Datos" de "Herramienta" o "El calendario" de "Qué hacer". */ .eyebrow--acento{color:var(--accent-t)} .eyebrow--naranja{color:var(--orange-t)} /* Dentro de .section-head, la regla `.section-head p` (más específica) pisa tamaño y color del rótulo si va en un

    . Se le gana acá para no tener que sacarlo del bloque. */ .section-head .eyebrow,.section-head p.eyebrow{font:800 12px/1 var(--font);letter-spacing:.1em; text-transform:uppercase;margin:0 0 10px;max-width:none} .section-head p.eyebrow--acento{color:var(--accent-t)} .section-head p.eyebrow--naranja{color:var(--orange-t)} /* La bajada de sección: el diseño la quiere como texto de lectura (17px, color secundario), no como pie de foto gris de 15px. */ .section-head p:not(.eyebrow){font-size:17px;color:var(--soft);max-width:62ch} /* En la tarjeta, el rótulo va SIEMPRE encima del título. A ≤560px .card pasa a grid-template-columns:auto 1fr (pensado para poner el .itile al lado del h3) y el rótulo se mete en el hueco del ícono: se leía "TRÁMITE ¿Cuál es mi AFORE?" en una línea. */ .card .eyebrow{grid-column:1/-1;display:block;margin-bottom:10px} /* Píldora verde sobre fondo claro, arriba del H1 de las guías ("Deducible del ISR", "Disponible a los 46 días"). Va con la clase --verde en las entradillas sueltas, y sale sola para el eyebrow que sb_hero emite dentro de .hero--content (ahí no lleva la clase). */ .section-eyebrow--verde, .hero--content .section-eyebrow{color:var(--accent-t);background:var(--accent-bg); border:1px solid var(--accent-bd);padding:8px 14px} /* Aire entre la píldora y el título: el span es inline-flex y el H1 no trae margen superior, así que quedaban pegados. (En el hero el gap lo da .hero h1; acá no hay hero.) */ .section-eyebrow--verde + h1{margin-top:14px} /* Tile de ícono verde: así marca el diseño las tarjetas de calculadora frente a las de guía. */ .itile--verde{background:var(--accent-bg)} .itile--verde .ico{color:var(--accent-d)} /* ---------- Chips de generación (comparador) ---------- Es el único control con estado del rediseño: elegir siefore recompone la tabla. */ .gens{display:flex;flex-wrap:wrap;gap:8px} .gen{display:inline-flex;align-items:center;min-height:40px;padding:0 16px; border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface); font:700 14px/1 var(--font);color:var(--soft);cursor:pointer;transition:.15s} .gen:hover{border-color:var(--brand-br);color:var(--brand)} /* El chip elegido va VERDE y no azul: el azul es el color de la marca y lo lleva medio sitio —el header, los títulos, las barras de la tabla—, así que como "seleccionado" no se distinguía de lo demás. El verde es el color de acción del sistema. --accent es el MISMO verde del botón "Calcula tu pensión" del header (.nav__cta), elegido para que el sitio tenga un solo verde de acción y no dos parecidos. ⚠️ Contraste medido: blanco sobre --accent da 3,0:1, y el texto del chip son 13,5px en negrita, o sea texto normal para WCAG, que pide 4,5:1. Se asume a conciencia porque es la misma combinación que ya usa el CTA del header en todo el sitio: cambiarla acá sola daría dos verdes distintos. Si algún día se sube el contraste, hay que subirlo en los dos lugares —--accent-d da 4,0:1 y --accent-t 5,0:1—, no sólo acá. */ .gen[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff} /* Control segmentado: tres tramos IGUALES, no píldoras de ancho variable. El prototipo de la calculadora lo usa para "Ahorro voluntario mensual" (verde) y "Edad de retiro" (azul). */ .seg{display:flex;gap:8px} .seg .chip{flex:1} .seg .chip span{display:block;width:100%;text-align:center;min-height:44px;line-height:26px; border-radius:var(--r-s)} .seg--verde .chip input:checked+span{background:var(--accent-bg);border-color:var(--accent); color:var(--accent-t)} /* ---------- Barras de IRN ---------- El ancho lo fija la página con --v (0 a 100) para no escribir estilos inline por fila. display:block en las dos: son alturas fijas y en un (inline) desaparecen. El CARRIL es --border-2, no --bar-off: --bar-off (#b8c8d2) es el color del RELLENO de las posiciones de abajo. Con el carril de ese gris, una barra vacía se lee como una barra llena —pasaba en /aportaciones-voluntarias, donde el escenario "sin ahorro voluntario" parecía el más grande de los tres— y el modificador --baja quedaría gris sobre gris. */ .barra{display:block;height:10px;border-radius:var(--r-bar);background:var(--border-2);overflow:hidden} .barra__v{display:block;height:100%;border-radius:var(--r-bar);background:var(--brand-l); width:calc(var(--v,0) * 1%)} .barra__v--top{background:var(--accent)} .barra__v--baja{background:var(--bar-off)} /* Barra alta: los gráficos de comparación de RendimientoNeto, AhorroVoluntario, RetiroDesempleo y CambioAfore, que no son celdas de tabla sino el gráfico de la sección. */ .barra--alta{height:30px;border-radius:8px} .barra--alta .barra__v{border-radius:8px} /* Fila de la barra alta: etiqueta a la izquierda, valor a la derecha, barra debajo. */ .barra-fila{display:flex;justify-content:space-between;align-items:baseline;gap:16px; margin:0 0 7px;font:600 14.5px/1.3 var(--font);color:var(--soft)} .barra-fila__v{font-weight:800;color:var(--brand-d);font-variant-numeric:tabular-nums;flex:none} .barra-grupo{display:grid;gap:18px} /* ---------- Fila de dato con cifra grande ---------- */ .dato{display:flex;flex-direction:column;gap:4px} .dato__n{font-weight:800;font-size:26px;letter-spacing:-.025em;font-variant-numeric:tabular-nums; color:var(--brand-d);line-height:1} .dato__n--xl{font-size:60px} /* Variantes de color: el diseño colorea la cifra según lo que significa — verde el dato bueno (0,52% de PENSIONISSSTE, la tasa de reemplazo, el 1.º de 10), gris el dato de contexto (promedio del año pasado, el 10.º de 10), naranja la advertencia. */ .dato__n--acento{color:var(--accent-t)} .dato__n--naranja{color:var(--orange-t)} .dato__n--apagado{color:var(--muted)} /* El denominador de una posición: el «de 10» que acompaña al «10°» del caso Coppel (comparador/Comparador.dc.html). Va en el mismo color que la cifra pero más chico, para que se lea como una sola unidad y no como dos datos. Sin esta regla heredaba los 26px de .dato__n y el «de 10» pesaba igual que la posición. */ .dato__de{font-size:19px;font-weight:700;letter-spacing:0} .dato__lbl{font:800 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .dato__lbl--acento{color:var(--accent-t)} .dato__lbl--naranja{color:var(--orange-t)} /* La banda de cifras de la portada pinta el rendimiento en verde y el resto en azul. */ .stat__n--acento{color:var(--accent-d)} /* Texto secundario dentro de una celda o tarjeta: 14,5px en color secundario. Sin esto hay que elegir entre heredar el cuerpo (17px) o usar .muted (13,5px y gris de metadato). */ .txt-s{font-size:14.5px;line-height:1.55;color:var(--soft);margin:0} /* ---------- Aviso ---------- El prototipo le pone a la izquierda un disco naranja de 24-26px con un "!" blanco. El margen propio no es cosmético: .aviso reemplaza a .callout, que traía margin:18px 0. Sin él, un aviso suelto detrás de un .panel queda pegado y hay que compensarlo con una clase de separación de sección, que es un apaño. */ .aviso{background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn); border-radius:var(--r);padding:16px 18px;margin:18px 0;font-size:15.5px;line-height:1.6} .aviso strong{color:var(--warn)} .aviso--badge{display:flex;gap:10px;align-items:flex-start} .aviso--badge::before{content:"!";width:24px;height:24px;border-radius:50%;background:var(--orange); color:#fff;font:800 14px/24px var(--font);text-align:center;flex:none;margin-top:1px} .aviso--badge>:last-child{margin-bottom:0} /* Los otros cuatro tonos del aviso. No están dibujados en ningún prototipo —el handoff sólo trae el ámbar— pero hacían falta: el sitio tiene ~130 `.callout` de tipo info/ok/tip repartidos en 40 páginas, y sus colores (azul #1d5aa8, morado #6b4ba8) no aparecen en ninguno de los 18 prototipos. Dejarlos era dejar la costura más visible del sitio justo en medio del contenido ya convertido; pintarlos todos de ámbar habría convertido una nota en una advertencia. La salida es traducirlos a la paleta del rediseño conservando la distinción: nota neutra (azul de marca), confirmación (verde de acento) y error (rojo, que sí es un color del sistema). El disco lleva el glifo por tipo, así que la diferencia se sostiene también en gris. */ .aviso--info,.aviso--tip{background:var(--surface-alt);border-color:var(--border);color:var(--soft)} .aviso--info strong,.aviso--tip strong{color:var(--brand-d)} .aviso--info::before{content:"i";background:var(--brand-l)} .aviso--tip::before{content:"✦";background:var(--brand-l);font-size:13px} .aviso--ok{background:var(--accent-bg);border-color:var(--accent-bd);color:#3d5a30} .aviso--ok strong{color:var(--accent-t)} .aviso--ok::before{content:"✓";background:var(--accent)} .aviso--danger{background:var(--danger-bg);border-color:var(--danger-bd);color:#7a2019} .aviso--danger strong{color:var(--danger)} .aviso--danger::before{background:var(--danger)} /* Aviso sin caja: sólo un filete arriba y el disco. Es el del paso 1 del comparador, que en el diseño no es una alerta sino una nota al pie del selector. */ .aviso--nota{background:transparent;border:0;border-top:1px solid var(--border-2); border-radius:0;padding:18px 0 0;margin-top:20px;font-size:14.5px} /* ---------- Listas de requisitos y de errores ---------- .box ul li::before pinta un cuadrito VERDE en las dos, así que el panel de errores se leía como una segunda lista de requisitos. El contraste ✓/× es lo que las distingue. */ /* La especificidad tiene que ganarle a `.box ul li::before` de app.css (0,1,2), que es quien pinta hoy el cuadrito verde en las DOS listas; por eso van calificadas con ul. */ ul.lista-check,ul.lista-x{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px} ul.lista-check li,ul.lista-x li{position:relative;padding:0 0 0 34px;font-size:15.5px; line-height:1.6;color:var(--soft)} ul.lista-check li::before,ul.lista-x li::before{position:absolute;left:0;top:1px;width:22px; height:22px;border-radius:6px;font:800 13px/22px var(--font);text-align:center} ul.lista-check li::before{content:"✓";background:var(--accent-bg);color:var(--accent-t)} ul.lista-x li::before{content:"×";background:var(--orange-bg);color:var(--orange-t)} ul.lista-check li strong,ul.lista-x li strong{display:block;color:var(--brand-d)} ul.lista-check li br,ul.lista-x li br{display:none} /* Lista con viñeta simple, fuera de una caja. La que dibuja el cuadrito verde es `.box ul li::before` (app.css), escopada a .box: en cuanto un

      se muda de una caja vieja a un .panel, cae a la viñeta por defecto del navegador con 40px de sangría, que es un dialecto distinto en medio de una página convertida. Y .lista-check no cubre el caso general, porque su `li strong{display:block}` sólo tiene sentido cuando el ABRE el ítem: con un a mitad de frase parte la oración en tres renglones. */ ul.lista{list-style:none;margin:14px 0;padding:0} ul.lista li{position:relative;padding:6px 0 6px 26px;line-height:1.6;color:var(--soft)} ul.lista li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px; border-radius:2px;background:var(--accent)} ul.lista li strong{color:var(--brand-d)} /* ---------- Banda CTA verde clara ---------- El cierre de la portada: texto a la izquierda, botón a la derecha. Se venía resolviendo con .callout--ok, que apila y tiene la mitad del padding. */ .cta-verde{background:var(--accent-bg);border:1px solid var(--accent-bd);border-radius:var(--r-l); padding:32px 36px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap} .cta-verde h2{font-size:24px;margin:0 0 8px} .cta-verde p{font-size:15.5px;line-height:1.6;color:#3d5a30;margin:0} .cta-verde__txt{max-width:52ch} .cta-verde .btn{flex:none} /* ---------- Destacado de dos tonos (índice de guías) ---------- El único bloque del handoff que parte la caja en dos azules. */ .destacado{display:grid;grid-template-columns:1.3fr 1fr;gap:0;border-radius:var(--r-xl);overflow:hidden} .destacado__a{background:var(--brand);padding:34px 36px} .destacado__b{background:var(--brand-d);padding:34px 36px;display:flex;flex-direction:column;justify-content:center} .destacado h2,.destacado h3{color:#fff} .destacado p{color:rgba(255,255,255,.75)} .destacado .eyebrow{color:var(--accent-o)} /* Badge translúcido con número (73 / 97), no el chip claro de .itile. */ .badge-o{width:52px;height:52px;flex:none;border-radius:12px;background:rgba(255,255,255,.1); display:grid;place-items:center;font:800 20px/1 var(--font);color:var(--accent-o)} /* ---------- Franja de fases (línea de tiempo del traspaso) ---------- Un solo panel con divisores, no cuatro tarjetas sueltas: cuatro tarjetas no leen como una línea de tiempo. */ .fases{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--border-2); border-radius:var(--r-l);overflow:hidden;background:var(--surface);margin:16px 0} .fases>div{padding:22px 24px} .fases>div+div{border-left:1px solid var(--border-2)} .fase__t{font:800 15px/1.2 var(--font);color:var(--brand);margin:0 0 10px} .fase__b{height:5px;border-radius:3px;background:var(--brand-l);margin:0 0 12px} .fase__b--off{background:var(--bar-off)} .fase h3{font-size:15.5px;margin:0 0 5px;color:var(--brand-d)} .fase p{font-size:14.5px;line-height:1.55;color:var(--soft);margin:0} /* Variante de 4 columnas para .info-levels, que en app.css está fija en 3. */ .info-levels--4{grid-template-columns:repeat(4,1fr)} /* ---------- Cinco pasos en fila con línea conectora ---------- sb_steps() usa auto-fill minmax(215px,1fr), que dentro de 1120 nunca da cinco columnas: el H2 dice "Cinco pasos" y debajo se veían cuatro y luego uno. */ /* El número de pasos entra por --pasos, NO por un `style="grid-template-columns:…"` inline. Es la diferencia entre que funcione y que no: un estilo inline le gana a cualquier regla de hoja, media query incluida, así que con la rejilla escrita inline el bloque se quedaba en N columnas también en el teléfono. Medido con los 4 pasos de /estado-de-cuenta-afore: 451px de scrollWidth en un viewport de 390. Con la custom property, el inline sólo aporta el número y la media query de ≤980px puede pisar la rejilla. */ .pasos-h{list-style:none;margin:18px 0 0;padding:0;display:grid; grid-template-columns:repeat(var(--pasos,5),1fr); gap:16px;position:relative} .pasos-h::before{content:"";position:absolute;top:24px;left:10%;right:10%;height:3px; background:var(--border-2);z-index:0} .pasos-h>li{position:relative;z-index:1} .pasos-h__n{width:48px;height:48px;border-radius:50%;background:var(--brand);color:#fff; display:grid;place-items:center;font:800 18px/1 var(--font);margin:0 0 14px; box-shadow:0 0 0 6px var(--surface)} .pasos-h>li:last-child .pasos-h__n{background:var(--accent)} .pasos-h h3{font-size:16px;margin:0 0 5px;color:var(--brand-d)} .pasos-h p{font-size:14.5px;line-height:1.55;color:var(--soft);margin:0} /* ---------- Tabla comparativa ---------- Base de ESCRITORIO, que faltaba: hasta ahora había que combinarla con .table de app.css y eso traía la banda azul de encabezado, que es el patrón del sitio VIEJO. El diseño quiere la cabecera CLARA en versalitas sobre filete, y la fila del primer lugar en verde. */ .tabla-comp{width:100%;border-collapse:collapse;font-size:15.5px} /* El encabezado quedaba encajonado entre dos filetes: el de la barra de filtro y el suyo, a pocos píxeles uno del otro. Se quita el de la barra (más abajo) y queda sólo este, que es el que separa cabecera de datos. Los rótulos suben de 11,5 a 12,5px y de --muted a --soft: a 11,5 en gris claro no se leían, se adivinaban. */ /* vertical-align:bottom porque los rótulos largos envuelven a dos líneas ("Edad aproximada en 2026") y con el centrado por defecto los de una línea quedaban flotando a media altura, desalineados contra el de dos. Alineados abajo, todos apoyan sobre el mismo filete. */ .tabla-comp thead th{background:transparent;color:var(--soft);text-align:left; font:800 12.5px/1.35 var(--font);letter-spacing:.06em;text-transform:uppercase; vertical-align:bottom;padding:0 12px 12px;border-bottom:2px solid var(--border)} /* El filete va en --border y no en --border-2. El handoff usa el hairline clarísimo (#eef3f6) entre filas, pero ese mismo handoff pone la tabla sobre blanco Y le da zebra; suelto y sobre el gris de página no se veía nada. --border (#dde7ed) es el token que el propio handoff usa para el filete de debajo de la cabecera, así que no es un color inventado: es el mismo lenguaje, aplicado a una fila. */ /* 10px de alto y no 13: con el isotipo de 25px la fila ya tiene su propia altura mínima y los 13px la estiraban de más. Es la vista TABLA; el modo tarjeta de ≤720px lleva el suyo. */ .tabla-comp td{padding:10px 12px;border-top:0;border-bottom:1px solid var(--border);color:var(--soft)} .tabla-comp tbody tr{background:transparent} /* Zebra suave. En una tabla de tres columnas anchas —la de siefores tiene la última pegada al margen derecho— el filete solo no alcanza para no perder el renglón a mitad de camino. OJO: empata en especificidad con .fila--top de más abajo, que gana por ir después. Si esta regla se mueve hacia abajo, la fila del primer lugar pierde el verde. */ .tabla-comp tbody tr:nth-child(even){background:var(--surface-alt)} .tabla-comp tbody tr:last-child td{border-bottom:0} .tabla-comp td:first-child,.tabla-comp th:first-child{padding-left:2px} .tabla-comp td:last-child,.tabla-comp th:last-child{padding-right:4px} .tabla-comp td strong,.tabla-comp td a{color:var(--brand-d);font-weight:700} /* Columnas numéricas a la derecha, con cifras de ancho fijo. */ .tabla-comp .num,.tabla-comp th.num,.tabla-comp td.num{text-align:right;font-variant-numeric:tabular-nums; font-weight:800;color:var(--brand-d)} /* En el ENCABEZADO, la columna IRN va en el mismo gris que el resto de los rótulos (así lo dibuja el prototipo: los cuatro títulos en #74828f). Sin esto, .tabla-comp th.num la pintaba azul oscuro y desentonaba. Los VALORES IRN del cuerpo (td.num) siguen oscuros. Va antes de la regla --marco para no pisar el blanco de la cabecera azul. */ .tabla-comp thead th.num{color:var(--soft)} .tabla-comp .pos{width:26px;color:var(--muted);font-weight:800;font-variant-numeric:tabular-nums} .tabla-comp .col-barra{width:34%} /* Fila del primer lugar. Es el único sitio donde el diseño usa el verde dentro de una tabla, y es la única lectura accionable de la página: "ésta es la primera de tu generación". */ .tabla-comp tbody tr.fila--top{background:var(--accent-bg-2)} .tabla-comp tr.fila--top .pos{color:var(--accent-d)} .tabla-comp tr.fila--top .num{color:var(--accent-t)} /* ---------- Botones: el diseño los quiere más altos que los actuales ---------- */ .btn--xl{min-height:52px;padding:0 24px;font-size:15.5px} /* Botón fantasma SOBRE OSCURO: transparente con borde blanco. El .btn--ghost del sitio es blanco sólido, y en el hero deja dos botones sólidos compitiendo. */ .btn--ghost-o{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)} .btn--ghost-o:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.6)} .btn--ghost-o .ico{color:#fff} /* ============================================================ Responsive. Traduce docs/design/handoff/responsive.css, que en el prototipo atacaba estilos inline con selectores de atributo; acá son clases de verdad. ============================================================ */ @media (max-width:980px){ .rej--2,.rej--3,.rej--4,.rej--5,.rej--lateral,.rej--aside{grid-template-columns:1fr} .rej--aside{gap:24px} .slab{padding:32px 22px} .slab--cta{padding:32px 22px} .slab--panel{padding:24px 20px} .panel{padding:24px 20px} .secc{margin-top:44px} .cta-verde{padding:26px 22px} .destacado{grid-template-columns:1fr} .fases,.info-levels--4{grid-template-columns:1fr} .fases>div+div{border-left:0;border-top:1px solid var(--border-2)} /* Los cinco pasos se apilan y la línea conectora deja de tener sentido. */ .pasos-h{grid-template-columns:1fr;gap:14px} .pasos-h::before{display:none} .pasos-h__n{width:40px;height:40px;font-size:16px;margin-bottom:10px} } /* ---------- ≤720px: la tabla comparativa deja de ser tabla ---------- Es el patrón que, según el inventario del nicho, ningún competidor resolvió: cada fila se vuelve tarjeta y la celda muestra su encabezado desde data-label. Nunca scroll horizontal. */ @media (max-width:720px){ /* display:block es imprescindible, no cosmético: en un `table-header-group` el navegador ignora width/height/overflow, así que el thead "oculto" seguía midiendo sus 488px con nowrap y empujaba el scroll horizontal de toda la página (medido: documento de 551px en un viewport de 386). Convertido en bloque, el clip recorta de verdad. Los rótulos no se pierden: cada td los reimprime desde data-label en su ::before. */ .tabla-comp thead{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* `tbody tr` y no `tr` a secas: las reglas de escritorio que fijan el fondo de la fila (transparente, y la zebra) van con esa misma especificidad, y las media queries no suman ninguna. Con el selector corto la tarjeta se quedaba SIN su blanco —medido: fondo rgba(0,0,0,0)— y encima una de cada dos salía gris por heredar la zebra, que acá no significa nada porque cada fila ya es una tarjeta aparte. */ /* flex y no block: la tarjeta necesita poner el badge de posición y el nombre de la AFORE en LA MISMA línea (ver más abajo). Con wrap, todo lo demás sigue cayendo de a un renglón, que es lo que hacía el block. El row-gap va en 0 a propósito: la separación vertical entre celdas ya la da el padding de cada td, y sumarle gap las despegaba de más. */ .tabla-comp tbody tr,.tabla-comp tbody tr:nth-child(even){display:flex;flex-wrap:wrap; align-items:center;gap:0 12px; background:var(--surface);border:1px solid var(--border); border-radius:var(--r-l);padding:14px 16px;margin-bottom:12px;box-shadow:var(--sh-1)} .tabla-comp tbody tr.fila--top{border-color:var(--accent);background:var(--accent-bg-2)} /* El filete entre filas es de la vista tabla; acá separan los márgenes de las tarjetas. */ .tabla-comp tbody tr:last-child td,.tabla-comp td{border-bottom:0} /* flex-wrap NO es un detalle: sin él, esta regla es la que desbordaba la página entera. La celda es el contenedor flex y su contenido es un ítem anónimo con min-width:auto, o sea que NO encoge por debajo de su ancho mínimo; el rótulo, además, va con flex:none. Cuando la celda trae texto de párrafo —y no un número, que es el caso para el que se escribió— la suma rótulo+texto no entra en 390px y se sale de la fila, que tampoco recorta. Medido antes del arreglo: /estado-de-cuenta-afore daba 447px de scrollWidth con viewport de 390 y /cual-es-la-mejor-afore 551px. Con `wrap`, el valor largo baja al renglón siguiente y usa el ancho completo; el par corto rótulo→valor en una línea, que es lo que dibuja el prototipo, se conserva donde entra. */ /* width:100% para que cada celda siga ocupando su propio renglón ahora que el es flex. Las dos excepciones —el badge y el nombre— se declaran abajo. */ .tabla-comp td{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center; gap:2px 16px;padding:7px 0;border:0;width:100%} .tabla-comp td::before{content:attr(data-label);font:800 12px/1 var(--font); letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex:none} .tabla-comp td:has(.barra){display:block} .tabla-comp td:has(.barra)::before{display:block;margin-bottom:7px} .tabla-comp .barra,.tabla-comp .col-barra{width:100%} /* La celda de posición NO es un par rótulo→valor como las demás, y tratarla como tal es lo que la volvía ilegible: con el justify-content:space-between de arriba, el "#" se iba contra el borde izquierdo de la tarjeta y el número contra el derecho, a un palmo de distancia, y nadie los leía como un solo dato. Acá la celda deja de ser una fila y pasa a ser un BADGE que se encoge al contenido, con el ::before pegado al número: se lee "#3". El content se fija a mano en vez de salir de data-label porque las dos tablas rotulan la columna distinto —"#" en la portada, "Posición" en el comparador— y las dos tienen que terminar diciendo lo mismo. El rótulo de verdad no se pierde: el thead sigue en el DOM. width:auto además es obligatorio: los 26px son de la vista TABLA y ahí adentro no entraba nada; el número caía a un segundo renglón mientras "AFORE" e "IRN" quedaban en una línea. */ .tabla-comp td.pos{display:block;width:fit-content;padding:4px 12px; border-radius:var(--r-pill);background:var(--brand);color:#fff; font:800 18px/1.2 var(--font);font-variant-numeric:tabular-nums} /* El badge y el nombre comparten renglón: "#1 [icono] Profuturo Afore". Iban en dos líneas y el nombre llevaba encima el rótulo "AFORE", que no dice nada que la propia marca no diga — el dato es la administradora, no el nombre de su columna—. Entre las dos cosas la tarjeta gastaba dos renglones en identificar la fila. El rótulo real no se pierde para quien no ve la tarjeta: el thead sigue en el DOM. flex:1 en vez de width:auto para que el nombre se quede con el resto de la línea y los nombres largos (PENSIONISSSTE, Afore XXI Banorte) envuelvan dentro de su caja en lugar de empujar al badge. */ .tabla-comp td[data-label="AFORE"]{width:auto;flex:1;min-width:0;justify-content:flex-start} .tabla-comp td[data-label="AFORE"]::before{display:none} .tabla-comp td.pos::before{content:"#";font:inherit;letter-spacing:0;text-transform:none; color:inherit;opacity:.55} /* El primer lugar ya trae la tarjeta en verde pálido; el badge sólido es el que la corona. --accent-d y no --accent: sobre blanco el verde claro no llega a 3:1 ni siquiera en texto grande. El `color:#fff` va repetido acá y NO se hereda de la regla de arriba: `.tabla-comp tr.fila--top .pos` (la de la vista tabla, más arriba en el archivo) es 0,3,1 y le gana a los 0,2,1 de `.tabla-comp td.pos`, así que pintaba el número en --accent-d — el MISMO color que el fondo del badge — y el "#1" desaparecía dentro de la píldora. Es el segundo caso de este patrón: el primero fue th.num pintando azul sobre azul en la cabecera --marco. */ .tabla-comp tbody tr.fila--top td.pos{background:var(--accent-d);color:#fff} /* ---- Jerarquía dentro de la tarjeta ---- Hasta acá la tarjeta era correcta pero plana: tres pares rótulo→valor del mismo tamaño y del mismo gris, sin nada que dijera cuál identifica la fila y cuál es el dato que se vino a buscar. Se lee como una lista, no como una ficha. La regla se escopa a las filas SIN columna de posición: la tarjeta del comparador ya tiene su propia jerarquía —el badge "#1" y el nombre de la AFORE comparten la primera línea— y ahí la primera celda no es un par rótulo→valor sino el badge. */ /* La cabecera va sobre una banda de color que llega a los bordes de la tarjeta: los márgenes negativos cancelan el padding del (14px 16px) y el radio superior repite el de la tarjeta menos su borde. Es lo que convierte tres pares grises en una ficha con encabezado. El color es --tile, el azul más pálido de la paleta: da presencia sin competir con el dato. */ /* El width:calc NO es decorativo: `.tabla-comp td` fija width:100%, que se mide sobre el contenido del (ya sin su padding). Con sólo los márgenes negativos, la banda se corría 16px a la izquierda pero seguía midiendo 100%, así que se salía por un lado y dejaba una franja blanca por el otro, con la esquina derecha sin redondear. Hay que devolverle los 32px de padding lateral que los márgenes acaban de cancelar. */ .tabla-comp tbody tr:not(:has(td.pos)) > td:first-child{ display:block;margin:-14px -16px 10px;padding:12px 16px;width:calc(100% + 32px); background:var(--tile);border-bottom:1px solid var(--brand-bd); border-radius:calc(var(--r-l) - 1px) calc(var(--r-l) - 1px) 0 0} /* El rótulo pasa arriba y el valor debajo, en grande: es el TÍTULO de la ficha. En color de marca y no en el gris de los demás rótulos, que es lo que lo distingue como cabecera. */ .tabla-comp tbody tr:not(:has(td.pos)) > td:first-child::before{ display:block;margin-bottom:5px;color:var(--brand-br)} /* La fila destacada ya viene en verde: su cabecera lo sigue, en vez de meter un azul que competiría con el color que marca "este es el primero". */ .tabla-comp tbody tr.fila--top:not(:has(td.pos)) > td:first-child{ background:var(--accent-bg);border-bottom-color:var(--accent-bd)} .tabla-comp tbody tr.fila--top:not(:has(td.pos)) > td:first-child::before{color:var(--accent-t)} .tabla-comp tbody tr:not(:has(td.pos)) > td:first-child, .tabla-comp tbody tr:not(:has(td.pos)) > td:first-child strong{ font-size:18px;line-height:1.3;color:var(--brand-d);font-weight:800} /* Los demás pares: rótulo a la izquierda, valor a la derecha y en el color de marca, para que el número salte por encima de su etiqueta. Cuando el valor es largo baja de renglón solo (el flex-wrap de arriba) y ahí se alinea a la izquierda, que es como se lee un párrafo. */ .tabla-comp tbody tr:not(:has(td.pos)) > td:not(:first-child){ color:var(--soft);font-size:15px} .tabla-comp tbody tr:not(:has(td.pos)) > td:not(:first-child) strong, .tabla-comp tbody tr:not(:has(td.pos)) > td.num{ color:var(--brand-d);font-weight:700} .tabla-comp tbody tr:not(:has(td.pos)) > td.num{font-size:16.5px} } @media (max-width:640px){ .dato__n--xl{font-size:42px} .dato__n{font-size:22px} .slab{padding:28px 18px} .entradilla{font-size:16.5px} .cta-verde h2{font-size:21px} /* El botón del CTA ocupa el ancho: es la única acción del bloque. */ .slab--cta .btn,.cta-verde .btn{width:100%;justify-content:center} } /* Fila del panel derecho del destacado: badge + texto, alineados. */ .destacado__f{display:flex;align-items:flex-start;gap:14px} .destacado__f+.destacado__f{margin-top:18px} .destacado__f p{margin:0;font-size:14.5px;line-height:1.5} .destacado__f b{color:#fff} /* Variante EN CAJA con cabecera azul: es la tabla de la portada (docs/design/handoff/home/Home.dc.html), distinta de la del comparador, que va desnuda con cabecera clara. Las dos comparten el colapso fila→tarjeta de ≤720px. */ .tabla-comp--marco{border:1.5px solid var(--border-2);border-radius:var(--r);overflow:hidden} .tabla-comp--marco thead th{background:var(--brand);color:#fff;text-transform:none; letter-spacing:.03em;font:700 13px/1 var(--font);padding:14px 20px;border-bottom:0} /* En el encabezado azul el texto SIEMPRE es blanco, incluso en las columnas .num/.pos: sin esto, .tabla-comp th.num (más específico) pinta la cabecera "Rendimiento neto" en azul oscuro sobre azul → ilegible. */ .tabla-comp--marco thead th.num,.tabla-comp--marco thead th.pos{color:#fff} .tabla-comp--marco td{padding:15px 20px} .tabla-comp--marco td:first-child,.tabla-comp--marco th:first-child{padding-left:20px} .tabla-comp--marco td:last-child,.tabla-comp--marco th:last-child{padding-right:20px} .tabla-comp--marco tbody tr:first-child td{border-top:0} .tabla-comp--marco tbody tr.fila--top{background:var(--accent-bg)} /* El pie de la tabla va DEBAJO, no encima: es la fuente del dato, no un título. */ .tabla-comp caption{caption-side:bottom;text-align:left;font-size:12.5px;line-height:1.55; color:var(--muted);padding:14px 4px 0} .tabla-comp--marco caption{padding:14px 20px 16px} @media (max-width:720px){ .tabla-comp--marco{border:0;border-radius:0;overflow:visible} .tabla-comp--marco td{padding:7px 0} } /* Columna de rendimiento en verde: en la tabla de la portada el diseño pinta TODOS los valores de IRN en verde, no sólo el del primer lugar. */ .tabla-comp .num--acento{color:var(--accent-d)} /* Cabeceras de columna por régimen en la tabla comparativa de Ley73o97: el prototipo sostiene el mismo código de color desde el panel de arriba — Ley 73 azul, Ley 97 verde. */ .tabla-comp .th-73{color:var(--brand)} .tabla-comp .th-97{color:var(--accent-t)} /* ---------- Logo de la administradora en la ficha de marca ---------- Ver sb_afore_logo() en partials/layout.php para el porqué de la placa blanca. EL ALTO LO PONE EL PHP, en --logo-h, y no es sobre-ingeniería: los diez lockups van de 2,12:1 (PENSIONISSSTE, apilado) a 7,6:1 (Coppel, una tira). Con el alto fijo de 38px que había antes, Coppel medía 289px de ancho y PENSIONISSSTE 80 — el apilado quedaba ilegible. sb_afore_logo() normaliza por área (alto = 76/√ratio) y manda el número acá. El 38 del fallback es el valor de un lockup 4:1, por si el HTML llega sin la propiedad. */ .afore-logo{display:inline-flex;align-items:center;justify-content:center; background:#fff;border-radius:var(--r);padding:10px 16px;margin:0 0 18px; box-shadow:0 1px 2px rgba(7,55,79,.06);max-width:100%} .afore-logo img{display:block;height:calc(var(--logo-h,38) * 1px); width:auto;max-width:100%;object-fit:contain} @media (max-width:560px){ .afore-logo{padding:8px 13px;margin-bottom:14px} .afore-logo img{height:calc(var(--logo-h,38) * .85px)} } /* ---------- Hero de ficha de marca (variante E) ---------- Isotipo como VIÑETA en línea, pegado a la primera palabra del título (y ahí queda también en móvil) + lockup entero en placa a la DERECHA, que sólo se ve en escritorio. Reemplaza la caja de logo suelta que flotaba arriba del H1. */ .hero--marca{display:flex;align-items:center;gap:32px} .hero--marca .hero__inner{flex:1 1 auto;min-width:0} .hero--marca h1{margin:0;max-width:20ch} /* Detalles de anillos concéntricos, los mismos que el .slab de la home: dan textura y profundidad al fondo azul plano, así la placa del logo queda embebida en el hero en vez de flotando suelta. Decorativos (::before/::after, sin markup); el .hero ya recorta con overflow:hidden. */ .hero--marca::before,.hero--marca::after{content:"";position:absolute;border-radius:50%;z-index:0; pointer-events:none} .hero--marca::before{top:-230px;right:-150px;width:540px;height:540px;border:50px solid rgba(3,42,60,.16)} .hero--marca::after{bottom:-320px;right:40px;width:520px;height:520px;border:40px solid rgba(3,42,60,.10)} /* La viñeta va en em: escala con el H1 (clamp) y se ancla a la primera línea, no al centro del bloque. Placa blanca porque el isotipo suele ser tinta oscura sobre el hero azul. */ .hero__ico{display:inline-flex;align-items:center;justify-content:center;width:1.1em;height:1.1em; border-radius:.28em;background:#fff;vertical-align:middle;margin-right:.3em;position:relative;top:-.06em; box-shadow:0 6px 16px -8px rgba(3,20,34,.55)} .hero__ico img{width:.7em;height:.7em;object-fit:contain;display:block} .hero--marca .hero__lede{max-width:52ch} /* Placa de la derecha: el lockup ya viene en su .afore-logo blanca; acá se agranda, se le quita el margen inferior y se le pone el rótulo. */ .hero__brand{flex:none;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px} .hero--marca .hero__brand .afore-logo{margin:0;padding:20px 24px} .hero--marca .hero__brand .afore-logo img{height:calc(var(--logo-h,38) * 1.3px)} .hero__brand-cap{font:800 11px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-o)} /* En escritorio angosto / tablet / móvil se invierte: NO hay viñeta ni placa a la derecha; el lockup entero sube ARRIBA del título (como el diseño clásico de la ficha), a ancho natural y alineado a la izquierda. */ @media (max-width:900px){ /* La placa es hermana del contenido, no hija del .hero__inner, así que en columna quedaba pegada a la esquina (el hero no tiene padding propio). Se le da el padding al HERO y se le saca al inner: así la placa y el título comparten la misma sangría. */ .hero--marca{flex-direction:column;align-items:stretch;gap:0;padding:32px 26px} .hero--marca .hero__inner{padding:0} .hero__ico{display:none} .hero__brand{order:-1;align-items:flex-start;margin:0 0 18px} .hero__brand-cap{display:none} .hero--marca .hero__brand .afore-logo{padding:12px 18px} .hero--marca .hero__brand .afore-logo img{height:calc(var(--logo-h,38) * 1px)} } @media (max-width:560px){ .hero--marca{padding:26px 20px} } /* ---------- Barra de filtro del comparador ---------- Ver el comentario en pages/mejor_afore.php: el control y su resultado tienen que caber juntos en pantalla. Antes eran dos paneles y la primera fila caía a 773px. sticky para poder cambiar de generación con la tabla a la vista. El top coincide con la altura del header pegajoso; si el header cambia de alto, este número cambia con él. */ /* ---------- Indicador de la generación seleccionada (cabecera del comparador) ---------- Antes era un .panel__head__meta gris que en desktop se perdía. Ahora es una ETIQUETA DE ESTADO: rótulo "Estás viendo" + el valor en píldora verde —el MISMO verde del chip activo del filtro de abajo—, para que se lea como la selección vigente y el filtro se entienda como el control que la cambia. El JS reescribe sólo el textContent de #irn-nacidos (.gen-actual__val). */ .gen-actual{display:flex;align-items:center;gap:9px;margin:0;flex:none} .gen-actual__lbl{font:700 11.5px/1 var(--font);letter-spacing:.07em;text-transform:uppercase; color:var(--muted);flex:none} .gen-actual__val{font:700 14.5px/1.2 var(--font);color:var(--accent-t);background:var(--accent-bg); border:1px solid var(--accent-bd);border-radius:999px;padding:6px 13px} .filtro-gen{position:sticky;top:58px;z-index:5;display:flex;align-items:center;gap:14px; flex-wrap:wrap;margin:18px 0 4px;padding:12px 0 16px;background:var(--surface)} /* El rótulo pasa de gris apagado a tinta de marca: es la pregunta que la barra le hace a quien lee ("¿cuál es tu generación?"), y en gris se leía como un pie de tabla. */ /* margin-right negativo para acercar SÓLO el (i) al rótulo: el gap:14px de .filtro-gen separa por igual rótulo, (i) y chips; el negativo recorta ese hueco a 7px (el mismo par rótulo→(i) del resto del sitio) sin tocar la distancia a los chips. Se resetea en móvil, donde el gap ya es de 8px y el negativo lo dejaría pegado. */ .filtro-gen__lbl{font:800 14px/1 var(--font);letter-spacing:.08em;text-transform:uppercase; color:var(--brand-d);flex:none;margin-right:-7px} /* ---------- .ayuda · el (i) que explica un rótulo ---------- Sin JavaScript: el panel se muestra con :hover y con :focus. :focus y no sólo :focus-visible porque en pantalla táctil el tap NO dispara focus-visible en varios navegadores, y ahí el (i) no serviría para nada — que es justo donde más falta hace, porque no hay hover. */ .ayuda{position:relative;display:inline-flex;flex:none} /* El (i) lleva color de marca desde el reposo (disco --tile + ícono --brand), como el .field__i de las calculadoras: en gris --muted se leía como decoración y pasaba desapercibido. */ .ayuda__btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px; padding:0;border:0;border-radius:50%;background:var(--tile);color:var(--brand);cursor:pointer; transition:background .15s,color .15s} .ayuda__btn:hover{background:var(--brand);color:#fff} .ayuda__btn:focus-visible{outline:2px solid var(--brand-br);outline-offset:2px} .ayuda__btn .ico{width:17px;height:17px} .ayuda__pop{display:none;position:absolute;z-index:40;top:calc(100% + 8px);left:-8px; width:max-content;max-width:min(300px,80vw);padding:12px 14px; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-s); box-shadow:0 18px 40px -22px rgba(7,55,79,.55),0 2px 8px rgba(7,55,79,.08); font:400 14px/1.5 var(--font);color:var(--soft);letter-spacing:0;text-transform:none} .ayuda__pop strong{color:var(--brand-d)} .ayuda__btn:hover+.ayuda__pop,.ayuda__btn:focus+.ayuda__pop,.ayuda__pop:hover{display:block} /* Los chips van más compactos que los de un formulario: son diez y tienen que entrar en una o dos líneas, no en tres. */ .filtro-gen .gens{gap:6px} .filtro-gen .gen{min-height:34px;padding:0 13px;font-size:13.5px} /* El . Existe porque el panel de un sigue en el DOM guardando el valor, sólo que fuera de la vista. Ojo con el orden: sin JS no se crea ningún .sbsel y manda el bloque de .filtro-gen__sel select de acá arriba, que es el aspecto del control nativo. Los dos tienen que verse igual CERRADOS, porque cuál de los dos toca depende de si el archivo llegó a cargar. */ .sbsel{position:relative} /* El nativo no se oculta con display:none ni con hidden: un control oculto así deja de ser enfocable y, en algunos navegadores, de participar en el envío del formulario. Se lo saca de la vista conservándolo operable, que es como se comporta .sr-only. Va como `select.sbsel__nativo` y no como `.sbsel__nativo` a secas para empatarle en especificidad a `.filtro-gen__sel select` de acá arriba: si no, le gana el width y el min-height, y el nativo se queda midiendo 48px por encima del botón. */ select.sbsel__nativo{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .sbsel__btn{display:flex;align-items:center;gap:10px;width:100%;min-height:48px; padding:0 12px 0 14px;border:1.5px solid var(--border);border-radius:var(--r-s); background:var(--surface);font:700 15.5px var(--font);color:var(--ink);cursor:pointer; text-align:left} .sbsel__btn:hover{border-color:var(--brand-br)} .sbsel__btn:focus-visible{border-color:var(--brand-br);outline:none; box-shadow:0 0 0 3px rgba(14,127,168,.14)} /* El rango de años queda a la derecha y en gris: es el apoyo, no el nombre de la siefore. margin-left:auto lo empuja contra la flecha sin necesidad de un elemento separador. */ .sbsel__pista{margin-left:auto;font-weight:600;font-size:14.5px;color:var(--muted)} .sbsel__flecha{flex:none;color:var(--muted);transition:transform .18s ease} .sbsel__btn[aria-expanded="true"] .sbsel__flecha{transform:rotate(180deg)} .sbsel__btn[aria-expanded="true"]{border-color:var(--brand-br)} /* z-index alto: la barra del filtro es sticky (z-index 5) y la tabla que sigue trae sus propias capas; el panel tiene que quedar por encima de las dos. */ .sbsel__lista{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;margin:0; padding:6px;list-style:none;background:var(--surface);border:1px solid var(--border); border-radius:var(--r);box-shadow:0 18px 40px -22px rgba(7,55,79,.55),0 2px 8px rgba(7,55,79,.08); /* 460px es lo que miden las diez opciones con su padding (10 × 44 + 12): entran todas sin scroll donde hay sitio. El 60vh es el freno en pantallas bajas, y ahí el corte a media opción es la señal de que la lista sigue. overscroll-behavior evita que al llegar al final el gesto siga arrastrando la página por debajo. */ max-height:min(60vh,460px);overflow-y:auto;overscroll-behavior:contain} /* 44px de alto mínimo: es el objetivo táctil por debajo del cual el dedo falla. Y padding-left de 30px en TODAS, no sólo en la elegida, para que los nombres queden alineados y el check no corra el texto de una fila. */ .sbsel__opt{display:flex;align-items:center;gap:12px;min-height:44px; padding:6px 12px 6px 30px;border-radius:var(--r-s);cursor:pointer;position:relative; font-size:15px;color:var(--ink);line-height:1.3} .sbsel__opt__h{margin-left:auto;font-size:14px;color:var(--muted);white-space:nowrap} .sbsel__opt:hover{background:var(--tile)} .sbsel__opt:focus-visible,.sbsel__opt:focus{background:var(--tile);outline:2px solid var(--brand-br); outline-offset:-2px} .sbsel__opt[aria-selected="true"]{background:var(--accent-bg);font-weight:700;color:var(--brand-d)} .sbsel__opt[aria-selected="true"] .sbsel__opt__h{color:var(--accent-d)} /* El check es decorativo: el estado ya lo dice aria-selected, que es lo que lee un lector de pantalla. Por eso puede vivir en contenido generado. */ .sbsel__opt[aria-selected="true"]::before{content:"✓";position:absolute;left:10px; color:var(--accent-d);font-weight:800} @media (prefers-reduced-motion:reduce){ .sbsel__flecha{transition:none} } @media (max-width:720px){ /* Fuera los chips, entra el