/** * MI FOUNDATION — Sistema de diseño base para Mi Mapa Interno * Este archivo se carga ANTES que style.css y menu.css * Define tokens, z-index scale, layout fixes y utilidades globales * * IMPORTANTE: No borrar ni reordenar. Todo el sistema depende de estas variables. */ /* ===== 1. DESIGN TOKENS — Z-INDEX SCALE ===== */ :root { /* Z-index: escala ordenada de menor a mayor. USAR SOLO ESTAS. */ --z-base: 1; --z-above: 10; --z-header: 100; --z-menu: 200; --z-dropdown: 300; --z-sticky: 400; --z-floating-btn: 500; --z-notification: 600; --z-overlay: 700; --z-modal: 800; --z-modal-content: 801; --z-toast: 900; --z-tooltip: 950; --z-max: 999; /* Spacing scale — reemplaza vw sueltos */ --space-2xs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --space-4xl: 64px; /* Breakpoint reference (para documentación, CSS no puede usar vars en media queries) */ /* --bp-mobile: 700px; Mobile-first breakpoint */ /* --bp-tablet: 1024px; Tablet breakpoint (NUEVO) */ /* --bp-desktop: 1500px; Wide desktop cap */ /* Typography scale con clamp() — fluid sin saltos bruscos */ --text-xs: clamp(11px, 0.73vw, 11px); --text-sm: clamp(12px, 0.8vw, 12px); --text-base: clamp(14px, 1vw, 15px); --text-md: clamp(15px, 1.1vw, 16.5px); --text-lg: clamp(16px, 1.2vw, 18px); --text-xl: clamp(18px, 1.5vw, 22.5px); --text-2xl: clamp(20px, 1.73vw, 26px); --text-3xl: clamp(24px, 2vw, 30px); --text-4xl: clamp(28px, 3vw, 45px); /* Touch target mínimo para móvil */ --touch-min: 44px; /* Viewport height real (se actualiza via JS para iOS) */ --vh: 1vh; /* Modal transition */ --modal-duration: 0.3s; } /* ===== 2. VIEWPORT HEIGHT FIX (iOS address bar) ===== */ /* dvh con fallback para navegadores viejos */ @supports (height: 100dvh) { :root { --vh-full: 100dvh; } } @supports not (height: 100dvh) { :root { --vh-full: calc(var(--vh, 1vh) * 100); } } /* ===== 3. LAYOUT FIX — SCROLL ARCHITECTURE ===== */ /* * Arquitectura de scroll corregida: * * *
← viewport container, NO scroll *