/* TrailLab v290 · tema claro, segunda pasada: los paneles que siguen siendo oscuros ========================================================================================== Reportado por Oli con capturas: en tema claro hay tarjetas enteras donde el texto no se lee. «Te dejo ejemplos pero hay más, búscalos.» QUÉ PASA, Y POR QUÉ ES EL ESPEJO EXACTO DE v273 ---------------------------------------------- v273 arregló una familia: **fondos claros escritos a mano** (`rgba(255,255,255,.05)`) que sobre el tema claro eran blanco sobre blanco. Ésta es la otra mitad de la misma moneda, y por eso no salió entonces: **paneles con fondo OSCURO escrito a mano** cuyos hijos pintan el texto con las variables del tema. .ach-metrics-v221,.summit-passport{ background:linear-gradient(145deg,rgba(16,39,46,.96),…) } .achm-head h3{ color:var(--ink) } .achm-head p { color:var(--muted) } En oscuro las dos cosas son claras y funciona. En claro el panel **sigue siendo oscuro** —su color está escrito a mano, el tema no lo toca— pero `--ink` y `--muted` se vuelven oscuros. Texto oscuro sobre panel oscuro: el título desaparece y la tarjeta parece vacía. Es lo que se ve en «Progreso verificable», «60 cimas de Catalunya», «Gratis o Pro» y «Tu rendimiento, explicado». CÓMO SE ARREGLA, Y POR QUÉ ASÍ ------------------------------ La tentación es ir repintando cada hijo: `h3` a blanco, `p` a gris claro, y así con los cuarenta y pico que hay dentro. Eso es lo que garantiza que dentro de dos versiones vuelva a fallar, porque cada elemento nuevo que alguien añada dentro de uno de estos paneles nacerá roto y nadie se acordará de esta lista. Aquí se hace al revés: **se redefinen las variables DENTRO del panel**. Un panel oscuro es, a efectos de texto, una isla de tema oscuro dentro de la página clara — así que se le devuelve la paleta oscura y todos sus hijos, los de hoy y los de mañana, heredan lo correcto sin tocarlos. Una sola regla cubre cada panel entero. Lo que NO se toca: el fondo de los paneles. Son oscuros a propósito —son las piezas de acento de la app, el pasaporte de cimas y la comparativa Pro— y aclararlos sería rediseñarlos, no arreglarlos. Oli pidió que se lean, no que cambien. Fichero nuevo y no un añadido a `tema-claro-v273.css` por lo que el propio v273 dejó escrito: estos estáticos van *cache-first* y su nombre no cambia entre versiones. Va cargado DESPUÉS de v273, que hasta ahora era el último por contrato. */ /* --------------------------------------------------------------- la isla oscura, una sola vez */ [data-theme="light"] .ach-metrics-v221, [data-theme="light"] .summit-passport, [data-theme="light"] .achm-cats article, [data-theme="light"] .pro-compare-card, [data-theme="light"] .ach-hub-nav, [data-theme="light"] .ach-main-hero, [data-theme="light"] .summit-atlas-v223, [data-theme="light"] .auth-confirm, [data-theme="light"] .tl-chart-frame, [data-theme="light"] #view-forma .gz-card, [data-theme="light"] #view-estadisticas .rp-tile, [data-theme="light"] #view-estadisticas .rpx, [data-theme="light"] [data-visual-system="v221"] .estado-hero, [data-theme="light"] .pf-head, [data-theme="light"] .pf-detail-grid > div, [data-theme="light"] .hm-hero, [data-theme="light"] .hm-focus, [data-theme="light"] .pd-head, [data-theme="light"] .gate.gate-v231, [data-theme="light"] .gate.gate-v231 .gate-card { /* Paleta del tema oscuro, restringida a este subárbol. */ --ink: #eaf7f2; --muted: rgba(234, 247, 242, .72); --line: rgba(255, 255, 255, .14); --surface: rgba(255, 255, 255, .05); --surface2: rgba(255, 255, 255, .08); --tl-text: #eaf7f2; --tl-text-2: rgba(234, 247, 242, .78); --tl-text-3: rgba(234, 247, 242, .56); --tl-border: rgba(255, 255, 255, .13); --tl-border-strong: rgba(255, 255, 255, .22); --tl-panel: rgba(255, 255, 255, .04); --tl-panel-soft: rgba(255, 255, 255, .05); --tl-panel-raised: rgba(255, 255, 255, .08); --tl-canvas: rgba(0, 0, 0, .16); /* v273 bajó el lima a #4e7c00 para que se leyera sobre blanco. Dentro de estas islas el fondo vuelve a ser oscuro, así que ahí ese verde se apaga: se recupera el lima de marca, que es el que contrasta sobre oscuro y además es el color que estas piezas siempre han tenido. */ --lime: #a6e82c; --lime2: #7dbb1f; /* Los realces de v273 también se calcularon para fondo claro (verde diluido). Sobre estas islas hay que volver al blanco translúcido de siempre o los hovers desaparecen otra vez. */ --tl-soft: rgba(255, 255, 255, .05); --tl-soft2: rgba(255, 255, 255, .09); --tl-track: rgba(255, 255, 255, .12); color: var(--ink); } /* ------------------------------------------------------- lo que se pinta a mano y no hereda */ /* Un puñado de piezas escribe el color directamente en vez de leer la variable, así que redefinir la paleta no les llega. Son las únicas que hay que nombrar; si aparecen más, van aquí. */ [data-theme="light"] .achm-head h3, [data-theme="light"] .summit-passport h3, [data-theme="light"] .pro-compare-head h3, [data-theme="light"] .ach-main-copy h2, [data-theme="light"] .ach-main-ring b { color: var(--ink); } [data-theme="light"] .achm-head p, [data-theme="light"] .summit-passport header p, [data-theme="light"] .pro-compare-head p, [data-theme="light"] .ach-main-copy p { color: var(--muted); } /* La cabecera de «Gratis o Pro» vive FUERA de las tarjetas oscuras, sobre el fondo claro de la página: ésa sí necesita tinta oscura, y es la excepción que confirma que las islas se delimitan por el fondo real y no por la sección. */ [data-theme="light"] .pro-compare-v221 > .pro-compare-head h3 { color: var(--tl-text); } [data-theme="light"] .pro-compare-v221 > .pro-compare-head p { color: var(--tl-text-2); } /* --------------------------------------------------------------- gráficas dentro de las islas */ /* Los ejes y las etiquetas de las gráficas SVG se pintan con `currentColor` o con `--tl-text-3`; al heredar la paleta de arriba ya salen bien. Lo que no hereda es el color de relleno escrito en el atributo `fill` del propio SVG, que sólo se usa para las series y ahí sí es de marca. */ [data-theme="light"] .tl-chart-frame text, [data-theme="light"] #view-estadisticas .chart-svg text { fill: var(--tl-text-3); }