/* meteoro-ui.css — Sistema de diseño compartido (Fase 0). Tokens + componentes pulidos tipo app. Identidad cian/verde + gotero naranja de marca. Se carga DESPUÉS del CSS propio de cada pantalla, así que sus tokens mandan. */ :root { --m-cyan: #38d6ff; /* dato / acento frío */ --m-green: #3ee6a0; /* positivo / éxito */ --m-red: #ff5d5d; /* negativo */ --m-amber: #ffb547; /* atención */ --m-brand: #ff7a1a; /* gotero — marca */ --m-bg: #0a0f1a; /* fondo app */ --m-card: #111a2b; /* tarjeta */ --m-line: #20304b; /* borde */ --m-ink: #eaf2fb; /* texto */ --m-mut: #6c7f99; /* texto tenue */ --m-r-card: 15px; /* radio tarjeta */ --m-r-pill: 999px; --m-nav-h: 64px; /* alto del bottom nav (sin safe-area) */ } /* ── Bottom nav (5): fijo abajo, gotero de marca al centro ── */ .mbn { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: space-around; gap: 2px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #080c14; border-top: 1px solid var(--m-line); /* SIN backdrop-filter: en iOS Safari, backdrop-filter + position:fixed sobre el MISMO elemento rompe el anclaje y la barra flota a media pantalla al hacer scroll. El fondo va sólido (ya era 94% opaco, no se pierde casi nada visual). */ } .mbn-i { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--m-mut); text-decoration: none; font: 600 11px "Inter", system-ui, sans-serif; padding: 2px 0; position: relative; -webkit-tap-highlight-color: transparent; transition: color .15s; } .mbn-i svg { width: 23px; height: 23px; display: block; } .mbn-i .mbn-pic { display: block; line-height: 0; } .mbn-i .mbn-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: block; border: 1.5px solid var(--m-cyan); } /* blindaje: meteor.css inyecta íconos a "nav a"; aquí no usamos