/* GENERACYE — mobile.css v7 · Capa responsive + pulido de capas (cargada la última) Auditoría real a 375px (auditor MQA + capturas + sesión owner): v1 landing (stats/product/demo-input) → v2 col/orb/min-width → v3 wrap del titular → v4 pantalla de acceso → v5 PANEL móvil (cinta vs navegación) → v6 ESCRITORIO: las bandas superiores (topbar/cinta) siempre POR ENCIMA del contenido que scrollea (el briefing IA se montaba sobre la cinta) → v7 EL PANEL DEJA DE SER UNA VENTANA DE 323 px (ver el bloque del final). Regla: en móvil NADA desborda; lo ancho scrollea DENTRO de su caja. */ /* ── Guardas globales (todas las páginas, todos los anchos) ── */ html, body { overflow-x: clip; } #root { max-width: 100vw; overflow-x: clip; } /* Las bandas superiores ganan a cualquier tarjeta/panel que pase por debajo. Solo z-index (sin tocar position: si la banda es sticky/fija, se respeta). */ [class*="topbar"], .app nav { z-index: 80; } /* 13-sep-2026: aquí había además `background: #0a0a0a`, bajo un comentario que dice «Solo z-index». No era solo z-index: `background` es un atajo, así que borraba el `background-image` de quien pasara por debajo — y esta hoja carga la última, así que ganaba siempre y en TODOS los anchos, no solo en móvil. Medido en producción antes de tocar nada: .ticker-tape-wrap backgroundImage "none" backgroundColor rgb(10,10,10) cuando cinematic.css:125 le declara `background: linear-gradient(180deg, oklch(0 0 0 / 0.2), transparent)`. Quitando la declaración en vivo, el degradado vuelve solo: comprobado, no deducido. O sea que un elemento de diseño de la portada llevaba tiempo apagado sin que nada diera error — la familia de «un CSS que desaparece en silencio» que este proyecto ya conoce. Se puede quitar sin consecuencias porque los dos elementos que alcanzaba —.ticker-tape-wrap y .ticker-tape-badge— son `position: static` (medido): no hay nada deslizándose por debajo que necesitara taparse. Y el color era además un literal fuera del sistema de tokens. */ [class*="tape"], [class*="ticker"] { z-index: 70; } /* 760 y no 720 (11-sep-2026). Era 720 y polish.css colapsa el Panel a una columna en 760: en la franja de 40 px que quedaba en medio, `.side` seguía siendo la columna de escritorio de styles.css:617 y, con una sola columna, se estiraba a todo lo ancho. Medido a 736x414 —un iPhone 8 Plus / XR / 11 en horizontal— lo primero bajo la barra es el rótulo ESPACIO DE TRABAJO y el menú apilado a 708 px de ancho, con los datos empujados debajo. Justo lo que la tira de chips de más abajo existe para evitar. */ @media (max-width: 760px) { /* Cortafuegos universal móvil: min-width:auto de flex/grid es la causa nº1 de desbordes — en móvil ningún div impone ancho mínimo intrínseco. */ #root div { min-width: 0; } img, svg, video, canvas { max-width: 100%; height: auto; } /* ── Tipografía fluida: los titulares nunca se cortan ── */ h1, .h1 { font-size: clamp(26px, 8.6vw, 38px) !important; line-height: 1.12 !important; overflow-wrap: break-word; letter-spacing: -0.02em !important; } h2 { font-size: clamp(20px, 6.2vw, 28px) !important; line-height: 1.2 !important; overflow-wrap: break-word; } h3 { font-size: clamp(16px, 5vw, 22px) !important; } /* El span destacado del hero («cada convicción») envuelve, nunca se corta */ h1 span, .h1 span, .accent { white-space: normal !important; overflow-wrap: break-word; font-size: inherit; } /* ── ACCESO / FORMULARIOS · verificado con captura: el enlace «¿Olvidaste la contraseña?» se cortaba porque la tarjeta es más ancha que el viewport y la columna de arte queda como franja muerta ── */ div:has(> form) { display: block !important; max-width: 100vw !important; } form { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; padding-right: 4px; } form a { white-space: nowrap; font-size: 12px; } /* 8-oct-2026 · Sin casillas ni botones de opción: con `form input` a secas, la casilla de «Acepto los Términos» del registro medía 151 px de ancho (medido a 375 px) y empujaba su texto a una columna estrecha. */ form input:not([type="checkbox"]):not([type="radio"]) { width: 100% !important; box-sizing: border-box; } form input[type="checkbox"], form input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; } /* El formulario de registro es tan ancho como su marco, no como la ventana: polish.css le daba `100vw − 24px` y styles.css otros 12 px de margen a cada lado, dentro de un marco con 20 px de aire: se salía 8 px por la derecha y cortaba los campos y el botón de «Crear cuenta». */ .auth-stage .auth-card { width: 100% !important; margin: 0 !important; } /* ── LANDING · offenders reales del auditor ── */ .demo-input { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } .orb-stage { max-width: 86vw !important; margin-inline: auto !important; } div:has(> .stats-cell) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; } .stats-cell { width: auto !important; min-width: 0 !important; } div:has(> .cell.prod) { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; max-width: 100% !important; } .cell.prod { width: auto !important; min-width: 0 !important; max-width: 100% !important; } /* Columnas (footer/secciones .col) → apiladas */ div:has(> .col) { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; max-width: 100% !important; } .col { width: auto !important; min-width: 0 !important; max-width: 100% !important; } /* Filas flex de la landing que no caben → se envuelven */ section > div { flex-wrap: wrap; } /* 15-oct-2026 · El terminal de la portada (landing.js, .criterio-rejilla) escribe cada línea con `white-space: pre` en línea: a 375 px la caja mide 327 px y las líneas piden 454, así que «✓ Yahoo ✓ Stooq EOD ✓ TradingView ✓ SEC EDGAR ✓ Finnhub» se corta por la derecha sin ninguna pista. Que envuelva: pre-wrap conserva los espacios dobles del terminal. */ .criterio-rejilla div[style*="white-space: pre"] { white-space: pre-wrap !important; } /* blobs/anillos decorativos: grandes por diseño — su contenedor los recorta */ section, header, footer, main { max-width: 100vw; overflow-x: clip; } /* ── APP SHELL ── */ .app { max-width: 100vw; overflow-x: clip; } /* Topbar / navegación / cintas de cotizaciones: scroll horizontal propio, nunca recortan ni empujan la página */ /* 13-sep-2026: la lista llevaba [class*="tape"], [class*="ticker"] y [class*="marquee"]. Ninguno alcanzaba a la cinta del Panel —que es .gen-marketbar (professional.js:139) y no contiene ninguna de las tres palabras— y lo unico que alcanzaban de verdad eran la cinta de la PORTADA y su pista de repuesto. Medido en produccion a 375 px, con el widget de TradingView caido (que es cuando entra el repuesto, y hoy esta entrando): .mb-marquee clientWidth 297 · scrollWidth 5.163 · max-width 375,33 px La animacion de polish.css:187 es translateX(-50%) sobre los 5.163 px reales de la pista (la lista va duplicada a proposito), asi que con la caja recortada a 297 px la cinta se va media pantalla y deja la banda en negro. Una pista animada no es una barra con scroll. Hallazgo SHELL-06. */ .app nav, [class*="topbar"], [class*="tabs"], .gen-marketbar { overflow-x: auto !important; max-width: 100vw !important; flex-wrap: nowrap !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .app nav::-webkit-scrollbar, [class*="topbar"]::-webkit-scrollbar, .gen-marketbar::-webkit-scrollbar { display: none; } /* VERIFICADO EN SESIÓN: la cinta de cotizaciones (sticky/absoluta) tapaba la fila de navegación del Panel — en móvil pasa al flujo normal del documento */ /* 13-sep-2026: misma correccion. La cinta que habia que sacar de la capa flotante es la del Panel, .gen-marketbar. Con la lista ancha, el que recibia el position:static era el rotulo de la cinta de la PORTADA: cinematic.css:131 lo quiere absolute con transform: translateY(-50%), y al pasarlo a estatico CONSERVA el transform, asi que ocupa linea propia y empuja el widget dentro de una caja con overflow:hidden. Medido a 375 px: .ticker-tape-badge position "static" y .ticker-tape-wrap de 69 px de alto en vez de 46. Hallazgo SHELL-03. */ /* 20-sep-2026: `static` se pasó de frenada. La cinta lleva dentro su pista de repuesto (.mb-fallback, professional.js:158) con `position:absolute; inset:0`, y un padre estático no es bloque contenedor: la pista se colgaba de `.app` —el primer antepasado posicionado— y se estiraba sobre la PÁGINA ENTERA. Medido en producción a 760 px con el widget de TradingView caído: .mb-fallback 554 px de alto (el alto de la app) en vez de 46, con los precios pintados encima del texto de la pantalla. Y el widget está caído para todo el que aún no ha aceptado cookies, que es justo el visitante nuevo. `relative` mantiene la cinta en el flujo —que es lo que buscaba la corrección del 13-sep, no floten sobre la navegación— y le devuelve el bloque contenedor a su pista. */ .app .gen-marketbar { position: relative !important; } /* Sidebar del panel → tira horizontal de chips (el contenido queda arriba, no tras una pantalla entera de menú) — SIEMPRE visible sobre cualquier banda */ .dashboard .side, .app .side { display: flex !important; flex-direction: row !important; align-items: center; overflow-x: auto !important; max-width: 100vw !important; gap: 6px; padding: 8px 10px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; position: relative !important; z-index: 30; background: rgba(10,10,10,.96); height: auto !important; min-height: 0 !important; } .side::-webkit-scrollbar { display: none; } .side > * { flex: 0 0 auto !important; } .side .item { white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; } .side .group-label { display: none !important; } /* etiquetas de sección fuera en móvil */ /* ── Grids → una columna ── */ .grid-2, .kpi-row, .weekly-pick-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } .card { max-width: 100%; min-width: 0; box-sizing: border-box; } .card, [class*="panel"] { overflow-x: clip; } /* ── Tablas y filas anchas: scroll interno honesto ── */ /* 15-oct-2026 · SIN `-webkit-overflow-scrolling: touch`. En un iPhone con Safari, la «muestra» de la portada se quedaba BLANCA a partir de «El historial completo»: esa tabla mide 3.134 px de alto en el móvil (cada fila es una tarjeta) y, al ser una caja desplazable con desplazamiento táctil, Safari la pinta en una capa aparte; con una capa tan alta no la rasteriza y la deja en blanco, y con ella todo lo que va debajo. Medido en producción a 375 px: table → overflow auto, 3.134 px. El desplazamiento con inercia es el de siempre desde iOS 13, así que esta propiedad no aportaba nada y solo creaba la capa. */ .metric-table, table { display: block; max-width: 100%; overflow-x: auto; } /* 15-oct-2026 · LA FICHA DE UN VALOR ERA OTRA CAJA DESPLAZABLE DE 21.000 px. styles.css:718 da a .analysis `overflow-y: auto` para la estación de escritorio; en el teléfono nadie le pone alto, así que la ficha entera (medida en el banco a 375 px: HURN 21.483 px, AAPL 21.978, VWCE.DE 13.911) era UNA caja con desplazamiento: el mismo patrón que la tabla del historial que dejaba la muestra en blanco en el iPhone. Quien desplaza es .screen (600-710 px de alto); la ficha fluye dentro. Lo ancho ya lo recorta `.screen { overflow-x: clip }` (más abajo en este fichero) y, medido, ningún elemento de la ficha pasa de 375 px. Y las tres .metric-table de la ficha (6, 8 y 35 filas; la técnica mide 2.068 px de alto) caben en su tarjeta (scrollWidth = clientWidth = 307), así que el overflow-x: auto de la línea de arriba solo les creaba la capa. */ .analysis { overflow: visible !important; } .analysis .metric-table { overflow: visible; } .watch-row { min-width: 0; } .watch-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; } /* ── Widgets embebidos (TradingView) ── */ iframe { max-width: 100% !important; } /* ── Modales y visores a pantalla casi completa ── */ [class*="modal"] { width: 96vw !important; max-width: 96vw !important; } .gen-export-viewer > div { width: 96vw !important; height: 88vh !important; } /* ── Ergonomía táctil ── */ /* 31-oct-2026 · De 42 a 44 px, y también lo que no era .btn: pestañas de 27 px, filtros de alertas y botones de cabecera (auditoría de la aplicación por dentro). */ .btn, button[class*="btn"], .tabs button, .filtro-alerta { min-height: 44px; } .top-right button { min-width: 44px; min-height: 44px; } input, select, textarea { font-size: 16px !important; } /* evita el auto-zoom de iOS */ body { padding-bottom: env(safe-area-inset-bottom); } /* Orbe decorativo del dashboard: que no dispare el ancho */ .dash-orb-wrap { max-width: 45vw; } } /* ── «ENTRAR» NO SE OCULTA NUNCA ──────────────────────────── styles.css esconde `.top-right .btn-ghost` a partir de 1200 px para quitar el botón de prueba gratuita, pero se llevaba por delante el de iniciar sesión, que comparte clase. Resultado medido a 375 px: un cliente que YA PAGA abre la portada en el móvil y no tiene por dónde entrar — no hay menú hamburguesa que lo rescate. El de sesión lleva ahora .btn-signin y vuelve. */ .top-right .btn-signin { display: inline-flex !important; align-items: center; } @media (max-width: 768px) { /* Que quepa junto al botón primario sin empujar la barra: los dos se encogen en tipografía y relleno, ninguno parte su texto en dos líneas. */ .top-right { gap: 6px; } .top-right .btn-signin, .top-right .btn-primary { font-size: 12px; padding: 6px 10px; white-space: nowrap; flex-shrink: 0; } } @media (max-width: 400px) { .top-right { gap: 4px; } .top-right .btn-signin, .top-right .btn-primary { font-size: 11px; padding: 5px 8px; } } /* Pantallas muy pequeñas */ @media (max-width: 400px) { h1, .h1 { font-size: clamp(24px, 8.2vw, 32px) !important; } .stats-cell { font-size: 12px; } } /* ═══════════════════════════════════════════════════════════════════════════ EL PANEL EN EL MÓVIL ERA UNA VENTANA DE 323 px (11-sep-2026) Medido en producción con un móvil real emulado a 375x812 y recarga previa (con el panel del navegador oculto `innerWidth` es 0 y las cifras mienten): .dashboard → grid-template-rows: 64px / 322,5px / 323,5px .center → alto 323 px, contenido 10.016 px (31 pantallas) .right → alto 323 px, contenido 3.210 px (10 pantallas) documento → no scrollea (body overflow:hidden) O sea: el cliente leía el producto entero por una rendija de un tercio de pantalla, y debajo otra rendija con la lista de seguimiento compitiendo por su atención. La Acción de la Semana mide 3.010 px: nueve rendijas de scroll para una sola tarjeta. El 13F quedaba a catorce arrastres del principio. POR QUÉ PASABA. `.dashboard` es la estación de trabajo de ESCRITORIO: tres columnas (styles.css:611) donde cada panel scrollea por su cuenta, que es lo correcto con un ratón y 1.900 px. `.center` y `.right` traen su `overflow-y: auto` de styles.css:640 y :679, FUERA de toda consulta de medios. polish.css:61 colapsa las COLUMNAS a una sola en móvil, pero nadie devolvía el alto ni quitaba el scroll interno: las tres columnas se convirtieron en tres filas que se reparten los 710 px del contenedor. EL ARREGLO. En móvil el Panel se comporta como una página: scrollea UNA sola caja (`main`) y dentro todo fluye. Verificado a 375x812: 13.736 px seguidos, sin cajas anidadas, sin desbordes laterales (scrollWidth == clientWidth). El corte es 760 px a propósito, el mismo de polish.css:61 (donde el grid pasa a una columna). Entre 761 y 1080 la estación sigue siendo de escritorio con sus paneles independientes — ahí no se toca nada. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { .app > main { overflow-y: auto !important; /* 15-oct-2026: sin `-webkit-overflow-scrolling: touch` (ver la nota de las tablas, más arriba): desde iOS 13 no hace falta y obliga a Safari a pintar el Panel entero, 11.000 px, en una capa aparte. */ overscroll-behavior-y: contain; } .dashboard { display: block !important; height: auto !important; } .dashboard > .center, .dashboard > .right { height: auto !important; overflow-y: visible !important; } /* Los dos botones flotantes vuelven a aparecer al llegar al fondo (así está escrito en flotantes.js: «ahí no hay texto debajo que tapar»). Ahora sí lo hay, porque el Panel termina donde termina su contenido: 76 px de aire para que la última fila no quede debajo del botón de IA. */ .dashboard { padding-bottom: 76px !important; } /* ── 56 px de los 375 se iban en relleno lateral ────────────────────── .center trae `padding: 22px 28px` de escritorio (styles.css:640) y cada tarjeta otros 18. Medido: el contenido de la Acción de la Semana vivía en 273 px de los 375 — el 27 % de la pantalla era margen. Con esto pasa a 305 px y la cabecera baja de 4 líneas a 2. */ .center, .right { padding: 16px 12px !important; } .card { padding: 14px !important; } } /* ── LA ACCIÓN DE LA SEMANA · su cabecera y sus sellos ────────────────────── La cabecera es un flex de dos columnas con `justify-content: space-between` (dashboard.js): a 375 px el rótulo «ACCIÓN DE LA SEMANA · PRE-RUPTURA» se partía en cuatro líneas de dos palabras mientras la fecha se apretaba a su derecha en otras tres. En el móvil van uno debajo del otro. Y los sellos que dicen si la pick es la EMITIDA o un cálculo PROVISIONAL están escritos a 7,5 px. Ese sello es la prueba de que lo que ves en la web es lo mismo que llegó por correo: si no se lee, no sirve. 10 px mínimo. */ @media (max-width: 760px) { .wp-head { flex-direction: column !important; align-items: flex-start !important; gap: 6px; } .wp-head > .mono:first-child { flex-wrap: wrap; } /* 15-oct-2026: 11 px, el suelo del móvil. Con 10 px esta regla, que pesa más que la del suelo, lo dejaba por debajo. */ .wp-head .mono { font-size: 11px !important; letter-spacing: .08em !important; } .kpi-row .kpi .label { font-size: 11px !important; letter-spacing: .1em !important; } /* 15-oct-2026: la rotación sectorial y el cribado de menos de 50 $ iban en dos columnas (1,4fr / 1fr): a 375 px cada sector quedaba en 19 px y se leía «C… +3,14 %». Uno debajo del otro. */ .regimen-sectores-cribado { grid-template-columns: 1fr !important; } } /* ── LA TABLA DE PICKS ABIERTAS, COMO FICHAS EN EL MÓVIL (16-oct-2026) ────── Nueve columnas en 375 px solo se leían deslizando de lado, sin ninguna pista de que había más. Cada fila pasa a ser una ficha con sus rótulos (data-label, en dashboard.js). */ @media (max-width: 640px) { .tabla-abiertas { overflow: visible !important; } .tabla-abiertas thead { display: none; } .tabla-abiertas table, .tabla-abiertas tbody, .tabla-abiertas tr, .tabla-abiertas td { display: block; width: 100%; } .tabla-abiertas tr { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 0; } .tabla-abiertas td { padding: 0 !important; white-space: normal !important; } .tabla-abiertas td::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .tabla-abiertas td:first-child { grid-column: 1 / -1; font-size: 16px !important; } .tabla-abiertas td:first-child::before { display: none; } } /* ── EL 13F: TRES MANDOS DE 4x4 px ────────────────────────────────────────── El radar institucional cambia de vista cada 9 segundos y sus únicos mandos son tres puntos de 4x4 px separados 3 px (dashboard.js). La yema de un dedo mide unos 34 px: los cubre los tres a la vez. WCAG 2.2 (2.5.8) pide 24x24 como mínimo y las guías de Apple y Google, 44x44. En el móvil el punto pasa a 8 px y su área de toque a 26x26 con un pseudoelemento invisible. El número no es capricho: las áreas NO pueden solaparse. Con `inset: -9px` cada área mide 8 + 9 + 9 = 26 px y el hueco entre puntos es 18, así que una acaba justo donde empieza la siguiente. Probado antes con áreas de 44 px: se pisaban unas a otras y el navegador entregaba el toque al ÚLTIMO punto del DOM — tocabas el primero y cambiaba al tercero. 26x26 cumple el mínimo de WCAG 2.2 (2.5.8) sin solapes. En escritorio no se toca nada: con ratón los 4 px de siempre. */ @media (max-width: 760px) { .radar13f-dots { gap: 18px !important; margin-left: 8px !important; } .radar13f-dots > span { width: 8px !important; height: 8px !important; position: relative; } .radar13f-dots > span::after { content: ""; position: absolute; inset: -9px; } } /* ── LA CARTERA DEL CLIENTE ESCONDÍA EL DINERO ────────────────────────────── La tarjeta de Cartera es `grid-template-columns: 140px 1fr` con 24 px de hueco (estilo en línea): el donut se lleva 140 y a la leyenda le quedan 151. Medido a 375 px: de cada posición se veía «AAPL · 510 accs.» y el importe ($169.457,70) quedaba cortado por el borde y el peso (30,3 %) ENTERO fuera de la pantalla, sin forma de llegar a él. Es el dinero del cliente. En móvil: donut arriba, leyenda debajo a todo lo ancho. */ @media (max-width: 760px) { .cartera-donut { grid-template-columns: 1fr !important; gap: 14px !important; justify-items: center; } .cartera-donut > * { width: 100%; min-width: 0; } } /* ── LAS COTIZACIONES DEL HERO NACEN FUERA DE LA PANTALLA ─────────────────── Las cinco burbujas que orbitan la esfera de la portada (`.orb-tick`) se colocan con desplazamientos fijos de ±150, ±170 y ±200 px escritos en línea desde landing.js, pensados para una escena ancha. Medido a 375 px: cuatro de las cinco nacen fuera del viewport (x = −86, −66, 401 y 425) y se ven cortadas por el borde — «GOOGL 338,5» partido a mitad de cifra. COMPROBADO ANTES DE TOCAR NADA: la página NO se arrastra de lado. `.screen` da scrollWidth 432 contra clientWidth 365, pero al forzar scrollLeft = 200 se queda en 0, porque `html, body { overflow-x: clip }` (arriba en este mismo fichero) ya recorta. O sea: no hay desplazamiento lateral que arreglar; hay contenido pintado donde no se ve. Las mismas cotizaciones, completas, están en la cinta que va justo debajo. En el móvil no se pintan las burbujas. */ @media (max-width: 760px) { .orb-tick { display: none !important; } } /* ── EL RELOJ DE MERCADO TAPABA EL BOTÓN DEL MENÚ (12-sep-2026) ───────────── Medido en una ventana real de 391 px, con sesión, DESPUÉS de devolver el botón hamburguesa a la aplicación: .nav-burger x 42 → 82 (40x40, visible) .top-right-cluster x −54 → 379 (433 px de ancho) solape 40 de 40 px elementFromPoint(centro del botón) → span.mono ← el texto del reloj O sea: el botón estaba, medía bien y NO se podía pulsar. Mi clic por código sí llegaba —`.click()` no mira quién está encima— y el de un dedo, no. Es exactamente el fallo de los dos botones flotantes del 3-sep, y se caza con la misma prueba: elementFromPoint en el centro. El reloj se lleva 234 de esos 433 px. styles.css:931 ya intenta esconderlo por debajo de 1040 px, pero NO PUEDE: su `display: flex` va en el atributo style del componente (professional.js), y contra un estilo en línea no hay hoja que gane sin `!important`. Y el bloque derecho lleva `min-width: max-content` (styles.css:183-184) más `flexShrink: 0` en línea, así que tampoco cede: por eso la columna del menú se quedaba en 0 px. En el móvil se le permite encoger. El estado del mercado no se pierde: la cinta del Panel y la ficha de cada valor lo dicen («● PRECIO EN VIVO» / «ÚLTIMO PRECIO · BOLSA CERRADA»). */ @media (max-width: 760px) { .top-right-cluster > .market-clock { display: none !important; } .top-right, .top-right-cluster { min-width: 0 !important; } } /* ── MERCADOS, MACRO Y SEÑALES EN EL MÓVIL (12-sep-2026) ──────────────────── Las tres pantallas se pintan con rejillas fijas escritas EN LÍNEA sobre divs sin clase, así que ninguna hoja podía alcanzarlas. Medido a 375 px antes de tocar nada (estudio del móvil, docs/ESTUDIO-MOVIL-11-SEP-2026): Mercados 3 columnas → 61 px por tabla de cotizaciones Macro 2×2 → 53 px por widget de TradingView Señales 6 columnas → 45 px por KPI, con .kpi en overflow:hidden, o sea cifras CORTADAS, no envueltas Ahora cada una lleva su clase real (markets.js, macro.js, signals.js) y se apilan aquí. El !important es obligado: compiten contra el atributo style del propio div, no contra otra regla. En escritorio no cambia nada. Los KPI van de DOS en dos y no de uno en uno: seis cifras en una columna son seis pantallas de scroll para el bloque que dice si el servicio funciona. A 391 px eso deja ~170 px por caja, de sobra para 18 px. */ @media (max-width: 760px) { .screen > .screen-pad { padding-left: 12px !important; padding-right: 12px !important; } .mk-movers, .macro-cols, .macro-dos { grid-template-columns: minmax(0, 1fr) !important; } /* 15-oct-2026 · El cierre de la «muestra» (demo.js, .demo-cierre) es una rejilla de dos columnas escrita en línea: medida a 375 px, 146 + 133 px, con el párrafo «La parte que se paga» en la estrecha y la lista de lo que incluye el plan en la otra. En el teléfono, una columna. */ .demo-cierre { grid-template-columns: minmax(0, 1fr) !important; } .kpi-6, .form-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Y que la cifra no se recorte dentro de su caja, que es lo que hacía. */ .kpi-6 .kpi { padding: 12px !important; } .kpi-6 .value { overflow-wrap: anywhere; } } /* ── UNA TIRA DE PESTAÑAS EN 7 px (12-sep-2026) ───────────────────────────── Medido en Señales, ventana de 391 px, con los KPI ya arreglados: .tabs «DEL ESCÁNER · MI CUADERNO · COMPARAR» pide 392 px → tiene 130 .tabs «TODAS · ABIERTAS · GANADORAS · PERDEDORAS» pide 338 → tiene 7 Las dos viven en filas flex junto a vecinos que no ceden (el botón «← Volver», el título, el selector de orden y «+ Nueva señal»). La segunda además trae `flex: 0 1 0%`, así que se encoge hasta desaparecer: cuatro filtros del cuaderno de operaciones en siete píxeles. Es el mismo fallo que dejó el menú principal en 0 px, y la misma lección: cuando un hijo no cabe, el que tiene que ceder es el padre. No se arregla con scroll horizontal: mobile.css:68 ya lo pone, y un scroll de 7 px de ancho no lo encuentra nadie. Un `overflow-x` sin pista no es un scroll (regla escrita el 3-sep). Aquí caben envolviendo: la tira ocupa su propia fila y sus botones bajan de línea. Sin scroll, sin pista que inventar y sin nada escondido. */ @media (max-width: 760px) { div:has(> .tabs) { flex-wrap: wrap !important; } .tabs { flex: 1 1 100% !important; min-width: 0 !important; flex-wrap: wrap !important; overflow-x: visible !important; row-gap: 6px; } /* La atribución de TradingView va con `margin-left: auto` en esa misma fila: medida a 391 px, se salía 31 px y se leía «POWERED BY TRADINGVIEW ·». No se esconde —hay que acreditarlos—: baja a su propia línea. */ /* Y el padre tiene que dejarla bajar. Primer intento: solo `flex: 1 0 100%` en la propia etiqueta — medido después, seguía saliéndose (294 px con el borde derecho en 634 de 391), porque su fila tiene `flex-wrap: nowrap` y un ancho base del 100 % dentro de una fila que no envuelve solo ensancha la fila. Cuando un hijo no cabe, el que cede es el padre. Tercera vez que muerde la misma regla en esta sesión: el menú, las pestañas y esto. */ div:has(> .tv-credito) { flex-wrap: wrap !important; } .tv-credito { flex: 1 0 100% !important; margin-left: 0 !important; text-align: right; } /* 15-oct-2026 · La tira «Acciones · Divisas · Cripto · Materias primas · Índices · Bonos» del Pulso del mercado del Panel (dashboard.js:300, estilo en línea con overflow-x: auto) mide 347 px y pide 511: «Materias primas» quedaba cortada en «Materias prim» e «Índices» y «Bonos» fuera, sin pista de que se puede arrastrar. Misma receta que las pestañas de arriba: envuelve. Medido con la regla puesta: dos filas de 40 px, nada fuera. */ .dashboard div[style*="gap: 2px"][style*="overflow-x: auto"] { flex-wrap: wrap; overflow-x: visible !important; } } /* ── EL MENÚ SE ABRÍA Y NADIE PODÍA TOCARLO (12-sep-2026) ─────────────────── Drew: «le doy al menú de las 3 líneas y no sale nada». Reproducido en la ventana de 391 px, y el panel SÍ se abría: nav.nav display:flex · data-abierto="true" · 391x241 en y=55 · opacidad 1 Pero al preguntar quién hay en el centro de cada destino: Panel → iframe TAPADO Mercados → span TAPADO Macro → section.center TAPADO La causa es una regla de este mismo fichero (línea 68): la barra superior lleva `overflow-x: auto` para que su contenido nunca empuje la página. Un contenedor con overflow RECORTA a sus hijos absolutos, y el panel cuelga del header con `top: 100%` — o sea, justo fuera de su caja. Se dibujaba entero y se recortaba entero: por eso al tocar no pasaba nada y el dedo aterrizaba en el contenido de debajo. Ya no hace falta que la barra scrolle: el menú es un panel y el reloj se aparta, así que ahí dentro caben la marca, el botón y el bloque derecho (medido: 22 + 40 + 193 + huecos = 283 de 367 útiles). Y la lección, que es la tercera vez hoy: comprobar que un control EXISTE y MIDE bien no es comprobar que se puede tocar. Eso solo lo dice elementFromPoint en su centro. */ @media (max-width: 760px) { .topbar { overflow: visible !important; z-index: 1200 !important; } } /* Destinos que solo existen en el menú del teléfono: en escritorio se llega a ellos por la tira lateral del Panel y por el menú del avatar. */ .solo-movil { display: none; } @media (max-width: 760px) { .topbar nav.nav .solo-movil { display: block; } /* Y al revés: lo que no cabe en un teléfono. El aviso «Activar precios live» mide ~200 px y solo aparece en los navegadores que no tienen la clave guardada —o sea, justo en el móvil de un cliente—: empujaba el bloque derecho a 407 px y tapaba el botón del menú. Pegar una clave no se hace desde el teléfono; la opción vive en Ajustes → API. */ .solo-escritorio { display: none !important; } /* Blindaje: pase lo que pase en ese bloque, no puede volver a invadir el hueco de la marca y del menú. Si algún día no cabe, se recorta por su lado izquierdo en vez de montarse encima. */ .top-right { overflow: hidden !important; justify-content: flex-end !important; } } /* ── LO QUE NO SE PUEDE TOCAR CON UN DEDO (12-sep-2026) ───────────────────── Barrido de los 57 controles del Panel a 391 px, descontando los que ya llevan un ::after que amplía su zona (el de PULSE, por ejemplo): 53 por debajo de 44 px, y el grupo peor son 18 botones de 40x15 ✕ de cada fila de la lista de seguimiento 40x15 ← borrar un valor Ver el historial completo → 201x15 Todo · < $20 · < $50 · < $100 79x26 ← filtros del escáner La ✕ sube a 34 px y no más: la fila mide 41, y una zona que se saliera de ella robaría el toque a la fila de al lado — que abre la ficha. Un borrado por accidente es peor que un botón pequeño. Es la misma cuenta de los tres puntos del radar 13F: el área no puede pisar a la vecina. */ @media (max-width: 760px) { /* 15-oct-2026 · El alto subió a 34 el 12-sep, pero el ancho seguía siendo el de la columna del cambio diario: la ✕ de borrar un valor medía 9 x 34 px (medido con sesión a 375 px, en las ocho filas). La columna es `auto`, así que crece con el botón; la fila sigue en 347 px (medido después). */ .watch-row button { min-height: 34px !important; min-width: 34px !important; } .chip-precio { min-height: 40px !important; font-size: 11px !important; } .enlace-bloque { min-height: 44px !important; padding: 12px 0 !important; } /* El resto del barrido, por grupos medidos: barra superior tema 30x30 · avisos 32x32 · avatar 32x32 Panel «Ver análisis completo» 208x33 · la fila de la pick 184x31 · «+» 24x24 · «PULSO DEL MERCADO» 233x31 pulso Acciones · Divisas · Cripto · Materias primas… 25 px Ninguno tiene clase propia, así que se acotan por su contenedor: la barra y el Panel. Subir un mínimo no mueve nada de lo que ya llega a 40. */ .top-right-cluster button, .settings-avatar { min-width: 40px !important; min-height: 40px !important; } .dashboard button { min-height: 40px; } /* La tira de secciones del Panel (Resumen · Cartera · Lista de seguimiento…) se quedaba en 40 px: es el menú por el que pasa cada pantalla del producto y el pulgar roza la de al lado. Hallazgo TACT-6 del estudio del móvil. */ .side .item { min-height: 44px !important; } /* 15-oct-2026 · En la ficha, las pestañas del gráfico (TV · GRÁFICO · RSI · MACD · FIBO · VOL · BACKTEST · IA) medían 27 px de alto y los plazos (15m · 1h · 1D · 1S · 1M) 20 px: son los mandos de la tarjeta principal. Medido con la regla puesta: la cabecera de la tarjeta sigue en 303 px de ancho, sin desbordar; solo crece en alto. */ .analysis .card-title .tabs button { min-height: 36px; } .analysis .card-title .actions > span { min-height: 32px; display: inline-flex; align-items: center; } } /* ── EL PRECIO DE COMPRA ESTABA DOS PANTALLAS MÁS ABAJO (12-sep-2026) ─────── La Acción de la Semana es una rejilla de DOS hijos: a la izquierda la identidad y el relato, a la derecha el PLAN OPERATIVO. En escritorio van en paralelo; en el móvil la rejilla colapsa a una columna y el plan cae al final. Medido a 391 px: hijo 1 (identidad + razones + estudio + 3 botones) 672 px hijo 2 (PLAN OPERATIVO: precio, mejor compra, stop, objetivo, R/R y tamaño) empieza 684 px abajo O sea: el cliente abre el Panel para ver qué comprar y lo primero que recibe son cinco razones, el estudio y tres botones; el precio al que hay que comprar —lo que paga por ver— llega dos pantallas después. Con `display: contents` el hijo 1 deja de ser una caja y sus partes pasan a ser celdas de la rejilla, así que se pueden ordenar: símbolo y nombre arriba, el plan justo detrás, y las razones, el estudio y los botones después. El orden de escritorio no se toca. `grid-template-columns: minmax(0,1fr)` es obligatorio: al perder la caja se pierde su `min-width: 0`, y una pista «1fr» con contenido largo dentro empujaría el ancho del panel. Lo avisó el escéptico del estudio. */ @media (max-width: 900px) { .weekly-pick-grid { grid-template-columns: minmax(0, 1fr) !important; } .weekly-pick-grid > div:first-child { display: contents; } .weekly-pick-grid > div:last-child { order: 2; } .weekly-pick-grid > div:first-child > :nth-child(n+3) { order: 3; } } /* ── EL CAMPO DONDE ALGUIEN DEJA SU CORREO MEDÍA 24 px (12-sep-2026) ──────── Medido en la portada a 391 px: footer rejilla de 2 columnas de 160,67 px .waitlist 161 px, sin envolver → input 24 px + botón 107 Veinticuatro píxeles para escribir un correo, en el único sitio de la portada donde un visitante deja algo suyo. La causa es una regla de este fichero (línea 56) escrita justo para esto: `div:has(> .col)` apila las columnas en el móvil… y el pie no es un div, es un