/* [MOBILE-V1] ExcFlow no celular: login próprio + 3 visões (Registrar · Comercial · Oportunidades) (23/10/2026)
   Só vale com html.mx-on (celular de toque, lado menor da tela ≤ 600px). No computador nada disto se aplica. */
html.mx-on { --mx-nv1:#1B1A3F; --mx-nv2:#2E2B6B; --mx-ac:#4F46E5; --mx-ac2:#6366F1; --mx-bg:#F4F5F9; --mx-card:#fff; --mx-line:#E6E8EF; --mx-tx:#14172B; --mx-mid:#5B6178; --mx-low:#8A90A6; --mx-ok:#059669; --mx-bad:#DC2626; --mx-warn:#D97706; }
html.mx-on[data-tema="escuro"] { --mx-bg:#0E0E14; --mx-card:#17171F; --mx-line:#2A2A36; --mx-tx:#F2F2F7; --mx-mid:#A5A8BA; --mx-low:#7C8096; --mx-ac:#818CF8; --mx-ac2:#A5B4FC; }

/* ── LOGIN ── */
html.mx-on #screen-login.active { position:fixed; inset:0; z-index:6000; overflow:auto; display:flex !important; align-items:stretch; justify-content:center;
  background:linear-gradient(160deg,#1B1A3F 0%,#2E2B6B 55%,#4F46E5 140%); padding:0; }
html.mx-on #screen-login.active::after { content:''; position:fixed; inset:0; pointer-events:none; background:repeating-radial-gradient(circle at 110% 18%, transparent 0 18px, rgba(255,255,255,.06) 18px 19px); }
html.mx-on #screen-login .login-wrap { position:relative; z-index:1; width:100%; max-width:420px; min-height:100%; margin:0; padding:max(48px, env(safe-area-inset-top)) 22px 28px; display:flex; flex-direction:column; justify-content:center; gap:26px; background:none !important; box-shadow:none !important; border:0 !important; }
html.mx-on #screen-login .login-logo { display:flex; align-items:center; gap:14px; color:#fff; }
html.mx-on #screen-login .login-logo-icon { width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.14) !important; border:1px solid rgba(255,255,255,.25); color:#fff !important; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; box-shadow:none !important; }
html.mx-on #screen-login .login-logo h1 { color:#fff !important; font-size:26px; margin:0; letter-spacing:-.4px; -webkit-text-fill-color:#fff; background:none !important; }
html.mx-on #screen-login .login-logo p { color:rgba(255,255,255,.8) !important; margin:2px 0 0; font-size:13.5px; }
html.mx-on #screen-login .login-accent { display:none; }
html.mx-on #screen-login .login-card { background:var(--mx-card) !important; border:0 !important; border-radius:20px !important; padding:22px 18px 18px !important; box-shadow:0 20px 50px rgba(10,10,40,.35) !important; display:flex; flex-direction:column; gap:6px; }
html.mx-on #screen-login .login-card label { font-size:12.5px; font-weight:600; color:var(--mx-mid) !important; margin-top:6px; text-transform:none; letter-spacing:0; }
html.mx-on #screen-login .login-card input { height:52px; font-size:16px !important; border-radius:12px !important; border:1px solid var(--mx-line) !important; background:var(--mx-card) !important; color:var(--mx-tx) !important; padding:0 14px !important; width:100%; box-sizing:border-box; }
html.mx-on #screen-login .login-card input:focus { border-color:var(--mx-ac) !important; outline:3px solid color-mix(in srgb, var(--mx-ac) 20%, transparent); }
html.mx-on #screen-login .login-card .btn { height:54px; margin-top:14px; border-radius:14px !important; font-size:16px !important; font-weight:700; background:var(--mx-ac) !important; border:0 !important; color:#fff !important; }
html.mx-on #screen-login .login-hint { text-align:center; color:var(--mx-low) !important; font-size:12px; margin-top:6px; }
html.mx-on #screen-login .login-powered { text-align:center; color:rgba(255,255,255,.7) !important; font-size:12px; }
html.mx-on #screen-login .login-powered strong { color:#fff; }
html.mx-on #screen-login #login-error { border-radius:10px; font-size:13px; }

/* ── CASCA DO APP ── */
html.mx-on.mx-logado body { overflow:hidden !important; }
#mx-app { display:none; }
html.mx-on.mx-logado #mx-app { display:flex; position:fixed; inset:0; z-index:5000; flex-direction:column; background:var(--mx-bg); color:var(--mx-tx);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; font-size:14px; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; }
#mx-app * { box-sizing:border-box; }
.mx-hd { position:relative; flex-shrink:0; padding:calc(10px + env(safe-area-inset-top)) 16px 12px; color:#fff; background:linear-gradient(115deg,#1B1A3F 0%,#2E2B6B 60%,#4F46E5 130%); display:flex; align-items:center; gap:12px; overflow:hidden; }
.mx-hd::after { content:''; position:absolute; inset:0; pointer-events:none; background:repeating-radial-gradient(circle at 108% 50%, transparent 0 18px, rgba(255,255,255,.07) 18px 19px); }
.mx-hd > * { position:relative; z-index:1; }
.mx-hd-tx { flex:1; min-width:0; }
.mx-hd-k { font-size:10.5px; letter-spacing:2px; text-transform:uppercase; opacity:.75; }
.mx-hd-t { font-size:21px; font-weight:700; letter-spacing:-.3px; line-height:1.2; }
.mx-av { width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.14); color:#fff; font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.mx-main { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 14px calc(96px + env(safe-area-inset-bottom)); }
.mx-nav { position:absolute; left:0; right:0; bottom:0; display:flex; background:var(--mx-card); border-top:1px solid var(--mx-line); padding:6px 6px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -6px 20px rgba(16,24,40,.06); }
.mx-nav button { flex:1; border:0; background:none; color:var(--mx-low); font:inherit; font-size:11.5px; font-weight:600; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0 4px; border-radius:12px; cursor:pointer; min-height:54px; }
.mx-nav button svg { width:24px; height:24px; }
.mx-nav button.on { color:var(--mx-ac); background:color-mix(in srgb, var(--mx-ac) 9%, transparent); }

/* menu do usuário */
.mx-sheet-bg { position:fixed; inset:0; z-index:5100; background:rgba(10,10,30,.45); display:flex; align-items:flex-end; }
.mx-sheet { width:100%; background:var(--mx-card); border-radius:20px 20px 0 0; padding:10px 16px calc(18px + env(safe-area-inset-bottom)); color:var(--mx-tx); }
.mx-sheet-alca { width:40px; height:4px; border-radius:2px; background:var(--mx-line); margin:2px auto 14px; }
.mx-sheet-user { display:flex; gap:12px; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--mx-line); margin-bottom:8px; }
.mx-sheet-user .mx-av { background:var(--mx-ac); border:0; }
.mx-sheet button.mx-sheet-op { width:100%; text-align:left; border:0; background:none; font:inherit; font-size:15px; color:var(--mx-tx); padding:14px 4px; border-radius:10px; display:flex; gap:12px; align-items:center; cursor:pointer; }
.mx-sheet button.mx-sheet-op.sair { color:var(--mx-bad); }

/* ── componentes ── */
.mx-card { background:var(--mx-card); border:1px solid var(--mx-line); border-radius:16px; padding:14px; margin-bottom:12px; }
.mx-k { font-size:11.5px; font-weight:600; color:var(--mx-mid); }
.mx-sec { font-size:13px; font-weight:700; color:var(--mx-tx); margin:18px 2px 8px; display:flex; align-items:baseline; justify-content:space-between; }
.mx-sec span { font-size:11.5px; font-weight:500; color:var(--mx-low); }
.mx-in, .mx-sel, .mx-ta { width:100%; min-height:48px; border:1px solid var(--mx-line); border-radius:12px; background:var(--mx-card); color:var(--mx-tx); font:inherit; font-size:16px; padding:0 14px; }
.mx-ta { min-height:96px; padding:12px 14px; resize:vertical; line-height:1.45; }
.mx-in:focus, .mx-sel:focus, .mx-ta:focus { outline:3px solid color-mix(in srgb, var(--mx-ac) 20%, transparent); border-color:var(--mx-ac); }
.mx-lb { display:block; font-size:12.5px; font-weight:600; color:var(--mx-mid); margin:14px 2px 6px; }
.mx-seg { display:flex; background:color-mix(in srgb, var(--mx-mid) 10%, transparent); border-radius:12px; padding:4px; gap:4px; }
.mx-seg button { flex:1; border:0; background:none; border-radius:9px; min-height:40px; font:inherit; font-size:13.5px; font-weight:600; color:var(--mx-mid); cursor:pointer; }
.mx-seg button.on { background:var(--mx-card); color:var(--mx-ac); box-shadow:0 1px 3px rgba(16,24,40,.12); }
.mx-seg button:disabled { opacity:.4; }
.mx-seg button b { font-weight:700; font-size:11px; margin-left:4px; opacity:.75; }
.mx-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.mx-chip { border:1px solid var(--mx-line); background:var(--mx-card); color:var(--mx-tx); border-radius:999px; padding:7px 12px; font:inherit; font-size:13px; cursor:pointer; }
.mx-chip.on { border-color:var(--mx-ac); color:var(--mx-ac); background:color-mix(in srgb, var(--mx-ac) 8%, transparent); }
.mx-btn { width:100%; min-height:52px; border:0; border-radius:14px; background:var(--mx-ac); color:#fff; font:inherit; font-size:16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.mx-btn:disabled { opacity:.5; }
.mx-btn.sec { background:var(--mx-card); color:var(--mx-tx); border:1px solid var(--mx-line); }
.mx-btn.wa { background:#16A34A; }
.mx-btn svg { width:20px; height:20px; }
.mx-acoes { display:flex; gap:8px; margin-top:12px; }
.mx-acoes .mx-btn { min-height:44px; font-size:14px; border-radius:12px; }
.mx-erro { background:color-mix(in srgb, var(--mx-bad) 10%, transparent); color:var(--mx-bad); border-radius:12px; padding:12px 14px; font-size:13.5px; line-height:1.45; margin-top:12px; }
.mx-ok { background:color-mix(in srgb, var(--mx-ok) 12%, transparent); color:var(--mx-ok); border-radius:12px; padding:12px 14px; font-size:14px; font-weight:600; margin-bottom:12px; }
.mx-vazio { text-align:center; color:var(--mx-low); padding:28px 10px; font-size:13.5px; }
.mx-carregando { text-align:center; color:var(--mx-low); padding:30px 10px; font-size:13.5px; }
.mx-carregando::before { content:''; display:block; width:26px; height:26px; margin:0 auto 10px; border-radius:50%; border:3px solid color-mix(in srgb, var(--mx-ac) 20%, transparent); border-top-color:var(--mx-ac); animation:mxGira .8s linear infinite; }
@keyframes mxGira { to { transform:rotate(360deg); } }
.mx-toast { position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:5200; background:#1B1A3F; color:#fff; border-radius:12px; padding:12px 18px; font-size:14px; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.25); max-width:calc(100% - 32px); }

/* Registrar */
.mx-res { margin-top:8px; border:1px solid var(--mx-line); border-radius:14px; overflow:hidden; background:var(--mx-card); }
.mx-res button { width:100%; text-align:left; border:0; border-bottom:1px solid var(--mx-line); background:none; font:inherit; color:var(--mx-tx); padding:12px 14px; display:flex; gap:10px; align-items:center; cursor:pointer; }
.mx-res button:last-child { border-bottom:0; }
.mx-res .cod { color:var(--mx-ac); font-weight:700; font-size:12.5px; min-width:44px; }
.mx-res .nm { flex:1; min-width:0; font-weight:600; }
.mx-res .sb { display:block; font-size:12px; color:var(--mx-low); font-weight:400; margin-top:2px; }
.mx-arq { display:flex; gap:12px; align-items:center; }
.mx-arq .ini { width:44px; height:44px; border-radius:12px; background:color-mix(in srgb, var(--mx-ac) 12%, transparent); color:var(--mx-ac); font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mx-arq .nm { font-weight:700; font-size:16px; line-height:1.25; }
.mx-arq .sb { font-size:12.5px; color:var(--mx-low); margin-top:2px; }
.mx-arq .tr { margin-left:auto; border:0; background:none; color:var(--mx-ac); font:inherit; font-weight:600; font-size:13px; padding:8px; cursor:pointer; }
.mx-fixo { position:sticky; bottom:-96px; margin-top:16px; }

/* Comercial */
.mx-filtros { display:flex; gap:8px; margin-bottom:12px; }
.mx-filtros > * { flex:1; min-width:0; }
.mx-hero { background:linear-gradient(115deg,#1B1A3F 0%,#2E2B6B 60%,#4F46E5 130%); color:#fff; border:0; position:relative; overflow:hidden; }
.mx-hero::after { content:''; position:absolute; inset:0; pointer-events:none; background:repeating-radial-gradient(circle at 108% 50%, transparent 0 18px, rgba(255,255,255,.07) 18px 19px); }
.mx-hero > * { position:relative; z-index:1; }
.mx-hero .mx-k { color:rgba(255,255,255,.75); }
.mx-hero .v { font-size:30px; font-weight:800; letter-spacing:-.6px; margin:4px 0 2px; }
.mx-hero .c { font-size:12.5px; color:rgba(255,255,255,.8); }
.mx-meta { margin-top:14px; }
.mx-meta .bar { height:8px; border-radius:5px; background:rgba(255,255,255,.18); overflow:hidden; }
.mx-meta .bar i { display:block; height:100%; border-radius:5px; background:#A5B4FC; }
.mx-meta .bar i.ok { background:#34D399; }
.mx-meta .ln { display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,.85); margin-top:6px; }
.mx-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mx-grid .mx-card { margin:0; padding:12px; }
.mx-grid .v { font-size:20px; font-weight:700; letter-spacing:-.3px; margin:4px 0 2px; white-space:nowrap; }
.mx-grid .c { font-size:11.5px; color:var(--mx-low); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mx-up { color:var(--mx-ok); font-weight:700; } .mx-dn { color:var(--mx-bad); font-weight:700; }
.mx-hero .mx-up { color:#6EE7B7; } .mx-hero .mx-dn { color:#FCA5A5; }
.mx-leg { display:flex; gap:12px; font-size:11px; color:var(--mx-mid); margin-bottom:4px; }
.mx-leg i { display:inline-block; width:12px; height:3px; border-radius:2px; vertical-align:middle; margin-right:4px; }
.mx-rk { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--mx-line); }
.mx-rk:last-child { border-bottom:0; }
.mx-rk .n { width:18px; color:var(--mx-warn); font-weight:700; font-size:12px; }
.mx-rk .nm { flex:1; min-width:0; font-size:13.5px; }
.mx-rk .bb { height:4px; border-radius:3px; background:color-mix(in srgb, var(--mx-ac) 12%, transparent); margin-top:5px; }
.mx-rk .bb i { display:block; height:100%; border-radius:3px; background:var(--mx-ac2); }
.mx-rk .vl { font-weight:700; font-size:13px; color:var(--mx-ac); white-space:nowrap; }

/* Oportunidades */
.mx-opp { padding:14px; }
.mx-opp-top { display:flex; gap:12px; align-items:flex-start; }
.mx-score { width:46px; height:46px; border-radius:12px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:16px; line-height:1; cursor:pointer; border:0; font-family:inherit; }
.mx-score small { font-size:8.5px; font-weight:700; letter-spacing:.5px; opacity:.85; margin-top:3px; }
.mx-score.quente { background:#DC2626; } .mx-score.morno { background:#D97706; } .mx-score.recompra { background:#4F46E5; } .mx-score.frio { background:#64748B; }
.mx-opp .nm { font-weight:700; font-size:15.5px; line-height:1.25; }
.mx-opp .sb { font-size:12px; color:var(--mx-low); margin-top:3px; }
.mx-mot { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.mx-mot span { font-size:11.5px; background:color-mix(in srgb, var(--mx-mid) 10%, transparent); color:var(--mx-mid); border-radius:999px; padding:4px 9px; }
.mx-nums { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; padding-top:10px; border-top:1px solid var(--mx-line); }
.mx-nums div { min-width:0; }
.mx-nums .l { font-size:10.5px; color:var(--mx-low); font-weight:600; }
.mx-nums .v { font-size:13.5px; font-weight:700; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mx-det { margin-top:10px; background:color-mix(in srgb, var(--mx-ac) 6%, transparent); border-radius:12px; padding:10px 12px; font-size:12.5px; }
.mx-det div { display:flex; justify-content:space-between; padding:3px 0; }
.mx-det b { color:var(--mx-ac); }

/* botão para voltar à versão celular quando o usuário escolheu a versão completa no celular */
#mx-voltar { position:fixed; left:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:4000; border:0; border-radius:999px; background:#1B1A3F; color:#fff; font:600 13px 'Inter', system-ui, sans-serif; padding:10px 14px; box-shadow:0 8px 20px rgba(0,0,0,.25); display:flex; gap:6px; align-items:center; }

/* elementos flutuantes da versão completa que cobririam a barra de abas */
html.mx-on #ex2-badge, html.mx-on #ex2-painel, html.mx-on.mx-logado .lx-burger { display:none !important; }