/* ══════════════════════════════════════════════════════════════════════ escala.css · SIE — CAPA DE TOKENS DE ESCALADO ────────────────────────────────────────────────────────────────────── Este es el ÚNICO archivo con infraestructura de escalado. Los demás CSS del sistema no la repiten: la consumen. REPARTO DE RESPONSABILIDADES GenericEscala.js → mide y publica --esc, --esc-cromo, --esc-alto-util escala.css → deriva tokens --e-1, --fs-*, --gap-* .css → solo consume padding: var(--e-3) POR QUÉ ASÍ La tentación es que el JS escriba directamente los tamaños de cada módulo. No hacerlo es lo que permite que esto crezca: el motor no conoce ningún selector, y un CSS sin migrar sigue funcionando porque los tokens tienen valor de reserva. ORDEN DE CARGA: inmediatamente después de layout-admin.css y antes de cualquier CSS de módulo. ══════════════════════════════════════════════════════════════════════ */ :root { /* ──────────────────────────────────────────────────────────────── 1. VALORES DE RESERVA Los escribe GenericEscala.js en cuanto arranca. Si el JS no cargó, --esc vale 1 y TODO el sistema se comporta exactamente como hoy. Esa es la red de seguridad de la migración: ningún paso puede romper la pantalla en producción. ──────────────────────────────────────────────────────────────── */ --esc: 1; /* factor de densidad */ --esc-cromo: 0px; /* altura medida de topbar + navbar */ --esc-alto-util: 100vh; /* viewport menos cromo */ --esc-ancho: 100vw; --esc-alto: 100vh; /* ──────────────────────────────────────────────────────────────── 2. ESCALERA DE ESPACIO Una sola unidad, --e-1, y sus múltiplos. Cuando --esc cambia, los ~890 px cableados del sistema no cambian solos: cambian conforme se vayan sustituyendo por estos tokens, archivo por archivo. No hay que migrar todo para empezar a ver beneficio. ──────────────────────────────────────────────────────────────── */ --e-1: calc(4px * var(--esc)); --e-2: calc(8px * var(--esc)); --e-3: calc(12px * var(--esc)); --e-4: calc(16px * var(--esc)); --e-5: calc(24px * var(--esc)); --e-6: calc(32px * var(--esc)); --e-8: calc(48px * var(--esc)); /* ──────────────────────────────────────────────────────────────── 3. ESCALERA TIPOGRÁFICA Con clamp() en vez de var(--esc) a secas, y a propósito: el tamaño de texto necesita un suelo y un techo que no dependan de que el JS haya corrido. Un botón puede encogerse; una etiqueta por debajo de 11px deja de leerse en cualquier caso. Nota honesta: para tipografía, clamp() nativo ya hace el 80% de este trabajo SIN JavaScript. --esc entra aquí solo para que el usuario pueda forzar una densidad (ver punto 6) y para que el texto acompañe al resto de la interfaz. ──────────────────────────────────────────────────────────────── */ --fs-xs: clamp(10px, calc(11px * var(--esc)), 14px); --fs-sm: clamp(11px, calc(12px * var(--esc)), 16px); --fs-md: clamp(12px, calc(14px * var(--esc)), 18px); --fs-lg: clamp(14px, calc(17px * var(--esc)), 23px); --fs-xl: clamp(18px, calc(26px * var(--esc)), 36px); /* Alturas de control táctil/click. Nunca por debajo de 32px. */ --ctrl-h: max(32px, calc(38px * var(--esc))); --ctrl-h-sm: max(28px, calc(32px * var(--esc))); /* ──────────────────────────────────────────────────────────────── 4. ALTURAS ÚTILES --esc-alto-util es MEDIDO, no calculado con un número mágico. reporteglosa.css repetía clamp(40px, 4.5vh, 50px) en seis sitios para restar el alto de la barra; el día que la barra creció, los seis quedaron mal a la vez. ──────────────────────────────────────────────────────────────── */ --alto-pantalla: var(--esc-alto-util); --alto-tabla: calc(var(--esc-alto-util) - var(--e-8) * 2); } /* ══════════════════════════════════════════════════════════════════════ 4-bis. UNIDADES DE VIEWPORT DENTRO DEL SUBÁRBOL CON ZOOM ────────────────────────────────────────────────────────────────────── `zoom` multiplica los px del subárbol, pero NO las unidades de viewport: vw y vh se siguen resolviendo contra la pantalla real. Un `max-height: 92vh` dentro de un subárbol al 155 % acaba ocupando el 143 % de la pantalla. En este sistema son ocho usos y todos son topes de seguridad, no carga estructural. Se corrigen sustituyendo la unidad por el token: max-height: 92vh → max-height: calc(92 * var(--vh)) Los ocho sitios, para no ir a buscarlos: GenericTableHelper.css:104, 119 height: calc(100vh - …) GenericTableHelper.css:454 max-width: 90vw Genericexporthelper.css:271 max-height: 85vh Genericexporthelper.css:449 width: clamp(280px, 88vw, 380px) Presupuesto_modal.css:19 max-height: 52vh modulos.css:147 max-height: 92vh styles_sie.css:177 max-height: calc(100vh - 80px) ══════════════════════════════════════════════════════════════════════ */ :root { --vh: calc(1vh / var(--esc)); --vw: calc(1vw / var(--esc)); } /* ══════════════════════════════════════════════════════════════════════ 5. MODO LIENZO — el motor cartográfico, ya genérico ────────────────────────────────────────────────────────────────────── Sustituye a las reglas .slide-container / .page de reporteglosa.css. Se activa por ATRIBUTO, no por clase de módulo, para que cualquier pantalla pueda usarlo sin heredar nombres ajenos:
…
GenericEscala.lienzo('.mi-hoja', { ancho: 1280, alto: 1000, contenedor: '.mi-marco' }); CUÁNDO NO USAR ESTO: si dentro hay scroll propio, una tabla larga o un canvas interactivo. transform:scale() falsea las coordenadas de getBoundingClientRect, y de ahí dependen el resizer de columnas de GenericTable y el hit-testing de Chart.js. ══════════════════════════════════════════════════════════════════════ */ [data-lienzo-marco] { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 100%; height: var(--esc-alto-util); } [data-lienzo] { width: var(--lienzo-ancho, 1280px); height: var(--lienzo-alto, 1000px); flex-shrink: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(var(--lienzo-escala, 1)); transform-origin: center center; /* Evita el texto borroso en pantallas de alta densidad. */ backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* Anclaje de lo que vive FUERA del lienzo pero debe alinearse con él (la barra de controles de una tabla, por ejemplo). Antes esto se resolvía con variables --table-* que el JS calculaba a mano; ahora el motor publica la geometría y el CSS se ancla con calc(). */ [data-lienzo-pie] { width: var(--lienzo-ancho-real, 100%); margin-inline: auto; } /* ══════════════════════════════════════════════════════════════════════ 6. PREFERENCIA DEL USUARIO Una sola línea permite ofrecer «compacto / normal / amplio» en el perfil sin tocar un solo CSS de módulo: document.body.dataset.densidad = 'compacto'; ══════════════════════════════════════════════════════════════════════ */ [data-densidad="compacto"] { --esc: calc(var(--esc) * 0.88); } [data-densidad="amplio"] { --esc: calc(var(--esc) * 1.15); } /* ══════════════════════════════════════════════════════════════════════ 7. ACCESIBILIDAD Si el sistema operativo pide menos movimiento, el lienzo no debe animar su transform al recalcular la escala. ══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { [data-lienzo] { transition: none !important; } }