/* ═══════════════════════════════════════════════════════════════════════ BASE — reset, cáscara, tipografía, escritorio, tacto y responsive. Copiado TAL CUAL de desarrollo/mockup-ux-interfaz.html (§ SHELL, TIPOGRAFÍA, ESCRITORIO, TACTO, RESPONSIVE). "Se copia, no se interpreta": estas medidas están verificadas con Chrome real por herramientas/verificar-interfaz-navegador.js (0 objetivos táctiles por debajo de 24/44px, 0 desbordes, 0 rejillas desparejas, en 390 y en 1440) y reescribirlas a ojo es cómo se pierde esa verificación. ═══════════════════════════════════════════════════════════════════════ */ *{box-sizing:border-box} /* WCAG 2.2 · 2.4.11 Focus Not Obscured (AA): cuando algo recibe foco de teclado no puede quedar entero debajo de las barras pegajosas. El archivo tenía scroll-margin-top en [data-sec], que cubre el salto del índice pero NO el foco por teclado — tabulando por una sección el botón enfocado quedaba tapado por la barra superior más el índice. scroll-padding-top va en el elemento que scrollea (html) y aplica a todo desplazamiento por foco, no sólo a los saltos del índice. Mismo número que el scroll-margin para que no se desincronicen. */ html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--mtop) + 62px)} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--fuente); font-size:var(--t-body); line-height:var(--lh-2); -webkit-font-smoothing:antialiased; } /* ── Los pesos, como escala ─────────────────────────────────────────── De la entrada «Enterprise SaaS Mobile» del dataset de la skill, que es la que mejor describe a Campo: 800 titulo de pantalla, 700 encabezado de seccion, 600 titulo de tarjeta y botones, 400 cuerpo. Antes los tres niveles de encabezado pesaban 600 y la jerarquia la cargaba sola el tamano — con cinco pasos de escala eso deja el peso sin trabajo. */ h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:var(--lh-0)} h1{font-weight:800} h2{font-weight:700} h3{font-weight:600} /* ── Cifras en mono ─────────────────────────────────────────────────── Aporte de la familia «Finanzas»: Campo es una app de conteos —86 clientes, 173 visitas, 2.186 unidades, «hace 78 dias», «cada 10 dias»— y todos esos numeros se dibujaban con la misma fuente que la prosa. En mono el numero se lee COMO numero, y las columnas de conteos dejan de bailar de fila en fila. */ /* Mono para las cifras que viven EN COLUMNA o dentro de una frase: ahi lo que se gana es que no bailen de fila en fila. */ .num,.viz-v,.chip .n,.snav-i .n,.badge,.cnt{ font-family:var(--mono);font-variant-numeric:tabular-nums; letter-spacing:-.02em; } /* Las cifras GRANDES de los KPI no van en mono: son tipografia de despliegue, no una columna, y en mono el punto de miles ocupa un ancho de caracter entero — «2.186» se lee «2 . 186». Se quedan en la sans, con figuras tabulares, que es lo que da la alineacion sin el efecto. */ .kpi-n{font-variant-numeric:tabular-nums;letter-spacing:-.03em} /* El micro-rotulo de dato: mono, mayuscula, tracking abierto. Es el registro que usan los paneles financieros para decir «esto de aca abajo es un dato y no una frase». Le da a la app un segundo tono de voz, que es lo que no tenia: todo estaba escrito igual. */ .rot{ font-family:var(--mono);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:.09em;color:var(--muted); display:block;margin-bottom:var(--sp-3); } p{margin:0} button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer} /* AGREGADO AL PORTAR EL SISTEMA A public/ (16/09/2026). El mockup no tiene un solo —navega con `