/* O player das cenas (abas, controles e legenda). */
.apps-acao{padding-block:40px 90px}.apps-acao .titulo-centro>p:last-child{max-width:640px}
.demo-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:32px 0 24px}
.demo-tabs button{border:1px solid var(--line);background:transparent;color:var(--muted);font:500 13px var(--font-body);padding:10px 16px;border-radius:var(--raio-md);cursor:pointer}
.demo-tabs button[aria-pressed=true]{background:var(--panel);border-color:var(--accent-txt);color:var(--accent-txt)}
.demo-tabs button:hover{color:var(--txt)}
/* O player cabe inteiro na tela: no máximo 920px e nunca mais alto que a janela menos cabeçalho e controles. */
.demo-player,.demo-caption{width:100%;max-width:min(920px,calc((100svh - 210px)*1100/620));margin-inline:auto}
.demo-player{border:1px solid var(--line);border-radius:var(--raio-lg);overflow:hidden;background:var(--panel-2);box-shadow:var(--sombra-popover)}
.demo-player:fullscreen{max-width:none;display:flex;flex-direction:column;justify-content:center;background:var(--bg);border:0;border-radius:0}
.demo-screen{width:100%;aspect-ratio:1100/620;position:relative;overflow:hidden;background:#f0f0f3}
.demo-player:fullscreen .demo-screen{max-width:calc((100vh - 76px)*1100/620);align-self:center}
.demo-controls{display:flex;align-items:center;gap:18px;padding:15px 22px;border-top:1px solid var(--line);background:var(--panel-2)}
.demo-controls button{width:36px;height:34px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--txt);font-size:16px;flex-shrink:0;cursor:pointer}
.demo-controls button:hover{border-color:var(--accent-txt)}
.demo-controls input{min-width:50px;flex:1;accent-color:var(--accent-txt);cursor:pointer}
.demo-time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.demo-caption{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:28px;align-items:center}
.demo-module-name{font-size:11px;letter-spacing:.08em;color:var(--accent-txt);margin:0 0 8px}
.demo-title{font-size:24px;font-weight:500;line-height:1.25}
.demo-description{color:var(--muted);font-size:13px;line-height:1.6;margin:12px 0 0;max-width:540px}
.demo-steps{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
.demo-steps>span{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px}
.demo-steps b{display:grid;place-items:center;width:23px;height:23px;flex-shrink:0;font-size:10px;border:1px solid var(--line);border-radius:50%;font-weight:500}
.demo-steps .active{color:var(--txt)}.demo-steps .active b{background:var(--accent);border-color:var(--accent);color:#fff}
.demo-steps .complete b{color:var(--accent-txt);border-color:var(--accent-txt)}
.demo-status{font-size:12px;color:var(--muted)}
@media(max-width:700px){.apps-acao{padding-block:20px 55px}.demo-tabs{gap:6px;margin-top:25px}.demo-tabs button{font-size:11px;padding:8px 10px}.demo-controls{padding:10px;gap:9px}.demo-controls button{width:30px;height:30px;font-size:13px}.demo-time{font-size:9px}.demo-caption{grid-template-columns:1fr;gap:22px;margin-top:22px}.demo-title{font-size:23px}.demo-steps{gap:14px}.demo-steps>span{font-size:10px}.demo-player{border-radius:8px}}

/* ─────────────────────────────────────────────────────────────────────────
   As telas, copiadas dos aplicativos (26/09/2026): Poppins, barra lateral
   azul-marinho com o item ativo em roxo, conteúdo claro ou escuro como cada
   app mostra, tabelas e selos com as mesmas cores. Tudo é HTML: nenhuma
   gravação, nenhum dado real.
   ───────────────────────────────────────────────────────────────────────── */
.demo-canvas{--na-roxo:#6C3BFF;--na-roxo-txt:#8b6bff;--na-lateral:#1f2a3a;--na-lateral-txt:#d6dae2;
  width:1100px;height:620px;position:absolute;left:0;top:0;transform-origin:0 0;display:flex;overflow:hidden;
  font:12px/1.35 Poppins,Inter,"Segoe UI",system-ui,sans-serif;pointer-events:none;user-select:none;letter-spacing:0}
.demo-canvas.na-claro{--na-fundo:#f0f0f3;--na-cartao:#fff;--na-linha:#e4e4ea;--na-txt:#161a23;--na-mudo:#6b7280;--na-cab:#f6f6f9;background:var(--na-fundo);color:var(--na-txt)}
.demo-canvas.na-escuro{--na-fundo:#1e222a;--na-cartao:#253241;--na-linha:#344255;--na-txt:#f1f3f6;--na-mudo:#a3acb9;--na-cab:#27313f;background:var(--na-fundo);color:var(--na-txt)}
.demo-canvas *{box-sizing:border-box}
/* Barra lateral */
.na-side{width:196px;flex:none;background:var(--na-lateral);color:var(--na-lateral-txt);display:flex;flex-direction:column;padding:16px 8px 12px}
.na-marca{display:flex;align-items:center;gap:9px;padding:0 6px}.na-marca img{width:24px;height:24px}
.na-marca b{display:block;color:#fff;font-size:12.5px;font-weight:600;line-height:1.2}.na-marca span{color:#a78bfa;font-weight:600;font-size:12.5px}
.na-empresa{font-size:9.5px;color:#aeb5c2;margin:12px 6px 10px}
.na-nav{display:flex;flex-direction:column;gap:3px}
.na-nav>span,.na-rodape>span{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:12px;color:var(--na-lateral-txt)}
.na-nav>span i,.na-rodape>span i{width:13px;height:13px;border:1.6px solid currentColor;border-radius:3px;opacity:.85;flex:none}
.na-nav>span.ativo{background:var(--na-roxo);color:#fff;font-weight:500}
.na-rodape{margin-top:auto;border-top:1px solid #2f3b4d;padding-top:8px}
.na-pessoa{display:flex;align-items:center;gap:9px;padding:8px 8px 0}.na-pessoa em{width:28px;height:28px;border-radius:50%;background:#2d2f5e;color:#9d85ff;display:grid;place-items:center;font:600 10px Poppins,sans-serif}
.na-pessoa b{display:block;color:#fff;font-size:11.5px;font-weight:500}.na-pessoa small{font-size:9.5px;color:#aeb5c2}
/* Conteúdo */
.na-main{flex:1;min-width:0;padding:20px 24px;position:relative;display:flex;flex-direction:column;gap:12px}
.na-main h1{font:500 21px Poppins,sans-serif;margin:0;letter-spacing:-.01em}.na-sub{margin:2px 0 0;color:var(--na-mudo);font-size:11.5px}
.na-resumo{margin:6px 0 0;font-size:13px}.na-resumo b{font-weight:600}
.na-aviso{border:1px solid var(--na-linha);background:var(--na-cartao);border-radius:10px;padding:9px 12px;color:var(--na-mudo);font-size:11px}
.na-filtro{font-size:11px;color:var(--na-mudo)}.na-filtro b{color:var(--na-txt);font-weight:600}.na-filtro u{text-underline-offset:2px}
.na-tabela{background:var(--na-cartao);border:1px solid var(--na-linha);border-radius:10px;overflow:hidden}
.na-tabela .na-tr{display:grid;align-items:center;gap:10px;padding:0 14px;min-height:40px;border-top:1px solid var(--na-linha);font-size:11.5px;transition:background .4s,opacity .5s}
.na-tabela .na-tr:first-child{border-top:0;background:var(--na-cab);color:var(--na-mudo);min-height:32px;font-size:10.5px}
.na-tabela .na-tr.realce{background:rgba(108,59,255,.07)}.demo-canvas.na-escuro .na-tabela .na-tr.realce{background:rgba(139,107,255,.13)}
.na-tr .dir{text-align:right}.na-tr u{text-underline-offset:2px}.na-tr small{color:var(--na-mudo);font-size:10px;margin-left:5px}
.na-mono{font-family:ui-monospace,Consolas,monospace;font-size:10.5px}
.na-selo{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10.5px;font-weight:500;background:var(--na-cab);border:1px solid var(--na-linha);white-space:nowrap;transition:background .3s,color .3s}
.na-selo.vermelho{background:#fde2e4;color:#c0262d;border-color:#fde2e4}.na-selo.amarelo{background:#fdf1dc;color:#8a5a00;border-color:#fdf1dc}
.na-selo.verde{background:#dcf5e7;color:#0d7a45;border-color:#dcf5e7}.na-selo.roxo{background:#ece6ff;color:#5b2ee6;border-color:#ece6ff}
.demo-canvas.na-escuro .na-selo.verde{background:#12422e;color:#5fe3a1;border-color:#12422e}.demo-canvas.na-escuro .na-selo.roxo{background:#33296b;color:#c6b6ff;border-color:#33296b}
.na-btn{display:inline-flex;align-items:center;gap:6px;background:var(--na-roxo);color:#fff;border-radius:8px;padding:7px 13px;font-weight:500;font-size:11.5px;transition:transform .12s,background .3s}
.na-btn.claro{background:var(--na-cab);color:var(--na-txt);border:1px solid var(--na-linha)}
.na-btn.largo{display:flex;justify-content:center;width:100%}.na-btn.pressionado{transform:scale(.96)}
.na-link{color:var(--na-roxo-txt);text-decoration:underline;text-underline-offset:2px}
.na-campo{display:flex;flex-direction:column;gap:4px;font-size:10.5px;color:var(--na-mudo)}
.na-campo>span:last-child{border:1px solid var(--na-linha);background:var(--na-cartao);color:var(--na-txt);border-radius:8px;padding:7px 10px;min-height:31px;font-size:12px;transition:border-color .2s,box-shadow .2s}
.na-campo.foco>span:last-child{border-color:var(--na-roxo);box-shadow:0 0 0 3px rgba(108,59,255,.15)}
.na-campo .vazio{color:#9aa1ad}
.na-caixa{background:var(--na-cartao);border:1px solid var(--na-linha);border-radius:12px;padding:14px 16px}
.na-caixa h3{font:500 12.5px Poppins,sans-serif;margin:0 0 10px}
.na-grade{display:grid;gap:12px}
/* Janela sobre a tela */
.na-veu{position:absolute;inset:0;background:rgba(17,20,28,.35);opacity:0;transition:opacity .25s;display:grid;place-items:center}
.na-veu.aberto{opacity:1}
.na-janela{width:360px;background:var(--na-cartao);border:1px solid var(--na-linha);border-radius:14px;padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:12px;transform:translateY(10px);transition:transform .25s}
.na-veu.aberto .na-janela{transform:none}.na-janela h3{margin:0;font:500 14px Poppins,sans-serif}.na-janela p{margin:-6px 0 0;color:var(--na-mudo);font-size:11px}
.na-lista-op{position:absolute;background:var(--na-cartao);border:1px solid var(--na-linha);border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.18);padding:4px;opacity:0;transition:opacity .15s;z-index:3}
.na-lista-op.aberto{opacity:1}.na-lista-op span{display:block;padding:6px 10px;border-radius:6px;font-size:11.5px}.na-lista-op span.marcado{background:rgba(108,59,255,.12);color:var(--na-roxo-txt)}
/* Kanban do CRM */
.na-filtros{display:flex;gap:8px}.na-filtros>span{border:1px solid var(--na-linha);background:var(--na-cartao);border-radius:8px;padding:6px 10px;font-size:10.5px;color:var(--na-txt)}
.na-filtros>span:first-child{width:130px;color:#9aa1ad}
.na-kanban{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;flex:1;min-height:0}
.na-col{background:#f7f7fa;border:1px solid var(--na-linha);border-radius:10px;display:flex;flex-direction:column;min-height:0;transition:background .3s,border-color .3s}
.na-col-topo{padding:9px 10px;border-bottom:1px solid var(--na-linha)}.na-col-topo div{display:flex;justify-content:space-between;font-weight:600;font-size:11.5px}
.na-col-topo div span{color:var(--na-mudo);font-weight:400}.na-col-topo strong{color:var(--na-roxo);font-weight:500;font-size:11px}
.na-col-corpo{padding:7px;display:flex;flex-direction:column;gap:7px;flex:1;position:relative}
.na-col.ganho{background:#effaf4;border-color:#bfe9d1;border-style:dashed}.na-col.ganho .na-col-topo strong{color:#0d7a45}
.na-col.ganho.alvo{background:#dff5e8;border-color:#35b877;border-style:solid}
.na-col-dica{margin:auto;text-align:center;color:#6fa98b;font-size:10.5px;padding:0 10px;transition:opacity .2s}
.na-card{background:#fff;border:1px solid var(--na-linha);border-radius:9px;padding:8px 9px 8px;position:relative;box-shadow:0 1px 2px rgba(16,24,40,.05);transition:box-shadow .2s}
.na-card:before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;border-radius:9px 9px 0 0;background:var(--faixa,#f06a5d)}
.na-card b{display:block;font-weight:500;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.na-card small{display:block;color:var(--na-mudo);font-size:9.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.na-card strong{display:block;font-weight:600;font-size:11.5px;margin:4px 0}
.na-card-l{display:flex;justify-content:space-between;align-items:center}.na-card-l i{font-style:normal;color:var(--na-mudo);font-size:9px}
.na-termo{font-size:9.5px;font-weight:500;border-radius:20px;padding:1px 7px}.na-termo:before{content:"● ";font-size:7px;vertical-align:1px}
.na-termo.quente{background:#fde7e5;color:#e0463b}.na-termo.frio{background:#e5eeff;color:#2f6fe4}.na-termo.morno{background:#fbf0de;color:#8a5a00}
.na-dono{display:flex;align-items:center;gap:6px;margin-top:6px;color:#4b5563;font-size:10px}.na-dono em{width:18px;height:18px;border-radius:50%;background:#ece6ff;color:#5b2ee6;font:600 7.5px Poppins,sans-serif;display:grid;place-items:center;font-style:normal}
.na-card.arrastando{box-shadow:0 18px 34px rgba(16,24,40,.22);z-index:5}
.na-card .na-ganhou{display:none;margin-top:6px}.na-card.ganhou .na-ganhou{display:inline-block}
/* Barra de progresso (PCP) */
.na-prog{display:flex;align-items:center;gap:7px}.na-prog i{flex:1;height:6px;border-radius:4px;background:#e7e7ee;overflow:hidden;position:relative}
.na-prog i b{position:absolute;left:0;top:0;bottom:0;background:var(--na-roxo);border-radius:4px}
.na-prog span{font-size:10.5px;color:var(--na-mudo);min-width:52px;text-align:right}
/* Spinner */
.na-gira{width:11px;height:11px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:na-gira .8s linear infinite}
@keyframes na-gira{to{transform:rotate(360deg)}}
/* Gráfico (Intelligence) */
.na-kpis{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:10px}
.na-kpi{background:var(--na-cartao);border:1px solid var(--na-linha);border-radius:12px;padding:12px 14px}.na-kpi span{color:var(--na-mudo);font-size:10.5px}
.na-kpi strong{display:block;font:500 21px/1.3 ui-monospace,Consolas,monospace;margin-top:4px}.na-kpi small{color:var(--na-mudo);font-size:10.5px}
.na-seletor{position:absolute;right:24px;top:22px;border:1px solid var(--na-linha);background:var(--na-cartao);border-radius:10px;padding:7px 12px;min-width:118px;font-size:12px;display:flex;justify-content:space-between;gap:10px}
.na-grafico svg{width:100%;height:170px;display:block}
/* O cursor e o aviso de resultado */
.demo-cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:20;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));will-change:transform}
.demo-cursor:after{content:"";position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:50%;border:2px solid rgba(108,59,255,.8);opacity:0;transform:scale(.4)}
.demo-cursor.clique:after{animation:na-clique .35s ease-out}
@keyframes na-clique{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}
.ui-toast{position:absolute;right:22px;bottom:18px;z-index:15;display:flex;align-items:center;gap:9px;background:#fff;color:#161a23;border:1px solid #d9dde5;border-left:4px solid #1f9d5c;border-radius:10px;padding:11px 16px;font:500 12px Poppins,sans-serif;box-shadow:0 12px 28px rgba(0,0,0,.18);opacity:0;transform:translateY(12px);transition:transform .35s}
.ui-toast b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#1f9d5c;color:#fff;font-size:11px}
.ui-toast.visivel{opacity:1;transform:none}
/* Listas de escolha, caixa de seleção e marcador de opção */
.na-opcoes{max-height:0;overflow:hidden;opacity:0;border:0 solid var(--na-linha);background:var(--na-cartao);border-radius:8px;margin-top:-6px;transition:max-height .2s,opacity .2s}
.na-opcoes.aberto{max-height:140px;opacity:1;border-width:1px;padding:4px}
.na-opcoes span{display:block;padding:6px 10px;border-radius:6px;font-size:11.5px}.na-opcoes span.marcado{background:rgba(108,59,255,.14);color:var(--na-roxo-txt)}
.na-opcoes.flutua{position:absolute;right:24px;top:60px;width:130px;margin:0;z-index:4;box-shadow:0 12px 26px rgba(0,0,0,.3)}
.na-radio{width:14px;height:14px;border-radius:50%;border:1.6px solid var(--na-mudo);display:inline-block;transition:border-color .2s,box-shadow .2s}
.na-radio.marcado{border-color:var(--na-roxo-txt);box-shadow:inset 0 0 0 3px var(--na-cartao),inset 0 0 0 8px var(--na-roxo-txt)}
.na-caixinha{width:14px;height:14px;border-radius:4px;border:1.6px solid var(--na-mudo);display:inline-grid;place-items:center;font-size:10px;color:#fff}
.na-caixinha.marcado{background:var(--na-roxo);border-color:var(--na-roxo)}.na-caixinha.marcado:after{content:"✓"}
.na-campo:not(:has(>span:first-child:not(:empty)))>span:first-child{display:none}