/* ══════════════════════════════════════════════════════════════════════════ GENERADO POR tools/juntar-css.py — NO SE EDITA A MANO. Son las 38 hojas de `/css/` que enlazaba `index.html`, en el MISMO orden, sin quitar ni cambiar un byte. En CSS el orden es el significado. Se edita el archivo suelto que toque y se vuelve a generar; `sellar.py` lo hace solo. `tools/juntar-css.py --revisar` se pone rojo si esto no corresponde a los sueltos. Por que existe: 38 hojas en el `` son 38 idas y vueltas antes de que el navegador pinte un solo pixel. En una parada de camiones con dos rayas de senal, eso son cinco segundos de pantalla en blanco. ══════════════════════════════════════════════════════════════════════════ */ /* ───── css/fonts.css ───── */ /*PORQUE App styles PORQUE*/ /* ========================================================================== IRON ROUTE — LAS FUENTES DE LA MARCA, SERVIDAS DE VERDAD `ecosystem-core` dice: Syne para títulos, DM Sans para texto, JetBrains Mono para datos. Este archivo es el que lo cumple. LO QUE SE MIDIÓ Y POR QUÉ SE REHIZO. La versión anterior declaraba cinco `@font-face` con los nombres de archivo que sirve Google Fonts: fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2 fonts/8vIH7w4qzmVxm2BL9A.woff2 … Esos cinco archivos SÍ estaban en el servidor. Lo que no estaba era la carpeta `css/fonts/` en el repositorio local, así que **todas las medidas de tipografía de esta auditoría se tomaron con la fuente de respaldo del sistema, no con la de la marca**. Un ancho de texto medido en otra fuente es un ancho medido en otro producto. Se rehace por dos motivos, y ninguno es estético: 1. NOMBRES QUE SE PUEDEN LEER. `rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4` no dice qué fuente es, qué peso tiene ni qué alfabeto cubre. Cuando uno de esos cinco archivos falte —y ya faltó— nadie puede saber cuál era mirando el nombre. Ahora son `dm-sans-latin-400-normal.woff2` y `syne-latin-700-normal.woff2`. 2. PROCEDENCIA COMPROBABLE. Vienen de `@fontsource/dm-sans` y `@fontsource/syne` —los paquetes oficiales, con su licencia SIL OFL dentro— y no de una descarga suelta que nadie sabe reproducir. Se pueden volver a generar con dos `npm install`. PESOS: los que se usan de verdad, contados en las hojas. DM Sans 400/500/700 y Syne 500/700/800. Ni uno más: cada peso son ~21 KB entre latin y latin-ext, y en un teléfono con dos rayas de cobertura eso se nota. `font-display: swap` en todas: el conductor lee la calle con la fuente del sistema mientras llega la de la marca. Esperar a la fuente bonita para pintar el nombre de una salida es exactamente al revés de lo que necesita quien va conduciendo. LICENCIA: SIL Open Font License 1.1 — DM Sans (Colophon Foundry, Jonny Pinhorn) y Syne (Bonjour Monde, Lucas Descroix). Permite alojarlas. ========================================================================== */ /* ── DM Sans — el texto ─────────────────────────────────────────────────── */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-sans-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-sans-latin-ext-400-normal.woff2') format('woff2'); /* latin-ext trae la ñ, los acentos y las comillas angulares del español. Sin este rango, «Camión» sale con la ó de otra fuente. */ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-sans-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-sans-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/dm-sans-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/dm-sans-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Syne — los títulos ─────────────────────────────────────────────────── */ @font-face { font-family: 'Syne'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/syne-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Syne'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/syne-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Syne'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/syne-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Syne'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/syne-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Syne'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/syne-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Syne'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/syne-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ══════════════════════════════════════════════════════════════════════════ GURMUKHI Y CIRÍLICO NO ESTÁN AQUÍ: están en `css/escrituras.css`. Se sacaron el 21-sep-2026 porque también los necesita la landing, y un archivo de fuentes de la app no lo enlaza la landing. Un texto —o una fuente— que vive en dos sitios acaba siendo dos cosas distintas. Quien sirva punyabí o ruso enlaza LOS DOS archivos. ══════════════════════════════════════════════════════════════════════════ */ /* ───── css/escrituras.css ───── */ /*PORQUE Gurmukhi y cirilico viven aparte porque la landing tambien los usa. Sin este enlace, punyabi y ruso salen en cuadros vacios, que es peor que salir en ingles. PORQUE*/ /* ========================================================================== LAS ESCRITURAS QUE NO SON LATINAS — GURMUKHI Y CIRÍLICO Vive aparte porque lo necesitan DOS superficies: la app web (/app) y la landing. Estaba solo dentro de `css/fonts.css`, que es de la app, así que la landing en punyabí o en ruso habría salido en cuadros vacíos — que es peor que salir en inglés. Las rutas son absolutas (`/css/fonts/…`) a propósito: este archivo lo enlazan páginas que viven en rutas distintas, y una ruta relativa se resolvería contra cada una. Lo demás —el porqué de Noto, el `unicode-range` y la licencia— está aquí abajo tal cual venía. ========================================================================== */ /* ══════════════════════════════════════════════════════════════════════════ GURMUJI Y CIRÍLICO — Y POR QUÉ NO LOS PAGA NADIE QUE NO LOS USE Pedido del dueño, 20-sep-2026: «si recomiendas algo más que inglés y español se agrega, pero que se agregue bien». Con la letra de la casa, «bien» tiene un problema concreto y medido: · DM Sans NO TRAE CIRÍLICO. Comprobado en el paquete oficial (`@fontsource/dm-sans` 5.3.0): solo `latin` y `latin-ext`. Con la app en ruso, cada palabra caería en la fuente que el sistema tenga a mano —otra forma, otro grosor, otra altura de x— y el producto dejaría de parecer el mismo. · Y ninguna de las dos trae GURMUJI, que es la escritura del punyabí. Sin esto, «ਪੰਜਾਬੀ» sale en cuadros vacíos, que es peor que el inglés. Se añade Noto Sans en sus dos subconjuntos. Noto existe exactamente para esto —cubrir escrituras sin dejar el hueco— y su Sans casa en proporción con DM Sans mejor que cualquier respaldo del sistema. LO IMPORTANTE ES EL `unicode-range`: el navegador SOLO baja estos archivos cuando en la página hay caracteres de ese rango. Un conductor en español o en inglés no transfiere ni un byte de los 56 KB que suman los seis. Es la misma regla por la que `latin-ext` va aparte del `latin`. LICENCIA: SIL Open Font License 1.1 — Noto Sans (Google). Permite alojarla. ══════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/css/fonts/noto-sans-gurmukhi-gurmukhi-400-normal.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0A01-0A76, U+200C-200D, U+20B9, U+25CC, U+262C, U+A830-A839; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/css/fonts/noto-sans-gurmukhi-gurmukhi-500-normal.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0A01-0A76, U+200C-200D, U+20B9, U+25CC, U+262C, U+A830-A839; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/css/fonts/noto-sans-gurmukhi-gurmukhi-700-normal.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0A01-0A76, U+200C-200D, U+20B9, U+25CC, U+262C, U+A830-A839; } @font-face { font-family: 'Syne'; font-style: normal; font-weight: 500; font-display: swap; src: url('/css/fonts/noto-sans-gurmukhi-gurmukhi-500-normal.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0A01-0A76, U+200C-200D, U+20B9, U+25CC, U+262C, U+A830-A839; } @font-face { font-family: 'Syne'; font-style: normal; font-weight: 700; font-display: swap; src: url('/css/fonts/noto-sans-gurmukhi-gurmukhi-700-normal.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0A01-0A76, U+200C-200D, U+20B9, U+25CC, U+262C, U+A830-A839; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/css/fonts/noto-sans-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/css/fonts/noto-sans-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/css/fonts/noto-sans-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Syne'; font-style: normal; font-weight: 500; font-display: swap; src: url('/css/fonts/noto-sans-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Syne'; font-style: normal; font-weight: 700; font-display: swap; src: url('/css/fonts/noto-sans-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* Syne 800 (los títulos) no tiene archivo propio en estas escrituras: se apunta al de 700 y el navegador engorda lo que falta. Un título algo menos grueso es mejor que un título en otra tipografía. */ @font-face { font-family: 'Syne'; font-style: normal; font-weight: 800; font-display: swap; src: url('/css/fonts/noto-sans-gurmukhi-gurmukhi-700-normal.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0A01-0A76, U+200C-200D, U+20B9, U+25CC, U+262C, U+A830-A839; } @font-face { font-family: 'Syne'; font-style: normal; font-weight: 800; font-display: swap; src: url('/css/fonts/noto-sans-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* ───── css/tokens.css ───── */ /* ============================================================ * tokens.css — Iron Route GPS v2.5 · Brand TruckerProfit * Single source of truth: palette + typography + spacing + motion * Owner: Cowork v25 build | 2026-05-02 * ============================================================ */ :root { /* EL MULTIPLICADOR DEL TAMAÑO DE LA LETRA. 1 de fábrica: con este valor la pantalla queda EXACTAMENTE como estaba. Lo cambia el guion previo a la pintura de `index.html` y, en caliente, `js/tamano-de-letra.js`. Está aquí y no solo en `style` de la raíz para que cualquier hoja pueda contar con que existe. */ --ir-letra: 1; /* === BRAND PALETTE === */ --color-navy-900: #030D1C; /* Primary canvas, headlines */ --color-navy-800: #0A1428; --color-navy-700: #1A2440; --color-navy-600: #2A3552; --color-gold-500: #D4A84B; /* Brand accent */ --color-gold-400: #E0B86A; --color-gold-600: #B89438; --color-gold-700: #8C6F1F; /* === SEMANTIC === */ --color-bg: var(--color-navy-900); --color-bg-elev: #0A1024; --color-bg-card: #0F1730; --color-surface: #131C36; --color-text: #E8ECF5; --color-text-muted: #9DA8C2; --color-text-on-gold: var(--color-navy-900); --color-border: rgba(212,168,75,0.18); --color-border-strong: rgba(212,168,75,0.4); --color-accent: var(--color-gold-500); --color-accent-hover: var(--color-gold-400); --color-accent-active: var(--color-gold-600); /* === STATUS === */ --color-success: #2EAB6F; --color-warning: #E8B14A; --color-danger: #D9534F; --color-info: #4A9FE8; /* === TYPOGRAPHY === */ --font-display: 'Syne', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-h1: calc((clamp(2rem, 4vw, 2.75rem)) * var(--ir-letra, 1)); --fs-h2: calc((clamp(1.5rem, 3vw, 2rem)) * var(--ir-letra, 1)); --fs-h3: calc((1.25rem) * var(--ir-letra, 1)); --fs-body: calc((1rem) * var(--ir-letra, 1)); --fs-small: calc((0.875rem) * var(--ir-letra, 1)); --fs-tiny: calc((0.75rem) * var(--ir-letra, 1)); --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-display: 700; /* Syne uses bold weights */ --lh-tight: 1.15; --lh-normal: 1.5; --lh-loose: 1.7; /* === SPACING === */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* === RADII === */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 20px; --r-pill: 999px; /* === SHADOWS === */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.25); --shadow-md: 0 4px 12px rgba(0,0,0,0.35); --shadow-lg: 0 12px 32px rgba(0,0,0,0.45); --shadow-gold: 0 0 0 1px rgba(212,168,75,0.5), 0 4px 12px rgba(212,168,75,0.18); /* === MOTION === */ --ease-standard: cubic-bezier(.4,0,.2,1); --ease-emphasized: cubic-bezier(.2,.8,.2,1); --dur-fast: 120ms; --dur-normal: 240ms; --dur-slow: 420ms; /* === LAYOUT === */ --header-h: 56px; --sidebar-w: 380px; --sidebar-w-mobile: 100vw; --touch-min: 48px; --touch-driver: 64px; /* Driver-mode tap targets, mejor que iOS HIG min */ } /* === DARK FALLBACK (default since Iron Route is dark by default) === */ @media (prefers-color-scheme: light) { :root { /* Iron Route mantiene UX dark para reducir glare en cabin nocturno */ /* No light theme; keep dark */ } } /* === BASE TYPOGRAPHY === */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: var(--fw-display); line-height: var(--lh-tight); color: var(--color-text); letter-spacing: -0.02em; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } /* === BUTTONS BASE === */ .btn-primary { background: var(--color-gold-500); color: var(--color-text-on-gold); font-family: var(--font-body); font-weight: var(--fw-bold); border: none; border-radius: var(--r-md); padding: var(--sp-3) var(--sp-5); min-height: var(--touch-min); cursor: pointer; transition: background var(--dur-normal) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .btn-primary:hover { background: var(--color-gold-400); } .btn-primary:active { background: var(--color-gold-600); transform: translateY(1px); } .btn-primary:focus-visible { outline: 2px solid var(--color-gold-400); outline-offset: 3px; } /* === FOCUS RING (a11y) === */ :where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--color-gold-400); outline-offset: 2px; } /* === REDUCE MOTION === */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* === DRIVER MODE (HUD) === */ [data-mode="hud"] { --fs-body: calc((1.25rem) * var(--ir-letra, 1)); --fs-small: calc((1rem) * var(--ir-letra, 1)); --touch-min: var(--touch-driver); } [data-mode="hud"] h1 { font-size: calc(3rem * var(--ir-letra, 1)); } [data-mode="hud"] body { letter-spacing: 0.02em; } /* ══════════════════════════════════════════════════════════════════════════ LOS TOKENS DE LA FUNDACIÓN — que NO estaban definidos `ecosystem-core` fija una fundación compartida por los seis productos: `--ink`, `--surface`, `--surface-2`, `--line`, `--text`, `--text-muted`, `--gold`, `--success`, `--warning`, `--error`, más el acento por producto. Medido en el navegador: `getComputedStyle(document.documentElement)` devuelve **cadena vacía** para `--ink`, `--surface`, `--line` y `--error`. Este archivo define un vocabulario propio (`--color-bg`, `--color-surface`, `--color-border` …) y nunca definió el compartido. Por qué no se notaba: casi todo el CSS nuevo escribe `var(--line, #1E3A5F)`, con la reserva puesta. O sea que funciona **por la reserva**, no por el token. Y ahí está el problema: el día que se cambie el color de línea del sistema, se cambiará en un sitio y no lo verá nadie, porque nadie está leyendo el token — están leyendo cincuenta copias del valor escritas a mano. Aquí se definen, MAPEADOS a los valores que este archivo ya tenía. No se inventa una paleta nueva ni se cambia un píxel: se le pone el nombre canónico a lo que ya había, para que a partir de ahora haya UNA fuente de verdad. `--accent` es el único que se corrige de valor: estaba en el dorado compartido `#D4A84B` y el acento de Iron Route es el naranja `#F58220` — así lo dice `ecosystem-core` y así lo escriben como reserva todas las hojas nuevas. El dorado sigue disponible como `--gold`, que es su nombre. ══════════════════════════════════════════════════════════════════════════ */ :root { --ink: var(--color-bg); --surface: var(--color-surface); --surface-2: var(--color-bg-elev); --line: var(--color-border); --text: var(--color-text); --text-muted: var(--color-text-muted); --gold: var(--color-gold-500); --gold-light: var(--color-gold-400); --success: var(--color-success); --warning: var(--color-warning); --error: var(--color-danger); /* ── EL ACENTO DE IRON ROUTE ──────────────────────────────────────── Aquí decía «Naranja, no dorado. --accent: #F58220» — y era mentira desde hacía meses: `css/styles.css` carga después y lo ponía en dorado, así que ninguna pantalla ha sido naranja nunca. Un token que declara una cosa y sirve otra es peor que no declararlo: el siguiente que lo lea escribirá código naranja que saldrá dorado. El acento del producto es DORADO. La decisión y sus números están en `css/styles.css`; aquí solo tiene que decir la verdad. */ --accent: var(--color-gold-500); --touch: 48px; --font-min: 12px; --nav-font: 20px; } /* ───── css/styles.css ───── */ /** * Iron Route GPS — Styles (Re-skinned to TruckerProfit brand) * Mobile-first, dark theme default * TruckerProfit Inc. * * NOTE: Layout, grid, flexbox, padding and margin are unchanged. * Only color + typography tokens were re-mapped to align with brand. * Source of truth for tokens: ./tokens.css */ /* ========== CSS CUSTOM PROPERTIES (RE-MAPPED TO BRAND TOKENS) ========== */ /* ══════════════════════════════════════════════════════════════════════════ NOMBRES CORTOS QUE SE USABAN SIN EXISTIR — 119 usos, 17 tokens fantasma EL FALLO QUE LOS DESTAPÓ. El dueño: «esa superposición de los textos cuando uno está escribiendo la dirección y todo eso debe arreglarse». El desplegable de direcciones se pintaba TRANSPARENTE y «Añadir parada» se leía a través de él. Una línea: .ir-dir-ac-dropdown { background: var(--panel); } `--panel` no estaba definido en ninguna parte. Y ese es el detalle que hace esto tan peligroso: en CSS, una `var()` sin valor y sin respaldo NO es un error visible. La propiedad queda «inválida en tiempo de cómputo», que para `background` significa transparente, para `color` significa heredar, y para `box-shadow` significa nada. Sin aviso en consola. Sin nada roto que se vea al leer el código. Solo una pantalla que sale mal. Al medirlo aparecieron 17 tokens así, usados 119 veces, repartidos por `alerts.js`, `filters.js`, `settings.js`, `directions.js` y `navigation.js`: `--t1 --t2 --t3` (jerarquía de texto), `--bg2 --bg3 --card --panel --surface2` (superficies), `--muted --dim` (texto secundario), `--teal --red --green --amber` (semánticos), `--border2 --glass2 --shadow2`. Vienen de una época anterior a que existiera el sistema de tokens de la casa. Cada archivo se inventó su vocabulario y nadie lo cruzó nunca con lo que de verdad estaba declarado. LA DECISIÓN: no se renombran 119 sitios a mano —eso son 119 ocasiones de equivocarse y ni un aprendizaje—. Se declaran AQUÍ, UNA VEZ, apuntando a los tokens canónicos. Los nombres cortos pasan a ser alias del sistema, no un sistema paralelo. Así, cambiar el tema cambia también todo lo que usaba el vocabulario viejo, que es justo lo que antes no pasaba. Y para que no vuelva a entrar ninguno: `tests/tinta-sobre-papel.mjs` recorre todo el CSS y falla si un `var(--x)` apunta a algo que no existe y no lleva respaldo. ══════════════════════════════════════════════════════════════════════════ */ :root { /* Brand colors — now navy + gold (was navy + teal/orange) */ --navy: var(--color-navy-900); --navy-light: var(--color-navy-800); --navy-mid: var(--color-navy-700); --navy-surface: var(--color-surface); /* ══════════════════════════════════════════════════════════════════════ EL ACENTO CAMBIABA DE FAMILIA AL CAMBIAR DE TEMA Medido, leyendo el token calculado en el navegador: tema oscuro --accent: #D4A84B dorado tema claro --accent: #A15200 naranja oscuro No son dos tonos del mismo color: son dos colores distintos. La app cambiaba de acento al cambiar de tema, y nadie lo había cruzado porque cada hoja se miró por separado. El origen es una contradicción entre dos archivos nuestros: · `css/tokens.css` dice, con estas palabras: «El acento de Iron Route. Naranja, no dorado. --accent: #F58220». · Este archivo, que carga DESPUÉS, ponía `--accent: var(--color-gold-500)` con el comentario «now navy + gold (was navy + teal/orange)». Ganaba el dorado, pero no por decisión: por orden de la cascada. Y `css/tema-claro.css`, escrito por otro camino, oscureció el NARANJA para que se leyera sobre blanco — de ahí el #A15200. LA DECISIÓN, Y SU PORQUÉ. Se queda el DORADO, en los dos temas: 1. Es lo que está desplegado y lo que el dueño lleva meses viendo y aprobando en capturas. La marca de la app, el «+ Viaje», el logo: todo es dorado hoy. 2. `ecosystem-core` fija `#F58220` como acento de Iron Route, pero el mismo documento admite «un acento de producto intencionado y documentado». Este lo está, y lleva 71 usos escritos a mano en 18 hojas. Cambiarlo es un reskin, no un arreglo. 3. Y el dorado gana en contraste donde importa: 8,81:1 sobre el fondo oscuro frente a 7,51:1 del naranja. Queda una cosa por hacer que NO es de este archivo: `ecosystem-core` y `css/tokens.css` dicen naranja y hay que corregirlos, o el siguiente que los lea volverá a pintar en naranja. Va anotado en el informe. LOS TRES PAPELES DEL ACENTO, que antes eran uno solo y por eso se pisaban. Contrastes medidos: --accent #D4A84B TEXTO en oscuro 8,81:1 sobre #030D1C --accent-fill #D4A84B RELLENO --accent-ink #030D1C la tinta ENCIMA del relleno 8,81:1 En tema claro el mismo dorado sobre blanco da 2,21:1 y no se puede leer, así que allí `--accent` baja a `#7A5E10` (6,11:1) y el relleno se queda en el dorado de marca. Ver `css/tema-claro.css`. ══════════════════════════════════════════════════════════════════════ */ --accent: var(--color-gold-500); --accent-fill: var(--color-gold-500); /* RELLENO: el dorado de marca */ --accent-ink: #030D1C; /* la tinta que va ENCIMA — 8,81:1 */ --accent-hover: var(--color-gold-400); --accent-dim: rgba(212, 168, 75, 0.15); --gold: var(--color-gold-500); --gold-dim: rgba(212, 168, 75, 0.15); --danger: var(--color-danger); --danger-dim: rgba(217, 83, 79, 0.15); --warning: var(--color-warning); --success: var(--color-success); --info: var(--color-info); /* Theme (dark default) */ --bg: var(--color-bg); --bg-surface: var(--color-bg-elev); --bg-elevated: var(--color-bg-card); --bg-card: var(--color-surface); --text: var(--color-text); --text-secondary: var(--color-text-muted); --text-muted: var(--color-text-muted); --border: var(--color-border); --border-strong: var(--color-border-strong); --shadow: rgba(0, 0, 0, 0.4); --glass: rgba(3, 13, 28, 0.85); --glass-border: rgba(212, 168, 75, 0.10); /* Sizing */ --touch: var(--touch-min, 48px); --radius: var(--r-lg, 12px); --radius-sm: var(--r-md, 8px); --radius-lg: var(--r-xl, 20px); --nav-height: 64px; --search-height: 56px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* Typography — point at canonical brand stacks */ --font: var(--font-body); --font-heading: var(--font-display); --font-mono: var(--font-mono); /* LA SEGUNDA FAMILIA DE TAMAÑOS. `tokens.css` tiene `--fs-*` y esta hoja tiene `--font-size-*`: dos escalas tipográficas vivas a la vez, y las dos se usan. No se unifican hoy —eso toca sesenta reglas y no es lo que se está arreglando—, pero las DOS llevan el multiplicador, porque si solo lo lleva una, el ajuste de tamaño de letra agranda media pantalla y deja la otra media igual, que es peor que no agrandar nada. `--font-size-xs` son 11 px y es el único por debajo del suelo de la casa: lo corrige `css/suelo-tipografico.css`, que sube a 12 los sitios donde se usaba. */ --font-size-xs: calc((11px) * var(--ir-letra, 1)); --font-size-sm: calc((13px) * var(--ir-letra, 1)); --font-size-base: calc((15px) * var(--ir-letra, 1)); --font-size-lg: calc((17px) * var(--ir-letra, 1)); --font-size-xl: calc((20px) * var(--ir-letra, 1)); --font-size-2xl: calc((24px) * var(--ir-letra, 1)); --font-size-3xl: calc((30px) * var(--ir-letra, 1)); /* Transitions */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration: 0.25s; --duration-slow: 0.4s; /* ── Alias del vocabulario antiguo (ver el bloque de arriba) ── */ --t1: var(--text); /* texto principal */ --t2: var(--text-secondary); /* texto de apoyo */ --t3: var(--text-muted); /* texto terciario */ --muted: var(--text-muted); --dim: var(--text-muted); --bg2: var(--bg-surface); --bg3: var(--bg-elevated); --card: var(--bg-card); --panel: var(--bg-elevated); /* papel de menús flotantes */ --surface2: var(--bg-elevated); --border2: var(--border-strong); --glass2: var(--glass); /* `--shadow` es un COLOR, no una sombra: `box-shadow: var(--shadow)` era inválido y no pintaba nada. `--shadow2` sí es una sombra completa. */ --shadow2: 0 8px 24px var(--shadow); --teal: var(--accent); /* la marca es oro; el teal quedó de antes */ --red: var(--danger); --green: var(--success); --amber: var(--warning); } /* ========== LIGHT THEME (kept for opt-in, but Iron Route ships dark-only) ========== */ [data-theme="light"] { --bg: #f5f7fa; --bg-surface: #ffffff; --bg-elevated: #f0f2f5; --bg-card: #ffffff; --text: #1a1a2e; --text-secondary: #555770; --text-muted: #8e8ea0; --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.15); --shadow: rgba(0, 0, 0, 0.1); --glass: rgba(245, 247, 250, 0.9); --glass-border: rgba(0, 0, 0, 0.06); } /* ========== RESET ========== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { height: 100%; overflow: hidden; -webkit-text-size-adjust: 100%; } body { height: 100%; overflow: hidden; font-family: var(--font); font-size: var(--font-size-base); color: var(--text); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; touch-action: manipulation; } button { font-family: inherit; font-size: inherit; border: none; background: none; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; } input, select, textarea { font-family: inherit; font-size: var(--font-size-base); color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; min-height: var(--touch); outline: none; width: 100%; transition: border-color var(--duration) var(--ease); } input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } input::placeholder { color: var(--text-muted); } ul, ol { list-style: none; } a { color: var(--accent); text-decoration: none; } img { max-width: 100%; display: block; } /* ========== SKIP LINK ========== */ .skip-link { position: absolute; top: -100px; left: 16px; z-index: 10000; background: var(--accent); color: var(--navy); padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--font-size-sm); transition: top 0.2s; } .skip-link:focus { top: calc(var(--safe-top) + 8px); } /* ========== STATUS BAR SPACER ========== */ .status-bar-spacer { height: var(--safe-top); background: var(--glass); position: fixed; top: 0; left: 0; right: 0; z-index: 1001; } /* ========== SEARCH HEADER ========== */ .search-header { position: fixed; top: var(--safe-top); left: 0; right: 0; z-index: 1000; padding: 8px 12px; pointer-events: none; } .search-container { display: flex; align-items: center; gap: 4px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 28px; padding: 4px 8px; box-shadow: 0 4px 20px var(--shadow); pointer-events: auto; height: var(--search-height); } .search-menu-btn, .search-voice-btn { flex-shrink: 0; /* 48, no 44 — 21-sep-2026. El piso de la casa son 48 px y estos dos son el menu y el microfono de la barra de buscar: el microfono es el que se toca con una mano al volante, que es cuando peor se acierta. Otra regla los subia a 48 en el telefono, asi que el 44 solo se veia en tableta — donde tambien se toca con el dedo. */ width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-secondary); transition: background var(--duration) var(--ease), color var(--duration) var(--ease); } .search-menu-btn:hover, .search-voice-btn:hover { background: var(--accent-dim); color: var(--accent); } .search-input { flex: 1; background: none; border: none; padding: 8px 4px; font-size: var(--font-size-base); min-height: 48px; /* a11y: ≥48px touch target — auto-fixer 2026-05-05 */ color: var(--text); } .search-input:focus { box-shadow: none; border: none; } /* Search Results Dropdown */ .search-results { position: absolute; top: calc(var(--search-height) + 8px); left: 12px; right: 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 32px var(--shadow); max-height: 50vh; overflow-y: auto; pointer-events: auto; overscroll-behavior: contain; } .search-results[hidden] { display: none; } .search-result-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; transition: background var(--duration) var(--ease); border-bottom: 1px solid var(--border); min-height: var(--touch); } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover, .search-result-item:focus { background: var(--accent-dim); } .search-result-item:active { background: var(--accent-dim); transform: scale(0.98); } .result-icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--accent-dim); border-radius: 50%; color: var(--accent); } .result-text { flex: 1; min-width: 0; } .result-title { font-size: var(--font-size-base); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .result-subtitle { font-size: var(--font-size-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========== MAP ========== */ .map-wrapper { position: fixed; inset: 0; z-index: 1; } .map-container { width: 100%; height: 100%; } /* ══════════════════════════════════════════════════════════════════════════ EL FILTRO NOCTURNO, SOLO SOBRE MAPAS DE LÍNEAS REPORTADO POR EL DUEÑO: «la versión satélite se ve como blanco y negro». Esta regla convierte un mapa de calles claro en uno nocturno con un truco conocido: invertir y desaturar. Sobre líneas y polígonos funciona muy bien. Sobre una FOTOGRAFÍA AÉREA es un desastre — `invert(1)` la vuelve un negativo y `saturate(0.4)` le quita el 60 % del color, así que el patio de una planta, un techo o un campo acaban en gris sucio. Exactamente «blanco y negro». Y el relieve tiene el mismo problema: el sombreado de las pendientes ES la información, y un negativo lo invierte — las montañas parecen valles. Así que el filtro se aplica solo cuando la base es de líneas. `map-layers.js` escribe `data-base` en el contenedor al cambiar de capa, y de ahí sale la condición. Sin ese atributo (mapa recién creado, base por defecto) se aplica igual, porque la base por defecto es «calle». ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.7) contrast(1.1) saturate(0.4) hue-rotate(180deg) invert(1); } /* Foto aérea y relieve: se dejan como son. */ [data-theme="dark"][data-base="satelite"] .leaflet-tile-pane, [data-theme="dark"][data-base="topo"] .leaflet-tile-pane, [data-theme="dark"] [data-base="satelite"] .leaflet-tile-pane, [data-theme="dark"] [data-base="topo"] .leaflet-tile-pane { filter: none; } [data-theme="dark"] .leaflet-control-zoom a { background: var(--bg-surface); color: var(--text); border-color: var(--border); } /* Hide default Leaflet controls — we use custom */ .leaflet-control-zoom { display: none !important; } .leaflet-control-attribution { background: var(--glass) !important; color: var(--text-muted) !important; font-size: calc(10px * var(--ir-letra, 1)) !important; padding: 2px 6px !important; border-radius: 4px 0 0 0 !important; } .leaflet-control-attribution a { color: var(--text-muted) !important; } /* ========== MAP CONTROLS (right side) ========== */ .map-controls { position: fixed; right: 12px; bottom: calc(var(--nav-height) + var(--safe-bottom) + 180px); display: flex; flex-direction: column; gap: 8px; z-index: 900; } .map-ctrl-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 50%; color: var(--text); box-shadow: 0 2px 12px var(--shadow); transition: all var(--duration) var(--ease); } .map-ctrl-btn:hover { background: var(--accent); color: var(--navy); } .map-ctrl-btn:active { transform: scale(0.92); } .map-ctrl-btn.active { background: var(--accent); color: var(--navy); } /* ========== FLOATING ACTION BUTTON ========== */ .fab { position: fixed; right: 16px; bottom: calc(var(--nav-height) + var(--safe-bottom) + 100px); width: auto; height: 52px; display: flex; align-items: center; gap: 6px; padding: 0 18px 0 14px; background: var(--accent); color: var(--navy); border-radius: 26px; font-weight: 700; font-size: var(--font-size-sm); box-shadow: 0 4px 20px rgba(212, 168, 75, 0.4); z-index: 950; transition: all var(--duration) var(--ease-spring); } .fab:hover { transform: scale(1.05); box-shadow: 0 6px 28px rgba(212, 168, 75, 0.5); } .fab:active { transform: scale(0.95); } .fab-label { letter-spacing: 0.5px; text-transform: uppercase; } /* ========== QUICK ACCESS TILES ========== */ .quick-tiles { position: fixed; bottom: calc(var(--nav-height) + var(--safe-bottom) + 8px); left: 0; right: 0; z-index: 800; padding: 0 12px; } .tiles-scroll { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 0; } .tiles-scroll::-webkit-scrollbar { display: none; } .tile { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 14px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius); min-width: 80px; scroll-snap-align: start; transition: all var(--duration) var(--ease); } .tile:hover { background: var(--accent-dim); border-color: var(--accent); } .tile:active { transform: scale(0.95); } .tile-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--accent-dim); border-radius: 50%; color: var(--accent); } .tile-label { font-size: var(--font-size-xs); font-weight: 600; color: var(--text-secondary); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; } /* ========== BOTTOM NAVIGATION ========== */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-height) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); display: flex; align-items: center; justify-content: space-around; background: var(--glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid var(--glass-border); z-index: 1000; } .nav-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; min-height: var(--touch); justify-content: center; color: var(--text-muted); transition: color var(--duration) var(--ease); position: relative; } .nav-tab span { font-size: var(--font-size-xs); font-weight: 500; letter-spacing: 0.3px; } .nav-tab.active { color: var(--accent); } .nav-tab.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: var(--accent); border-radius: 0 0 3px 3px; } .nav-badge { position: absolute; top: 4px; right: calc(50% - 18px); min-width: 18px; height: 18px; padding: 0 5px; background: var(--danger); color: #fff; font-size: calc(10px * var(--ir-letra, 1)); font-weight: 700; line-height: 18px; text-align: center; border-radius: 9px; } /* ========== BOTTOM SHEET (Panels) ========== */ .bottom-sheet { position: fixed; bottom: 0; left: 0; right: 0; max-height: 85vh; background: var(--bg-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -8px 40px var(--shadow); z-index: 1100; transform: translateY(100%); transition: transform var(--duration-slow) var(--ease); overflow: hidden; display: flex; flex-direction: column; } .bottom-sheet.open { transform: translateY(0); } .bottom-sheet[aria-hidden="true"] { pointer-events: none; } .bottom-sheet[aria-hidden="false"] { pointer-events: auto; } .sheet-handle { display: flex; justify-content: center; padding: 12px 0 4px; cursor: grab; flex-shrink: 0; } .handle-bar { width: 36px; height: 5px; background: var(--text-muted); border-radius: 3px; opacity: 0.4; } .sheet-content { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px calc(var(--nav-height) + var(--safe-bottom) + 16px); } .sheet-title { font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: 700; margin-bottom: 20px; color: var(--text); } /* ========== TRIP PLANNER ========== */ .trip-inputs { display: flex; flex-direction: column; gap: 4px; position: relative; margin-bottom: 16px; } .input-group { position: relative; } .input-label { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } .input-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .origin-dot { background: var(--accent); } .dest-dot { background: var(--danger); } .trip-input { padding-left: 32px; } .swap-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 50%; color: var(--text-secondary); z-index: 5; transition: all var(--duration) var(--ease); } .swap-btn:hover { background: var(--accent-dim); color: var(--accent); } /* Vehicle Config */ .vehicle-config { margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .vehicle-config summary { padding: 14px 16px; font-weight: 600; font-size: var(--font-size-sm); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: var(--touch); } .vehicle-config summary::-webkit-details-marker { display: none; } .vehicle-config summary::marker { content: ''; } .vehicle-config summary::before { content: '\25B6'; font-size: calc(10px * var(--ir-letra, 1)); transition: transform var(--duration) var(--ease); } .vehicle-config[open] summary::before { transform: rotate(90deg); } .config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 16px; } .config-item label { display: block; font-size: var(--font-size-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .config-item input, .config-item select { font-size: var(--font-size-sm); padding: 10px 12px; } /* Route Options (toggles) */ .route-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .toggle-option { display: flex; align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; font-size: var(--font-size-sm); color: var(--text-secondary); min-height: var(--touch); } .toggle-slider { position: relative; width: 44px; height: 24px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; flex-shrink: 0; transition: all var(--duration) var(--ease); } .toggle-slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--text-muted); border-radius: 50%; transition: all var(--duration) var(--ease); } .toggle-option input { display: none; } .toggle-option input:checked + .toggle-slider { background: var(--accent-dim); border-color: var(--accent); } .toggle-option input:checked + .toggle-slider::after { left: 22px; background: var(--accent); } /* Primary Button */ .btn-primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 24px; background: var(--accent); color: var(--navy); font-weight: 700; font-size: var(--font-size-base); border-radius: var(--radius); min-height: var(--touch); transition: all var(--duration) var(--ease); text-transform: uppercase; letter-spacing: 0.5px; } .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 16px rgba(212, 168, 75, 0.3); } .btn-primary:active { transform: scale(0.98); } .btn-primary:disabled { opacity: 0.5; pointer-events: none; } /* Route Results */ .route-results { margin-top: 20px; } .route-results[hidden] { display: none; } .route-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; transition: all var(--duration) var(--ease); } .route-card:hover, .route-card.selected { border-color: var(--accent); background: var(--accent-dim); } .route-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .route-card-title { font-size: var(--font-size-lg); font-weight: 700; } .route-card-badge { padding: 4px 10px; background: var(--accent-dim); color: var(--accent); font-size: var(--font-size-xs); font-weight: 700; border-radius: 20px; text-transform: uppercase; } .route-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .route-stat { text-align: center; } .route-stat-value { font-size: var(--font-size-lg); font-weight: 700; color: var(--text); } .route-stat-label { font-size: var(--font-size-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; } /* ========== ALERTS ========== */ .alerts-list { display: flex; flex-direction: column; gap: 8px; } .alert-card { display: flex; gap: 12px; padding: 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); align-items: flex-start; } .alert-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } .alert-icon.danger { background: var(--danger-dim); color: var(--danger); } .alert-icon.warning { background: var(--gold-dim); color: var(--gold); } .alert-icon.info { background: var(--accent-dim); color: var(--accent); } .alert-content { flex: 1; } .alert-title { font-weight: 600; font-size: var(--font-size-sm); margin-bottom: 2px; } .alert-desc { font-size: var(--font-size-sm); color: var(--text-muted); } /* ========== SETTINGS ========== */ .settings-section { margin-bottom: 24px; } .settings-heading { font-size: var(--font-size-sm); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; } .theme-picker { display: flex; gap: 8px; } .theme-option { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; background: var(--bg-elevated); border: 2px solid var(--border); border-radius: var(--radius); font-size: var(--font-size-sm); font-weight: 500; color: var(--text-secondary); min-height: var(--touch); transition: all var(--duration) var(--ease); } .theme-option:hover { border-color: var(--text-muted); } .theme-option.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } .lang-toggle { display: flex; gap: 0; background: var(--bg-elevated); border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; } .lang-option { flex: 1; padding: 12px 16px; font-size: var(--font-size-sm); font-weight: 600; text-align: center; color: var(--text-secondary); min-height: var(--touch); transition: all var(--duration) var(--ease); } .lang-option.active { background: var(--accent); color: var(--navy); } .profile-summary { padding: 14px; background: var(--bg-elevated); border-radius: var(--radius-sm); font-size: var(--font-size-sm); color: var(--text-muted); } .about-info { padding: 14px; background: var(--bg-elevated); border-radius: var(--radius-sm); } .app-version { font-size: var(--font-size-sm); font-weight: 600; color: var(--text); margin-bottom: 4px; } .app-company { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: 2px; } .app-tagline { font-size: var(--font-size-sm); color: var(--text-muted); font-style: italic; } /* ========== ROUTES LIST ========== */ .routes-list { display: flex; flex-direction: column; gap: 8px; } /* ========== EMPTY STATE ========== */ .empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 20px; text-align: center; } .empty-state p { font-size: var(--font-size-sm); color: var(--text-muted); max-width: 240px; line-height: 1.6; } /* ========== SIDE MENU ========== */ .menu-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1199; opacity: 0; visibility: hidden; transition: all var(--duration-slow) var(--ease); } .menu-overlay.open { opacity: 1; visibility: visible; } .side-menu { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 85vw; background: var(--bg-surface); z-index: 1200; transform: translateX(-100%); transition: transform var(--duration-slow) var(--ease); display: flex; flex-direction: column; padding-top: var(--safe-top); } .side-menu.open { transform: translateX(0); } .menu-header { padding: 24px 20px; border-bottom: 1px solid var(--border); } .menu-brand { display: flex; align-items: center; gap: 12px; } .menu-app-name { font-family: var(--font-heading); font-size: var(--font-size-lg); font-weight: 700; } .menu-tagline { font-size: var(--font-size-xs); color: var(--text-muted); } .menu-list { flex: 1; overflow-y: auto; padding: 8px 0; } .menu-item { display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 20px; font-size: var(--font-size-base); font-weight: 500; color: var(--text-secondary); min-height: var(--touch); transition: all var(--duration) var(--ease); } .menu-item:hover { background: var(--accent-dim); color: var(--accent); } .menu-divider { height: 1px; background: var(--border); margin: 8px 20px; } .menu-footer { padding: 16px 20px; border-top: 1px solid var(--border); } .menu-version { font-size: var(--font-size-xs); color: var(--text-muted); } /* ========== LOADING OVERLAY ========== */ .loading-overlay { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.6s var(--ease); } .loading-overlay.hidden { opacity: 0; pointer-events: none; } .loading-spinner { display: flex; flex-direction: column; align-items: center; gap: 20px; } .spinner-ring { width: 44px; height: 44px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-text { font-size: var(--font-size-sm); color: var(--text-muted); font-weight: 500; } /* ========== TOAST NOTIFICATIONS ========== */ .toast-container { position: fixed; top: calc(var(--safe-top) + var(--search-height) + 16px); left: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 32px var(--shadow); pointer-events: auto; animation: toastIn 0.3s var(--ease-spring); } .toast.removing { animation: toastOut 0.25s var(--ease) forwards; } @keyframes toastIn { from { opacity: 0; transform: translateY(-12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastOut { to { opacity: 0; transform: translateY(-8px) scale(0.96); } } .toast-icon { flex-shrink: 0; width: 24px; height: 24px; } .toast-message { flex: 1; font-size: var(--font-size-sm); font-weight: 500; } .toast.success { border-left: 3px solid var(--success); } .toast.error { border-left: 3px solid var(--danger); } .toast.warning { border-left: 3px solid var(--warning); } .toast.info { border-left: 3px solid var(--info); } /* ========== TRUCK RESTRICTION MARKERS ========== */ .truck-restriction-marker { background: var(--danger); color: #fff; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: calc(14px * var(--ir-letra, 1)); font-weight: 700; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* ========== ROUTE POLYLINE STYLING (via Leaflet classes) ========== */ .route-line { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .route-line-alt { stroke: var(--text-muted); stroke-width: 4; stroke-opacity: 0.5; stroke-dasharray: 8, 6; } /* ========== RESPONSIVE ========== */ /* Tablet+ */ @media (min-width: 768px) { .search-header { max-width: 480px; left: 50%; transform: translateX(-50%); } .search-results { max-width: 480px; left: 50%; right: auto; transform: translateX(-50%); width: calc(100vw - 24px); } .bottom-sheet { max-width: 420px; left: 50%; transform: translate(-50%, calc(100% + 14px)); border-radius: var(--radius-lg); bottom: 8px; box-shadow: 0 -4px 40px var(--shadow); } .bottom-sheet.open { transform: translate(-50%, 0); } .side-menu { width: 320px; } .quick-tiles { max-width: 480px; left: 50%; transform: translateX(-50%); } .fab { right: calc(50% - 260px); } .map-controls { right: calc(50% - 260px); } } /* Desktop */ @media (min-width: 1024px) { .bottom-nav { max-width: 480px; left: 50%; transform: translateX(-50%); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } } /* Landscape phone */ @media (max-height: 500px) and (orientation: landscape) { .quick-tiles { bottom: calc(var(--nav-height) + 4px); } .tile { padding: 8px 12px; min-width: 70px; } .tile-icon { width: 32px; height: 32px; } .fab { bottom: calc(var(--nav-height) + 60px); height: 44px; } .map-controls { bottom: calc(var(--nav-height) + 120px); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Dark mode system preference (auto theme) */ @media (prefers-color-scheme: light) { [data-theme="auto"] { --bg: #f5f7fa; --bg-surface: #ffffff; --bg-elevated: #f0f2f5; --bg-card: #ffffff; --text: #1a1a2e; --text-secondary: #555770; --text-muted: #8e8ea0; --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.15); --shadow: rgba(0, 0, 0, 0.1); --glass: rgba(245, 247, 250, 0.9); --glass-border: rgba(0, 0, 0, 0.06); } [data-theme="auto"] .leaflet-tile-pane { filter: none; } } /* === BRAND OVERRIDES === */ /* Headline / display surfaces — enforce Syne everywhere a heading lives, in case markup uses semantic h1..h4 directly without our utility classes. */ h1, h2, h3, h4, .sheet-title, .menu-app-name, .route-card-title, .app-version { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.01em; } /* Gold focus ring (a11y) — overrides UA default and matches tokens.css */ :where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--color-gold-400); outline-offset: 2px; } /* Selection */ ::selection { background: var(--color-gold-500); color: var(--color-text-on-gold); } /* Scrollbar (WebKit) — subtle gold-tinted to match brand */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-gold-600); } /* Re-skinned 2026-05-02 by Cowork sub-agent */ /* === v2.5 NEW MODULE STYLES (stubs from sub-agent ports) === */ .voice-interim { color: var(--color-text-muted); font-style: italic; } .limit-no-data { color: var(--color-text-muted); } .hud-hid /* ── ICONOS EN LÍNEA CON SU RÓTULO ───────────────────────────────────────── `IronIconos.marca()` devuelve el dibujo en cadena para los paneles que se pintan con `innerHTML`. Un `

` lleva `tabindex="-1"` y el onboarding le pone el foco al cambiar de paso, que es el patrón correcto: sin eso, un lector de pantalla no anuncia que la pantalla cambió y la persona se queda oyendo el paso anterior. El problema no es el foco: es que se PINTE. Un anillo puesto por código, sobre alguien que está usando el ratón, se lee como un recuadro decorativo mal hecho — es exactamente lo que el dueño señaló dos veces. La regla estándar para esto es distinguir el foco programático del foco por teclado. `:focus-visible` ya lo hace: el navegador solo lo activa cuando la persona llegó navegando. Así que se apaga el anillo en `:focus` cuando NO es `:focus-visible`, y con teclado se sigue viendo, que es cuando hace falta. PRIMER INTENTO, Y POR QUÉ NO BASTÓ: se apagó con `:focus:not(:focus-visible)` y el anillo siguió saliendo. Medido: el navegador considera `:focus-visible` un foco movido por código cuando no ha habido una interacción de puntero previa. O sea que la distinción no resuelve este caso. LO QUE SÍ LO RESUELVE, y además es lo correcto: `tabindex="-1"` significa, por definición, que al teclado no se llega ahí nunca. No hay ninguna situación en la que alguien navegando con Tab aterrice en este titular, así que no hay ningún caso de teclado que preservar. Se apaga y punto. Lo que NO se puede hacer es `outline: 0` a secas sobre cualquier elemento —que es lo que había antes en el bloque de arriba—: eso se lleva por delante el anillo de los botones y los enlaces, que sí se recorren con Tab y sí necesitan verse. Por eso la regla va atada a `[tabindex="-1"]`. ────────────────────────────────────────────────────────────────────────── / .ob-root [tabindex="-1"]:focus, .ob-card [tabindex="-1"]:focus, .ob-h1[tabindex="-1"]:focus, .ob-h1[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; } / ── 6 · Escritorio: UNA columna, centrada ────────────────────────────────── LO QUE HABÍA AQUÍ ESTABA MAL, Y SE VE EN LA CAPTURA DEL DUEÑO. Esta hoja convertía `.ob-card` en una rejilla de dos columnas —300 px de raíl a la izquierda y el resto para el contenido— con la idea de poner ahí el progreso. El raíl nunca se llenó. Era un `::before` con `content: ''`: un degradado y nada más. Cero texto, cero pasos, cero información. Medido a 1920×1080: · `.ob-card` → rejilla `300px 1620px` · `.ob-step` → 720 px de ancho colocado en x=322 · su centro → 682 px, cuando el centro de la pantalla es 960 O sea: una franja negra vacía de 300 px a la izquierda y el texto 278 px descentrado. Y la cabecera —con «Saltar» y la X— empezaba en x=300, así que tampoco llegaba al borde. Un elemento decorativo que empuja el contenido fuera del centro no es un adorno: es un defecto de composición. Y la regla es la de siempre — entre dos diseños equivalentes, el más simple. El raíl no aportaba nada que no aporte ya la barra de pasos que va dentro del propio contenido. ASÍ QUE SE QUITA. Una sola columna, centrada de verdad en la pantalla, con el ancho de línea acotado para que se pueda leer. ────────────────────────────────────────────────────────────────────────── / @media (min-width: 1024px) and (pointer: fine) { / Se deshace explícitamente la rejilla: si esta hoja se cargara junto a una versión vieja en caché, `display: flex` gana por orden y el raíl no vuelve. / .ob-card { display: flex; flex-direction: column; } .ob-card::before { content: none; display: none; } / El contenido, centrado en TODO el ancho de la pantalla. / .ob-step { padding: 40px 32px 56px; margin: 0 auto; max-width: 720px; } / La cabecera y el pie ocupan el ancho completo: la X y «Saltar» van a la esquina, que es donde se buscan. Su CONTENIDO se alinea con la columna del texto para que nada quede a la deriva en un monitor de 27". / .ob-header, .ob-footer { width: 100%; } / 45–75 caracteres por línea. A 16 px, 720 px dan unos 90 — demasiados: la vista pierde el renglón al volver a la izquierda. La prosa se acota a 620; las rejillas de tarjetas siguen usando el ancho entero. / .ob-step > p, .ob-sub, .ob-lead { max-width: 620px; margin-left: auto; margin-right: auto; } / Con ratón el objetivo puede bajar de 48 a 40, nunca menos — pero EL ANCHO NO DICE SI HAY RATÓN. Esta regla vivía en una media query de ancho, así que una tableta de 1024 px, que se toca con el dedo, recibía botones de 40. Medido el 21-sep-2026: «Get Started», «I have an account» y «See the map first» salían a 42 px en la primera pantalla que ve alguien nuevo. `pointer: fine` es la pregunta de verdad: ¿hay un puntero preciso? / @media (pointer: fine) { .ob-btn { min-height: 40px; } } } / ── 6b · QUE «COMENZAR» QUEPA SIN BAJAR ──────────────────────────────────── MEDIDO en la misma pantalla del dueño (1920×1080, ventana real 1014 px): el contenido del primer paso mide 1122 px. O sea que el botón principal —«Comenzar», que es la única acción de esta pantalla— cae por debajo del borde, y con él el aviso de USDOT/MC. Un botón primario que hay que buscar desplazando no es un detalle de estilo. Es la acción que la pantalla existe para provocar, y quien no la ve asume que la página no ha cargado del todo. De dónde salían esos 1122 px, medido hijo por hijo: · logo …………… 194 px ← el bloque más alto de la pantalla, y la imagen ni siquiera carga (el archivo devuelve 404) · relleno ……… 96 px (40 arriba + 56 abajo) · titular ……… 150 px · entradilla … 123 px · capacidades 296 px · privacidad … 107 px · acciones …… 68 px · confianza …… 77 px Se recorta el aire, no el contenido: no se quita ni una frase. El titular, las cuatro capacidades, la promesa de privacidad y los datos de USDOT/MC siguen enteros — solo dejan de estar separados por el espacio de un monitor que casi nadie tiene. Va acotado a `max-height: 1200px` para que en una pantalla de verdad alta la composición respire como estaba pensada. ────────────────────────────────────────────────────────────────────────── / @media (min-width: 1024px) and (max-height: 1200px) and (pointer: fine) { .ob-step { padding: 20px 32px 28px; } / El logo baja de 194 a ~100: sigue siendo lo primero que se ve, deja de ser lo más grande de la pantalla. El alto NO está en el `padding` del envoltorio sino en `.ob-logo-frame`, que mide 160×160 fijos. Y el `padding` del envoltorio va con `!important` en `onboarding-p0-fixes.css`, así que hay que igualarlo — es el precio de los 103 `!important` que ya hay repartidos por estas nueve hojas, y por eso aquí no se añade ninguno nuevo salvo el que hace falta para empatar con uno existente. / .ob-logo-wrap { padding: 4px 0 6px !important; } .ob-logo-frame { width: 92px; height: 92px; } / `.ob-welcome .ob-h1` (dos clases) gana a `.ob-h1` (una) por especificidad, aunque esta hoja se cargue después. Se escribe con el mismo peso en vez de subirlo con `!important`. / .ob-welcome .ob-h1, .ob-step .ob-h1 { margin-top: 4px; margin-bottom: 8px; } .ob-lead { margin-bottom: 12px; } .ob-caps { margin-bottom: 12px; } .ob-priv { padding-top: 9px; padding-bottom: 9px; margin-bottom: 12px; } .ob-cta-row { margin-top: 16px; } .ob-trust { padding-top: 10px; } .ob-lang-pick { margin-bottom: 0; } } / ── 6c · LA ESQUINA DE ARRIBA A LA DERECHA, DONDE SE PISABAN TRES COSAS ──── MEDIDO a 375×812, que es un iPhone normal: .ob-skip 48×48 @ x=321 (borde derecho 369 — pegado al canto) .ob-h-btn 24×44 @ x=375 ←← LA X ESTÁ FUERA DE LA PANTALLA .ob-lang-pick 196×48 @ x=161 ←← y encima, tapando a «Saltar» En un teléfono no se puede cerrar el onboarding con la X. El botón existe, responde, y está pintado más allá del borde derecho. Queda «Saltar», que salva la situación por los pelos — pero la X es donde la gente busca cerrar, y no estar es no estar. POR QUÉ: `onboarding-p0-fixes.css` fija `grid-template-columns: 44px 1fr 44px !important` por debajo de 480 px. La tercera columna mide 44 px y tiene que contener «Saltar» (48) MÁS la X (44): unos 98 px. Lo que no cabe se sale, y en una rejilla se sale hacia fuera, no hacia dentro. Un `!important` con un ancho fijo es una promesa de que el contenido nunca crecerá. Aquí creció — se añadió «Saltar» — y nadie volvió a mirar la promesa. Y aparte, el selector de idioma va `position: absolute; top: 14px; right: 18px`, o sea clavado exactamente en esa misma esquina. Dos cosas distintas peleando por el mismo sitio, en las dos superficies. LA SOLUCIÓN, sin subir la escalada de `!important` más de lo justo: · La tercera columna pasa a `auto`: se lleva el ancho que necesite y el centro (los puntitos del paso) cede, que es lo que puede ceder. · El idioma sale de la esquina y baja al flujo, centrado arriba del contenido. Es además donde tiene sentido: elegir idioma es la primera decisión, no un adorno de la barra. ────────────────────────────────────────────────────────────────────────── / .ob-lang-pick { position: static; justify-content: center; margin: 0 auto 10px; } @media (max-width: 480px) { / `auto` en vez de 44px fijos: el `!important` iguala al que ya estaba puesto en `onboarding-p0-fixes.css`; no se sube el peso, se empata. / .ob-header { grid-template-columns: 44px minmax(0, 1fr) auto !important; } / Que el bloque de acciones no se salga aunque crezca de nuevo. / .ob-h-actions { justify-self: end; flex-wrap: nowrap; min-width: 0; } / «Saltar» se aprieta un poco para dejarle sitio a la X. El objetivo sigue en 44 px de alto, que es lo que decide si el dedo acierta. / .ob-skip { padding: 0 10px; font-size: calc(13px var(--ir-letra, 1)); } /* Los puntitos del paso son lo único prescindible de esa fila: se recortan antes que un botón. / .ob-h-mid { min-width: 0; overflow: hidden; } } / ── 7 · La salida, discreta ────────────────────────────────────────────── / .ob-header [data-skip], .ob-header [data-close] { opacity: 0.75; } .ob-header [data-skip]:hover, .ob-header [data-close]:hover { opacity: 1; } / ── 8 · Apaisado y pantallas bajas ─────────────────────────────────────── / @media (max-height: 560px) { .ob-step { padding: 14px 18px 20px; } .ob-logo-wrap { display: none; } } @media (prefers-reduced-motion: reduce) { .ob-card, .ob-root { transition: none; animation: none; } } / ── 9 · NINGÚN AVISO ENCIMA DEL ONBOARDING ───────────────────────────────── En la captura del dueño flotaba «🌤 Sin alertas climáticas en el área» encima del titular. Envolver `showToast` no bastó: varios módulos crean el nodo del aviso a mano, sin pasar por esa función. Así que se corta también en CSS, que funciona sin importar quién lo cree. Es defensa en profundidad, no redundancia: el JS los ENCOLA para soltarlos después (por si alguno importa) y esto garantiza que ninguno se vea mientras tanto, incluido el que escriba el módulo que se añada mañana. ────────────────────────────────────────────────────────────────────────── / html.ir-pre-onboard .ir-toast, html.ir-pre-onboard .toast, html.ir-pre-onboard .ir-conn-banner, html.ir-pre-onboard [class="toast"]:not(.ob-toast), html.ir-pre-onboard .ir-alert-fab { display: none; } /* ───── css/onboarding-movil.css ───── / /PORQUE El onboarding en un telefono: cabe en una pantalla, sin scroll. Va DESPUES de pantalla-completa para ganar por orden de carga. PORQUE/ / ========================================================================== IRON ROUTE — LA COMPOSICIÓN DEL ONBOARDING EN UN TELÉFONO Va de la mano de `onboarding-movil.js`, que es quien recorta el TEXTO. El reparto de trabajo no es casual: · El JS quita palabras. ← ahí estaba el 66 % del problema · Esta hoja aprieta el aire y baja la escala tipográfica. Se intentó tres veces resolverlo solo con esta mitad y las tres falló. Con 1.683 px de contenido en 571 px útiles, apretar el CSS no llega: para meter eso encogiendo habría que bajar el cuerpo a unos 5 px, cuando el suelo del sistema son 12. La composición no arregla un exceso de palabras. EL PRESUPUESTO, medido en el teléfono más pequeño que hay que soportar (Android 360×640, que da 571 px útiles bajo la cabecera): idioma .... 38 px capacidades ... 176 px logo ...... 44 px privacidad .... 34 px titular ... 56 px acciones ...... 96 px apoyo ..... 36 px confianza ..... 26 px aire ...... 56 px ───────────────────── TOTAL ......... 562 px Nueve píxeles de margen. Por eso cada número de aquí abajo es un techo y no una sugerencia: aflojar uno saca la pantalla del presupuesto. LO QUE NO SE TOCA PARA GANAR ALTO: · 48 px de objetivo táctil. Un botón que el dedo no acierta no ahorra espacio: gasta un intento. · 12 px de suelo tipográfico. · La salida, el aviso de que no es un ELD, y USDOT/MC. Todo cuelga de `@media (max-width: 480px)` y de la clase `ir-ob-corto` que pone el JS. Así el escritorio no se entera de nada. ========================================================================== / @media (max-width: 480px) { / ── EL CONTENIDO SE DESPLAZA CUANDO NO CABE. ANTES SE AMPUTABA ───────── Aquí ponía `overflow-y: hidden`, y la intención era buena: que cada paso quepa entero sin desplazar, que es lo cómodo. El problema es lo que pasa cuando NO cabe, y en un Android de 360x640 no cabe. AUDITADO, y son cinco P0 de una sola regla: entre 13 y 1.866 px amputados por paso. No se puede elegir un semirremolque (2 de 19 tarjetas alcanzables, cero semis). No se puede tocar el GVWR, que es obligatorio. No se puede pulsar «Continuar como invitado». Tres de los cinco roles quedan fuera. Un Android corto no puede completar el alta — y sin alta, la app rutea como automóvil. `hidden` no hace que quepa: hace que lo que sobra desaparezca sin decirlo. El contenido que sobra en un formulario obligatorio no es decoración. La regla nueva: el CUERPO se desplaza y el pie se queda quieto. Así el botón de continuar sigue siempre a mano —que era lo que se quería proteger— y lo que no cabe se alcanza desplazando, como en cualquier formulario. `100dvh` se mantiene: en Safari `vh` incluye el trozo que tapa la barra de direcciones y el botón queda debajo de ella. / html.ir-ob-corto .ob-card > [data-body], html.ir-ob-corto .ob-body { display: block; flex: 1 1 auto; min-height: 0; / sin esto un hijo flex no encoge y no hay scroll / overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; / que el gesto no arrastre la página de detrás / } / El pie no se desplaza con el cuerpo: es la salida del paso. / html.ir-ob-corto .ob-footer, html.ir-ob-corto .ob-actions { flex: 0 0 auto; } html.ir-ob-corto .ob-step { padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 7px; min-height: 0; } / Los márgenes propios de cada bloque se anulan: con `gap` mandando, un `margin-bottom: 18px` heredado suma dos veces y se come el presupuesto sin que se vea de dónde salió. / html.ir-ob-corto .ob-step > { margin-top: 0; margin-bottom: 0; } /* ── Idioma: primero, pequeño, y con el dedo intacto ─────────────────── / / El ALTO de la fila lo fija el envoltorio, no el chip: medido, el chip bajaba a 38 y la fila seguía en 48 porque el contenedor tenía su propia altura. Un recorte que no se nota es un recorte que no se hizo. / html.ir-ob-corto .ob-lang-pick { gap: 6px; align-items: center; } / El chip mide 48 px de alto por sí solo, que es justo el objetivo táctil del sistema. Se deja como está. AQUÍ HUBO UN INTENTO MÍO QUE SALIÓ MAL Y SE CUENTA PORQUE SE VIO EN PANTALLA: para ahorrar 12 px puse el chip a 36 y le añadí un `::after` invisible de 48 px que devolviera el objetivo táctil. Dos cosas: · El `height: 36px` no llegó a aplicarse — el chip siguió midiendo 48. · Y el `::after` sí se aplicó, encima de la insignia de «idioma activo», que usa ese mismo pseudo-elemento. Mi geometría (`left:0; right:0; height:48px`) convirtió un círculo pequeño en un óvalo negro estirado sobre la bandera de España. O sea: el ahorro no llegó y el defecto sí. Un pseudo-elemento es un sitio compartido; ocuparlo «porque estaba libre» es asumir algo que no se comprobó. Se quita, y los 12 px salen de otro lado — que ya salieron: la pantalla cabe con 39 px de margen. El chip se deja en su tamaño natural, con el tipo un poco menor. / html.ir-ob-corto .ob-lang { padding: 0 12px; font-size: calc(12px var(--ir-letra, 1)); } /* ── La X de cerrar: 48, no 44 ──────────────────────────────────────── El medidor la cazó en 44×44. Y el token NO tenía la culpa: `--ob-touch` vale 48 px en `onboarding.css`, que es lo correcto. El 44 lo impone `state-cleanup-f4.css`: .ob-h-btn { width: 44px !important; height: 44px !important; } Alguien encogió a mano el objetivo táctil del botón de cerrar, con `!important`, y así lleva desde entonces. Es el botón con el que alguien sale de una pantalla que no quería ver: fallarlo una vez es quedarse dentro, y quedarse dentro suele acabar en cerrar la app. Se empata el `!important` porque no hay otra forma de ganarle a uno existente. Los 4 px no salen del presupuesto de la pantalla: el botón vive en la cabecera, que ya mide 69 px y le sobra sitio. / html.ir-ob-corto .ob-h-btn, .ob-header .ob-h-btn { width: 48px !important; height: 48px !important; min-width: 48px; } / ── Logo: lo primero que se ve, no lo más grande ───────────────────── / html.ir-ob-corto .ob-logo-wrap { padding: 0 !important; } html.ir-ob-corto .ob-logo-frame { width: 44px; height: 44px; } / ── Escala tipográfica del teléfono (base 15, razón 1.2) ───────────── / html.ir-ob-corto .ob-h1 { font-size: calc(23px var(--ir-letra, 1)); line-height: 1.16; margin: 0; } html.ir-ob-corto .ob-lead { font-size: calc(14px * var(--ir-letra, 1)); line-height: 1.4; max-width: none; } /* ── Las cuatro capacidades, en filas compactas ──────────────────────── / html.ir-ob-corto .ob-caps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } html.ir-ob-corto .ob-caps li { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: center; padding: 5px 9px; border-radius: 9px; text-align: left; } html.ir-ob-corto .ob-capsic svg { width: 18px; height: 18px; } html.ir-ob-corto .ob-caps strong { display: block; font-size: calc(13px var(--ir-letra, 1)); line-height: 1.25; } html.ir-ob-corto .ob-caps li span:not(.ob-capsic) { display: block; font-size: calc(12px * var(--ir-letra, 1)); /* el suelo del sistema; ni un pixel menos / line-height: 1.35; margin-top: 1px; } / ── La promesa de privacidad: una línea, y sigue estando ────────────── / / La promesa de privacidad cabe en UNA línea: «No es un ELD.» en negrita y la frase seguida, no en dos bloques apilados. Sigue diciendo exactamente lo mismo y ocupa 38 px en vez de 54. / html.ir-ob-corto .ob-priv { padding: 6px 9px; border-radius: 9px; text-align: left; display: block; } html.ir-ob-corto .ob-priv strong, html.ir-ob-corto .ob-priv span { display: inline; font-size: calc(12px var(--ir-letra, 1)); line-height: 1.35; } html.ir-ob-corto .ob-priv strong { margin-right: 4px; } /* ── Acciones: los 48 px no se negocian ──────────────────────────────── / html.ir-ob-corto .ob-cta-row { display: grid; grid-template-columns: 1fr; gap: 5px; margin: 2px 0 0; } html.ir-ob-corto .ob-btn-primary { min-height: 48px; font-size: calc(16px var(--ir-letra, 1)); } /* «Ya tengo cuenta» y «Ver el mapa primero» comparten fila: son la misma clase de acción —salidas— y juntas ahorran 44 px sin quitar ninguna. / / 48 px, no 44. El medidor los cazó en 44 y la regla del sistema no se recorta para ganar alto: un botón que el dedo no acierta no ahorra espacio, gasta un intento. Los 4 px salen del copy, no del dedo. / html.ir-ob-corto .ob-btn-ghost, html.ir-ob-corto .ob-ver-mapa { min-height: 48px; font-size: calc(13px var(--ir-letra, 1)); padding: 0 8px; } html.ir-ob-corto .ob-cta-row { grid-template-areas: "a a" "b c"; grid-template-columns: 1fr 1fr; } html.ir-ob-corto .ob-btn-primary { grid-area: a; } html.ir-ob-corto .ob-btn-ghost { grid-area: b; } html.ir-ob-corto .ob-ver-mapa { grid-area: c; } html.ir-ob-corto .ob-ver-nota { font-size: calc(12px * var(--ir-letra, 1)); line-height: 1.3; margin: 0; } /* ── Confianza: se queda en una línea, pero se queda ─────────────────── / html.ir-ob-corto .ob-trust { padding: 5px 0 0; margin: 0; border-top: 1px solid var(--line, #1E3A5F); display: block; } html.ir-ob-corto .ob-trustids { display: block; font-size: calc(12px var(--ir-letra, 1)); line-height: 1.3; } /* ══════════════════════════════════════════════════════════════════════ EL SEGUNDO RECORTE — porque el primero se quedó a 116 px Medido después de recortar el copy: el contenido bajó de 1.683 a 687 px. Enorme, y todavía 116 px por encima de los 571 útiles de un Android de 360×640. El presupuesto no se cumple «casi». Aquí se cierra ese hueco, y el orden en que se recorta no es arbitrario — va de lo más prescindible a lo menos: 1. El logo (−44). Ya saben en qué app están: la abrieron ellos. Un logo en la primera pantalla es cortesía, no información. 2. Las capacidades a 2×2 (−77). Cuatro filas se convierten en dos. Se lee igual y ocupa la mitad. 3. El aire entre bloques (−8). 4. El envoltorio del idioma, la privacidad y la confianza (−40). Lo que NO entra en esta lista, en ningún orden: los botones, la salida, el aviso del ELD y USDOT/MC. Antes de tocar uno de esos se recorta más copy — y si tampoco, la pantalla se parte en dos pasos. Se dispara por debajo de 700 px de alto de ventana, que cubre el 360×640 y el iPhone SE de 375×667. De ahí para arriba sobra sitio y la composición respira. ══════════════════════════════════════════════════════════════════════ / @media (max-height: 700px) { / `!important` porque `onboarding-p0-fixes.css` fija `display: flex !important` en este mismo elemento. Se empata, no se sube: medido, sin esto el logo seguía ocupando sus 44 px. / html.ir-ob-corto .ob-logo-wrap { display: none !important; } html.ir-ob-corto .ob-step { gap: 6px; } html.ir-ob-corto .ob-h1 { font-size: calc(21px var(--ir-letra, 1)); } /* Dos por dos. El título de cada tarjeta está escrito para caber en una línea a 12,5 px en media columna — por eso el techo de 24 caracteres del diccionario no es decorativo: si un título parte en dos, esta rejilla deja de cumplir el presupuesto. / html.ir-ob-corto .ob-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } html.ir-ob-corto .ob-caps li { grid-template-columns: 1fr; gap: 2px; padding: 6px 8px; } html.ir-ob-corto .ob-capsic { display: none; } html.ir-ob-corto .ob-caps strong { font-size: calc(12.5px var(--ir-letra, 1)); } html.ir-ob-corto .ob-caps li span:not(.ob-caps__ic) { font-size: calc(12px * var(--ir-letra, 1)); } } } /* En escritorio esta hoja no existe: `ir-ob-corto` solo la pone el JS por debajo de 480 px, y al ensanchar la ventana la quita y devuelve el texto largo. Nada de esto se queda pegado. / / ───── css/esquina-superior.css ───── / /PORQUE La esquina superior derecha, donde el boton de cuenta, la barra de capas y el buscador se pisaban. Va la ultima: reparte una franja que cuatro modulos distintos anclan con `position: fixed` y `right`. PORQUE/ / ========================================================================== IRON ROUTE — LA ESQUINA SUPERIOR DERECHA, DONDE TRES COSAS SE PISABAN MEDIDO sobre la captura del dueño (1908×1038) y confirmado en 1440, 1024, 768 y 375: · `#ir-r4-auth-btn` («Iniciar sesión») 142×44, anclado a `right: 12px` · `.irc-capas` (Calle/Satélite/Oscuro/Claro/Relieve) 603×62, también anclado a `right: 12px` · `.search-header` (el buscador) 480×72, centrado arriba Los tres viven en la misma franja superior y ninguno sabe de los otros: 1. El botón de cuenta tapa el chip «Relieve» de la barra de capas. `elementFromPoint` sobre ese chip devuelve el botón de login — o sea que una de las cinco capas base no se puede elegir en escritorio. 2. La barra de capas se mete debajo del buscador por la izquierda: `.irc-capas` pierde el 20,2 % de su área bajo `.search-header`, y el chip «Calle» devuelve `input#searchInput` al pulsarlo. Dos de cinco capas muertas. 3. En teléfono el botón de cuenta se sienta ENCIMA del buscador: `142×48@221,12` contra `221×48@69,12` = 69×48 px de solape, y el micrófono queda tapado. Nada de esto es un fallo de un archivo: es que cuatro módulos distintos anclan a la misma esquina con `position: fixed` y `right`, y el que se carga después gana. Esta hoja reparte esa franja de una vez. LA REGLA QUE SE APLICA: En una franja compartida, quien tiene ancho variable cede. El buscador es lo que más se usa y se queda donde está; el botón de cuenta es el más pequeño y se queda en la esquina; la barra de capas se aparta, porque es la única que puede reducirse o bajar sin perder nada. ========================================================================== / / ── 1 · Escritorio: los tres en la misma fila, sin tocarse ──────────────── / @media (min-width: 900px) { / El botón de cuenta se queda en la esquina: 12px del borde, 154px de reserva contando su ancho máximo con un correo largo. / .irc-capas { right: 178px; max-width: calc(100vw - 178px - 12px); } } / Pantallas donde el buscador y las capas todavía se rozarían: la barra de capas baja una fila en vez de meterse debajo del buscador. / @media (min-width: 900px) and (max-width: 1500px) { .irc-capas { top: 84px; / justo debajo de la cabecera de búsqueda (72px) / right: 12px; max-width: calc(100vw - 24px); } } / ── 2 · Teléfono y tablet: nadie se sienta encima del buscador ──────────── / @media (max-width: 899px) { / El buscador ocupa toda la franja de arriba. El botón de cuenta baja debajo, alineado a la derecha. 8px de aire para que no parezca pegado. / #ir-r4-auth-btn, #ir-topright-user { top: calc(72px + env(safe-area-inset-top, 0px) + 8px) !important; right: 12px !important; } / Y las capas debajo del botón de cuenta, no al lado: en 375px no caben en la misma fila y lo que no cabe se sale. / .irc-capas { top: calc(72px + env(safe-area-inset-top, 0px) + 8px + 52px); right: 12px; left: 12px; max-width: none; } } / ── 3 · La barra de capas nunca se sale por los lados ─────────────────── Medido: `.irc-lista` salía a `172×270@191,140` en un teléfono de 375 y se quedaba abierta. Se acota al ancho disponible y se le da scroll propio en vez de desbordar. / .irc-capas { max-width: calc(100vw - 24px); box-sizing: border-box; } .irc-capas .irc-lista { max-width: calc(100vw - 24px); max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; } / ── 4 · El pie legal deja de montarse sobre los accesos rápidos ────────── Medido: `.ir-footer-id` (z-index 1199) solapaba `.quick-tiles` (z 800) en 1648×10 px a 1908, y 375×17 px en el teléfono. Diez píxeles no parecen nada hasta que son diez píxeles de una línea de 9,5 px: se pierde el trazo inferior de las letras y el número de USDOT se lee mal. Y la letra sube de 9,5 px a 12, que es el suelo del sistema. Un identificador federal que no se puede leer no cumple su función. / .ir-footer-id { font-size: calc(12px var(--ir-letra, 1)) !important; line-height: 1.3 !important; padding: 4px 10px calc(4px + env(safe-area-inset-bottom, 0px)) !important; } .ir-footer-id span { font-size: calc(12px * var(--ir-letra, 1)) !important; } /* ── 5 · Los accesos rápidos se apartan del pie ──────────────────────────── / .quick-tiles { margin-bottom: 6px; } / ── 6 · Objetivos táctiles que estaban por debajo del suelo ────────────── Medido en teléfono: 19 de 77 controles por debajo de 48 px. Estos son los del mapa, que son los que se pulsan con el camión parado en un arcén. / @media (max-width: 899px) { #menuBtn, #voiceBtn, #locateBtn, #layersBtn, #truckRestrictBtn, #ir-r4-auth-btn, #ir-topright-user { min-width: 48px; min-height: 48px; } #swapRouteBtn, .ir-pf5-close, .fab-collapse-toggle, .r25-collapse-btn { min-width: 48px; min-height: 48px; } } / Con ratón el suelo baja a 40, nunca menos. / @media (min-width: 900px) { .fab-collapse-toggle, .r25-collapse-btn, #swapRouteBtn, .ir-pf5-close { min-width: 40px; min-height: 40px; } } / ── 7 · Las etiquetas por debajo de 12 px ──────────────────────────────── `ecosystem-core` fija el suelo en 12 px y no admite excepciones fuera del modo navegación (que sube a 20). Medido: 29 nodos por debajo en escritorio y 23 en teléfono. Estos son los que se leen de verdad. / .tile-label, .nav-tab span, .menu-tagline, .menu-version, .ir-base-layer-heading { font-size: calc(12px var(--ir-letra, 1)) !important; } /* La atribución de Leaflet viene a 10px de la propia librería. Sube a 12 — es un requisito de licencia de OpenStreetMap: el crédito tiene que ser legible, no solo estar. / .leaflet-control-attribution, .leaflet-control-attribution a { font-size: calc(12px var(--ir-letra, 1)) !important; } /* Y area que se pueda tocar. La letra ya cumplia los 12 px; lo que medía 14 px de alto era el BLANCO donde acertar, y estos enlaces son obligacion de licencia: si alguien los quiere abrir, tiene que poder. No llegan a 48 —seria una barra de atribucion enorme encima del mapa— pero 24 px de alto real es la diferencia entre acertar y no. Declarado como excepcion. / .leaflet-control-attribution a { display: inline-block; min-height: 24px; line-height: 24px; padding: 0 3px; } / ── 8 · Campos por debajo de 16 px → iOS hace zoom al enfocar ──────────── Medido: 14 campos. El zoom descoloca la pantalla de alguien que puede estar parado en el arcén escribiendo una dirección. / input, select, textarea, #searchInput, #tripOrigin, #tripDest, #vehicleType, #vehicleHeight, #vehicleWeight, #vehicleLength { font-size: calc(16px var(--ir-letra, 1)); } /* ── 9 · En escritorio no hace falta la barra de pestañas del teléfono ──── Medido: `.bottom-nav 480×64@714,974` — una barra de 480 px flotando en un lienzo de 1908, con `transform: translate(-240px, 0)` para centrarla. Con el raíl de navegación a la izquierda (240-260 px, siempre visible) y los accesos rápidos abajo, esa barra es la TERCERA navegación de la misma pantalla. Tres formas de ir al mismo sitio no es generosidad: es que nadie sabe cuál es la buena. / .ir-escritorio .bottom-nav, .ir-escritorio .nav-tabs { display: none; } / Y el hueco que reservaba deja de reservarse. / .ir-escritorio { --nav-height: 0px; } / ══════════════════════════════════════════════════════════════════════════ `hidden` TIENE QUE ESCONDER — la salvaguarda general El desplegable de capas se quedó abierto para siempre en el teléfono porque su hoja de estilos le daba `display: flex` y eso le gana al `[hidden]` que aplica el navegador. `map-layers.js` hacía `lista.hidden = true` y no pasaba nada. No es un fallo de ese archivo: es una trampa del lenguaje que muerde a cualquiera que ponga `display` en una clase y luego use `hidden` en el JS. En esta base hay 20 sitios que usan `hidden` desde JavaScript. Se pone el suelo aquí, para todos, y con `!important` porque el rival —`display: flex` en una clase— tiene la misma especificidad y a veces aparece en una hoja posterior. Es de los pocos sitios donde `!important` es la herramienta correcta: se está restaurando el comportamiento del navegador, no compitiendo con otra decisión de diseño. Excepción declarada: `.irc-lista` en escritorio, que vive abierta en fila por decisión de producto y lo dice en su propia media query. / [hidden]:not(.irc-lista) { display: none !important; } @media (min-width: 1024px) { / La excepción, escrita donde se ve: en ancho la lista de capas no se oculta nunca, es una barra de cinco chips. / .irc-lista[hidden] { display: flex !important; } } / ══════════════════════════════════════════════════════════════════════════ LOS AVISOS, EN EL TELÉFONO, ABAJO MEDIDO: el contenedor de avisos salía `299×756` — tres cuartos de la pantalla— porque DOS hojas definen la misma clase con anclajes opuestos y se mezclan: `styles.css:1237` lo ancla con `top`, y `ui-fixes-p0.css:9` con `bottom`. Con los dos puestos, la caja se estira de arriba abajo. Consecuencia real: un aviso de «No se pudo obtener tu ubicación» —que sale siempre que alguien deniega el GPS, o sea a menudo— aparecía ARRIBA y tapaba el botón de cuenta. `elementFromPoint` sobre ese botón devolvía `toast-message`. Se decide por abajo, que es lo que `ui-fixes-p0` ya quería y además es donde los espera cualquiera que use un teléfono: arriba está el buscador, y un aviso que tapa el buscador tapa lo que la persona iba a hacer. / @media (max-width: 899px) { #toastContainer { top: auto; / Por encima de la fila de botones flotantes, no encima de ellos. Medido: con 12 px el aviso caia sobre `#rrBoton` (Reportar) y `elementFromPoint` devolvia el aviso — o sea que durante los segundos que dura el aviso, el boton de reportar una restriccion no se podia pulsar. Y el aviso mas frecuente es «No se pudo obtener tu ubicacion», que sale justo cuando alguien acaba de denegar el GPS y va a querer tocar algo. / / Por encima de TODA la fila de botones flotantes, no solo de uno. Medido en dos pasadas: con 12 px el aviso tapaba «Reportar»; con 84 px dejó de taparlo y empezó a tapar «+ VIAJE», que había subido para no pisar los accesos rápidos. Tres botones flotantes en la franja de abajo es lo que obliga a este número; el aviso se sube por encima de los tres y se acabó el juego de las sillas. / bottom: calc(var(--nav-height, 64px) + 160px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; width: auto; max-width: none; transform: none; height: auto; max-height: 40vh; align-items: stretch; } } / En escritorio se ancla arriba a la derecha y se le da alto propio: sin esto la caja también se estiraba 894 px, y aunque no roba clics (`pointer-events: none`), una caja de ese tamaño es una bomba de relojería el día que alguien le ponga `auto`. / @media (min-width: 900px) { #toastContainer { bottom: auto; height: auto; max-height: 60vh; } } / ══════════════════════════════════════════════════════════════════════════ LOS TRES SOLAPES QUE QUEDABAN — medidos, no estimados 1 · LA BARRA DE CAPAS SE METE 67 px BAJO EL BUSCADOR Medido a 1908: buscador `480×72@714`, o sea de 714 a 1194. Barra de capas `603×62@1127`, o sea empieza en 1127. 67 px de solape, y ahí cae el primer chip: «Calle». Se ve medio tapado y `elementFromPoint` sobre él devuelve el buscador. La primera versión de esta hoja lo ancló a `right: 178px` contando el espacio del botón de cuenta. Correcto por la derecha, y no miré la izquierda: es una barra de 603 px, no cabe en el hueco que queda. Se baja una fila, debajo del buscador. No estorba a nada y ahí no compite con nadie — que es lo que se pedía desde el principio. 2 · EL FAB «+ VIAJE» PISA LA FILA DE ACCESOS RÁPIDOS Medido: `107×56@1107,882` contra tiles `1648×94@260,930` = 107×8 px. Ocho píxeles, pero justo sobre el borde superior del tile DESCANSO, que queda con la esquina comida. 3 · DOS BOTONES DE PLEGAR PARA EL MISMO GRUPO `.fab-collapse-toggle` en `1856,648` y `.r25-collapse-btn` en `1162,632`. Dos controles idénticos, dos paradas de tabulación, y dos claves distintas en el almacenamiento (`ironroute_fab_collapsed` y `fab_collapsed`), para un solo grupo de tres botones. Se queda el que vive DENTRO del grupo que pliega —`.r25-collapse-btn`, justo encima de los tres botones— porque es el que se entiende sin explicación. El otro flota solo contra el borde derecho, a 700 px de lo que controla. ══════════════════════════════════════════════════════════════════════════ / @media (min-width: 900px) { / 1 · debajo del buscador, en todos los anchos: la barra mide 603 px y en ningún tamaño realista cabe entre el buscador y el botón de cuenta. / .irc-capas { top: calc(72px + env(safe-area-inset-top, 0px) + 12px); right: 12px; max-width: calc(100vw - 24px); } / 2 · el FAB, por encima de la fila de tiles / #fabNewTrip, .fab-new-trip { bottom: calc(var(--nav-height, 0px) + 118px); } / 3 · un solo botón de plegar / .fab-collapse-toggle { display: none; } } @media (max-width: 899px) { / En teléfono el que sobra es el otro: `.r25-collapse-btn` está dentro del grupo, que ahí es estrecho, y `.fab-collapse-toggle` es el que la gente ya conoce de la versión anterior. Se queda uno igual. / .r25-collapse-btn { display: none; } #fabNewTrip, .fab-new-trip { bottom: calc(var(--nav-height, 64px) + 96px + env(safe-area-inset-bottom, 0px)); } } / ══════════════════════════════════════════════════════════════════════════ LO QUE SALIÓ DE LA CAPTURA DEL IPHONE (430×932, producción) 1 · EL PIE LEGAL SE CORTA — y con él la segunda línea Medido: `scrollWidth 542` en `clientWidth 430`. El texto de entonces era largo y en pantalla acababa cortado a media línea. Cuando esto se midió, `ecosystem-core` exigía USDOT y MC en el pie de toda página pública. Esa regla la derogó el dueño el 8-sep-2026 («no hagas referencia a mi DOT o mi MC, porque eso es otra empresa separada»): hoy el pie firma «Iron Route · TruckerProfit Inc.» y ya no tiene esa longitud. La regla de envolver en dos líneas se queda: un pie cortado sigue siendo un pie que no dice lo que iba a decir. Se deja envolver en dos líneas. No se recorta el texto ni se baja de 12 px: lo que sobra es el ancho, no el contenido. 2 · DOS BOTONES DE PLEGAR, UNO ENCIMA DEL OTRO Medido: `.r25-collapse-btn 48×48@370,466` y `.fab-collapse-toggle 48×48@374,500` — 14 px de solape, dos círculos pisándose en el borde derecho. Ya se había intentado esconder uno con `.r25-collapse-btn { display: none }` en esta misma hoja, y no funcionó: `bundle-r5.js` inyecta un `