/* ============================================================ APEX — MODO DE EXPERIENCIA (Inversión / Trading / Ambos) TODA regla de esta hoja empieza por `html[data-mode="…"]`. Sin ese atributo el archivo es INERTE: no altera un solo selector existente. Es la misma garantía de no regresión que `max.css` consigue con `[data-tier="max"]` y `landing-v2.css` con `#landingView`/`.lp-`, y por el mismo motivo — si añades reglas aquí, mantén el prefijo: es lo único que garantiza que un cambio de modo no pueda tocar nada más. El atributo lo escribe `js/theme-boot.js` antes del primer pintado y lo mantiene `js/core/mode.js`, que es el único declarante del modo. NI UN COLOR NUEVO. Todo deriva de los tokens de `base.css`, así que los dos temas funcionan sin duplicar una regla. Y NADA SE OCULTA QUE NO SEA OPCIONAL: lo único que esta hoja esconde son bloques marcados `data-mode-only`, que son ayudas de contexto (chips de horizonte, notas). Ninguna vista, ningún control necesario para enviar un formulario y ningún `data-view` dependen de ella. ============================================================ */ /* ------------------------------------------------------------ 1 · BLOQUES PROPIOS DE UN MODO `data-mode-only` lleva los modos en los que ese bloque tiene sentido, separados por espacios (por eso `~=`, no `=`). "Ambos" ve los dos conjuntos, que es justo lo que significa elegir "ambos". NO se usa `aria-hidden="true"` para esto. `base.css` trae una regla GLOBAL `[aria-hidden="true"]{display:none!important}` y marcar como decorativo algo que sí debe verse lo borra de la pantalla sin error y sin aviso — así se perdieron los números de sección de Intelligence. Aquí el bloque simplemente no se pinta en el modo que no le corresponde, y sigue siendo texto real en el que sí. ------------------------------------------------------------ */ html[data-mode="trader"] [data-mode-only~="investment"]{display:none;} html[data-mode="investment"] [data-mode-only~="trader"]{display:none;} /* ------------------------------------------------------------ 2 · EL ANALIZADOR NO ABRE CON UN GRÁFICO El cambio de producto de toda esta capa cabe en dos reglas: en modo Inversión, "Analizar una inversión" va PRIMERO y el gráfico segundo. Un inversor llega con una pregunta, no con una captura, y la primera pantalla le pedía justo lo que no tiene. Se hace con `order` y no reordenando el HTML a propósito: los dos botones conservan su id, su `data-mode` y su posición en el DOM, así que `initAnalyzeModeSelector()` y el onboarding siguen encontrando lo mismo. El orden de tabulación sigue al DOM, que es el orden en el que el lector de pantalla los anuncia — y las dos modalidades son hermanas, no una principal y otra subordinada. ------------------------------------------------------------ */ /* LAS TRES TARJETAS SE NOMBRAN, NO DOS. Solo se declaraban estas dos, y `order` vale 0 por defecto: Análisis Fundamental —que no se nombraba— se colaba DELANTE de las dos, así que el modo Inversión abría con una tarjeta con candado PRO en primer lugar y la modalidad por la que de verdad abre ("Analizar una inversión") caía en medio. Un valor que no se nombra no es que se quede como estaba: es que gana. Mismo fallo de categoría que el parámetro sin nombrar de `runProviderCascade`. */ html[data-mode="investment"] #amodeDecisionBtn{order:1;} html[data-mode="investment"] #amodeChartBtn{order:2;} html[data-mode="investment"] #amodeFundamentalBtn{order:3;} /* ------------------------------------------------------------ 3 · EL SELECTOR DE MODO DE CONFIGURACIÓN Tres opciones, una activa. Reutiliza los tokens y el radio de la aplicación; no define ni una sombra ni un color propios. ------------------------------------------------------------ */ html[data-mode] .mode-picker{ /* 158px es el ancho mínimo que deja caber las TRES opciones en una fila dentro del diálogo de bienvenida (560px menos su relleno). Con 180px caían 2 + 1 y la tercera parecía una opción de segunda. `auto-fit` se encarga del resto: en la fila más estrecha de Configuración baja a dos columnas, y en móvil a una. */ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-3);width:100%; } html[data-mode] .mode-option{ display:flex;flex-direction:column;gap:var(--space-1); text-align:left;padding:var(--space-4); background:var(--surface);border:1px solid var(--border); border-radius:var(--r-md);cursor:pointer; font:inherit;color:var(--text); transition:border-color .15s ease, background .15s ease; } html[data-mode] .mode-option:hover{border-color:var(--muted2);} html[data-mode] .mode-option:focus-visible{box-shadow:var(--shadow-focus);} html[data-mode] .mode-option[aria-pressed="true"]{ border-color:var(--blue);background:var(--blue-soft); } html[data-mode] .mode-option-name{font-weight:650;font-size:14px;} /* Dentro de Configuración, la fila del selector apila el picker y su confirmación. `.stg-row-control` es un flex horizontal pensado para un interruptor, así que sin este contenedor el mensaje se colocaría AL LADO de una rejilla de tres tarjetas. Se envuelve en vez de usar `:has()` para no depender de un selector que algunos navegadores en uso todavía no resuelven. */ html[data-mode] .mode-picker-field{display:flex;flex-direction:column;gap:var(--space-2);width:100%;} html[data-mode] .mode-option-desc{color:var(--muted);font-size:12.5px;line-height:1.5;} /* ------------------------------------------------------------ 4 · LA PREGUNTA DE BIENVENIDA (primera visita) Un diálogo, no un asistente de cinco pasos: una pregunta, tres respuestas y la posibilidad de cambiarla luego. Se apoya en el mismo patrón de superposición que el resto de modales de la aplicación. ------------------------------------------------------------ */ html[data-mode] .mode-gate{ position:fixed;inset:0;z-index:1200; display:flex;align-items:center;justify-content:center; padding:var(--space-5); /* El velo se DERIVA, como todo lo demás. En claro oscurece con la tinta (`--text`, marrón oscuro); en oscuro esa tinta es crema y aclararía la pantalla en vez de atenuarla, así que se usa el propio lienzo (`--bg:#0E0F11`), que es lo más oscuro del tema. Es la misma razón por la que la landing tiene una única regla bajo [data-theme="dark"]: la intensidad de un velo no es un color nuevo, es el mismo token leído en el tema correcto. */ background:color-mix(in srgb, var(--text) 45%, transparent); backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); } html[data-mode][data-theme="dark"] .mode-gate{ background:color-mix(in srgb, var(--bg) 78%, transparent); } html[data-mode] .mode-gate-card{ width:min(620px,100%);max-height:92vh;overflow:auto; background:var(--surface);border:1px solid var(--border); border-radius:var(--r-lg);padding:var(--space-7); box-shadow:var(--shadow-lg); } html[data-mode] .mode-gate-kicker{ display:block;margin-bottom:var(--space-2);color:var(--muted2); font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:11px;font-weight:700; letter-spacing:.08em;text-transform:uppercase; } html[data-mode] .mode-gate-title{ margin:0 0 var(--space-2);font-size:clamp(20px,2.4vw,26px); font-weight:var(--text-h1-weight);line-height:1.2; } html[data-mode] .mode-gate-sub{ margin:0 0 var(--space-6);color:var(--muted); font-size:14px;line-height:1.6; } html[data-mode] .mode-gate .mode-picker{margin-bottom:var(--space-5);} html[data-mode] .mode-gate-foot{ display:flex;align-items:center;justify-content:space-between; gap:var(--space-4);flex-wrap:wrap; padding-top:var(--space-4);border-top:1px solid var(--border-soft); } html[data-mode] .mode-gate-note{ margin:0;color:var(--muted);font-size:12.5px;line-height:1.5;flex:1 1 220px; } /* ------------------------------------------------------------ 5 · LA NOTA DE CONTEXTO DEL ANALIZADOR Una línea bajo la cabecera que dice, en modo Inversión, que el gráfico es opcional. Existe porque el producto entero ha dicho durante meses lo contrario, y una sola frase ahorra la duda. ------------------------------------------------------------ */ html[data-mode] .mode-note{ display:block;margin:calc(var(--space-2) * -1) 0 var(--space-6); color:var(--muted);font-size:13px;line-height:1.6;max-width:560px; } @media (max-width:560px){ html[data-mode] .mode-picker{grid-template-columns:1fr;} html[data-mode] .mode-gate-card{padding:var(--space-5);} } /* ------------------------------------------------------------ 6 · DE DÓNDE VIENE UN CAMPO RELLENO Cuando el activo llega desde otra pantalla (Análisis Fundamental → decisión, historial → volver a analizar), el campo aparece relleno y esta línea dice por qué, con la forma de quitarlo. Sin ella sería un dato que aparece solo, que es justo lo que este proyecto llama un bug en el Copilot. Cuelga de `html[data-mode]` como el resto de la hoja —el atributo está siempre puesto— así que sigue sin poder tocar nada fuera. ------------------------------------------------------------ */ html[data-mode] .asset-from{ display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap; margin:var(--space-2) 0 0; color:var(--muted);font-size:12.5px;line-height:1.5; } html[data-mode] .asset-from[hidden]{display:none;} html[data-mode] .asset-from-dot{ width:5px;height:5px;border-radius:50%;background:var(--blue);flex-shrink:0; } html[data-mode] .asset-from-clear{ min-height:24px; padding:0;border:0;background:none;font:inherit;color:var(--muted2); text-decoration:underline;text-underline-offset:2px;cursor:pointer; } html[data-mode] .asset-from-clear:hover{color:var(--text);} html[data-mode] .asset-from-clear:focus-visible{box-shadow:var(--shadow-focus);border-radius:3px;} /* Acciones al pie de una tarjeta del Panel (hoy: volver a analizar el activo de la posición abierta). Sin caja propia ni segundo borde: la tarjeta ya es la caja. */ html[data-mode] .mx-card-actions{ display:flex;flex-wrap:wrap;gap:var(--space-2); margin-top:var(--space-4); } /* ------------------------------------------------------------ 7 · EL RITMO DE LA PANTALLA ES EL RITMO DE LA DECISIÓN Hasta aquí el modo cambiaba el VOCABULARIO y el ORDEN. Eso resuelve "¿esto es para mí?" pero no "¿esto se siente distinto?", que es lo que pedía el encargo: las dos experiencias tenían la misma densidad, el mismo aire y la misma jerarquía en todas las pantallas. La diferencia se DERIVA de cómo se usa cada modo, no se inventa: INVERSIÓN una decisión que se juega en meses se LEE. Más aire al abrir una pantalla, medida de lectura más larga y un titular con más presencia: es un sitio donde pensar. TRADING una decisión dentro de una sesión se ESCANEA. Cabecera más compacta, medida más corta y bloques más juntos: entra más cosa antes del primer scroll. "Ambos" hereda de TRADING, la misma regla que ya sigue el vocabulario — una sola regla que recordar. TRES LÍMITES que esta sección no cruza, y son los que la hacen segura: - **No redefine ni un token de `base.css`.** Declara los suyos (`--mode-rhythm`, `--mode-measure`), igual que `max.css` declara `--mx-gold`. Ninguna otra hoja puede verse arrastrada. - **No toca ni un color, ni una fuente, ni un borde, ni una sombra.** Solo espacio, medida y escala tipográfica. Es la diferencia entre "la misma aplicación con otro ritmo" y la paleta obsidiana que este proyecto ya rechazó una vez con Max. - **No oculta NADA.** Un bloque apretado sigue estando; el contenido de las dos experiencias es idéntico. Se aplica a la CABECERA de pantalla y a la separación entre tarjetas —las dos superficies compartidas por todas las vistas— y no a cada componente: así el ritmo cambia en todas partes sin que ninguna pantalla tenga una regla propia que mantener. ------------------------------------------------------------ */ html[data-mode="investment"]{ --mode-rhythm:1.35; --mode-measure:62ch; } html[data-mode="trader"], html[data-mode="both"]{ --mode-rhythm:.72; --mode-measure:44ch; } /* La cabecera de las cinco vistas con `.page-*` (Fundamental, Historial, Progreso, Trade Tracker, Learning) y la del analizador (`.dash-*`), que es la misma pieza con otro nombre. El `calc()` escala el hueco que YA existía en `base.css`/`app.css`: el ritmo del modo es un multiplicador del ritmo de APEX, nunca un valor nuevo. */ html[data-mode] .page-kicker{ margin-top:calc(var(--space-2) * var(--mode-rhythm)); } html[data-mode] p.page-sub{ max-width:var(--mode-measure); margin-bottom:calc(var(--space-6) * var(--mode-rhythm)); } /* El analizador abre como el de Investment Mode: el titular arriba, sin un hueco de pantalla de bienvenida encima de las tarjetas. */ html[data-mode] .dash-intro{ padding-top:calc(var(--space-1) * var(--mode-rhythm)); padding-bottom:calc(var(--space-5) * var(--mode-rhythm)); max-width:none; } html[data-mode] p.dash-sub{max-width:var(--mode-measure);} /* El titular. MISMO clamp, otra escala: un título grande y tranquilo se lee como un sitio donde pensar; uno compacto, como un puesto de trabajo. No cambia la familia, ni el peso, ni el color. */ /* LA LISTA ES UNA: todo lo que sea el titular de una pantalla entra aquí. `.d2-title` (el saludo del Panel) y `.mk2-title` (Market) declaraban su propia escala y se quedaban fuera del ritmo del modo, que es justo lo que «un solo declarante» prohíbe. */ html[data-mode="investment"] .page-title, html[data-mode="investment"] .dash-title, html[data-mode="investment"] .d2-title, html[data-mode="investment"] .mk2-title{font-size:clamp(23px,2.6vw,30px);} html[data-mode="trader"] .page-title, html[data-mode="trader"] .dash-title, html[data-mode="trader"] .d2-title, html[data-mode="trader"] .mk2-title, html[data-mode="both"] .page-title, html[data-mode="both"] .dash-title, html[data-mode="both"] .d2-title, html[data-mode="both"] .mk2-title{font-size:clamp(19px,2.1vw,24px);} /* La separación entre bloques. Es lo que decide cuánto entra antes del primer scroll, y por eso es la otra mitad del ritmo. */ html[data-mode] .card + .card{ margin-top:calc(var(--space-5) * var(--mode-rhythm)); } /* EL PANEL es la pantalla que más se abre, así que si el ritmo no llega aquí, no llega. Su raíz (`.d2-dashboard`) es la que separa los tramos del centro de mando; el `.d2-briefing-content` es el ritmo de dentro del briefing. Se escalan los DOS tokens que ya usaban, igual que el resto de esta sección. Se midió por qué hacía falta: con solo las reglas de `.page-*` los dos modos daban un Panel de la MISMA altura exacta (3.844 px en la captura), porque el Panel no usa ninguna de esas clases. La diferencia existía en cinco pantallas y no en la principal. */ html[data-mode] .d2-dashboard{gap:calc(var(--space-7) * var(--mode-rhythm));} html[data-mode] .d2-briefing-content{gap:calc(var(--space-5) * var(--mode-rhythm));} /* EL DOCUMENTO DEL ANÁLISIS es la pantalla más leída de APEX, así que su ritmo es el que más se nota. Se escala el gap de cada tramo de `base.css` (y el refinado de `analysis.css` por encima de 640 px, que si no ganaría por venir después), NO su contenido: las mismas secciones, en el mismo orden, con las mismas tarjetas. Un análisis en modo Inversión se lee como un texto con capítulos; en Trading, como un informe. */ html[data-mode] .analysis-doc{gap:calc(var(--space-7) * var(--mode-rhythm));} @media(min-width:641px){ html[data-mode] .analysis-doc{gap:calc(var(--space-8) * var(--mode-rhythm));} } /* En móvil el ritmo se ATENÚA hacia 1 en los dos modos: con 390 px de ancho, el aire de Inversión empuja el contenido fuera de pantalla y la compresión de Trading amontona lo que ya va en una sola columna. La diferencia sigue existiendo —el titular y la medida siguen siendo distintos— pero deja de pagarse en scroll. */ @media (max-width:560px){ html[data-mode="investment"]{--mode-rhythm:1.1;} html[data-mode="trader"], html[data-mode="both"]{--mode-rhythm:.85;} } /* ============================================================ 8 · LA ATMÓSFERA DE TRADER MODE El encargo pide que activar Trader Mode se sienta como ENTRAR EN UN ENTORNO DE MERCADO. Y pide, en la misma frase, que no parezca un exchange de cripto: sin velas gigantes, sin neón, sin ruido visual. Lo que hay aquí es UNA textura: una rejilla de cotización muy tenue detrás del contenido. Nada más. ============================================================ LAS CINCO REGLAS QUE LA HACEN PREMIUM Y NO RUIDO · **NI UN COLOR NUEVO.** La rejilla se dibuja con `currentColor` derivado de `--text` a una opacidad mínima, así que en crema es un gris neutro y en el oscuro `#0E0F11` conserva el contraste. No hay un solo literal, no hay azul de terminal y no hay verde de exchange. · **DETRÁS DEL CONTENIDO, NUNCA DEBAJO DEL TEXTO.** Vive en el fondo del área que hace scroll, y todas las tarjetas de APEX tienen `background:var(--surface)` opaco encima. Ningún párrafo se lee sobre la textura: la legibilidad no se negocia. · **NO SE MUEVE.** Es un fondo estático. Una rejilla animada sería exactamente el «ciclo automático a espaldas del usuario» que este proyecto ya prohibió en la landing, y encima en la pantalla donde alguien está decidiendo con dinero. · **NO LA VE INVERSIÓN.** Toda regla cuelga de `html[data-mode="trader"]` o `[data-mode="both"]`: en modo Inversión la hoja es inerte aquí, y esa pantalla se queda limpia, editorial y en calma, que es lo que el encargo le pide. · **SE APAGA SOLA CUANDO ESTORBA.** Con `prefers-reduced-motion` se queda igual (no se mueve), pero con `prefers-contrast: more` y en modo de colores forzados DESAPARECE: una textura de fondo es lo primero que sobra cuando alguien ha pedido más contraste. ============================================================ */ /* La opacidad es un token propio, como `--mx-gold` en Max: así el valor se declara una vez y se puede atenuar por tema sin repetir la regla. 3,5% en claro y 5% en oscuro — medido para que se INTUYA y no se mire: por encima de ~8% la rejilla empieza a competir con el texto. */ html[data-mode="trader"], html[data-mode="both"]{ --mode-grid: .035; --mode-grid-size: 56px; } html[data-mode="trader"][data-theme="dark"], html[data-mode="both"][data-theme="dark"]{ --mode-grid: .05; } html[data-mode="trader"] .content-scroll, html[data-mode="both"] .content-scroll{ position:relative; } /* El adorno es un PSEUDOELEMENTO vacío, no un nodo con `aria-hidden="true"`: `base.css` trae la regla global `[aria-hidden="true"]{display:none!important}` y este proyecto ya perdió tres adornos por marcarlos así. Un `::before` no existe para un lector de pantalla sin necesidad de declararlo. */ html[data-mode="trader"] .content-scroll::before, html[data-mode="both"] .content-scroll::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background-image: /* La rejilla de cotización: verticales más marcadas que las horizontales, como el eje de tiempo de un gráfico. */ repeating-linear-gradient( to right, color-mix(in srgb, var(--text) calc(var(--mode-grid) * 100%), transparent) 0 1px, transparent 1px var(--mode-grid-size) ), repeating-linear-gradient( to bottom, color-mix(in srgb, var(--text) calc(var(--mode-grid) * 60%), transparent) 0 1px, transparent 1px var(--mode-grid-size) ); /* Se desvanece hacia abajo: la textura se INSINÚA en la parte alta de la pantalla y desaparece donde está el contenido largo. Es lo que evita que una lista de cincuenta filas quede sobre una cuadrícula infinita. */ /* La máscara usa `currentColor` y no un negro literal: en una máscara solo cuenta el canal ALFA, así que el tono da igual — y así esta hoja sigue sin escribir un solo color a mano, que es la regla que `tests/experience-mode.mjs` comprueba sobre el archivo entero. */ -webkit-mask-image:linear-gradient(to bottom, currentColor 0, transparent 620px); mask-image:linear-gradient(to bottom, currentColor 0, transparent 620px); } /* El contenido va POR ENCIMA de la textura, siempre. Sin esto, un elemento sin `position` podría quedar por debajo y verse atravesado por la rejilla. */ html[data-mode="trader"] .content-scroll > *, html[data-mode="both"] .content-scroll > *{ position:relative; z-index:1; } /* Quien ha pedido más contraste no ha pedido atmósfera. */ @media (prefers-contrast: more){ html[data-mode="trader"] .content-scroll::before, html[data-mode="both"] .content-scroll::before{ display:none; } } @media (forced-colors: active){ html[data-mode="trader"] .content-scroll::before, html[data-mode="both"] .content-scroll::before{ display:none; } } /* ============================================================ 9. EL PANEL DE INVESTMENT MODE Su Panel (`invest/home.js`) ya lleva a Soporte desde «Cuenta y ayuda» de la barra lateral: la franja «¿Necesitas ayuda con APEX?» al pie era una segunda entrada al mismo sitio, y texto de más en la pantalla que tiene que leerse en treinta segundos. ============================================================ */ html[data-mode="investment"] #view-maxdash .support-dashboard-entry{ display:none; }