/* ══════════════════════════════════════════════════════════════════════════ CAPA 19 · CONGELADO DE UI · 5 sep 2026 ───────────────────────────────────────────────────────────────────────── Ultima pasada visual autorizada por la propietaria. Cuatro correcciones, ninguna metodologica, ninguna sobre datos, umbrales, capas o cifras. 1. Suelo navy. Ningun fondo opaco del producto puede leerse como negro. Se fija un piso explicito y verificable: luminancia relativa L >= 0.010 y canal azul por encima del rojo en al menos 12 pasos. Cabecera y pie comparten EXACTAMENTE el mismo navy en los tres modos -- el navy institucional de la home, #1d2d3d -- y el hero usa un azul de la misma familia, perceptiblemente mas claro. 2. Las tarjetas de Aliyah y Retornos pierden sus bandas vacias. La igualdad de altura la sigue resolviendo el subgrid, no el relleno. 3. TMD / HAR / FAI / UPI se enuncian con la tipografia del cuerpo: misma familia, mismo cuerpo, misma interlinea que . La unica diferencia es el peso de la sigla. 4. La vineta es un punto, discreto, alineado con la primera linea. Retirar el unico de esta hoja revierte la pasada entera. Valores medidos (1280px) antes de esta hoja: header rgb(29,45,61) · footer rgb(29,45,61) modo institucional header rgb(19,32,41) · footer rgb(26,43,54) modo dark header rgb(5,10,16) · footer rgb(19,31,41) modo night <- negro hero rgb(15,28,38) dark / rgb(11,19,28) night <- mas oscuro que el header, al reves .rl-narr-list IBM Plex Serif 18.5px / 32.375px body IBM Plex Sans 16px / 25.6px ══════════════════════════════════════════════════════════════════════════ */ /* ══ §1 · LA FAMILIA NAVY, UNA SOLA, PARA TODO EL PRODUCTO ════════════════ Un unico juego de tokens, identico en los tres modos. No hay variantes por pagina ni por salida: las paginas satelite leen los mismos valores a traves de assets/css/satellite-shell-2026-09-05.css. --rl-navy #1d2d3d L=0.0247 b-r=32 cabecera, pie, cajon --rl-navy-hero #2b4159 L=0.0533 b-r=46 hero y placas secundarias --rl-navy-plate #1a2b3d L=0.0228 b-r=35 modulos y placas internas --rl-navy-deep #16273a L=0.0191 b-r=36 superficie mas profunda --rl-navy-ground #101d29 L=0.0115 b-r=25 fondo de pagina en night El hero mide mas del doble de luminancia que la cabecera: la diferencia es perceptible, no una decima. Ninguno baja del piso. */ :root{ --rl-navy:#1d2d3d; --rl-navy-hero:#2b4159; --rl-navy-plate:#1a2b3d; --rl-navy-deep:#16273a; --rl-navy-ground:#101d29; } /* El modo night definia --panel y --shell-bg en #050a10: ese es el negro que aparecia en la cabecera y en las placas de modulo. Sube al suelo navy. --bg y las dos superficies suben con el. El modo dark ya estaba por encima del piso y no se toca salvo el token del shell. */ /* Escalera navy, cinco peldanos, todos por encima del piso y todos azules: S0 #101d29 L=0.0115 fondo de pagina S1 #14222f L=0.0150 banda y placa analitica S2 #16273a L=0.0191 superficie S3 #1a2b3d L=0.0228 superficie elevada y modulos S4 #1d2d3d L=0.0247 cabecera, pie, placa institucional El orden interno de la paleta original se conserva: lo que estaba mas hondo sigue estando mas hondo, solo que ninguno baja ya del piso. */ html[data-theme="night"]{ --bg:#101d29; --bg-warm:#14222f; --surface:#16273a; --surface-2:#1a2b3d; --ink-band:#14222f; --institutional:#1d2d3d; --navy-header:#1d2d3d; --brand-navy:#1d2d3d; --offwhite:#1d2d3d; --offwhite-2:#16273a; --analytical:#14222f; --navy-card:#14222f; --panel:#1a2b3d; --shell-bg:#1d2d3d; } /* El modo dark solo tenia dos tokens por debajo del piso: la placa analitica (#0a141c, L=0.0065) y la banda de tinta (#0d1820, L=0.0086). El resto de su paleta ya estaba por encima y no se toca. */ html[data-theme="dark"]{ --analytical:#141f2b; --navy-card:#141f2b; --ink-band:#131e29; --shell-bg:#1d2d3d; } /* Dos hojas anteriores vuelven a declarar la paleta profunda dentro de un descendiente -- `.project-block` en shell-unified-2026-08.css y el par `.rl-axhelp` / `.rl-regimes` en corrections-2026-08.css -- y una declaracion en :root no alcanza a un token redefinido mas abajo del arbol. Se repiten aqui los mismos ganchos con los valores del suelo. */ html[data-theme="night"] .project-block{ --bg:#101d29; --bg-warm:#14222f; --surface:#16273a; --surface-2:#1a2b3d; } html[data-theme="night"] .rl-axhelp, html[data-theme="night"] .rl-regimes{ --surface:#16273a; } html[data-theme="dark"] .project-block{ --surface-2:#1b2b37; } /* ══ §2 · CABECERA = PIE, EN LOS TRES MODOS ═══════════════════════════════ `shell-unified-2026-08.css` daba a --sh-bg un valor por modo y `unify-final-2026-08.css` pintaba ademas el pie con un literal distinto (#1a2b36 en dark, #131f29 en night). Las dos fuentes se anulan aqui con el mismo token, de modo que header y footer devuelven el mismo background-color medido con getComputedStyle(). */ .rlx-hdr, .rlx-drawer, .rlx-ftr, html[data-theme="dark"] .rlx-hdr, html[data-theme="dark"] .rlx-drawer, html[data-theme="dark"] .rlx-ftr, html[data-theme="night"] .rlx-hdr, html[data-theme="night"] .rlx-drawer, html[data-theme="night"] .rlx-ftr{ --sh-bg:#1d2d3d; } html .rlx-hdr, html[data-theme="dark"] .rlx-hdr, html[data-theme="night"] .rlx-hdr{ background:var(--rl-navy,#1d2d3d); } html .rlx-ftr, html[data-theme="dark"] .rlx-ftr, html[data-theme="night"] .rlx-ftr{ background:var(--rl-navy,#1d2d3d); } html .rlx-drawer, html[data-theme="dark"] .rlx-drawer, html[data-theme="night"] .rlx-drawer{ background:var(--rl-navy,#1d2d3d); } /* La barra de modulos de P02 tomaba el mismo negro en night. */ html[data-theme="night"] .rl-modnav{ --rlmn-plate:#1d2d3d; } html[data-theme="dark"] .rl-modnav{ --rlmn-plate:#1d2d3d; } /* La pastilla de estado sobre las figuras estaba escrita con un literal, rgba(5,10,16,0.92) en night: el mismo negro, por otra puerta. Pasa al navy, con la misma opacidad, de modo que su contraste con el texto blanco no baja. */ html[data-theme="night"] .badge{ background:rgba(29,45,61,0.92); } /* El enlace de salto al contenido -- visible solo al tabular -- estaba en #0a1119. Es un componente del producto como cualquier otro y sube al mismo navy. El blanco sobre este fondo mide 12.4:1. */ .skip:focus, .skip:focus-visible{ background:#1d2d3d; } /* ══ §3 · EL HERO ES AZUL Y ES MAS CLARO QUE EL SHELL ═════════════════════ En modo institucional el hero se lee sobre papel y asi se queda: es mas claro que la cabecera, que es la condicion pedida. En dark y night pasa a la placa navy secundaria, un paso por encima de cabecera y pie. */ html[data-theme="dark"] .hero, html[data-theme="night"] .hero, html[data-theme="dark"] .proj-hero, html[data-theme="night"] .proj-hero, html[data-theme="dark"] .proj-head, html[data-theme="night"] .proj-head{ background:var(--rl-navy-hero,#2b4159); } /* La lamina de la cabecera de cada case vive en un token propio de la capa 18 (--rl-hero-plate, #24394a en dark y #1e3040 en night). Los dos estaban por encima del piso pero apenas por encima del header: la diferencia con #1d2d3d no llegaba a leerse como un escalon. Pasan al mismo azul secundario que el hero de la home, que si se lee. */ html[data-theme="dark"]{ --rl-hero-plate:#2b4159; } html[data-theme="night"]{ --rl-hero-plate:#2b4159; } /* La pastilla de la guarda de mapa y su control de salida estaban en rgba(10,17,25,.92): otro casi-negro, esta vez sobre las figuras. Pasan al navy con la misma opacidad. Es la unica declaracion de color que esta hoja hace sobre la guarda; su forma, tipografia y comportamiento siguen viniendo de polish-2026-09-01. */ .rl-mapguard-pill{ background:rgba(29,45,61,0.92); } .rl-maprelease{ background:rgba(29,45,61,0.94); } /* ══ §4 · LAS DOS TARJETAS DEL PAR PIERDEN LAS BANDAS VACIAS ══════════════ `.rl-pair` es una rejilla; por encima de 1024px cada `.rl-pair-col` es un subgrid de sus cuatro filas, y ESO es lo que iguala las alturas de las dos tarjetas sin un solo pixel de relleno artificial. Ese mecanismo no se toca: la igualdad la sigue resolviendo el layout, no el padding. Lo que sobraba era el `gap:22px` unico. Separaba las dos tarjetas -- bien -- pero tambien el rotulo del texto, el texto del mapa y el mapa de la salida, y encima el marco anadia 14px de margen propio y el parrafo otros 16px de relleno superior. Medido a 1280px antes de esta hoja: rotulo -> primer parrafo 22 + 12 (relleno del rotulo) + 16 = 50px ultimo parrafo -> marco 4 + 22 + 14 = 40px Se separan los dos ejes. La columna conserva sus 22px entre tarjetas; las filas bajan a 14px y el relleno vertical del primer y del ultimo parrafo se retira, porque la fila ya lo aporta. Resultado medido: 14px del rotulo al primer parrafo y 14px del ultimo parrafo al marco, dentro del rango pedido de 12-16px. Por debajo de 1024px las tarjetas se apilan y la columna vuelve a ser una caja flex sin separacion entre hijos. Alli el inset lo da el relleno del parrafo, no la fila: 16px arriba y 14px abajo, el mismo rango. Y la separacion de 22px ENTRE las dos tarjetas apiladas se conserva, que es para lo que existe el gap cuando la rejilla es de una sola columna. No cambia el ancho, ni el contenido, ni la alineacion superior, ni la separacion entre parrafos (20px, la que ya tenia). */ .rl-pair .rl-pair-tag{ padding-top:10px; padding-bottom:10px; } .rl-pair .rl-pair-frame{ margin-top:0; } .rl-pair .rl-pair-body > p:first-child{ padding-top:16px; } .rl-pair .rl-pair-body > p:last-child{ padding-bottom:14px; } @media (min-width:1024px){ .rl-pair{ row-gap:14px; column-gap:22px; } .rl-pair .rl-pair-body > p:first-child{ padding-top:0; } .rl-pair .rl-pair-body > p:last-child{ padding-bottom:0; } } /* ══ §5 · LOS CUATRO MODULOS SE ENUNCIAN CON LA LETRA DEL CUERPO ══════════ Medido antes de esta hoja: la lista heredaba IBM Plex Serif a 18.5px con interlinea 32.375px, mientras es IBM Plex Sans a 16px / 25.6px. Cuatro versales en serif a ese cuerpo se leen como subtitulos. `html{font-size:16px}` es fijo en todo el sitio y no declara cuerpo propio, de modo que 1rem ES el cuerpo de en cualquier breakpoint, y 1.6 ES su interlinea. Declararlo asi -- y no con un literal -- garantiza que los tres pares medidos con getComputedStyle() coincidan tambien a 390, 430, 834 y 1024px. La sigla no recibe familia, cuerpo ni interlinea propios: solo peso. */ .proj-narrative .rl-narr-list, .proj-narrative .rl-narr-list li, .proj-narrative .rl-narr-list li > span, .proj-narrative .rl-narr-list b, .proj-narrative .rl-narr-list strong{ font-family:var(--sans,"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif); font-size:1rem; line-height:1.6; letter-spacing:normal; font-style:normal; color:inherit; } .proj-narrative .rl-narr-list li{ font-weight:300; } .proj-narrative .rl-narr-list li > span{ font-weight:inherit; } .proj-narrative .rl-narr-list b, .proj-narrative .rl-narr-list strong{ font-weight:600; } /* ══ §6 · LA VINETA ES UN PUNTO ═══════════════════════════════════════════ Un punto pequeno, sin peso, alineado con la primera linea y sin abrir sangria adicional. Toma currentColor: en los modos oscuros el cuerpo es blanco y el punto sale blanco; sobre papel un punto blanco seria un punto invisible. */ .proj-narrative .rl-narr-list li{ position:relative; padding-left:17px; list-style:none; } .proj-narrative .rl-narr-list li::before{ content:"\2022"; position:absolute; left:1px; top:0; width:auto; height:auto; background:none; border:0; color:currentColor; opacity:.72; font-family:inherit; font-size:0.82em; line-height:1.6; font-weight:400; }