/** * Responsive Scaling CSS * Escalado global vía zoom en + variable --100vh para compensar * unidades vh que no se actualizan con zoom. */ :root { --scaling-factor: 1; /* Compensan unidades vh/vw que no se actualizan con zoom en . JS las sobreescribe cuando hay escalado activo. Uso: var(--100vh, 100vh) / var(--100vw, 100vw) → en pantallas sin escalado = 100vh/100vw (fallback nativo) → en pantallas con zoom 0.8 = calc(100vh/0.8) = 125vh visual → ×0.8 zoom = 100vh ✓ */ --100vh: 100vh; --100vw: 100vw; } /* * ESCALADO VÍA zoom (no transform) * ───────────────────────────────── * zoom en escala visualmente todo el contenido SIN crear un nuevo * containing block para position:fixed. Esto significa que el spinner, * los modales y el header siguen anclados al viewport real, no al body. * * Con transform:scale en body ocurría lo contrario: todos los fixed * quedaban posicionados relativo al body transformado → spinner descentrado, * modales movidos, header fuera de lugar. * * zoom también maneja el layout correctamente: el contenido crece de forma * natural, sin necesidad de compensar width/height manualmente. */ html[data-early-scaling] { zoom: var(--scaling-factor); overflow-x: hidden; } /* Body sin transform ni dimensiones forzadas */ html[data-early-scaling] body { transform: none !important; overflow-x: hidden; } /* Modales activos: bloquear scroll */ html[data-early-scaling] body.modal-active, body.is-scaled.modal-active { overflow: hidden !important; } /* Login: cancelar el zoom heredado (tiene diseño centrado propio) */ html[data-early-scaling] .auth-container, html[data-early-scaling] .login-container, html[data-early-scaling] .auth-wrapper, html[data-early-scaling] .login-wrapper { zoom: calc(1 / var(--scaling-factor)); } /* * No se necesitan overrides por elemento. * Cada clase que necesita altura completa usa var(--100vh, 100vh) directamente * en su CSS nativo (style.css, dashboard.css, neumorphic-modals.css). * JS actualiza --100vh = calc(100vh / scale) al arrancar. */